/**
 *** OABS v3 Base Stylesheet (In Development)**
 **/

/** GOOGLE FONTS **/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/** CUSTOM FONTS **/
@font-face {
    font-family: icon;
    src: url("../../../Content/JourneyContent/fc02bd33-502e-4367-a745-88744ed0191e/web-icon.woff") format("woff");
}

:root {
    --site-primary: #3578bc;
    --site-primary-light: #17a8df;
    --site-light-blue: #0a99cf;
    --bs-link-color-rgb: 66, 139, 217;
    --site-alert:#0e5abe;
    /** Colors (Branding) **/
    --primary-color: linear-gradient(to right, #0c4884, #005ec9);
    --primary-color-hover: #d1dade;
    --primary-color-active: #30363c;
    --secondary-color: #063a60;

    /* Grays */
    --color-gray-light: #efefef;
    --color-gray-medium: #999;
    --color-gray-dark: #4b4b4b;
    --color-gray-charcoal: #323232;

    /* General Colors */
    --color-white: #fff;
    --color-black: #232629;
    --color-font: var(--color-gray-charcoal);
    --color-gray:  #555555;

    /* Link Colors */
    --color-accent: #0e5abe;
    --color-accent-active: #572579;
    --color-accent-hover: #002a8e;

    /* Map icon */
    --color-map-hover: #4da5e0;

    /** Colors (Validation) **/
    --color-alert-lighter: #fffaf0;
    --color-alert-light: #eddbb3;
    --color-alert: #ffba00;
    --color-error-lighter: #fff5f5;
    --color-error-light: #ffd5d5;
    --color-error: #ff3838;
    --color-error-font: #6d0808;
    --color-success-lighter: #eefff1;
    --color-success-light: rgb(46 201 70 / 5%);
    --color-success: #2ec946;

    /** Content Width **/
    --body-width: 1200px;
    --content-width: 1000px;

    /** Font Families **/
    --font-family-main: "Montserrat", "Poppins", helvetica, arial, sans-serif;
    --font-family-second: "Roboto Bold", "Roboto", sans-serif;
    --font-family-third: "Montserrat", "Roboto", sans-serif;

    /** General Styles **/
    --text-size: 16px;
    --text-weight: 400;
    --label-size: 14px;
    --label-weight: 400;
    --border-size: 1px;
    --border-radius: 0;
    --button-height: 42px;
    --form-height: 48px;
    --form-radius: 3px;
}

html {
    /* ==========================================================================
    Layout Variables
    ========================================================================== */

    /* Section Widths */
    --header-width: var(--content-width);
    --footer-width: var(--content-width);
    --main-width: var(--content-width);
    --summary-width: var(--content-width);

    /* Spacing */
    --content-padding: 16px;

    /* General content left/right padding */
    --vert-spacing: 16px;

    /* Logo */
    --logo-height: 48px;

    /* Footer logo */
    --logo-width:100%;
    --logo-max-width: 220px;
    --html-bg: #ddd;

    /* Section Background Colors */
    --header-bg: var(--color-white);
    --nav-bg:linear-gradient(to right, #275f95, #17a7dde3);
    --summary-bg:#F4F7FA ;
    --page-bg: var(--color-white);
    --footer-bg: var(--site-primary);

    /* ==========================================================================
    Typography Variables
    ========================================================================== */

    /* Font Families */
    --step-title-font: var(--font-family-second);
    --step-control-title-font: var(--font-family-main);
    --navitem-font: var(--font-family-third);
    --body-font: var(--font-family-main);
    --btn-font: var(--font-family-second);

    /* Details */
    --details-dt-font: var(--font-family-main);
    --details-dd-font: var(--font-family-second);

    /* Text */
    --body-text-color: var(--color-black);
    --body-text-weight: var(--text-weight);
    --body-text-size: var(--text-size);
    --link-weight: 400;
    --link-color: var(--color-accent);
    --link-color-hover: var(--color-accent-hover);
    --link-color-active: var(--color-accent-active);

    /* Language Selector, Acc Menu */
    --lang-text-size: var(--label-size);
    --lang-text-weight: var(--label-weight);

    /* ==========================================================================
    Heading Variables
    ========================================================================== */

    /* Heading - Navbar */
    --nav-heading-font: var(--font-family-main);
    --nav-heading-color: var(--color-black);
    --nav-heading-size: 2.25rem;
    --nav-heading-weight: 700;
    --nav-heading-align: left;
    --nav-heading-spacing: 0;

    /* Subtitle - Navbar */
    --nav-subtitle-font: var(--font-family-main);
    --nav-subtitle-color: var(--color-black);
    --nav-subtitle-size: 28px;
    --nav-subtitle-weight: 400;
    --nav-subtitle-align: left;
    --nav-subtitle-spacing: 0;

    /* Site -Title */
    --step-title-color: var(--color-black);
    --step-title-size: 2rem;
    --step-title-weight: 600;
    --step-title-align: left;
    --step-title-spacing: 0;
    /* Layout */
    --step-title-height: 100px;
    /* Headings sizes*/
    --h2-size: 1.5rem;
    --h3-size: 1.375rem;
    --h4-size: 1.25rem;
    --h5-size: 1.125rem;
    --h6-size: 1rem;

    /* Sub -Title */
    --step-control-title-color: var(--color-black);
    --step-control-title-size: 1.1375rem;
    --step-control-title-weight: 400;
    --step-control-title-spacing: 0;

    /* ==========================================================================
    Navigation Menu Variables
    ========================================================================== */

    /* Layout */
    --nav-height: 48px;
    --nav-top-margin: var(--vert-spacing);
    --nav-align: left;
    --nav-grid: 0.32fr 0.64fr;
    --nav-site-title-justify: center;
    --nav-grid-column-gap: 0;
    --nav-grid-row-gap: 16px;
    --nav-margin: 0;

    /* Typography */
    --navitem-text-size: 18px;
    --navitem-text-weight: 500;
    --navitem-text-spacing: auto;
    --navitem-text-case: normal;

    /* Colors */
    --navitem-color: var(--color-white);
    --navitem-color-hover: var(--color-white);
    --navitem-color-active: var(--color-white);
    --navitem-bg: transparent;
    --navitem-bg-hover:#00000075;

    /* ==========================================================================
    Mobile Menu Variables
    ========================================================================== */

    /* Hamburguer Menu */
    --hamburguer-line-color: var(--color-white);
    --hamburguer-line-height: 4px;
    --hamburguer-line-border-radius: 0;

    /* Hamburguer Menu Size (Please respect the proportion) */
    --hamburguer-width: 32px;
    --hamburguer-height: 26px;

    /* ==========================================================================
    Progress Bar Variables
    ========================================================================== */

    /* Layout */
    --progress-bar-height: 8px;
    --progress-bar-max-width: 100%;
    --progress-bar-fill-bg: linear-gradient(135deg, #3498db, rgb(23, 145, 206));

    /* Progress Bar Colors */
    --progress-bar-empty-bg: #fdfdfd;
    --progress-bar-border-empty: #a3a3a3;

    /* Progress Bar Box Shadows */
    --progress-bar-empty-box-shadow: inset 0 0 0 1px #b5b7b8;

    /* Circle display */
    --circle-display: none; /* to show circles display flex */

    /* --progress-bar-max-width:90%;Uncomment in case you are gonna use circle display */

    /* Circle apperance */
    --progress-bar-circle-height: 30px;
    --progress-bar-circle-width: 30px;

    /* Progress Bar Circle Styles */
    --progress-bar-circle-bg: var(--color-white);
    --progress-bar-circle-number: rgb(68 68 68);
    --progress-bar-circle-border: 2px solid var(--progress-bar-border-empty);
    --progress-bar-text-color-active: var(--color-white);

    /* Progress Description Container */

    /* Layout */
    --descr_progress-margin-top: 5px;
    --descr_progress-justify-content: flex-start;

    /* Apperance Text */
    --descr_progress-font-size: var(--label-size);
    --descr_progress-color: currentcolor;
    --descr_progress-font-weight: inherit;

    /* ==========================================================================
    Summary Data Variables
    ========================================================================== */

    /* Layout */
    --summary-grid: auto 1fr;

    /* Typography */
    --summary-text-size: var(--label-size);
    --summary-label-weight: 500;
    --summary-value-weight: var(--label-weight);
    --summary-label-color: var(--color-gray);
    --summary-value-color: var(--color-gray);


    /* ==========================================================================
    Footer
    ========================================================================== */

    /* Layout */
    --footer-content-padding: var(--content-padding);
    --footer-gap: 20px;
    --footer-justify-content: space-around;

    /* Text */
    --footer-text-font-size: var(--label-size);
    --footer-text-font-weight: 500;

    /* Appearance */
    --footer-logo-width: 125px;
    --footer-text-color: #ffffff;
    --footer-text-color-hover: var(--color-gray-light);
    --footer-text-color-decoration: underline;
    --footer-text-hover-filter: drop-shadow(0 0 2.3px);

    /* =====================
          Buttons
     ===================== */

    /* Layout */
    --btn-columns: 3;
    --btn-spacing: 6px;
    --btn-padding: 15px;
    --btn-min-width: 240px;
    --btn-max-width: 320px;
    --btn-case-min-width: 180px;
    --btn-case-max-width: 240px;
    --btn-min-height: var(--button-height);
    --btn-align: center;

    /* Text */
    --btn-text-size: 1.1rem;
    --btn-text-weight: 500;
    --btn-text-spacing: normal;
    --btn-text-align: center;
    --btn-text-case: normal;
    --btn-subtitle-size: 14px;
    --btn-subtitle-weight: 400;

    /* Appearance */
    --btn-bg: var(--site-primary);
    --btn-bg-hover: var(--primary-color-hover);
    --btn-bg-active: var(--primary-color-active);
    --btn-color: var(--color-white);
    --btn-color-hover: var(--secondary-color);
    --btn-color-active: var(--color-white);
    --btn-border: 0 solid currentcolor;
    --btn-border-hover: inset 0 0 0 0 rgb(153 153 153 / 100%);
    --btn-border-active: inset 0 0 0 0 rgb(51 51 51);
    --btn-border-radius: 8px;
    --btn-border-radius-hover: 9px;
    --btn-border-radius-active: 9px;

    /* Disabled State */
    --btn-bg-disabled: var(--color-gray-light);
    --btn-color-disabled: #504e4e;

    /* =====================
          Input
    =====================* /
      /* Layout */
    --form-max-width: calc(100% - (var(--content-padding) * 2));
    --form-align: left;
    --input-height: var(--form-height);
    --input-padding: 8px 6px;
    --input-width: 100%;
    --input-max-width: unset;

    /* Text */
    --input-text-size: var(--text-size);
    --input-text-weight: 300;
    --input-text-color: var(--color-black);

    /* Appearance */
    --input-bg: var(--color-white);
    --input-border: var(--border-size) solid var(--color-black);
    --input-radius: var(--form-radius);
    --field-validation-error-border-radius: 4px;

    /* Focus State */
    --input-focus-border: 1px solid var(--color-gray-dark);
    --input-focus-bg: #f6f8fa;
    --input-focus-box-shadow: 0 0 1px 0.8px #2196f3;

    /* =====================
          Checkbox
    ===================== */

    /* Appearance */
    --check-size: calc(var(--form-height) / 1.5);
    --check-radius: calc(var(--form-radius) * 0.8);

    /* Appearance */
    --check-bg: var(--color-white);
    --check-border: 1px solid var(--color-gray-medium);

    /* Checked State */
    --check-checked-bg: var(--color-gray-dark);
    --check-checked-border: 1px solid var(--color-gray-dark);
    --check-checked-color: 5px solid var(--color-white);

    /* =====================
          Radio button
    ===================== */

    /* Layout */
    --radio-button-gap: 10px;
    --radio-button-flex-direction: column-reverse;

    /* Appearance */
    --radio-button-size: 25px;

    /* height and width of the radio buttons */
    --radio-button-dot-size: 8px;

    /* height and width of the radio button dot when is checked */
    --radio-button-radius: 50%;

    /* border radius */
    --radio-button-unchecked-bg: var(--color-gray-medium);
    --radio-button-dot-color: var(--color-white);
    --radio-button-checked-bg: var(--primary-color);

    /* Disabled State */
    --radio-button-disabled-bg: var(--color-gray-light);

    /* ==Dropdown== */
    --select-text-size: var(--input-text-size);
    --select-text-color: var(--color-white);
    --select-bg-color: var(--primary-color);
    --select-border:1px solid var(--primary-color);
    --select-border-radius: 8px;
    --select-box-shadow: 0 0 0 0 var(--color-gray-light);
    --select-arrow-size: 18px;
    --select-arrow-color: var(--color-font);
    --select-polygon-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%);

    /* Layout */
    --select-height: var(--form-height);
    --select-padding: 12px;

    /* hover */
    --select-hover-bg:#0a4fa8;
    --select-hover-text-color:var(--color-white);
    --select-border-hover:var(--primary-color);

    /* Focus */
    --select-focus-bg: var(--primary-color);
    --select-focus-text-color: var(--color-white);
    --select-focus-border: 1px solid var(--primary-color);

/* ==Progress Bar== */
    --progress-button-height: 56px;
    --progress-button-width: 180px;
    --progress-text-size: 20px;
    --progress-text-weight: 600;
    --progress-text-case: normal;
    --back-icon: "\e8b5";

    /* Back Button Font */
    --back-color: var(--secondary-color);
    --back-color-hover: var(--color-white);
    --back-color-active: var(--color-white);

    /* Back Button */
    --back-bg: transparent;
    --back-bg-hover: var(--secondary-color);
    --back-bg-active: var(--secondary-color);
    --back-border: 2px solid var(--secondary-color);
    --back-border-hover: 2px solid var(--secondary-color);
    --back-border-active: 2px solid var(--secondary-color);
    --back-border-radius: 5px;

    /* Next Button-font */
    --next-button-font-weight: 700;
    --next-color: var(--color-white);
    --next-color-hover: var(--secondary-color);
    --next-color-active: var(--secondary-color);

    /* Next Button-bg */
    --next-bg:  #0e5abe;
    --next-bg-hover: var(--primary-color-hover);
    --next-bg-active: var(--primary-color-active);
    --next-border-radius: 5px;
    --next-border: 0px solid var(--primary-color);
    --next-border-hover: 0px solid var(--secondary-color);
    --next-border-active: 0px solid var(--secondary-color);
    --next-boxshadow: 0 2px 5px 0 rgb(0 0 0 / 10%);

    /* =====================
           Alerts
      ===================== */
    --alert-border-radius: 8px;
    --alert-border: 1px solid #1e1e1e;
    --alert-background-color: rgb(255 186 0 / 5%);
    --alert-border-color: var(--color-alert);
    --alert-box-shadow: hsl(44deg 100% 50% / 30.8%) 0 1px 4px;
    --success-background-color: var(--color-success-light);
    --success-border-color: var(--color-success);
    --success-box-shadow: rgb(45 200 68 / 25%) 0 1px 4px;
    --error-background-color: rgb(77 77 255 / 5%);
    --error-border-color: rgb(77 77 255 / 83.6%);
    --error-box-shadow: rgb(77 77 255 / 32%) 0 1px 4px;

    /* =====================
         Date/Time Picker
    ===================== */

    /* Layout */
    --day-col-number: 5;
    --day-col-gap: 16px;
    --time-col-number: 1;
    --time-spacing: 6px;
    --time-height: 36px;
    --time-width: 90px;

    /* Text */
    --day-text-size: var(--label-size);
    --day-text-weight: 500;
    --day-text-color: var(--color-black);
    --period-text-size: var(--label-size);
    --period-text-weight: 500;
    --period-text-color: var(--color-black);
    --time-text-size: 16px;
    --time-text-weight: 400;
    --time-color: var(--color-black);

    /* State */
    --datetime-bg: var(--color-white);
    --time-bg: var(--color-gray-light);
    --time-bg-hover: var(--secondary-color);
    --time-bg-active: var(--primary-color);
    --time-color-hover: var(--color-white);
    --time-color-active: var(--color-white);
    --time-border: 2px solid var(--color-black);
    --time-border-active: 0 solid var(--color-black);
    --time-shadow: 0 0 0 0 var(--color-white);

    /* =====================
        Pagination
    ===================== */

    /* Text */
    --paginate-text-size: var(--label-size);
    --paginate-color: var(--color-black);
    --paginate-font-weight: 500;
    --paginate-color-hover-font-size: 1.1rem;
    --paginate-color-hover-font-weight: 500;

    /* State */
    --paginate-color-hover: var(--secondary-color);
    --paginate-color-active: var(--color-black);

    /* Pagination Buttons Only */
    --paginate-bg: transparent;
    --paginate-bg-hover: var(--color-gray-light);
    --paginate-bg-active: var(--color-accent);
    --paginate-border: var(--border-size) solid var(--color-gray-medium);
    --paginate-border-hover: var(--border-size) solid var(--color-gray-light);
    --paginate-border-active: var(--border-size) solid var(--color-accent);

    /* =====================
        Review/Confirmation List
    ===================== */

    /* Layout */
    --details-spacing: 6px;
    --details-label-width: 160px;

    /* Text */
    --details-label-text-size: var(--label-size);
    --details-label-text-weight: var(--label-weight);
    --details-value-text-size: var(--text-size);
    --details-value-text-weight: 500;

    /* =====================
        MAP
    ===================== */

    /* Search Input */
    --input-search-border-radius: 30px;
    --input-search-padding: 10px;

    /* Map */
    --map-height: 50vh;
    --map-max-height: 520px;
    --map-width: 100%;
    --map-border: 1px solid rgb(0 0 0 / 25%);

    /* Map Pin */
    --map-pin-width: 27px;

    /* Unit Availability */
    --map-unit-no-availability-color: #700;
    --map-unit-no-availability-font-weight: 600;
    --map-unit-no-availability-padding: 2px 10px 10px 10px;

    /* Map Toggle */

    /* Inactive */
    --map-toggle-inactive-background: var(--color-white);
    --map-toggle-inactive-font: var(--font-family-second);
    --map-toggle-inactive-font-color: var(--secondary-color);
    --map-toggle-inactive-padding: 8px;
    --map-toggle-inactive-border: 2px solid #c0c0c0;
    --map-toggle-inactive-border-radius: 0px;
    --map-toggle-inactive-border-radius-right: unset;

    /* Active */
    --map-toggle-active-background: var(--primary-color);
    --map-toggle-active-font-color: var(--color-white);
    --map-toggle-active-padding: 10px;

    /* Popup Wrapper */
    --popup-wrapper-border-radius: 12px;
    --popup-content-width: 170px !important;

    /* Get In Line Text */
    --map-getinline-popup-font-size: 16px;
    --map-getinline-popup-color: var(--color-white);
    --map-getinline-popup-font-weight: 500;
    --map-getinline-popup-color-hover: var(--color-white);
    --map-getinline-popup-color-active: var(--color-white);

    /* Get In Line Background */
    --getinline-pouptip-bg: var(--primary-color);
    --getinline-pouptip-hover: #505050;
    --getinline-pouptip-active: var(--color-gray-deep);

    /* Distance Text */
    --map-distance-font: var(--font-family-second);
    --map-distance-color: var(--color-black);
    --map-distance-weight: 400;
    --distance-margin-right: 3px;

    /* Map Popup */
    --map-popup-padding: 6px 4px 4px;
    --map-popup-flex-direction: column;
    --map-popup-font-size: 0.8125rem;
    --map-popup-gap: 5px;
    --map-popup-margin: 0;
    --map-popup-align-items: center;

    /* Map Marker */
    --map-marker-fill: var(--primary-color);
    --map-marker-fill-hover: var(--color-map-hover);
    --map-marker-fill-active: var(--color-accent-hover);
}

/* MOBILE WIDTH */
@media all and (width <= 1159px) {
    body {
        --nav-grid: 0.9fr 1.3fr;
    }
}

@media all and (width >= 1159px) {
    div.container.nav {
        width: 100%;
        justify-content: space-between;
    }
}

@media all and (width <= 767px) {
    body {
        /* General */
        --content-padding: 25px;
        --logo-height: 32px;
        --logo-max-width: 200px;
        --logo-width: 100%;

        /* btn */
        --btn-columns: 2;
        --btn-align: center;
        --btn-min-width: 190px;
        --btn-wrap: initial;

        /* Day time picker */
        --day-col-number: 1;
        --time-col-number: 6;
        --summary-grid: 100px 1fr;

        /* Navbar */
        --nav-bg: linear-gradient(to left, #275f95e6, #17a7ddfc);
        --nav-align: center;
        --nav-grid: 0.8fr 1fr;
        --nav-grid-column-gap: 25px;
        --navitem-text-size: 18px;
        --nav-heading-size: 1.7rem;
        --nav-subtitle-size: 1.275rem;

        /* Form */
        --form-max-width: 100%;
        --form-align: left;
        --input-width: 100%;
    }
div.nav-links ul {
    padding: 0;
}
    nav.nav-links ul > li {
        width: 100%;
        padding-bottom: 5px;
        padding: 5px 0;
    }

    div.logo {
        width: 100%;
    }

    div.container.nav {
        width: 100%;
        max-width: 100%;
        justify-content: normal;
    }

    main.MyCases div.case-buttons {
        max-width: 80%;
    }

    div button.cancel-cancel {
        max-width: 40%;
    }

    div button.cancel-confirm {
        max-width: 55%;
    }

    div#logo-wrap {
        justify-self: center;
    }

    div.summary-wrap {
        display: inline;
    }
    div.confirmation-buttons{
            width: calc(100% + (var(--content-padding) * 2));

    }
}

/* NARROW WIDTH DEVICES */
@media screen and (width <= 479px) {
    body {
        --content-padding: 15px;
        --progress-button-width: 100%;
        --summary-grid: 85px auto;
        --btn-columns: 1;
        --btn-max-width: 100%;

        /* =====================
          NAVBAR
        ===================== */
        --logo-width:100%;
        --logo-max-width: 170px;
        --nav-grid: auto auto;
        --nav-heading-size: 1.35rem;
        --nav-subtitle-size: 1rem;
        --nav-site-title-justify: flex-start;
        --nav-grid-column-gap: 12px;
        --nav-grid-row-gap: 8px;
        --nav-heading-align: center;
        --nav-subtitle-align: center;
        --nav-margin: var(--content-padding);

        /* Form */
        --form-max-width: 100%;
        --form-align: left;
        --input-width: 100%;
    }
main h1.page-title, main form>h1:first-child, body main>h1:first-child {
    margin-top: 0;
}
main h1.page-title span {
    padding: 6px;
}
div .step-control-title{
padding: 0;
}
    div.buttons-list-container {
        display: flex;
        flex-flow: column nowrap;
        place-content: center center;
    }

    main.MyCases div.case-buttons {
        max-width: 100%;
    }

    div button.btn.welcome {
        width: 100%;
        min-width: 100%;
        flex-grow: 1;
    }

    div button.cancel-cancel , div button.cancel-confirm {
        max-width: 100%;
    }

    div.buttons-list-container button,
    button.unit-with-distance-button.show {
        width: 100%;
        min-width: 100%;
        gap: 10px;
    }

    div.test-banner {
        height: auto; }
}

@media all and (width <= 360px) {
    body {
        --btn-min-width: 166px;
        --btn-max-width: 100%;
        --day-col-number: 1;
        --time-col-number: 5;
        --logo-width: 145px;
        --nav-margin: 0;
    }

    div.container.nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* =====================
        General
   ===================== */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-family: var(--font-family-main);
    background-color: var(--html-bg);
    overflow-x: hidden;
}

body {
    max-width: var(--body-width);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--page-bg);
    box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    align-self: center;
    color: var(--color-font);
    font-family: var(--body-font);
}

header {
    background: var(--header-bg);
    align-self: stretch;
    justify-content: center;
    flex-flow: row wrap;
    flex-basis: min-content;
}

/* ==========================
          MAIN & FORM
   ========================== */

main,
main > div {
    flex-basis: 100%;
}



form,
main {
    display: flex;
    place-content: flex-start flex-start;
    background: var(--page-bg);
    width: 100%;
    align-self: stretch;
    flex-flow: column nowrap;
    overflow-wrap: break-word;
}
main > form {
    flex-grow: 1;
}
main > div,form > div{
    width: 100vw;
    max-width: 100%;
    align-self: center;
    padding-left: 0;
    padding-right: 0;
}
main > div,
main div > div, 
form > div,
form div > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
form div > div,
main div > div {
    display: flex;
    box-sizing: border-box;
}



.qflow-content,
.qflow-content * {
    display: unset;
}

form > .step-controls-container,
main > .step-controls-container {
    flex-grow: 0;
}

p,
legend,
form p,
main p {
    line-height: 1.4;
}

form p,
main p {
    padding-top: 0;
    padding-bottom: var(--vert-spacing);
}

form div > p,
form div > label,
main div > p,
main div > label {
    width: 100%;
    max-width: calc(var(--main-width) + (var(--content-padding) * 2));
    align-self: center;
    padding-left: 0;
    padding-right: 0;
}
form div > label.control-label {
    display: inline-block;
}
form > div,
form div > div,
main > div,
main div > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

main div > p {
    display: flex;
}

form > div,
form > p,
form div > div,
form div > p,
main > div,
main > p,
main div > div,
main div > p {
    padding-top: 0;
}

form > h2,
form > div > h2,
form > h3,
form > div > h3,
form > h4,
form > div > h4,
form > h5,
form > div > h5,
form > h6,
form > div > h6,
form > p,
form > div > p,
form > div > div,
form > div > fieldset,
main > h2,
main > div > h2,
main > h3,
main > div > h3,
main > h4,
main > div > h4,
main > h5,
main > div > h5,
main > h6,
main > div > h6,
main > p,
main > div > p,
main > div > div,
main > div > fieldset,
div.review-container,
div.confirmation-container {
    max-width: 100%;
    width: calc(var(--main-width) + (var(--content-padding) * 2));
    align-self: center;
}

form > h1,
main > h1 {
    padding: 0 var(--content-padding);
}

p.not-open-message {
    max-width: calc(100% - 2 * (var(--content-padding)));
    width: var(--main-width);
    align-self: center;
    display: flex;
    align-items: center;
    padding: 0 var(--content-padding);
}

/* Page Title */
h1.page-title,
form > h1:first-child,
main > h1:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--content-padding);
    background: var(--page-bg);
    margin-bottom: var(--page-top-margin);
    margin-top: 30px;
}

h1.page-title span,
form > h1:first-child > span,
main > h1:first-child > span {
    flex-basis: 100%;
    max-width: var(--main-width);
    justify-content: flex-start;
    padding: var(--vert-spacing) 0;
    line-height: 1.5;
    font-family: var(--step-title-font);
    color: var(--step-title-color);
    font-size: var(--step-title-size);
    font-weight: var(--step-title-weight);
    letter-spacing: var(--step-title-spacing);
}

main.AppointmentTypeSelection h1.page-title span,
main.UnitSelection h1.page-title span,
main.CustomerSearchPage h1.page-title span {
    justify-content: center;
}

.subtitle {
    padding: 0 var(--content-padding);
    box-sizing: border-box;
}

.subtitle-text {
    padding: 0 var(--content-padding);
    box-sizing: border-box;
}

/* Review and Confirmation Page */
.review-container,
.confirmation-container,
.case-container {
    max-width: 100%;
    box-sizing: border-box;
    flex-basis: auto;
    width: 100%;
    align-self: center;
    justify-content: flex-start;
    margin-bottom: 30px;
    flex-direction: column;
}

.review-container h2,
.review-container h3,
.review-container h4,
.confirmation-container h2,
.confirmation-container h3,
.confirmation-container h4 .case-container h2,
.case-container h4 {
    font-family: var(--font-family-main);
    font-size: 20px;
    margin-top: 30px;
    padding: 0 0 calc(var(--vert-spacing) * 0.5);
}

.review-container h2,
.confirmation-container h2,
.case-container h2 {
    font-size: var(--h2-size);
    padding: 0 var(--content-padding);
    box-sizing: border-box;
}

.my-cases-list > div {
    padding: 0 0 var(--vert-spacing);
}

h2.validation-summary-header {
    max-width: var(--main-width);
    box-sizing: border-box;
    width: calc(100% - (var(--content-padding) * 2));
    display: flex;
    justify-content: flex-start;
}

.review-container h3,
.confirmation-container h3,
.case-container h3 {
    font-size: var(--h4-size);
}

.review-container h4,
.confirmation-container h4,
.case-container h4 {
    font-size: var(--h5-size);
}

.case-container .step-control-title {
    padding: var(--vert-spacing) 0;
}

div[data-stepcontrolkey="MYCS"],
div[data-stepcontrolkey="MYAPPT"],
div[data-stepcontrolkey="MYETK"] {
    margin-top: 20px;
    flex-direction: column;
}

.review-container dl,
.confirmation-container dl,
.case-container dl {
    padding: 0 var(--content-padding);
    margin-bottom: calc(var(--vert-spacing) * 2);
}

/* test banner */
.test-banner p {
    text-align: center;
    width: max-content;
    padding: 0 var(--content-padding);
    display: flex;
    height: 100%;
    place-content: center center;
    font-size: 1.15em;
    font-weight:bold;
    color: #000;
    background: #fff;
    backdrop-filter: blur(3px);
    flex-direction: column;
    clip-path: polygon(2% 0, 98% 0, 100% 20%, 100% 80%, 98% 100%, 2% 100%, 0% 80%, 0% 20%);
    border-left: 2px solid #ffff;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.test-banner {
    text-align: center;
    height: 44px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0 6px 4px -2px, rgba(0, 0, 0, 0.3) 0 3px 5px -3px;
    background: repeating-linear-gradient(-45deg, #ffc62ee6, #ffc824 15px, #000 6px, #000 25px);

}

/* Details */

dt,
dd {
    font-size: 16px;
    display: flex;
    flex-direction: column;
    margin: 0;
}

dd img {
    max-width: 122px;
    margin-left: -5px;
}

dd {
    font-family: var(--details-dd-font);
    flex-basis: calc(100% - var(--details-label-width));
    font-size: var(--details-value-text-size);
    font-weight: 600;
}

dt {
    font-family: var(--details-dt-font);
    min-width: min-content;
    overflow: hidden;
    hyphens: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: auto-phrase;
}

dl {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 0.5fr 1fr;
    gap: 15px;
    margin: auto;
    overflow-wrap: anywhere;
    white-space: normal;
    word-wrap: break-word;
    word-break: auto-phrase;
}

dd:last-child {
    border-bottom: none;
}

/* MY CASES */
.case-container dl {
    margin-bottom: calc(var(--vert-spacing) * 2.5);
}

.case-container .case-title {
    padding-bottom: 0;
}

.case-subtitle {
    font-size: var(--label-size);
}

.case-subtitle::before {
    content: "ID: #";
    display: inline;
}

dl .case-section-title {
    flex-basis: 100%;
    font-size: calc(var(--details-value-text-size) + 1px);
    font-weight: 600;
    margin-top: var(--vert-spacing);
    padding-bottom: 0;
    margin-bottom: -1px;
}

/* ONLY FOR ONE-COLUMN CASE DETAILS */
@media all and (width <= 479px) {
    dl {
        gap: 10px 40px;
        grid-template-columns: auto;
        
    }
.case-container dl {
   padding: 0;
}
    dt,
    dd {
        flex-basis: 100%;
    }

    dd {
        margin-bottom: var(--details-spacing);
        overflow-wrap: break-word; 
    }
}

/* ==========================
          LINKS
   ========================== */


main a:active {
    text-decoration: underline;
}
main a:hover,
main a:active,
.summary-display a:hover {
    color: var(--primary-color-active);
    cursor: pointer;
}
/* ==========================
          HEADINGS
   ========================== */
body h2,
body h3,
body h4,
body h5,
body h6 {
    line-height: 1.4;
    padding-top: var(--vert-spacing);
    padding-bottom: var(--vert-spacing);
    font-family: var(--step-title-font);
    font-weight: var(--step-title-weight);
    color: var(--step-title-color);
}

body h2 {
    font-size: var(--h2-size);
}

body h3 {
    font-size: var(--h3-size);
}

body h4 {
    font-size: var(--h4-size);
}

body h5 {
    font-size: var(--h5-size);
}

body h6 {
    font-size: var(--h6-size);
}

/* ==========================
          ADDITIONAL PAGE CONTENT
   ========================== */
.additional-page-content {
    display: flex;
    justify-content: flex-start;
    flex-basis: auto;
    width: calc(var(--main-width) + (var(--content-padding) * 2));
    align-self: center;
    max-width: 100%;
    padding: 0 var(--content-padding);
    box-sizing: border-box;
}
span.field-validation-success:empty,
span.field-validation-success:empty:not(:blank),
.additional-page-content:empty,
div p:empty,
p[data-asw-org-font-size]:empty, 
.additional-page-content:empty:not(:blank) {
    display: none;
    padding: 0;
    margin: 0;
}

/* ==========================
          STEP CONTROLS CONTAINER
   ========================== */

.step-controls-container {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    width: var(--main-width);
    max-width: calc(100% - (var(--content-padding) * 2));
    box-sizing: border-box;
}

.step-controls-container fieldset,
.step-controls-container fieldset legend {
    padding-bottom: var(--vert-spacing);
}

.step-controls-container > div,
.step-controls-container fieldset {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.step-controls-container > div > label {
    padding-bottom: var(--vert-spacing);
}

fieldset {
    justify-content: center;
    gap: var(--btn-spacing);
}

fieldset.service-attribute-selector,
fieldset.service-attribute-checkbox {
    justify-content: flex-start;
}

/* ==========================
          PAGE TITLE VALIDATION
   ========================== */

.page-title:not(h1),
.page-title:not(h1) > span {
    color: red;
}

.page-title:not(h1)::after {
    content: " * Use h1 for page title";
    font-size: 13px;
    padding-left: 2px;
}

form > h1:not(:nth-of-type(1)) {
    color: red !important;
}

form > h1:not(:nth-of-type(1))::after,
main > h1:not(:nth-of-type(1))::after {
    content: " * Use only one h1";
    font-size: 13px;
    padding-left: 2px;
}

h1.site-title::after,
h2.site-title::after,
h1.site-subtitle::after,
h2.site-subtitle::after,
header h1::after,
header h2::after {
    color: var(--color-white);
    background-color: red;
    content: " * Do not use h1, h2 for site titles.";
    font-size: 13px;
    padding: 8px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

h1.site-title,
h2.site-title,
h1.site-subtitle,
h2.site-subtitle,
header h1,
header h2 {
    color: red !important;
}

/* ==========================
          SLOT LOCK MESSAGE
   ========================== */
.slot-lock-message {
    max-width: var(--main-width);
    display: flex;
    justify-content: center;
    margin-bottom: var(--vert-spacing);
}

/* ==========================
          OTHER STYLES
   ========================== */
a {
    display: flex;
    color: var(--color-link);
    padding: unset;
    text-decoration: unset;
}

p,
li,
label {
    display: flex;
    align-self: center;
    color: var(--color-font);
    font-family: var(--body-font);
}

label {
    font-weight: var(--label-weight);
    line-height: 1.5;
}


button,
input[type="submit"] {
    padding: 0;
    border: none;
    background: inherit;
    font-size: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol,
ul {
    list-style: none;
}

q::before,
q::after,
blockquote::before,
blockquote::after {
    content: "";
}

.skip-link {
    background: var(--color-white);
    height: auto;
    width: 200px;
    left: calc(50% - 120px);
    padding: 0 20px;
    line-height: 3rem;
    position: absolute;
    transform: translateY(-100%);
    text-align: center;
    font-size: 1.125rem;
}

/* =====================
        Footer
   ===================== */
footer {
    background: var(--footer-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--footer-content-padding);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    bottom: 0;
    left: 0;

    background-image: url("../../../Content/JourneyContent/fc02bd33-502e-4367-a745-88744ed0191e/lawa-footerbg.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
}
.footer-content-wrap {
    display: flex;
    flex-direction: row;
    justify-content: var(--footer-justify-content);
    gap: var(--footer-gap);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.footer-content-wrap .foot_item {
    margin: 0 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

li a.foot-item {
    color: var(--footer-text-color);
    font-size: var(--footer-text-font-size);
    font-weight: var(--footer-text-font-weight);
}
li a.foot-item:focus-visible{
    outline: 1px solid currentcolor;
    background: transparent;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(9, 41, 64, .2);
}
ul > li.footitem:nth-child(2) {
    font-size: 16px;
}

.foot-item:hover {
    color: var(--footer-text-color-hover);
    text-decoration: var(--footer-text-color-decoration);
    filter: var(--footer-text-color-filter);
}

.footer-logo-wrap {
    width: var(--footer-logo-width);
}

.footer-logo-wrap a {
    justify-content: center;
}

@media (width <= 600px) {
    .footer-content-wrap {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .footer-content-wrap .foot_item {
        margin: 5px 0;
    }
}

/* =====================
        End of Footer
   ===================== */

/* ==========================
   Site Title
   ========================== */
.div-block {
    display: flex;
    grid-gap: 10px 30px;
}

.div-block.site-title {
    grid-gap: 5px 0;
    flex-direction: column;
    justify-content: var(--nav-site-title-justify);
    text-align: center;
}

.title {
    flex-direction: column;
    flex-basis: 100%;
    align-items: start;
    text-align: var(--step-title-align);
}

.title .site-title,
.page-title {
    font-family: var(--step-title-font);
    font-size: var(--step-title-size);
    font-weight: var(--step-title-weight);
    color: var(--step-title-color);
    letter-spacing: var(--step-title-spacing);
}

.title .site-subtitle,
.step-control-title {
    font-family: var(--step-control-title-font);
    font-size: var(--step-control-title-size);
    font-weight: var(--step-control-title-weight);
    color: var(--step-control-title-color);
    letter-spacing: var(--step-control-title-spacing);
}

form p.site-subtitle {
    padding: 0 var(--content-padding);
    box-sizing: border-box;
}

.section.nav {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin-top: var(--nav-top-margin);
}

/* ==========================
   Navbar
   ========================== */
.container.nav {
    display: grid;
    flex: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    justify-content: center;
    align-self: auto;
    align-items: center;
    grid-gap: 12px;
    grid-template-rows: auto auto;
    grid-template-columns: var(--nav-grid);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    padding-left: 0;
    padding-right: 0;
    margin-top: var(--nav-top-margin);
    flex-direction: column;
}

/* ==========================
   Logo
   ========================== */
a.link-block.w-inline-block {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo {
    width: var(--logo-width);
    max-width: var(--logo-max-width);
    aspect-ratio: auto;
    object-fit: contain;
}

.site-title {
    margin-right: var(--nav-margin);
}

.logo-wrap {
    margin-left: var(--nav-margin);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* ==========================
   Heading and Subtitle
   ========================== */

.heading {
    font-family: var(--nav-heading-font);
    color: var(--nav-heading-color);
    font-size: var(--nav-heading-size);
    font-weight: var(--nav-heading-weight);
    text-align: var(--nav-heading-align);
    letter-spacing: var(--nav-heading-spacing);
    width: 100%;
}

.sub-title {
    font-family: var(--nav-subtitle-font);
    font-size: var(--nav-subtitle-size);
    font-weight: var(--nav-subtitle-weight);
    color: var(--nav-subtitle-color);
    letter-spacing: var(--nav-subtitle-spacing);
    text-align: var(--nav-subtitle-align);
    width: 100%;
}

/* ==========================
   Hamburguer Menu
   ========================== */
.hamburguer-bg {
    width: 100%;
    height: 60px;
    background: var(--nav-bg);
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hamburguer-menu {
    display: flex;
    flex-direction: column;
    width: var(--hamburguer-width);
    height: var(--hamburguer-height);
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.hamburguer-menu.active {
    margin-top: 5px;
}

.hamburguer-menu .line {
    display: block;
    height: var(--hamburguer-line-height);
    width: 100%;
    background: var(--hamburguer-line-color);
    border-radius: var(--hamburguer-line-border-radius);
    transition: all 0.4s ease;
}

.hamburguer-menu .line1,
.hamburguer-menu .line3 {
    transform-origin: 0%;
    transition: transform 0.5s ease-in-out;
}

.hamburguer-menu .line2 {
    transition: transform 0.2s ease-in-out;
}

.line1.active {
    transform: rotate(45deg);
}

.line2.active {
    transform: scaleY(0);
}

.line3.active {
    transform: rotate(-45deg);
}

.hamburguer-bg,
.hamburguer-menu {
    display: none;
}

/* ==========================
   Block: Nav Links
   ========================== */

.nav-links ul {
    height: var(--nav-height);
    padding-left: 0;
    margin: 0;
    position: static;
    background: var(--nav-bg);
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-grow: 1;
    font-family: var(--navitem-font);
    font-weight: var(--navitem-text-weight);
    font-size: var(--navitem-text-size);
    font-style: normal;
    text-align: var(--navitem-text-align);
    max-width: 925px;
    clip-path: polygon(0 0, 100% 0%, 89% 100%, 0 100%);
    /* background-blend-mode: screen; */
    height: 100%;
    flex-grow: 1;
}

.nav-links ul > li {
    width: 20%;
    margin: 0;
    padding: 9px var(--content-padding);
    height: var(--nav-height);
    color: var(--color-white);
    align-items: center;
    display: flex;
    justify-content: center;
    list-style: none;
    transition: ease-in 0.3s;
}

.nav-links ul > li > a,
.nav-links ul > li > a:visited {
    background: transparent;
    padding: 0;
    margin: 5px;
    font-size: var(--navitem-text-size);
    font-weight: var(--navitem-text-weight);
    letter-spacing: var(--navitem-text-spacing);
    color: var(--navitem-color);
    font-family: var(--navitem-font);
    text-decoration: none;
    display: flex;
    height: 100%;
    box-sizing: border-box;
    align-items: center;
}

nav > ul > li > a:visited {
    color: currentcolor;
}

.nav-links ul > li:hover {
    background-color: var(--navitem-bg-hover);
    color: var(--navitem-color-hover);
    border-color: var(--navitem-bg-hover);
}

.nav-links ul > li:hover > a {
    font-weight: 500;
    color: var(--navitem-color-hover);
}

nav:focus-visible,
nav ul:focus-visible,
nav li:focus-visible,
nav a:focus-visible {
    outline: 1px solid black;
}

.link-nav {
    font-weight: 500;
    text-decoration: none;
}

.link-nav.bold {
    font-weight: 700;
    text-decoration: none;
}

/* ==========================
   Block: Nav Links Animation
   ========================== */
@keyframes slideDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

/* ==========================
   Block: Navbar Breakpoints
   ========================== */
@media screen and (width <= 767px) {
    .div-block.site-title {
        grid-gap: 0;
        flex-direction: column;
    }

    .nav-links ul.active {
        display: flex;
        flex-direction: column;
        animation: slideDown 0.5s ease forwards;
    }

    nav > ul {
        display: flex;
        justify-content: space-around;
        flex-grow: 1;
    }

    .nav-links,
    .nav-links ul {
        background-color: var(--nav-bg);
        border: unset;
        height: auto;
        width: 100%;
        display: none;
    }

    .hamburguer-bg,
    .hamburguer-menu {
        display: flex;
    }

    .hamburguer-menu {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 32px;
        height: 26px;
    }

    .container {
        text-align: center;
    }
}

@media screen and (width <= 479px) {
    .div-block.logo-wrap {
        display: block;
    }

    .div-block.site-title {
        width: auto;
        height: 100%;
        min-width: auto;
        grid-gap: 0;
        flex-flow: column;
        place-content: center center;
        align-items: flex-start;
    }

    .section.nav {
        margin: 0;
        display: block;
    }

    .hamburguer-menu {
        z-index: 5;
        height: 26px;
        width: 32px;
        cursor: pointer;
        margin-top: 0;
        display: flex;
        position: relative;
    }
}

#logo-wrap {
    justify-self: start;
}

#site-title,
#navbar-centered {
    justify-self: start;
}

#nav-links {
    grid-area: span 1 / span 2 / span 1 / span 2;
    place-self: center stretch;
    /* clip-path: polygon(0 0, 100% 0%, 89% 100%, 0 100%); */
    width: 100%;
    /* padding: 15px; */
    background-image: url('../../../Content/JourneyContent/fc02bd33-502e-4367-a745-88744ed0191e/homehero1.jpeg');
    min-height: 91px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;}

@media screen and (width <= 767px) {
    #hamburguer-bg {
        margin-top: 0;
    }

    #hamburguer-bg,
    #nav-links {
        grid-area: span 1 / span 2 / span 1 / span 2;
    }

    #nav-links {
        margin-top: -71px;
        padding-top: 58px;
        position: relative;
        z-index: 0;
    }
}

@media screen and (width <= 479px) {
    #logo-wrap {
        grid-area: span 1 / span 1 / span 1 / span 1;
        place-self: center center;
    }

    #site-title {
        place-self: auto auto;
    }
}

/* ==========================
        SUMMARY DATA
   ========================== */
.summary-display {
    display: flex;
    flex-flow: row wrap;
    flex-basis: min-content;
    width: 100%;
    align-self: stretch;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px var(--content-padding);
    gap: 2px;
    background-color: var(--summary-bg);
    z-index: 401;
    line-height: 1.5em;
}

.summary-wrap {
    display: inline-grid;
    flex-basis: 100%;
    flex-wrap: nowrap;
    align-self: stretch;
    justify-content: flex-start;
    grid-template-columns: var(--summary-grid);
    padding: 0;
    background: transparent;
    font-size: var(--summary-text-size);
    color: var(--summary-label-color);
    max-width: calc(var(--content-width) + 8px);
}

.summary-wrap:not(.show),
.summary-display:not(.show) {
    display: none;
}

.summary-label {
    font-weight: var(--summary-label-weight);
    margin-right: 4px;
    overflow: hidden;
    overflow-wrap: break-word;
}

.summary-value {
    font-weight: var(--summary-value-weight);
}

.summary-display a {
    color: var(--color-black);
}

.summary-display a:focus-visible {
    outline-color: var(--color-black);
}

.progress-summary-container {
    display: flex;
    flex-direction: column;
}

.progress-container-wrapper {
    order: 1;
}

.summary-display {
    order: 2;
}

.summary-display.show ~ .progress-container-wrapper {
    padding-bottom: 0;
}

@media (width <= 479px) {
    .summary-display.collapsed {
        display: flex;
        flex-direction: column;
    }

    .summary-display.collapsed .summary-wrap:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .summary-display.collapsed .summary-wrap:last-child::after {
        content: "\e821";
        font-size: 1.2em;
        margin-left: 8px;
    }
}

/* BUTTON GROUPS */

/* BUTTON styles */
.case-buttons button,
.confirmation-buttons button,
.cancel-prompt-buttons button,
.buttons-list-container button,
div[role="button"],
a[role="button"],
button {
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    justify-content: var(--btn-align);
    gap: var(--btn-spacing);
    cursor: pointer;
    background: var(--btn-bg);
    border: var(--btn-border);
    border-radius: var(--btn-border-radius);
    text-decoration: unset;
    color: var(--btn-color);
    text-align: var(--btn-text-align);
    font-family: var(--btn-font);
    font-size: var(--btn-text-size);
    font-weight: var(--btn-text-weight);
    letter-spacing: var(--btn-text-spacing);
    text-rendering: optimizelegibility;
    transition-duration: 500ms;
}

div[role="button"],
a[role="button"],
button {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 1 1 calc(100% / var(--btn-columns) - (var(--btn-spacing) * (var(--btn-columns) - 1)));
}

.buttons-list-container,
.case-buttons,
.confirmation-buttons,
.cancel-prompt-buttons {
    flex-flow: row wrap;
    gap: var(--btn-spacing);
    padding-bottom: 5px;
}

.buttons-list-container,
.confirmation-buttons,
.cancel-prompt-buttons {
    width: calc(100% + (var(--content-padding) * 2));
    box-sizing: border-box;
}

.confirmation-buttons {
    padding: 0 var(--content-padding);
    max-width: 100%;
    width: calc(var(--main-width) + (var(--content-padding) * 2));
    margin-bottom: 5px;
}

.cancel-prompt-buttons {
    margin: var(--content-padding) 0;
    width: 100%;
}

.buttons-list-container div[role="button"],
.buttons-list-container a[role="button"],
.buttons-list-container button,
.confirmation-buttons a[role="button"] {
    min-width: var(--btn-min-width);
    max-width: calc(100% / var(--btn-columns) - (var(--btn-spacing) * (var(--btn-columns) - 1)));
}

.cancel-prompt-buttons {
    justify-content: flex-start;
}

button.cancel-cancel {
    max-width: 35%;
}

button.cancel-confirm {
    max-width: 40%;
}

div[role="button"]:hover,
a[role="button"]:hover,
button:hover,
.case-buttons button:hover,
.confirmation-buttons button:hover,
.cancel-prompt-buttons button.cancel-cancel:hover,
.login-button-container a:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color-hover);
    box-shadow: var(--btn-border-hover);
    border-radius: var(--btn-border-radius-hover);
}

div[role="button"]:active,
a[role="button"]:active,
button:active,
.case-buttons button:active,
.confirmation-buttons button:active,
.cancel-prompt-buttons button.cancel-cancel:active,
.login-button-container a:active {
    background: var(--btn-bg-active);
    color: var(--btn-color-active);
}

div[role="button"]:disabled,
a[role="button"]:disabled,
button:disabled {
    background: var(--btn-bg-disabled);
    color: var(--btn-color-disabled);
    box-shadow:
        rgb(17 17 26 / 5%) 0 1px 0,
        rgb(17 17 26 / 10%) 0 0 8px;
    border: 2px solid #d1d1d1;
    cursor: not-allowed;
}

div[role="button"] a i,
a[role="button"] a i,
button a i {
    font-size: var(--progress-text-size);
}

div[role="button"] a span,
a[role="button"] a span,
button a span {
    font-size: var(--progress-text-size);
}

.progress-buttons {
    display: flex;
    box-sizing: border-box;
    flex-wrap: var(--btn-wrap);
    align-self: center;
    justify-content: space-between;
    width: 100%;
    max-width: calc(var(--main-width) + (var(--content-padding) * 2));
    padding: 0 var(--content-padding);
    background: var(--color-white);
    z-index: 100;
    flex-basis: calc(var(--progress-button-height) + (var(--content-padding) * 2));
    flex-grow: 0;
    gap: 10px;
}

.progress-buttons.sticky {
    border-color: transparent;
    transition: all 0.2s ease;
}

.progress-buttons.stuck {
    box-sizing: border-box;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-medium);
    box-shadow: 0 -8px 36px rgb(0 0 24 / 8%);
    justify-content: center;
    max-width: unset;
    transition: all 0.6s ease;
    position: sticky;
    bottom: -1px;
}

.progress-buttons.stuck div.back-button-container,
.progress-buttons.stuck div.next-button-container {
    display: flex;
    flex-basis: 50%;
    max-width: calc(var(--content-width) * 0.5);
    padding: 0;
}

div.progress-buttons button:hover,
div.progress-buttons a:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color-hover);
}

div.progress-buttons button:active,
div.progress-buttons a:active {
    background: var(--btn-bg-active);
    color: var(--btn-color-active);
}

div.progress-buttons button:disabled,
div.progress-buttons a:disabled,
div.progress-buttons .back-button-container:disabled,
div.progress-buttons .next-button-container:disabled,
input.back-button:disabled,
input.back-button:disabled:hover,
input.next-button:disabled,
input.next-button:disabled:hover,
button.next-button:disabled:hover {
    background: var(--btn-bg-disabled);
    color: var(--btn-color-disabled);
    cursor: not-allowed;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition:
        background-color 0s 600000s,
        color 0s 600000s !important;
}

div.progress-buttons button i,
div.progress-buttons a i {
    font-size: var(--btn-icon-size);
}

div.progress-buttons button span,
div.progress-buttons a span {
    font-size: var(--btn-text-size);
}

div.back-button-container,
div.next-button-container {
    flex-basis: 50%;
    padding: 0;
}

div.back-button-container {
    justify-content: flex-start;
}

div.next-button-container {
    justify-content: flex-end;
}

div.back-button-container > a,
div.back-button-container > input,
div.next-button-container > a,
div.next-button-container > input,
button.next-button {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: var(--progress-button-height);
    min-width: var(--progress-button-width);
    padding-top: 0;
    padding-bottom: 0;
    margin: var(--content-padding) 0;
    font-family: var(--btn-font);
    font-size: var(--progress-text-size);
    font-weight: var(--progress-text-weight);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

div.next-button-container > input::before {
    content: "";
    box-shadow:
        0 3px 5px 0 rgb(0 0 0 / 40%),
        0 3px 5px 0 rgb(184 183 183 / 40%);
}

div.next-button-container > a,
div.next-button-container > input,
button.next-button {
    background: var(--next-bg);
    color: var(--next-color);
    border: var(--next-border);
    border-radius: var(--next-border-radius);
    box-shadow: var(--next-boxshadow);
    appearance: none;
    transition: 0.3s;
}

div.next-button-container > a:hover,
div.next-button-container > input:hover,
div.next-button-container > input:focus,
button.next-button:hover {
    color: var(--next-color-hover);
    background: var(--next-bg-hover);
    border: var(--next-border-hover);
}

div.next-button-container > a:active,
div.next-button-container > input:active,
button.next-button:active {
    color: var(--next-color-active);
    background: var(--next-bg-active);
    border: var(--next-border-active);
}

div.back-button-container > a,
div.back-button-container > input {
    color: var(--back-color);
    font-weight: var(--back-button-font-weight);
    background: var(--back-bg);
    border: var(--back-border);
    border-radius: var(--back-border-radius);
}

div.back-button-container > a:hover,
div.back-button-container > input:hover {
    background: var(--back-bg-hover);
    color: var(--back-color-hover);
    text-decoration: none;
    border: var(--back-border-hover);
}

div.back-button-container > a:active,
div.back-button-container > input:active {
    background: var(--back-bg-active);
    color: var(--back-color-active);
    border: var(--back-border-active);
}

div.spacer {
    flex-grow: 1;
}

#model-validation-summary-box {
    flex-basis: unset;
    display: none;
}

#model-validation-summary-box ul {
    display: flex;
    margin: 0;
    padding: 0 var(--content-padding);
    justify-content: flex-start;
    max-width: var(--content-width);
    width: calc(100% - var(--content-padding) * 2);
}

#model-validation-summary-box ul li a {
    overflow-wrap: break-word;
    word-break: break-all;
}

.alert-message,
.success-message,
.error-message {
    display: flex;
    flex-flow: row nowrap;
    flex-basis: auto;
    width:calc(100% - (var(--content-padding) * 2)) ;
    max-width:var(--content-width) ;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: var(--content-padding);
    margin-bottom: 16px;
    border-radius: var(--alert-border-radius);
    border: var(--alert-border);
}
.alert-message a,
.success-message a,
.error-message a {
display: inline-block;
    margin-left: 5px;
}
div.alert-message p {
    width: calc(100% - 43px);
}

.error-icon:empty {
    display: none;
    padding: 0;
    margin: 0;
}

.alert-message p,
.success-message p,
.error-message p,
.journey-error p,
.qflow-html-content p {
    padding: 0;
    word-break: break-word;
}

.alert-message {
    background-color: var(--alert-background-color);
    border-color: var(--alert-border-color);
    box-shadow: var(--alert-box-shadow);
}

.success-message {
    border-color: var(--success-border-color);
    background-color: var(--success-background-color);
    box-shadow: var(--success-box-shadow);
}

.error-message {
    border-color: var(--error-border-color);
    background-color: var(--error-background-color);
    box-shadow: var(--error-box-shadow);
}

.alert-message::before,
.error-message::before {
    content: "\e89d";
    font-family: icon;
    font-size: 2em;
    margin-right: 10px;
}

.success-message::before {
    content: "\e8a7";
    font-family: icon;
    font-size: 2em;
    margin-right: 10px;
}

.alert-message::before {
    color: var(--color-alert);
}

.success-message::before {
    color: var(--color-sucess);
}

.error-message::before {
    color: #4d4dffe3;
}

.journey-error {
    margin-top: 20px;
}

span.required-indicator {
    display: inline-block;
    margin-left: 3px;
    color: #ad0000;
}

span.field-validation-error {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    align-self: center;
    color:#cf1111;
    padding: var(--vert-spacing);
    margin-top: 8px;
    border: 1px solid #ffb8b8;
    border-radius: var(--field-validation-error-border-radius);
    background-color: rgb(255 56 56 / 5%);
    width: 100%;
    box-sizing: border-box;
    box-shadow: rgb(255 56 56 / 16%) 0 1px 4px;
    animation: fade-in 0.5s ease-in-out;
    grid-area: span 1 / span 2 / span 1 / span 2;
    order: 3;
}

.field-validation-error::before {
    content: "\e89b";
    font-family: icon;
    font-size: 1.5rem;
    align-self: center;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    color: #cf1111;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

div[data-stepcontrolkey="CUD1"],
div[data-stepcontrolkey="CUD2"] {
    width: 100%;
}

div[data-stepcontrolkey="CUD1"] div.disclaimers,
div[data-stepcontrolkey="CUD2"] div.disclaimers {
    width: 100%;
}

div[data-stepcontrolkey="CUD1"] div.form-control,
div[data-stepcontrolkey="CUD2"] div.form-control {
    width: 100%;
}

div[data-stepcontrolkey="CUD2"] {
    margin-top: 20px;
}

div.customer-form {
    display: block;
    justify-content: var(--form-align);
    width: var(--main-width);
    max-width: calc(100% - (var(--content-padding) * 2));
    margin: 0 var(--content-padding);
    padding-bottom: calc(var(--content-padding) * 3);
}

.step-controls-container.customer-form > div {
    justify-content: var(--form-align);
    max-width: var(--form-max-width);
    padding: 0;
    column-gap: var(--content-padding);
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1 calc(var(--input-width) - var(--content-padding));
    max-width: var(--input-max-width);
    padding-bottom: var(--vert-spacing);
    box-sizing: border-box;
}

.form-group.half {
    max-width: calc(var(--content-width) / 2);
}

.form-group .form-control-input {
    justify-content: flex-start;
    width: 100%;
}

.form-control-input input.form-control,
textarea,
select {
    display: flex;
    grid-area: span 1 / span 2 / span 1 / span 2;
    flex-basis: 100%;
    width: 100%;
    height: var(--form-height);
    padding: var(--input-padding);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--input-radius);
    border: var(--input-border);
    font-size: var(--input-text-size);
    font-family: inherit;
    background-color: var(--input-bg);
}

textarea {
    margin-bottom: var(--vert-spacing);
    padding: 10px;
    overflow: hidden;
}

.form-control-input:hover input.form-control,
.form-control-input:hover textarea,
.form-control-input:hover select,
.input.form-control:hover,
textarea:hover,
select:hover,
.form-control-input:focus input.form-control,
.form-control-input:focus textarea,
.form-control-input:focus select,
.input.form-control:focus,
textarea:focus,
select:focus,
.form-control-input:active input.form-control,
.form-control-input:active textarea,
.form-control-input:active select,
.input.form-control:active,
textarea:active,
select:active {
    background-color: var(--input-focus-bg);
    outline: 2px solid rgba(0, 0, 0, 0.2);
}

.radio-button input[type="radio"] {
    appearance: none;
    width: var(--radio-button-size);
    height: var(--radio-button-size);
}

.radio-group {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.radio-button {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: var(--radio-button-flex-direction);
    margin: 10px;
    font-size: 16px;
    cursor: pointer;
    gap: var(--radio-button-gap);
}

.radio-button input {
    display: none;
    width: 0;
    height: 0;
}

label + .radio-button {
    width: auto;
}

.radio-button span {
    width: var(--radio-button-size);
    height: var(--radio-button-size);
    position: relative;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-button-radius);
    background-color: var(--radio-button-unchecked-bg);
}

.radio-button input:checked + span::after {
    content: "";
    display: block;
    width: var(--radio-button-dot-size);
    height: var(--radio-button-dot-size);
    border-radius: var(--radio-button-radius);
    background-color: var(--radio-button-dot-color);
}

.radio-button input:checked + span {
    background-color: var(--radio-button-checked-bg);
}

.radio-button input:disabled + span {
    background-color: var(--radio-button-disabled-bg);
}

.radio-button span::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: var(--border-radius);
    background-color: var(--radio-button-checked-bg);
}

.radio-button input:checked + span::before {
    animation: growAndFade 0.2s ease-out;
}

@keyframes growAndFade {
    0% {
        opacity: 1;
        transform: scale(1.5);
    }

    50% {
        opacity: 0.5;
        transform: scale(2);
    }

    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.radiobutton-item {
    display: inline-block;
    margin: 10px;
}

.radiobutton-item input[type="radio"] {
    display: none;
}

.radiobutton-item label {
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    gap: var(--btn-spacing);
    cursor: pointer;
    background: var(--btn-bg);
    border: var(--btn-border);
    border-radius: var(--btn-border-radius);
    text-decoration: unset;
    color: var(--btn-color);
    text-align: var(--btn-text-align);
    font-family: var(--btn-font);
    font-size: var(--btn-text-size);
    font-weight: var(--btn-text-weight);
    letter-spacing: var(--btn-text-spacing);
    text-rendering: optimizelegibility;
    transition-duration: 500ms;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 calc(100% / var(--btn-columns) - (var(--btn-spacing) * (var(--btn-columns) - 1)));
}

.radiobutton-item input[type="radio"]:checked + label {
    background: var(--btn-color-active);
    color: var(--btn-color-active);
}

.radiobutton-item label:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color-hover);
    box-shadow: var(--btn-border-hover);
    border-radius: var(--btn-border-radius-hover);
}

.radiobutton-item input[type="radio"]:disabled + label {
    background: var(--btn-bg-disabled);
    color: var(--btn-color-disabled);
    cursor: pointer;
}

:root {
    --toggle-bg-unchecked: #fff;
    --toggle-border-unchecked: var(--color-gray-dark);
    --toggle-label-color-unchecked: var(--color-gray-dark);
    --toggle-slider-bg-unchecked: #ccc;
    --toggle-slider-dot-unchecked: var(--color-gray-dark);
    --toggle-bg-checked: #DBF4FF;
    --toggle-border-checked: #0e5abe;
    --toggle-label-color-checked: #0e5abe;
    --toggle-slider-bg-checked: #8ac4f9;
    --toggle-slider-dot-checked: #0e5abe;
    --all-toggle-bg-checked: #02a7f0;
    --all-toggle-label-color-checked: #fff;
    --all-toggle-slider-bg-checked: #d9ebf7;
    --all-toggle-slider-dot-checked: #0083ff
}

.multi-toggle,.individual-toggles {
    gap: var(--btn-spacing);
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
}

.toggle input {
    display: none;
    opacity: 0;
    width: 0;
    height: 0
}

.toggle.all-toggle input {
    position: absolute;
    display: flex
}

.toggle {
    display: flex;
    flex-basis: calc(100%/5 - (var(--btn-spacing)*(var(--btn-columns) - 1)));
    flex-shrink: 1;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    gap: var(--btn-spacing);
    position: relative;
    box-sizing: border-box
}

.toggle label {
    display: flex;
    flex-direction: column-reverse;
    align-items: normal;
    align-self: flex-start;
    justify-content: flex-end;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: calc(var(--content-padding)/1.5);
    background: var(--toggle-bg-unchecked);
    color: var(--toggle-label-color-unchecked);
    border: 2px solid var(--toggle-border-unchecked);
    border-radius: 5px;
    position: relative;
    inset: 0;
    cursor: pointer;
    transition: .4s
}

.toggle label>div {
    background: var(--toggle-slider-bg-unchecked);
    border-radius: 15px;
    height: 19px;
    width: 45px;
    padding: 0;
    margin-bottom: .5em;
    position: relative
}

.toggle label>div::before {
    content: "";
    position: absolute;
    left: -6px;
    bottom: -5px;
    width: 15px;
    height: 15px;
    background: var(--toggle-slider-dot-unchecked);
    border-radius: 50%;
    border: 7px solid var(--toggle-slider-dot-unchecked);
    transition: .4s
}

div.all-toggle label>div::after {
    content: '';
    width: 1.125rem;
    height: 2rem;
    background: var(--toggle-slider-dot-unchecked);
    clip-path: polygon(60% 0%,0% 60%,40% 60%,30% 100%,100% 40%,60% 40%);
    position: absolute;
    left: 178%;
    top: -7px
}

.toggle input[type="checkbox"]:checked+label {
    background: var(--toggle-bg-checked);
    color: var(--toggle-label-color-checked);
    border-color: var(--toggle-border-checked)
}

.toggle input[type="checkbox"]:checked+label>div {
    background: var(--toggle-slider-bg-checked);
    border-color: var(--toggle-border-checked)
}

.toggle input[type="checkbox"]:checked+label>div::before {
    background: var(--toggle-slider-dot-checked);
    border-color: var(--toggle-slider-dot-checked);
    transform: translateX(25px)
}

.multi-toggle .toggle.all-toggle input[type="checkbox"]:checked+label {
    background: var(--all-toggle-bg-checked);
    color: var(--all-toggle-label-color-checked);
    border-color: var(--all-toggle-bg-checked)
}

.multi-toggle .toggle.all-toggle input[type="checkbox"]:checked+label>div {
    background: var(--all-toggle-slider-bg-checked);
    border-color: #a1a1a130
}

.multi-toggle .toggle.all-toggle input[type="checkbox"]:checked+label>div::before {
    background: var(--all-toggle-slider-dot-checked);
    border-color: var(--all-toggle-slider-dot-checked)
}

div.all-toggle input[type="checkbox"]:checked+label>div::after {
    background: var(--all-toggle-label-color-checked)
}

@media(width <= 1200x) {
    .toggle {
        flex-basis:calc(100%/5 - (var(--btn-spacing)*(var(--btn-columns) - 1)))
    }
}

@media(width <= 800px) {
    .toggle {
        flex-basis:calc(100%/3 - (var(--btn-spacing)*(var(--btn-columns) - 1)))
    }
}

@media(width <= 768px) {
    .toggle {
        flex-basis:calc(100%/3 - (var(--btn-spacing)*(var(--btn-columns) - 1)))
    }
}

@media(width <= 560px) {
    .toggle {
        flex-basis:calc(100%/2 - (var(--btn-spacing)*(var(--btn-columns) - 1)))
    }

    div.all-toggle label>div::after {
        width: 1rem;
    }
}

@media(width <= 479px) {
    .toggle {
        flex-basis:100%
    }
    
    div.all-toggle label>div::after {
        left: 44vw;
    transform: translateX(-50%);
    }
}

/* Waitlist */

.step-controls-container > div[step-data-control="AR"] {
    display: flex;
    flex-flow: column nowrap;
}

div[step-data-control="VB"] .qflow-content, .qflow-content * {
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
}

.qflow-content.additional-verbiage div ol,.qflow-content.additional-verbiage div li {
    padding: 0;
    text-align: left;
    display: block;
}

.qflow-content.additional-verbiage div ol {
    BACKGROUND: #E7F1FA;
    padding: calc(var(--content-padding) * 1.09) var(--content-padding) var(--content-padding) var(--content-padding);
    list-style: disc;
    border-top: 6px solid var(--primary-color);
}

.qflow-content.additional-verbiage div ol::before {
    content: "\e8a3";
    font-family: icon;
    font-size: 2em;
    color: var(--primary-color);
    display: inline-block;
    margin-left: -10px;
    vertical-align: middle;
    margin-bottom: 10px;
}
 div.info-message::before {
    content: "\e8a3";
    font-family: icon;
    font-size: 1.5em;
    color: var(--third-color);
    display: flex;
    justify-content: flex-start;
    justify-content: flex-start;
    margin: 0 1rem 0 0;
    height: 100%;
    align-content: flex-start;
}
.qflow-content.additional-verbiage div li{
    list-style: disc;
    margin-bottom: 15px;
    display: list-item;
    margin-left: var(--content-padding);

}

.waiting-appointment-request-details h2 {
    width: 100%;
}

.appointment-request-buttons {
    width: 51%;
    display: flex;
    place-self: flex-end flex-end;
    margin: auto;
    justify-items: end;
    margin-top: calc(var(--content-padding) * 2);
    margin-right: 15%;
    flex-direction: row;
    justify-content: flex-end;
    gap: 6px;
}

@media screen and (width <= 650px) {
    .appointment-request-buttons {
        width: 100%;
        margin-right: 0%;
    
    }

}

/* == Dropdown toggle == */

/* end of waitlist styles */
.form-group.checkbox {
    display: grid;
    grid-template-columns: auto 2fr;
    justify-content: center;
    place-items: center center;
    padding-left: 0;
    padding-right: 0;
    gap: var(--content-padding);
}

.form-group.checkbox .form-control-input {
    flex-basis: min-content;
    width: auto;
}

.form-group.checkbox input[type="checkbox"] {
    appearance: none;
    font-family: var(--font-family-main);
    color: var(--color-black);
    height: var(--check-size);
    width: var(--check-size);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    position: relative;
    border: var(--check-border);
    border-radius: var(--check-radius);
    background-color: var(--check-bg);
    cursor: pointer;
    transition:
        box-shadow 0.2s,
        var(--mds-transition-medium);
}

.form-group.checkbox input[type="checkbox"]:hover {
    box-shadow:
        0 0 0 1px var(--primary-color),
        rgb(229 234 235 / 25%) 0 2px 5px -1px,
        rgb(0 0 0 / 30%) 0 1px 3px -1px;
}

.form-group.checkbox input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 25%;
    top: 0;
    width: 10px;
    height: 18px;
    display: block;
    opacity: var(--o, 0);
    border: var(--check-checked-color);
    border-top: 0;
    border-left: 0;
    transform: rotate(var(--r, 20deg));
    transition: 0.3s;
}

.form-group.checkbox input[type="checkbox"]:checked {
    --r: 43deg;
    --o: 1;

    background-color: var(--check-checked-bg);
    border: var(--check-checked-border);
    box-shadow: rgb(207 207 207 / 30%) 0 0 8px 0;
}

.form-group.checkbox label {
    flex-grow: 0;
    order: 2;
}

.custom-select {
    position: relative;
}

.custom-select select,
select,
select option {
    appearance: none;
    height: var(--select-height);
    width: 100%;
    font-size: var(--select-text-size);
    padding: var(--select-padding);
    background-color: var(--select-bg-color);
    border: var(--select-border);
    border-radius: var(--select-border-radius);
    color: var(--select-text-color);
    cursor: pointer;
    outline: none;
    box-shadow: var(--select-box-shadow);
}

.custom-select select:focus,
select:focus {
    background: var(--select-focus-bg);
    border-radius: var(--select-border-radius);
    color: var(--select-focus-text-color);
    border: var(--select-focus-border);
}

.custom-select select:hover,select:hover{
    background: var(--select-hover-bg);
    border-radius: 8px 8px 0 0;
    color: var(--select-hover-text-color);
    border-color: var(--select-border-hover);
    outline: unset;
}

.custom-select::after,
select.form-control::after,
select::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 55%;
    right: var(--content-padding);
    transform: translate(0, -50%);
    width: var(--select-arrow-size);
    height: var(--select-arrow-size);
    background-color: var(--select-arrow-color);
    clip-path: var(--select-polygon-path);
}

main#maincontent.CancellationPrompt{
    --select-text-size: var(--input-text-size);
    --select-text-color: var(--color-font);

    /* Appearance */
    --select-bg-color: var(--input-bg);
    --select-border: var(--input-border);
    --select-border-radius: var(--input-radius);
    --select-box-shadow: 0 0 0 0 var(--color-gray-light);
    --select-arrow-size: 18px;
    --select-arrow-color: var(--color-font);
    --select-polygon-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%);

    /* hover */
   --select-hover-bg:var(--color-white);
   --select-hover-text-color:var(--color-font);
   --select-hover-border:var(--input-border);

    /* Layout */
    --select-height: var(--form-height);
    --select-padding: 12px;

    /* Focus State */
    --select-focus-bg: #e3efff;
    --select-focus-text-color: var(--color-font);
    --select-focus-border: 1px solid var(--color-font);
}

select option {
    appearance: none;
    padding: 15px;
}

.pagination_controls {
    display: flex;
    flex-direction: row;
    flex-basis: 99%;
    justify-content: space-between;
}

.pagination_controls > a {
    display: flex;
    flex-basis: auto;
}

.pagination_controls > a.paginate_previous {
    justify-content: flex-start;
    padding: 8px 16px 8px 0;
}

.pagination_controls > a.paginate_next {
    justify-content: flex-end;
    padding: 8px 16px 8px 0;
}

.pagination_controls > a > div {
    display: inline-flex;
    align-items: center;
    font-size: var(--paginate-text-size);
    color: var(--paginate-color);
}

a.paginate_previous div::before {
    content: "\e87b";
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 3px;
    font-family: icon;
    color: var(--paginate-color);
    font-weight: var(--paginate-font-weight);
    box-sizing: border-box;
}

a.paginate_next div::after {
    content: "\e87a";
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 3px;
    font-family: icon;
    color: var(--paginate-color);
    font-weight: var(--paginate-font-weight);
    box-sizing: border-box;
}

.pagination_controls > a > div:hover,
a.paginate_previous div:hover::before,
a.paginate_next div:hover::after {
    color: var(--paginate-color-hover);
    font-weight: var(--paginate-color-hover-font-weight);
    text-decoration: none;
    transition: 0.2s ease;
}

.pagination_controls > a > div:active,
a.paginate_previous div:active::before,
a.paginate_next div:active::after {
    color: var(--paginate-color-active);
    border-color: var(--paginate-color-active);
}

.datetime-grid {
    display: flex;
    flex-flow: row wrap;
    flex-basis: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: var(--day-col-gap);
}

.datetime-grid-day {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-basis: calc((100% - (var(--day-col-gap) * (var(--day-col-number) - 1))) / var(--day-col-number));
    margin-bottom: var(--vert-spacing);
}

.datetime-grid-dayname {
    display: flex;
    place-content: center center;
    text-align: center;
    align-self: center;
    font-size: var(--day-text-size);
    font-weight: var(--day-text-weight);
    color: var(--day-text-color);
    margin-bottom: 6px;
    min-width: 130px;
    max-width: 130px;
    height: 58px;
}

.datetime-grid-periods {
    flex-direction: column;
    border: none;
    border-radius: 5px;
    gap: 8px;
}

.datetime-grid-period {
    background: var(--time-bg);
    flex-direction: column;
    border-radius: 5px;
    padding: 0;
}

.datetime-grid-periodtitle {
    display: flex;
    flex-flow: column nowrap;
    border: 2px solid transparent;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
}

.datetime-grid-periodtitle:hover {
    border: 1px solid #cdcdcd;
    box-shadow:
        rgb(50 50 93 / 25%) 0 13px 27px -5px,
        rgb(0 0 0 / 30%) 0 8px 16px -8px;
}

.datetime-grid-periodtitle:active {
    box-shadow:
        rgb(50 50 93 / 25%) 0 2px 5px -1px,
        rgb(0 0 0 / 30%) 0 1px 3px -1px;
}

.datetime-grid-periodname {
    line-height: 18px;
    margin: 9px 0 3px;
    font-size: var(--period-text-size);
    font-weight: var(--period-text-weight);
}

.datetime-grid-timescount {
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    background: var(--color-white);
    color: var(--period-text-color);
    padding: 3px 5px;
    margin: 6px 0;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    line-height: 15px;
}

.datetime-grid-timescount::after {
    display: inline;
}

.datetime-grid-timescount.no-availability {
    box-shadow: none;
    border-width: 0;
    background: transparent;
    opacity: 0.75;
}

.datetime-grid-times {
    display: flex;
    justify-content: flex-start;
    flex-grow: 0;
    flex-shrink: 1;
    margin-top: 5px;
    box-sizing: border-box;
    gap: var(--time-spacing);
    padding: var(--time-spacing);
    overflow: hidden;
    transition: opacity 0.6s ease;
}

.datetime-grid-times .no-availability {
    max-height: 0;
    overflow: hidden;
}

.datetime-time {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 calc((100% - (var(--time-spacing) * (var(--time-col-number) - 1))) / var(--time-col-number));
    padding: 6px;
    min-height: 48px;
    height: var(--time-height);
    max-height: var(--time-height);
    font-size: var(--time-text-size);
    font-weight: var(--time-text-weight);
    color: var(--time-color);
    line-height: 20px;
    background: var(--datetime-bg);
    box-shadow: var(--time-shadow);
    white-space: nowrap;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.75s ease;
    border-radius: 5px;
    border: var(--time-border);
}

.datetime-time:hover,
.datetime-time:focus-visible {
    border: var(--time-border-hover);
    background: var(--time-bg-hover);
    color: var(--time-color-hover);
}

.datetime-time:active,
.datetime-time.list-item-selected {
    background: var(--time-bg-active);
    color: var(--time-color-active);
    border: var(--time-border-active);
}

div.datetime-grid-times.collapsed {
    display: none;
    gap: 0;
    padding: 0;
}

.datetime-grid-times.collapsed .datetime-time {
    height: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
}

.datetime-grid-periodname {
    min-width: 96px;
    padding: 8px;
    margin: 5px 0;
}

.datetime-grid-timescount {
    min-width: 102px;
}

.datetime-time {
    flex-grow: 0;
}

@media all and (width >= 768px) {
    .datetime-grid-times {
        justify-content: center;
        padding-top: calc(var(--time-spacing) * 0.5);
    }

    .datetime-time {
        max-width: 110px;
    }
}

@media all and (width <= 767px) {
    .datetime-grid-dayname {
        align-self: flex-start;
    }

    .datetime-grid-periodtitle {
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        justify-content: flex-start;
    }

    .datetime-time {
        flex-basis: calc((16.667%) - (var(--time-spacing) * 0.8333));
    }

    .datetime-grid-times {
        flex-flow: wrap;
    }

    .datetime-grid-periodname {
        justify-content: flex-start;
    }
}

@media all and (width <= 659px) {
    .datetime-time {
        flex-basis: calc((20%) - (var(--time-spacing) * 0.8));
    }
}

@media all and (width <= 539px) {
    .datetime-time {
        flex-basis: calc((25%) - (var(--time-spacing) * 0.75));
    }
}

@media all and (width <= 419px) {
    .datetime-time {
        flex-basis: calc((33.333%) - (var(--time-spacing) * 0.6667));
    }
}

@media all and (width <= 319px) {
    .datetime-time {
        flex-basis: calc((50%) - (var(--time-spacing) * 0.5));
    }
}

@media all and (width <= 239px) {
    .datetime-time {
        flex-basis: calc((100%) - (var(--time-spacing) * 1));
        max-width: 140px;
    }

    .datetime-grid-times {
        justify-content: center;
    }

    .datetime-grid-periodtitle {
        flex-direction: column;
        align-self: center;
    }

    .datetime-grid-periodname {
        justify-content: center;
        padding: 6px 6px 0;
    }
}

.datetime-grid-dayname br {
    display: none;
}

a:focus-visible,
div[role="radio"]:focus-visible,
input[type="submit"]:focus-visible,
div[role="button"]:focus-visible,
input[type="text"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="checkbox"]:focus-visible {
    color: currentcolor;
    color: rgb(0 0 0);
    outline: 1px solid rgb(232 235 238);;
    background: #fff;
    outline-offset: 0;
    box-shadow: 0 0 3px 1px rgb(23 165 219 / 60%);
}

button:focus-visible,
div[role="button"]:focus-visible {
    font-weight: calc(var(--btn-text-weight) + 50);
    box-shadow: 0 0 9px 3px rgb(140 218 255);
}

div[data-stepcontrolkey="SVCATTRSEL"] div.form-control {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.svcattr-group-radio {
    display: flex;
    flex-direction: column;
}

.svcattr-group fieldset {
    padding-bottom: 0;
    display: flex;
    flex-direction: row;
}

.svcattr-group-checkbox {
    display: flex;
    flex-flow: row nowrap;
}

.svcattr-group-checkbox fieldset.svcattr-checkboxcontainer {
    display: flex;
}

.svcattr-group-checkbox label.svcattr-group-label {
    flex-basis: min-content;
}

.svcattr-group {
    margin-bottom: 20px;
}

div[data-stepcontrolkey="SVCATTRLIST"] {
    display: none;
}

.ContactInformationPage dl {
    align-self: center;
    margin-bottom: 25px;
    max-width: var(--main-width);
    width: 100%;
}

div[data-stepcontrolkey="CNRS"] label,
div[data-stepcontrolkey="COMMENTS"] label {
    padding-bottom: 0;
    padding-top: var(--vert-spacing);
}
.stepcontrol-comments,
.stepcontrol-cnrs,
div[data-stepcontrolkey="COMMENTS"],
div[data-stepcontrolkey="CNRS"] {
gap:10px;
margin-top: 1rem;
}
.divider {
    position: relative;
    inset: 0;
    width: 100%;
    height: 2px;
    background: var(--color-gray-medium);
    z-index: 0;
    transform: skewY(0deg);
    transform-origin: top right;
    margin: 5px;
}

.progress-container-wrapper {
    display: flex;
    flex-basis: auto;
    width: 100%;
    padding: var(--content-padding);
    padding-top: calc(var(--nav-height) / 2.5);
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1;
    background-color: var(--summary-bg);
    justify-content: center;
    align-items: center;
}

body.summary-display.show .progress-container-wrapper {
    padding-bottom: 0;
}

.hidden,
p:empty:not(:blank),p:empty ,.progress-container-wrapper:empty, .progress-container-wrapper:empty:not(:blank),.case-container.QueueManagementIsCalendar p:empty {
    display: none;
    padding: 0;
    margin: 0;
}

.progress-bar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.progress-container {
    display: flex;
    position: relative;
    max-width: var(--progress-bar-max-width);
    width: calc(980px + (var(--content-padding) * 2));
    margin-bottom: 5px;
    justify-content: space-between;
    counter-reset: step;
}

.progress-description-container {
    display: flex;
    margin-top: var(--descr_progress-margin-top);
    font-size: var(--descr_progress-font-size);
    justify-content: var(--descr_progress-justify-content);
    color: var(--descr_progress-color);
    font-weight: var(--descr_progress-font-weight);
    max-width: 100%;
    width: calc(980px + (var(--content-padding) * 2));
}

.progress-container::before {
    position: absolute;
    top: 50%;
    left: 0;
    height: var(--progress-bar-height);
    width: 100%;
    background-color: var(--progress-bar-empty-bg);
    box-shadow: var(--progress-bar-empty-box-shadow);
    transform: translateY(-50%);
    z-index: 1;
    content: "";
}

.progress-underlay {
    position: absolute;
    top: 50%;
    left: 0;
    height: var(--progress-bar-height);
    width: 0%;
    max-width: 100%;
    background: var(--progress-bar-fill-bg);
    transform: translateY(-50%);
    z-index: 2;
    transition: 0.4s ease;
}

.circle {
    height: var(--progress-bar-circle-height);
    width: var(--progress-bar-circle-width);
    aspect-ratio: 1/1;
    background: var(--progress-bar-circle-bg);
    color: var(--progress-bar-circle-number);
    border: var(--progress-bar-circle-border);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: 0.4s ease;
    display: var(--circle-display);
}

.circle::before {
    counter-increment: step;
    content: counter(step);
}

.circle.active {
    border-color: var(--progress-bar-fill-bg);
    background-color: var(--progress-bar-fill-bg);
    color: var(--progress-bar-text-color-active);
}

div.MapView {
    flex-basis: 100%;
}

div.MapView.show {
    opacity: 1;
    z-index: 1000;
    margin: 0.625rem 0 0;
    transition: opacity 0.32s linear;
}

div#map {
    border: var(--map-border);
    box-sizing: border-box;
    width: var(--map-width);
    height: 0;
    opacity: 0;
    border-radius: var(--map-border-radius);
}

div.MapView.show div#map {
    opacity: 1;
    height: var(--map-height);
    max-height: var(--map-max-height);
    box-shadow: 1px 3px 6px rgb(0 0 0 / 13%);
}

a.kb-note:not(:focus, :focus-visible) {
    height: 1px;
    width: 1px;
    overflow: hidden;
    margin: 0 -1px -1px 0;
}

a.kb-note:focus-visible {
    display: flex;
    flex: auto;
    border: 0 solid var(--secondary-color);
    padding: 5px;
}

.view-switcher {
    width:auto;
    margin-bottom: 10px;
}

.sort-filter-description-container {
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-left: 5px;
}

.sort-filter-description-container.show {
    text-align: center;
    color: var(--color-font);
    margin: 10px;
    flex-basis: 100%;
}

.sort-filter-description-container.show a {
    font-weight: 500;
    text-decoration: underline;
    margin: 0 5px;
}

.sort-filter-description-container.hide a:hover {
    border: unset;
    background-color: rgb(235 235 235 / 80%);
}

div.leaflet-bar a,
.leaflet-control-layers-toggle {
    margin: 0;
    padding: 0;
    border: unset;
    border-radius: unset;
    width: auto;
}
div.leaflet-bar{
    min-width: 150px;
    display: flex;
    justify-content: flex-start;
    justify-self: flex-start;
    align-self: flex-start;
    left: auto;
    margin: auto;
}
.leaflet-popup-content-wrapper {
    padding: 0 !important;
    text-align: left;
    border-radius: var(--popup-wrapper-border-radius);
    width: auto;
}

.leaflet-popup-content {
    width: 150px !important;
    height: 80px;
}

div.leaflet-popup-content {
    height: auto;
    margin: 0;
    width: var(--popup-content-width);
    text-align: center;
    line-height: 1.25;
}

.leaflet-popup-tip-container {
    top: 100%;
    transform: scaleX(0.65);
}

.map-popup-content {
    flex-direction: column;
    align-items: center;
    padding: var(--map-popup-padding);
    margin: var(--map-popup-margin);
    margin-top: 10px;
    font-size: var(--map-popup-font-size);
    gap: var(--map-popup-gap);
}

.iw-custom-popup {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border-radius: 2px 2px 0 0;
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    color: #000;
}

.map-popup-content-item.show-when-distance-available {
    align-items: center;
    justify-content: center;
    font-family: var(--map-distance-font);
    color: var(--map-distance-color);
    font-weight: var(--map-distance-weight);
}

.map-popup-content-item.unit-name {
    font-weight: 700;
    font-size: 1rem;
}

.map-popup-content-item.address {
    display: flex;
    font-size: 0.8125rem;
    font-weight: 500;
}

.unit-no-availability {
    padding: var(--map-unit-no-availability-padding);
    color: var(--map-unit-no-availability-color);
    font-weight: var(--map-unit-no-availability-font-weight);
    font-size: var(--label-size);
}

.getinline {
    flex-basis: auto;
    flex-flow: column nowrap;
    place-content: stretch flex-end;
    align-items: stretch;
    padding: 5px 10px 7px;
    border-radius: 0 0 10px 10px;
    border-color: var(--getinline-pouptip-bg);
    line-height: 1.15 !important;
    color: var(--map-getinline-popup-color);
    background: var(--getinline-pouptip-bg);
    font-size: var(--map-getinline-popup-font-size);
    font-weight: var(--map-getinline-popup-font-weight);
    position: unset !important;
}

div.leaflet-popup-tip,
.getinline {
    background-color: var(--getinline-pouptip-bg);
}
div.leaflet-popup-tip{
    width: 20px;
}
div.leaflet-popup-tip:hover,
.getinline:hover {
    background: var(--getinline-pouptip-hover);

    color: var(--map-getinline-popup-color-hover);
    border-radius: 0 0 10px 10px;
    border: unset;
}

.getinline:hover ~ .leaflet-popup-tip,
.leaflet-popup-tip:hover ~ .getinline {
    background-color: var(--getinline-pouptip-hover);
    color: var(--map-getinline-popup-color-hover);
}

.getinline:active,
div.leaflet-popup-tip .active {
    background-color: var(--getinline-pouptip-active);
    color: var(--map-getinline-popup-color-active);
}

.leaflet-marker-icon {
    width: var(--map-pin-width) !important;
    height: auto !important;
    outline: unset !important;
}

svg {
    outline: unset !important;
    border: unset !important;
}

svg .map-marker:hover {
    fill: var(--map-marker-fill-hover);
    box-shadow: rgb(149 157 165 / 20%) 0 8px 24px;
}

svg .map-marker:active {
    fill: var(--map-marker-fill-active);
    box-shadow: rgb(149 157 165 / 20%) 0 8px 24px;
}

svg.MapMarker.no-availability {
    filter: invert(44%) sepia(9%) saturate(3%) hue-rotate(5deg) brightness(103%) contrast(96%);
}

path.map-marker:focus {
    border: unset;
    outline: unset;
    fill: #bc202e;
}

.buttons-list-container button:disabled {
    border: 2px dotted rgb(255/34%);
}

div[role="button"].list-view,
div[role="button"].map-view {
    font-family: var(--map-toggle-inactive-font);
    color: var(--color-gray-deep);
    background: var(--map-toggle-inactive-background);
    padding: var(--map-toggle-inactive-padding);
    border: var(--map-toggle-inactive-border);
    border-radius: var(--map-toggle-inactive-border-radius);
    cursor: pointer;
    flex-basis:fit-content ;
    max-height: 41px;
}

div[role="button"].list-view.show,
div[role="button"].map-view.show {
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
    background: var(--map-toggle-active-background);
    box-shadow: rgb(0 0 0 / 16%) 0 1px 4px;
    padding: var(--map-toggle-active-padding);
    border-radius: unset;
    border: 2px solid var(--map-toggle-active-background);
    
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.search-control-container.default .search-icon-container .cancel-icon,
.search-control-container.default .search-icon-container .cancel-action,
.search-control-container.default .search-icon-container .loading-icon,
.search-control-container.in-use .search-icon-container .loading-icon,
.search-control-container.in-use .search-icon-container .search-icon,
.search-control-container.in-use .search-icon-container .search-action,
.search-control-container.loading .search-icon-container .search-icon,
.search-control-container.loading .search-icon-container .search-action,
.search-control-container.loading .search-icon-container .cancel-icon,
.search-control-container.loading .search-icon-container .cancel-action,
.search-control-container.typing .search-icon-container .cancel-action,
.search-control-container.typing .search-icon-container .cancel-icon,
.search-control-container.typing .search-icon-container .loading-icon {
    display: none;
}

.search-control-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 2;
}

.search-icon-container a[role="button"] {
    position: absolute;
    right: 15px;
    top: 9px;
    height: 25px;
    width: auto;
    background-color: transparent;
    padding: 0;
    border: 0;
}

.search-input-container {
    position: relative;
}

input.search-input {
    width: 100%;
    padding: 10px;
    border-radius: 30px;
    box-sizing: border-box;
    background-color: unset;
    border: 2px solid var(--color-gray-medium);
    padding-left: 30px;
}

input.search-input:hover {
    border: 2px solid var(--color-gray-dark);
    box-shadow: rgb(99 99 99 / 20%) 0 2px 8px 0;
}

.search-icon-container img {
    width: 22px;
    height: 22px;
}

.search-icon-container a {
    width: 100%;
    height: 100%;
    display: block;
}

.search-icon-container img {
    opacity: 0.5;
}

.cancel-action:hover img,
.search-action:hover img {
    opacity: 1;
    cursor: pointer;
}

.loading-icon {
    animation: spin 2s linear infinite;
    animation-name: loading-spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: steps(8);
}

#map-canvas {
    margin: 0;
    padding: 0;
    height: 400px;
    max-width: none;
}

#map-canvas img {
    max-width: none !important;
}

.gm-style-iw {
    width: 230px !important;
    top: 15px !important;
    background-color: var(--color-white);
    box-shadow: 0 1px 6px rgb(0 0 0 / 60%);
    border: 1px solid rgb(0 0 0 / 60%);
    border-radius: 2px;
}

#iw-container {
    margin: 0;
}

.iw-custom-popup {
    font-family: var(--font-family-second);
    font-size: 18px;
    font-weight: 900;
    color: var(--color-font);
    margin: 0 auto;
    text-align: center;
    border-radius: 2px 2px 0 0;
}

.iw-title {
    font-family: var(--font-family-second);
    font-size: 18px;
    font-weight: 900;
    color: #000;
    margin: 0 auto;
    text-align: center;
    border-radius: 2px 2px 0 0;
}

#iw-container .iw-content {
    font-size: 13px;
    font-weight: 400;
}

.iw-content img {
    width: 100% !important;
    float: right;
}

.iw-subTitle {
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}

.iw-bottom-gradient {
    position: absolute;
    width: 326px;
    height: 25px;
    right: 18px;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 100%) 100%);
    background: linear-gradient(top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 100%) 100%);
    background: linear-gradient(top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 100%) 100%);
    background: linear-gradient(top, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 100%) 100%);
}

.getinline:hover,
.getinline:active {
    cursor: pointer;
}

.gm-style .gm-style-iw-c {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%);
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 7px 1px rgb(0 0 0 / 30%);
}

.gm-style-iw div {
    display: table-row-group !important;
}

.gm-style .gm-style-iw-t::after {
    background: #fff;
    box-shadow: -2px 2px 2px 0 rgb(178 178 178 / 40%);
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 15px;
    display: none;
}

.search-results-container.hide {
    display: none;
}

.search-results-container.show {
    display: flex;
    z-index: 2000;
    padding: var(--content-padding);
}

.search-results-container {
    backdrop-filter: blur(5px);
    background-color: var(--color-white);
    margin-top: 1rem;
    width: 100%;
    padding: 2px 5px;
    box-sizing: border-box;
    box-shadow: 2px 2px 4px var(--color-black);
}

.loading-results-message {
    display: flex;
    flex-direction: row;
    width: 100%;
}

img.loading-icon {
    margin: 10px;
    animation: rotate 1.3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.loading-results-message .loading-icon {
    width: 20px;
    height: 20px;
    display: block;
    opacity: 0.5;
}

.loading-results-message p {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 20px;
}

.search-results-container h2 {
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 1em;
}

.search-result {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    padding: calc(var(--content-padding) - 5px);
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

.search-result .unit-label-container,
.search-result .geocoding-label-container {
    width: 80%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.geocoding-label {
    max-width: calc((100% - 210px));
}

.search-result .unit-label {
    display: flex;
}

.search-result .view-in-map.hide {
    display: none;
}

.search-result .view-in-map-container {
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.view-in-map-icon {
    height: 22px;
    width: 22px;
    filter: invert(1);
}

.search-result a.view-in-map {
    display: flex;
    width: 25px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-color-hover);
    box-sizing: border-box;
    position: relative;
    padding: 16px;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    border: 0;
    outline: none;
}

.geocoding.search-result:hover {
    background-color: rgb(235 235 235 / 87.7%);
    box-shadow: rgb(0 0 0 / 16%) 0 1px 4px;
}

.search-result a.view-in-map:hover,
.search-result a.view-in-map:active,
.search-result a.view-in-map:focus-visible {
    background-color: var(--color-black);
    cursor: pointer;
}

.search-result a.view-in-map:hover img.view-in-map-icon,
.search-result a.view-in-map:active img.view-in-map-icon,
.search-result a.view-in-map:focus-visible img.view-in-map-icon {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.search-result .distance-container {
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.find-nearest-action {
    letter-spacing: 0.3px;
    min-width: 166.867px;
}

.search-result .select-unit-action,
.search-result .find-nearest-action {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.search-result .select-unit-action::after,
.search-result .find-nearest-action::after {
    display: inline;
    align-items: center;
    content: "";
    margin-right: 2px;
    margin-left: 2px;
    height: 7px;
    width: 7px;
    border: 2px solid var(--color-black);
    border-width: 0 2px 2px 0;
    rotate: -45deg;
    border-color: inherit;
    position: relative;
    top: 1px;
}

.search-result .unit-label {
    display: flex;
    justify-content: flex-start;
    max-width: 60%;
    text-align: left;
}

.unit-search-results-container.results {
    background-color: #dedede33;
    width: 100%;
    box-shadow: rgb(0 0 0 / 16%) 0 1px 4px;
    padding: calc(var(--content-padding) - 5px) 0;
}

.unit-search-results-container.results .search-result {
    border-bottom: none;
}

.StorageMap #ListView button.hide,
.StorageMap #ListView div.hide {
    display: none;
}

button.unit-with-distance-button.show div.unit-distance.hide {
    display: none;
}

div.main-button-text {
    display: flex;
    flex-direction: column;
}

div.main-button-text span.subtitle {
    font-size: var(--btn-subtitle-size);
    font-weight: var(--btn-subtitle-weight);
}

button.unit-with-distance-button.show {
    display: flex;
    flex-flow: row nowrap;
}

button.unit-with-distance-button.show > div.main-button-text {
    display: flex;
    flex-flow: column nowrap;
    flex-grow: 2;
    align-items: center;
    gap: 2px;
}

@media all and (width <= 806px) {
    .unit-search-results-container.results {
        width: 100%;
    }
}

@media all and (width <= 720px) {
    .search-results-container.show {
        padding: 0;
    }

    .geocoding-label {
        max-width: unset;
    }

    .search-result .unit-label {
        max-width: unset;
    }

    .search-result .unit-label-container,
    .search-result .geocoding-label-container {
        width: 60%;
        flex-direction: column;
        align-items: baseline;
    }

    .search-result .select-unit-action,
    .search-result .find-nearest-action {
        font-weight: 500;
        padding: 5px 0;
        text-decoration-line: overline;
        text-decoration-style: dotted;
    }

    .search-results-container h2 {
        margin-top: 2px;
        margin-bottom: 2px;
        padding: 5px;
        font-size: 1.2em;
    }

    .unit-search-results-container.results {
        width: 100%;
    }

    .search-result {
        width: 100%;
        justify-content: flex-start;
        padding: 5px 0 10px 5px;
    }

    .search-result .select-unit-action,
    .search-result .find-nearest-action {
        font-weight: 500;
        padding: 5px 0;
        align-items: center;
        text-decoration-line: overline;
        text-decoration-style: dotted;
    }
}

@media all and (width <= 400px) {
    .search-result {
        justify-content: space-around;
    }

    .search-result .distance-container {
        flex-direction: column;
        width: 100%;
        align-items: end;
        margin-right: 10px;
    }
}

[data-stepcontrolkey="BKER"] div.form-group:nth-of-type(1),
[data-stepcontrolkey="BKER"] div.form-group:nth-of-type(2) {
    flex-basis: 50%;
}

.row {
    display: inline-flex;
    gap: var(--content-padding);
    flex-basis: 100%;
    flex-wrap: nowrap;
}

@media all and (width <= 479px) {
    [data-stepcontrolkey="BKER"] div.form-group:nth-of-type(1),
    [data-stepcontrolkey="BKER"] div.form-group:nth-of-type(2) {
        flex-basis: 100%;
    }

    .row {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    main.MyCases .case-buttons {
        max-width: 100%;
    }
}

p.page-subtitle {
    padding: 0 var(--content-padding);
}

main.MyCases .case-buttons {
    width: 100%;
    max-width: 50%;
}

main.CustomerSearchPage div.step-controls-container.customer-form > div {
    width: 100%;
    max-width: 100%;
}

.AppointmentTypeSelection,
main.UnitSelection {
    --btn-max-width: min(100%, 330px);
}

main.UnitSelection .buttons-list-container button {
    flex-basis: calc(100% / 2 - (var(--btn-spacing) * (var(--btn-columns) - 1)));
}

main.ReviewPage h1.page-title {
    margin-top: 0;
}

main.ConfirmationPage .site-subtitle {
    line-height: 3;
}
main.ConfirmationPage .subtitle-text, .review-container .subtitle-text {
    display: inline-block;
}
main.ConfirmationPage .subtitle-text p,.review-container .subtitle-text p {
    display: inline;
}
.bullet-list {
    list-style: none;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.bullet-list li {
    display: inline-block;
    position: relative;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.bullet-list li::before {
    content: "•";
    position: absolute;
    left: -1.5rem;
    color: var(--color-alert); 
    font-size: 1.2em;
}

.CustomerSearchMessage .spacer {
    flex-grow: 0;
}

.CustomerSearchMessage p {
    font-size: 1.4375rem;
    margin: 0;
}

.CustomerSearchPage p.step-control-title {
    font-size: 1.125rem;
}
.CancellationConfirmation h2 {
    padding: 0;
}
div.case-container.QueueManagementIsCalendar p{ 
    display: none;

}
main.HomePage .buttons-list-container{
    width: calc(100% - (var(--content-padding) * 2));
}

main.CancellationPrompt form div > div > div {
    width: 100%;
}

/* ==========================
   Radio Group
   ========================== */
div[role="radiogroup"] {
gap: var(--btn-spacing);
display: flex;
justify-content: center;
    width: 100%;
}
div[role="radiogroup"] button{
    max-width: 350px;
}
span.field-validation-success {
    min-height: 50px;
    width: 100%;
    background: #f7fbff;
    margin: 15px 0;
}
main.LanguageSelection .step-controls-container>div {
    justify-content: center;
    gap: var(--btn-spacing);

}
span.highlight {
    color: #cf1111;
}
div.no-break {
        display: flow;
}
div.no-break p {
    display: flow;
}
div.no-break p:nth-of-type(1) {
  margin: 0;
  margin-top: 6px;
  padding-bottom:6px ;
}
div.no-break p:nth-of-type(2) {
  margin: 0;
  padding-bottom:30px ;
}