:root{
    --body-font: "system-ui" !important;
    --mud-palette-primary: #005a9e !important;
    --bs-primary-rgb: #005a9e !important ;
    --bs-primary-rgbhover: #005a9e !important ;
    --mud-palette-primary-hover: #005a9e0 !important;
    --mud-typography-body2-family: 'system-ui' !important;
    --mud-typography-body1-family: 'system-ui' !important;
    --borderColor: #deecf9 !important;
}

*, * > *{
    word-break: break-all !important;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 120% !important;
}

main {
    width: calc(100vw - 250px);
}

.custom-sidebar {
    height: 100vh;
    transition: .2s;
    width: 3rem;
}

.custom-sidebar.active {
    width: 200px !important;
    position: fixed;
    left: 0;
    bottom: 0;
}

.custom-sidebar.active .dropdown>a {
    padding: 1rem !important;
    background-color: #c7e0f4;
}

.container {
    max-width: unset;
    display: flex;
    overflow-x: hidden;
}

.container .custom-sidebar~.content {
    width: calc(100vw - 3rem);
}

.container .custom-sidebar.active~.content {
    width: calc(100vw - 200px);
    margin-left: 200px;
}

.content {
    border-radius: 4px;
    /* background-color: #fff; */
    border: 1px solid #deecf9;
    height: calc(100vh - 4.5rem);
    overflow-y: auto;
}

@media (max-width: 992px) {

    main {
        width: 100%;
    }

    .content {
        border-radius: 0;
        border: 1px solid #deecf9;
        height: auto;
        min-height: calc(100vh - 3.5rem);
        overflow-y: auto;
        width: 100%;
    }
}

@media (max-width: 767px) {

    .content {
        min-height: calc(100vh - 7rem);
    }
}

.custom-sidebar ul li a span {
    display: none;
}

.custom-sidebar.active ul li a span {
    display: block;
}

.custom-sidebar.active ul li a.active span {
    font-weight: bold;
}

.custom-sidebar ul li a i.ms-Icon {
    margin: auto !important;
}

.custom-sidebar.active ul li a i.ms-Icon {
    margin-right: 0 !important;
}

.custom-sidebar .dropdown img {
    margin: auto !important;
}

.custom-sidebar .dropdown span {
    display: none;
}

.custom-sidebar.active .dropdown span {
    display: block;
}

.custom-sidebar.active .dropdown img {
    margin-right: 0 !important;
}

.custom-sidebar.active .dropdown .dropdown-menu {
    width: 100%;
}

.custom-sidebar .dropdown-toggle::after {
    content: none;
}

table.glassy-table {
    border-collapse: separate;
    border-spacing: 0 .5rem;
    /* : #c7e1f7 1px solid; */
}

table.glassy-table tbody tr {
    background-color: #ffffff90;
    transition: all .1s ease-in-out;
}

table.glassy-table tfoot tr {
    background-color: #f3f9ff;
    transition: all .1s ease-in-out;
}

table.glassy-table tbody tr:hover {
    background-color: #fff;
}

table.glassy-table thead tr {
    color: white;
}

table.glassy-table tr>th {
    padding: .75rem;
}

table.glassy-table tr>td {
    padding: .5rem .75rem;
}

table.glassy-table tbody tr>* {
    border-top: 1px solid #deecf9;
    border-bottom: 1px solid #deecf9;
}

table.glassy-table tr>*:first-child {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem;
}

table.glassy-table tr>*:last-child {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
}

table.glassy-table tbody tr>*:first-child {
    border-left: 1px solid #deecf9;
}

table.glassy-table tbody tr>*:last-child {
    border-right: 1px solid #deecf9;
}

table.glassy-table tfoot tr>* {
    border-top: 1px solid #deecf9;
    border-bottom: 1px solid #deecf9;
}

table.glassy-table tfoot tr>*:first-child {
    border-left: 1px solid #deecf9;
}

table.glassy-table tfoot tr>*:last-child {
    border-right: 1px solid #deecf9;
}

table.glassy-table tbody tr td img {
    height: 2rem;
    width: 2rem;
    object-fit: cover;
}

table.glassy-table tbody tr td[contenteditable="true"] {
    background-color: #fff;
}

.table-action {
    max-width: 10rem;
}

table.nested-table tr>* {
    padding: .75rem;
}

table.nested-table tbody,
table.nested-table thead {
    background-color: #036ac420;
    border: 1px solid #00457840;
}

input{
    border: 1px solid transparent;
    padding: 5px 9px 4px;
    border-radius: 4px;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)),
        border-box var(--neutral-stroke-input-rest);
    transition: .2s;
    font-size: 14px;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: visible;
    height: 2rem;
}

input::after {
    position: absolute;
    bottom: -1px;
    height: 2px;
    width: 0%;
    background-color: var(--accent-fill-rest);
    content: "";
    transition: .2s;
    z-index: +1;
    border-end-end-radius: 1px;
    border-end-start-radius: 1px;
}

input:focus::after {
    width: 100.25%;
    background-color: var(--accent-fill-rest);
}

input:focus-visible {
    outline: none;
}
input:hover {
    cursor: text;
    background: padding-box linear-gradient(var(--neutral-fill-input-hover), var(--neutral-fill-input-hover)), border-box var(--neutral-stroke-input-hover) !important;
}

input:focus {
    border: 1px solid #efefef !important;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest));
}

.custom-input{
    position: relative;
    display: flex;
    justify-content: center;
}

.custom-input .underline{
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 0%;
    background-color: var(--accent-fill-rest);
    content: "";
    transition: .2s;
    z-index: +1;
    border-end-end-radius: 1px;
    border-end-start-radius: 1px;
}

.custom-input input:focus + .underline{
    width: 100.25%;
    background-color: var(--accent-fill-rest);
}

.horizontal-scroll {
    overflow-x: auto;
}

.vertical-scroll {
    overflow-y: auto;
}

a.nav-link {
    transition: all .2s ease-in-out;
}

a.nav-link.active {
    position: relative;
    transition: all .2s ease-in-out;
}

a.nav-link.active::before {
    position: absolute;
    height: 1.25rem;
    width: .25rem;
    background-color: #036ac4;
    left: 0px;
    content: "";
    border-radius: 5px;
    transition: all .2s ease-in-out;
}

.dropdown-menu li a.dropdown-item.active {
    background-color: #f3f3f3 !important;
    color: #036ac4;
    position: relative;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    transition: all .2s ease-in-out;
}

.dropdown-menu li a.dropdown-item.active::before {
    position: absolute;
    height: 1.125rem;
    width: .2rem;
    background-color: #036ac4;
    left: 0px;
    content: "";
    border-radius: 5px;
}

button {
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    padding: unset;
    border-radius: .3rem;
    transition: .2s;
}

button:hover {
    background-color: #ffffff10;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #036ac480;
    border-radius: .35rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #036ac4;
}

* ::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

/* Track */
* ::-webkit-scrollbar-track {
    background: #fff !important;
}

/* Handle */
* ::-webkit-scrollbar-thumb {
    background: #036ac480 !important;
    border-radius: .35rem !important;
}

/* Handle on hover */
* ::-webkit-scrollbar-thumb:hover {
    background: #036ac4 !important;
}

.h-fit {
    height: fit-content;
}

.h-min {
    height: min-content;
}

.auto-complete {
    box-sizing: border-box;
    position: relative;
    color: inherit;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)),
        border-box var(--neutral-stroke-input-rest);
    border: calc(var(--stroke-width) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius) * 1px);
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.auto-complete input.form-control {
    appearance: none;
    color: inherit;
    background: transparent;
    border: 0px;
    height: calc(100% - 4px);
    margin-top: auto;
    margin-bottom: auto;
    padding: 0 calc(var(--design-unit) * 2px + 1px);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.auto-complete input.form-control::placeholder {
    color: transparent !important;
}

.auto-complete input.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

.auto-complete .dropdown-list {
    padding: 0 !important;
}

.offcanvas-auto-complete .auto-complete {
    width: 90.8%;
}

input[type="file" i] {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 31.99px;
}

.lock-btn {
    right: -6.5rem;
    top: 4.5rem;
    border-radius: 5rem;
    color: white;
    transition: .2s;
    z-index: 0;
    width: 9.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.lock-btn:hover {
    right: -2.25rem;
}

@media (max-width: 767px) {

    .lock-btn {
        top: 9rem;
    }

}

.sidebar {
    z-index: +2;
}

.input-file-wrapper {
    height: 33.99px;
    border: 1px solid #efefef;
}

.input-file-wrapper::after {
    width: 99.5%;
    right: .25%;
    left: .25%;
    position: absolute;
    bottom: -0;
    background-color: #929292;
    height: .75px;
    content: "";
}

.input-file-wrapper p {
    height: 31.99px;
    display: flex;
    align-items: center;
}

.item-image-preview-wrapper .position-relative {
    height: 12.5vw;
    width: 12.5vw;
    border-radius: 4px;
}

.item-image-preview-wrapper .position-relative .left-0 {
    left: 0;
}

.item-image-preview-wrapper .position-relative .right-0 {
    right: 0;
}

.item-image-preview-wrapper .position-relative img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
}

@media (max-width: 767px) {

    .item-image-preview-wrapper .position-relative {
        height: calc(50vw - 2.875rem);
        width: calc(50vw - 2.875rem);
        margin-bottom: .5rem;
    }

}

.w-3 {
    width: 3rem;
}

.w-5 {
    width: 5rem;
}

.w-7 {
    width: 7rem;
}

.w-10 {
    width: 10rem;
}

.w-15 {
    width: 15rem;
}

.min-w-unset {
    min-width: unset;
}

.img-modal-body img {
    width: 100%;
    height: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.rounded-border-start-end-radius {
    border-start-end-radius: .3rem;
}

.rounded-border-start-start-radius {
    border-start-start-radius: .3rem;
}

.rounded-border-end-end-radius {
    border-end-end-radius: .3rem;
}

.rounded-border-end-start-radius {
    border-end-start-radius: .3rem;
}

@media (min-width: 992px) {

    .modal-body-no-scroll-height {
        height: calc(100vh - 10rem);
        overflow-y: hidden !important;
    }

}

#listView .item-button {
    height: 100px;
}

.item-button small {
    /* overflow-y: auto; */
    /* height: fit-content; */
    /* width: 100%; */
}

.fit-cover {
    object-fit: cover;
}

.fit-contain {
    object-fit: contain;
}

.sidebar {
    transition: .2s ease-in-out;
}

.navbar-brand img {
    width: 60%;
}

.sidebar-toggle-btn {
    max-width: 2.5rem;
    height: 2.5rem;
    margin-inline-start: -4.5rem;
    transition: .2s ease-in-out;
}

.sidebar-toggle-btn-rotate {
    transform: rotate(-180deg);
    margin-inline-start: -3.7rem;
}

@media (min-width: 992px) {
    div.sidebar.sidebar-collapse {
        width: 3rem !important;
    }

    .sidebar-collapse .navbar-brand img:first-child {
        display: none !important;
    }

    .sidebar-collapse .navbar-brand img:nth-child(2) {
        display: block !important;
        width: 100%;
        margin: 0 !important;
        margin-top: 3rem !important;
    }

    .sidebar-collapse .navbar-brand {
        padding: .5rem !important;
        width: 100%;
    }

    .sidebar-collapse .nav-item {
        padding: .2rem 0 !important;
    }

    .sidebar-collapse .nav-link span {
        display: none !important;
    }

    .sidebar-collapse .nav-link .ms-Icon {
        margin: 0 !important;
    }
}

@media (max-width: 993px) {

    .sidebar-toggle-btn,
    .sidebar-toggle-btn-rotate {
        display: none !important;
    }

    .navbar-brand img:nth-child(2) {
        display: block !important;
    }

    main {
        width: calc(100vw - 3rem);
    }
}

@media (min-width: 767px) {
    .navbar-brand img:first-child {
        display: none !important;
    }

    .navbar-brand img:nth-child(2) {
        display: block !important;
        width: unset;
        height: 2rem;
        margin: 0 .5rem !important;
    }
}

@media (max-width: 767px) {
    main {
        width: 100vw;
    }

    div.sidebar {
        width: 100% !important;
    }

    .navbar-brand {
        width: 100% !important;
    }

    .sidebar-collapse .navbar-brand img:nth-child(2) {
        display: none !important;
    }

    .sidebar-collapse .navbar-brand img:first-child {
        display: block !important;
        width: unset;
        height: 2rem;
        margin-inline-end: auto !important;
    }

    .top-row {
        flex-wrap: wrap;
        height: auto !important;
    }

    .top-row nav {
        margin-bottom: .5rem;
    }
}

@media (min-width: 992px) {
    .navbar-brand img:first-child {
        display: block !important;
    }

    .navbar-brand img:nth-child(2) {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .navbar-brand img:nth-child(2) {
        display: none !important;
    }
}

.help-btn {
    position: absolute;
    bottom: 4rem;
    z-index: +10;
    transform: rotate(-90deg);
    right: 0;
    margin-inline-end: -2.5rem;
}

.help-btn:hover {
    margin-inline-end: -2rem;
}

.blazored-modal {
    margin-top: 1.75rem;
    margin-bottom: auto;
}

.blazored-modal {
    width: 100%;
    max-width: 500px;
    padding: 0;
}

.blazored-modal-header {
    display: none;
}

.blazored-modal-content .modal-body {
    min-height: 50vh;
}

.blazored-modal-content .modal-body.h-fit {
    min-height: unset;
}

@font-face {
    font-family: 'info';
    font-style: normal;
    font-weight: 400;
    src: url(../font/PFDinTextUniversal-Regular.otf) format('opentype'),
        url(../font/PFDinTextUniversal-XThin.otf) format('opentype'),
        url(../font/PFDinTextUniversal-XBlack.otf) format('opentype'),
        url(../font/PFDinTextUniversal-Light.otf) format('opentype'),
        url(../font/PFDinTextUniversal-Bold.otf) format('opentype');
}

.info-font {
    font-family: "info" !important;
}

.max-vh-60 {
    max-height: 60vh !important;
}

@media (min-width: 992px) {
    .max-vh-80 {
        height: 77.5vh !important;
    }
    .max-vh-85 {
        height: 81vh !important;
    }
}

span.rounded-circle.circle {
    width: 2rem;
    height: 2rem;
}

span.rounded-pill.pill {
    height: 2rem;
}

@media (max-width: 992px) {
    .flex-sm-column .border-start.border-end {
        border: none !important;
        border-top: 1px solid #deecf9 !important;
        border-bottom: 1px solid #deecf9 !important;
    }
}

.custom-modal-lg {
    max-width: 800px;
}

.blazored-modal-scrollable {
    max-height: calc(96% - 1rem);
}

.custom-modal-xl {
    max-width: 1200px;
}

.custom-modal-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: unset;
    max-height: unset;
    margin-top: 0 !important;
}

.custom-modal-fullscreen .blazored-modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.custom-modal-fullscreen .blazored-modal-content .modal-body {
    overflow-y: auto;
}

.btn.stealth {
    background: padding-box linear-gradient(var(--neutral-fill-rest), var(--neutral-fill-rest)), border-box var(--neutral-stroke-control-rest);
    border: calc(var(--stroke-width) * 1px) solid transparent;
    flex-grow: 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px); */
    white-space: nowrap;
    outline: none;
    text-decoration: none;
    color: inherit;
    border-radius: 3px;
    fill: inherit;
    cursor: inherit;
    font-family: inherit;
    height: auto;
    cursor: pointer;
}

.btn.stealth:focus {
    outline: none;
    box-shadow: none;
}

fluent-select::part(listbox) {
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
}


fluent-select::part(listbox)::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

/* Track */
fluent-select::part(listbox)::-webkit-scrollbar-track {
    background: #fff !important;
}

/* Handle */
fluent-select::part(listbox)::-webkit-scrollbar-thumb {
    background: #036ac480 !important;
    border-radius: .35rem !important;
}

/* Handle on hover */
fluent-select::part(listbox)::-webkit-scrollbar-thumb:hover {
    background: #036ac4 !important;
}

fluent-button.fluent-sm {
    height: 1.75rem;
}

fluent-button.fluent-sm::part(start) {}

fluent-button.fluent-sm::part(control) {
    font-size: small;
    padding: .1rem;
    width: unset;
}

fluent-button.fluent-lg {
    height: 2.5rem;
}

fluent-button.fluent-lg::part(start) {
    padding: .25rem;
}

fluent-button.fluent-lg::part(control) {
    font-size: large;
}

fluent-button::part(content) {
    display: inline-flex;
    align-items: center;
}

fluent-button.fluent-lg::part(end) {
    padding: .25rem;
}

fluent-text-field.fluent-lg::part(root) {
    height: 2.5rem;
}

fluent-text-field.fluent-lg::part(control) {
    height: 2.5rem;
}

fluent-number-field.fluent-lg::part(root) {
    height: 2.5rem;
}

fluent-number-field.fluent-lg::part(control) {
    height: 2.5rem;
}

fluent-select.fluent-lg {
    height: 2.5rem;
}

fluent-select.fluent-lg::part(root) {
    height: 2.5rem;
}

fluent-select.fluent-lg::part(control) {
    height: 2.5rem;
}

fluent-combobox.fluent-lg {
    height: 2.5rem;
}

fluent-combobox.fluent-lg::part(root) {
    height: 2.5rem;
}

fluent-combobox.fluent-lg::part(control) {
    height: 2.5rem;
}

/* .badge{
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline-start: .75rem !important;
    padding-inline-end: .75rem !important;
}

.card .badge{
    height: auto;
    padding-inline-start: .25rem !important;
    padding-inline-end: .25rem !important;
} */

fluent-checkbox .badge {
    height: auto;
}

input{
    padding-inline-start: .5rem !important;
    padding-inline-end: .5rem !important;
}

.apexcharts-pan-icon.apexcharts-selected svg {
    stroke: #036ac4 !important;
}

.apexcharts-toolbar>div {
    margin-inline-end: .125rem !important;
}

table tr.ms-bgColor-error {
    background-color: #fde7e9 !important;
}

@media (max-width: 992px) {
    .login-form {
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    .border-bottom-lg-0 {
        border-bottom: 0;
    }
}

tbody tr td fluent-tooltip div::part(tooltip) {
    box-shadow: var(--elevation-shadow-flyout) !important;
}

fluent-tooltip div.tooltip {
    box-shadow: var(--elevation-shadow-flyout) !important;
}

.zoom100 {
    zoom: 100% !important;
}

.zoom110>* {
    zoom: 110% !important;
}

.zoom120>* {
    zoom: 120% !important;
}

fluent-select {
    height: 2rem;
}

fluent-select::part(control) {
    border: 1px solid #efefef !important;
    border-radius: 5px;
}

fluent-text-field.filled::part(root) {
    background-color: #eff6fc !important;
    border: 1px solid #deecf9;
}

fluent-text-field.disabled::part(root) {
    background-color: #eff6fc !important;
    border: 1px solid #deecf9;
}

fluent-text-field.disabled {
    opacity: 1 !important;
}

fluent-button.lightweight::part(control) {
    border: 1px solid #efefef;
}

html:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

.no-internet-message {
    padding: 0 1rem;
    height: 0;
    overflow: hidden;
    border-width: 0 !important;
    transition: ease-in-out .2s;

}

.no-internet-message.show {
    padding: .5rem 1rem;
    height: auto;
    border-width: 1px !important;
    margin-bottom: 1rem;
}

fluent-button.transparent::part(control) {
    background: transparent !important;
    font-size: 16px;
    font-weight: bold;
    transition: .2s all ease-in-out;
}

.btn-tab {
    padding: .5rem;
    padding-bottom: 1rem;
    height: auto;
    text-transform: capitalize;
    outline: unset;
    border: unset;
    box-shadow: unset;
    margin-bottom: 3px;
    transition: .3 all;
}

.btn-tab:focus {
    outline: unset;
    border: unset;
    box-shadow: unset;
}

.btn-tab.active {
    font-weight: bold;
    color: var(--accent-fill-rest);
    background-color: #deecf9;
    position: relative;
}

.btn-tab.active::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 3px;
    border-radius: .5rem;
    background-color: var(--accent-fill-rest);
    bottom: .5rem;
}

.custom-validation,
.custom-validation::part(root) {
    /* border: none; */
}

.custom-validation::part(control) {
    /* border: 1px solid #dc3545 !important; */
    border-radius: .3rem;
}

input.custom-validation,
.input-file-wrapper.custom-validation {
    /* border: 1px solid #dc3545; */
}

.custom-input input.custom-validation + .underline{
    border: 1px solid #dc3545;
    width: 100%;
}

fluent-text-field.custom-validation::part(root){
    display: flex;
    position: relative;
}

fluent-text-field.custom-validation::after{
    width: 100%;
    border: 1px solid #dc3545;
    content: "";
    position: absolute;
    bottom: 0;
    border-end-end-radius: 1px;
    border-end-start-radius: 1px;
}

input.custom-validation::after{
    border: 1px solid #dc3545;
    width: 100%;
}

.custom-input input.custom-validation+.underline {
    background-color: #dc3545;
    width: 100%;
}

.custom-validation::placeholder,
.custom-validation::part(control)::placeholder,
.custom-input input.custom-validation::placeholder {
    color: #dc3545 !important;
}

.custom-validation:focus::placeholder,
.custom-validation::part(control):focus::placeholder,
.custom-input input.custom-validation:focus::placeholder {
    color: #767676 !important;
}

.input-file-wrapper.custom-validation::after,
fluent-text-area.custom-validation::after,
fluent-number-field.custom-validation::after,
fluent-select.custom-validation::after,
fluent-text-field.custom-validation::after {
    width: 100%;
    border: none !important;
    border-bottom: 2px solid #dc3545 !important;
    content: "";
    position: absolute;
    bottom: 0;
    border-end-end-radius: 1px;
    border-end-start-radius: 1px;
    margin: 0 auto !important;
    left: 0%;
}

.input-file-wrapper.custom-validation span {
    color: #dc3545 !important;
}

fluent-text-area.custom-validation:focus::after,
fluent-number-field.custom-validation:focus::after,
fluent-select-field.custom-validation:focus::after,
fluent-text-field.custom-validation:focus::after {
    border: none !important;
    border-bottom: 2px solid var(--accent-fill-rest) !important;
}

input[type=date].custom-validation::after,
input[type=time].custom-validation::after,
input[type=datetime-local].custom-validation::after {
    background-color: #dc3545 !important;
    width: 100%;
    left: 0;
}

fluent-select.custom-validation{
    height: 39px !important;
}

fluent-select.custom-validation::part(control){
    height: 37px !important;
}

fluent-select.custom-validation::after{
    /* bottom: -9px; */
}

label.custom-required::after,
.custom-required::part(label)::after {
    content: " *";
    margin-inline-start: .25rem;
}

.profile-pic-btn {
    height: 2rem;
    min-width: 2.25rem;
    width: 2.25rem;
    border-radius: .3rem;
    border: 1px solid #efefef;
    background-color: #ffffff;
    color: #005a9e !important;
}

.profile-pic-btn:hover {
    background-color: #efefef;
    color: #005a9e !important;
}

.profile-pic-check {
    height: 7rem;
    width: 7rem;
    border-radius: 100%;
    border: 1px solid #efefef;
    background-color: #036ac420;
}

.profile-pic-check img {
    height: 100%;
    width: 100%;
    border-radius: .3rem;
    object-fit: cover;
}

.profile-pic-btn::after {
    content: none !important;
}

.profile-pic-btn img {
    height: 100%;
    width: 100%;
    border-radius: .3rem;
    object-fit: cover;
}

.h-input {
    height: 40px;
}

.word-break-all {
    word-break: break-all;
}

.mud-input-control.mud-input-control-margin-dense {
    margin-top: 0;
    margin-bottom: 0;
}

.mud-popover {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 calc(32 * 0.5px) calc((32 * 1px)) rgba(0, 0, 0, 0.24) !important;
    border-radius: .3rem !important;
    margin-top: .5rem !important;
}

.mud-popover.mud-popover-open {
    overflow-y: hidden;
}

.mud-list {
    background: var(--fill-color);
    box-sizing: border-box;
    max-height: calc(var(--max-height) - ((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px));
    padding: calc((var(--design-unit) - var(--stroke-width)) * 1px);
    overflow-y: auto;
    width: 100%;
    z-index: 1;
    margin: 1px 0px;
    border: calc(var(--stroke-width) * 1px) solid transparent;
}

.mud-list-item-icon {
    min-width: 1.66rem;
}

.mud-list.mud-list-padding {
    padding-top: .1rem !important;
    padding-bottom: .1rem !important;
}

.mud-list-item {
    padding-inline-start: 7px;
    padding-inline-end: 7px;
    border-radius: .3rem;
}

.mud-list-item .mud-icon-root.mud-svg-icon {
    fill: var(--accent-fill-rest);
}

.mud-input.mud-input-underline:before,
.mud-input.mud-input-underline:hover:not(.mud-disabled):before {
    border-bottom: 0;
}

.mud-input:focus-within {
    border-bottom: 0;
}

.mud-ripple:after {
    background: transparent !important;
}

.mud-input-slot, .mud-input-slot:focus{
    box-sizing: border-box !important;
    border: none !important;
    height: 40px;
}

.mud-input>input.mud-input-root.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    padding: 0;
    font-size: 14px;
}

.border-field {
    border-color: #efefef !important;
}

.card.bg-soft-primary {
    background-color: #a0d4ff80 !important;
}

.card.bg-soft-primary, .card.bg-soft-primary .card-header {
    border-color: #a0d4ff !important;
}

.card.bg-soft-primary:hover {
    background-color: #c5e5ff !important;
}

.card.bg-soft-success {
    background-color: #a4ecb080 !important;
}

.card.bg-soft-success:hover {
    background-color: #a4ecb0 !important;
}

.card.bg-soft-warning {
    background-color: #ffe59d80 !important;
}

.card.bg-soft-warning:hover {
    background-color: #ffe59d !important;
}

.card.bg-soft-danger {
    background-color: #ffbfb480 !important;
}

.card.bg-soft-danger:hover {
    background-color: #ffbfb4 !important;
}

.card.bg-soft-success,
.card.bg-soft-success .card-header {
    border-color: #9ecf98 !important;
}

.card.bg-soft-warning,
.card.bg-soft-warning .card-header {
    border-color: #ebbf7e !important;
}

.card.bg-soft-danger,
.card.bg-soft-danger .card-header {
    border-color: #df9e93 !important;
}

.cursor-pointer {
    cursor: pointer;
}

hr {
    background-color: #deecf9 !important;
    border-color: #deecf9 !important;
}

button.btn-sort, fluent-button.btn-sort::part(control){
    background: transparent !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
    transition: .2s all ease-in-out;
}

button.btn-sort:hover, fluent-button.btn-sort::part(control):hover{
    color: #fff !important;
    background: #ffffff10 !important;
}

button.btn-sort, fluent-button.btn-sort .ms-Icon{
    color: #fff !important;
    font-size: 10px;
    transition: .2s all ease-in-out;
}

button.btn-sort.descending-sort .ms-Icon, fluent-button.btn-sort.descending-sort .ms-Icon{
    transform: rotate(180deg);
}

button.btn-sort.ascending-sort .ms-Icon, fluent-button.btn-sort.ascending-sort .ms-Icon{
    transform: rotate(0);
}

.modal-backdrop{
    z-index: 99 !important;
}

.filter-popover{
    min-width: 400px;
}

.modal-body nav ol.breadcrumb li.breadcrumb-item *, .modal-body nav ol.breadcrumb li.breadcrumb-item::before{
    color: inherit !important;
}

/* custom input */

.custom-input {
    position: relative;
    display: flex;
    justify-content: center;
}

.custom-input input {
    border: 1px solid transparent;
    padding: 5px 9px 4px;
    border-radius: 4px;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)),
        border-box var(--neutral-stroke-input-rest);
    transition: .2s;
    font-size: 14px;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: visible;
    height: 2rem;
}

.custom-input input:focus-visible,
.custom-input input:focus-within,
.custom-input input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.custom-input .custom-slot,
.custom-input .custom-slot.start {
    position: absolute;
    top: 6.5px;
    left: 6.5px;
    padding: 2px 5px;
    z-index: +1;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-input .custom-slot.end {
    position: absolute;
    top: 6.5px;
    right: 6.5px;
    left: auto;
    padding: 2px 5px;
    z-index: +1;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-input button.custom-slot.top-5px {
    top: 5px !important;
}

.custom-input .custom-slot img {
    width: 14px;
    margin: 5px 0;
}

.custom-input button.custom-slot:hover {
    background-color: #00000020 !important;
}

.custom-input .custom-slot.start~input,
.custom-input .custom-slot~input {
    padding: 8px 9px 8px 32px !important;
}

.custom-input .custom-slot.end~input {
    padding: 8px 32px 8px 9px !important;
}

.custom-input .custom-slot.start~input,
.custom-slot.end~input {
    padding: 8px 32px 8px 32px !important;
}

td .custom-input {
    width: 100%;
}

td .custom-input input {
    width: 100%;
}

.custom-input .valid.modified:not([type=checkbox]) {
    outline: none !important;
}

.custom-input .valid.modified:not([type=checkbox])~.underline {
    outline: none !important;
    background-color: #107c10;
    width: 100%;
}

.custom-input input[type=time].valid.modified:not([type=checkbox])~.underline {
    outline: none !important;
    background-color: inherit !important;
    width: 100%;
}

.custom-input .underline {
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 0%;
    background-color: var(--accent-fill-rest);
    content: "";
    z-index: +1;
    border-end-end-radius: 1px;
    border-end-start-radius: 1px;
}

.custom-input input:focus+.underline {
    transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1) 0s;
    width: 100.25%;
    background-color: var(--accent-fill-rest);
}

/* zoom */

.mud-input{
    height: 40px;
}

.btn{
    font-size: 18px;
}

fluent-button, .btn{
    height: 40px;
}

button#powerBtn{
    height: 40px;
    width: 40px !important;
}

fluent-button::part(control), button#powerBtn{
    font-size: 120% !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

span, label, ::part(label){
    font-size: 18px !important;
}

input, .custom-input .custom-slot.end~input, button{
    font-size: 100% !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

fluent-text-field::part(root){
    font-size: 100% !important;
    height: 38px !important;
}

fluent-text-field::part(control){
    font-size: 100% !important;
    height: 40px !important;
    font-size: 18px !important;
}

fluent-select::part(control), fluent-select{
    font-size: 100% !important;
    height: 38px !important;
    font-size: 18px !important;
}

fluent-text-area::part(control){
    font-size: 100% !important;
    height: 75px !important;
    font-size: 18px !important;
}

.custom-input button{
    padding: 4px 5px !important;
}

.mud-input>input.mud-input-root.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root.mud-input-root-margin-dense{
    padding: 8px !important;
}

.modal-header fluent-button::part(control){
    border: 1px solid #deecf9;
}

button.btn-sm{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: auto !important;
}

/* table-custom-responsive */

.table-xl-responsive tr td span.thead,
.table-lg-responsive tr td span.thead,
.table-md-responsive tr td span.thead,
.table-sm-responsive tr td span.thead{
    display: none;
}

@media (max-width: 1200px) {
    table.table-xl-responsive{
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    
    .table-xl-responsive thead{
        display: none;
    }
    
    .table-xl-responsive tbody{
        flex-direction: column;
        display: flex;
    }
    
    .table-xl-responsive tr{
        display: flex;
        flex-direction: column;
        /* align-items: ; */
        width: 100%;
        border: 0;
        border: 1px solid var(--borderColor) !important;
        border-radius: 4px;
        background-color: #f8fcff !important;
        margin-bottom: .5rem;
    }
    
    .table-xl-responsive tr:last-child{
        border-bottom: 0 !important;
    }
    
    .table-xl-responsive tr td{
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        /* border-bottom: 1px solid var(--borderColor) !important; */
        width: 100% !important;
        padding: .25rem !important;
    }
    
    .table-xl-responsive tr td span.thead{
        font-weight: bold;
        margin-inline-end: .5rem !important;
        display: block;
    }

    table.table-xl-responsive tbody tr td div{
        width: 100% !important;
    }

    table.table-xl-responsive tbody tr td fluent-button{
        width: 100% !important;
    }
}

@media (max-width: 992px) {
    table.table-lg-responsive{
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    
    .table-lg-responsive thead{
        display: none;
    }
    
    .table-lg-responsive tbody{
        flex-direction: column;
        display: flex;
    }
    
    .table-lg-responsive tr{
        display: flex;
        flex-direction: column;
        /* align-items: ; */
        width: 100%;
        border: 0;
        border: 1px solid var(--borderColor) !important;
        border-radius: 4px;
        background-color: #f8fcff !important;
        margin-bottom: .5rem;
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
    
    .table-lg-responsive tr:last-child{
        /* border-bottom: 0 !important; */
    }
    
    .table-lg-responsive tr td{
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        /* border-bottom: 1px solid var(--borderColor) !important; */
        width: 100% !important;
        padding: .25rem .5rem !important;
    }
    
    .table-lg-responsive tr td span.thead{
        font-weight: bold;
        margin-inline-end: .5rem !important;
        display: block;
    }
    .table-xl-responsive tr td fluent-button{
        width: 100%;
    }

    table.table-lg-responsive tbody tr td div {
        width: 100% !important;
    }

    table.table-lg-responsive tbody tr td fluent-button {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    table.table-md-responsive{
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    
    .table-md-responsive thead{
        display: none;
    }
    
    .table-md-responsive tbody{
        flex-direction: column;
        display: flex;
    }
    
    .table-md-responsive tr{
        display: flex;
        flex-direction: column;
        /* align-items: ; */
        width: 100%;
        border: 0;
        border: 1px solid var(--borderColor) !important;
        border-radius: 4px;
        background-color: #f8fcff !important;
        margin-bottom: .5rem;
    }
    
    .table-md-responsive tr:last-child{
        border-bottom: 0 !important;
    }
    
    .table-md-responsive tr td{
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        /* border-bottom: 1px solid var(--borderColor) !important; */
        width: 100% !important;
    }
    
    .table-md-responsive tr td span.thead{
        font-weight: bold;
        margin-inline-end: .5rem !important;
        display: block;
    }
    .table-xl-responsive tr td fluent-button{
        width: 100%;
    }

    table.table-md-responsive tbody tr td div {
        width: 100% !important;
    }

    table.table-md-responsive tbody tr td fluent-button {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    table.table-sm-responsive{
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    
    .table-sm-responsive thead{
        display: none;
    }
    
    .table-sm-responsive tbody{
        flex-direction: column;
        display: flex;
    }
    
    .table-sm-responsive tr{
        display: flex;
        flex-direction: column;
        /* align-items: ; */
        width: 100%;
        border: 0;
        border: 1px solid var(--borderColor) !important;
        border-radius: 4px;
        background-color: #f8fcff !important;
        margin-bottom: .5rem;
    }
    
    .table-sm-responsive tr:last-child{
        border-bottom: 0 !important;
    }
    
    .table-sm-responsive tr td{
        display: flex;
        justify-content: space-between;
        border: 0 !important;
        /* border-bottom: 1px solid var(--borderColor) !important; */
        width: 100% !important;
    }
    
    .table-sm-responsive tr td span.thead{
        font-weight: bold;
        margin-inline-end: .5rem !important;
        display: block;
    }
    .table-xl-responsive tr td fluent-button{
        width: 100%;
    }
    table.table-sm-responsive tbody tr td div {
        width: 100% !important;
    }

    table.table-sm-responsive tbody tr td fluent-button {
        width: 100% !important;
    }
}

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