:root {
    --header-height: 0px;
    --header-height: 64px;
    --page-starting-height: 100px;
    --sidebar-width: 325px;
    --sidebar-width-expand: 128px;
    --title-color: #666666;
    --title-color: #777777;
    --text-color: #BDBDBD;
    --text-color: #aaaaaa;
    --primary-color: #167D8A;
    --maincontent-padding: -3rem;
}

html, body {
    background-color: #f8f9fc;
    background-color: #FCFBF9;
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    font-weight: 600;
    height: 100%;
    font-weight: 500;
    /*font-size: .935415rem;*/
}

h1, h2, h3, h4, h5, h6 {
    color: var(--title-color);
    font-weight: 800;
    margin-bottom: 0px;
}

h1, h2, h3, h4 {
    font-weight: 900;
}

/* Show dropdowns on hover */
@media (min-width: 768px) {
    .dropdownhover:hover .dropdown-menuhover {
        display: block;
        margin-top: 0;
    }
}

/*********************************************************************/
/* HEADER
/*********************************************************************/

.header {
    align-items: center;
    background: #fff;
    box-shadow: rgb(0 21 41 / 8%) 0px 1px 10px 0px;
    display: flex;
    height: var(--header-height);
    position: relative;
    /*z-index: 1;*/
    /*
    align-items: center;
    background: #fff;
    box-shadow: rgb(0 21 41 / 8%) 0px 1px 10px 0px;
    position: relative;
    */
}

.mainpage {
    display: flex;
    height: calc( 100vh - var(--header-height));
}


.maincontent {
    flex: 1; /* 0 auto;*/
    overflow: auto;
    /*padding: 1.5rem;*/
    /* enable grow, disable shrink */
}



/*********************************************************************/
/* TAB
/*********************************************************************/

.tabbar {
    border-bottom: solid 2px #eaeaea;
    /*margin-bottom: 1.5rem;*/
    padding-bottom: 0.7rem;
}

.tabitem, .tabitem-selected {
    color: var(--text-color);
    cursor: pointer;
    margin-right: 3rem;
    text-decoration: none;
}

.tabitem-selected {
    border-bottom: solid 2px var(--primary-color);
    color: var(--title-color) !important;
    font-weight: bold;
    padding-bottom: 0.8rem;
}

    .tabitem:hover, .tabitem-selected:hover {
        color: var(--title-color) !important;
        text-decoration: none;
    }



/*********************************************************************/
/* TEXT
/*********************************************************************/

.sticky-top {
    top: var(--maincontent-padding) !important;
    z-index: 20;
}

/*
.container, .container-xl, .container-xxl {
    margin: unset;
}

.container-xxl {
    width: 100%;
    max-width: 1320px;
}

.progress-container {
    align-items: center;
    display: flex;
    width: 100%;
}

.progress {
    flex: 1;
}

.text-danger {
    color: #f0536c !important; /* red color */
}

*/

label {
    font-weight: 400;
}

.form-group {
    margin-bottom: 1.5rem !important;
}

.titlecolor {
    color: var(--title-color);
}

.textcolor {
    color: var(--text-color);
}

    .textcolor:hover {
        color: var(--text-color);
    }




/*********************************************************************/
/* TABLE
/*********************************************************************/

.table {
    color: unset;
}

    .table thead th {
        border-top: none;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .table td, .table th {
        padding-top: 1rem;
        padding-bottom: 1rem;
        vertical-align: middle;
    }

        .table td:first-child, .table thead th:first-child {
            padding-left: 2rem;
        }

        .table td:last-child, .table thead th:last-child {
            padding-right: 2rem;
        }

.table-hover {
    cursor: pointer;
}

    /* Table -> Row -> Selected */
    .table-active, .table-active > td, .table-active > th,
    .table-hover .table-active:hover > td, .table-hover .table-active:hover > th {
        background-color: #f9f9f9;
    }

    /* Remove color from table hover */
    .table-hover tbody tr:hover {
        color: unset;
    }

    /* Table -> Row -> Hover */
    .table-hover tbody tr:hover {
        background-color: #f9f9f9;
    }

.table-fixed-header {
    /* Don't collapse */
    border-collapse: separate;
    border-spacing: 0;
}

    .table-fixed-header thead th {
        background-color: #fff;
        position: sticky;
        top: 0;
    }





/*********************************************************************/
/* BUTTON
/*********************************************************************/

.btn {
    font-weight: 600;
    padding: 0.469rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.btn-light,
.btn-light:hover,
.btn-light.focus, .btn-light:focus {
    color: var(--text-color);
}

    .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
        color: var(--text-color);
        border: solid 1px #f0f0f0;
    }

.btn-outline-light, .btn-outline-light:hover {
    color: var(--text-color);
    background-color: #fff;
    border: solid 1px #f0f0f0;
}

    .btn-outline-light:hover {
        border: solid 1px #f0f0f0;
        background-color: #F8F9FA;
    }

    .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle {
        color: var(--text-color);
        border: solid 1px #f0f0f0;
    }

.btn-blank, .btn-blank:hover, .btn-blank:active, .btn-blank:visited {
    background-color: none;
    border: none;
    color: var(--text-color);
}

.btn.focus, .btn:focus {
    box-shadow: none;
}

.btn-blank:hover {
    background-color: #F8F9FA;
    background-color: #e2e6ea;
}



/*********************************************************************/
/* BADGE
/*********************************************************************/
.badge-large, .badge-small {
    border-radius: 3px;
    display: inline-block;
    font-size: 0.75rem;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
}

.badge-small {
    padding: 0.25em 0.4em;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 70%;
}

.badge-warning {
    background-color: #FFED9E !important;
    color: #EDA323 !important;
}

.badge-warning-outline {
    background-color: none !important;
    border: solid 2px #FFED9E;
    color: #EDA323 !important;
}

.badge-primary {
    background-color: #CFE2F3 !important;
    color: #3D85C6 !important;
}

.badge-primary-outline {
    background-color: none !important;
    border: solid 2px #CFE2F3;
    color: #3D85C6 !important;
}

.badge-danger {
    background-color: #fcdce1 !important;
    color: #f0536c !important;
}

.badge-danger-outline {
    background-color: none !important;
    border: solid 2px #fcdce1;
    color: #f0536c !important;
}

.badge-success {
    background-color: #e0f5ed !important;
    color: #46c194 !important;
}

.badge-success-outline {
    background-color: none !important;
    border: solid 2px #e0f5ed;
    color: #46c194 !important;
}

.badge-info {
    background-color: #CFE2F3 !important;
    color: #3D85C6 !important;
}

.badge-info-outline {
    background-color: none !important;
    border: solid 2px #CFE2F3;
    color: #3D85C6 !important;
}

.badge-gray {
    background-color: #F8F9FA;
    color: #999999 !important;
}

.badge-gray-outline {
    background-color: none !important;
    border: solid 2px #F8F9FA;
    color: #999999 !important;
}

.badge-blank {
    background-color: none !important;
}

.badge-notification {
    background-color: #E60323;
    color: white;
    border-radius: 50%;
    font-size: 0.5rem;
    padding-top: 2px;
    margin-bottom: -2px;
    text-align: center;
    top: -9px;
    left: -2px;
    min-width: 16px;
    min-height: 16px;
    position: relative;
    display: inline-block
}


.gaugestyle {
    /*
    display: block;
    margin: 0 auto;
    width: 100%;
        */
}


/*********************************************************************/
/* CARD
/*********************************************************************/

.cardstyle {
    background-color: white;
    border-radius: 4px;
    box-shadow: rgb(0 21 41 / 8%) 0px 1px 10px 0px;
    margin-bottom: 16px;
}

.cardheader {
    color: var(--title-color);
    padding: 1.5rem;
    vertical-align: top;
}

    .cardheader table td {
        vertical-align: top;
    }

.cardheader-border {
    border-bottom: solid 2px #f5f8fa;
}

.cardbody {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}



/*********************************************************************/
/* CARD
/*********************************************************************/

.blazored-toast-success {
    background-color: #d4edda !important;
    color: #155724 !important;
}

    .blazored-toast-success .blazored-toast-body .blazored-toast-header h5 {
        color: #155724 !important;
    }

.blazored-toast-error {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

    .blazored-toast-error .blazored-toast-body .blazored-toast-header h5 {
        color: #721c24 !important;
    }

/*<h5 class="blazored-toast-heading" > Success</h5 ><!-- ! -->*/




/*********************************************************************/
/* MISC
/*********************************************************************/
.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;
    }

.shadow {
    box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px !important;
}

.shadow1 {
    box-shadow: rgb(0 21 41 / 40%) 0px 1px 30px 10px;
}

.avatar {
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    width: 40px;
    height: 40px;
}

.icon {
    height: 20px;
    vertical-align: text-top !important;
}

.icon-more {
    background:none;
    padding-left: 10px;
    padding-right:10px;
}
    .icon-more:hover {
        background: #efefef;
        border: 1px solid #eeeeee;
    }
.modal-footer {
    display: block;
}






/* SPINNER */
.loading-spinner {
    margin: auto;
    width: 70px;
    text-align: center;
    padding-top: 36px;
    padding-bottom: 30px;
}

    .loading-spinner > div {
        width: 18px;
        height: 18px;
        background-color: #999;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .loading-spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .loading-spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}