@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


.form-group {
    margin-bottom: 0.5rem
}
.card-body {
    padding: 0.75rem;
}


.k-upload.button-only {
    height:20px;
}

    .k-upload.button-only .k-dropzone {
        padding: 2px;
    }

    .k-upload.button-only .k-upload-files,
    .k-upload.button-only .k-upload-status {
        display: none;
    }

.k-button-icon {
    padding: 0px;
}

.no-horizontal-scroll {
    overflow-x: hidden;
}

/*SCROLLBAR COLOURING*/
/* The emerging W3C standard
   that is currently Firefox-only */
* {
    scrollbar-width: thin;
    scrollbar-color: steelblue lightsteelblue;
}

    /* Works on Chrome/Edge/Safari */
    *::-webkit-scrollbar {
        width: 12px;
    }

    *::-webkit-scrollbar-track {
        background: lightgrey;
    }

    *::-webkit-scrollbar-thumb {
        /*background-image: linear-gradient(#6d94bf, #446E9B 50%, #3e648d);*/
        background-image: linear-gradient(#c1ccd9, #9bb2c9 50%, #8fa7bf);
        border-radius: 20px;
        border: 3px solid lightsteelblue;
    }

.ButtonStyle {
    /*padding: 0px 8px 0px 8px;
        font-size: 10px !important;*/
    color: white;
    text-shadow: 1px 1px black;
    /*background-image: linear-gradient(#484a4a,#656666 50%, #7e8080);*/
    background-image: none;
    background-color: green;
}

    .ButtonStyle:hover {
        color: black;
        background-color: #23D5AE;
        text-shadow: none;
        background-image: none;
    }

    /*image button*/
    .ImageButtonStyle {
    /*padding: 0px 8px 0px 8px;
        font-size: 10px !important;*/
    /*height: 110px;*/
    width: 100px;
    padding-left: 5px;
    padding-right: 5px;
    color: black;
    font-size: 11px;
    text-align: center;
    overflow-wrap: break-word;
    border-radius: 10px;
    background-color: lightblue;
    /*text-shadow: 1px 1px white;*/
    background-image: none
}

    .ImageButtonStyle:hover {
        color: black;
        background-color: #23D5AE;
        text-shadow: none;
        background-image: none;
    }

.ButtonImage {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5px;
}


/*Cards*/

.CardBodyPadding {
    padding: 0px;
}


/*Tabs*/
/*.tab-parent .k-tabstrip-items {
    height: 41px;
}

    .tab-parent .k-tabstrip-items .k-link:hover {
        background-color: whitesmoke;
        font-weight: bold;
        color: #676767;
    }*/
/*Tabs*/
.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-state-active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-state-selected, .k-tabstrip-items-wrapper .k-item.k-selected {
    /*    border-color: rgba(0, 0, 0, 0.08);
    color: #424242;*/
    background-image: linear-gradient(darkgreen,green 50%, green);
}

.k-tabstrip-items-wrapper {
    border-color:gainsboro;
}



.tab-parent .k-tabstrip-items .k-link:hover {
    background-color: lightgray;
    /*font-weight: bold;*/
    color: black;
    /* color: #676767;*/
}

.k-tabstrip-items .k-item {
    /*background-color: whitesmoke;*/
    background-color: lightgray;
    height: 39px;
}

.k-tabstrip-items .k-link:hover {
    color: white;
}

.k-tabstrip-top > .k-tabstrip-items .k-item {
    border-color: gainsboro;
}


.k-tabstrip > .k-content {
    font-size: 12px;
    color: #212529;
    border-color: gainsboro;
}

/*Grid Header*/
.k-grid-header .k-header .k-link:hover {
    background-color: grey;
    
}

/*Grid Selected Row*/
.k-master-row.k-state-selected {
    background-color: grey;
    color: white;
}

.k-master-row.k-alt.k-state-selected {
    background-color: grey;
    color: white;
}

/*Drop Down menu*/
.k-menu-group, .k-menu.k-context-menu {
    /**Altered**/
    border-color: rgba(0,0,0,0.08);
    color: white;
    background-color: #3B61B9 
}

.k-tabstrip-items:hover {
    background-color: transparent;
}


.k-menu-group .k-item > .k-state-active, .k-menu.k-context-menu .k-item > .k-state-active {
    color: #fff;
    background-color: #13688c
}

.k-menu-group .k-item:focus, .k-menu-group .k-item.k-state-focused, .k-menu.k-context-menu .k-item:focus, .k-menu.k-context-menu .k-item.k-state-focused {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.13);
}


/*MODAL STYLE*/

.blazored-modal {
    background-color: #fff;
    border: none;
    padding: 0px;
}

.blazored-modal-header {
    padding: 0 0 0 0;
    background-image: linear-gradient(#6d94bf,#446E9B 50%, #3e648d);
    height: 40px;
    margin-bottom: 10px;
}


.blazored-modal-title {
    margin-bottom: 0;
    padding: 10px 8px 8px 20px;
    color: whitesmoke;
    font-size: 16px;
}

.blazored-modal-close {
    margin: -4px 0px 0px 0px;
    color: whitesmoke;
    cursor: pointer;
}

.blazored-modal-content {
    padding: 5px 15px 15px 15px;
}



/*GRID HOLDER*/
.GridHolder {
    border: 1px solid lightgrey;
    margin-bottom: 0px;
    padding:1px;
}

.GridFooter {
    background-color: whitesmoke;
    text-align: right;
    font-size: 11px;
    padding: 8px 20px 8px 4px;
    border-top: 1px solid lightgrey;
}

/*TELERIK GRID CHANGES*/
.k-grid {
    /*line-height: 10px;*/
    font-size: 11px;
}

    .k-grid tr.k-state-selected:hover {
        color: darkred;
    }
        .k-dropdown, .k-dropdowntree {
    font-size: 11px !important;
}

.k-filter-row td, .k-filter-row th {
    padding: 4px 4px;
}

.k-grid td {
    padding: 4px 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.k-tabstrip > .k-content {
    padding: 1px 0px;
}

.k-toolbar > * {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.k-grid-toolbar {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
padding-bottom: 0px;
}
.k-grid-search {
    background-color: white;
    margin-top: 0px;
    margin-bottom: 2px;
    display: flex;
}


/*Modal Popup*/
.k-window-title { /* targets the title container */
    color: black;
    background-color: transparent;
}

.k-window-titlebar { /* targets the entire titlebar */
    background-color: lightgray;
}


/*TABS*/
.k-tabstrip-items .k-item.k-state-active, .k-tabstrip-items .k-item.k-state-selected {
    /*border-color: rgba(0,0,0,0.08);
    color: #656565;*/
    font-weight: bold;
    background-color: whitesmoke;
    /*.form-control[readonly] {
    background-color:whitesmoke;
    opacity: 1;*/
}

.k-tabstrip-items .k-item {
    color: #656565;
}

.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected {
    color: white;
}




.k-grid table {
    table-layout: fixed;
}

.col_ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col_noellipsis {
    white-space: normal;
}

.ManagerNodeSelected {
    font-weight: bold;
    color: black;
}

.AdminNodeSelected {
    font-weight: bold;
    color: royalblue;
}

.myali {
    display: block;
}

    .myali:hover {
        background-color: lightgray;
        color: darkred;
    }


.k-buttonmy {
    padding: 2px 8px 0px 8px;
    font-size: 10px !important;
    /*    height: 20px;*/
    color: white;
    /*background-color: black;*/
    /*color: lightgray;
    background-color: darkgray;*/
  /*  background-image: linear-gradient(#484a4a,#656666 50%, #7e8080);*/
    background-image: linear-gradient(darkgreen,green 50%, green);
}

    .k-buttonmy:hover {
        color: black;
        background-color: #23D5AE;
        text-shadow: none;
        background-image: none;
    }

.k-numerictextbox {
    border-width: 1px;
}
.k-checkbox {
    border-color: darkgray;
}

.StandardButton {
    margin-left:5px;
    padding: 2px 10px 2px 10px;
    font-size: 12px !important;
    border-radius:5px;
    color: white;
    background-image: linear-gradient(darkgreen,green 50%, green);
}

    .StandardButton:hover {
        color: black;
        background-color: #23D5AE;
        text-shadow: none;
        background-image: none;
    }

.StandardButtonCQC{
    margin-left:0px;
    width:130px;
}

.StandardButtonPopup {
    padding: 6px 18px 6px 18px;
    font-size: 14px !important;
    border-radius: 5px;
    color: white;
    background-image: linear-gradient(darkgreen,green 50%, green);
}

    .StandardButtonPopup:hover {
        color: black;
        background-color: #23D5AE;
        text-shadow: none;
        background-image: none;
    }

    .StandardButtonPopup.WizardButton {
        width: 150px;
    }

    .HomeButton .k-button-icon {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        margin-right: 4px;
    }

.HomeButton .k-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.card-header {
    font-size: 14px;
    font-weight: bold;
    color: dimgray;
    vertical-align: middle;
    padding:10px;
}

.dashboard-buttons {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

    /* Desktop layout */
    .dashboard-buttons.desktop-grid {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    /* Tablet layout */
    .dashboard-buttons.tablet-grid {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

        .dashboard-buttons.tablet-grid .dashboard-button {
            flex: 0 0 calc(33.333% - 1rem);
            margin-bottom: 1rem;
        }

    /* Mobile layout */
    .dashboard-buttons.mobile-grid {
        flex-direction: column;
        gap: 0.75rem;
    }

        .dashboard-buttons.mobile-grid .dashboard-button {
            width: 100%;
            min-height: 70px;
        }

.dashboard-button {
    flex: 1;
    min-height: 80px;
    border: none;
    border-radius: 8px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .dashboard-button:hover {
        background-color: #e9ecef;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .dashboard-button i {
        font-size: 24px;
        margin-bottom: 0.5rem;
        color: green;
    }

.dashboard-buttons.mobile-grid .dashboard-button i {
    font-size: 20px;
}

.dashboard-button span {
    font-size: 16px;
    font-weight: 500;
    color: #212529;
}

.dashboard-buttons.mobile-grid .dashboard-button span {
    font-size: 14px;
}


/* Transparent Chart Background */

div.transparent-chart-background {
    /* Chart background */
    --kendo-chart-bg: transparent;
}

/* CQC Date*/

.cqc-date-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin-right: 18px;
}

.cqc-date-label {
    font-weight: 500;
    color: #6c757d;
}

.cqc-date-value {
    font-weight: 600;
    color: #0d6efd;
    padding: 0.25rem 0.5rem;
    background-color: #e7f1ff;
    border-radius: 4px;
}

.cqc-date-small {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.cqc-date-medium {
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
}

.cqc-date-large {
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

/* Tabs */
.tabstrip-container {
    position: relative;
}

.tabstrip-buttons {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    padding: 10px 18px;
}

.tabstrip-container :global(.k-tabstrip-items-wrapper) {
    margin-right: 250px; /* Adjust based on your buttons width */
}

.k-tabstrip-content, .k-tabstrip > .k-content {
    padding-block: 2px;
    padding-inline: 2px;
}


/* Telerik Window */
.k-window {
    border-radius: 8px;
    overflow: hidden; /* This ensures the content doesn't overflow the rounded corners */
}

.k-window-titlebar {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 8px 16px;
    min-height: 36px;
    background-color: #90EE90; /* Light green color that complements the StandardButton */
    color: #212529;
}

    .k-window-titlebar .k-window-actions .k-button {
        color: #212529;
        opacity: 0.8;
    }

.k-window-content {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.k-window-actions .k-button {
    padding: 4px; /* Smaller padding for action buttons */
    height: 28px; /* Reduced height for action buttons */
    width: 28px; /* Reduced width for action buttons */
}







/*.k-grid-toolbar {
    background-color: lightgray;
}*/
.k-grid-toolbar {
    background-color: lightgray;
    padding: 0px 8px 0px 8px;
    padding-top: 0px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 8px;
}

.k-buttonGridCommand {
    padding: 4px 8px 4px 8px;
    font-size: 12px !important;
    color: white;
    background-image: linear-gradient(#484a4a,#656666 50%, #7e8080);
    /*font-size: 12px !important;
    color: whitesmoke;
    background-color: white;
    background-image: linear-gradient(#6d94bf,#446E9B 50%, #3e648d);*/
    float: right;
}

    .k-buttonGridCommand:hover {
        color: black;
        background-color: #23D5AE;
        text-shadow: none;
        background-image: none;
    }

.k-iconmy {
    font-size: 10px !important;
}

.k-icon {
    font-size: 10px;
}

/*TELERIK AUTOCOMPLETE*/
.k-autocomplete.k-header, .k-autocomplete {
    border: rgba(0,0,0,0.08) solid 1px;
    color: #656565;
    background-color: #fff;
    background-clip: padding-box;
}

/*.k-widget {
    border-width: 0px;
    border-style: solid;
    box-sizing: border-box;
}

.k-grid-header, .k-header, .k-grid-header-wrap, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-grid td, .k-grid-footer, .k-grid-footer-wrap, .k-grid-content-locked, .k-grid-footer-locked, .k-grid-header-locked, .k-filter-row > td, .k-filter-row > th {
    border-color: rgba(0,0,0,0.08);
}

.k-autocomplete {
    border-radius: 2px;
    padding: 0 calc(1.4285714286em + 8px) 0 0;
    width: 12.4em;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    background: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4285714286;
    text-align: left;
    white-space: nowrap;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    transition: all .1s ease;
    position: relative;
    cursor: default;
    outline: 0;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}*/




/*FORMS*/
.form-control {
    border: rgba(0,0,0,0.08) solid 1px;
}

    .form-control[readonly] {
        background-color: whitesmoke;
        opacity: 1;
    }


/*STANDARD SITE CSS*/

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
}

/*a, .btn-link {
    color: #0366d6;
}*/

.btn-primary {
    color: #fff;
    border-color: #1861ac;
    background-image: linear-gradient(#484a4a,#656666 50%, #7e8080);
}

    .btn-primary:hover {
        color: #fff;
        border-color: #0062cc;
        background-image: linear-gradient(#656666,#7e8080 50%, #a8a8a8);
    }

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }



.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }

        /* Tooltip text */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 1;
        }

        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
}