/******************************************************************************************/
/* Journal Master Pro - bootstrap override css */
/******************************************************************************************/


h2:not(:first-of-type) {
    margin-top: 3rem;
}

.left-indent {
    margin-left: 2rem !important;
}


/* JQuery Timepicker. */
.ui-timepicker-standard {
    font-size: .9em;        /* Change the font size of the dropdown menu. */
}


/* Letter icons for the campground name. */
.letter-circle {
    /* background-color: #ff6347; /* Tomato color -- color is dynamically allocated based on the campground type defined in jmp.php. */
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;   /* Note that without the -flex it turns into an oval. */
    justify-content: center;
    align-items: center;
    color: white; /* Letter color */
    font-size: 14px;
    font-weight: bold;
}



/* Flexslider */

div.flex-viewport {
    /*height: 200px;      /* this makes the box bigger but the captions are still not visible. */
}
ul.slides {
    /*height: 300px;      /* same with this one. */
}


/* Crop the flixslider images to the desired height. */
/* This was cropping off the captions!
.flexslider .slides > li {
    overflow:hidden;
    position:relative;
    height:102px;
}
 */

.flexslider .slides img {
    height:auto;
}

/* Note: captions are only showing when the image is unavailable. (needs more work) */
p.flex-caption {
    font-size: .8em;
}

/* Line across the filmstrip bottom
.flex-control-nav {
    background: blue;
}
 */

ul.flex-direction-nav {
    /* height: 0;      Increasing this moves the arrows down. */
}

li.flex-nav-prev, li.flex-nav-next {
    /* doesn't seem to select anything to change.
       height: 4em; moves the arrows down.
    */
}

/*.flexslider:hover .flex-direction-nav .flex-prev:hover { */
a.flex-prev, a.flex-next {
    height: 3em;        /* This does properly change the height of the arrow display area.
                            Has to be at least 3 to not cut off the arrow. At 6em, it shows Next/Prev. */

    /*  It appears that you have to have the font family and weight on each arrow selector below.
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 24px;
    display: inline-block;
    color: rgba(255, 20, 20, 0.9);
    color: blue;
    background: yellow;     /* This does target both arrow boxes. */


}

/* This works to change the arrows, but I like the default Flexslider ones better.
.flex-direction-nav a.flex-next:before {
    font-family: 'Font Awesome 6 Free';
    content: '\f0a9';
}
.flex-direction-nav a.flex-prev:before {
    font-family: 'Font Awesome 6 Free';
    content: '\f0a8';
}
 */


/*  Fotorama.
    This is the whole caption text area left to right across the image canvas. */
.fotorama__caption {
    text-align: center;     /* Center the captions (if used). */
}
/*  This is just the area around the caption text.
    Needs the div in order to target. */
div.fotorama__caption__wrap {
    /*opacity: 10%;     This applies to the text in the caption too. */
    background-color: rgba(250, 250, 250, .6);
    border-radius: 6px;
    margin-bottom: 2px;     /* Just move it off the bottom of the image a smidge. */
}


/* A generic spacer line. Generally used on a <div>. */
.spacer-line {

    /*background-color: blue;
    color: lightblue;
    border-color: lightcoral;*/
    opacity: 0.5;

    height: 1px;

    width: 78%;
    margin-right: auto;
    margin-left: auto;

    display: block;
    margin-top: 0.3em;
    margin-bottom: 0.4em;

    overflow: auto;
    border-style: inset;    /* This gets rid of the bottom border and keeps the top so you can shrink to 1 px. */
    border-width: 1px;
}


/******************************************************************************************/
/* Form display and controls styling */
/******************************************************************************************/
/* Note: .form-crud is a specific class to refer to a standard CRUD form.
    Without that, most of these settings would impact things like the login form, icon alignment
    and other labels and form-groups.
    */
/* Whole form positioning. */
form.form-crud {
    padding-bottom: 20px; /* Control the space between the bottom of the form and the footer (or other content). */

    /* Overriding (eliminating) the standard eoc-helpers form crud background color. */
    background: transparent;
}


div.form-group {
    margin-bottom: .2em;    /* Search this -> it's in 3 spots!! (really should be a sass variable or something. )*/
}


/* To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud input.form-control {
    /*width: 240px;     Causes the system information to wrap when using col-md-7 with a sidebar. */
    width: 100%;        /* More responsive and matches <select> now. */
    /*font-size: smaller;*/
}
/* To ensure a consistent layout - make all the form-control <inputs> & <select> the same width. */
/* Clean up the standard Bootstrap form-group spacing.
    Note: specifically leaving out <textarea> from this since it has a Controls facility for setting the number of rows.
*/
form.form-crud input.form-control,  form.form-crud select.form-control {
    width: 100%;            /* More responsive and matches <input> now. */
    font-size: smaller;     /* Keep this in sync with the form-control.form-textarea below here. */
    margin-top: 0;          /* Tighten up the default space between form fields. */
    margin-bottom: 3px;     /* Breathing room between form <input> controls. Make sure and change the form-control.form-textarea to match this +7. */
    height: 38px;           /* Needed to ensure consistency with all control types for rows tp line up. */
}



/* Wider <input> - To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud .form-control.input-wide {
    /*width: 580px;*/
    width: 100%;
}

/* Wider <input> - To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud .form-control.input-medium {
    width: 400px;
}

/* Wider <input> - To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud .form-control.input-narrow {
    width: 8em;
}

/* Except for text inputs. */
form.form-crud .form-control.form-textarea {

    margin-left: 0;
    margin-top: 0;
    width: 100%;
    font-size: smaller;

    /*width: 43.5em;        /* this works when element font size is set to smaller. */

    /*width: 36.25em;         /* this works when element font size is left to default. */
    /*margin-bottom: .2em;    /* Add space between form fields. KEEP IN SYNC WITH div.form-group below. */


    /* For some reason this isn't working below in the div.form-group selector. */


    /*height: 4em;          /* Set the initial height of the <textarea> (about 2 rows of text). */
    /* This properly follows the rows setting in the element now. */



    /* All in use (this top section) on eesfm. */
    /*width: 73%; /* This seems to work best for the most general use of the textarea. */
    /*margin-left: 150px; /* Make this the same size as the <label> width + 10 */
    /*margin-top: -35px; /* Then we can move the <textarea> back up next to the label if we want. */
    /*margin-bottom: 5px; /* Same spacing to next control as all other controls. */
    /*padding-bottom: 14px; /* Bottom margin for the text inside the text area */


    /*width: 79.5%; /* From an individual page. */



    /* Previous experiments and notes. */
    /*width: 184%;                      /* Moved this to the Contacts detail template. Needed when inside of an md-9 */

    /*  Weird; so the 184% is for a
        <div class="row collapse multi-collapse1">
        <div class="row">
        <div class="col-md">
        <div class="form-group d-inline">
            <textarea> in here
        </div>
        </div>
        </div>
        </div>
     */

    /*height: 100%;*/ /* 100% makes it too big when selecting rows less than 4. (?) */

}

/* TinyMCE */
/* Seems to all be handled by markup now in stay-show-section-2.blade.php
textarea#texteditor {
    width: auto;
}

 */


/* Radio buttons still use a form-control for layout purposes.
    So turn off the outline until there's some kind of error.
*/
form.form-crud div.form-control.form-radio { /* form-radio is set in the Form class */
    border-color: transparent;
}


/* The .fielderror class is set in the Form class from the backside data validation check.
    Note: the second selector is needed in order to specifically override the transparent border radio button control above.
*/
form.form-crud .form-control.fielderror, form.form-crud div.form-control.form-radio.fielderror {
    border: 2px solid red;
}

form.form-crud label.fielderror {
    color: red;
}

/* Larger Radio buttons for mobile friendly. */
form.form-crud div.form-group input[type="radio"] {
    padding-top: 0;
    margin-top: -0.2em;
    margin-right: 0.2em;
    height: 1.6em;
    width: 1.6em;
}

/* Ensure a consistent form control height. THIS HORRIBLY BREAKS TINYMCE */
form.form-crud div.form-group, :not(textarea), :not(.btn), :not(input[type="radio"]) {
    /*height: 2em;           /* Needed to ensure consistency with all control types for rows to line up. */
}

/* Clean up the standard Bootstrap form-group spacing. */
/* Note: sometimes using <p class="form-control"> to create display only fields that look like a form input. */
form.form-crud div.form-group {
    /*padding-top: 2px;*/
    margin-bottom: .2em;     /* Add a little space between form fields. DO THE SAME FOR .form-textarea above. */
}
/* Note: sometimes using <p class="form-control"> to create display only fields that look like a form input. */
/* There is some interaction somewhere else that this cleans up. */
p.form-control {
    margin-bottom: 0;     /* Add a little space between form fields. DO THE SAME FOR .form-textarea above. */
}


/* Use to create a row spacer between form elements. */
form.form-crud div.row.form-space {
    height: 38px;
}

/* Setup all CRUD form <label> styling here. */
form.form-crud label, form.form-crud .form-inline label {
    font-size: small;

    text-align: left !important;        /* Moving the labels back over the top of the fields instead of to the left. Better for mobile. */

    /* Looks like the .form-inline class is changing this back to left justified. */
    /*text-align: right !important; /* This one does work but can be overridden by certain html form control markup. */

    /*justify-content: right !important; /* This one actually changed the text alignment ONCE - then the next day it broke again!! */
    /*color: #666;*/

    /*color: gray;*/
    /*color: #4C4C4C;     /* a little darker than just plain grey. */
    color: #5F5F5F;

    font-weight: 300;
    font-style: italic;
    /*width: 120px;             Letting this float now since we moved them to the top of the fields.*/
    /* Need to force a standard label width; Without this nothing lines up.
                         Note that if you change this you must change the <textarea> left margin. */
    /*margin-right: 8px;     /* Space between the left of the input control and the label. */
    margin-left: 6px;
    margin-top: .7em;       /* Center the label vertically on the input control. */
    /*margin-left: 8px;*/
}

/* Use a label class on to get the same affect as a form label on some other element. */
.label {
    font-size: small;
    /* Looks like the .form-inline class is changing this back to left justified. */
    /*text-align: right !important; /* This one does work but can be overridden by certain html form control markup. */
    color: gray;
    font-weight: 300;
    font-style: italic;
    margin-right: 10px; /* Space between the left of the input control and the label. */
    margin-top: 8px; /* Center the label vertically on the input control. */
}

/* Used only on the radio buttons to create a clickable text area around the text.
    Basically this needs to reset anything done by the form.form-crud label above.
*/
div.form-control.form-radio div.form-check.form-check-inline label.radio-empty {
    display: inline-flex;
    margin-top: 4px; /* Centering label across from the radio button. */
    margin-bottom: 4px;
    padding: 0;
    width: auto; /* Reset the width so it's not the same as the <input>. */
}


/* Don't limit the size of a radio button to the same size as an <input> */
div.form-control.form-radio {
    /*margin-top: 3px;      /* Line the buttons up with the label. BUT THIS CHANGES THE HORIZONTAL ALIGNMENT. */
    width: auto; /* Reset the width so it's not the same as the <input>. */
    /*border: none;         /* You can use this to kill the border around the radio buttons. (use on the per page css) */
}

/* And then this is the actual text display by each radio button choice. */
.radio-text {
    margin-top: -3px; /* Line the radio button choice up with the actual radio buttons. */
    margin-left: -6px; /* Need to bring the span back to encompass the radio button. */
    padding-left: 8px; /* Then give the text inside the space some breathing room between the choice and the button. */
    padding-right: 4px; /* And extend the clickable area past the text a little bit. */
    font-style: normal; /* Reset the settings made of all other form labels. */
    font-weight: normal;
    color: black;
}

/* Used to emphasize certain explanation text on a form */
.form-em {
    font-size: small; /* Same as labels */
    font-weight: 400; /* Heavier than labels */
    font-style: italic;
    color: darkgreen;
    padding: 0;
    margin: 0;
    /*margin-top: 8px        /* Umm -- this is fine it wraps;  Get this to line up with a label so we can use it as informational data next to a label. */
    /*font-size: 90%;        /* Causes wrapping too soon -- before full width. */
}

form.form-crud label.form-required {
    font-weight: bold;
}

/* lighten up the text inside any disabled <input>, <textarea> fields */
form.form-crud input[readonly], form.form-crud textarea[readonly] {
    color: darkgray;
    /*color: lightslategray;*/
}


/* Styling for any placeholder text. */
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    /* ncolor: lightblue; */
    color: #cbcbcb;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
    color: #cbcbcb;
}

.form-control:-ms-input-placeholder { /* IE 10+ */
    color: #cbcbcb;
}

.form-control:-moz-placeholder { /* Firefox 18- */
    color: #cbcbcb;
}



.clear-me {
    clear: both;
}

/* The security level separator heading on forms.
        Sections off form into areas - like private data only, etc.
        */
p.form-header-security, p.form-header-information, form-header-security a {

    /*
    margin-left: 20px;    Looks a little better if it's not dead against the form's bounding box.
    margin-right: 20px;
    margin-top: 12px;     Need this tight when collapsable -- but breathing room for regular form headers.
    margin-bottom: 12px;
    */
    tab-index: 2;
    font-weight: bold;
    font-style: normal;
    border-bottom: solid 1px;
}

/* Change the color of the form's information header after setting its other attributes above.
p.form-header-information {
    color: darkgray;
}
*/

/* Change the color of the form's information header after setting its other attributes above. */
p.form-header-security {
    color: darkred;
}

/* If you use collapse on the form-header-security, then you can style it here. */
p.form-header-security a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

p.form-header-security a:before {
    content: "+";
    /*margin-right: 4px;*/
}

/* p.form-header-security a:hover {  Can't get just the a:hover to target without going directly to the class name. */
p.form-header-security:hover {
    color: forestgreen;
    /* !important;  Causes a child compile error running npm run dev. */
}




.social-icons {
    font-size: 1.6em;
}

/******************************************************************************************/
/* Datatables overrides */
/******************************************************************************************/

/* div#datatable_wrapper {      When you have more than one per page this becomes a problem. */
div[id^="datatable"][id$="_wrapper"].dataTables_wrapper { /* Note: this will match id=datatables-activity, etc. */

    margin-top: 12px; /* Give just a little breathing room between datatable and the page header area. */
    font-size: small;
}

/* Links inside of a Datatables row. (Regular text in the cell defaults to black.) */
/* REMEMBER: To use the class="dt-active" on the <a> tag. */
table[id^="datatable"] a, [class^="sorting"] a, a.dt-active {
    color: darkblue;
}

/* Items that are either archived or not active. */
/* Note: including the table#datatable id tag to ensure that we are styling all links too. */
table[id^="datatable"] td.dt-inactive, table[id^="datatable"] td.dt-inactive a, .dt-inactive {
    color: darkgray;
}

/* td.inactive[class^="sorting"] a */
td.dt-inactive.sorting_1 a, td.dt-inactive a {
    color: darkgray;
}

/* Incomplete calls in the Activity List. */
/* We're not consistently targeting the sorting_1 (something is overwriting it) so did that in jquery in the page. */
td.dt-incomplete.sorting_1, td.dt-incomplete {
    background: yellow;
}

/* Deferred calls in the Activity List. */
/* We're not consistently targeting the sorting_1 (something is overwriting it) so did that in jquery in the page. */
td.dt-deferred.sorting_1, td.dt-deferred {
    background: lightgreen;
}

/******************************************************************************************/
/* Datatables: Override the default search box styling and add a glow on focus. */
/******************************************************************************************/
div[id^="datatable"][id$="_filter"].dataTables_filter {
    margin-bottom: 12px; /* Distance between the Search box and the header row of the table. */
}

div[id^="datatable"][id$="_filter"].dataTables_filter input {
    /*div#datatable_filter.dataTables_filter input { */
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 2px 1px 3px 6px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
}

div[id^="datatable"][id$="_filter"].dataTables_filter input:focus {
    /*div#datatable_filter.dataTables_filter input:focus { */
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 2px 1px 3px 6px;
    border: 1px solid rgba(81, 203, 238, 1);
}

div[id^="datatable"][id$="_filter"].dataTables_filter label {
    /*div#datatable_filter.dataTables_filter label { */
    display: inline; /* Needed to get the label to show on the left side of the search input -- at least when in a tab. */
    color: gray;
    font-style: italic;
}