/* --------------- Sizes --------------- */
:root {
    --nB-footer-height: 52px;
    --nB-admin-color: color-mix(in oklab, var(--mud-palette-primary), var(--mud-palette-secondary) 50%);
    --nB-admin-color-lighten: color-mix(in oklab, var(--mud-palette-primary-lighten), var(--mud-palette-secondary-lighten) 50%);
    --nB-admin-color-darken: color-mix(in oklab, var(--mud-palette-primary-darken), var(--mud-palette-secondary-darken) 50%);
}

@media (min-width: 426px) {
    :root {
        --nB-footer-height: 35px;
    }
}

.nB-min-vh-100 {
    min-height: calc(100vh - var(--mud-appbar-height) - var(--nB-footer-height));
}

.nB-footerPadding {
    padding-bottom: var(--nB-footer-height) !important;
}

.nBMaxFitSize {
    max-width: -webkit-fill-available;
    max-width: -moz-available;
}

.nBListWidth {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 1280px) {
    .nBListWidth {
        width: 100%;
        max-width: 100%;
    }
}


/* --------------- Others --------------- */

img {
    max-width: 100%;
    height: auto;
}

ol {
    padding-left: 0;
    list-style-position: inside !important;
}

ol > li > p {
    display: inline;
}

label {
    color: var(--mud-palette-text-primary);
}

p {
    font-size: var(--mud-typography-default-size);
}

h6, h5, h4, h3, h2, h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1 {
    font-size: var(--mud-typography-h6-size);
}

@media (min-width: 1200px) {
    h1 {
        font-size: var(--mud-typography-h6-size);
    }
}

h2 {
    font-size: var(--mud-typography-h6-size);
}

@media (min-width: 1200px) {
    h2 {
        font-size: var(--mud-typography-h6-size);
    }
}

h3 {
    font-size: var(--mud-typography-h6-size);
}

@media (min-width: 1200px) {
    h3 {
        font-size: var(--mud-typography-h6-size);
    }
}

h4 {
    font-size: var(--mud-typography-h6-size);
}

@media (min-width: 1200px) {
    h4 {
        font-size: var(--mud-typography-h6-size);
    }
}

h5 {
    font-size: var(--mud-typography-h6-size);
}

h6 {
    font-size: var(--mud-typography-default-size);
}

/* --------------- Background Colours --------------- */
.bgTransparent {
    background-color: transparent;
}




/* --------------- Scrollbar --------------- */
.nBScrollbar {
    scroll-behavior: smooth;
    scrollbar-width: auto;
    scrollbar-color: var(--mud-palette-primary-lighten) var(--mud-palette-primary-darken); /* scroll thumb and track */
}

.nBScrollbar::-webkit-scrollbar {
    width: 6px; /* Mostly for vertical scrollbars */
    height: 6px; /* Mostly for horizontal scrollbars */
    background-color: var(--mud-palette-primary-darken) !important;
    border-radius: 3px;
}

/* Track */
.nBScrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px var(--mud-palette-primary-darken) !important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/* Handle */
.nBScrollbar::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: var(--mud-palette-primary-lighten) !important;
    -webkit-box-shadow: inset 0 0 5px var(--mud-palette-primary-darken) !important;
}

.nBScrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-primary-lighten) !important;
}

.nBScrollbar::-webkit-scrollbar-thumb:active {
    background: var(--mud-palette-primary-lighten) !important;
}


/* Buttons */
.nBScrollbar::-webkit-scrollbar-button:single-button {
    background-color: transparent;
    display: block;
    border-style: solid;
    height: 10px;
    width: 10px;
    padding-bottom: 5px;
}

/* Up */
.nBScrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="10" height="10" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

/* Left */
.nBScrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="10" height="10" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m4.431 12.822l13 9A1 1 0 0 0 19 21V3a1 1 0 0 0-1.569-.823l-13 9a1.003 1.003 0 0 0 0 1.645z"%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

/* Down */
.nBScrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="10" height="10" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z"%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

/* Right */
.nBScrollbar::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="10" height="10" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M5.536 21.886a1.004 1.004 0 0 0 1.033-.064l13-9a1 1 0 0 0 0-1.644l-13-9A1 1 0 0 0 5 3v18a1 1 0 0 0 .536.886z"%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}




/* --------------- Currency Symbol --------------- */
.currency > .mud-input-control-input-container > .mud-input-adorned-start > .mud-input-adornment > p {
    font-size: var(--mud-typography-h6-size);
    font-weight: bold;
}


/* --------------- Max Lines --------------- */
.max-line-1s {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: anywhere;
    word-break: break-all;
    display: block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.max-line-1 textarea {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: anywhere;
    word-break: break-all;
    display: block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.max-line-1 input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: anywhere;
    word-break: break-all;
    display: block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.max-lines-2s {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.max-lines-2 textarea {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.max-lines-3s {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.max-lines-3 textarea {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.max-lines-4s {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}


/* --------------- Add a * in red after the label --------------- */
.requiredField:after {
    vertical-align: super;
    font-size: 12px;
    content: '*';
    color: red;
}

.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: red;
}


/* prevent Selection */
.com_preventSelect {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}