@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700");



/* Variables */
:root {
    --color: #80868b;
    --active-color: #1a73e8;
    --error-color: #f44336;
    --input-value-color: #202124;
    --border-color: 1px solid #dadce0;
    --border-color-active: 2px solid var(--active-color);
    --default-background: #fff;
    --readonly-background: #fbfbfb;
    /* Buttons */
    --btn-default-bg-color: #fff;
    --btn-default-bgh-color: #ddd;
    --btn-default-text-color: #333;
    --btn-primary-bg-color: #1a73e8;
    --btn-primary-bgh-color: #287ae6;
    --btn-primary-boxshadow-color: 0 1px 1px 0 rgba(66, 133, 244, 0.45), 0 1px 3px 1px rgba(66, 133, 244, 0.3);
    --btn-primary-text-color: #fff;
}

/*body {
    font-family: "open sans", roboto, arial, sans-serif;
    background: var(--default-background);
}*/
.checklistBody {
    /*background: #d1d4d5;*/
    border: .5px solid #d1d4d5;
    border-collapse: collapse
}

.searchInput {
    border: .5px solid #d1d4d5
}

input {
    background: var(--default-background);
}

textarea {
    background: var(--default-background);
    /*    margin:.5em*/
}

#form {
    /*width: 40vw;
    margin: 0 auto;
    margin-top: 50px;*/
}

.input-box .input-label.readonly:after {
    content: " \f023"; /* Unicode for the Font Awesome lock icon */
    font-family: "Font Awesome 5 Free"; /* Font family for Font Awesome icons */
    font-weight: 900; /* Font weight for the lock icon */
    font-size: 11px; /* Font size for the lock icon */
    color: #777;
    margin-left: 5px;
}

input[readonly="readonly"].input-1 {
    background-color: var(--readonly-background)
}
/*.input-label.readonly {
    background-color: var(--border-color) !important
}*/
.input-box.active-grey .input-1 {
    border: var(--border-color);
}

.input-box.active-grey .input-label {
    color: var(--color);
    top: -7px;
    background: var(--default-background);
    font-size: 11px;
    transition: 250ms;
    padding: 1px 6px;
}

textarea.input-1 {
    line-height: 2em;
    width: 100%;
    height: auto;
    resize: vertical;
}

.input-box {
    position: relative;
    margin: 10px 0;
}

    .input-box .input-label {
        position: absolute;
        color: var(--color);
        font-size: 16px;
        font-weight: 400;
        max-width: calc(100% - (2 * 8px));
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        left: 18px;
        top: 13px;
        padding: 2px 8px;
        transition: 250ms;
        user-select: none;
        pointer-events: none;
    }

        .input-box .input-label svg {
            position: relative;
            width: 15px;
            height: 15px;
            top: 2px;
            transition: 250ms;
        }



    .input-box .input-1 {
        box-sizing: border-box;
        height: 50px;
        width: 100%;
        border-radius: 4px;
        color: var(--input-value-color);
        border: var(--border-color);
        padding: 13px 15px;
        transition: 250ms;
        font-size: 14px;
    }


        .input-box .input-1:focus {
            outline: none;
            border: var(--border-color-active);
            transition: 250ms;
        }


    .input-box.error .input-label {
        color: var(--error-color);
        top: -8px;
        background: var(--default-background);
        font-size: 11px;
        transition: 250ms;
    }

    .input-box.error .input-1 {
        border: 2px solid var(--error-color);
    }

    .input-box.focus .input-label {
        color: var(--active-color);
        top: -8px;
        background: var(--default-background);
        font-size: 11px;
        transition: 250ms;
    }

    /* NEW 
        This is specifically for the date fields, they should never have the text
        be inside of the box.
        */
    .input-box.input-date .input-label {
        color: var(--color);
        top: -8px;
        background: var(--default-background);
        font-size: 11px;
        transition: 250ms;
        z-index: 1;
    }

    .input-box.input-date.active .input-label,
    .input-box.input-date.error .input-label,
    .input-box.input-date.active-grey .input-label {
        top: -8px;
        background: var(--default-background);
        font-size: 11px;
        color: var(--color);
    }

    .input-box.input-date.focus .input-label {
        color: var(--active-color);
        top: -8px;
        background: var(--default-background);
        font-size: 11px;
    }

    .input-box.input-date .input-1:focus + .input-label {
        color: var(--active-color);
    }



/* 
        The below 2 rules were causing problems for textarea elements with text
        on page load by applying styling to elements with the 'active' class,
        which is added by CustomInputs.js on the 'input' event.
        Styles commented: 6/17/25
        If this comment is still here by 7/17/25, delete the styles.
    */

/*    .input-box.focus .input-label,
    .input-box.active .input-label {
        color: var(--active-color);
        top: -8px;
        background: var(--default-background);
        font-size: 11px;
        transition: 250ms;
    }*/

/*    .input-box.active .input-1 {
        border: 2px solid var(--active-color);
    }*/


.pull-right {
    float: right;
}

.clear {
    clear: both;
}

.bg-white {
    background-color: white;
}

.input-1.currency {
    width: auto;
}

.input-label.currency-label {
    left: 18px;
    z-index: 10;
}

.br-none {
    border-right: none !important;
}

.bl-none {
    border-left: none !important;
}

.has-length .input-group-text:not([class^="bg-"]):not([class *= " be-"]) {
    background-color: white;
    color: var(--active-color) !important;
    transition: 250ms;
}

.has-length .input-group-text {
    border-color: var(--border-active-color) !important;
    border-width: 2px;
    transition: 250ms;
}

.input-label {
    z-index: 1000;
}



/* **** THIS SECTION IS FOR MAKING SELECT2 MATCH INPUT-1 **** */
/* Set the overall height and center content vertically */
.select2-container--default .select2-selection--single {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px;
    box-sizing: border-box;
}

    /* Adjust the text inside the dropdown */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0 !important;
        margin: 0 !important;
        line-height: normal !important;
        flex: 1;
        display: flex;
        align-items: center;
    }

    /* Match the height of the dropdown arrow */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 50px !important;
        display: flex;
        align-items: center;
    }

/* **** THIS SECTION IS FOR MAKING DATE INPUTS MATCH INPUT-1 **** */
.date-filter {
    font-size: 1rem;
    height: 50px;
}

.input-label.readonly {
    border-color: #eeeeee;
    border-width: thin;
    border-style: solid;
    border-radius: 5px;
    top: -10px;
}

.input-box.active-grey:not(.readonly) .input-label:not(.readonly) {
    top: -7px;
}

.input-1:read-only {
    border: 1px solid #dadce0 !important;
}

.input-box.always-active-grey .input-label {
    color: var(--color);
    top: -7px;
    background: var(--default-background);
    font-size: 11px;
    transition: 250ms;
    padding: 1px 6px;
}

.input-box.always-active-grey.focus .input-label {
    color: var(--active-color);
}

.input-box.active-grey .input-label.readonly {
    border-color: #eeeeee;
    border-width: thin;
    border-style: solid;
    border-radius: 5px;
    top: -10px;
}

/* The character counter FuzzyCounter.js draws on a textarea. Here rather than in a stylesheet of
   its own because it is positioned against .input-box, which this file owns, and every page that
   uses the counter already links this.

   A white tab flush into the field's bottom right corner, covering the line of text behind it
   instead of sitting under the field and moving the page when it appears. The offsets are written
   by the script, which reads the field's borders and its scrollbar; only the look is here.

   pointer-events: none so a click aimed at the text behind the tab still reaches the textarea and
   puts the caret where the user meant it. */
.char-counter {
    position: absolute;
    z-index: 2;
    padding: 0 6px;
    background-color: #fff;
    /* The corner that shows. The other three are in the field's own corner or against its
       border - bottom right follows the field's 4px radius so the white does not poke out past
       it. */
    border-top-left-radius: 4px;
    border-bottom-right-radius: 3px;
    line-height: 1.5;
    pointer-events: none;
    user-select: none;
}

/* For a textarea that is not inside a .input-box: the counter is absolutely positioned, so
   whatever contains the field has to be able to hold it. */
.char-counter-anchor {
    position: relative;
}