@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;
}