body {
    font-family: "Kantumruy Pro", "Inter", sans-serif !important;
    background: radial-gradient(ellipse 52.64% 74.94% at 50.00% 47.36%, white 0%, rgba(241, 244, 248, 0) 100%), #F1F4F8;
}

.dx-widget input,
.dx-widget textarea {
    font-family: "Kantumruy Pro", "Inter", sans-serif !important;
}

.dx-widget {
    font-family: "Kantumruy Pro", "Inter", sans-serif !important;
}

.dad-form .dx-layout-manager .dx-field-item:not(.dx-last-col) {
    padding-right: 8px;
}

.dad-form .dx-layout-manager .dx-field-item:not(.dx-first-col) {
    padding-left: 8px;
}

.global-popup .dx-overlay-content {
    border-radius: 42px !important;
}


.dad-form .dx-field-item-label-location-top {
    display: block;
    margin-bottom: 3px;
}

.dad-form .dx-texteditor-input {
    color: #08142C;
    font-weight: 500;
    font-size: 13px;
    font-family: Inter !important;
}

/* Border/background live on .dx-texteditor-container (the inner input box)
   rather than .dx-texteditor (the outer root) on purpose: the outer root
   also wraps the validation message (see .dx-texteditor.dx-invalid below),
   so if it carried the border, growing it to fit the message would stretch
   the red/blue box around the message text too. */
.dad-form .dx-texteditor.dx-state-focused:not(.dx-invalid) .dx-texteditor-container {
    border: 1px solid #00ADEF !important;
    background: #FCFCFC;
    box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.20) !important;
}

.dad-form .dad-date-time.dx-state-focused:not(.dx-invalid) {
    box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.20) !important;
}

.dad-form .dad-date-time.dx-invalid .dx-dropdowneditor-input-wrapper {
    box-shadow: 0 0 0 2px rgba(253, 70, 59, 0.20);
}

.dad-form .dx-texteditor.dx-editor-outlined .dx-texteditor-container {
    height: 44px;
    border-radius: 10px !important;
    border: 1px solid #E5E6E7;
    background: #FFFFFF;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dad-form .dx-texteditor.dx-editor-outlined.dx-invalid .dx-texteditor-container {
    border-color: #FD463B !important;
    box-shadow: 0 0 0 2px rgba(253, 70, 59, 0.20);
}

/* Pull the invalid-message overlay out of "floating" mode and into normal
   flow, so the wrapped message actually pushes the next field down instead
   of floating on top of it (position/collision are otherwise JS-driven). */
.dad-form .dx-invalid-message {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin-top: 5px;
    transform: none !important;
    inset: auto !important;
}

.dad-form .dx-invalid-message>.dx-overlay-content {
    position: static !important;
    transform: none !important;
    inset: auto !important;
}

.dad-form .dx-texteditor.dx-editor-outlined {
    border: unset !important;
}

/* .Height(44) in Login.cshtml renders as an inline height:44px on the
   .dx-texteditor root, and DevExtreme appends the validation message
   *inside that same element*. Without this, the message overflows below
   the fixed 44px box instead of growing it, so nothing downstream
   (.dx-field-item, .dx-box-item) ever sees the extra height. */
.dad-form .dx-texteditor.dx-invalid {
    height: auto !important;
}

/* DevExtreme's dxBox layout sets row height via inline style (JS-computed,
   before any error exists) - no rule for it ships in dx.light.css at all.
   Override it here so the row can grow with the wrapped message and push
   the next .dx-box-item down instead of overlapping it. */
.dad-form .dx-box-item:has(.dx-invalid) {
    height: auto !important;
}

.dad-form .dx-box-item:has(.dx-invalid) .dx-box-item-content {
    height: auto !important;
    overflow: visible !important;
}

.dad-form .dx-field-item {
    margin-bottom: 16px;
}

.dad-form .dx-field-item:has(.dx-invalid) {
    margin-bottom: 0px;
}

.dad-form .dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 0 !important;
}

.dx-icon-eye,
.dx-icon-eye-off {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #034EA2 !important;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.dx-icon-user-custom,
.dx-icon-lock-custom {
    display: inline-block;
    width: 16px;
    height: 16px;

    background-color: #000000 !important;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.dx-icon-user-custom {
    -webkit-mask-image: url("/images/icons/user.svg");
    mask-image: url("/images/icons/user.svg");
}

.dx-icon-lock-custom {
    -webkit-mask-image: url("/images/icons/lock.svg");
    mask-image: url("/images/icons/lock.svg");
}

.dx-icon-eye::before,
.dx-icon-eye-off::before,
.dx-icon-user-custom::before,
.dx-icon-lock-custom::before {
    content: "";
}

.dx-icon-eye {
    -webkit-mask-image: url("/images/icons/eye.svg");
    mask-image: url("/images/icons/eye.svg");
}

.dx-icon-eye-off {
    -webkit-mask-image: url("/images/icons/eye-off.svg");
    mask-image: url("/images/icons/eye-off.svg");
}

.dad-form .dx-invalid-message>.dx-overlay-content {
    color: #FD463B;
    background-color: transparent;
    padding: 0;
    line-height: 2;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.2px;
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dx-field-item-content .dx-invalid-message-content {
    margin-bottom: 6px;
}

.dad-form .dx-field-item-required .dx-label>span::after,
.dad-form .dx-field-item-required-mark {
    color: #FD463B;
}

.dad-form .dx-invalid-message-content::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z' stroke='%23FD463B' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 4V6' stroke='%23FD463B' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 8H6.005' stroke='%23FD463B' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}


.dad-form .dx-field-item-help-text,
.dad-form .dx-field-item-label-text {
    color: rgba(8, 20, 44, 0.50);
    font-weight: 500;
    font-family: Inter !important;
}

.dad-form .dx-invalid.dx-texteditor.dx-editor-filled.dx-state-focused .dx-texteditor-container,
.dad-form .dx-invalid.dx-texteditor.dx-editor-outlined.dx-state-focused .dx-texteditor-container,
.dad-form .dx-invalid.dx-texteditor.dx-editor-underlined.dx-state-focused .dx-texteditor-container {
    border-color: #FD463B;
    box-shadow: 0 0 0 2px rgba(253, 70, 59, 0.20);
}

.dad-form .dx-invalid.dx-texteditor.dx-editor-filled.dx-show-invalid-badge .dx-texteditor-input-container::after,
.dad-form .dx-invalid.dx-texteditor.dx-editor-outlined.dx-show-invalid-badge .dx-texteditor-input-container::after,
.dad-form .dx-invalid.dx-texteditor.dx-editor-underlined.dx-show-invalid-badge .dx-texteditor-input-container::after {
    display: none;
}

.dad-date-time .dx-dropdowneditor-icon {
    background-color: transparent !important;
}

.dad-date-time .dx-texteditor-container {
    display: flex;
}

.dad-date-time .dx-texteditor-buttons-container {
    display: contents;
}

.dad-date-time .dx-texteditor-input-container {
    order: 0;
}

.dad-date-time .dx-dropdowneditor-button {
    order: -1;
}

.dad-date-time .dx-clear-button-area {
    order: 1;
}

.dad-form .dx-texteditor.dx-editor-outlined {
    border-radius: 10px;
}

.dad-form .dx-dropdowneditor-input-wrapper {
    border-radius: 10px;
}

.dad-form .dx-dropdowneditor-icon {
    color: #D9D9D9 !important;
}

.dx-calendar-navigator .dx-button-mode-outlined {
    border-color: transparent !important;
}

.dx-datebox-wrapper-date .dx-popup-normal {
    border-radius: 16px;
    background: #FFF;
    border: unset;
    -webkit-box-shadow: unset;
    top: 16px !important;
    transform: translate(0px, 45px) !important;
    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.10);
}

.dx-datebox-wrapper-calendar .dx-calendar {
    margin: 24px;
}

.dx-calendar-cell.dx-calendar-today span {
    border: unset !important;
    border-radius: 6px;
    font-weight: 600;
    background: rgba(3, 78, 162, 0.10);
}

.dx-calendar-cell.dx-calendar-selected-date span {
    color: #fff;
    border-radius: 6px;
    background: #00AEEF;
    font-weight: 500;
}

.dx-calendar-cell.dx-calendar-contoured-date span {
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

.dx-calendar-body thead th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgba(8, 20, 44, 0.60);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    line-height: 14px;
    /* 100% */
    letter-spacing: -0.14px;
    text-transform: capitalize;
}

.dx-calendar-cell {
    cursor: pointer;
    position: relative;
    text-align: center;
    font-size: 14px;
    /* color: #08142C; */
    border-radius: 6px !important;
}

.dx-calendar-cell span {
    border-radius: 6px !important;
    width: 32px;
    height: 32px;
    /* color: rgba(8, 20, 44, 0.30); */

    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    /* 100% */
    letter-spacing: -0.14px;
    text-transform: capitalize;
}

#button-sign-in-activation-indicator {
    margin-right: 8px;
}

.dx-toast-custom .dx-toast-message {
    display: none;
}

.dx-toast-custom {
    padding: 12px 16px 12px 12px;
    border-radius: 12px;
    background: #08142C;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

.toast-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.toast-icon {
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
}

.toast-icon.success {
    background: rgba(31, 183, 106, 0.10);
}

.toast-icon.error {
    background: rgba(253, 70, 59, 0.10);
}

.toast-icon.warning {
    background: rgba(250, 204, 21, 0.10);
}

.toast-icon.info {
    background: rgba(0, 174, 239, 0.10);
}

.toast-title {
    color: #FFF;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.toast-description {
    color: rgba(255, 255, 255, 0.70);
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 0.2px;
}

.toast-close {
    position: absolute;
    right: 24px;
}

.toast-close-button {
    border: none;
    border-radius: 100px;
    background: var(--Primary-Light-Blue-200, rgba(0, 174, 239, 0.20));
    display: flex;
    width: 20px;
    height: 20px;
    padding: 4.316px 3.5px 3.684px 4.5px;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}

.toast-close-button i {
    color: #718096;
}

.button-indicator {
    margin-right: 8px;
}

.dx-show-clear-button .dx-clear-button-area {
    margin-right: 3px;
}

.dx-show-clear-button .dx-icon-clear {
    font-size: 16px;
}