html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: Verdana, Arial, sans-serif !important;
    background-color: #cdc8c7 !important;
    gap: 0px !important;
}

.flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-style {
    height: 50px;
    font-size: 15pt;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    align-content: center;
    padding-left: 15px;
}

    .tab-style a {
        color: white !important;
        text-decoration: none !important;
        align-content: center;
        display: block; /* Ensure the link covers the full tab */
        width: 100%; /* Make the link cover the full width of the parent */
        border-bottom: #e84626 3px solid;
        border-top: #e84626 3px solid;
    }


        .tab-style a:hover {
            border-bottom: white 3px solid;
        }


.active-tab {
}

    .active-tab a {
        border-bottom: white 3px solid;
    }


@media (max-width: 768px) {
    .tab-style {
       
    }
        .tab-style a {
            display: none;
        }

            .active-tab {
        display: none;
    }
}

@media (min-width: 768px) {
    .k-drawer-content {
        height: 100% !important;
    }


}

main {
    flex: 1; 
}

header {
    position: sticky;
    top: 0;
    z-index: 100; /* Higher index to ensure header is above other content */
    background-color: #e84626 !important;
    font-size: 26px !important;
    color: #ffffff !important;
    font-weight: 500;
}

.title {
    display: block !important;
    white-space: nowrap !important; /* Prevents the text from wrapping */
    text-overflow: ellipsis !important; /* Adds an ellipsis (...) to any text that overflows */
    width: calc(100vw - 75px) !important;
    overflow: hidden;
    padding-left: 5px !important;
    font-size: 26px !important;
}

.link-style {
    background-color: inherit !important;
    text-decoration: none !important;
    width: 100% !important;
}
    .link-style:hover {
        background-color: #e84626 !important;
    }

.k-drawer-item k-drawer-separator k-state-selected {
    background-color: inherit !important;
}

.ag-theme-quartz {
    --ag-wrapper-border-radius: 0px !important;
}

/* This targets the horizontal scrollbar container in AG Grid */
.ag-body-horizontal-scroll {
    overflow-x: auto !important; /* Shows scrollbar only when necessary */
}

/* This targets the container for the grid cells */
.ag-center-cols-clipper {
    overflow-x: auto !important; /* Allows horizontal scrolling if content overflows */
}

.ag-row.ag-row-even {
    background-color: #f7f7f7 !important; /* Light gray color for even rows */
}

.ag-row.ag-row-odd {
    background-color: #ffffff !important; /* White color for odd rows (or use another color if you wish) */
}

.ag-header-cell-label {
    white-space: normal; /* Allows text to wrap */
    overflow: hidden;
    text-align:center !important;
}


footer {
    height: 40px;
    vertical-align: middle;
    line-height: 40px;
    text-align: center;
    width: 100%;
    font-size: 8pt;
    font-weight: bold;
}



.bg-navajo-orange {
    background-color: #e84626 !important;
    font-size: 25px !important;
}

#content {
    height: 100%;
}

.fieldset-container {
    border: 1px solid #a9b1b7 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 5px 1px 5px 2px !important;
    flex: 3 !important;
    flex-basis: 65% !important;
    margin-right: 10px;
    background-color: #ffffff;
    overflow: hidden !important;
    padding-left: 10px !important;
}


fieldset {
    border: 1px solid #a9b1b7 !important;
    border-radius: 10px !important;
    font-size: 10pt !important;
    padding: 5px 10px 5px 5px !important;
}

    fieldset legend {
        margin-left: 6px !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }


.borderless-textbox {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    margin: 0px !important;
}
    .borderless-textbox input:focus {
        border: none;
        outline: none;
        box-shadow: none;
    }

.fieldset-new {
    border: 1px solid #a9b1b7 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 5px 1px 5px 2px !important;
    flex: 3 !important;
    flex-basis: 65% !important;
    margin-right: 10px;
    background-color: #ffffff;
    overflow: hidden !important;
    padding-left: 10px !important;
}

    .fieldset-new legend {
        font-size: 14px !important;
        width: auto;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px !important;
    }

    .fieldset-new input {
        padding: 0px !important;
        margin: 0px !important;
    }


.login-reset {
    padding-top: 10px !important;
    text-align: right !important;
    font-size: 10pt !important;
}

    .login-reset a {
        text-decoration: none !important;
    }

        .login-reset a:hover {
            text-decoration: underline !important;
        }

.login-button {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    height: 40px !important;
    border: 1px solid #a9b1b7 !important;
    border-radius: 20px !important;
    font-size: 10pt !important;
    padding: 5px 10px 5px 5px !important;
    cursor: pointer !important;
    font-weight: bold;
}

    .login-button:hover {
        background-color: #e84626 !important;
        color: #ffffff;
    }

.k-focus, .k-state-selected {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.critical, .text-danger {
    color: red !important;
    font-weight: bold !important;
}


.critical-fieldset {
    color: red !important;
    font-weight: bold !important;
    border-color: red !important;
}

.rate-status {
    border: 1px solid #a9b1b7 !important;
    border-radius: 7px !important;
    font-size: 10pt !important;
    padding: 0px !important;
    margin-top: 4px !important;
    height: 30px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .rate-status a {
        text-decoration: none;
        color: inherit;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 2px 15px !important;
        justify-content: center
    }

.copy-icon {
    padding: 0px !important;
    margin-top: 4px !important;
    height: 30px !important;
    width: 30px !important; /* Added width to keep the icon square */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_copy_link_24_regular" fill="#212121" fill-rule="nonzero"> <path d="M13.7533481,2 C14.9105985,2 15.863488,2.8749731 15.9865561,3.9994587 L17.75,4 C18.940864,4 19.9156449,4.92516159 19.9948092,6.09595119 L20,6.25 L20,12.25 C20,12.6642136 19.6642136,13 19.25,13 C18.8703042,13 18.556509,12.7178461 18.5068466,12.3517706 L18.5,12.25 L18.5,6.25 C18.5,5.87030423 18.2178461,5.55650904 17.8517706,5.50684662 L17.75,5.5 L15.6182905,5.49983563 C15.214809,6.09910034 14.5301141,6.49330383 13.7533481,6.49330383 L10.2466519,6.49330383 C9.46988587,6.49330383 8.78519098,6.09910034 8.38170952,5.49983563 L6.25,5.5 C5.87030423,5.5 5.55650904,5.78215388 5.50684662,6.14822944 L5.5,6.25 L5.5,19.754591 C5.5,20.1342868 5.78215388,20.448082 6.14822944,20.4977444 L6.35177056,20.5114376 C6.71784612,20.5611 7,20.8748952 7,21.254591 C7,21.6688046 6.66421356,22.004591 6.25,22.004591 C5.05913601,22.004591 4.08435508,21.0794294 4.00519081,19.9086398 L4,19.754591 L4,6.25 C4,5.05913601 4.92516159,4.08435508 6.09595119,4.00519081 L6.25,4 L8.01344395,3.9994587 C8.13651196,2.8749731 9.08940148,2 10.2466519,2 L13.7533481,2 Z M17.25,14.5 L18.25,14.5 C20.3210678,14.5 21.9999918,16.1789322 21.9999918,18.25 C21.9999918,20.2542592 20.4276389,21.8912737 18.4522792,21.994802 L18.2534432,22 L17.2534432,22.0045992 C16.839234,22.0064847 16.5019095,21.6722434 16.4999918,21.2580342 C16.4982641,20.8783424 16.778975,20.5632552 17.1448187,20.5119127 L17.2465568,20.5045989 L18.25,20.5 C19.4926407,20.5 20.4999918,19.4926407 20.4999918,18.25 C20.4999918,17.059136 19.5748384,16.0843551 18.4040488,16.0051908 L18.25,16 L17.25,16 C16.8357864,16 16.4999918,15.6642136 16.4999918,15.25 C16.4999918,14.8703042 16.7821539,14.556509 17.1482294,14.5068466 L17.25,14.5 L18.25,14.5 L17.25,14.5 Z M12.25,14.5 L13.25,14.5 C13.6642136,14.5 14,14.8357864 14,15.25 C14,15.6296958 13.7178461,15.943491 13.3517706,15.9931534 L13.25,16 L12.25,16 C11.0073593,16 10,17.0073593 10,18.25 C10,19.440864 10.9251616,20.4156449 12.0959512,20.4948092 L12.25,20.5 L13.25,20.5 C13.6642136,20.5 14,20.8357864 14,21.25 C14,21.6296958 13.7178461,21.943491 13.3517706,21.9931534 L13.25,22 L12.25,22 C10.1789322,22 8.5,20.3210678 8.5,18.25 C8.5,16.2457408 10.0723611,14.6087263 12.0508414,14.505198 L12.25,14.5 L13.25,14.5 L12.25,14.5 Z M12.25,17.5 L18.25,17.5 C18.6642136,17.5 19,17.8357864 19,18.25 C19,18.6296958 18.7178461,18.943491 18.3517706,18.9931534 L18.25,19 L12.25,19 C11.8357864,19 11.5,18.6642136 11.5,18.25 C11.5,17.8703042 11.7821539,17.556509 12.1482294,17.5068466 L12.25,17.5 L18.25,17.5 L12.25,17.5 Z M13.7533481,3.5 L10.2466519,3.5 C9.83428745,3.5 9.5,3.83428745 9.5,4.24665191 C9.5,4.65901638 9.83428745,4.99330383 10.2466519,4.99330383 L13.7533481,4.99330383 C14.1657126,4.99330383 14.5,4.65901638 14.5,4.24665191 C14.5,3.83428745 14.1657126,3.5 13.7533481,3.5 Z"></path> </g> </g> </svg>');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
}


.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.rounded-button {
    border: 1px solid #a9b1b7 !important;
    border-radius: 20px !important;
    font-size: 10pt !important;
    padding: 5px 10px 5px 5px !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

    .rounded-button:hover {
        background-color: #e84626 !important;
        color: #ffffff !important;
    }

.rounded-button-header {
    border: 1px solid #a9b1b7 !important;
    border-radius: 12px !important;
    font-size: 10pt !important;
    padding: 5px 10px 5px 5px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    box-shadow: 3px 3px 2px -2px black; 
}

    .rounded-button-header:hover {
        border: 1px solid black !important;
        background-color: #5d5d5d !important;
        color: #ffffff !important;
    }

.rounded-button-small {
    border: 1px solid #a9b1b7 !important;
    border-radius: 5px !important;
    font-size: 10pt !important;
    cursor: pointer !important;
    font-weight: bold !important;
    height: 32px !important;
}

    .rounded-button-small:hover {
        background-color: #e84626 !important;
        color: #ffffff !important;
    }

.square-round-button {
    border: 1px solid #a9b1b7 !important;
    border-radius: 5px !important;
    font-size: 10pt !important;
    padding: 6px 10px 7px 10px !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

.square-round-button:hover {
    background-color: #e84626 !important;
    color: #ffffff !important;
}



.app-bar-link {
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.k-drawer-wrapper {
    background-color: #3b3835 !important;
    height: 100vh;
    color: #ffffff !important;
}

.k-drawer-item {
    color: #ffffff !important;
    width: 100% !important;
}
.separator-item {
    display: inline-block !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #ccc !important;
    margin: 2px 0 !important;
}

.separator-item-parent {
    padding: 0px 5px 0px 5px !important;
    margin: 0px !important;
    line-height: 0px !important;
    height: 5px !important;
    pointer-events: none !important;
    overflow: hidden !important;
}


.k-i-eye-slash {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M245.43 358.68l24.92 24.92c-4.75.26-9.54.4-14.34.4-94.7 0-179.7-51.5-224-128 13.19-22.83 30.01-43.43 49.65-61.1l23.01 23.01C91.46 229.29 79.51 242.07 69.8 256c26.33 33.77 54.15 53.86 72.6 65.1 39.18 23.88 77.54 33.37 103.03 37.58M376.85 354.24L480 457.39 457.39 480 345.51 368.12s-.07.03-.1.04L232.2 254.94l.11-.03-39.21-39.21-.03.11-26.8-26.8s.04-.05.06-.08l-7.01-7.01s-.06.03-.09.04l-24.17-24.17s.06-.03.09-.05L32 54.61 54.61 32l111.87 111.87A260.2 260.2 0 01256 128c94.8 0 179.8 51.5 224 128-24 41.53-60.05 75.69-103.15 98.24M369.6 321.1c27.8-16.4 54.1-38.7 72.6-65.1-18.4-26.4-44.8-48.7-72.6-65.1-12.2-7.2-25.1-13.2-38.4-17.9 22.6 20.5 36.8 50.1 36.8 83 0 25.15-8.31 48.37-22.32 67.08l7.01 7.01c5.76-2.76 11.41-5.74 16.91-8.99" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.grid-fill-scroll {
    height: 100% !important;
    width: 100% !important;
    overflow: auto !important;
}


.section {
    margin-top: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.section-header {
    margin-top: 20px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
}

.section-title {
    background-color: #5d5d5d !important;
    color: #ffffff;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    font-size: 18px;
    font-weight: bold;
}

.section-main {
    width: 100%;
    padding: 10px;
}

.sub-section {
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100% !important;
    box-sizing: border-box;
}



.sub-section-title {
    background-color: #5d5d5d !important;
    color: #ffffff !important;
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin: 0px;
    border-radius: 5px 5px 0 0;
}

.sub-section-main {
    width: 100%;
    padding: 10px;
    background-color: #e6e5e5 !important;
    border-radius: 0 0 5px 5px;
}

.sub-sub-section {
    color: #ffffff !important;
    padding: 5px;
    width: 100%;
    margin: 0px;
    border-radius: 5px 5px 5px 5px;
}