/* --------------- Sizes --------------- */
:root {
    --nB-footer-height: 52px;
    --dtas-legacy-color: #FFB3B3; /* Danger – Pastel Red color for the first rating level */
    --dtas-siloed-color: #FFD6A5; /* Warning – Pastel Orange color for the second rating level */
    --dtas-strategic-color: #FFFACD; /* Caution – Pastel Yellow color for the third rating level */
    --dtas-futureready-color: #B2FBA5; /* Good – Pastel Green color for the fourth rating level */
}

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

@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-w-sm-25 {
    width: 100%;
    max-width: 100%;
}

.nB-w-sm-50 {
    width: 100%;
    max-width: 100%;
}

.nB-w-sm-75 {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 426px) {
    .nB-w-sm-25 {
        width: 24%;
        max-width: 25%;
    }

    .nB-w-sm-50 {
        width: 49%;
        max-width: 50%;
    }

    .nB-w-sm-75 {
        width: 74%;
        max-width: 75%;
    }
}

.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;
}


/* Apply title casing to all button text */
.mud-button {
    text-transform: none;
}



/* RichText Box*/
/* --------------------------------------------------------------------------------- */
/* Fullscreen base container */
.mudex-richtexteditor .ql-editor {
    min-height: 150px;
    height: auto;
}

/* Fullscreen container for editor */
.cntMudRichTxt:fullscreen {
    width: 100vw !important;
    height: 100vh !important; /* Full viewport height */
    max-height: 100vh !important; /* Ensure it doesn't exceed viewport height */
    background: var(--mud-palette-background); /* optional background for fullscreen */
    display: flex;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 9999;
}

/* Ensure mudex-richtexteditor takes full height of the container */
.cntMudRichTxt:fullscreen .mudex-richtexteditor {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fix height of the container */
    max-height: 100%; /* Ensure it doesn't exceed the parent's height */
    overflow: hidden; /* Prevent any overflow */
}

/* Toolbar - sticky and non-scrollable */
.cntMudRichTxt:fullscreen .ql-toolbar {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 10000;
}

.cntMudRichTxt:fullscreen .mud-input-control {
    flex: 1; /* Take the remaining space */
    height: 100%; /* Ensure it takes full height */
    max-height: 100%; /* Prevent it from exceeding container height */
    overflow: hidden; /* Prevent outer overflow */
}

.cntMudRichTxt:fullscreen .mud-input-control-input-container {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden; /* Prevent outer overflow */
}


/* ql-container now fixed at 100% max-height based on parent height */
.cntMudRichTxt:fullscreen .ql-container {
    height: 100%; /* Fix the height to 100% */
    max-height: 100%; /* Ensure it doesn't expand further than parent */
    overflow-y: auto; /* Scroll when content exceeds available height */
    box-sizing: border-box; /* Make sure padding is included within height */
    background-color: var(--mud-palette-surface); /* Background color */
}

/* The editor itself */
.cntMudRichTxt:fullscreen .ql-editor {
    flex: 1;
    height: 100%; /* Ensure editor takes the full height */
    max-height: 100%; /* Ensure it doesn't exceed the container */
    min-height: unset !important;
    box-sizing: border-box; /* Prevent any overflow or clipping */
    background-color: var(--mud-palette-background); /* Background color */
}

/* Apply the custom scrollbar to the ql-container and ql-editor */
.cntMudRichTxt:fullscreen .ql-container,
.cntMudRichTxt:fullscreen .ql-editor {
    scrollbar-width: thin; /* Firefox: Thin scrollbar */
    scrollbar-color: var(--mud-palette-primary-darken) var(--mud-palette-background); /* Firefox */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.cntMudRichTxt:fullscreen .ql-container::-webkit-scrollbar,
.cntMudRichTxt:fullscreen .ql-editor::-webkit-scrollbar {
    width: 8px; /* Adjust width of the scrollbar */
    height: 8px; /* Adjust height for horizontal scrollbar */
}

.cntMudRichTxt:fullscreen .ql-container::-webkit-scrollbar-thumb,
.cntMudRichTxt:fullscreen .ql-editor::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-primary-darken); /* Thumb color */
    border-radius: 4px; /* Optional: Rounded corners */
}

.cntMudRichTxt:fullscreen .ql-container::-webkit-scrollbar-track,
.cntMudRichTxt:fullscreen .ql-editor::-webkit-scrollbar-track {
    background-color: var(--mud-palette-primary-darken); /* Track color */
    border-radius: 4px; /* Optional: Rounded corners */
}
/* --------------------------------------------------------------------------------- */