/* mp-tooltip Tippy.js custom theme */
.tippy-box[data-theme~='mp-tooltip'] {
    background-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    color: #fff;
    border-radius: 8px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow-wrap: break-word;
}

    .tippy-box[data-theme~='mp-tooltip'][data-placement^='top'] > .tippy-arrow::before {
        border-top-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    }

    .tippy-box[data-theme~='mp-tooltip'][data-placement^='bottom'] > .tippy-arrow::before {
        border-bottom-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    }

    .tippy-box[data-theme~='mp-tooltip'][data-placement^='left'] > .tippy-arrow::before {
        border-left-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    }

    .tippy-box[data-theme~='mp-tooltip'][data-placement^='right'] > .tippy-arrow::before {
        border-right-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    }

.button,
.button-outlined,
.button-alert {
    --bs-btn-disabled-opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 50px;
    font-family: var(--Font-Family-Primary, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 26px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent; /* always have a border so height stays consistent for both button and outlined button */
}

.button {
    --bs-btn-disabled-color: var(--button-text-color, #FFF);
    --bs-btn-disabled-bg: var(--button-color, #3A5DAE);
    --bs-btn-disabled-border-color: transparent;
    background-color: var(--button-color, #3A5DAE);
    color: var(--button-text-color, #FFF);
}

    .button:not([disabled]):hover {
        color: var(--button-text-color, #FFF);
        background-color: var(--button-hover-background-color, #28396F);
    }

.button-outlined {
    --bs-btn-disabled-color: var(--button-outlined-text-color, #3A5DAE);
    --bs-btn-disabled-bg: var(--button-outlined-color, #FFF);
    --bs-btn-disabled-border-color: var(--button-outlined-border-color, #3A5DAE);
    background-color: var(--button-outlined-color, #FFF);
    color: var( --button-outlined-text-color, #3A5DAE);
    border-color: var(--button-outlined-border-color, #3A5DAE);
}

    .button-outlined:not([disabled]):hover {
        color: var( --button-outlined-text-color, #3A5DAE);
        background-color: var(--button-outlined-hover-background-color, #D8DFEF);
    }

.button-alert {
    --bs-btn-disabled-color: var(--button-text-color, #FFF);
    --bs-btn-disabled-bg: var(--button-alert-background-color, #CB333A);
    --bs-btn-disabled-border-color: transparent;
    color: var(--button-text-color, #FFF);
    background-color: var(--button-alert-background-color, #CB333A);
}

    .button-alert:not([disabled]):hover {
        background-color: var(--button-alert-hover-background-color, #7A1113);
        color: var(--button-text-color, #FFF);
    }

    .button[disabled], .button:disabled, .button.disabled,
    .button-outlined[disabled], .button-outlined:disabled, .button-outlined.disabled,
    .button-alert[disabled], .button-alert:disabled, .button-alert.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

.mpDropdown {
    position: relative;
    width: 100%;
}

    .mpDropdown span {
        color: var(--drop-down-text-color, #000000);
    }

    .mpDropdown .dropdown-toggle {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid var(--drop-down-list-border-color, #3A5DAE);
        border-radius: 8px;
        background-color: #FFF;
        height: 40px;
        padding: 10px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
    }

        .mpDropdown .dropdown-toggle::after {
            display: none;
        }

        .mpDropdown .dropdown-toggle.show img {
            transform: rotate(180deg);
        }

    .mpDropdown .dropdown-menu button,
    .mpDropdown .dropdown-menu a {
        color: var(--primary-text-color, #222725);
        width: 100%;
        padding: 10px;
        font-size: 16px;
        font-weight: 400;
    }

    .mpDropdown .dropdown-menu button {
        border: none;
        background-color: #FFF;
        text-align: left;
    }

    .mpDropdown .dropdown-menu a {
        display: block;
        text-decoration: none;
        height: 40px;
    }

    .mpDropdown .ddl-toggle,
    .mpDropdown .ddl-menu {
        width: 100%;
    }

        .mpDropdown .ddl-menu.show {
            padding: 0;
            border-radius: 8px;
        }

        .mpDropdown .ddl-menu li[class^="group-"] {
            font-family: var(--Font-Family-Primary, sans-serif);
            font-size: 16px;
            line-height: 22px;
            font-weight: 700;
            padding: 5px;
            margin: 0 5px;
        }

        .mpDropdown .ddl-menu li:has(+ li[class^="group-"]) a {
            margin-bottom: 5px;
        }

        .mpDropdown .ddl-menu li[class^="group-"] + li a {
            margin-top: 10px;
        }

        .mpDropdown .ddl-menu li a:not([href]) {
            pointer-events: none;
            text-decoration: none;
            opacity: 0.5;
        }

        .mpDropdown .ddl-menu li a {
            padding: 0px 10px;
            margin: 15px 0px;
            height: auto;
        }

        .mpDropdown .ddl-menu.show li:not([disabled]):hover {
            background: var(--Colors-Member-Background, #D8DFEF);
            cursor: pointer;
        }

        .mpDropdown .ddl-menu.show li:has([disabled]) {
            background: unset;
            cursor: default;
            pointer-events: none;
        }

.base-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    background: var(--brand-UI-White, #FFF);
    box-shadow: 0px 4px 40px 0px rgba(40, 38, 38, 0.16);
    flex: 1 0 0;
}

.base-card-title {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 12px 16px;
    justify-content: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px 16px 0px 0px;
    background: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    color: var(--brand-UI-White, #FFF);
    text-align: center;
}

.wrap-card-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wrap-card {
    min-width: var(--Cards-Min-Width, 278px);
}

.input-select {
    height: 48px;
    padding: var(--Font-Size-Caption-1, 12px) 35px var(--Font-Size-Caption-1, 12px) var(--Font-Size-Caption-1, 12px);
    border-radius: 8px;
    border: 1px solid var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    align-self: stretch;
    appearance: none;
    background-image: url('../images/icons/angle-down.svg');
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    cursor: pointer;
    background-color: #FFF;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
}

    .input-select.no-angle {
        background-image: unset;
        padding: var(--Font-Size-Caption-1, 12px)
    }

    .input-select:focus {
        outline: 1px solid var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    }

    .input-select option[disabled] {
        background: #eeeeee;
    }

select {
    color: var(--drop-down-text-color, #000000);
}

input:placeholder-shown {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

input:focus::placeholder {
    color: transparent;
}

input[type="search"] {
    background-color: white;
}

.text-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    background: #FFF;
    align-self: stretch;
    cursor: initial;
    position: relative;
}

    .text-box:focus-within {
        outline: 1px solid var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    }

    .text-box img {
        position: absolute;
        right: var(--Font-Size-Caption-1, 12px);
    }

        .text-box img[alert] {
            display: none;
        }

    .text-box input {
        border: none;
        height: 46px;
        width: 100%;
        outline: none;
        border-radius: 8px;
        padding: 0 var(--Font-Size-Caption-1, 12px);
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
    }

        .text-box input.invalid {
            padding-right: 44px;
        }

    .text-box:has(input.invalid) {
        border-color: var(--brand-UI-Alert-Red-Error-Red, #B00020);
        outline-color: var(--brand-UI-Alert-Red-Error-Red, #B00020);
    }

        .text-box:has(input.invalid) img[alert] {
            display: inline-block;
        }

    .text-box:has(input[disabled]), .text-box input[disabled] {
        background: #E9E9E9;
        color: var(--primary-text-color, #222725);
    }

.datepicker {
    border-radius: 8px !important;
}

    .datepicker table {
        width: 100%;
    }

    .datepicker th,
    .datepicker td {
        border: none;
        padding: 4px;
    }

        .datepicker td.active,
        .datepicker td span.active {
            background-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE) !important;
        }

            .datepicker td.active:hover,
            .datepicker td span.active:hover {
                background-color: var(--button-hover-background-color, #28396F) !important;
            }

.text-area {
    border: 1px solid var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    padding: var(--Font-Size-Caption-2-DT, 12px);
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    resize: none;
    outline-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
}

.form-control {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    color: var(--drop-down-text-color, #000000) !important;
    font-size: inherit;
    line-height: inherit;
}

a[disabled] {
    pointer-events: none;
    text-decoration: none;
    opacity: 0.5;
}

.radio-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--brand-ui-tru-blue-0-true-blue, #3A5DAE);
}

@media (min-width: 576px) {
    .datepicker {
        border-radius: 8px !important;
        width: auto;
    }

        .datepicker table {
            width: auto;
        }

        .datepicker th,
        .datepicker td {
            padding: 9px;
        }
}

@media (min-width: 768px) {
    .button {
        font-size: 14px;
    }
}

@media (min-width: 812px) {
    .wrap-card-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wrap-card {
        min-width: 310px;
        max-width: var(--Cards-Max-Width, 500px);
    }
}