@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@100;300;400;500;600;700;900&display=swap');

    :root {
        --gm-gray: rgb(242, 243, 245);
        --gm-white: rgba(255, 255, 255);
        --c-text-primary: rgba(37, 37, 37);
        --c-text-secondary: rgba(255, 255, 255);
        --c-text-heading: #08498a;
        --c-menu-text: rgba(38, 38, 38, 1);
        --menu-link-color: rgba(255, 255, 255);
        --c-menu-active: rgba(105, 228, 225, 1);
        --c-menu-hover: rgba(105, 228, 225, .2);

        --c-border-primary: rgba(232, 232, 232, 1);
        --c-background-primary: rgb(17, 54, 95);
        --c-background-secondary: var(--gm-white);
        --c-background-tertiary: var(--gm-gray);
        --c-button-primary: #08498a;
        --c-button-primary-lightest: rgba(255, 57, 84, 0.1);
        --c-button-secondary: rgba(255, 201, 38, 1);
        --c-button-hover: transparent;
        --c-button-hover-border: #91f2fe;
        --c-table-stripe: rgba(105, 228, 225, 0.1);

        --c-checked: #34b93d;
        --checkbox-disabled: gray;
        --radius: 0px;
        --lightest-gray: rgba(232, 232, 232, 0.2);
        --input-focus: #fdf1c6;
        --font: Overpass;
        --dark-gray: grey;
        --lang-select-background: rgba(245, 245, 245, 0.5);
        --lang-select-color: black;
        --lang-select-background-tick: rgba(245, 245, 245, 1);
        --lang-select-hover: blue;
    }

    body {
        font-family: var(--font), sans-serif;
        background: var(--c-background-tertiary);
        /* background-image: url(background.webp); */
        color: var(--c-text-primary);
        margin: 0;
    }

    .login-language-container {
        width: 150px;
        position: absolute;
        top: 20px;
        right: 20px;
        background: transparent;
    }

    .login-language-container img {
        display: none;
    }

    select {
        /* Reset Select */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        border: none;
        border-radius: 3px;
        box-shadow: none;
        /* Personalize */
        flex: 1;
        padding: 0 1em;
        color: var(--lang-select-color);
        background-color: var(--lang-select-background);
        background-image: none;
        cursor: pointer;
        width: 100px;
    }

    option {
        border: none;
    }

    /* Remove IE arrow */
    select::-ms-expand {
        display: none;
        border: none;
    }

    /* Custom Select wrapper */
    .language-menu {
        position: relative;
        display: flex;
        width: fit-content(20);
        height: 2em;
        border-radius: .25em;
        overflow: hidden;
    }

    /* Arrow */
    .language-menu::after {
        content: '\25BC';
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.5em;
        background-color: var(--lang-select-background-tick);
        transition: .25s all ease;
        pointer-events: none;
    }

    /* Transition */
    .language-menu:hover::after {
        color: var(--lang-select-hover);
    }

    #ClientBranding {
        height: 100px;
        background-color: rgb(17, 54, 95);
        color: white;

        width: 100%;
        display: flex;
        justify-content: left;
        align-items: flex-end;
        padding-bottom: 10px;
    }

    #ClientLogo img {
        height: 55px;
    }

    #ClientLogo,
    #ClientName {
        align-items: bottom;
        padding-left: 20px;
        font-size: 20px;
    }

    #MainMenuHamburger {
        display: none;
    }

    #navbar {
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: row;
        position: relative;
        background: rgb(15, 25, 41);
        display: inline-flex;
        flex-grow: 1;
        justify-content: flex-end;
        z-index: 999;
    }

    #MainMenu {
        height: 65px;
        display: block;
        border-bottom: 0;
        border-top: 0;
        position: relative;
        z-index: 110;
        margin: 0;
    }

    #MainMenu li {
        float: left;
        list-style-type: none;
        padding-left: 10px;
        padding-right: 10px;

    }

    #MainMenu a {
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        cursor: pointer;
        display: block;
        font-family: Overpass, Arial, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: 1.152px;
        padding-top: 24px;
        position: relative;
        text-align: center;
        text-decoration-line: none;
    }

    ul#MainMenu a:after {
        display: block;
        content: '';
        border-bottom: 3px solid #fff;
        transform: scaleX(0);
        transition: transform 250ms ease-in-out;
    }

    ul#MainMenu a:hover:after {
        border-bottom: 3px solid #fff;
        transform: scaleX(1);
        transition: .25s ease;
    }

    ul#MainMenu .active a {
        border-bottom: 3px solid #fff;
        transform: scaleX(1);
        transition: .25s ease;
    }

    .panel {
        /* padding-top: 2rem; */
        padding-bottom: 6rem;
        flex-grow: 1;
        display: none;
        /* display: flex; */
        /* justify-content: center; */
        border-radius: var(--radius);
        background-color: var(--c-background-tertiary);
        justify-content: center;
    }

    .panel.hide {
        transition: left 0s 0.5s;
    }

    .panel:nth-of-type(1) {
        z-index: 5;
    }

    .panel:nth-of-type(2) {
        z-index: 4;
    }

    .panel:nth-of-type(3) {
        z-index: 3;
    }

    .panel:nth-of-type(4) {
        z-index: 2;
    }

    .panel:nth-of-type(5) {
        z-index: 1;
    }

    .panel.show {
        display: flex;
        transition: left 0.5s;
        left: 0;
        z-index: 6;
    }

    .inner-panel {
        width: 83.3333333333%;
    }

    .panel-title {
        color: rgb(55, 63, 66);
        padding: 50px;
        font-size: 26px;
        font-weight: 700;
        text-align: center;
        background-color: #f2f3f5;
        margin: 0;
    }

    .panel-intro {
        /* min-height: 577px; */
        margin: 0;
        width: 100%;
        /* padding: 2rem; */
        background-color: #f2f3f5;
        /* background-image: url(SupportHeader.webp);  */
    }

    .preferences-card {
        border: 1px solid var(--c-border-primary);
        background-color: var(--c-background-secondary);
        border-radius: var(--radius);
        min-height: 100px;
        padding: 2rem;
        margin: 2rem;
    }

    /* #preferencesPanel { */
    /* background-color: #11365f; */
    /* } */

    /* #preferencesPanel,
    #DetailsPanel,
    #HistoryPanel {
        max-height: 70vh;
        overflow: hidden;
        overflow-y: scroll;
    } */

    /* #body-container::-webkit-scrollbar {
        width: 8px;
    }

    #body-container::-webkit-scrollbar-track {
        box-shadow: 0;
        border-radius: 0;
    }

    #body-container::-webkit-scrollbar-thumb {
        background: #c89b3f;
        border-radius: 15px;
    } */

    .preferences-card-title {
        color: var(--c-text-heading);
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.25;
        padding-bottom: 0.5rem;
    }

    .preferences-card-body {
        padding-bottom: 1rem;
        font-weight: 200;
    }

    .pref-checkbox-container {
        padding: 15px;
        border-bottom: 1px solid var(--c-border-primary);
    }

    #login-button-1,
    .savePreferencesButton,
    #SaveDetailsButton {
        background-color: #08498a;
        border: 3px solid #08498a;
        transition: background;
        transition-duration: .25s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        color: #fff;
        display: block;
        font-family: Overpass;
        font-size: 16px;
        font-weight: 700;
        line-height: 1rem;
        /* margin: 0 0 16px; */
        padding: 6px;
        text-align: center;
        width: 200px;
        border-radius: 25px;
    }

    .opt-out-all-container {
        float: right
    }

    #login-button-1 {
        padding: 12px 45px;
    }

    .opt-out-all-button,
    .address-lookup-button {
        background-color: transparent;
        border: 3px solid #08498a;
        transition: background;
        transition-duration: .25s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        color: #08498a;
        display: block;
        font-family: Overpass;
        font-size: 16px;
        font-weight: 700;
        line-height: 1rem;
        /* margin: 0 0 16px; */
        padding: 6px 26px;
        text-align: center;
        width: 200px;
        border-radius: 25px;
    }

    .opt-out-all-container {
        position: relative;
        float: right;
        top: -60px;
    }

    #login-button-1:hover,
    .button:hover,
    #SaveDetailsButton:hover {
        background-color: transparent;
        border: 3px solid rgb(145, 242, 254);
        color: var(--c-text-primary);
    }

    .pref-checkbox-container label {
        font-weight: 500;
        line-height: 1.1;
        display: grid;
        grid-template-columns: 1em auto;
        gap: 1.5em;
    }

    input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--checkbox-background);
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;
        border-radius: var(--radius);
        transform: translateY(-0.075em);
        display: grid;
        place-content: center;
    }

    input[type=checkbox]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        transform: scale(0);
        transform-origin: bottom left;
        transition: 120ms transform ease-in-out;
        /* box-shadow: inset 1em 1em var(--c-checked); */
        background-color: CanvasText;
    }

    input[type=checkbox]:checked::before {
        transform: scale(1);
        background-color: var(--c-checked);
    }

    input[type=checkbox]:focus {
        outline: max(2px, 0.15em) solid currentColor;
        outline-offset: max(2px, 0.15em);
    }

    input[type=checkbox]:disabled {
        --form-control-color: var(--checkbox-disabled);
        color: var(--checkbox-disabled);
        cursor: not-allowed;
    }

    /* Style for Image Checkboxes */

    #accordion_1 .sub-card-checkboxes>* {
        margin: 0.5rem;
    }

    #accordion_1 .pref-checkbox-container {
        border: none;
    }

    #accordion_1 .sub-card-checkboxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-content: space-between;
        width: 100%;
        /* margin-left: auto;
        margin-right: auto; */
        max-width: 550px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #accordion_1 .sub-card-containers {
        display: inline-block;
        vertical-align: top;
    }

    .checkbox_1 {
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(100%);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .checkbox_1:checked+.checkbox-tile {
        border-color: var(--c-menu-active);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        color: #2260ff;
    }

    .checkbox_1:checked+.checkbox-tile:before {
        transform: scale(1);
        opacity: 1;
        background-color: var(--c-checked);
        border-color: var(--c-checked);

    }

    .icon {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .post::after {
        font-family: "Font Awesome 5 Free";
        font-size: 36px;
        color: var(--c-border-primary);
        content: "\f0e0";
        font-weight: 900;
    }

    .email::after {
        font-family: "Font Awesome 5 Free";
        font-size: 36px;
        color: var(--c-border-primary);
        content: "\f1fa";
        font-weight: 900;
    }

    .phone::after {
        font-family: "Font Awesome 5 Free";
        font-size: 36px;
        color: var(--c-border-primary);
        content: "\f095";
        font-weight: 900;
    }

    .mobile::after {
        font-family: "Font Awesome 5 Free";
        font-size: 36px;
        color: var(--c-border-primary);
        content: "\f3cd";
        font-weight: 900;
    }

    .Buick {
        content: url("../resources/Buick-logo-022123-02.svg");
        width: 6rem;
    }

    .Cadillac {
        content: url("../resources/cadillac-logo.svg");
        width: 6rem;
    }

    .Chevrolet {
        content: url("../resources/chevrolet-logo-v2.webp");
        width: 6rem;
    }

    .GMC {
        content: url("../resources/GMC-153x28.svg");
        width: 6rem;
    }

    .checkbox_1:checked+.checkbox-tile .post::after,
    .checkbox_1:checked+.checkbox-tile .email::after,
    .checkbox_1:checked+.checkbox-tile .phone::after,
    .checkbox_1:checked+.checkbox-tile .mobile::after {
        color: var(--c-text-heading);
    }

    .checkbox_1:focus+.checkbox-tile {
        border-color: var(--c-text-heading);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px var(--c-menu-hover);
    }

    .checkbox_1:focus+.checkbox-tile:before {
        transform: scale(1);
        opacity: 1;
    }

    .checkbox-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 7rem;
        min-height: 7rem;
        border-radius: 0.5rem;
        border: 2px solid var(--c-border-primary);
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        transition: 0.15s ease;
        cursor: pointer;
        position: relative;
    }

    .checkbox-tile:before {
        content: "";
        position: absolute;
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid var(--c-border-primary);
        background-color: #fff;
        border-radius: 50%;
        top: 0.25rem;
        left: 0.25rem;
        opacity: 0;
        transform: scale(0);
        transition: 0.25s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: 12px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .checkbox-tile:hover {
        border-color: var(--c-menu-hover);
    }

    .checkbox-tile:hover:before {
        transform: scale(1);
        opacity: 1;
    }

    .checkbox-icon {
        transition: 0.375s ease;
        color: #494949;
    }

    .checkbox-icon svg {
        width: 3rem;
        height: 3rem;
    }

    .checkbox-label {
        color: var(--c-text-primary);
        transition: 0.375s ease;
        text-align: center;
    }


    input[type="text"] {
        border: 1px solid var(--c-border-primary);
        border-radius: var(--radius);
        font-family: "Inter", sans-serif;
        /* padding: 10px; */
        min-width: 275px;
        /* margin: 5px; */
    }

    .details-form-group>label {
        display: inline-block;
        font-weight: 500;
        width: 200px;
        text-align: left;
        padding-right: 10px;
        vertical-align: middle;
    }

    .save-preferences-button-container {
        margin-top: 30px;
        width: 100%;
    }

    .savePreferencesButton {
        float: right;
    }

    #DetailsPanel .inner-panel form {
        border: 1px solid var(--c-border-primary);
        background-color: var(--c-background-secondary);
        border-radius: var(--radius);
        min-height: 100px;
        padding: 2rem;
        margin: 2rem;
    }

    #body-container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* margin-top: 30px; */
        /* display: flex; */
        /* justify-content: center; */
    }

    #NotFoundText,
    #InvalidCodeText,
    .errorOnSavingPrefs,
    .alert-danger {
        color: var(--c-button-primary);
        /* display: flex; */
        border-radius: var(--radius);
        overflow: hidden;
        border-left: 5px solid gray;
        padding: 15px;
        margin-top: 15px;
        width: 50%;
        background: var(--c-button-primary-lightest);
        border-left-color: var(--c-button-primary);
        align-items: center;
    }

    #TimeoutText {
        color: #ffc926;
        display: flex;
        border-radius: var(--radius);
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
        border-left: 15px solid gray;
        padding: 15px;
        margin-top: 15px;
        /* --highlight: var(--color-summary-1-highlight); */
        background: var(--c-background-tertiary);
        border-left-color: #ffc926;
    }

    #LogoutText {
        color: #69e4e1;
        display: flex;
        border-radius: var(--radius);
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
        border-left: 15px solid gray;
        padding: 15px;
        margin-top: 15px;
        /* --highlight: var(--color-summary-1-highlight); */
        background: #f0fcfc;
        border-left-color: #69e4e1;
    }

    .card details.warning p {
        list-style-type: corona-warning;
    }

    .table>tbody>tr>td {
        vertical-align: top;
        border: none;
        padding: 10px;
    }

    #icon-out,
    #icon-in {
        position: relative;
    }

    #icon-out::before {
        font-family: "Font Awesome 5 Free";
        color: red;
        content: "\f00d";
        font-weight: 900;
    }

    #icon-in::before {
        font-family: "Font Awesome 5 Free";
        color: limegreen;
        content: "\f00c";
        font-weight: 900;
    }

    #icon-out::after,
    #icon-in:after {
        text-transform: none;
        content: attr(data-tooltip);
        font-size: 14px;
        position: absolute;
        color: #fff;
        background: #282828;
        padding: 8px 12px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        max-width: 200px;
        opacity: 0;
        pointer-events: none;
        /* top: 0; */
        border-radius: 4px;
        transform: translate3d(-50%, 0%, 0);
        transition: all 0.3s ease;
    }

    #icon-out:hover:before,
    #icon-out:hover:after,
    #icon-in:hover:before,
    #icon-in:hover:after {
        opacity: 1;
    }

    #icon-out:hover:before,
    #icon-in:hover:before {
        transform: translate3d(-50%, calc(-100% - 18px), 0);
    }

    #icon-out:hover:after,
    #icon-in:hover:after {
        transform: translate3d(-50%, calc(-100% - 16px), 0);
    }


    .table {
        width: 100%;
        /* border-collapse: collapse; */
        margin-bottom: 20px;
    }

    .table tr {
        border-top: 1px solid var(--c-border-primary);
    }

    .table tr:nth-of-type(odd) {
        background-color: var(--c-table-stripe);
    }

    .history-col-1 {
        text-align: center;
    }

    .history-channel-list>p {
        margin: 0;
    }

    .history-col-2>p {
        margin-top: 2px;
    }

    .history-channel-list>p {
        float: left;
        font-weight: 500;
    }

    .history-channel-date>p {
        font-size: 14px;
        float: right;
        text-align: right;
        font-weight: 200;
    }

    .history-statement {
        flex-grow: 3;
        margin: 0;
        width: 100%;
        float: left;
        text-align: left;
        padding-bottom: 5px;
    }

    .history-statement>p {
        width: 100%;
        float: left;
        text-align: left;
    }

    #PromiseContent {
        margin-left: 30px;
        background: var(--c-background-secondary);
        padding: 20px;
    }

    .requiredLabel {
        margin-left: 30px;
    }

    .page-footer {
        background-color: #11365f;
        color: #38e8ff;
        font-size: 14px;
        bottom: 0;
        padding: 10px;
        /* position: fixed;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 999; */
    }

    .panel>.inner-panel>form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 10px;
        list-style: none;
        margin-top: 20px;
    }

    @media (min-width: 40rem) {

        .detailCard,
        .preferences-sub-card {
            width: 40%;
        }
    }

    @media (min-width: 56rem) {

        .detailCard,
        .preferences-sub-card {
            width: 45%;
        }
    }

    .details,
    .detailSubmitCard,
    .frmSavePreferences {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 10px;
    }

    .details {
        width: 100%;
        justify-content: center;
    }

    .detailCard,
    .preferences-sub-card {
        background-color: white;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 45%;
        padding: 16px;
        font-size: 14px;
        line-height: 1.5;
        border: 1px solid var(--c-border-primary);
        border-radius: var(--radius);
    }

    .detailCard p:last-child {
        margin: 0;
    }

    #saveDetailsButton {
        float: right;
    }

    #right-to-be-forgotten {
        float: left;
        font-weight: 200;
    }

    .card_title {
        position: relative;
        margin: 10px 0 24px;
        padding-bottom: 10px;
        text-align: left;
        font-size: 20px;
        font-weight: 700;
    }

    hr {
        margin: 24px auto;
        width: 50px;
        border-top: 2px solid #c89b3f;
    }

    .detailCard p {
        margin: 0 0 24px;
        font-size: 14px;
        line-height: 1.5;
    }

    .detailCard p:last-child {
        margin: 0;
    }

    .details-form-group {
        margin-bottom: 15px;
    }

    .details-form-group label {
        font-weight: 500;
        margin-bottom: 5px;
        display: block;
    }

    #DetailsPanel .inner-panel form input[type=text] {
        display: block;
        width: 100%;
        height: 48px;
        font-family: Overpass;
        font-size: 18px;
        color: #555;
        line-height: 1.2;
        padding: 5px;
        margin-bottom: 10px;
        border: 1px solid rgb(202, 203, 202);
        background-color: #f7f7f7;
    }

    #DetailsPanel .inner-panel form input[type=text]:focus {
        outline: 2px solid rgb(145, 242, 254);
    }


    .accordion {
        border: 1px solid var(--c-border-primary);
        background-color: var(--c-background-secondary);
        border-radius: var(--radius);
        min-height: 100px;
        padding: 2rem;
        margin: 2rem;
    }

    .accordion .accordion-item {
        border-bottom: 1px solid var(--c-border-primary);
    }

    .accordion .accordion-item button[aria-expanded="true"] {
        border-bottom: 2px solid var(--c-menu-active);

    }

    .accordion button {
        position: relative;
        display: block;
        text-align: left;
        width: 100%;
        padding: 1em 0;
        font-family: Inter, sans-serif;
        color: var(--c-menu-text);
        font-size: 1rem;
        font-weight: 600;
        border: none;
        background: none;
        outline: none;
    }

    .accordion button:hover,
    .accordion button:focus {
        cursor: pointer;
        color: var(--c-button-primary);
    }

    .accordion button .accordion-title {
        padding: 1em 1.5em 1em 1.5em;
    }

    #icon-out::before {
        display: inline-block;
        position: absolute;
        font-family: "Font Awesome 5 Free";
        color: red;
        content: "\f00d";
        font-weight: 900;
    }

    #icon-in::before {
        display: inline-block;
        position: absolute;
        font-family: "Font Awesome 5 Free";
        color: limegreen;
        content: "\f00c";
        font-weight: 900;

    }

    .history-channel-date {
        position: absolute;
        color: var(--dark-gray);
        font-size: 0.7rem;
        font-weight: 200;
        text-align: right;
        display: inline-block;
        top: 22px;
        right: 30px;
        margin: 0;
    }

    .history-channel-date>p {
        margin: 0;
    }

    .accordion button .icon {
        display: inline-block;
        position: absolute;
        top: 18px;
        right: 0;
        width: 22px;
        height: 22px;
        border: 1px solid;
        border-radius: 22px;
    }

    .accordion button .icon::before {
        display: block;
        position: absolute;
        content: "";
        top: 9px;
        left: 5px;
        width: 10px;
        height: 2px;
        background: currentColor;
    }

    .accordion button .icon::after {
        display: block;
        position: absolute;
        content: "";
        top: 5px;
        left: 9px;
        width: 2px;
        height: 10px;
        background: currentColor;
    }

    .accordion button[aria-expanded="true"] {
        color: var(--c-menu-active);
    }

    .accordion button[aria-expanded="true"] .icon::after {
        width: 0;
    }

    .accordion button[aria-expanded="true"]+.history-statement-container {
        opacity: 1;
        max-height: 9em;
        transition: all 200ms linear;
        will-change: opacity, max-height;
    }

    .accordion .history-statement-container {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 200ms linear, max-height 200ms linear;
        will-change: opacity, max-height;
    }

    .accordion .history-statement-container .history-statement p {
        font-size: 1rem;
        font-weight: 300;
        margin: 2em 0;
    }

    dl.faq {
        margin-bottom: 10px;
    }

    dt.faq {
        float: left;
        text-align: left;
        margin: 0 0 0 0;
        width: 32px;
        font-weight: bold;
    }

    dd.faq {
        margin-bottom: 4px;
        margin-left: 2.5rem;
        width: auto;
        font-weight: 300;
    }

    /* New Content */
    /* Login Pages */

    /* Login Pages */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .page-footer,
    .login-language-container {
        display: none;
    }

    p {
        font-family: Overpass;
        font-size: 14px;
        line-height: 1.7;
        color: #666;
        margin: 0
    }

    input {
        outline: none;
        border: none
    }

    textarea {
        outline: none;
        border: none
    }

    textarea:focus,
    input:focus {
        border-color: transparent !important
    }

    input:focus::-webkit-input-placeholder,
    input:focus:-moz-placeholder,
    input:focus::-moz-placeholder,
    input:focus:-ms-input-placeholder {
        color: transparent
    }

    input::-webkit-input-placeholder,
    input:-moz-placeholder,
    input::-moz-placeholder,
    input:-ms-input-placeholder {
        color: #999
    }

    button {
        outline: none !important;
        border: none;
        background: 0 0
    }

    button:hover {
        cursor: pointer
    }

    .login-wrapper {
        width: 100%;
        margin: 0 auto
    }

    .login-body-container {
        width: 100%;
        margin: 0 auto;
        /* min-height: 100vh; */
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background: #f2f2f2;
    }

    #LoginPanel1,
    #LoginPanel2 {
        width: 100%;
        background: #fff;
        overflow: hidden;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        flex-direction: row-reverse
    }

    .side-image,
    .side-image2 {
        width: calc(100% - 560px);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1
    }

    .side-image::before,
    .side-image2::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .1)
    }

    #LoginLogo,
    .logo2 {
        text-align: center;
        margin-bottom: 50px;
    }

    #LoginLogo a img,
    .logo2 img {
        width: 350px;
    }

    .loginStage1Form,
    .loginStage2Form {
        width: 560px;
        min-height: 100vh;
        display: block;
        background-color: #fff;
        padding: 173px 55px 55px;
        z-index: 10;
    }

    #LoginName {
        width: 100%;
        display: block;
        font-family: Overpass;
        font-size: 30px;
        color: #333;
        line-height: 1.2;
        text-align: center;
        padding: 20px;
    }

    .login-field {
        display: block;
        width: 100%;
        height: 48px;
        font-family: Overpass;
        font-size: 18px;
        color: #555;
        line-height: 1.2;
        padding: 5px;
        margin-bottom: 10px;
        border: 1px solid rgb(202, 203, 202);
        background-color: #f7f7f7;
    }

    input.login-field {
        /* height: 100%; */
        -webkit-transition: all .4s;
        -o-transition: all .4s;
        -moz-transition: all .4s;
        transition: all .4s
    }

    .login-field:focus {
        outline: 2px solid rgb(145, 242, 254);
    }

    #AccessCode {
        text-align: center;
    }

    .has-val {
        height: 48px !important
    }

    #login-button-1,
    #login-button-2 {
        background-color: #08498a;
        border: 3px solid #08498a;
        transition: background;
        transition-duration: .25s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        color: #fff;
        display: block;
        font-family: Overpass;
        font-size: 16px;
        font-weight: 700;
        line-height: 1rem;
        margin-top: 16px;
        text-align: center;
        width: 50%;
        border-radius: 25px;
        padding: 12px 45px;
        float: right;
    }

    #login-button-1:hover,
    #login-button-2:hover {
        background-color: transparent;
        border: 3px solid rgb(145, 242, 254);
        color: #08498a;
    }

    #start-over {
        font-size: 16px;
        font-weight: 700;
        color: #08498a;
        float: left;
        margin-top: 16px;
        padding-top: 12px;
    }

    @media(max-width:992px) {

        .loginStage1Form,
        .loginStage2Form {
            width: 50%;
            padding-left: 30px;
            padding-right: 30px
        }

        .side-image,
        .side-image2 {
            width: 50%
        }
    }

    @media(max-width:768px) {

        .loginStage1Form,
        .loginStage2Form {
            width: 100%
        }

        .side-image,
        .side-image2 {
            display: none
        }
    }

    @media(max-width:576px) {

        .loginStage1Form,
        .loginStage2Form {
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 70px
        }
    }

    .side-image {
        background-image: url('../resources/background12.jpg');
    }

    .side-image2 {
        background-image: url('../resources/background11.jpg');
    }

    hr {
        display: none;
    }