@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/roboto-regular.woff2') format('woff2'),
        url('../fonts/Roboto/roboto-regular.woff') format('woff'),
        url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: 'Roboto', sans-serif !important;
    /*background: #fafafa;*/
    font-size: 0.8rem;
}

h1 {
    font-size: 1.65rem !important;
    margin-top: 0 !important;
    margin-bottom: .5rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

a {
    text-decoration: none !important;
}
.form-rounded {
    border-radius: 1rem;
}
legend {
    font-size: 0.775rem;
}
label {
    margin-bottom: .5rem;
}

.btn-group-sm > .btn, .btn-xsm {
    padding: .0rem .2rem;
    font-size: .6rem;
    border-radius: .2rem;
}


.xsmall {
    font-size: .6rem;
}


.checkbox label, .checkboxlist label {
    margin-bottom: 0.5rem !important;
    margin-left: 1rem !important;
    display: inline-block;
}

.btn-default {
    color: white !important;
    background-color: #5B5E63 !important;
    border-color: #5B5E63 !important
}

.btn-golden {
    color: white !important;
    background-color: #B68A35 !important;
    border-color: #B68A35 !important
}

.btn-maroon {
    color: white !important;
    background-color: #9E0D16 !important;
    border-color: #9E0D16 !important
}

.btn-green {
    color: white !important;
    background-color: #06673A !important;
    border-color: #06673A !important
}

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";



/*body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}*/

.dashboardLink1 {
    font-size: large;
    text-decoration: none;
}

.dashboardLink2 {
    font-size: medium;
    text-decoration: none;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}



#sidebar {
    transition: all 0.3s;
    background-color: #fafafa;
    padding-right: 1rem;
}

    #sidebar.active {
        margin-left: -450px;
    }

    #sidebar .sidebar-header {
        /*padding: 20px;*/
    }

    #sidebar ul.components {
        padding: 20px 0;
    }

    #sidebar ul.components {
        padding: 20px 0;
        border-bottom: 1px solid #47748b;
    }

    #sidebar ul p {
        color: #fff;
        padding: 10px;
    }

    #sidebar ul li {
        margin-top: 1.1em;
    }

        #sidebar ul li a {
            /*padding: 10px;
        font-size: 1.1em;
        display: block;*/
            font-size: 0.9rem;
        }

            #sidebar ul li a:hover {
                /*color: #7386D5;
background: #fff;*/
            }

/* Ensure the blinking class itself applies the initial color.
   SC 1.4.3 — A-13 — #D32F2F gives 5.3:1 on white (vs ~4.0:1 for pure red). */
.blinking {
    animation: blinker 2s linear infinite;
    color: #D32F2F !important; /* Default color */
}

/* SC 2.2.2 Pause Stop Hide / 2.3.1 Three Flashes — honour the user's
   reduced-motion preference and stop the blink. */
@media (prefers-reduced-motion: reduce) {
    .blinking { animation: none !important; color: #D32F2F !important; }
}

input[readonly] {
    background-color: #f8f9fa; /* Light gray or any color you like */
}

textarea[readonly] {
    background-color: #f8f9fa; /* Light gray or any color you like */
}

@keyframes blinker {
    0% {
        opacity: 1;
        color: #D32F2F !important; /* Start with red */
    }

    50% {
        opacity: 0.5;
        color: black !important; /* Change to black */
    }

    100% {
        opacity: 1;
        color: red !important; /* End with red */
    }
}





.btnSubmit {
    width: 50%;
}


.k-grid .k-table-th {
    border-block-end-width: 1px !important;
    border-block-end-color: black !important;
    white-space: nowrap !important;
    font-weight: bold !important;
}


.k-grid th,
.k-grid td {
    border-left: none !important;
    border-right: none !important;
    /* SC 1.4.4 Resize Text — switched from fixed 12px !important to a
       relative unit so the user's zoom / text-size preference takes effect. */
    font-size: 0.775rem;
    background-color: white !important;
    border-bottom-width: 1px !important;
}

/*Scroll Bar*/
/* width */
.customSidebar::-webkit-scrollbar {
    width: 5px;
}

/*Track*/
.customSidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/*Handle*/
.customSidebar::-webkit-scrollbar-thumb {
    background: #888;
}

    /*Handle on hover*/
    .customSidebar::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/******/



.ribbonBox {
    position: relative;
}

.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 400px;
    height: 184px;
    text-align: right;
}

    .ribbon span {
        font-size: 10px;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        line-height: 20px;
        transform: rotate(36deg);
        width: 300px;
        display: block;
        background: #79A70A;
        background: linear-gradient(#9BC90D 0%, #79A70A 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 71px;
        right: -34px;
    }



        .ribbon span::before {
            content: '';
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #79A70A;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }

        .ribbon span::after {
            content: '';
            position: absolute;
            right: 0%;
            top: 100%;
            z-index: -1;
            border-right: 3px solid #79A70A;
            border-left: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #79A70A;
        }

.redRibbon span {
    background: linear-gradient(#F70505 0%, #8F0808 100%);
}

    .redRibbon span::before {
        border-left-color: #8F0808;
        border-top-color: #8F0808;
    }

    .redRibbon span::after {
        border-right-color: #8F0808;
        border-top-color: #8F0808;
    }

.blueRibbon span {
    background: linear-gradient(#2989d8 0%, #1e5799 100%);
}

    .blueRibbon span::before {
        border-left-color: #1e5799;
        border-top-color: #1e5799;
    }

    .blueRibbon span::after {
        border-right-color: #1e5799;
        border-top-color: #1e5799;
    }


.icon-button {
    border: none;
    background: none;
    /* add any other styles you need */
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(191, 191, 191, 0.70); /* semi-transparent black */
    z-index: 9999; /* ensure the overlay is on top of other elements */
}

#divLoadingContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2000;
}
.btn-outline-info {
    border-color: #9c7322; /* Change border color */
    color: #9c7322; /* Change text color to match border */
}

    .btn-outline-info:hover,
    .btn-outline-info:focus,
    .btn-outline-info:active,
    .btn-outline-info.active,
    .show > .btn-outline-info.dropdown-toggle {
        color: white; /* Change text color on hover */
        background-color: #9c7322; /* Change background color on hover */
        border-color: #9c7322; /* Ensure border color remains the same on hover */
    }

.btn-custom {
    background-color: transparent !important; /* Remove button background color */
    border: none !important; /* Remove button border */
    color: ##e3391d !important; /* Button text color */
    cursor: pointer !important;
    padding: 0 !important; /* Remove padding if necessary */
    text-align: center !important; /* Center the text */
    line-height: 1 !important; /* Ensure proper alignment */
}

.k-disabled {
    background-color: #e9ecef !important;
}
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
/*#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}*/
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        display: none;
        position: absolute;
        z-index: 1;
        margin-top: 50px;
    }

        #sidebar.active {
            margin-left: 0;
        }

    #sidebarCollapse span {
        display: none;
    }
}
.tooltip-inner {
    background-color: black; /* Yellow background */
    color: #fff; /* Dark text */
    font-size: 14px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
}
.highlight_diff {
    border: 1px solid #ffcc00;
    background-color: #efe4c236 !important;
}

.alert-custom {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
    --tw-shadow-color: rgba(182, 138, 53, 0.3);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-bg-opacity: 1;
    background-color: rgb(249 247 237 / var(--tw-bg-opacity));
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(215 188 109 / var(--tw-border-opacity));
    position: absolute;
    top: -10px;
    right: -5px;
    width: 230px;
    z-index: 5;
    text-align:justify;
}
.my-cross-button {
    background-color: transparent !important; /* Remove button background color */
    border: none !important; /* Remove button border */
    color: #e3391d !important; /* Button text color */
    cursor: pointer !important;
    padding: 0 !important; /* Remove padding if necessary */
    text-align: center !important; /* Center the text */
    line-height: 1 !important; /* Ensure proper alignment */
}


.udp-comments {
    --udp-c-surface: #ffffff;
    --udp-c-muted: #f7f7f5;
    --udp-c-border: rgba(0, 0, 0, 0.08);
    --udp-c-border-2: rgba(0, 0, 0, 0.14);
    --udp-c-border-d: rgba(0, 0, 0, 0.18);
    --udp-c-text: #1a1a1a;
    --udp-c-text-3: #8a8a86;
    --udp-c-master: #d97706;
    --udp-c-radius: 10px;
    --udp-c-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--udp-c-font);
    color: var(--udp-c-text);
}

.udp-comments__item {
    display: flex;
    gap: 10px;
    background: var(--udp-c-surface);
    border: 1px solid var(--udp-c-border);
    border-radius: var(--udp-c-radius);
    padding: 12px;
    transition: border-color 0.15s ease;
}

    .udp-comments__item:hover {
        border-color: var(--udp-c-border-2);
    }

    .udp-comments__item.is-master {
        border-left: 3px solid var(--udp-c-master);
    }

.udp-comments__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    user-select: none;
}

.udp-comments__avatar--purple {
    background: #EEEDFE;
    color: #3C3489;
}

.udp-comments__avatar--blue {
    background: #E6F1FB;
    color: #0C447C;
}

.udp-comments__avatar--teal {
    background: #E1F5EE;
    color: #085041;
}

.udp-comments__avatar--amber {
    background: #FAEEDA;
    color: #854F0B;
}

.udp-comments__avatar--pink {
    background: #FBEAF0;
    color: #72243E;
}

.udp-comments__avatar--coral {
    background: #FAECE7;
    color: #712B13;
}

.udp-comments__avatar--green {
    background: #EAF3DE;
    color: #27500A;
}

.udp-comments__avatar--neutral {
    background: #ECECEA;
    color: #5a5a58;
}

.udp-comments__content {
    flex: 1 1 auto;
    min-width: 0;
}

.udp-comments__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.udp-comments__author {
    font-size: 13px;
    font-weight: 600;
    color: var(--udp-c-text);
    word-break: break-word;
}

.udp-comments__time {
    font-size: 11px;
    color: var(--udp-c-text-3);
    margin-left: auto;
}

.udp-comments__delete {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--udp-c-text-3);
    border-radius: 4px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.udp-comments__item:hover .udp-comments__delete,
.udp-comments__item:focus-within .udp-comments__delete {
    opacity: 1;
}

.udp-comments__delete:hover {
    color: #c83232;
    background: var(--udp-c-muted);
}

@media (hover: none) {
    .udp-comments__delete {
        opacity: 1;
    }
}

.udp-comments__body {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--udp-c-text);
    overflow-wrap: anywhere;
}

    .udp-comments__body > p:first-child {
        margin-top: 0;
    }

    .udp-comments__body > p:last-child {
        margin-bottom: 0;
    }

    .udp-comments__body img,
    .udp-comments__body table {
        max-width: 100%;
    }

/* Empty state */
.udp-comments--empty .udp-comments__empty {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed var(--udp-c-border-d);
    border-radius: var(--udp-c-radius);
    padding: 12px;
    color: var(--udp-c-text-3);
    font-style: italic;
    font-size: 13px;
    background: var(--udp-c-muted);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .udp-comments {
        --udp-c-surface: #232323;
        --udp-c-muted: #2a2a2a;
        --udp-c-border: rgba(255, 255, 255, 0.08);
        --udp-c-border-2: rgba(255, 255, 255, 0.14);
        --udp-c-border-d: rgba(255, 255, 255, 0.18);
        --udp-c-text: #f0f0ef;
        --udp-c-text-3: #8a8a86;
    }
}