@import url("font-face.css");

:root {
    /* colors */
    --t-color-primary: #3366FF;
    --t-color-secondary: #00AB55;
    --t-color-black: black;
    --t-color-white: white;
    --t-color-link: #3366FF; /* blue */
    --t-color-info: #1890FF;
    --t-color-success: #54D62C;
    --t-color-warning: #FFC107;
    --t-color-danger: #FF4842; /*status*/
    /* gradients */
    --t-gradient-primary: linear-gradient(135deg, #84A9FF 0%, #1939B7 100%);
    --t-gradient-secondary: linear-gradient(135deg, #5BE584 0%, #007B55 100%);
    --t-gradient-info: linear-gradient(135deg, #74CAFF 0%, #0C53B7 100%);
    --t-gradient-success: linear-gradient(135deg, #FFE16A 0%, #B78103 100%);
    --t-gradient-warning: linear-gradient(135deg, #74CAFF 0%, #0C53B7 100%);
    --t-gradient-danger: linear-gradient(135deg, #FFA48D 0%, #B72136 100%);
    /* background-colors */
    --t-bg-primary: #ffffff;
    --t-bg-secondary: #ffffff;
    --t-bg-light: #f4f6f8;
    --t-bg-dark: #212b36;
    --t-bg-black: var(--t-color-black);
    --t-bg-white: var(--t-color-white);
    /* text-colors */
    --t-text-primary: #212b36;
    --t-text-secondary: #ffffff;
    --t-text-light: #212b36;
    --t-text-dark: #212b36;
    --t-text-black: var(--t-color-black);
    --t-text-white: var(--t-color-white);
    --t-border-radius: 16px;
    --t-font-family: dana-fanum-regular, dana-fanum-medium,dana-fanum-light,dana-regular, dana-medium,dana-light;
    --t-font-family-bold: dana-fanum-demibold, dana-bold, dana-demibold;
    /* mud additional colors */
    /* mud primary colors */
    --mud-primary-lighter: #D6E4FF;
    --mud-primary-light: #84A9FF;
    --mud-primary-dark: #1939B7;
    --mud-primary-darker: #091A7A;
    --mud-primary-8: rgba(51, 102, 255, 0.08);
    --mud-primary-12: rgba(51, 102, 255, 0.12);
    --mud-primary-16: rgba(51, 102, 255, 0.16);
    --mud-primary-24: rgba(51, 102, 255, 0.24);
    --mud-primary-32: rgba(51, 102, 255, 0.32);
    --mud-primary-48: rgba(51, 102, 255, 0.48);
    /* mud secondary colors */
    --mud-secondary-lighter: #C8FACD;
    --mud-secondary-light: #5BE584;
    --mud-secondary-dark: #00AB55;
    --mud-secondary-darker: #005249;
    --mud-secondary-8: rgba(0, 171, 85, 0.08);
    --mud-secondary-12: rgba(0, 171, 85, 0.12);
    --mud-secondary-16: rgba(0, 171, 85, 0.16);
    --mud-secondary-24: rgba(0, 171, 85, 0.24);
    --mud-secondary-32: rgba(0, 171, 85, 0.32);
    --mud-secondary-48: rgba(0, 171, 85, 0.48);
    /* mud info */
    --mud-info-lighter: #D0F2FF;
    --mud-info-light: #74CAFF;
    --mud-info-main: #1890FF;
    --mud-info-dark: #0C53B7;
    --mud-info-darker: #04297A;
    /* mud success */
    --mud-Success-lighter: #E9FCD4;
    --mud-Success-light: #AAF27F;
    --mud-Success-main: #54D62C;
    --mud-Success-dark: #229A16;
    --mud-Success-darker: #08660D;
    /* mud warning */
    --mud-warning-lighter: #FFF7CD;
    --mud-warning-light: #FFE16A;
    --mud-warning-main: #FFC107;
    --mud-warning-dark: #B78103;
    --mud-warning-darker: #7A4F01;
    /*mud error */
    --mud-error-lighter: #FFE7D9;
    --mud-error-light: #FFA48D;
    --mud-error-main: #FF4842;
    --mud-error-dark: #B72136;
    --mud-error-darker: #7A0C2E;
    /* mud gray */
    --mud-gray-100: #F9FAFB;
    --mud-gray-200: #F4F6F8;
    --mud-gray-300: #DFE3E8;
    --mud-gray-400: #C4CDD5;
    --mud-gray-500: #919EAB;
    --mud-gray-600: #637381;
    --mud-gray-700: #454F5B;
    --mud-gray-800: #212B36;
    --mud-gray-900: #161C24;
    --mud-gray-8: rgba(145, 158, 171, 0.08);
    --mud-gray-12: rgba(145, 158, 171, 0.12);
    --mud-gray-16: rgba(145, 158, 171, 0.16);
    --mud-gray-24: rgba(145, 158, 171, 0.24);
    --mud-gray-32: rgba(145, 158, 171, 0.32);
    --mud-gray-48: rgba(145, 158, 171, 0.48);
    /* mud background */
    --mud-background-default: #E6ECF1;
    --mud-background-paper: #ffffff;
    --mud-background-neutral: var(--mud-gray-100);
    /* text */
    --mud-text-primary: var(--mud-gray-800);
    --mud-text-secondary: var(--mud-gray-600);
    --mud-text-disabled: var(--mud-gray-500);
    /* divider */
    /* action states */
    --mud-hover-opacity: rgb(0, 0, 0, 0.08);
    --mud-selected-opacity: rgb(0, 0, 0, 0.08);
    --mud-disabled-opacity: rgb(0, 0, 0, 0.48);
    --mud-focus-opacity: rgb(0, 0, 0, 0.12);
    --mud-activated-opacity: rgb(0, 0, 0, 0.12);
    /* shadows */
    --mud-shadow-dropdown: 0px 0px 2px rgba(145, 158, 171, 0.24), -20px 20px 40px -4px rgba(145, 158, 171, 0.24);
    --mud-shadow-dialog: -40px 40px 80px -8px rgba(145, 158, 171, 0.24);
    --mud-shadow-card: 0px 0px 2px rgba(145, 158, 171, 0.2), 0px 12px 12px -4px rgba(145, 158, 171, 0.12);
}

.mud-shadow-dropdown {
    box-shadow: var(--mud-shadow-dropdown) !important;
}

.mud-shadow-card {
    box-shadow: var(--mud-shadow-card) !important;
}

.mud-shadow-dialog {
    box-shadow: var(--mud-shadow-dialog) !important;
}

.mud-primary-lighter {
    background-color: var(--mud-primary-lighter) !important;
}

.mud-primary-light {
    background-color: var(--mud-primary-light) !important;
}

.mud-primary-dark {
    background-color: var(--mud-primary-dark) !important;
}

.mud-primary-darker {
    background-color: var(--mud-primary-darker) !important;
}

.mud-primary-text-lighter {
    color: var(--mud-primary-lighter) !important;
}

.mud-primary-text-light {
    color: var(--mud-primary-light) !important;
}

.mud-primary-text-dark {
    color: var(--mud-primary-dark) !important;
}

.mud-primary-text-darker {
    color: var(--mud-primary-darker) !important;
}

.mud-secondary-lighter {
    background-color: var(--mud-secondary-lighter) !important;
}

.mud-secondary-light {
    background-color: var(--mud-secondary-light) !important;
}

.mud-secondary-dark {
    background-color: var(--mud-secondary-dark) !important;
}

.mud-secondary-darker {
    background-color: var(--mud-secondary-darker) !important;
}

.mud-secondary-text-lighter {
    color: var(--mud-secondary-lighter) !important;
}

.mud-secondary-text-light {
    color: var(--mud-secondary-light) !important;
}

.mud-secondary-text-dark {
    color: var(--mud-secondary-dark) !important;
}

.mud-secondary-text-darker {
    color: var(--mud-secondary-darker) !important;
}

.mud-info-lighter {
    background-color: var(--mud-info-lighter) !important;
}

.mud-info-light {
    background-color: var(--mud-info-light) !important;
}

.mud-info-dark {
    background-color: var(--mud-info-dark) !important;
}

.mud-info-darker {
    background-color: var(--mud-info-darker) !important;
}

.mud-info-text-lighter {
    color: var(--mud-info-lighter) !important;
}

.mud-info-text-light {
    color: var(--mud-info-light) !important;
}

.mud-info-text-dark {
    color: var(--mud-info-dark) !important;
}

.mud-info-text-darker {
    color: var(--mud-info-darker) !important;
}

.mud-success-lighter {
    background-color: var(--mud-success-lighter) !important;
}

.mud-success-light {
    background-color: var(--mud-success-light) !important;
}

.mud-success-dark {
    background-color: var(--mud-success-dark) !important;
}

.mud-success-darker {
    background-color: var(--mud-success-darker) !important;
}

.mud-success-text-lighter {
    color: var(--mud-success-lighter) !important;
}

.mud-success-text-light {
    color: var(--mud-success-light) !important;
}

.mud-success-text-dark {
    color: var(--mud-success-dark) !important;
}

.mud-success-text-darker {
    color: var(--mud-success-darker) !important;
}

.mud-warning-lighter {
    background-color: var(--mud-warning-lighter) !important;
}

.mud-warning-light {
    background-color: var(--mud-warning-light) !important;
}

.mud-warning-dark {
    background-color: var(--mud-warning-dark) !important;
}

.mud-warning-darker {
    background-color: var(--mud-warning-darker) !important;
}

.mud-warning-text-lighter {
    color: var(--mud-warning-lighter) !important;
}

.mud-warning-text-light {
    color: var(--mud-warning-light) !important;
}

.mud-warning-text-dark {
    color: var(--mud-warning-dark) !important;
}

.mud-warning-text-darker {
    color: var(--mud-warning-darker) !important;
}

.mud-error-lighter {
    background-color: var(--mud-error-lighter) !important;
}

.mud-error-light {
    background-color: var(--mud-error-light) !important;
}

.mud-error-dark {
    background-color: var(--mud-error-dark) !important;
}

.mud-error-darker {
    background-color: var(--mud-error-darker) !important;
}

.mud-error-text-lighter {
    color: var(--mud-error-lighter) !important;
}

.mud-error-text-light {
    color: var(--mud-error-light) !important;
}

.mud-error-text-dark {
    color: var(--mud-error-dark) !important;
}

.mud-error-text-darker {
    color: var(--mud-error-darker) !important;
}

.mud-gray-100 {
    background-color: var(--mud-gray-100) !important;
}

.mud-gray-200 {
    background-color: var(--mud-gray-200) !important;
}

.mud-gray-300 {
    background-color: var(--mud-gray-300) !important;
}

.mud-gray-400 {
    background-color: var(--mud-gray-400) !important;
}

.mud-gray-500 {
    background-color: var(--mud-gray-500) !important;
}

.mud-gray-600 {
    background-color: var(--mud-gray-600) !important;
}

.mud-gray-700 {
    background-color: var(--mud-gray-700) !important;
}

.mud-gray-800 {
    background-color: var(--mud-gray-800) !important;
}

.mud-gray-900 {
    background-color: var(--mud-gray-900) !important;
}

/*.mud-disabled {
    background-color: var(--mud-text-disabled) !important;
}*/
.mud-text-primary {
    color: var(--mud-text-primary) !important;
}

.mud-text-secondary {
    color: var(--mud-text-secondary) !important;
}

.mud-text-disabled {
    color: var(--mud-text-disabled) !important;
}

.mud-background {
    background-color: var(--mud-background-default) !important;
}

.mud-background-neutral {
    background-color: var(--mud-background-neutral) !important;
}

.mud-background-paper {
    background-color: var(--mud-background-paper) !important;
}

.mud-divider {
    background-color: rgba(145, 158, 171, 0.2392156863) !important;
}

.mud-divider-light {
    background-color: rgba(145, 158, 171, 0.2392156863) !important;
}

.mud-paper {
    border-radius: 1rem !important;
}

.mud-button-filled-primary {
    background-color: var(--t-color-primary) !important;
}

.bg-white {
    background-color: white;
}

.text-white {
    color: white;
}

.font-dana {
    font-family: var(--t-font-family);
}

.wrapper {
    max-width: 1170px;
    width: 100%;
    margin: auto;
}

.wrapper-970 {
    max-width: 970px;
    width: 100%;
    margin: auto;
}

html body {
    font-family: var(--t-font-family);
    margin: 0;
}

* {
    box-sizing: border-box;
}

.clearfix {
    clear: both;
}

a {
    text-decoration: none;
    color: var(--t-link-color) !important;
}

.nav-item {
    display: flex;
    white-space: nowrap;
}

.nav-link {
    color: #212B36 !important;
}

.t-rounded {
    border-radius: var(--t-border-radius) !important;
}

.t-card {
    box-shadow: 0 0 2px rgba(145, 158, 171, 0.2);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.nowrap {
    white-space: nowrap !important;
}

.cke_notifications_area {
    display: none !important;
}

.backdrop-filter-blur-10 {
    backdrop-filter: blur(10px);
}

figure {
    height: 100%;
}

.title-bar-area {
    position: absolute;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 30px); /* Adjust height as needed */
    background-color: #3366ff; /* Match your theme color */
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}