/* Minification failed. Returning unminified contents.
(311,26): run-time error CSS1034: Expected closing parenthesis, found '>'
(322,26): run-time error CSS1034: Expected closing parenthesis, found '<'
(457,26): run-time error CSS1034: Expected closing parenthesis, found '>'
(474,26): run-time error CSS1034: Expected closing parenthesis, found '<'
(520,26): run-time error CSS1034: Expected closing parenthesis, found '>'
(703,26): run-time error CSS1034: Expected closing parenthesis, found '>'
(727,26): run-time error CSS1034: Expected closing parenthesis, found '<'
(796,26): run-time error CSS1034: Expected closing parenthesis, found '>'
(804,26): run-time error CSS1034: Expected closing parenthesis, found '<'
 */
/* || BOILERPLATE - Minimal Boilerplate CSS */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Optional: Set a base font size for easier responsive calculations (1rem = 10px) */
html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;
    font-size: 1.6rem; /* Sets body font size to 16px (1.6rem * 10px) */
}

/* || GENERAL STYLES */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    display: flex;
    justify-content: center;
}

body {
    /*height: 100vh;*/
    max-width: 80rem;
    width: 100vw;
    width: 100dvw;
    background-color: white;
    color: #333333;
    font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
    font-size: 1rem;
    margin: 0;
    padding: 0;
}

    body.wait-cursor * {
        cursor: wait !important; /* !important ensures it overrides other cursor styles */
    }

/*
body {
    font-size: clamp(1rem, 2.5vw, 2rem);
}
*/

/*
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
*/
h1 {
    font-size: 2.4rem;
    margin-top: 1rem;
}

h2 {
    font-size: 2.0rem;
    margin-top: 1rem;
}

p {
    font-size: 1.6rem;
    margin-top: 1rem;
}

a {
    font-size: 1.6rem;
}

    a:link, a:visited {
        color: navy; /*navy; #034af3; */
    }

    a:hover {
        color: #EE0000; /*#1d60ff;*/
        text-decoration: none;
    }

    a:active {
        color: navy; /* #034af3; */
    }

input {
    padding: 0.3rem;
}

    input[type="radio"] {
        vertical-align: middle;
    }


/* || PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
.body-content {
    /*min-height: 42rem;*/
    /*background-color: white;*/
}
/*
header {
}
*/
main {
    margin-top: 3rem;
    /*min-width: 10vw;*/
    /* padding: 2rem;*/
}

footer {
    border-top: 1px solid lightgrey; /* #808080;*/
    margin-top: 2rem;
    padding: 0;
}

    footer p {
        font-size: 1rem;
        margin: 0.5rem;
    }

/* || HEADER 
----------------------------------------------------------*/

.header-title {
    background-color: cornflowerblue;
    color: white;
    font-size: 2.8rem;
    font-weight: 200;
    height: 8rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*
.header-title span {
    justify-content: center;
    align-items: center;
}
*/
.header-menu {
    background-color: white;
    border-bottom: 1px solid cornflowerblue;
    font-size: 1.6rem;
}

    .header-menu ul {
        list-style: none;
        display: flex;
        flex-direction: row;
    }

    .header-menu li {
        padding: 0.5rem 1rem;
    }

.header-signin {
    margin-left: auto;
}

/* || Wrapper
----------------------------------------------------------*/

.wrapper {
    width: 100%;
}

    .wrapper h1 {
        text-align: center;
    }


/* || Content 
----------------------------------------------------------*/

.content {
    font-size: 1.4rem;
    min-height: 30rem;
}

.content-stack {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*  flex-direction: column;
    align-items: center;*/
    margin-top: 2rem;
    /*  background-color: lightyellow;*/
}

    .content-stack ul {
        width: fit-content;
        /*    border: 1px solid blue;*/
    }

    .content-stack li {
        display: flex;
        flex-direction: row;
        padding-top: 1.0rem;
        align-items: center;
    }

        .content-stack li > span {
            width: 40%;
            text-align: right;
            /*            overflow-x: hidden;*/
        }

            .content-stack li > span + span {
                flex: 1;
                /*width: 60%;*/
                text-align: left;
                margin-left: 1.5rem;
            }

    .content-stack input[type="checkbox"] {
        vertical-align: middle;
        width: auto;
        padding: 0;
        margin: 0;
    }

.content-message {
    color: red;
}



/* || End - Site.css 
----------------------------------------------------------*/

/* || UTILITIES */

.no-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
}

.center-text {
    text-align: center;
}

.text-propercasing {
    text-transform: capitalize;
}

/* … */


/* || Hamburger
----------------------------------------------------------*/

.hamburger input[type="checkbox"] {
    display: none;
}

.hamburger-stack-close {
    display: none;
}

.hamburger-stack-open {
    display: none;
}

.hamburger-menu {
    display: none;
}


/* || Stack
----------------------------------------------------------*/

.hamburger-stack i {
    color: #333;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    font-style: normal;
    text-align: center;
}

.hamburger-stack label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 3rem;
    height: 3.5rem; /* Adjust height based on bar margin and count */
}

.hamburger-stack span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
    transition: 0.4s; /* Smooth transition for animation */
}



/* || @Media
----------------------------------------------------------*/


@media screen and (width >= 600px) {

    .hamburger-stack {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }
}

@media screen and (width < 600px) {

    .hamburger input[type="checkbox"]:not(:checked) ~ .hamburger-stack-open {
        display: flex;
    }

    .hamburger input[type="checkbox"]:checked ~ .hamburger-stack-close {
        display: flex;
    }

    .hamburger input[type="checkbox"]:checked ~ .hamburger-stack-open {
        display: none;
    }

    .hamburger input[type="checkbox"]:checked ~ .hamburger-menu {
        display: flex;
        flex-direction: column;
        /*For sliding menu: right: 0;*/
        margin-bottom: 5rem;
    }

    .hamburger-menu-slideout {
        position: fixed;
        z-index: 1;
        background-color: white;
        border: 1px solid lightgray;
        overflow-x: hidden;
        transition: 0.5s;
        padding: 2rem;
    }
}


/* || Introduction Sign-In
----------------------------------------------------------*/

.introduction {
    margin-top: 3rem;
}

    .introduction h2 {
        margin-top: 3rem;
    }

.introduction-signin {
    list-style: none;
    /*   display: flex;
        flex-direction: row;*/
}

    .introduction-signin li {
        margin-right: 2rem;
        margin-top: 1.5rem;
    }

    .introduction-signin a {
        font-size: 1.6rem;
    }

.introduction-privacy {
    margin-top: 6rem;
}

.divIntroductionCountyContactContainer {
    margin-left: 3rem;
}

    .divIntroductionCountyContactContainer input {
        font-size: 1.4rem;
    }

/* || Create License
----------------------------------------------------------*/
.license-stack input[type="radio"] {
    margin-right: 1rem;
}

.license-stack input[type="text"] {
    text-transform: capitalize;
}

.license-stack input[type="submit"] {
    min-width: 20rem;
}

.license-stack-radio-container {
    display: flex;
    align-items: center;
}



/* || County Contact List
----------------------------------------------------------*/

.countycontactlist {
    font-size: 1.6rem;
}

    .countycontactlist th {
        padding: 1rem;
        text-align: left;
        text-decoration: underline;
        border: none;
    }

    .countycontactlist tr {
        text-align: left;
        text-decoration: none;
    }

    .countycontactlist td {
        text-align: left;
        padding: 10px 10px 5px 10px;
    }

/* || Sign-In
----------------------------------------------------------*/

.signin-content-stack a {
    font-size: 1.2rem;
    width: 15rem;
}

.signin-content-stack input {
    width: 15rem;
}

    .signin-forgot {
    margin-top: 1rem;
}

/* || Create Account
----------------------------------------------------------*/

@media screen and (width >= 600px) {
    .signin-create-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4rem;
    }

    .signin-create-col1  {
        justify-content: end;
       /* border: 1px solid green;*/
    }

    .signin-create-col2 {
        margin-top: 2rem;
    }
}

@media screen and (width < 600px ) {
    .signin-create-col2 {
                margin-top: 3rem;
    }
}

.signin-create-col2 {
    list-style: inside;
    margin-left: 4rem;
    /*  background-color: lightyellow;*/
}


.signin-create-col2 li {
    padding-top: 1.0rem;
    /*   background-color: lightyellow;*/
}


/* || Reset Password
----------------------------------------------------------*/
.signin-reset-stack input {
    width: 20rem;
}
.signin-reset-return {
    margin-top: 6rem;
}

/* || Account Master
----------------------------------------------------------*/

.account-master-container {
    margin: 1rem;
}

.account-master-menu {
    justify-content: start;
    background-color: #f0f0f0;
    border: 1px solid lightgrey;
    min-height: 30rem;
}

    .account-master-menu li {
        margin-top: 0.8rem;
    }

@media screen and (width >= 600px) {

    .account-master-container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        column-gap: 4rem;
    }

    .account-master-menu {
        justify-content: start;
        margin-top: 5rem;
        padding: 2rem;
    }

    .account-master-content {
        justify-content: start;
    }
}


/* || Hamburger Menu
----------------------------------------------------------*/

.account-hamburger-stack-open span {
    background-color: darkgreen;
}

.account-hamburger-stack-close span {
    background-color: maroon;
}

.account-hamburger-stack-close i, .account-hamburger-stack-open i {
    color: navy;
}

/* || License Applications
----------------------------------------------------------*/
.account-applist {
    font-size: 1.2rem;
    margin-top: 2rem;
    padding: 0;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
}

    .account-applist a {
        font-size: 1.2rem;
    }

    .account-applist th {
        /*  font-size: 1.2rem;*/
        padding: 1rem;
        text-align: left;
        text-decoration: underline;
        border: none;
    }

    .account-applist tr {
        /*        font-size: 1.2rem;
        margin-top: 0.5rem;*/
        text-align: left;
        text-decoration: none;
    }

    .account-applist td {
        text-align: left;
        padding: 10px 10px 5px 10px;
    }

    .account-applist input[type="submit"] {
        margin-top: 3rem;
        height: 3rem;
        width: 20rem;
        /*background-color: blue;*/
    }



/* || Remove Account
----------------------------------------------------------*/

.account-remove-stack {
    margin: 4rem;
}

    .account-remove-stack input {
        min-width: 20rem;
    }
    .account-remove-stack ul {
        list-style: none;
    }

    .account-remove-stack li {
        margin: 2rem;
    }

/* || End - Accounts
----------------------------------------------------------*/


/* Testing */
/*

    *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    height: 100dvh;
}

header {
    border: 1px solid lightblue;
}

.interview-master-container {
    border: 1px solid yellow;
}

.interview-content {
    border: 1px solid purple;
}

footer {
    border: 1px solid lightpink;
}

.interview-nav {
    border: 1px solid green;
}*/

/* End - Testing */


/* || Wrapper
----------------------------------------------------------*/

.interview-wrapper {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
}


/* || Header
----------------------------------------------------------*/

.interview-header-title {
    background-color: white;
    color: navy;
    font-size: 2.8rem;
    font-weight: 300;
    padding-top: 1.5rem;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid lightgrey;
}


/* || Master - Container and Children (Menu, Content)
----------------------------------------------------------*/

.interview-master-content, .interview-master-menu {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.interview-master-menu {
    padding: 2rem;
    background-color: #f0f0f0;       /* #eeeeee;  */
    border: 1px solid lightgrey;
}

@media screen and (width >= 600px) {

    .interview-master-container {
        flex: 1;
        margin-top: 3rem;
        overflow-x: hidden;
        overflow-y: hidden;
        /* children */
        display: flex;
        flex-direction: row;
    }

    .interview-master-menu {
        width: 22.5rem;
        padding: 1rem;
    }

    .interview-master-content {
        margin-top: 0;
        margin-left: 4rem;
        flex: 1;
    }
}

@media screen and (width < 600px) {

    .interview-master-container {
        margin: 1rem;
        flex: 1;
        overflow-x: hidden;
        overflow-y: hidden;
        /* children */
        display: flex;
        flex-direction: column;
    }

    .interview-master-menu {
        position: fixed; /* Stay fixed in the viewport */
        z-index: 1; /* Stay on top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        max-height: 60vh;
        max-height: 60dvh;

    }

    footer {
        display: none;
/*        margin-top: 4rem;*/
    }
}

/* || Hamburger Menu
----------------------------------------------------------*/

.interview-hamburger-stack-open span {
    background-color: darkgreen;
}

.interview-hamburger-stack-close span {
    background-color: maroon;
}

.interview-hamburger-stack-close i, .account-hamburger-stack-open i {
    color: navy;
}


/* || Interview Menu
----------------------------------------------------------*/


/* || Interview Nav - bottom
----------------------------------------------------------*/

.interview-nav {
    /*   background-color: lightpink;*/
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-top: 2rem;
    padding: 1rem 0;
    margin-top: auto;
}

.interview-nav-container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 2rem;
    padding-left: 4rem;
    padding-right: 2rem;
}

@media screen and (width >= 600px) {

    .interview-nav-container {
        width: 67%;
    }

}

@media screen and (width < 600px) {

    .interview-nav-container {
        width: 100%;
    }
}

.interview-nav input {
    display: inline-block;
    min-height: 1.5rem;
    min-width: 8rem;
    padding: 1rem;
    text-align: center;

    /*  background-color: linen;*/
    /*background-color: palegoldenrod;*/
    /*  background-color: lightgoldenrodyellow;*/
    /*   background-color: lightyellow;*/
    /*border-color: darkkhaki;*/

    background-color: gainsboro;
    border-color: grey;
    color: darkblue;
}

.interview-nav-save {
    /* background-color: lightblue;*/
    margin-right: 2rem;
    margin-left: auto;
}

/* accessed from code */
.interview-nav-visible {
    visibility: visible;
}

.interview-nav-hidden {
    visibility: hidden;
}


/* || Footer
----------------------------------------------------------*/

/* || Interview Content
----------------------------------------------------------*/

.interview-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interview-content-stack {
    font-size: 1.4rem;
    width: 100%;
}

    .interview-content-stack ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        list-style: none;
    }

    .interview-content-stack li {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-top: 0.8rem;
        align-items: center;
    }

        .interview-content-stack li > span {
            width: 40%;
            text-align: right;
        }

            .interview-content-stack li > span + span {
                width: 60%;
                text-align: left;
                margin-left: 1.5rem;
            }

    .interview-content-stack a {
        font-size: 1.2rem;
    }

    .interview-content-stack h2 {
        border-bottom-color: lightblue;    
    }

    .interview-content-stack input[type="text"] {
        text-transform: capitalize;
    }

.interview-content-message {
    color: red;
}

.interview-content-title {
    margin-bottom: 3rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid silver;
    text-align: center;
}

/* || End Interview 
----------------------------------------------------------*/