@import url(https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,900|Lato|Montserrat:300,400,600,700&display=swap);
:root {
    /* Calendar Widget */
    --calendar-available-date-text: #0F7549;
    --calendar-available-date-bg: #B6F2D4;
    --calendar-available-date-hover: #9ccfb6;
    --calendar-highlight-selected-text: #000000;
    --calendar-highlight-selected: #0BA876;
    --calendar-highlight-hover: #08865e;
    /* ResNexus Colors */
    --rn-lt-blue: #549fE5;
    --rn-blue: #4aa0fd;
    --rn-blue-h: #3c86d6; /* :hover color */
    --rn-red: #e93e3c;
    --rn-red-h: #d53e3c; /* :hover color */
    /* ResNexus background colors */
    --rn-dark-gray-b: #464646;
    --rn-light-gray-b: #cdcdcd;
    /* ResNexus Text Colors */
    --rn-white-t: #fff; /* redundant, yes, if we change it in the future, nice */
    --rn-gray-t: #717172;
    --rn-dark-gray-t: #464646;
    --rn-disabled-t: #a4a4a4;
    --rn-blue-t: #4aa0fd;
    /* Industry Colors */
    --campground: #7A7E51;
    --glamping: #B1DF8D;
    --bed-breakfast: #4A95E1;
    --hotel: #E77E39;
    --vacation: #C46B31;
    --lodging: #FBBC05;
    --marinas: #8350D9;
    --industry-1: var(--campground);
    --industry-2: var(--glamping);
    --industry-4: var(--bed-breakfast);
    --industry-8: var(--hotel);
    --industry-16: var(--vacation);
    --industry-32: var(--lodging);
    --industry-64: var(--marinas);
    --industry-128: var(--campground);
    --industry-256: var(--campground);
    --industry-512: var(--campground);
}

/*********** V6 TEXTBOX *************/
.v6textbox {
    position: relative;
    margin-bottom: 2rem;
}

    .v6textbox > input {
        border: none;
        border-bottom: 1px solid grey;
        outline: none;
        background-color: transparent;
        width: 100%;
        padding: 0.125rem 0 0 0;
        line-height: 1.5;
        font-size: 13.5pt;
    }

    .v6textbox > label {
        font-weight: 400;
        font-size: 10.5pt;
        letter-spacing: 0.05em;
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 0.25rem;
        transition: all 0.2s ease;
        color: grey;
    }

        .v6textbox > input:focus {
            border-bottom: 1px solid var(--rn-lt-blue);
            background-color:#F5F5F5;
        }

    .v6textbox input.resnexus-focused ~ label,
    .v6textbox input.resnexus-not-empty ~ label {
        top: -.75rem;
        font-size: 9pt;
        color: var(--rn-lt-blue);
        font-weight: 500;
    }

    .v6textbox.errorField input,
    .v6textbox.errorField select,
    .v6textbox[invalid] textarea,
    .v6textbox input.v6error {
        border: 1px solid red !important;
        margin-bottom: 12px;
        color: red !important;
        border-radius: 3px;
    }

        .v6textbox.errorField label,
        .v6textbox.errorField input:focus + label,
        .v6textbox[invalid] input:not(.clicked) + label,
        .v6textbox[invalid] textarea:not(.clicked) + label {
            color: red !important;
        }

    .v6textbox + div.v6error {
        position: relative;
        color: red;
    }

    .v6textbox[invalid] input:not(.clicked),
    .v6textbox[invalid] textarea:not(.clicked) {
        color: #E93E3C !important;
    }

    .v6textbox input:disabled {
        background-color: #e8e8e8 !important;
        color: #afafaf !important;
    }

/*********** V6 CHECKBOX *************/
.v6checkbox input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0; 
    display: block;
    -moz-appearance: none;
}

.v6checkbox label:not(.tooltip-gen6) {
    font-size: 15px;
    font-weight: 500;
    color: #77787B;
    margin-left: 30px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.v6checkbox input[type="checkbox"]:checked ~ label:not(.tooltip-gen6) {
    color: #4AA0FD; 
}

.v6checkbox input[type="checkbox"] ~ label:not(.tooltip-gen6)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -25px;
    margin: auto;
    width: 15px;
    height: 15px;
    background: #ffffff;
    border: 2px solid #B0B2B5;
    cursor: pointer;
    border-radius: 4px;
}

.v6checkbox input[type="checkbox"]:checked ~ label:not(.tooltip-gen6)::before {
    background: #4AA0FD;
    border-radius: 4px;
    border: 2px solid #5FAAFC;
    width: 15px;
    height: 15px;
}

.v6checkbox input[type="checkbox"]:checked ~ label:not(.tooltip-gen6)::after {
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 5px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    padding: 1px;
    top: -2px;
    left: -18px;
    bottom: 0;
    margin: auto;
    pointer-events: none;
}

.v6checkbox input[type="checkbox"]:disabled ~ label:not(.tooltip-gen6)::before {
    background: #E2E2E2;
    border-color: #C4C5C7;
    cursor: default;
}

.v6checkbox input[type="checkbox"]:disabled ~ label:not(.tooltip-gen6)::after {
    border-color: #C4C5C7;
}

.v6checkbox input[type="checkbox"]:not(:disabled) ~ label:not(.tooltip-gen6):hover::before {
    border-color: #5faafc;
}

.v6checkbox input[type="checkbox"]:not(:disabled) ~ label:not(.tooltip-gen6):hover {
    color: #4AA0FD;
}

.v6checkbox input[type=checkbox]:focus ~ label:not(.tooltip-gen6)::before {
    box-shadow: 0 0 0 2px;
}

.v6checkbox input[type=checkbox]:not(:checked):required:focus ~ label:not(.tooltip-gen6) {
    color: #ff766c;
}

@media print {
    .v6checkbox input[type=checkbox]:checked ~ label:not(.tooltip-gen6)::before {
        background: #FFFFFF;
    }

    .v6checkbox input[type=checkbox]:checked ~ label:not(.tooltip-gen6)::after {
        border: solid #000000;
        border-width: 0 2px 2px 0;
    }
}

/*********** V6 DROPDOWN *************/
.v6dropdown {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 100%;
    margin-right: 25px;
    margin-bottom: 2rem;
}

    .v6dropdown select {
        background-color: white;
        border: none;
        box-shadow: none;
        width: 100%;
        padding: 13px 8px 0px 0px; /* Adjust padding to move text left */
        font-size: 18px;
    
        text-indent: 0;
        border-radius: 2px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-sizing: border-box;
        height: 46px;
        margin: 0;
    }

    .v6dropdown label {
        color: var(--rn-lt-blue); 
        font-weight: 500;
        font-size: 9pt;
        position: absolute;
        pointer-events: none;
        left: 0;
    }

    .v6dropdown::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #a2a5a6;
    }

    .v6dropdown:before {
        content: '';
        position: absolute;
        width: calc(100% - 16px);
        border-bottom: 1px solid #9f9f9f;
        bottom: 1px;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .v6dropdown.no-line:before {
        border-bottom: none;
    }

    .v6dropdown.errorField select {
        border: 1px solid red;
        margin-bottom: 12px;
    }


/*********** V6 RADIO *************/
.v6radio input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
    margin-bottom: 2rem;
    padding: 0;
    position: absolute;
}

.v6radio label {
    font-size: 15px;
    font-weight: 500;
    color: #77787B;
}

    .v6radio input[type="radio"] + label {
        margin-left: 30px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-right: 20px;
        font-weight: 500;
        font-size: 15px;
        line-height: 35px;
        color: #77787B;
        min-height: 10px;
    }

        .v6radio input[type="radio"] + label::before {
            content: '';
            position: absolute;
            left: -29px;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 18px;
            height: 18px;
            background: #ffffff;
            border: 2px solid #B0B2B5;
            cursor: pointer;
            border-radius: 25px;
        }

    .v6radio input[type="radio"]:checked + label::before {
        border-radius: 25px;
        border: 2px solid #258de5;
    }

    .v6radio input[type="radio"]:checked + label {
        color: #258de5;
    }

        .v6radio input[type="radio"]:checked + label::after {
            content: '';
            position: absolute;
            left: -22px;
            top: 0;
            bottom: 0;
            margin: auto;
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 25px;
            background: #258de5;
            padding: 1px;
        }

    .v6radio input[type="radio"] + label:empty {
        margin-left: 0;
        width: 15px;
    }

        .v6radio input[type="radio"] + label:empty::before {
            left: 0;
        }

        .v6radio input[type="radio"] + label:empty::after {
            left: 7px;
        }

    .v6radio input[type="radio"]:disabled + label::before {
        background: #cecece;
    }

.gen6inputs input[type=radio]:focus + label::before {
    outline: auto;
}

/*********** V6 DATE *************/
.v6date {
    position: relative;
    display: inline-block; /* or 'block' depending on your layout needs */
    margin: .5rem;
}

    .v6date label {
        font-size: 12px;
        color: var(--rn-lt-blue);
        font-weight: 500;
        position: absolute;
        transition: all 0.2s;
        letter-spacing: 0.03em;
        pointer-events: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 10px;
        font-family: 'Poppins', sans-serif;
        left: 8px; /* Adjust as necessary */
        top: 4px; /* Adjust to align with the textbox */
        width: calc(100% - 16px); /* Adjust based on the container's padding */
    }

    .v6date input[type=text] {
        background-image: url('https://d8qysm09iyvaz.cloudfront.net/gen6/icons/calendar-icon2.svg');
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 30px 30px; /* Adjust the size of the image here */   
        border: none;
        border-bottom: 1px solid #9f9f9f;
        line-height: 20px;
        cursor: default;
        box-shadow: none;
        font-size: 18px;
        color: #454545;
        padding: 13px 8px 1px 8px;
        letter-spacing: 0.05em;
        height: 30px;
        width:150px
    }

    .v6date input[type=text]:hover {
        cursor: pointer;
    }

    .v6date input[type=text]:focus {
        outline-color: #d9a935;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    }





/*.v6date:after {
    content: '';
    position: absolute;
    top: 12px;
    right: 10px;
    height: 25px;
    width: 25px;
    background-image: url(https://d8qysm09iyvaz.cloudfront.net/gen6/icons/calendar-icon2.svg);
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}*/





/*

.v6date input:focus + label {
    top: 0px;
}

.v6date input + label {
    top: 0px;
    left: 12px;
}

.v6date input {
    border: none;
    box-shadow: none;
    position: relative;
    color: #454545;
    padding: 13px 8px 0px 8px;
    border-radius: 0px;
    letter-spacing: 0.05em;
    vertical-align: middle;
    margin-bottom: 0px;
    margin-top: 0px;
    background-color: white;
}


.v6date label {
    left: 8px;
}


.v6date:before {
    content: '';
    position: absolute;
    display: block;
    margin: 0 auto;
    width: calc(100% - 16px);
    border-bottom: 1px solid #9f9f9f;
    bottom: 1px;
    left: 0;
    right: 0;
    z-index: 1;
}
*/



/*.v6date {
    margin-left: -8px;
}

    .v6date[invalid] input {
        border: 1px solid #E93E3C;
    }

    .v6date[invalid]::before {
        border: none;
        border-bottom: 1px solid #E93E3C;
    }

    .v6date[invalid] input:not(.clicked) {
        color: #E93E3C;
    }

        .v6date[invalid] input:not(.clicked) + label {
            color: #E93E3C;
        }


    .v6date input {
        padding-left: 32px;
    }

    .v6date label {
        left: 32px;
    }

    .v6date input:disabled {
        background-color: #e8e8e8;
        color: #afafaf;
    }

    .v6date.hasTooltip input {
        padding-right: 25px;
    }*/

/* 
    In the case of the datepicker, there is a required field validator that even defaults to an "space" character which took up actual input width. 
    Decided to just switch this span to be position absolute just so it doesn't take up space but will still show where it needs to.
*/
    /*.v6date > span {
        position: absolute;
    }


    .v6date:after {
        content: '';
        position: absolute;
        top: 12px;
        right: 10px;
        height: 25px;
        width: 25px;
        background-image: url(https://d8qysm09iyvaz.cloudfront.net/gen6/icons/calendar-icon2.svg);
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .v6date[invalid]:after {
        filter: hue-rotate(140deg);
    }*/

/* Label for control */
    /*.v6date label {
        top: 18px;
    }*/

/* Container */
/*.v6date {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;*/
    /*border-bottom: 1px solid #9F9F9F;*/
    /*position: relative;
}*/

/*textInput_Animated textInput_Underlined_Animated textInput_DatePicker populated
hasDatepicker valid*/