/* ecoFramework Override & Custom CSS */

/*
/* https://www.color-hex.com */
/******************************************************************************************/
/*
SYSTEM and PAGE MESSAGES ORDER

    Navbar
    System Banner
    Page Name
    Page Heading
    LinkBar
    CRUD Heading
    standard flash messages
*/
@media screen {

    body {
        font-size: .96em; /* Default - non-altered system font size. */
    }


    a {
        color: darkblue; /* System wide link color if not specified elsewhere. Note: Datatables section does specify its own. */
    }

    /* The small contact phone in places like; contact lists, site list pin label, etc,*/
    img.photo-small-round, img.result {
        height: 30px;
        width: 30px;
        border-radius: 16px;
    }

    /* Used by Site Snapshot. */
    img.photo-medium-round {
        height: 56px;
        width: 56px;
        border-radius: 28px; /* Make it a circle. */
        margin-top: 0; /* Mostly you may be overriding these margins in the specific layout pages. */
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }


    /******************************************************************************************/
    /* Navigation Banner */
    /******************************************************************************************/
    /* logo in the banner */
    a.navbar-brand {
        border: none;
        height: 50px;
        width: 100px;
        display: inline-block;
        background: url("../../_includes/media_content/images/logo.png") no-repeat 0 0;
    }

    ul#navbar-content {
        margin-bottom: 4px; /* Bring down all of the items horizontally across the navbar. */
    }

    /*nav-link dropdown-
    /* Turn off the light blue outline around the main navigation dropdown menus. */
    .dropdown-toggle {
        outline: none;
    }

    /* When the site is something other than Live/ Production then
        display the site name message; show the SITE NAME constant.
        Color it to get your attention as appropriate.
    */
    span#system-page-notlive a {
        font-weight: bold;
        color: red;
    }

    /* The user notification badge. */
    /* Can't seem to get any combination of minus or plus margins to do anything. */
    #title-bar-badge {
        vertical-align: middle;
        margin-top: -2px;
    }


    /******************************************************************************************/
    /* Home page - page elements spacing */
    /******************************************************************************************/
    /* Home page - panel page elements */
    div.pageElements {
        margin-left: -10px;
        margin-right: -10px;
    }

    div.pageElements-first {
        margin-left: 8px;
        margin-right: -10px;
    }

    div.pageElements-last {
        margin-left: -10px;
        margin-right: 8px;
    }

    div.pageElements, div.pageElements-first, div.pageElements-last {
        margin-top: 8px;
        height: 500px; /* Fixed height of the page elements */
        /*height: 97%;*/
        margin-bottom: 6px;
    }

    .jumbotron-fluid {
        margin-top: -30px; /* Let the Jumbotron float up underneath the page banner area */
    }

    /******************************************************************************************/
    /* Fontawesome */
    /******************************************************************************************/
    /* Home page Font Awesome icons */
    i.fas {
        margin-right: 12px;
    }

    i.far {
        /* Page Titles Font Awesome icons */
        /* width: 34px; */

        /* 5/27/2022; Commenting out temporarily. Trying to get map toolbar icons in map-test. */
        /*font-size: .86em;
        margin-right: 4px;*/
    }


    /******************************************************************************************/
    /* Global page messages */
    /******************************************************************************************/
    /* Global system banner on the top of every page (directly under nav header) by default.
        Can be turned of with System::setPage_banner_show().
    */
    hr {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    #system-page-banner {

        z-index: 99; /* Used with position: to bring to the font - on top of the jumbotron */
        position: relative;
        align-content: center;
        text-align: center;
        font-size: medium;
        font-weight: bold;
        color: darkslateblue;
        border-top: solid lightgrey 1px;
        border-bottom: solid lightgrey 1px;
        background-color: rgba(255, 255, 255, 0.6);

    }

    /* Standard page name display at the top of every page; usually from Tbl_Pages.
        Can be turned of with System::setPage_name_show().
     */
    #system-page-name {
        /*background: lightcoral;*/
    }

    #system-page-name > h1 {
        font-weight: lighter;
        /*background: lightcoral;*/
    }

    /* Standard page descriptive heading displayed under the page name for every page; usually from Tbl_Pages.
        Can be turned of with System::setPage_heading_show().
     */
    #system-page-heading {
        margin-top: -12px; /* Page name is an H1 so overcoming some of that padding. */
        margin-bottom: 4px;
    }

    #system-page-heading > span {
        padding-left: 12px; /* Give a little indent on the left side for the page heading. */
        color: darkgray;
        font-style: italic;
        font-weight: lighter;
    }

    /* LinkBar with links to other pages in this modules group.
        Displays directly under the Page Heading area and must be set by the controller.
        Build it with into  System::setPage_linkbar()
        Turn on/off with    System::setPage_linkbar_show()
    */
    #system-page-linkbar {
        /*margin-top: -16px;*/
        /*background: yellow;*/
    }

    /* Optional CRUD heading provided bv the specific page controller.
        Displays directly under the LinkBar area and must be set by the controller.
        Set with            System::setPage_crud_heading()
        Turn on/off with    System::setPage_crud_heading_show()
     */
    #system-page-dynamic-heading {
        /*margin-top: -20px;*/
        /*background: red;*/
        color: gray;
        font-size: larger;
        font-weight: bold;
    }

    #system-page-dynamic-heading a { /* When applying links to page headers, remove the indication of a link. */
        color: inherit;
    }

    #system-page-dynamic-heading a:hover {
        text-decoration: none;
    }


    /* Standard system flash message.
        Displays below all other messages - right before main page content or form.
    */
    #system-page-flash-message {
        /*margin-top: -16px;*/
        /*background: orange;*/
        color: red;
        margin-bottom: 5px;
    }

    /* Base template provides an area to display all of the crud buttons for this form.
        - NOTE: not using this area since moving to Laravel

    #system-page-buttons {
    }

    #system-page-buttons .button-group {
        padding-bottom: 6px;        /* Give a little extra cushion between the top row of buttons and the data.
    }
    #system-page-buttons > .btn {
        margin-right: 4px;
    }
    /* Changed to responsive columns in the base template.
    #system-page-buttons > label {
        /*margin-right: -12px;        /* Line the buttons up with the first column of data.
    }
    */
    /* Set the spacing between the top/bottom of the buttons and the <hr> */
    .button-group {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    /* Set a space between the buttons. */
    .button-group > .btn {
        margin-right: 4px;
    }

    #system-page-option-block {
        margin-left: -10px;
        width: min-content;
        float: left;
    }

    #system-page-attention-message {
        /* CHECK IN THE base.blade template first and see which Bootstrap classes are being applied there. */
        padding-right: 2px; /* needed to square off (to looks) this message are with the rest of the header; left and right. */
        padding-left: 4px;

    }

    #system-page-attention-message h4 {
        /* CHECK IN THE base.blade template first and see which Bootstrap classes are being applied there. */
        border-radius: 4px; /* added so it matched the other rounded corners in the header area. */
    }


    /* Default img corner radius for images in the option block (Contact Photo).
        Contact photo is 128px so 64px = full circle.
        8/23/2022 update; This used to be only used for the contact photo. Now we're using it for the asset image too.
                          So will change that individually per page.
    */
    #system-page-option-block img {
        border-radius: 64px;
    }


    /******************************************************************************************/
    /* Animated Loading ellipsis. */
    /* Usage: <div class="loading">Counting lines</div> */
    /******************************************************************************************/
    .loading {
        /* font-size: 30px; */
    }

    .loading:after {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        -webkit-animation: ellipsis steps(4, end) 900ms infinite;
        animation: ellipsis steps(4, end) 900ms infinite;
        content: "\2026"; /* ascii code for the ellipsis character */
        width: 0;
    }

    @keyframes ellipsis {
        to {
            width: 1.25em;
        }
    }

    @-webkit-keyframes ellipsis {
        to {
            width: 1.25em;
        }
    }


    /******************************************************************************************/
    /* Panel Tabs */
    /******************************************************************************************/

    /* Set the size of the label on the tabs. */
    .nav-tabs {
        font-size: 0.85em;
    }


    /* This is the non-active links. */
    .nav-tabs > li > a {

        border-style: solid; /* Border not working here. (Maybe a bootstrap thing for not active?) */
        border-color: black;
        color: gray;

    }

    /* This targets the hover. */
    .nav-tabs > li > a:hover {
        border-style: solid; /* Border not working here. (Maybe a bootstrap thing for not active?) */
        border-color: red;
        background: lightgray;
    }

    /* This targets the active tab. */
    .nav-tabs > li.nav-item > a.active {
        border-style: solid;
        border-color: black; /* this border setting is working for active. */
        border-bottom: none;
        color: black;
    }

    /* This whole active content in the tab - not the tab label itself. */
    .tab-pane.active {
        /* font-size: .9em; */ /* Note: this affects all of the headings and form controls too! */
    }



    /******************************************************************************************/
    /* Standard Progress Modal */
    /******************************************************************************************/
    #progress-modal.modal-content {
        color: white;
        /* background: none; */
        /* opacity: 65%; */
        /* Set opacity to the background only -- not the text elements. */
        background: rgba(5, 5, 5, .6);
    }


    .modal-dialog {
        width: 880px;
    }


    /******************************************************************************************/
    /* Custom Elements */
    /******************************************************************************************/
    .vertical-center {
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* used for the banner display on demo and development sites and the flashing aged activity */
    /* @group Blink */
    .blink {
        -webkit-animation: blink .75s linear infinite;
        -moz-animation: blink .75s linear infinite;
        -ms-animation: blink .75s linear infinite;
        -o-animation: blink .75s linear infinite;
        animation: blink .75s linear infinite;
    }

    @-webkit-keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        50.01% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @-moz-keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        50.01% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @-ms-keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        50.01% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @-o-keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        50.01% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        50.01% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    /* @end */
    /* Used for setting opacity
    */
    .black-opacity-50 {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    /* Used to draw a separator line across the page - usually applied to a <p> tag */
    .spacer-line {
        clear: both;
        margin-top: 3px; /* You need a <label> tag if you have a blank right column; Otherwise the this 3px is not required. */
        margin-bottom: 7px;
        border-bottom: solid 1px;
        color: lightgrey;
    }

    /* Used for the 'spacer' form controls used to help hold the layout in place */
    .invisible {
        border: white;
    }


    /* Basic cards */
    .card-body.pre-scrollable {
        overflow-y: auto; /* Hide the scroll bar if not needed */
        padding-bottom: 0;
    }


    /******************************************************************************************/
    /* Sidebar Card control
        Note - This is used for the Contacts Detail page sidebar.
        The sidebar used on Site, Building and Workslot detail pages use the standalone sidebar.css.
    */
    /******************************************************************************************/
    .sidebar-list table {
        width: 100%;
    }

    .card.sidebar-list {
        margin-left: -34px;
    }

    .sidebar-list .card-header {
        text-align: center;
    }

    .sidebar-list .card-body {
        /*margin-left: -12px;
        margin-right: -12px;*/
        padding: 6px;
        font-size: .82em; /* When using elements that are not contained in a sidebar table. */
    }

    .sidebar-list th {
        padding-top: 0;
        padding-bottom: 4px;
        font-weight: normal;
        font-style: italic;
        color: grey;
        text-align: center;
        /*font-size: small;*/ /* Size of the text without using the <sup> <sub> tags. */
        font-size: inherit; /* Size of the text when using the <sup> <sub> tags. */
    }

    .sidebar-list td {
        border-style: solid;
        border-width: 1px;
        border-color: gainsboro;
        padding-top: 4px;
        padding-left: 0;
        padding-right: 0;
        vertical-align: middle;
        font-size: .82em; /* size of the text inside of each cell */
    }

    .sidebar-list p {
        padding-left: 4px;
        margin-top: 0;
        margin-bottom: 0;
    }

    /*
    .bill-to-primary {
        background: lightyellow;
    }
     */
    /******************************************************************************************/
    /* TinyMCE overrides */
    /******************************************************************************************/
    /* The outside editor container. */
    div.tox.tox-tinymce {
        width: 99%; /* For some reason is just a little wider than the form fields. Doing this to line it up. */
    }

    /* The inner text edit area.

        NOTE: Ended up having to change font size and color in the init function in standard_footer.blade.php.
    */
    /*iframe#texteditor_ifr {          This hits the background but not the text. */
    /* background: lime; */
    /*  Nothing seems to work to target the text inside that area. (?)
    iframe#texteditor_ifr > p {
        font-size: .6em;    !important;
        color: grey;
    }
    body#tinymce.mce-content-body {
        font-size: .6em;    !important;
        color: grey;
    }
    */
    /******************************************************************************************/
    /* 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;
    }


    /******************************************************************************************/
    /* Override the default Chosen multi-select styling. */
    /* Needs thw specific ".chosen-container" wrapper in order to be able to override the defaults. */
    /******************************************************************************************/
    .chosen-container {
    }

    .chosen-container ul.chosen-choices {
        border-radius: 4px;
    }


    /******************************************************************************************/
    /* System Footer control */
    /******************************************************************************************/
    /* standard page footer
     */
    .footer {
        align-items: center;
        padding-bottom: 0;
        margin: 0;
        padding-top: 10px; /* Can't explain why but I need this to approximate a vertical center. */
        padding-left: 14px;
        padding-right: 14px;
        color: white;
        background: rgba(0, 0, 0, 0.7) !important;
    }

    .footer p {
        padding: 0;
        margin: 0;
        vertical-align: middle;
        /*margin-top: -2px;*/
        font-weight: lighter;
        color: floralwhite;
    }


    /******************************************************************************************/
    /* LinkBar styling
        Note: there is the ability to add a hard coded bullet (&bull;) in the LinkBar class.
    */
    /******************************************************************************************/
    /* top of page Link Bar area */
    ul.link-bar {
        list-style-type: none;
        color: lightgrey; /* Only affects text the link bar area that is not a link. */
        padding-top: 0;
        padding-left: 0;
        margin-bottom: 4px;
        margin-left: 0;
        margin-top: -4px;
    }

    .link-bar li {
        list-style-type: none;
        display: inline;
    }

    .link-bar li a {
        text-decoration: none;
        font-size: small;
        padding-top: 4px;
        padding-bottom: 5px;
        padding-left: 3px;
        padding-right: 4px;
        /*padding-right: 4px;*/
    }

    /* Change the link color on hover. */
    .link-bar li a:hover {
        border-radius: 2px;
        /*background-color: #f4f4f4; Too light. */
        background-color: #eaeaea;
        color: black;
        /*color: white; */
    }


    /******************************************************************************************/
    /* 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). */
    }

    /* To ensure a consistent layout - make all the form-control <inputs> the same width. */
    form.form-crud .form-control {
        width: 240px;
        font-size: smaller;
    }

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

    /* 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: 100px;
    }

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

        width: 73%; /* This seems to work best for the most general use of the textarea. */
        /*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>

     */

        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. */

        /*height: 60px;                 /* Set the initial height of the <textarea> (about 2 rows of text). */
        /*height: 100%;*/ /* 100% makes it too big when selecting rows less than 4. (?) */
        padding-bottom: 14px; /* Bottom margin for the text inside the text area */

    }


    /* 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;
    }


    /* Clean up the standard Bootstrap form-group spacing. */
    form.form-crud div.form-group {
        /*padding-top: 2px;             /* Add a little space between form fields.
        padding-bottom: 2px;*/
        margin-top: 0; /* tighten up the default space between form fields. */
        margin-bottom: 0;
        height: 38px; /* Needed to ensure consistency with all control types for rows tp line up. */
    }

    /* 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;
        /* 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: 140px;
        /* 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: 10px; /* Space between the left of the input control and the label. */
        margin-top: 8px; /* 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;
    }


    /* 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 {
        width: 100%;
        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;
        font-weight: bold;
        font-style: normal;
        border-bottom: solid 1px;
    }

    .clear-me {
        clear: both;
    }

    /* 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;
    }


    /******************************************************************************************/
    /* ad hoc reports; light italic labels on a light blue outline
    /******************************************************************************************/
    /*
     border-collapse: separate;
        border-spacing: 2;
    */
    .adhoc-table {
        border-collapse: separate !important;
        border: none;
    }

    td.adhoc-heading, th.adhoc-heading {
        /*border-collapse: separate !important;*/
        border: solid;
        border-width: 1px;
        border-color: #a4d0ff;
        border-radius: 4px;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        color: darkslategrey;
        background: #fcf7f9;
        font-size: smaller;
        font-weight: bolder;
    }

    td.adhoc-data {
        border: solid;
        border-width: 1px;
        border-color: #e3f0ff;
        border-radius: 4px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: smaller;
    }

    td.adhoc-label {
        /*width: 220px; */
        padding-right: 20px;
        font-style: italic;
        font-size: smaller;
        color: lightslategrey;
        text-align: right;
    }


    /******************************************************************************************/
    /* Sticky Search Bar
    /******************************************************************************************/
    .sticky-search-container {
        /*background: lightblue;*/
    }

    .sticky-search-header {
        vertical-align: center;
        /*background: lightcoral;*/
        /*border: 1px solid gray;*/
    }

    .sticky-search-body {
        /*background: lightseagreen;*/
        justify-content: right;
    }

    .sticky-search-footer {
        /*background: lightsalmon;*/
    }

    .sticky-search-header p {
        font-size: 1em;
    }

    .sticky-search-body p {
        font-size: .9em;
        color: gray;
        font-style: italic;
    }

    .sticky-search-footer p {
        font-size: .8em;
        color: #0b58a2;
    }

    span.sticky-label {
        margin-top: 6px;
        font-size: .84em;
        color: gray;
        margin-right: 6px;
        font-style: italic;
    }

    /* Button sizes. */
    .sticky-search-container .form-control {
        margin-right: 20px;
    }

    /* Data picker sizes. */
    .sticky-search-container .form-control.sticky-datepicker {
        width: 100px;   !important;
    }

    /* Drop-down select size. */
    .sticky-search-container select.sticky-select {
        width: 180px;   !important;
    }


    /******************************************************************************************/
    /* Custom Button appearance */
    /******************************************************************************************/
    /* https://charliepark.org/bootstrap_buttons/ */
    /*
    .btn-primary {
        background-color: hsl(0, 0%, 79%) !important;
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#134134134", endColorstr="#c9c9c9");
        background-image: -khtml-gradient(linear, left top, left bottom, from(#134134134), to(#c9c9c9));
        background-image: -moz-linear-gradient(top, #134134134, #c9c9c9);
        background-image: -ms-linear-gradient(top, #134134134, #c9c9c9);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #134134134), color-stop(100%, #c9c9c9));
        background-image: -webkit-linear-gradient(top, #134134134, #c9c9c9);
        background-image: -o-linear-gradient(top, #134134134, #c9c9c9);
        background-image: linear-gradient(#134134134, #c9c9c9);
        border-color: #c9c9c9 #c9c9c9 hsl(0, 0%, 68.5%);
        color: #333 !important;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.69);
        -webkit-font-smoothing: antialiased;
    }
    */
    /******************************************************************************************/
    /* Large Check box - http://www.csscheckbox.com */
    /******************************************************************************************/
    input[type=checkbox].css-checkbox {
        position: absolute;
        z-index: -1000;
        left: -1000px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
    }

    input[type=checkbox].css-checkbox + label.css-label {
        padding-left: 37px;
        height: 32px;
        display: inline-block;
        line-height: 32px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 32px;
        vertical-align: middle;
        cursor: pointer;
        /*margin-bottom: -1px;     stn-added to center in cell */
    }

    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 0 -32px;
    }

    label.css-label {
        background-image: url(../../_includes/media_content/images/csscheckbox_4ea63867c02e5cae931bd62523a0c675.png);
        /*background-image:url(/_includes/media_content/images/csscheckbox_4ea63867c02e5cae931bd62523a0c675.png);*/
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /******************************************************************************************/
    /* Texting system components */
    /******************************************************************************************/
    #textit-dialog {
        color: darkblue;
        visibility: hidden;
        display: none; /* Display none keeps the div from taking up space on the page (een when hidden.) */
        /*opacity: 0.5;*/
        /*filter: Alpha(Opacity=50);*/
        /*background-color: rgba(0, 0, 255, 0.5);*/
        /*background: rgba(240, 248, 255, 0.18);*/
        /*background-color: hsla(0,0%,0%,0);
        position: relative;
        z-index: 1;
        background-color: transparent !important; */
    }

    textarea#textit-body, #textit-submit {
        width: 100%
    }

    /* These are not mine - but apparently are somewhere in the JQuery dialog UI. */
    .ui-dialog-background {
        opacity: 0.5;
        display: block !important;
        -webkit-transition: opacity 0.5s ease-in;
        -moz-transition: opacity 0.5s ease-in;
    }

    .ui-dialog-background.pop.in {
        opacity: 1;
        -webkit-transition: opacity 0.5s ease-in;
        -moz-transition: opacity 0.5s ease-in;
    }

    .ui-dialog {
        /*min-height: 100% !important;*/
        /*background: transparent !important;*/
        /*background: rgba(240, 248, 255, 0.18); !important;*/
    }


    /******************************************************************************************/
    /* File lists on any upload page (can be used on any <li> list of items) */
    /******************************************************************************************/
    li.file-list {
        color: slategrey;
        list-style-type: none;
        margin-left: -24px; /* Backup over the space where the bullet would've been. */

    }


    /******************************************************************************************/
    /* Dropzone.
        This is for absolute positioning on the page -- right side under the top header area.
        Override this in the <style> section on the page if you need something different.
    */
    /******************************************************************************************/
    .dropzone {
        width: 202px;
        min-height: 202px;
        margin-left: -12px;
        position: absolute;
        top: 370px;
        right: 130px;
    }


    /******************************************************************************************/
    /* User/Group Profile Rights Grid */
    /******************************************************************************************/
    /* Box around the whole edit rights area. */
    div.edit-right {
        background: snow;
        border: lightgrey solid 1px;
        padding: 12px;
        margin-left: -80px;
        margin-right: -80px;
        border-radius: 8px;
    }

    /* Right Grid header */
    table.rights-grid th {
        color: black;
        font-weight: bolder;
        background: lightcyan;
    }

    /* Rights Grid body */
    table.rights-grid td {
        border: solid lightgrey 1px;
    }

    /* Set this for all of the grid columns. */
    [class^="gcol-"] {
        font-size: small;
        font-weight: lighter;
        padding: 2px;
        vertical-align: top;
    }

    /* X (delete override) */
    .gcol-0 {
        width: 3%;
        align-content: center;
        text-align: center;
    }

    /* mID */
    .gcol-1 {
        width: 3%;
        align-content: center;
        text-align: center;
    }

    /* All rights checkbox columns */
    .gcol-3, .gcol-4, .gcol-5, .gcol-6, .gcol-7, .gcol-8, .gcol-9, .gcol-10, .gcol-11 {
        width: 2%;
        font-style: normal;
        font-size: x-small;
        align-content: center;
        text-align: center;
    }

    /* Warning - highlight the ones that have to do with elevated rights
        Note: selectors need to be this specific for the <th> tags in order to override the setting above.
        Delete - Export All
    */
    .gcol-8, .gcol-9,
    table.rights-grid th.gcol-8, table.rights-grid th.gcol-9 {
        background: red;
        color: white;
    }

    /* Feature 1 - Feature 2 */
    .gcol-10, .gcol-11,
    table.rights-grid th.gcol-10, table.rights-grid th.gcol-11 {
        background: orange;
        color: white;
    }


    /* page name */
    .gcol-2 {
        width: 13%;
        /* F1, F2 */
    }

    .gcol-12, .gcol-13 {
        width: 15%;
        color: darkblue;
    }

    /* Comments */
    .gcol-14 {
        width: 39%;
    }

    /* Comments - cell contents */
    td.gcol-14 {
        color: grey;
        font-style: italic;
    }

    /*
    th.rightscheckbox {
        color: darkblue;
        font-size: x-small;
        font-weight: normal;
        text-align: center;
        vertical-align: center;
    }
    */
    /*
    td.feature, .menuitem {
        font-size: smaller;
        color: darkblue;
    }
    td.comment {
        font-size: smaller;
        color: grey;
        font-style: italic;
    }

    p.vertical-align {
        min-width: 54px;
        text-align: center;
    }
    */
    /* User list on the Group Profile page */
    div#user_list {
        /*height: 218px;*/
        height: 166px;
    }

    div#user_list p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    div#user_list a {
        color: gray;
        text-decoration: none; /**/
    }
}


/*
@media print {

    td {
        font-size: .6em;    !important;
        font-family: Arial, Helvetica, sans-serif;  !important;
    }

    td a:link {
        text-decoration: none;
        font-size: .6em;
        font-family: Arial, Helvetica, sans-serif;
    }
}
*/