@import url('https://fonts.googleapis.com/css2?family=Work+Sans: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');


/*#region Core Html Classes */
/*-----------------------------------------------------------*/
html {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--theme-font-family);
    font-weight: 600;
    font-size: 14pt;
    background: var(--theme-body-background-color);
    color: var(--theme-body-text-color);
    padding-bottom: 60px;
    overflow: overlay;
}

h1 {
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 54px;
}

h2 {
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 42px;
}

h3 {
    font-family: var(--theme-font-family);
    font-weight: 600;
    font-size: 24px;
}

h4 {
    font-family: var(--theme-font-family);
    font-weight: 500;
    font-size: 24px;
}

h5 {
    font-family: var(--theme-font-family);
    font-weight: 700;
    font-size: 18px;
}

label {
    font-family: var(--theme-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 120%;
    text-transform: var(--theme-label-text-transform);
    color: var(--theme-label-text-color);
}

.header {
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 100;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    background-color: var(--theme-global-footer-color);
}

/*Hide Numeric input field arrows for picking value */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/*-------------------------------------------------*/

/* Scrollbar style */
/* used for all scrollbars including dropdowns */
::-webkit-scrollbar {
    width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: var(--theme-scrollbar-color);
    border-radius: 30px;
    border: 5px solid transparent;
    background-clip: padding-box;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--theme-scrollbar-color);
        border-radius: 30px;
        border: 4px solid transparent;
        background-clip: padding-box;
    }


/*#endregion */

/*#region BootStrap Overrides */
/*-----------------------------------------------------------*/

/*#region Cards */
.card {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    height: inherit;
    background-color: var(--theme-card-background-color);
    color: var(--theme-card-text-color);
}

.card-body {
    background: var(--theme-card-background-color);
    border-radius: 10px;
}
/*#endregion */


/*#region Modals */

.modal-content {
    color: var(--theme-card-text-color);
}
/*#endregion */


/*#region Buttons */
.btn-primary {
    width: inherit;
    padding: 0.8125em 0.875em;
    font-weight: 600;
    border-radius: 1.875rem;
    border-width: initial;
    font-weight: 600;
    font-size: 0.875em;
    line-height: 120%;
    letter-spacing: 0.01em;
    border: 2px solid var(--theme-btn-primary-color);
    background-color: var(--theme-btn-primary-color);
    --bs-btn-color: var(--theme-btn-primary-text-color);
}

    .btn-primary:hover {
        border-color: var(--theme-btn-primary-hover-color);
        background-color: var(--theme-btn-primary-hover-color);
    }

    .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
        border-color: var(--theme-btn-primary-hover-color);
        background-color: var(--theme-btn-primary-hover-color);
    }

    .btn-primary:disabled, .btn-primary.disabled {
        border-color: var(--theme-btn-primary-disabled-color);
        background-color: var(--theme-btn-primary-disabled-color);
        font-style: italic;
    }

    .btn-primary:window-inactive {
        border-color: var(--theme-btn-primary-disabled-color);
        background-color: var(--theme-btn-primary-disabled-color);
        font-style: italic;
    }


.btn-secondary {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.8125em 0.875em;
    width: inherit;
    height: inherit;
    border: 2px solid var(--theme-btn-secondary-color);
    border-radius: 1.875em;
    font-family: var(--theme-font-family);
    font-style: normal;
    font-weight: 600;
    font-size: 0.875em;
    line-height: 120%;
    background-color: transparent;
    letter-spacing: 0.01em;
    color: var(--theme-btn-secondary-color);
}

    .btn-secondary:hover {
        background-color: transparent;
        border-color: var(--theme-btn-secondary-hover-color);
        color: var(--theme-btn-secondary-hover-color);
    }

    .btn-secondary:disabled, .btn-secondary.disabled {
        border-color: var(--theme-btn-secondary-disabled-color);
        color: var(--theme-btn-secondary-disabled-color);
        background-color: transparent;
        font-style: italic;
    }
/*#endregion */


/*#region NavBar */
.navbar-toggler:focus {
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) var(--theme-btn-primary-hover-color);
}

.navbar-nav .nav-link.active {
    color: var(--theme-primary-color);
    text-shadow: -.25px -.25px 0 var(--theme-primary-color), .25px .25px var(--theme-primary-color)
}

.nav-link {
    color: var(--theme-primary-color);
    font-weight: 500;
    font-size: 18px;
}

    .nav-link:hover, .nav-link:focus {
        color: var(--theme-primary-color);
        text-shadow: -.25px -.25px 0 var(--theme-primary-color), .25px .25px var(--theme-primary-color);
        font-size: 18px;
    }

/*#endregion */


/*#region Links */
/* Marked as !Important for now forced to do this based on Boostrap 5.2.3s
    SCSS _colored_links implementation. They are forcing !important there
    to use the bootstrap defined colors, which are in a SCSS color map
    Once we upgrade to bootstrap 5.3 we can revamp out themeing to use the
    much more convenient bootstrap provided CSS variables to set this 
    coloration in :root like we are doing for our current Theme CSS variable model
    So leaving this as a TODO in v5.3 for now
*/
.link-primary {
    color: var(--theme-contact-us-link-color) !important;
}

.link-hero {
    color: var(--theme-hero-text-color);
}

    .link-hero:hover, .link-hero:focus {
        color: var(--theme-hero-link-hover) !important;
        text-decoration-line: none;
    }

.link-policy-footer {
     color: white;
}

    .link-policy-footer:hover, .link-policy-footer:focus {
            color: var(--theme-hero-link-hover) !important;
            text-decoration-line: none;
        }

.link-light {
    color: white;
}

    .link-primary:hover, .link-primary:focus, .link-light:hover, .link-light:focus  {
        color: var(--theme-secondary-color) !important;
        text-decoration-line: none;
    }

    .link-primary-disabled, .link-light-disabled, .link-hero-disabled {
        color: var(--theme-link-disabled-color) !important;
        font-style: italic;
        pointer-events: none;
    }

/*#endregion */


/*#region Checkbox, Radios and Switches */
.form-check-inline {
    padding: 0rem;
    margin-right: 0rem;
}

.form-check {
    padding-left: calc(var(--bs-gutter-x) * .5);
}

.form-check-label {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 0.875em;
    line-height: 120%;
    color: var(--theme-primary-color);
    text-transform: none;
    margin-left: 0.375rem;
}

.form-check-label-body {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 0.875em;
    line-height: 120%;
    color: var(--theme-body-text-color);
    text-transform: none;
    margin-left: 0.375rem;
}

.form-check input:checked + label {
    font-weight: 600;
}

.form-check-input[type="checkbox"] {
    appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    color: var(--theme-label-text-color);
    width: 1.5em;
    height: 1.5em;
    border: 2px solid var(--theme-label-text-color);
    display: grid;
    place-content: center;
    border-radius: 0.1875em;
}

.form-check-input[type="radio"] {
    appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    background-image: none;
    color: var(--theme-label-text-color);
    width: 1.5em;
    height: 1.5em;
    border: 2px solid var(--theme-label-text-color);
    display: grid;
    place-content: center;
    border-radius: 50%;
}

    .form-check-input[type="radio"]::before {
        border-radius: inherit;
    }

.form-check-input::before {
    content: "";
    width: 1em;
    height: 1em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--theme-btn-secondary-color);
}

.form-check-input:checked::before {
    transform: scale(1);
}

.form-check-input:focus {
    background-image: none;
    box-shadow: none;
}

.form-switch {
    padding-left: 2.5em;
}

    .form-switch .form-check-input {
        width: 2.5em;
        height: 1.5em;
        margin-left: -2.5em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white' /%3e%3c/svg%3e");
        background-position: left center;
        /*border-radius: 2em;*/
        transition: background-position 0.15s ease-in-out;
        background-color: var(--theme-label-text-color);
        border-radius: 30px;
        border: none;
    }

@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input {
        transition: none;
    }
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--theme-primary-color);
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.form-switch .form-check-input::before {
    box-shadow: none;
}

.form-switch .form-check-input:checked::before {
    box-shadow: none;
}

/*#endregion */


/*#region Input Fields and Form Controls */
.form-control {
    height: 2.75rem;
    border-radius: 0.1875rem;
    border-top-right-radius: 0.1875rem !important;
    border-bottom-right-radius: 0.1875rem !important;
    border-color: var(--theme-input-border-color);
    background: var(--theme-input-background-color);
    font-family: var(--theme-font-family);
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 120%;
    font-feature-settings: 'zero' on;
}

    .form-control:focus {
        border: 2px solid var(--theme-primary-color);
        box-shadow: none;
    }

    .form-control:disabled {
        background: var(--theme-input-disabled-background-color);
        border: 1px solid var(--theme-input-disabled-border-color);
        font-style: italic;
        font-weight: 400;
        color: var(--theme-input-disabled-text-color);
    }

    .form-control:read-only {
        background: var(--theme-input-disabled-background-color);
        border: 1px solid var(--theme-input-disabled-border-color);
        color: var(--theme-input-disabled-text-color);
    }

.form-select {
    height: 2.75rem;
    border-radius: 0.1875rem;
    border-top-right-radius: 0.1875rem !important;
    border-bottom-right-radius: 0.1875rem !important;
    border-color: var(--theme-input-border-color);
    font-family: var(--theme-font-family);
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 120%;
}

    .form-select:focus {
        border: 2px solid var(--theme-primary-color);
        box-shadow: none;
    }

    .form-select:disabled {
        background: var(--theme-input-disabled-background-color);
        border: 1px solid var(--theme-input-disabled-border-color);
        font-style: italic;
        font-weight: 400;
        color: var(--theme-input-disabled-text-color);
    }

/* Input field icon positioning */
.input-group > img {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    right: 0.75rem;
    top: 0.75rem;
}

.input-group > input {
    padding-right: 2.25rem;
}
/*#endregion */


/*#region Date picker icon styling */
input[type="date" i]::-webkit-calendar-picker-indicator {
    background-image: url(../images/icons/ui/calendar.svg);
    filter: var(--theme-input-icon-color-filter);
    width: 1.25rem;
    height: 1.25rem;
    padding: 0px;
}

input[type=date]::-webkit-calendar-picker-indicator:hover {
    filter: none;
}
/*#endregion */


/*#region Error Message */
.input-validation-error {
    border-color: #DD5F5F;
}

.text-danger {
    display: flex;
    height: auto;
    margin-top: 0.625rem;
    font-family: var(--theme-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 140%;
    background-image: url('../images/icons/ui/alert red.svg');
    background-repeat: no-repeat;
    background-size: 1.125rem 1.125rem;
    background-position: left center;
    padding-left: 1.5rem;
}

/*#endregion */


/*#region Modal */
.modal-title {
    display: inline-flex;
    /* align-content: center; */
    /* justify-content: center; */
    align-items: center;
    gap: 20px;
    font-weight: 600;
    font-size: 28px;
}

.modal-header {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

.modal-bg-primary {
    background-color: var(--theme-primary-color);
}
/*#endregion */


.mb-6 {
    margin-bottom: 6.25rem;
}

.text-muted {
    /*have to use !important here since bootstrap uses it in there scss*/
    color: var(--theme-muted-text-color)!important;
}

/*#region List Group*/
.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--theme-list-group-text-color);
    font-weight: 400;
}

    .list-group .list-group-active {
        --bs-list-group-active-color: black;
        --bs-list-group-active-bg: transparent;
        --bs-list-group-active-border-color: var(--bs-list-group-border-color);
        border-left-width: 0.25rem;
        border-left-color: var(--theme-list-selected-border-color);
        font-weight: 600;
        color: var(--theme-list-selected-text-color);
    }

.list-group-item:hover {
    color: var(--theme-list-selected-text-color);
    font-weight: 600;
}
/*#endregion */


/*#region TODO Figure out why bootstrap css variables are not working for these*/
/*.tooltip {
    --bs-tooltip-bg: var(--theme-primary-color);
}

.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: #eb3434;
    --bs-pagination-bg: #eb3434;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #eb3434;
    --bs-pagination-border-radius: 0.375rem;
    --bs-pagination-hover-color: #eb3434;
    --bs-pagination-hover-bg: #eb3434;
    --bs-pagination-hover-border-color: #eb3434;
    --bs-pagination-focus-color: #eb3434;
    --bs-pagination-focus-bg: #eb3434;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #eb3434;
    --bs-pagination-active-bg: #eb3434;
    --bs-pagination-active-border-color: #eb3434;
    --bs-pagination-disabled-color: #eb3434;
    --bs-pagination-disabled-bg: #eb3434;
    --bs-pagination-disabled-border-color: #eb3434;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-link:hover {
    color: #eb3434;
}*/
/*#endregion */

    /*#endregion */

/*#region Custom Classes */
/*-----------------------------------------------------------*/

/*used for dark and light theme toggle button
    controls sun and moon icon display*/
[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}

/* Icon Color filtering for input field icons*/
.input-icon {
    z-index: 7;
    filter: var(--theme-input-icon-color-filter);
}

    .input-icon:focus {
        z-index: 7;
        filter: var(--theme-input-icon-color-filter);
    }

    .input-icon:disabled {
        filter: var(--theme-input-icon-disabled-color-filter);
    }

    .input-icon:read-only {
        filter: var(--theme-input-icon-disabled-color-filter);
    }

/* Site hero banner */
.hero {
    top: 0;
    right: 0;
    left: 0;
    background-color: var(--theme-hero-background-color);
    position: absolute;
    z-index: -100
}

.hero-primary-text {
    color: var(--theme-hero-text-color);
}

.hero-secondary-text {
    color: var(--theme-secondary-text-color);
}

/* Header rows */
.header-row {
    background-color: var(--theme-header-row-background-color);
    color: var(--theme-header-row-text-color);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px;
    gap: 10px;
}

/* Status Tags */
.status-tag {
    background-color: var(--theme-status-tag-background-color);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    gap: 8px;
    width: fit-content;
    border-radius: 5px;
}

/*#region Cards highlight animations */
.card-highlight-row {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 1.25rem;
    pointer-events: none;
    transition: all 0.3s;
}

.card-highlight-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 1.25rem;
    pointer-events: none;
    transition: all 0.3s;
}

.card-highlight {
    pointer-events: auto;
    transform: scale(1);
    transition: all 0.3s;
}

    .card-highlight:hover {
        opacity: 1;
        transform: scale(1.05);
    }

    .card-highlight-col .card-highlight {
        width: 100%
    }

.card-highlight-row:hover .card-highlight:not(:hover),
.card-highlight-col:hover .card-highlight:not(:hover) {
    opacity: 0.5;
    transform: scale(0.9);
}

/*#region Policy Selection Radio button cards for File Claims and make Payment Modals*/

.btn-check.claimPolicyRadio + .card,
.btn-check.payPolicyRadio + .card,
.btn-check.policyRadio + .card {
    border: 2px solid var(--bs-border-color-translucent);
}

.btn-check.claimPolicyRadio + .btn,
.btn-check.payPolicyRadio + .btn,
.btn-check.policyRadio + .btn {
    transition: all 0.3s, border 0s;
}
    .btn-check.claimPolicyRadio + .btn:hover,
    .btn-check.payPolicyRadio + .btn:hover,
    .btn-check.policyRadio + .btn:hover {
        border-color: var(--bs-card-border-color);
        background-color: var(--theme-card-background-color);
    }

    .btn-check.claimPolicyRadio:checked + .btn, .btn-check.claimPolicyRadio:checked + .btn:hover,
    .btn-check.payPolicyRadio:checked + .btn, .btn-check.payPolicyRadio:checked + .btn:hover,
    .btn-check.policyRadio:checked + .btn, .btn-check.policyRadio:checked + .btn:hover {
        border: 2px solid var(--theme-btn-primary-color);
        background-color: var(--theme-card-background-color);
        transition: all 0.3s, border 0s;
    }
/*#endregion */

/*#endregion */


/*#region Global Footer */
.global-footer {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    position: relative;
    align-items: center;
    height: 60px;
}
.sm-global-footer {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    position: relative;
    align-items: center;
    height: 150px;
}
.global-footer-copyright-and-terms {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    align-items: center;
    gap: 30px;
    padding-left: 0;
}
.sm-global-footer-copyright-and-terms {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    align-items: center;
    gap: 20px;
}
.global-footer-copyright-text {
    font-size: 0.875rem;
    text-transform: none;
    color: #F8F8F8;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    flex: none;
    flex-grow: 0;
}

.global-footer-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 30px;

    flex: none;
    flex-grow: 0;
}

.global-footer-privacy-term-links {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;

    text-decoration-line: underline;
    color: #F8F8F8;
    flex: none;
    flex-grow: 0;
}

.sm-global-footer-terms-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.global-footer-social-links-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    line-height: 22px;
}


.filter-select {
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

/*#endregion */


/*#region Custom Dropdowns (aka Combo, or Select field) */
/* These classes are used and dynamically controlled by JS*/
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
    width: 100%;
}

    .custom-select-wrapper select {
        display: none;
        width: inherit;
    }

.custom-select {
    position: relative;
    display: inline-block;
    height: 2.75rem;
    width: inherit;
    
    border-radius: 0.1875rem;
    border-top-right-radius: 0.1875rem !important;
    border-bottom-right-radius: 0.1875rem !important;
    /*background-color: var(--theme-input-background-color);*/
    
    font-family: var(--theme-font-family);
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 120%;
    font-feature-settings: 'zero' on;
    
    /*transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select-selection {
    display: flex;
    align-items: center;
    padding-left: 10px;
    height: inherit;
    width: inherit;
    content: "";

    font-size: 14px;
    font-weight: 600;
    color: var(--theme-input-text-color);
    line-height: 120%;
    
    background: var(--theme-input-background-color);
    border: 1px solid #999999;
    border-radius: 3px;
    cursor: pointer;
}

.custom-select-focus {
    border: 2px solid var(--theme-primary-color);
    box-shadow: none;
}

    .custom-select-selection:focus {
        border: 2px solid var(--theme-primary-color);
        box-shadow: none;
    }

    .custom-select-selection:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px;
        height: 10px;
        top: 50%;
        right: 15px;
        margin-top: -2px;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
    }

.custom-select.opened .custom-select-selection:after {
    margin-top: 3px;
    transform: rotate(-135deg) translateY(-50%);
}

.dropdown-box {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
    
    max-height: 200px;
    overflow-y: auto;
    overflow: overlay;
    z-index: 1;
}

/* Triangle at the top right of dropdown to make it look like a chat bubble */
.dropdown-box-arrow {
    position: absolute;
    display: block;
    bottom: -19px;
    right: 25px;

    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid var(--theme-input-border-color);

    transition: all .3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px) rotate(-90deg);
    z-index: 1;
}

    .dropdown-box-arrow > div {
        width: 0;
        position: relative;
        left: -10px;
        top: -7px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 9px solid var(--theme-input-background-color);
    }

.custom-select.opened .dropdown-box {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
/*    z-index: 1;*/
}

.custom-select.opened .dropdown-box-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0) rotate(-90deg);
    z-index: 2;
}

.custom-option {
    position: relative;
    display: block;
    padding: 0 22px;
    border-bottom: 1px solid var(--theme-input-border-color);
    font-size: 12px;
    font-weight: 400;
    color: var(--theme-input-text-color);
    line-height: 47px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

    .custom-option:first-of-type {
        border-radius: 4px 4px 0 0;
    }

    .custom-option:last-of-type {
        border-bottom: 0;
        border-radius: 0 0 4px 4px;
    }

    .custom-option:hover,
    .custom-option.selection {
        background-color: var(--theme-primary-color);
        color: white;
        font-weight: 600;
    }
/*#endregion */


/*#endregion */