/* Global Styling */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --gutter-main: 0 7vw;
    --dmv-primary: #2d7ac3;
    --dmv-button-blue: #5093f9;
    --dmv-button-light: #f0f6fe;
    --dmv-dark-blue: #183958;
    --dmv-button-alt: #8e9fb2;
}

html, .page-node-type-page {
width: 100vw;
font-family: "Inter";
box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-size: 13pt;
    background: #F8FAFC;
}

.gutter-main {
    padding: 0 200px;
    box-sizing: border-box;
}

main[role="main"] {
    width: 100%;
    box-sizing: border-box;
}

.layout-container {
    margin: 0;
}

.layout-content {
    width: 100%;
    box-sizing: border-box;
    position: relative
}

main[role="main"] .region.region-content {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

main[role="main"] .region.region-content .block-system-main-block {
    width: 100vw;
    height: max-content;
    flex-shrink: 0;
}

@media screen and  (width > 900px) {
    main[role="main"] .region.region-content .block-system-main-block {
        min-height: 720px;
        position: relative;
    }
}

#block-govtheme-dmv-content > article:first-of-type {
    box-sizing: border-box;
    margin-top:50px;
    padding: 20px;
}

/*.layout-content .region {
    padding-top: 80px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px;
}*/



.header-block {
    width: 80%;
    height: max-content;
    box-sizing: border-box;
    margin: 30px 0 20px 0;
    flex-shrink: 0;
}

/* states */

.disable-el {
background-color: #eee;
opacity: .5;
pointer-events: none;
box-shadow: none;
}

.disable {
    opacity: .5;
    pointer-events: none;
}

.not-visible {
    display: none;
}

.placeholder {
    background: none;
}

.ui-widget-overlay.ui-front {
    background-color: white;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front {
    padding: 20px;
    z-index: 101;
    top: 50% !important;
    transform: translateY(-100%);
    background-color: white;
    filter: drop-shadow(0 2px 7px #ccc);
}

/* Components */
/* Calendars */
#block-govtheme-dmv-bookingpage {
    width: 100%;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    position: absolute;
    top: 50px;
    overflow: hidden;
    overflow-y: scroll;
}

.bookingpage-heading {
    margin: 20px 0;
}

.bookingpage-heading h2 {
    margin-top: 0;
}

.booking-calendar {
    width: 80%;
    background: white;
}

.booking-calendar h1 {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

div[data-once="fullCalendarBuild"] {
    box-sizing: border-box;
    padding: 50px;
    background: white;
}

/*.fc-daygrid-day-events {
    box-sizing: border-box;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 1.8;
}*/

.fc-event {
    align-items: flex-start;
}

.fc-daygrid-event-harness a {
    flex-direction: column;
}

.fc-event-title {
    width: 100%;
    flex-shrink: 1;
    text-wrap: wrap;
    display: none;
}
/* Logos */

/*drupal Messages
.region.region-highlighted {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    background: rgba(255, 0, 0, 0.116);
}

div[data-drupal-messages] {
    margin: var(--gutter-main);
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    -webkit-animation: fadeinoutwrp 6s linear forwards;
    animation: fadeinoutwrp 6s linear forwards;
}

/*@-webkit-keyframes fadeinoutwrp {
0% {margin-top: 50px; margin-bottom: 50px;}
95% {margin-top: 50px; margin-bottom: 50px;}
100% {margin-top: 0px; margin-bottom: 0px;}
}

@keyframes fadeinoutwrp {
0% {margin-top: 50px; margin-bottom: 50px;}
95% {margin-top: 50px; margin-bottom: 50px;}
100% {margin-top: 0px; margin-bottom: 0px;}
}

div[data-drupal-messages] .messages {
    min-height: 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 10px;
    -webkit-animation: fadeinout 6s linear forwards;
    animation: fadeinout 6s linear forwards;
}

@-webkit-keyframes fadeinout {
0% {opacity: 0; transform: translateY(-10px); padding: 20px 10px 20px 40px;}
10% {opacity: 1; transform: translateY(0px);}
90% {opacity: 1; transform: translateY(0px); padding: 20px 10px 20px 40px;}
100% {opacity: 0; transform: translateY(-10px); padding: 0 10px 0 40px;}
}

@keyframes fadeinout {
0% {opacity: 0; transform: translateY(-10px); padding: 20px 10px 20px 40px;}
10% {opacity: 1; transform: translateY(0px);}
90% {opacity: 1; transform: translateY(0px); padding: 20px 10px 20px 40px;}
100% {opacity: 0; transform: translateY(-10px); padding: 0 10px 0 40px;}
}*/

div[data-drupal-messages] .messages div div {
    display: flex;
    gap: 20px;
}

.back-to-home {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 30px;
    color: var(--dmv-primary);
    text-decoration: none;
    cursor: pointer;
}

.back-to-home:hover {
    text-decoration: underline;
    font-weight: 500;
}

.password-reset-login{
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    color: var(--dmv-primary);
    text-decoration: none;
    cursor: pointer;
    background: white;
}

.login-password-reset:hover {
    text-decoration: underline;
    font-weight: 500;
}

p:has(> .back-to-home) {
    margin: 0;
}

/* Headings */

#please-sign-in-block {
    margin: 100px 0 70px 0;
    color: var(--dmv-button-blue);
}

/* DMV Admin Headings */
.dmv-admin-page-heading {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 50px;
    color: #212121;
}

/* buttons */
.button {
    cursor: pointer;
}

.w-lg {
    width: 400px;
    box-sizing: border-box;
    text-wrap: wrap;
}

#dashboard-notification {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    padding: 50px 3vw;
    margin: 50px 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    background-color: #F1F1F1;
}

/* small button */
.button-retro-sm {
    width: 125px;
    height: 40px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    border-radius: 2px; 
}

.button-retro-sm span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: white;
    border: 3px solid var(--dmv-button-blue);
    border-radius: 2px; 
}

.button-retro-sm::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: -5px;
    background-color: var(--dmv-button-blue);
    border-radius: 2px;
}

/* small button alt - light */

.button-retro-sm-light {
    width: 125px;
    height: 40px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    border-radius: 2px; 
}


.button-retro-sm-light span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2.5px solid var(--dmv-button-blue);
    border-radius: 3px; 
}

.button-retro-sm-light::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: -5px;
    background-color: var(--dmv-button-blue);
    border-radius: 2px;
}

/* medium button */
.button-retro-md {
    width: 260px;
    height: 40px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    border-radius: 2px; 
}

.button-retro-md span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    border: 3px solid #E6E6E6;
    border-radius: 2px; 
}

.button-retro-md::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: -5px;
    background-color: #E6E6E6;
    border-radius: 2px;
}

/* medium button alt - light */

.button-retro-md-light {
    width: 260px;
    height: 40px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    border-radius: 2px; 
}

.button-retro-md-light span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2.5px solid #A8A8A8;
    border-radius: 3px; 
}

.button-retro-md-light::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: -5px;
    background-color: #A8A8A8;
    border-radius: 2px;
}

/* large button */
.button-retro-lg {
    width: 400px;
    height: 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    border-radius: 2px; 
}

.button-retro-lg span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--dmv-button-blue);
    border: 3px solid var(--dmv-primary);
    border-radius: 2px; 
}

.button-retro-lg::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: -5px;
    background-color: var(--dmv-primary);
    border-radius: 2px;
}

/* large button alt - light */

.button-retro-lg-light {
    width: 400px;
    height: 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    border-radius: 2px; 
}

.button-retro-lg-light span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    background: var(--dmv-button-light);
    border: 2.5px solid var(--dmv-button-alt);
    color: var(--dmv-primary);
    border-radius: 3px; 
}

.button-retro-lg-light::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: -5px;
    background-color: var(--dmv-button-alt);
    border-radius: 2px;
}


/* HEADER */
header .region-header {
    width: calc(100% - 24vh);
    height: 110px;
    box-sizing: border-box;
    position: absolute;
    z-index: 3;
    margin: 80px 12vh 0 12vh;
    padding: 0 50px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    box-shadow: -2px 3px 12px #0000004b;
}

header .region-header::before {
    content: " ";
    display: block;
    width: 95%;
    height: 1px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    background: #e1e1e1;
}

header .region-header::after {
    content: " ";
    display: block;
    width: 100%;
    height: 30px;
    position: absolute;
    left: 0;
    bottom: -30px;
    background: white;
    box-shadow: -2px 6px 6px #0000004b;
}

/*
header .region-header::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    z-index: -1;
    top: 10px;
    left: -10px;
    background-color: #8e9fb2;
}
    */

header .site-logo img {
    width: 80px;
}

header .navigation.menu--account {
    position: absolute;
    right: 5vw;
    display: flex;
    gap: 20px;
}

header .navigation.menu--account a[data-drupal-link-system-path="user/login"] {
    padding: 10px 30px;
    color: white;
    background-color: #FFAF29;
}

header .navigation a {
    text-decoration: none;
    color: #757575;
    font-weight: 700;
}

header .navigation a.is-active {
    color: blue;
}

header .navigation a.is-active::after {
    content: "";

}

#block-govtheme-dmv-useraccountmenu > .menu{
    display: flex;
    gap: 20px;
}

/* Department/Service name */
.department-service-name {
    display: flex;
    flex-direction: column;
}

.department-service-name .department-name {
    text-transform: uppercase;
}

.department-service-name .service-name {
    font-size: 20pt;
    font-weight: 700;
}

/* Authenticated User Menu */
#block-govtheme-dmv-altmenu {
    width: 100vw;
    height: max-content;
    min-height: 65px;
    box-sizing: border-box;
    position: fixed;
    z-index: 5;
    margin: 50px 0 0 0;
    padding: 0px 4vw;
    display: flex;
    align-items: center;
    background: black;
}


#block-govtheme-dmv-altmenu .site-logo img {
    width: 80px;
}

#block-govtheme-dmv-altmenu .navigation.menu--account {
    position: absolute;
    right: 5vw;
    display: flex;
    gap: 20px;
}

#block-govtheme-dmv-altmenu .navigation > a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #757575;
    font-weight: 700;
}

#block-govtheme-dmv-altmenu .navigation a.is-active {
    color: blue;
}

#block-govtheme-dmv-altmenu .navigation a.is-active::after {
    content: "";

}

/* Secondary Menu */
.region.region-secondary-menu {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    gap: 30px;
    background: #F1F1F1 ;
}

.region.region-secondary-menu > * {
    width: max-content;
}

.region.region-secondary-menu .block-system-branding-block a img {
    width: 85px;
}

.region.region-secondary-menu > #block-govtheme-dmv-sitename h2 {
    font-weight: 400;
    font-size: 14pt;
    color: #333333;
}region region-primary-menu

.region.region-secondary-menu #block-govtheme-dmv-useraccountmenu-2 {
    position: absolute;
    right: 5vw;
}

.region.region-secondary-menu #block-govtheme-dmv-useraccountmenu-2 a {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
}

/* User Dashboard Menu / Primary Menu */
.region.region-primary-menu {
    font-size: 15px;
    font-family: "Inter";
}

#block-govtheme-dmv-usermenu {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    position: fixed;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: white;
    border-bottom: 1px solid #eee;
}

#block-govtheme-dmv-usermenu .sitelogo img {
    width: 56px;
    height: 35px;
    position: relative;
    left: 147.5px;
    transform: translateX(-50px);
    object-fit: contain;
}

#block-govtheme-dmv-usermenu #user-account-menu {
    position: absolute;
    right: 30px;
    transform: translateX(-50%);
}

#block-govtheme-dmv-usermenu #user-account-menu .menu {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#block-govtheme-dmv-usermenu #user-account-menu a {
    text-decoration: none;
    color: black;
    padding: 10px;
}

@media screen and  (width < 1080px) {
    
    #block-govtheme-dmv-usermenu .sitelogo img {
        left: 5px;
        transform: translateX(0);
    }

    #block-govtheme-dmv-usermenu #user-account-menu {
        display: none;
    }
}

/* USER MENU - anonymous user */
#user-account-menu {
    position: relative;
}

#user-account-menu .register a {
    padding: 0 !important;
}

#user-account-menu .register {
    padding: 10px;
    width: 120px;
    display: flex;
    flex-direction: column;
    position: relative;
}

#user-account-menu .register:hover {
    background-color: var(--dmv-primary);
}

#block-govtheme-dmv-usermenu #user-account-menu .register > .menu {
    width: 250px;
    padding: 20px;
    position: absolute;
    top: 100%;
    left: -5px;
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 20px !important;
    background-color: white;
    filter: drop-shadow(-2px 3px 10px #00000019);
}

#block-govtheme-dmv-usermenu #user-account-menu .register:hover > .menu {
    display: flex;
    transition: cubic-bezier(0.19, 1, 0.22, 1) 2s ease-in-out;
}

#user-account-menu .register > .menu .menu-break {
    margin-top: 15px;
    padding-top: 20px;
    color: #444444;
    border-top: 2px solid #dcdcdc ;
}

/* User Dashboard Sidebar */
#block-govtheme-dmv-dmvusersidebar {
    width: 295px;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #b3d2ee white;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 7;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-right: 1px solid #EEEEEE;
}

#block-govtheme-dmv-dmvusersidebar #user-profile-component {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    padding: 15px;
}

#block-govtheme-dmv-dmvusersidebar #user-profile-component .user-info {
    width: 100%;
    height: max-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#block-govtheme-dmv-dmvusersidebar #user-profile-component .user-info .profile-img {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #4A9EE6;
    border-radius: 50%;
}

#block-govtheme-dmv-dmvusersidebar #user-profile-component .user-info .profile-img span {
    letter-spacing: 5px;
    font-size: 25px;
    font-weight: 700;
    color: white;
}

#block-govtheme-dmv-dmvusersidebar #user-profile-component .user-info .profile-user {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 1;
    flex-grow: 1;
}

#block-govtheme-dmv-dmvusersidebar #user-profile-component .user-info .profile-user .name {
    font-size: 20px;
    font-weight: 800;
}

#dmv-user-dashboard-menu {
    box-sizing: border-box;
    padding: 15px;
}

#dmv-user-dashboard-menu ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#dmv-user-dashboard-menu a {
    text-decoration: none;
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-dmvusersidebar {
        position: relative;
        width: 100%;
        height: max-content;
        padding: 0;
        top: -40px;
    }

    #block-govtheme-dmv-dmvusersidebar #user-profile-component {
        padding: 5px;
    }

    #block-govtheme-dmv-dmvusersidebar #user-profile-component .user-info .profile-img {
        width: 40px;
        height: 40px;
    }

    #block-govtheme-dmv-dmvusersidebar #user-profile-component .user-info .profile-img span {
        letter-spacing: unset;
        font-size: 20px;
    }

    #block-govtheme-dmv-dmvusersidebar #dmv-user-dashboard-menu {
        display: none;
    }
}

/* User Dashboard Content */
#block-govtheme-dmv-dmvdashboardcontent {
    width: calc(100% - 295px);
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    /*top: 50px;*/
    left: 295px;
    background: linear-gradient(#cacaca3a 0%, #ffffff 100%);
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-dmvdashboardcontent {
        width: 100%;
        height: max-content;
        overflow-y: scroll;
        left: 0;
    }
}


/* Status Bar */

#block-govtheme-dmv-statusbar {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 55px;
    padding: 10px 20px;
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #ebebeb;
    /*background-color: #4A9EE6;*/
}

.status-bar-status {
    flex-shrink: 1;
}

.status-bar-status .field-content {
    width: 310px;
    height: max-content;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: white;
    /*filter: drop-shadow(0 0 2px #00000014);*/
    border-radius: 10px;
}

.status-bar-status h3 {
    margin: 0;
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-statusbar {
        position: relative;
        margin-top: 105px;
        top: 0;
        flex-direction: column;
    }

    .status-bar-status .field-content {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .simple-status-messages {
        width: 380px;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* DMV Applicant Tracks */

#block-govtheme-dmv-userjourney {
    width: calc(100% - 300px);
    height: max-content;
    max-height: calc(100% - 223px);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    padding: 0 20px;
    position: fixed;
    top: 188px;
    overflow-y: scroll;
}

.dmv-applicant-track {
    padding: 50px 0;
    position: relative;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.dmv-applicant-track h2 {
    width: 100%;
    height: max-content;
    font-weight: 800;
    color: #909bc8;
    display: none;
}

#block-govtheme-dmv-completedjourney {
    border-top: 2px solid #ddd;
}

@media screen and (width < 1080px){
    #block-govtheme-dmv-userjourney {
        width: 100%;
        height: max-content;
        margin: 0 auto;
        padding: 20px;
        padding-bottom: 100px;
        position: relative;
        top: 0;
        background-color: #f8f8f8;
    }

    .dmv-applicant-track {
        width: 100%;
        padding-top: 0px;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-items: center;
    }

    .dmv-applicant-track h2 {
        position: absolute;
        top: 0;
    }
}

/* Info Cards */ 
.user-exam-info-card {
    width: max-content;
}

.user-exam-info-card .field-content  {
    width: 310px;
    height: 310px;
    box-sizing: border-box;
    position: relative;
    padding: 20px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: white;
    /*filter: drop-shadow(0 0 2px #00000014);*/
    border: 2px solid #efefef;
    border-radius: 10px;
}

.user-exam-info-card.completed .field-content {
    background-color: unset;
    padding: none;
}

.user-exam-info-card h3 {
    margin-bottom: 20px;
}

.user-progress-completed {
    width: 120%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-progress-completed img {
    width: 100%;
    filter: drop-shadow(-2px 5px 5px #00000065);
}

.user-exam-info-card .user-progress {
    width: 210px;
    height: max-content;
    box-sizing: border-box;
    position: absolute;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-progress-completed 

.user-exam-info-card .user-progress progress {
    width: 100%;
}

.user-exam-info-card .test-name {
    width: 150px;
    height: max-content;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.user-exam-info-card .test-name img {
    width: 70px;
    height: 70px;
}

.user-exam-info-card .test-name span {
    text-align: center;
}

.user-exam-info-card .view-test {
    width: 130px;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #07ABF6;
    color: white;
    font-weight: 800;
    text-decoration: none;
}

.user-exam-info-card .more-info {
    width: 130px;
    height: 50px;
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #07ABF6;
    color: white;
    font-weight: 800;
    text-decoration: none;
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-views-block-user-information-block-18 {
        order: 2;
    }

    .user-exam-info-card .field-content {
        width: 92vw;
        height: 350px;
        padding: 50px;
    }

    .user-exam-info-card .user-progress {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Licenced User Sign Up Cards */
.auth-user-signup {
    width: calc(100% - 40px);
    min-width: 360px;
    box-sizing: border-box;
    height: max-content;
    margin: 65px 20px 0 20px;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
}

.auth-user-signup .wrapper {
    width: 100%;
    height: max-content;
    display: flex;
    align-items: center;
    gap: 25px;
}



/* FrontPage */

#block-govtheme-dmv-frontpagemenu {
    width: 90vw;
    min-width: 600px;
    height: 60px;
    box-sizing: border-box;
    padding: 0 50px;
    position: fixed;
    top: 80px;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 10px;
    filter: drop-shadow(0 3px 6px #00000017);

}

@media screen and (width < 1200px) {
    #block-govtheme-dmv-frontpagemenu {
        display: none;
    }
}

/* Sub Menu - Address and Phone */
#address-and-phone {
    width: max-content;
    height: max-content;
    position: relative;
    display: flex;
    gap: 40px;
}

#address-and-phone div {
    width: max-content;
    height: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2D415E;
}

#address-and-phone p {
    margin: 0;
}

/*#address-and-phone div:nth-child(1){
    color: #2D415E;
}*/

#address-and-phone div span {
    font-weight: 800;
    color: #FB8728;
}

#address-and-phone div img {
    width: 25px;
    height: 25px;
}

/* FRONT PAGE MENU */

#block-govtheme-dmv-frontpagemenu-2 ul {
    margin: 0;
}

#block-govtheme-dmv-frontpagemenu-2 ul li {
    padding: 0;
}

#block-govtheme-dmv-frontpagemenu-2 > .menu {
    width: 260px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dmv-dark-blue);

}

#block-govtheme-dmv-frontpagemenu-2 > .menu > li > .menu {
    width: 260px;
    min-height: 370px;
    box-sizing: border-box;
    padding: 40px;
    position: absolute;
    top: 65px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: white;
    border-radius: 10px;
    filter: drop-shadow(0 3px 6px #00000017);
}

#block-govtheme-dmv-frontpagemenu-2 > .menu > li > .menu a {
    text-decoration: none;
    color: #2D415E;
}

#block-govtheme-dmv-frontpagemenu-2 > .menu > li > .menu a:hover {
    text-decoration: underline;
    color: var(--dmv-button-blue);
}

#block-govtheme-dmv-frontpagemenu-2 > .menu > li > .menu .menu-item:nth-child(4) {
    padding-top: 20px;
    margin-top: 45px;
    border-top: 2px solid grey;
    color: rgb(157, 157, 157);
}

/* MOBILE FRONTPAGE MENU */
#block-govtheme-dmv-mobilefrontpagemenu {
    display: none;
}

#block-govtheme-dmv-mobilefrontpagemenu ul.menu {
    margin: 0;
}

#block-govtheme-dmv-mobilefrontpagemenu .menu-top {
    cursor: pointer;
}

#block-govtheme-dmv-mobilefrontpagemenu ul.menu ::marker {
    display: none;
}

#block-govtheme-dmv-mobilefrontpagemenu > .menu > li > .menu {
    width: 260px;
    min-height:max-content ;
    box-sizing: border-box;
    padding: 40px;
    position: absolute;
    top: 30px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 20px;
    background-color: white;
    border-radius: 10px;
    filter: drop-shadow(0 3px 10px #0000006a);
}

#block-govtheme-dmv-mobilefrontpagemenu > .menu:hover > li > .menu {
    display: flex;
}

#block-govtheme-dmv-mobilefrontpagemenu > .menu > li > .menu > .menu-item:last-child {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #d6d6d6;
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-mobilefrontpagemenu {
        position: absolute;
        right: 10px;
        display: inline-block;
    }
}

#block-govtheme-dmv-mobilefrontpagemenu .link-header {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dfdfdf;
}

/* FRONT PAGE CONTENT */

#block-govtheme-dmv-frontpageblock {
    width: 100%;
    min-width: 360px;
    height: max-content;
    min-height: calc(100vh - 50px);
    box-sizing: border-box;
    position: absolute;
    z-index: 3;
    top: 50px;
}

.front-page-block {
    width: 100%;
    height: max-content;
    min-height: 100%;
    box-sizing: border-box;
    position: absolute;
}

.front-page-block .wrapper {
    width: 100%;
    min-width: 600px;
    height: calc(50vh - 50px);
    min-height: 700px;
    box-sizing: border-box;
    padding: 200px 50px 50px 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: rgb(37, 75, 120)
}

.front-page-block .clm {
    width: max-content;
    max-width: 90%;
    height: max-content;
    box-sizing: border-box;
    position: relative;
    padding: 20px;
    display: flex;
    flex-shrink: 0;
}

.front-page-block .clm.clm1 {
    padding: 0 50px;

    justify-content: center;
    gap: 25px;
}

.front-page-block .clm.clm1 .dept-name {
    padding-top: 10px;
}

.front-page-block .clm1 img {
    width: 135px;
    height: 135px;
    box-sizing: border-box;
    object-fit: cover;
    background-color: 20px solid white;
    border-radius: 50%;
    border: 5px solid white;

}

.front-page-block .clm1 h2:first-of-type {
    font-size: 46px;
    font-weight: 500;
    color: white;
    margin: 0;
    text-transform: uppercase;
}

.front-page-block .clm1 h2:last-of-type {
    margin: 0;
    font-size: 46px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;

}

.front-page-block .clm1 h5 {
    margin-top: 20px;
    font-size: 4rem;
    font-weight: 600;
    color: #BED8F1;
}

.front-page-block .clm.clm2 {
    width: 85%;
    height: 500px;
    box-sizing: border-box;
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    background-color: white;
    border: 1px solid rgb(216, 216, 216);
    filter: drop-shadow(0px 2px 7px #00000020);
}

.front-page-block .clm.clm2 nav p {
    width: 100%;
    max-width: 900px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 0 20%;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.front-page-block .clm.clm2 nav p a {
    width: 500px;
    height: 100px;
    box-sizing: border-box;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    color: var(--dmv-primary);
    text-decoration: none;
    font-size: 19px;
    font-weight: 400;
    border: 2px solid var(--dmv-primary);
}

.front-page-block .clm.clm2 nav p a:hover {
    color: white;
    background-color: var(--dmv-primary);
}

.front-page-block .clm.clm2 nav p a:active {
    color: #69a5ff;
    text-decoration: underline;
}

@media screen and (width < 800px) {
    .front-page-block .clm.clm1 {
        padding: 0;
        flex-direction: column;
        align-items: center;
    }

    .front-page-block .clm.clm1 h5 {
        text-align: center;
    }
}

@media screen and (width < 1200px) {
    .front-page-block .wrapper {
        min-width: 300px;
        height: max-content;
        margin-top: 0px;
        margin-bottom: 500px;
        padding: 50px;
        flex-direction: column;
        gap: 80px;
    }
    .front-page-block .clm {
        width: 100%;
        height: max-content;
    }

    .front-page-block .clm.clm1 {
        padding: 0;
    }

    .front-page-block .clm.clm1 h2 {
        font-size: 40px;
    }

    .front-page-block .clm.clm2 {
        height: max-content;
        bottom: -450px;
    }

    .front-page-block .clm.clm2, .front-page-block .clm.clm2 nav p {
        width: 100%;
        padding: 0;
    }

    .front-page-block .clm.clm2 nav p {
        height: max-content;
        padding: 20px;
        gap: 30px;
    }

    .front-page-block .clm.clm2 nav p a {
        width: 100%;
        height: 150px;
    }
}

/* FORM STYLING */
/* Disabled Form Fields */
.form-element[disabled], .form-element[disabled]:hover {
    color: #1c1c1c !important;
    -webkit-text-fill-color: #1c1c1c;
}

/* General form style */
/* Inputs */
.form-text {
    font-size: 14pt;
    color: #344858;

}

/* User Form */
form#user-form {
    border-radius: 10px;
    filter: drop-shadow(0 5px 5px #21212120);
}

/* Login Form */
#block-govtheme-dmv-pleasesignin {
    width: 100%;
    flex-shrink: 0;
}

#user-login-form {
    width: 400px;
    height: max-content;
    margin: 0 auto;
    margin-top: 50vh;
    padding: 20px 20px 50px 20px;
    position: relative;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 2px solid #eef3fa;
    filter: drop-shadow(0 5px 7px #21212134);
}

#user-login-form::after {
    content: "Please Sign In.";
    display: block;
    order: 1;
    width: 100%;
    margin: 0 0 30px 0;
    font-size: 40px;
    font-weight: 900;
    text-align: center;
    color: var(--dmv-button-blue);
}

#user-login-form .form-item, #user-login-form .form-actions {
    margin: 0;
}

#user-login-form .form-item {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#user-login-form .form-item-name {
    order: 2;
}

#user-login-form .form-item-pass {
    order: 2;
}

#user-login-form #edit-actions {
    order: 3;
    width: max-content;
}

#user-login-form label {
    width: max-content;
    max-width: 400px;
    text-wrap: wrap;
    color: var(--dmv-dark-blue);
}


#user-login-form .form-text {
    width: 100%;
    min-width: 200px;
    height: 50px;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 0 20px;
    background: #eeeeee;
    border: none;

}

#user-login-form .form-submit {
    width: 360px;
    max-width: 640px;
    height: 50px;
    box-sizing: border-box;
    margin: 30px 0;
    position: relative;
    font-weight: 700;
    color: white;
    background: var(--dmv-button-blue);
    border: none;
    border-radius: 2px;
}

#user-login-form .login-password-reset {
    order: 10;
}

#block-govtheme-dmv-loginpagecta {
    width: 50%;
    height: 100vh;
    min-height: 900px;
    box-sizing: border-box;
    padding: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: url(/sites/default/files/2025-05/ai-generated-8513493_1280.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid #F1F1F1;
}

@media screen and (width < 700px) {
    #user-login-form {
        border: none;
        filter: none;
    }
}

@media screen and (height < 700px) {
    #user-login-form {
        margin-top: 70px;
        transform: translateY(0);
        border: none;
        background-color: unset;
    }
}


/* Log In Information */
#login-cta {
    display: flex;
    justify-content: center;
    padding: 50px;
    background: linear-gradient(#ffffff, #ffffffb6);
}

#login-cta .wrapper {
    width: max-content;
}

#login-cta h1 {
    margin-top: 0;
}

#login-cta a.button {
    color: #727272;
    font-weight: 700;
}

/* Quiz Page Logout */

#block-govtheme-dmv-quizlogout {
    position: absolute;
    right: 100px;
    transform: translateX(-50%);
}

#block-govtheme-dmv-quizlogout .menu {
    margin: 0;
}

/* Log Out Page */





#user-logout-confirm {
    padding: 50px;
    width: 90vh;
    max-width: 600px;
    min-width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 5px;
    box-shadow: -2px 2px 10px #0000000f;
}

/* Registration Form */

#user-register-form {
    width: 50vw;
    height: calc(100vh - 50px);
    min-height: 400px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 50px;
    left: 50vw;
    padding: 50px 50px 20px 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #ffffff;
    border-left: 1px solid #eee;
    
}

#user-register-form .field-group-tab {
    width: 100%;
    box-sizing: border-box;
    /*display: flex;
    justify-content: flex-start;*/
    gap: 50px;
    flex-wrap: wrap;
    background: white;
}

#user-register-form fieldset {
    margin: 0;
    padding: 0;
    box-shadow: unset;
    filter: unset;
    border: none;
}

#user-register-form fieldset legend {
    display: none;
}

#user-register-form fieldset .fieldset-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#user-register-form #edit-field-date-of-birth-0-value, #user-register-form #edit-field-nationality-wrapper, #user-register-form #edit-field-address-island-of-residenc-wrapper{
    width: 100%;
    max-width: 1200px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 1;
    gap: 50px;
}

#user-register-form #edit-field-date-of-birth-wrapper {
    padding: 20px 0;
}

#user-register-form #edit-field-sex-wrapper {
    width: 80%;
    max-width: 1200px;
    min-width: 300px;
}

#user-register-form .form-item {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#user-register-form label {
    width: 400px;
    text-wrap: wrap;
    color: var(--dmv-dark-blue);
}

#user-register-form .description {
    width: 100%;
    max-width: 600px;
    color: #555;
}

#user-register-form .form-text, #user-register-form .form-select, #user-register-form .form-date, #user-register-form .form-email, #user-register-form .form-email, #user-register-form .form-number, #user-register-form .form-tel   {
    width: 600px;
    min-width: 300px;
    height: 50px;
    box-sizing: border-box;
    padding: 0 15px;
    background: rgb(240, 240, 240);
    border: none;
    border-radius: .375rem;
    /*transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;*/
}

#user-register-form .form-tel {
    padding-left: 55px;
}

#user-register-form .form-item-field-nationality, #user-register-form .form-item-field-address-island-of-residenc, #user-register-form .form-item-field-date-of-birth-0-value-date {
    width: 60px;
    max-width: 1200px;
    min-width: 300px;
}

#user-register-form .form-submit {
    width: 600px;
    height: 50px;
    box-sizing: border-box;
    margin: 30px 0 0 0; 
    position: relative;
    font-weight: 700;
    color: white;
    background: var(--dmv-button-blue);
    border: none;
    border-radius: 2px; 
}

@media screen and (width < 500px) {
    #user-register-form {
        width: 100%;
        height: max-content;
        overflow: unset;
        margin: 0 auto;
        padding: 20px;
        padding-top: 50px;
        position: relative;
        transform: translate(0, 0);
        top: 0;
        left: 0px;
    }

}

@media screen and (width < 1350px) {
    #user-register-form .form-text, #user-register-form .form-select, #user-register-form .form-date, #user-register-form .form-email, #user-register-form .form-email, #user-register-form .form-number, #user-register-form .form-tel {
        width: 100%;
        min-width: 300px;
    }

    #user-register-form .form-item-field-nationality, #user-register-form .form-item-field-address-island-of-residenc, #user-register-form .form-item-field-date-of-birth-0-value-date {
        width: 100%;
        min-width: 300px;
    }

    #user-register-form label {
        width: 100%;
    }

    #user-register-form .form-submit {
        width: 100%;
        min-width: 300px;
    }

     #user-register-form input.form-phone.local-number[name="field_telephone_mobile_no_"] {
        width: calc(100% - 55px);
    }
}

/* Account Access */
#display-default-account-access .password-suggestions {
    width: calc(100% - 10px);
    margin: 0 0 .7em 0;
}

/* Transfer Account Fieldset and Fields */
#user-register-form #default-display-verify-user-transfer {
    padding-top: 30px;
}

/* Registratio Form Information Block */

#block-govtheme-dmv-registrationmotorcycleinstructions, #block-govtheme-dmv-registrationnewcta, #block-govtheme-dmv-registrationoverseascta, #block-govtheme-dmv-registrationpages  {
    width: 50vw;
    height: 100vh;
    min-height: 700px;
    box-sizing: border-box;
    position: absolute;
    right: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

#block-govtheme-dmv-oldsiteusertransferform, #register-new-cta, #register-overseas-cta{
    width: 600px;
    height: max-content;
    min-height: 700px;
    box-sizing: border-box;
    margin: 0 10px;
    padding: 50px 50px 20px 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/*
#register-new-cta {
    width: 100%;
    max-width: 540px;
    box-sizing: border-box;
    padding: 50px;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(150deg,#fcfcff 50%, #f1f1f1);
    border: 1px solid #F1F1F1;
}

@media (max-width: 1329px) {
    #register-new-cta {
        min-width: none;
        max-width: none;
        padding: 50px 20px;
    }
}*/

#register-new-cta .wrapper{
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    text-wrap: wrap;
}

#register-new-cta h2 {
    width: 100%;
    margin-top: 0;
    font-size: 30px;
    font-weight: 800;
    color: #6B6969;
}

#register-new-cta p {
    width: 100%;
    color: #555;
    line-height: 25px;
    text-align: justify;
}

#register-new-cta .button {
    margin: 0;
}

@media (max-width: 600px) {
    #register-new-cta .wrapper .button-retro-lg-light {
        width: 100%;
        min-width: 200px;
    }

    #register-new-cta .wrapper .button-retro-lg-light span {
        padding: 5px;
    }
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-registrationmotorcycleinstructions, #block-govtheme-dmv-registrationnewcta, #block-govtheme-dmv-registrationoverseascta, #block-govtheme-dmv-registrationpages {
        width: 100%;
        height: max-content;
        min-height: unset;
        box-sizing: border-box;
        position: relative;
        right: 0;
        display: block;
    }

    #block-govtheme-dmv-oldsiteusertransferform, #register-new-cta, #register-overseas-cta {
        width: 100%;
        height: max-content;
        min-height: unset;
        margin: 60px 0 0 0; 
        padding: 50px 20px 20px 20px;
        position: relative;
        top: 0;
        left: 0px;
        transform: translate(0, 0);
        background-color: white;
    }
}


/* Registration Form - Overseas */

#user-register-form .overseas-register-form .description {
    width: 100%;
    max-width: 600px;
    color: white;
}

#user-register-form .form-submit {
    width: 100%;
}
/*
#register-overseas-cta {
    width: 100%;
    max-width: 540px;
    box-sizing: border-box;
    padding: 50px;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(150deg,#fcfcff 50%, #f1f1f1);
    border: 1px solid #F1F1F1;
}
*/

@media (max-width: 1329px) {
    #register-overseas-cta {
        min-width: none;
        max-width: none;
        padding: 50px 20px;
    }
}

#register-overseas-cta .wrapper{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-wrap: wrap;
}

#register-overseas-cta h2 {
    width: 100%;
    margin-top: 0;
    font-size: 30px;
    font-weight: 800;
    color: #6B6969;
}

#register-overseas-cta p {
    width: 100%;
    color: #555;
    line-height: 25px;
    text-align: justify;
}

#register-overseas-cta .button {
    margin: 0;
}

@media (max-width: 600px) {
    #register-overseas-cta .wrapper .button-retro-lg-light {
        width: 100%;
        min-width: 200px;
    }

    #register-overseas-cta .wrapper .button-retro-lg-light span {
        padding: 5px;
    }
}

/* Email Verification page */
 
.view-id-unverified_users {
    width: 100%;
    height: calc(100% - 50px);
    position: absolute;
    z-index: 3;
}

#complete-your-registration {
    width: 100vw;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#complete-your-registration .wrapper {
    width: 70%;
    max-width: 1300px;
    min-height: 500px;
    box-sizing: border-box;
    padding: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    background: white;
    box-shadow: 0px 3px 30px #00000018;
}

#complete-your-registration .wrapper .img-left, #complete-your-registration .wrapper .description.instructions{
    max-width: 50%;
    height: 100%;
}

#complete-your-registration .wrapper .img-left img {
    width: 350px;
    object-fit: contain;
}

#complete-your-registration .description {
    font-size: 22px;
    color: #3F3F3F;
    font-weight: 600;
}

#complete-your-registration .description h1 {
    font-weight: 800;
    color: #1FB6FF;
}

#complete-your-registration .description h2 {
    font-weight: 800;
    color: #0092CE;
}

#complete-your-registration .description h4 {
    margin-bottom: 10px;
}

#complete-your-registration .description * {
    line-height: 30pt;
}

#complete-your-registration .description p {
    font-size: 14pt;
    font-weight: 300;
    flood-color: #dddddd;
}

@media screen and (width < 1080px) {
    #complete-your-registration {
        min-height: max-content;
        overflow-y: scroll;
        padding: 20px 0;
        align-items: flex-start;
        top: 50px;
    }

    #complete-your-registration .wrapper {
        width: 90%;
        height: max-content;
        position: relative;
        padding: 50px 20px;
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
    }

    #complete-your-registration .wrapper .img-left{
        width: 100%;
        max-width: unset;
        height: 300px;
        box-sizing: border-box;
    }

    #complete-your-registration .wrapper .description.instructions {
        width: 100%;
        max-width: unset;
        height: 60%;
        box-sizing: border-box;
        padding: 0 20px;
    }

    #complete-your-registration .wrapper .img-left img {
        width: 100%;
        height: 100%;
    }

    #complete-your-registration .description h1 {
        font-weight: 800;
        color: #1FB6FF;
        font-size: 30pt;
    }

    #complete-your-registration .description h2 {
        font-weight: 800;
        color: #0092CE;
        font-size: 15pt;
    }

    #complete-your-registration .description p {
        padding: 20px 0;
        font-weight: 400;
        flood-color: #dddddd;
        line-height: unset;
    }
}

/* Re-registration Page*/
.reregistration-page h2 {
    margin-top: 200px;
    font-size: 50pt;
    text-align: center;
}

.reregistration-page p {
    box-sizing: border-box;
    padding: 0 12vw;
    font-size: 18pt;
    line-height: 40pt;

}

/* User Dashboard */

/* User Test Track Page */
#block-govtheme-dmv-dmvtesttrack {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding:  80px 30px 20px 30px;
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-dmvtesttrack {
        min-height: 100vh;
        padding: 60px 10px 10px 10px;
    }
}

#block-govtheme-dmv-dmvtesttrack h1 {
    margin-bottom: 0;
}

/* Full Width Progress Bar */

.user-progress.lg-bar {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-progress.lg-bar .progress-label{
    width: max-content;
    flex-shrink: 0;
}

.progress-bar-fw {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    flex-shrink: 1;
    background-color: white;
    border: none;
    border-radius: 50px;
}

.progress-bar-fw[value]::-webkit-progress-bar {
    background-color: white;
    border-radius: 50px;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;*/

}

.progress-bar-fw[value]::-webkit-progress-value {
    background-color: #4A9EE6;
    border-radius: 50px;
}

.progress-bar-fw[value]::-moz-progress-bar {
    border-radius: 50px;
    background-color: #4A9EE6;
}

@media screen and (width < 600px) {
    .user-progress.lg-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* User Test Track Cards */

.track-card.fw-card {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    margin: 15px 0;
    padding: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: white;
    filter: drop-shadow(0 3px 6px #00000010);
}

.track-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.track-title img {
    object-fit: contain;
}

.track-card.fw-card.completed {
    padding-top: 30px;
    padding-bottom: 30px;
    color: rgb(112, 112, 112);
    border: 1px solid #d8d8d8;
    opacity: .4;
}


.user-dash-component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

.user-dash-component .views-field.views-field-user-picture, .user-dash-component .views-field.views-field-user-picture .field-content {
    width: max-content;
    height: max-content;
}

.user-dash-component img.blank-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    background-color: #f1f1f1;
}

@media screen and (width < 1080px) {
    .track-card.fw-card {
        padding: 40px;
    }
}

/* Form 5 - User Update Information */
#block-govtheme-dmv-dmvform5userinformationupdate {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 30px;
    padding-top: 35px;
    background: white;
    border-radius: 10px;
}

#block-govtheme-dmv-dmvform5userinformationupdate h2 {
    font-size: 30pt;
    font-weight: 700;
}

#block-govtheme-dmv-dmvform5userinformationupdate a {
    width: 100%;
    max-width: 400px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-weight: 700;
    background: var(--dmv-primary);
}

/* User Profile */

#block-govtheme-dmv-views-block-user-profile-block-1 {
    width: 100%;
    min-height: 300px;
    box-sizing: border-box;
    position: relative;
    margin: 0 3vw;
    padding: 60px 100px;
    background: #1E71B9;
    border-radius: 10px;
}

/* Usen Name Display -Welcome */

#block-govtheme-dmv-views-block-user-information-block-1 {
    width: 100%;
    box-sizing: border-box;
    margin-top: 50px;
    padding: 50px 50px 20px 50px;
    position: relative;
    border-radius: 25px 25px 0 0;
}


#user-full-name {
    width: 100%;
    color: var(--dmv-button-blue);
}


/* User Dashbord Menu */
#block-govtheme-dmv-userdashboardmenu {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--dmv-button-light);
}

#block-govtheme-dmv-userdashboardmenu .menu {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 20px 50px 50px 50px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}


#block-govtheme-dmv-userdashboardmenu li a {
    height: 100%;
    width: max-content;
    position: relative;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #727272;
}

#block-govtheme-dmv-userdashboardmenu a.is-active {
    height: 100%;
    color: #333333;
    font-weight: 800;
}

#block-govtheme-dmv-userdashboardmenu li:hover {
    box-sizing: border-box;
    border-bottom: 3px solid #333333;
}


/* Overview */

/* Overview - Summary */
#user-overview-summary {
    width: 100%;
    min-height: 700px;
    box-sizing: border-box;
    position: relative;
    padding: 50px;
    margin: 50px 0;
    /*display: flex;
    gap: 20px;
    flex-wrap: wrap;*/
    background: #F7F6F6;
    border-radius: 5px;
}

#user-overview-summary .field-content {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}


#user-overview-summary .user-overview-summary {
    width: 100%;
    min-width: 300px;
    min-height: 200px;
    box-sizing: border-box;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    background: white;
}

#user-overview-summary .user-overview-summary h4 {
    height: max-content;
    display: flex;
    align-items: center;
    gap: 20px;
}

#user-overview-summary .user-overview-summary h2 {
    margin-left: 50px;
}

#user-overview-summary .user-overview-summary img {
    width: 30px;
    height: 30px;
    background:#3F3F3F;
    border-radius: 50%;
}

#user-overview-summary .user-booking-payment {
    width: max-content;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

#user-overview-summary .user-booking-payment h4 {
    width: max-content;
}


.widget-calendar {
    width: 30%;
    min-width: 300px;
    height: 400px;
    box-sizing: border-box;
    padding: 10px;
    background: white;
}

/* User Personal */

#block-govtheme-dmv-views-block-user-personal-block-1, #block-govtheme-dmv-views-block-user-personal-block-2, #block-govtheme-dmv-views-block-user-personal-block-3, #block-govtheme-dmv-views-block-user-personal-block-4 {
    width: 100%;
    flex-shrink: 0;
}

/* Login Information */

.user-dashboard-personal {
    width: 100%;
    min-width: 300px;
    box-sizing: border-box;
    height: max-content;
    min-height: 300px;
    box-sizing: border-box;
    margin: 20px 0 0 0;
    padding: 50px 50px;
    display: flex;
    gap: 50px;
    border-bottom: 7px solid #d2d2d2;
    border-radius: 10px;
    box-shadow: -2px 3px 10px #f1f1f1;
}

@media (max-width: 1240px) {
    .user-dashboard-personal {
        flex-direction: column;
    }
}

.user-dashboard-personal .clm1 {
    width: 400px;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-wrap: wrap;
    text-wrap: wrap;
}

@media (max-width: 640px) {
    .user-dashboard-personal .clm1 {
        width: 100%;
    }

    .user-dashboard-personal .clm.clm1 p {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        padding-right: 10px;
    }
}

.user-dashboard-personal .clm.clm2 {
    width: 100%;
    display: flex;
    align-items: center;flex-shrink: 1;
    background: #a9a9a9;
}

.user-dashboard-personal .clm.clm2 .wrapper {
    width: 100%;
    min-height: 300px;
    position: relative;
}

.user-dashboard-personal .clm.clm2 .wrapper::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 7px;
    left: 7px;
    background-color: #E6E6E6;
    border-radius: 2px;
}

.user-dashboard-personal .clm.clm2 .wrapper .user-personal-feilds {
    width: 100%;
    min-height: 300px;
    box-sizing: border-box;
    padding: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 3;
    background-color: white;
    border: 2px solid #ebeaea;
}

@media (max-width: 640px) {
    .user-dashboard-personal .clm.clm2 .wrapper .user-personal-feilds {
        flex-direction: column;
        padding: 50px 30px;
    }
}

.user-dashboard-personal .clm.clm2 .wrapper .user-personal-feilds .row {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 50px;
}

@media (max-width: 640px) {
    .user-dashboard-personal .clm.clm2 .wrapper .user-personal-feilds .row {
        flex-direction: column;
        gap: 20px;
    }
}

.user-dashboard-personal .clm.clm2 .wrapper .user-personal-feilds .row h4 {
    width: 200px;
    box-sizing: border-box;
    text-wrap: wrap;
}

.user-dashboard-personal .clm.clm2 .wrapper .user-personal-feilds .row span {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-shrink: 1;
    background-color: #F1F1F1;
}

/* User dashboard - Booking */

#block-govtheme-dmv-views-block-notification-booking-status-block-1, #block-govtheme-dmv-views-block-notification-booking-status-block-2 {
    width: 100%;
    flex-shrink: 0;
}

.user-dashboard-booking {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 20px 12vw;
    background: var(--dmv-button-light);
    border-radius: 10px;
}

@media (max-width: 1200px) {
    .user-dashboard-booking {
        min-height: 500px;
        padding: 20px;
    }
}

.user-dashboard-booking h2 {
    font-size: 15pt;
    padding: none;
    margin: none;
    margin-bottom: 50px;
    color: var(--dmv-primary);
}

#user-dashboard-booking {
    width: 50%;
    min-width: 300px;
    height: 600px;
    box-sizing: border-box;
    padding: 50px 5%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 100px;
    background-color: #fff;
    border: 1px solid #e7e6e6;
    border-radius: 10px;
    box-shadow: -2px 3px 10px #d9d9d9;
}

@media (max-width: 600px) {
    #user-dashboard-booking {
        flex-direction: column;
    }
}


@media (max-width: 1250px) {
    #user-dashboard-booking {
        width: 100%;
    }
}


#user-dashboard-booking h4, #user-dashboard-booking p {
    margin: 0;
}

#user-dashboard-booking .user-booking-info {
    width: max-content;
    height: max-content;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}


#user-dashboard-booking .user-booking-info.none{
    align-items: center;
}

#user-dashboard-booking .user-booking-info img {
    width: 40px;
    height: 40px;
}

#user-dashboard-booking .user-booking-info .booking-info-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#user-dashboard-booking .user-booking-info .booking-info-content h4 {
    font-size: 14pt;
    color: var(--dmv-primary);
}

#user-dashboard-booking.none {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* User Dashboard - User calendar */
#block-govtheme-dmv-views-block-user-calendar-block-1 {
    width: 100%;
    padding: 50px 0;
    background: var(--dmv-button-light);
}

@media (max-width: 1250px) {
    #block-govtheme-dmv-views-block-user-calendar-block-1 {
        display: none;
    }
}

#block-govtheme-dmv-views-block-user-calendar-block-1 > div {
    width: calc(80% - 100px);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 50px;
    background: white;
    border: white;
    border: 1px solid #e7e6e6;
    border-radius: 10px;
}

#block-govtheme-dmv-views-block-user-calendar-block-1 * {
    border: white;
}

#block-govtheme-dmv-views-block-user-calendar-block-1 td.fc-daygrid-day {
    box-sizing: border-box;
    position: relative;
    background: #f6f6f6 ;
    padding: 10px;
    border: 5px solid white;
    border-radius: 15px;
    pointer-events: none;
}

#block-govtheme-dmv-views-block-user-calendar-block-1 td.fc-daygrid-day.fc-day-today {
    background: #3f5fff;
    color: white;
    font-size: 15pt;
    font-weight: 700;
}

#block-govtheme-dmv-views-block-user-calendar-block-1 td.fc-daygrid-day.fc-day-today a {
    color: white;
    font-weight: 700;
}

#block-govtheme-dmv-views-block-user-calendar-block-1 td.fc-daygrid-day.fc-day-past {
    background: #e8e8e8;
    pointer-events: none;
}

#block-govtheme-dmv-views-block-user-calendar-block-1 td.fc-daygrid-day.fc-day-other {
    background: white;
    opacity: 0;
    /*nter-events: none;*/
}

.fc-event.fc-event-start.fc-event-end.fc-event-future.fc-event-past.fc-daygrid-event.fc-daygrid-dot-event {
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0;
    padding: 10px ;
    background: white;
    box-shadow: -2px 3px 10px #02020213;
    border: 1px solid var(--dmv-button-blue);;
    border-radius: 50px;
    color: #3333ff;
}
.fc-event.fc-event-start.fc-event-end.fc-event-future.fc-event-past.fc-daygrid-event.fc-daygrid-dot-event:hover {
    background: var(--dmv-primary);
    border-color: var(--dmv-primary);
    color: white;
    font-weight: 800;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 500ms;
}

#block-govtheme-dmv-views-block-user-calendar-block-1 .fc-event-title {
    color: #3333ff;
    display: flex;
    flex-wrap: wrap;
    pointer-events: none;
}

/* User Dashboard - User failed, User Verify */
#block-govtheme-dmv-userdashboardblockuserfailed, #block-govtheme-dmv-userdashboardblockverifypracticehours  {
    margin: 100px 0;
}

#block-govtheme-dmv-userdashboardblockuserfailed h1, #block-govtheme-dmv-userdashboardblockverifypracticehours h1 {
    margin-top: 0;
}

#block-govtheme-dmv-userdashboardblockuserfailed p, #block-govtheme-dmv-userdashboardblockverifypracticehours p {
    font-size: 16pt;
    line-height: 22pt;
}

/* User Dashboard - Booking a Test */
/* Calendar Page */

#block-govtheme-dmv-bookingpagehero {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    padding: 20px 50px;
    padding-top: 100px;
    text-wrap: wrap;
}

.dmv-calendar-opening-view {
    width: 90%;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 30px 20px; 
}

.dmv-calendar-opening-view div .fullcalendar--wrapper * {
    border: white;
}

.dmv-calendar-opening-view td.fc-daygrid-day {
    min-height: 150px;
    background: #f6f6f6 ;
    padding: 10px;
    border: 5px solid white;
    border-radius: 15px;
}

.dmv-calendar-opening-view .fc-daygrid-day-top a {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-decoration: none;
    font-size: 100%;
    /*background: white;
    border-radius: 50%;*/
}

.dmv-calendar-opening-view td.fc-daygrid-day.fc-day-today {
    background: #3f5fff;
    color: white;
    font-size: 15pt;
    font-weight: 700;
}

.fc-day.fc-day-wed.fc-day-today.fc-daygrid-day .fc-daygrid-day-top a {
    color: white;
}

.fc-day.fc-day-wed.fc-day-today.fc-daygrid-day .fc-daygrid-day-events a {
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0;
    padding: 10px;
    background: white;
    box-shadow: -2px 3px 10px #02020240;
    border: 1px solid rgb(98, 159, 250);
    border-radius: 50px;
    color: #3333ff
}

.dmv-calendar-opening-view td.fc-daygrid-day.fc-day-past {
    background: #e8e8e8;
    pointer-events: none;
}

.fc-day.fc-day-past.fc-daygrid-day .fc-daygrid-day-events {
    display: none;
}


.dmv-calendar-opening-view td.fc-daygrid-day.fc-day-other {
    background: white;
    opacity: 0;
}

/* Booking Instance Page */

#block-govtheme-dmv-content .bookable-calendar-opening-instance {
    box-sizing: border-box;
    padding: 80px 50px ;
    margin: 30px 30px;
    border-radius: 5px;
    background-color: white;
    box-shadow: -2px 3px 10px #00000009;
}

#block-govtheme-dmv-content .bookable-calendar-opening-instance a {
    padding: 15px 50px;
    background: var(--dmv-button-blue);
    color: white;
    text-decoration: none;
}

@media screen and (width < 1080px) {
    #block-govtheme-dmv-bookingpage{
        height: max-content;
        min-height: calc(100vh - 50px);
        overflow-y: unset;
        margin-bottom: 50px;
    }

    .dmv-calendar-opening-view {
        width: 97%;
        position: relative;
        padding: 10px;
    }

    div[data-once="fullCalendarBuild"] {
        padding: 10px;
    }

    .dmv-calendar-opening-view td.fc-daygrid-day {
        padding: 5px;
    }

    .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr .fc-toolbar-chunk:nth-child(3) {
        display: flex;
        gap: 5px;
    }

    .fc .fc-daygrid-day-events {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .fc-event.fc-event-start.fc-event-end.fc-event-future.fc-event-past.fc-daygrid-event.fc-daygrid-dot-event {
        padding: 20px 0;
        display: flex;
        align-items: center;
    }

    #block-govtheme-dmv-bookingpagehero {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 0;
    }

    #block-govtheme-dmv-bookingpagehero h3 {
        font-size: 18px;
    }

    #block-govtheme-dmv-content .bookable-calendar-opening-instance {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

/* Booking Contact Add Form */
#booking-contact-add-form {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 50px ;
    margin: 30px 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 10px;
    box-shadow: -2px 3px 10px #02020213;
    background-color: white;
}

#edit-email-wrapper label.form-required {
    width: 200px;
    box-sizing: border-box;
    text-wrap: wrap;
}

#booking-contact-add-form #edit-email-0-value {
    width: 100%;
    padding: 10px 5px;
    background: #F1F1F1;
    border: none;
    pointer-events: none;
}

#booking-contact-add-form #edit-party-size-0-value {
    padding: 10px 5px;
    background: #F1F1F1;
    border: none;  
}

#booking-contact-add-form input[type=submit] {
    padding: 15px 50px;
    color: white;
    background-color: var(--dmv-button-blue);
    border: none;
}

@media screen and (width < 1080px) {
    #booking-contact-add-form {
        width: calc(100% - 20px);
        flex-direction: column;
        gap: 20px;
    }
}

/* Quiz Portal */
/* Login Page */

.-role-login-page-form.written-test-form {
    width: 100%;
    height: 100vh;
    min-height: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #2d7ac3;
}

#-role-login-page-form .form-item--error-message {
    order: 2;
    box-sizing: border-box;
    padding: 5px;
    color: white;
    background: rgb(255, 81, 81);
}

.-role-login-page-form.written-test-form .test-login-title {
    width: 600px;
    margin: 0 0 30px 0;
    font-size: 40px;
    font-weight: 900;
    text-align: center;
    color: White;
}

#-role-login-page-form .form-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#-role-login-page-form .form-item label {
    color: white;
    font-weight: 600;
}

#-role-login-page-form .form-item input {
    width: 600px;
    height: 60px;
    box-sizing: border-box;
    background: #f1f1f1;
}

#-role-login-page-form #edit-submit {
    width: 600px;
    height: 60px;
    margin: 50px 0 0 0;
    border: none;
    background: #3333ff;
    color: white;
}

/* Written Test Quiz */

#question {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    padding: 50px;
}

.question-number {
    margin-bottom: 0;
}

#quiz-take-form {
    width: 100vw;
    min-width: 1200px;
    height: max-content;
    min-height: 1200px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#quiz-take-form .form-radios  {
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#quiz-take-form  #question h3 {
    font-size: 30pt;
    margin-top: 20px;
}

#quiz-take-form  #question .form-checkboxes {
    padding: 50px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    gap: 20px;
}

#quiz-take-form  #question .form-checkboxes .form-item {
    width: calc(50% - 100px);
    flex-shrink: 0;
    display: flex;
    gap: 20px;
}

#quiz-take-form  #question .form-checkboxes .form-item label {
    font-size: 15pt;
}

#quiz-take-form  #question .form-checkboxes .form-item input[type="checkbox"] {
    appearance: none;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: white;
    border: 3px solid grey;
}

#quiz-take-form  #question .form-checkboxes .form-item input[type="checkbox"]:checked {
    border-color: var(--dmv-primary);
}

#quiz-take-form  #question .form-checkboxes .form-item input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--dmv-primary);
    border-radius: 50px;
}

#quiz-take-form div[data-drupal-selector="edit-actions"] {
    display: flex;
    gap: 30px;
}

#quiz-take-form input[data-drupal-selector="edit-next"], #quiz-take-form input#quiz-finish {
    margin: 0;
}





/********/

#quiz-question-answering-form {
    width: 1080px;
    height: max-content;
    box-sizing: border-box;
    margin-top: 100px;
    padding: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: -2px 2px 10px #00000018;

}
/* Test Introduction */
#quiz-selection {
    width: 100vw;
    min-width: 1080px;
    height: calc(100vh - 100px);
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#quiz-selection .wrapper {
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#quiz-selection .wrapper > * {
    width: 600px;
}

#quiz-selection h2 {
    font-size: 40pt;
    color: var(--dmv-dark-blue);
    margin-bottom: 50px;
}

#quiz-selection a {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18pt;
    font-weight: 600;
    color: white;
    text-decoration: none;
    background: var(--dmv-primary);
    border-radius: 5px;
}

#quiz-instructions {
    width: 100%;
    min-height: 800px;
    box-sizing: border-box;
    padding: 50px;
    position: relative;
    background-color: #e9f0ff;
    border-radius: 10px;
    filter: drop-shadow(-2px 0 10px #00000043);
}

#quiz-instructions .wrapper {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    box-sizing: border-box;
}

#quiz-instructions h1 {
    color: #287eff;
    font-weight: 700;
    margin-bottom: 50px;
}

#quiz-instructions .quiz-start-menu {
    margin: 50px 0;
    position: absolute;
    bottom: 0;
    display: flex;
    gap: 20px;
}

#quiz-instructions .quiz-start-menu a {
    width: 400px;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #f1f1f1;
    border-radius: 5px;
}

#quiz-instructions .quiz-start-menu a.btn-dark {
    background-color: #287eff;
    color: white;
    font-weight: 700;
}

#quiz-instructions .quiz-start-menu a.btn-light {
    color: #287eff;
    font-weight: 700;
    border: 2px solid #287eff;

}

/* Quiz answer form */
#quiz-question-answering-form .clearfix.text-formatted {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 0;
    font-size: 16pt;
    font-weight: 700;
    background: white;
}

#quiz-question-answering-form .clearfix.text-formatted .field__label {
    display: none;
}

.quiz-question-multichoice table {
    width: 100%;
}

.quiz-question-multichoice table thead {
    display: none;
}

.quiz-question-multichoice table tbody {
    width: 100%;
    box-sizing: border-box;
    padding: 50px 0;
    display: flex;
    justify-content: flex-start;
    gap: 20PX;
    flex-wrap: wrap;
}

.quiz-question-multichoice table tbody tr {
    width: calc(50% - 20px);
    min-width: 300px;
    height: 120px;
    position: relative;
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    background: #F1F1F1;
    border: 1px solid #eee;
    border-radius: 10px;
}

.quiz-question-multichoice table tbody tr .form-radio {
    width: 30px;
    height: 30px;
}

.quiz-question-multichoice table tbody tr td .form-item--error-message {
    position: absolute;
    top: 5px;
}

.quiz-question-multichoice table tbody tr td p {
    width: 100%;
    flex-shrink: 1;
    text-wrap: wrap;
}

#quiz-question-answering-form input[type="submit"] {
    width: 160px;
    height: 40px;
    border: none;
}

#edit-navigation-actions {
    display: flex;
    gap: 20px;
}

/* Quiz results */

.quiz-result-links {
    display: none;
}


/*#quiz-results.pass, #quiz-results.fail {
    width: 100vw;
    min-width: 900px;
    height: 100vh;
    min-height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

#quiz-results.pass .wrapper {
    width: 800px;
    height: 900px;
    box-sizing: border-box;
    padding: 50px;
    background: linear-gradient(90deg, #287eff, #2377f6 );
    color: white;
    border-radius: 20px;
    box-shadow: -6px 6px 9px #0000004f;
}

#quiz-results.fail .wrapper {
    width: 800px;
    height: 900px;
    box-sizing: border-box;
    padding: 50px;
    background: linear-gradient(160deg, #0a0a0c 60%, #072046 );
    color: white;
    border-radius: 20px;
    box-shadow: -6px 6px 9px #0000004f;
}

#quiz-results .wrapper {
    width: 100%;
    height: 300px;
}

#quiz-results .row1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#quiz-results .row1 > * {
    width: 80%;
}

#quiz-results h1 {
    font-size: 30pt;
    font-weight: 700;
    margin: 30px 0;
    padding: 0;
}

#quiz-results p {
    width: max-content;
    margin: 0;
    margin-bottom: 100px;
    font-size: 18pt;
    font-weight: 600;
}

.results-info {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 16pt;
}*/

/* Quiz Results Feedback */

#block-govtheme-dmv-quizresultsfeedback {
    width: 100vw;
    min-width: 1280px;
    height: 100vh;
    min-height: 720px;
    box-sizing: border-box;
    overflow: hidden;
    /*padding-top: 100px;*/
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#block-govtheme-dmv-quizresultsfeedback #quiz-results {
    width: max-content;
    height: max-content;
    background-color: white;
    border-radius: 10px;
    box-shadow: -2px 2px 10px #0000000f;
}

#block-govtheme-dmv-quizresultsfeedback #quiz-results .wrapper {
    width: 600px;
    height: max-content;
    box-sizing: border-box;
    position: relative;
    padding: 50px;
    display: flex;
    flex-direction: column;
}

#block-govtheme-dmv-quizresultsfeedback #quiz-results .wrapper > * {
    width: 100%;
}

#block-govtheme-dmv-quizresultsfeedback #quiz-results h2 {
    margin-bottom: 25px;
    font-size: 30pt;
    font-weight: 700;
}

#block-govtheme-dmv-quizresultsfeedback #quiz-results h4 {
    margin-bottom: 20px;
}

#block-govtheme-dmv-quizresultsfeedback #quiz-results .results {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Admin Dashboard */

/*  Core Main Nav Menu */
#block-govtheme-dmv-mainnavigation {
    height: 100%;
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#block-govtheme-dmv-mainnavigation > ul > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
}

#block-govtheme-dmv-mainnavigation ul > li > ul > li a, #block-govtheme-dmv-mainnavigation ul > li > ul > li span  {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#block-govtheme-dmv-mainnavigation span.link-text {
    width: 100%;
    height: 100%;
    padding: 0px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/*#block-govtheme-dmv-mainnavigation a:hover, #block-govtheme-dmv-mainnavigation span:hover {
    color: var(--dmv-dark-blue);
}*/

#block-govtheme-dmv-mainnavigation > .menu {
    height: 100%;
    margin: 0 0 0 30px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

#block-govtheme-dmv-mainnavigation > .menu > li {
    width: 200px;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#block-govtheme-dmv-mainnavigation > .menu > li:hover {
    background: white;
    color: var(--dmv-dark-blue);
    /*box-shadow: -2px 5px 10px #16161629;*/
}

#block-govtheme-dmv-mainnavigation .main-menu-link a {
    width: 100%;
    height: 100%;
}

#block-govtheme-dmv-mainnavigation .main-menu-link:hover a {
    color: var(--dmv-dark-blue);
}

#block-govtheme-dmv-mainnavigation > .menu > li > .menu {
    width: max-content;
    height: max-content;
    display: none;
    padding-top: 15px;
    position: absolute;
    z-index: 20;
    top: 30px;
    left: -16px;
    filter: drop-shadow(-2px 5px 10px #16161664);
    color: var(--dmv-dark-blue);
    border-radius: 5px;
    overflow: hidden;
}

#block-govtheme-dmv-mainnavigation > .menu > li:hover > .menu {
    display: block;
}

#block-govtheme-dmv-mainnavigation > .menu > li > .menu > li {
    width: 200px;
    height: 100px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
}

#block-govtheme-dmv-mainnavigation > .menu > li> .menu > li:hover {
    background: #f0f0f0;
}

#block-govtheme-dmv-mainnavigation > .menu > li > .menu > li > .menu {
    width: 250px;
    padding-left: 12px;
    position: absolute;
    z-index: 8;
    display: none;
    top: 0px;
    left: 220px;
    /*filter: drop-shadow(2px 5px 10px #16161607);*/
}

#block-govtheme-dmv-mainnavigation > .menu > li> .menu > li:hover > .menu {
    display: block;
}

#block-govtheme-dmv-mainnavigation > .menu > li > .menu > li > .menu > li {
    width: 250px;
    height: 100px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
    border-left: 15px solid #f0f0f0;
}

#block-govtheme-dmv-mainnavigation > .menu > li > .menu > li > .menu > li:hover {
    background: #f3f2f2;
}

/* Admin Dashboard menu */
#block-govtheme-dmv-menudmvadmindashboard {
    width: 100%;
    height: max-content;
    flex-shrink: 0;
}

#dashboard-menu {
    width: 100%;
    height: max-content;
    background-color: #F1F1F1;
}

#dashboard-menu ul {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#dashboard-menu ul li {
    width: 200px;
    height: 80px;
    box-sizing: border-box;
    position: relative;
    list-style: none;
    cursor: pointer;
}

#dashboard-menu ul li > p {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin: 0;
    background-color: #F1F1F1;;
}

#dashboard-menu ul li .dropdown {
    width: 390px;
    height: max-content;
    min-height: 380px;
    max-height: 200px;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 40px 20px 20px 20px;
    position: absolute;
    top: 75px;
    left: -1px;
    z-index: 3;
    display: none;
    flex-direction: column;
    gap: 30px;
    background-color: #F1F1F1;
    border: 2px solid white;
    box-shadow: 0px 3px 10px #e8e8e8;
}

#dashboard-menu ul li .dropdown .menu-link {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#dashboard-menu ul li .dropdown .menu-link p {
    margin: 0;
}

#dashboard-menu ul li:hover {
    border-right: 2px solid white;
    border-left: 2px solid white;
    
}

#dashboard-menu ul li:hover p {
    z-index: 4;
}

#dashboard-menu ul li:hover .dropdown {
    display: flex;
}

/* DMV Admin User Profile Sidebar Menu */
.sidebar-left-menu {
    width: 250px;
    height: calc(100vh - 115px);
    box-sizing: border-box;
    padding: 50px 0px;
    position: fixed;
    top: 115px;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background-color: #EEEEEE;
    filter: drop-shadow(3px 0 10px #00000014);
    border-right: 1px solid #dddddd;
}

.sidebar-left-menu a {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(48, 48, 48, 0.982);
    font-size: 12pt;
    font-weight: 800;
    text-decoration: none;
    
}

.sidebar-left-menu a:hover {
    color: white;
    background-color: var(--dmv-primary);
}

.sidebar-left-menu a.active-link {
    color: #2667A6;
    background-color: white;
}

.sidebar-left-menu a i {
    padding-top: 2px;
}

/* DMV Admin Overview */

#dmv-admin-overview {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 2px solid #f1f1f1;
    border-radius: 10px;
}

#dmv-admin-overview .chart-icon {
    opacity: .1;
}


/* Admin Dashboard New User Verification */

/* Exposed Filter*/

/* #views-exposed-form-new-user-verification-search-block-1 {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    position: relative;
    padding: 30px;
    margin: 50px 0;
    box-shadow: -2px 3px 12px #F1F1F1;
    border: 1px solid #F1F1F1;
}

#views-exposed-form-new-user-verification-search-block-1 .form-item {
    height: max-content;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

#views-exposed-form-new-user-verification-search-block-1 label {
    width: 400px;
    box-sizing: border-box;
    text-wrap: wrap;
}

#views-exposed-form-new-user-verification-search-block-1 #edit-uid {
    width: calc(100% - 430px);
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F1F1;
    border: none;
}

#views-exposed-form-new-user-verification-search-block-1 #edit-uid--description {
    width: 100%;
}

#views-exposed-form-new-user-verification-search-block-1 .form-submit {
    width: 60%;
    height: 40px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    border-radius: 0;
}*/

/* FORM FILTER */
.dmv-admin-table {
    width: 100%;
    min-width: 1080px;
    height: max-content;
    overflow-y: scroll;
    box-sizing: border-box;
}

.dmv-admin-table  .views-exposed-form {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    padding: 20px 50px;
    background:  #f2f2f2;
}

.dmv-admin-table  .views-exposed-form  .form--inline {
    display: flex;
    align-items: center;
    gap: 30px;
}

.dmv-admin-table  .views-exposed-form .form-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dmv-admin-table .views-exposed-form .form-item select, .dmv-admin-table .views-exposed-form .form-item input {
    box-sizing: border-box;
    padding: 15px 5px;
}

.dmv-admin-table .views-exposed-form .form-actions {
    padding: 0;
}

.dmv-admin-table .views-exposed-form .form-actions input[type=submit] {
    padding: 15px 75px;
    border: none;
}

/* FORM TABLE */

.dmv-admin-table .view-content .views-table{
    width: 100%;
    height: max-content;
    box-sizing: border-box;
}

.dmv-admin-table .view-content .views-table thead {
    background-color: var(--dmv-button-blue);
    color: white;

}

.dmv-admin-table .view-content .views-table thead th {
    text-align: left;
    padding: 20px 0 20px 50px;
}

.dmv-admin-table .view-content .views-table tbody {
    width: 100%;
    row-gap: 10px;
    /*display: flex;
    flex-direction: column;*/
}

.dmv-admin-table .view-content .views-table tbody tr {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    position: relative;
    /*display: flex;*/
}

.dmv-admin-table .view-content .views-table tbody tr:nth-child(even) td {
    background: #f2f2f2;
}

.dmv-admin-table .view-content .views-table tbody tr td {
    margin: 5px 0;
    padding: 20px 50px;
    font-weight: 500;
}

.dmv-admin-table .view-content .views-table tbody tr td:first-child {
    border-radius: 10px 0 0 10px;
}

.dmv-admin-table .view-content .views-table tbody tr td:last-child {
    border-radius: 0 10px 10px 0;
}

.dmv-admin-table .view-content .views-table tbody tr td {
    margin: 5px 0;
    padding: 20px 50px;
}

.dmv-admin-table .view-content .views-table tbody tr:hover td {
    background: rgb(6, 65, 137);
    transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 200ms ease-in-out;
    color: white;
    border-radius: 0;
}

.dmv-admin-table .view-content .views-table tbody tr:hover td a {
    color: white;
}

/*.dmv-admin-table .view-content .views-table tbody tr .views-field-field-first-name, .dmv-admin-table .view-content .views-table tbody tr .views-field-name {
    width: 33.3%;
}

.dmv-admin-table .view-content .views-table tbody tr .views-field-edit-user{
    position: absolute;
    right: 50px;
}
*/

.dmv-admin-table h4 {
    box-sizing: border-box;
    margin: 0;
    padding: 20px 0px;
    color: black;
    border-radius: 5px;
}
/* Filtered Table */

#block-govtheme-dmv-views-block-new-user-verification-search-block-1 .view-content {
    width: 100%;
    height: max-content;
    min-height: 300px;
    box-sizing: border-box;
    position: relative;
    padding: 30px;
    background-color: #F5F5F5;
}

#block-govtheme-dmv-views-block-new-user-verification-search-block-1 .view-content .views-table th {
    width: 40%;
    box-sizing: border-box;
    padding: 10px;
    margin:  0 0 50px 0;
    background: #d2d2d2;
    text-align: left;
}

#block-govtheme-dmv-views-block-new-user-verification-search-block-1 .view-content .views-table tr {
    margin: 30px 0;
    background: #F1F1F1;
}

#block-govtheme-dmv-views-block-new-user-verification-search-block-1 .view-content .views-table td {
    padding: 20px 10px;
}

/* Admin Dashboard Edit User */

.user-form:not(#user-register-form) {
    margin: 80px 50px 100px 50px;
    padding: 0;
    background: white;
}

.user-form  .form-item, .user-form .form-wrapper.field--type-datetime {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#user-form > .form-item {
    margin: 0 0 40px 0;
}

.user-form > .form-item .form-item {
    margin: 0 0 50px 0;
}

.user-form .field-group-label {
    margin-bottom: 80px;
}

.user-form label {
    width: 100%;
    text-wrap: wrap;
}

.user-form .description {
    width: 100%;
    max-width: 600px;
    color: #555;
}

.user-form .form-text, #user-form .form-select, #user-form .form-date, #user-form .form-email {
    width: 100%;
    max-width: 600px;
    height: 50px;
    box-sizing: border-box;
    padding: 0 15px;
    background: #F8FAFC;
    border: 1px solid #939cb3;
    border-radius: 5px;
    
}

.user-form #edit-field-date-of-birth-wrapper {
    box-sizing: border-box;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.user-form #edit-field-date-of-birth-wrapper .form-item {
    margin: 0;
}

.user-form #edit-field-date-of-birth-wrapper h4 {
    font-weight: 400;
}

.user-form [data-drupal-selector="edit-group-user-validation"] {
    width: calc(100% - 100px);
    box-sizing: border-box;
    margin: 50px 0;
    margin-bottom: 0;
    /*padding: 50px;*/
    padding-bottom: 0;
}

#user-form [data-drupal-selector="edit-group-user-name"], #user-form [data-drupal-selector="edit-group-user-info"], #user-form [data-drupal-selector="edit-group-user-credential"]{
    width: calc(100% - 100px);
    box-sizing: border-box;
    margin: 50px 0;
    margin-bottom: 0;
    padding: 50px;
    padding-bottom: 0;
}

.user-form .form-type-radio.form-item-status {
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 50px;
    background-color: #f1f1f1;
}

.user-form input[type=number] {
    max-width: 600px;
    height: 50px;
}

.user-form .form-type-radio.form-item-status .form-radio {
    width: max-content;
    padding: 0 20px;
}

.user-form #edit-field-reciept-number-mc-skill-0-value {
    width: 100%;
    max-width: 600px;
    height: 50px;
    box-sizing: border-box;
    padding: 0 15px;
    background: #F8FAFC;
    border: 1px solid #939cb3;
    border-radius: 5px;
}

#edit-field-phone-number-0 input[type=tel] {
    width: 100%;
    max-width: 600px;
    height: 50px;
    box-sizing: border-box;
    background: #F8FAFC;
    border: 1px solid #939cb3;
    border-radius: 5px;
}



form .form-item :last-child {
    order: 2;
} 

#user-form .form-actions {
    margin: 0;
}


#user-form .form-submit {
    width: 100%;
    max-width: 600px;
    height: 50px;
    box-sizing: border-box;
    margin: 30px 0 50px 50px;
    position: relative;
    font-weight: 700;
    color: white;
    border: none;
    border-radius: 5px;
    background-color: var(--dmv-primary); 
}

#user-form .form-submit:nth-child(2) {
    background-color: rgb(245, 63, 63);
}

@media screen and (width < 450px) {
    #edit-account .form-item {
        width: 100%;
    }
}

@media screen and (width < 600px) {
    .user-form:not(#user-register-form) {
        margin: 0;
    }
}

@media screen and (width < 1080px) {
    #user-form {
        min-height: calc(100vh - 50px);
        margin: 0;
    }

    #user-form [data-drupal-selector="edit-group-user-validation"], #user-form [data-drupal-selector="edit-group-user-name"], #user-form [data-drupal-selector="edit-group-user-info"], #user-form [data-drupal-selector="edit-group-user-credential"] {
        width: 100%;
        padding: 30px 20px 50px 20px;
    }

    .fieldset-wrapper {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .fieldset-wrapper .form-item {
        width: 100%;
    }

    .fieldset-wrapper .form-text, .fieldset-wrapper .form-select, .fieldset-wrapper .form-date, .fieldset-wrapper .form-email, .fieldset-wrapper .form-submit, .fieldset-wrapper .form-type-number, .fieldset-wrapper .form-textarea {
        width: 100%;
        box-sizing: border-box;
        max-width: none;
    }

    /*#edit-account {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }*/

    #user-form label {
        width: 100%;
    }

    #edit-account .form-text, #edit-account .form-select, #edit-account .form-date, #edit-account .form-email, #edit-account .form-submit {
        width: 100%;
        box-sizing: border-box;
        max-width: none;
    }

    div[data-drupal-selector="edit-actions"] {
        padding-bottom: 80px;
    }

div[data-drupal-selector="edit-actions"].form-actions {
        margin: 0 0 50px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    #user-form #edit-field-reciept-number-mc-skill-0-value {
    width: calc(100% - 10px);
    }

    #user-form .form-submit {
        width: calc(100% - 20px);
        margin: 0;

    }
}

/* User Pass Form */
#user-pass {
    width: 80%;
    min-width: 400px;
    max-width: 800px;
    box-sizing: border-box;
    padding: 50px;
    position: absolute;
    top: calc(50vh - 50px);
    left: 50%;
    transform: translate(-50%, -45%);
    background: White;
}

/* User Reset Form */
#user-pass-reset {
    width: 80%;
    min-width: 400px;
    max-width: 800px;
    box-sizing: border-box;
    padding: 50px;
    position: absolute;
    top: calc(50vh - 50px);
    left: 50%;
    transform: translate(-50%, -45%);
    background: White;
    border: 1px solid #ededed;
    border-radius: 5px;
    box-shadow: 0px 3px 30px #00000018;
}

#user-pass-reset div[data-drupal-selector="edit-actions"].form-actions {
        width: 100%;
        margin: unset;
        margin-top: 50px;
}

#user-pass-reset input[data-drupal-selector="edit-submit"] {
    padding: 10px;
}

@media screen and (width < 1080px) {
    #user-pass-reset {
        width: calc(100% - 40px);
        max-width: unset;
        min-width: unset;
        height: max-content;
        padding: 50px 30px;
        font-size: 15pt;
    }

    #user-pass-reset div[data-drupal-selector="edit-actions"].form-actions {
        width: 100%;
        margin-right: unset;
        margin-bottom: unset;
        margin-left: unset;
    }

    #user-pass-reset div[data-drupal-selector="edit-actions"] {
        padding-bottom: unset;
    }

    #user-pass-reset input[data-drupal-selector="edit-submit"] {
        width: 100%;
    }
}

/* DMV Admin Forms */

.dmv-admin-form {
    width: 100%;
    min-height:500px;
    box-sizing: border-box;
    padding: 50px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #f2f2f2;
}

.dmv-admin-form-wrapper {
    width: max-content;
    height: max-content;
    box-sizing: border-box;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dmv-admin-form-input {
    width: 100%;
    min-width: 400px;
    height: 50px;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    background: #F1F1F1;
    border: none;
}

.dmv-admin-form-select {
    width: 100%;
    min-width: 400px;
    height: max-content;
    min-height: 50px;
    background: #F1F1F1;
    border: none;
}

.dmv-admin-form-submit {
    width: 100%;
    min-width: 400px;
    height: 50px;
}

/* User edit forms */
.form-default-display {
width: 100%;
box-sizing: border-box;
position: relative;
padding: 50px;
padding-bottom: 0;
border-bottom: 1px solid #f4f4f4;
}

@media screen and (width < 1080px) {
    .form-default-display {
        padding: 70px 20px 0 20px
    }

}

/* DMV ADMIN TABLES */

#block-govtheme-dmv-dmvadmintables {
    width: 100%;
    min-width: 1080px;
    box-sizing: border-box;
    padding: 10px;
    position: absolute;
    top: 120px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#block-govtheme-dmv-views-payment-history-cone-test, .secondary-table {
    width: 100%;
    min-width: 400px;
    box-sizing: border-box;
    padding: 10px;
    flex-shrink: 0;
    background-color:#f1f1f1;
    border-radius: 5px;
    filter: drop-shadow(0 5px 5px #3a3a3a13);
}

.secondary-table h5 {
    margin: 10px 0;
    color: var(--dmv-primary);
}

.secondary-table .dmv-admin-table .view-content .views-table thead {
    border-left: 10px solid var(--dmv-button-blue);
    border-radius: 10px;
}

.secondary-table .dmv-admin-table .view-content .views-table thead th {
    padding: 20px 0;
}

.secondary-table .dmv-admin-table .view-content .views-table tbody tr td {
    padding: 20px 10px;
}

.secondary-table .dmv-admin-table .view-content .views-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}


.primary-table {
    width: 100%;
    min-width: 400px;
    height: calc(100vh - 140px);
    min-height: 700px;
    box-sizing: border-box;
    padding: 20px 10px 50px 10px;
    background-color: white;
    border-radius: 5px;
    flex-shrink: 0;
    filter: drop-shadow(0 5px 5px #3a3a3a35);
}

.view .view-header {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.view .view-header .history-table-nav a {
    width: 200px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13pt;
    font-weight: 500;
    color: white;
    background-color: var(--dmv-primary);
    border-radius: 5px;
}

/* USER LOOKUP PAGE */
.dmv-admin-table.fw-table {
    width: calc(100vw - 20px);
    min-width: 900px;
    height: max-content;
    box-sizing: border-box;
    margin: 125px 10px 50px 10px;
    padding: 50px;
    background-color: white;
}

.dmv-admin-table.fw-table .view-header h1, .dmv-admin-table.fw-table .view-header h2, .dmv-admin-table.fw-table .view-header h3, .dmv-admin-table.fw-table .view-header h4, .dmv-admin-table.fw-table .view-header h5, .dmv-admin-table.fw-table .view-header h6 {
    margin: 0;
}

.dmv-admin-table .view-header h4 {
    font-size: 25pt;
}

.dmv-admin-table.view-user-lookup #edit-header div[data-drupal-selector="edit-user-bulk-form"] {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.dmv-admin-table.view-user-lookup #edit-header div[data-drupal-selector="edit-user-bulk-form"] > .form-item {
    width: 100%;
}

#views-form-user-lookup-page-1 table {
    height: 300px;
    overflow-y: scroll;
}

.view-id-user_lookup #edit-header .button.form-submit {
    padding: 15px;
    border: none;
}

@media screen and (height < 700px) {
    .dmv-admin-table.view-user-lookup  {
        min-height: 700px;
    }
}

/* USER PROFILE PAGE */
#user-profile-page {
    width: calc(100vw - 250px) ;
    min-width: 1000px;
    height: calc(100vh - 115px);
    overflow: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 20px ;
    position: fixed;
    top: 115px;
    left: 250px;
    z-index: 3;
    background: #F8FAFC;
}

#block-govtheme-user-lookup-user-profile-user-identification, #block-govtheme-dmv-views-block-user-lookup-account-info {
    margin-top: 80px;
    padding: 20px;
}

/* USER PROFILE HEADING */

.user-profile-heading {
    width: calc(100vw - 290px);
    height: max-content;
    box-sizing: border-box;
    position: fixed;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background-color: #F8FAFC;
}

.user-profile-heading-wrapper {
    width: 100%;
    min-width: 1000px;
    height: 70px;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E3E7E8;
}

.user-profile-heading h5 {
    height: max-content;
    width: max-content;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    color: var(--dmv-primary);
    font-weight: 700;
    line-height: unset;
}

.user-profile-heading a {
    width: 250px;
    height: 45px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    text-decoration: none;
    background: var(--dmv-primary);
    border-radius: 50px;
}

/* USER IDENTIFICATION INFO BLOCK */

#user-profile-page .user-id-info {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    margin: 10px 0;
    position: relative;
    top: 70px;
    z-index: 2;
    border: 1px solid #fefefe;
    border-radius: 15px;
    filter: drop-shadow(-3px 3px 5px #0000001f);
}

#user-profile-page .user-id-info-wrapper {
    width: 100%;
    height: max-content;
    min-height: 400px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    background: white;
    border-radius: 10px;

}

#user-profile-page .avatar-name {
    display: flex;
    align-items: center;
    gap: 20px;
}

#user-profile-page .user-id-info .avatar-name {
    width: 100%;
    height: max-content;
    display: flex;
    align-items: center;
    gap: 30px;
}

#user-profile-page .uid-an-avatar {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    position: relative;
    padding: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c3cfdf;
    border-radius: 5px;
}

#user-profile-page .uid-an-avatar img {
    width: 80%;
    opacity: .7;
}

#user-profile-page .uid-an-name {
    display: flex;
    gap: 5px;
    font-size: 35px;
    font-weight: 800;
}

.user-edit-link {
    padding: 5px 20px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--dmv-primary);
    border: 1px solid var(--dmv-primary);
    border-radius: 50px;
}


/* USER ACCOUNT INFO */
.user-account-info {
    width: calc(100% - 120px);
    height: max-content;
    margin: 0 0 50px 120px;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.user-account-info .ua-info {
    width: calc(50% - 10px);
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    margin-bottom: 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.user-id-info .ua-info.email {
    width: 100%;
}

.user-id-info .user-account-info{
    margin-bottom: 20px;

}

.user-account-info .ua-info .label {
    font-weight: 400;
}

.user-account-info .ua-info .field-info {
    width: 80%;
    min-height: 45px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: bold;
    background-color: #eee;
}

.user-account-info .ua-info .no-result {
    color: red;
}

/* PERSONAL INFORMATION BLOCK */
.user-personal-information {
    width: 100%;
    height: max-content;
    box-sizing: border-box;
    position: relative;
    border-radius: 20px;
}

.user-personal-information-wrapper {
    width: 100%;
    min-width: 900px;
    height: max-content;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: white;
}

.user-profile-information {
    width: calc(100% - 710px);
    height: calc(100vh - 215px);
    overflow-y: scroll;
    box-sizing: border-box;
    position: absolute;
    top: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.user-profile-information-wrapper {
    width: 100%;
    min-width: 400px;
    height: max-content;
    min-height: 400px;
    box-sizing: border-box;
    margin: 0 0 30px 0;
    padding: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: white;
    border-bottom: 1px solid #eee;
    border-radius: 20px;

}

.uai-nav {
    width: 100%;
    height: max-content;
    margin: 0 0 0 120px;
    padding: 10px 0;
    flex-shrink: 0;
    display: flex;
    gap: 20px;
}

.uai-nav a {
    width: 200px;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    text-decoration: none;
    background: var(--dmv-primary);
    border-radius: 5px;
}

.upi-header {
    width: calc(100% - 120px);
    height: max-content;
    margin: 0 0 50px 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upi-header h5 {
    width: max-content;
    margin: 0;
    padding: 10px 0;
    flex-shrink: 0;
    font-size: 20pt;
    font-weight: 700;
    color: #A9A9A8;
}

/* ACCOUNT HISTORY */
#block-govtheme-dmv-views-block-user-lookup-account-info-uid {
    margin-top: 80px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

#block-govtheme-dmv-views-block-user-lookup-account-info-mc .user-profile-information-wrapper {
    padding: 20px;
    border-radius: 0;
}

/* Examinee List/Bookings */
.view.view-examinee-list{
    width: calc(100% - 20px);
    height: max-content;
    min-height: calc(100vh - 145px);
    box-sizing: border-box;
    position: relative;
    margin: 125px 10px 100px 10px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
}

.view.view-examinee-list .view-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.view.view-examinee-list .view-header h4 {
    font-size: 30pt;
}

.view.view-examinee-list .view-header button.noPrint {
    padding: 15px;
    display: flex;
    gap: 10px;
    font-size: 14pt;
    border: none;
    border-radius: 5px;
}

.view.view-examinee-list .view-header .table-nav {
    width: 100%;
    margin: 20px 0;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
}

.view.view-examinee-list .view-header .table-nav a {
    width: 200px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13pt;
    font-weight: 500;
    color: white;
    background-color: var(--dmv-primary);
    border-radius: 5px;
}

.view.view-examinee-list .view-header .table-nav a.disable {
    color: #000;
    background-color: #dedede;
}

@media screen and (height < 700px) {
    .view.view-examinee-list {
        min-height: 700px;
    }
}

/* DMV EXAMINEE LIST PRINT STYLE */
@media print {
   #block-govtheme-dmv-altmenu {
    display: none;
   }

   .view.view-examinee-list .view-header button.noPrint, .view.view-examinee-list .view-header .table-nav, .view.view-examinee-list .view-filters {
    display: none;
   }
}

/* DMV TEST/BOOKING CALENDAR VIEW */
.dmv-admin-calendar {
    width: 100%;
    margin-top: 115px;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: white;
}

.dmv-admin-calendar header {
    padding: 40px;
}

.dmv-admin-calendar header h4 {
    font-size: 30pt;
}

.dmv-admin-calendar header .table-nav {
    margin: 20px 0;
    display: flex;
    gap: 10px;
}

.dmv-admin-calendar header .table-nav a, .dmv-admin-calendar header .table-nav span {
    width: 200px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13pt;
    color: white;
    background-color: var(--dmv-primary);
    border-radius: 5px;
}

.dmv-admin-calendar header .table-nav a.disable {
    color: #303030;
    background-color: #dedede;
}

.dmv-admin-calendar form {
    margin: 0 20px;
    padding: 20px;
    background: #efefef;
    border-radius: 5px;
}

.dmv-admin-calendar .fc-event.fc-event-start.fc-event-end.fc-event-future.fc-event-past.fc-daygrid-event.fc-daygrid-dot-event {
    width: calc(100% - 20px);
    background: rgb(55, 111, 221);
    margin: 5px 10px;
    font-size: 14pt;
    font-weight: 600;
    color: white;
}



@media screen and (width > 900px) {

    #user-update-your-account .fieldset-wrapper {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
    }
    #user-update-your-account .fieldset-wrapper > .form-wrapper {
        width: calc(50% - 40px);
        position: relative;
    }
    #user-update-your-account .fieldset-wrapper > .form-wrapper#edit-field-uya-previous-licences-wrapper, #user-update-your-account .fieldset-wrapper > #edit-field-uya-prev-disqualified-wrapper, #user-update-your-account .fieldset-wrapper > #edit-field-uya-passed-test-before-wrapper {
        width: calc(100% - 40px);
        margin-top: 50px;
    }

     #user-update-your-account .fieldset-wrapper > #edit-field-uya-fitness-qualification-wrapper {
        margin-top: 50px;
     }

    #user-update-your-account .fieldset-wrapper .field--type-string-long{
        width: calc(100% - 40px);
    }
    .user-form #user-update-your-account .form-text, #user-form #user-update-your-account .form-select, #user-form #user-update-your-account .form-date, #user-form #user-update-your-account .form-email, #user-form #user-update-your-account .form-number {
        max-width: none;
    }

    #edit-field-uya-previous-licence-c-wrapper {
        margin-right: 50px;
    }
}

/* 4xx Pages */
._4xx_svg_wrapper {
    width: 100%;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (width < 900px) {
    ._4xx_svg_wrapper svg._403-f, ._4xx_svg_wrapper svg._404-f {
        display: none;
    }
}

@media screen and (width > 900px) {
    ._4xx_svg_wrapper svg._403-m, ._4xx_svg_wrapper svg._404-m {
        display: none;
    }
}

._4xx_svg_wrapper svg a {
    text-decoration: none;
}

._4xx_svg_wrapper svg a #Rectangle_1 {
    fill: rgb(59, 108, 243);
}

._4xx_svg_wrapper svg a:hover #Rectangle_1 {
    fill: rgb(81, 127, 254);
}