@import '/node_modules/material-icons/iconfont/material-icons.css';

/* <GENERAL> */
button, html, input, select, textarea {
    font-family: Savics,Roboto,Helvetica Neue,sans-serif!important;
}

.md-button.md-fab.md-fab-bottom-right, md-fab-speed-dial.md-fab-bottom-right {
    top: auto;
    right: 20px;
    bottom: 90px;
    left: auto;
    position: fixed;
}

h4.pluginTitle {
    width: 70%;
    margin: .7em auto;
    overflow: hidden;
    text-align: center;
}
h4.pluginTitle:before, h4.pluginTitle:after {
    content: "";
    display: inline-block;
    width: 50%;
    margin: 0 .5em 0 -55%;
    vertical-align: middle;
    border-bottom: 1px solid;
}
h4.pluginTitle:after {
    margin: 0 -55% 0 .5em;
}

.loading-text{    
    background-color: #fff;
    padding: 1px 16px 1px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    position: absolute;
    z-index: 9999;
    top: 170px;
    left: calc(50% - 49.78px);
}

.loading-spinner{
    background-color: #fff;
    padding:15px;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    position: absolute;
    z-index: 9999;
    top: 100px;
    left: calc(50% - 30px);
}

.main, body{
    background: #f7f9fc !important;
    height: 100%;
}

.deployment-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.deployment-badge__icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    color: currentColor !important;
    font-size: 16px !important;
    line-height: 16px !important;
}

.deployment-badge--toolbar {
    flex: 0 0 auto;
    min-height: 28px;
    margin-left: 14px;
    padding: 5px 11px;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.deployment-badge--global {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 80;
    min-height: 34px;
    padding: 8px 13px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.16);
}

.deployment-badge--global.deployment-badge--national {
    border-color: #b8ccf4;
    background: #eaf1ff;
    color: #174eae;
}

.deployment-badge--global.deployment-badge--lims {
    border-color: #9bcfb7;
    background: #e4f5ed;
    color: #176a4c;
}

@media (max-width: 900px) {
    .deployment-badge--toolbar {
        margin-left: 8px;
        padding: 5px 8px;
    }

    .deployment-badge--toolbar .deployment-badge__label-full {
        display: none;
    }
}

@media (max-width: 599px) {
    .deployment-badge--global {
        top: 10px;
        right: 10px;
        min-height: 30px;
        padding: 6px 10px;
        font-size: 10px;
    }
}

.lowercase{
    text-transform: initial;
}

/*background-color: #eee;*/

.page-title{
    margin-left: 8px;
}

.loginBox {
    max-width:  90%;
    width: 380px
}

.signupBox{
    max-width:  90%;
    width: 480px
}

.stretch input  {
    width: 100%
}

.sidenav-item a{
    margin: 0 !important;
}
.logo{
    width:30px;
    height:30px;
}

md-content.md-default-theme {
    background-color: #eee;
}
md-card {
    background-color: #fff;
}
.card-footer{
    bottom: 3px;
    left: 3px;
    right: 3px;
    position: absolute;
    background-color: #FFF;
}
small.daterange{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
    font-size: 10px;
}
small.daterange-in-map{
    position: absolute;
    right: 10px;
    bottom: 3px;
    font-size: 10px;
}
small.datatocare-credits{
    position: absolute;
    right: -25px;
    top: calc(50% - 64.3px/2);
    font-size: 10px;
    transform: rotate(-90deg);
}
small.path{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 10px;
}
small.datatocare-credits img{
    width:10px;
    vertical-align: middle;
}
.widget{
    max-height: 460px!important;
}
.widget-card-grid {
    align-items: flex-start;
}
.widget-card-cell,
.widget-card-cell > div[data-oc-lazy-load],
.widget-card-cell > div[data-oc-lazy-load] > div,
.widget-card-cell > div[data-oc-lazy-load] > div > div {
    display: flex;
    min-width: 0;
    max-width: 100%;
}
.widget-card-cell {
    box-sizing: border-box;
    padding: 8px;
}
.widget-card-cell > div[data-oc-lazy-load],
.widget-card-cell > div[data-oc-lazy-load] > div,
.widget-card-cell > div[data-oc-lazy-load] > div > div,
.widget-card-cell md-card.widget {
    flex: 1 1 auto;
    min-width: 0;
}
.widget-card-cell md-card.widget {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
}
.widget-card-cell md-card.widget > md-card-content {
    flex: 1 1 auto;
    min-height: 0;
}
.widget-add-placeholder {
    background: #f8fafc;
    border: 2px dashed #d7dde7;
    border-radius: 14px;
    box-shadow: none;
}
.widget-add-placeholder md-card-content {
    height: 100%;
    text-align: center;
    padding: 28px 20px;
    color: #4d5d73;
}
.widget-add-placeholder-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #edf2fb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.widget-add-placeholder-icon {
    color: #5e7fb8;
    font-size: 36px;
    width: 36px;
    height: 36px;
}
.widget-add-placeholder-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #30415b;
    font-weight: 500;
}
.widget-add-placeholder-description {
    margin: 8px 0 18px;
    max-width: 260px;
    color: #5b6a80;
    font-size: 13px;
    line-height: 1.45;
}
.widget-add-placeholder-button {
    border: 1px solid #4f80e3;
    border-radius: 8px;
    background: transparent;
    color: #2f6fed;
    min-height: 40px;
    line-height: 38px;
    margin: 0;
    padding: 0 16px;
    text-transform: none;
    font-weight: 500;
}
.widget-add-placeholder-button md-icon {
    margin-right: 6px;
    color: #2f6fed;
}
.widget .md-headline{
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1d2b3a;
    font-weight: 500;
    min-width: 0;
}
.widget .smallsize{
    font-size: 13px;
}
.widget md-card-content{
    position:relative;
}
.widget .loading,
.widget .widget-tip{
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 15px);
    z-index: 59;
}

/* Dashboard data skeletons use each card's existing independent loading flag. */
.widget .loading {
    top: 0;
    right: 24px;
    bottom: 22px;
    left: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
}

.widget .loading md-progress-circular {
    display: none;
}

.widget .loading::before,
.widget .loading::after {
    position: absolute;
    content: "";
}

/* Bar, line, bubble and map cards share a lightweight chart silhouette. */
.widget .loading::before {
    top: 18px;
    right: 8%;
    bottom: 18px;
    left: 8%;
    background-image:
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5);
    background-position:
        10% 82%, 10% 18%,
        24% 72%, 37% 60%, 50% 48%, 63% 68%, 76% 36%,
        50% 96%;
    background-repeat: no-repeat;
    background-size:
        78% 2px, 2px 66%,
        9% 22%, 9% 34%, 9% 46%, 9% 26%, 9% 58%,
        28% 10px;
}

/* Pie and doughnut cards retain the visual proportions of their final charts. */
[chart2] .loading::before,
[chart6] .loading::before,
[chart7] .loading::before,
[chart8] .loading::before,
[chart10] .loading::before,
[chart14] .loading::before,
[chart19] .loading::before,
[chart25] .loading::before,
[chart32] .loading::before,
[chart33] .loading::before {
    background-image:
        radial-gradient(circle, transparent 0, transparent 34%, #f1f3f5 35%, #f1f3f5 55%, transparent 56%),
        linear-gradient(#f1f3f5, #f1f3f5),
        linear-gradient(#f1f3f5, #f1f3f5);
    background-position: 50% 30%, 39% 92%, 63% 92%;
    background-repeat: no-repeat;
    background-size: 180px 180px, 18% 10px, 18% 10px;
}

/* Table headings stay visible; only the data-row area is replaced. */
[table1] .loading,
[table2] .loading,
[table3] .loading,
[table4] .loading,
[table5] .loading,
[table6] .loading,
[table7] .loading,
[table8] .loading {
    top: 72px;
}

[table1] .loading::before,
[table2] .loading::before,
[table3] .loading::before,
[table4] .loading::before,
[table5] .loading::before,
[table6] .loading::before,
[table7] .loading::before,
[table8] .loading::before {
    top: 16px;
    right: 3%;
    bottom: 0;
    left: 3%;
    background-image:
        linear-gradient(to bottom, #f1f3f5 0, #f1f3f5 12px, transparent 12px),
        linear-gradient(to bottom, #f1f3f5 0, #f1f3f5 12px, transparent 12px),
        linear-gradient(to bottom, #f1f3f5 0, #f1f3f5 12px, transparent 12px),
        linear-gradient(to bottom, #f1f3f5 0, #f1f3f5 12px, transparent 12px);
    background-position: 0 0, 42% 0, 68% 0, 94% 0;
    background-repeat: repeat-y;
    background-size: 30% 52px, 15% 52px, 13% 52px, 16% 52px;
}

.widget .loading ~ div md-progress-linear {
    display: none;
}

/* List and connectivity cards use icon, label and trailing-value rows. */
.widget-data .loading::before {
    top: 14px;
    right: 6%;
    bottom: 0;
    left: 6%;
    background-image:
        linear-gradient(to bottom, #f1f3f5 0, #f1f3f5 28px, transparent 28px),
        linear-gradient(to bottom, transparent 8px, #f1f3f5 8px, #f1f3f5 20px, transparent 20px),
        linear-gradient(to bottom, transparent 8px, #f1f3f5 8px, #f1f3f5 20px, transparent 20px);
    background-position: 0 0, 13% 0, 100% 0;
    background-repeat: repeat-y;
    background-size: 28px 52px, 48% 52px, 24% 52px;
}

/* Live counters preserve the existing two-row KPI structure. */
[dashboard-counters] .loading {
    right: 10%;
    bottom: 64px;
    left: 10%;
}

[dashboard-counters] .loading::before {
    top: 16px;
    right: 4%;
    bottom: 0;
    left: 4%;
    background-image:
        linear-gradient(to bottom, #f1f3f5 0, #f1f3f5 52px, transparent 52px),
        linear-gradient(to bottom, transparent 17px, #f1f3f5 17px, #f1f3f5 29px, transparent 29px),
        linear-gradient(to bottom, transparent 12px, #f1f3f5 12px, #f1f3f5 38px, transparent 38px);
    background-position: 0 0, 20% 0, 100% 0;
    background-repeat: repeat-y;
    background-size: 52px 96px, 38% 96px, 64px 96px;
}

.widget .loading::after {
    top: 0;
    bottom: 0;
    left: -45%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
    animation: widget-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes widget-skeleton-shimmer {
    to {
        transform: translateX(360%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .widget .loading::after {
        animation: none;
    }
}
.widget md-card-title{
    padding: 5px 10px 5px!important;
}
.widget > md-card-title > md-card-title-text > md-menu > .md-icon-button, .widget > md-card-title > md-card-title-text >.md-icon-button, .widget md-select{
    width: 24px;
    margin: -4px 0px!important;
    padding: 0;
}
.widget > md-card-title > md-card-title-text [cardselect] .md-icon-button{
    width: 24px;
    height: 24px;
    min-height: 24px;
    line-height: 24px;
    margin: -4px 0px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.widget > md-card-title > md-card-title-text [cardselect] .md-icon-button md-icon{
    width: 24px;
    height: 24px;
    line-height: 24px;
}
.widget md-select{
    margin: -6px 0px!important;
}
.widget-data md-card-content{
    height: 233px!important;
}
.widget-data md-list{
    overflow-y: scroll!important;
    overflow-x: hidden;
    height: 233px!important;
}
md-card-title-text{
    width: 100%;
}

h2 {
    font-weight: 400;
}
.md-toolbar-tools-bottom {
    font-size: small;
}
md-toolbar:not(.md-hue-1),
.md-fab {
    fill: #fff;
}

md-tabs md-ink-bar {
    background: #2f6fed;
}

md-tabs md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item.md-active,
md-tabs md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item.md-focused,
md-tabs md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item.md-active md-icon,
md-tabs md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item.md-focused md-icon,
md-tabs .md-tab.md-active,
md-tabs .md-tab.md-focused,
md-tabs .md-tab.md-active md-icon,
md-tabs .md-tab.md-focused md-icon {
    color: #2f6fed !important;
}

md-tabs md-pagination-wrapper {
    background: #fff;
}

md-sidenav {
    fill: #737373;
}
.user-avatar {
    border-radius: 99%;
}

/* Standardize Material buttons shape across the app */
.md-button.md-raised,
.md-button.md-primary:not(.md-raised):not(.md-fab):not(.md-icon-button),
.md-button.md-accent:not(.md-raised):not(.md-fab):not(.md-icon-button) {
    border-radius: 8px;
    min-height: 44px;
    font-weight: 600;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.pi-actions-inline .md-button.md-raised {
    display: inline-flex !important;
}
/* </GENERAL> */

/* <avatar> */
.avatar{
    background-color: #bebebe;
    border-radius: 50%;
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    text-align: center;
    width: 54px;
    height: 54px;
    font-size: 27px;
    line-height: 57px;
}

.avatar-xs{
    height: 20px;width: 20px;font-size: 10px;line-height: 20px;
}

.avatar-sm{
    height: 30px!important;
    width: 30px!important;
    line-height: 30px!important;
    font-size: 15px;
}

.avatar-md{
    height: 40px!important;
    width: 40px!important;
    line-height: 40px!important;
    font-size: 20px!important;
}

.avatar-lg{
    height: 70px;width: 70px;line-height: 74px;font-size: 35px;
}

.selected-icon{
    border: 1px solid #000!important;
    line-height: 73px!important;
}

.avatar-notification{
    background-color: #bebebe;
    height: 55px;width: 55px;
    padding-top: 9px;
    padding-left: 18px;
    font-size: 27.5px;
    color: #fff;
}

.avatar-notification .mdi-action-report-problem{
    font-size: 32px;
}
/* </avatar> */

/* <data-table> */
table.md-table th.md-column md-icon{
    min-height: 16px;
    min-width: 16px;
}
md-toolbar.md-table-toolbar form {
    margin-left: 16px;
}
md-toolbar.md-table-toolbar form > input {
    width: 100%;
    margin: 0;
    border: none;
    color: rgba(0, 0, 0, 0.87);
}
md-toolbar.md-table-toolbar form > input:focus {
    outline: none;
}

/* <chips> */
md-card-content.autocomplete input {
    min-width: 300px; 
}
/* </chips> */


.gray {
    background: #f5f5f5; }
.green {
    background: #b9f6ca; }

.yellow {
    background: #ffff8d; }

md-grid-tile {
    transition: all 400ms ease-out 50ms; }

.badge {
    background-color: #ff5722;
    border-radius: 50%!important;
    font: bold 11px Arial;
    color: #fff;
    line-height: 17px;
    width: 17px;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    right: 7px;
    top: 2px;
}

.badge-plus {
    width: 23px;
    border-radius: 23%!important;
    right: 8.5px;
    top: 4px;
    line-height: 14px;
}

.read{
    opacity: 0.3;
}

.opacity1{
    opacity: 0.1;
}




.highcharts-credits{
    display: none!important;
}

.root-daterange-inst .md-subheader-inner{
    padding: 16px 16px 0px 16px;
}
.root-daterange-inst .md-subheader-content{
    line-height: 20px;
}

.root-daterange-help .md-subheader-inner{
    padding: 0px 16px 10px 16px;
}
.root-daterange-help .md-subheader-content{
    line-height: 15px;
}

.root-daterange-help .md-caption{
    font-weight: 400;
}

.root-daterange-help{
    white-space: normal!important;
}

.genexpert-error-detail{
    max-width: 65%;
    overflow-wrap: anywhere;
    white-space: normal!important;
}

.timeline{
    margin-right: 10px!important;
    margin-left: 10px!important;
    margin-top: 0!important;
}

timeline-panel{
    border:none!important;
    outline: none!important;
}

timeline-badge{
    box-shadow: none!important;
    top: 15px!important;
    z-index: 69!important;
    outline: none!important;
}

.timeline-hover timeline-badge:hover, .timeline-hover timeline-badge:focus{
    background-color: #000!important;
    cursor: pointer!important;
}

.timeline-hover timeline-panel:hover, .timeline-hover timeline-panel:focus{
    background-color: #eee!important;
    cursor: pointer!important;
}

timeline-panel:after {
    display: none!important;
}
timeline-panel:before {
    display: none!important;
}

table.md-table.md-row-select tbody.md-body>tr.md-row:hover {
    cursor: pointer;
}

.resultPos{
    color: #F44336!important;
    font-weight: 900;
}
.resultNeg{
    color: #4CAF50!important;
}
tr.interpretation {
    background: #D32F2F!important;
}
table.md-table.md-row-select tbody.md-body>tr.md-row:hover {
    background: #D32F2F!important;
}
td.interpretation {
    color: #FFF!important;
    font-weight: 900;
}

.black {color: black !important;}
.red {color: red !important;}

md-tooltip.big  {
    font-size: 14px!important;
}


md-dialog .md-body-2{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.toolbar-filter{
    background-color: #fff!important;
    color: rgba(0,0,0,.87)!important;
    height: 49px!important;
    min-height: 49px!important;
    max-height: 49px!important;
}

.toolbar-filter md-icon{
    color:rgba(0,0,0,.54)!important;
}

table.md-table tbody.md-body > tr.md-row:hover {
    background-color: #eeeeee !important;
    cursor: pointer;
}

.searchbar{
    border: 1px solid #ebebeb;
}
.searchbar > .md-whiteframe-z1{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px!important;
    border-radius: 2px;
}
.searchexport{
    padding: 0 15px!important;
    height: 40px!important;
    font-size: 14px!important;
    border: none !important;
    border-radius: 2px !important;
    background: rgb(255, 255, 255) !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px !important;
}

.md-datepicker-input-container {
    width: 150px;
}
.datepicker-xl .md-datepicker-input-container{
    width: 200px;
}
.md-datepicker-calendar-icon{
    fill: currentColor!important;
}
.md-datepicker-input-container{
    margin-left: 0!important;
}

._md-datepicker-floating-label._md-datepicker-has-calendar-icon>label:not(.md-no-float):not(.md-container-ignore) {
    right: 30px;
}



.btn-filter{
    box-shadow: none;
    color: #344054;
    background-color: #ffffff;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    min-height: 40px;
    min-width: 88px;
    line-height: 40px;
    vertical-align: middle;
    padding: 0 12px;
    margin: 0;
    text-transform: none;
    font-weight: 500;
    font-size: 14px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn-filter-lvl1{
    border-bottom: #E53935 3px solid;
}
.btn-filter-lvl1.active{
    background-color: #E53935!important;
}
.btn-filter-lvl2{
    border-bottom: #1E88E5 3px solid;
}
.btn-filter-lvl2.active{
    background-color: #1E88E5!important;
}
.btn-filter-lvl3{
    border-bottom: #8E24AA 3px solid;
}
.btn-filter-lvl3.active{
    background-color: #8E24AA !important;
}
.btn-filter-lvl4{
    border-bottom: #00897B 3px solid;
}
.btn-filter-lvl4.active{
    background-color: #00897B!important;
}






.info-labs{
    right: 3px;
}
.red-bold{
    color: red !important;;
    font-weight: 800;
}

.noshrink .md-secondary-container{
    flex-shrink: inherit;
    -webkit-flex-shrink: inherit;
}

/* .selectdemoSelectHeader {
    /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */
 /* } */ 
    
.selectdemoSelectHeader .demo-header-searchbox {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0; }
.selectdemoSelectHeader .demo-select-header {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
    padding-left: 10.667px;
    height: 48px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: auto; }
.selectdemoSelectHeader md-content._md {
    max-height: 240px; }

.selectedChart{
    background-color: #e8f0fe;
}

.switchChart{
    opacity: 1!important;
}

.status-green{
    color: #4CAF50!important;
}
.status-yellow{
    color: #FFEB3B!important;
}
.status-orange{
    color: #FF9800!important;
}
.status-blue{
    color: #2196F3!important;
}
.status-red{
    color: #F44336!important;
}
md-icon.legend{
    font-size: 17px;
    height: 17px;
    width: 17px;
    min-height: 17px;
    line-height: 0.85;
    min-width: 17px;
    padding-left: 5px;
}

.systemstatus{
    padding: 5px 10px;
    background-color: #fff;
    margin:5px 0px;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}

/*Fixed Columns*/
.container {
    height: 100% ;
    overflow: scroll;
    position: relative;
}

.container-card {
    height: 402px ;
    /* overflow: scroll; */
    position: relative;
}

th, td{
    background-color: #fff;
}

.cross {
    position: relative;
    z-index: 1;
}

.fixed-column-header, .fixed-column-header md-card, main{
    height: 100%;
}
/*End Fixed Columns*/

/* Filterbar laboratory drop down*/
md-select.geo-filter-select .md-select-value {
    max-width: 150px !important;
}
/* End Filterbar laboratory drop down*/

/* Style the container for inputs */
.passwordHelper .container {
  background-color: #f1f1f1;
  padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
.passwordHelper #message {
  display:block;
  color: #000;
  font-size: 12px;
}

.passwordHelper #message p {
  /*font-size: 18px;*/
}

/* Add a green text color and a checkmark when the requirements are right */
.passwordHelper  .valid {
  color: green;
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.passwordHelper .invalid {
  color: red;
}
.md-button.md-small {
    height: 20px;
    line-height: 20px;
    min-height: 20px;
    vertical-align: top;
    font-size: 10px;
    margin: 0;
}

#thresholds md-list-item {
    margin: 5px 0;
}

table thead {
    position: sticky;
    top: 0;
}
table tfoot {
    position: sticky;
    bottom: 0;
    background: #ffffff;
}
table.md-table{
    overflow: initial!important;
}

.italic{
    font-style: italic;
}

/* Performance Indicators history table (moved from performanceindicators.html) */
.pi-history-table md-table-container {
    max-height:350px;
    overflow:auto;
    border:1px solid #e0e0e0;
    border-radius:4px;
    background:#fafafa;
}
.pi-history-table table.md-table {
    margin:0 !important;
    width:100%;
    border-collapse:collapse;
}
.pi-history-table table.md-table thead.md-head > tr.md-row {
    height:24px !important;
}
.pi-history-table table.md-table tbody.md-body > tr.md-row {
    height:20px !important;
}
.pi-history-table table.md-table thead.md-head th.md-column,
.pi-history-table table.md-table tbody.md-body td.md-cell {
    padding:2px 4px !important;
    font-size:10px !important;
    line-height:1.15 !important;
    vertical-align:middle;
}
.pi-history-table table.md-table thead.md-head th.md-column {
    position:sticky;
    top:0;
    z-index:10;
    background:#f3f3f3;
    font-weight:600;
    border-bottom:1px solid #ddd;
}
.pi-history-table table.md-table tbody.md-body tr.md-row:nth-child(even) {
    background:#f9f9f9;
}
.pi-history-table table.md-table tbody.md-body tr.md-row:hover {
    background:#eee;
}
.pi-history-table .pi-alert-chip {
    display:inline-block;
    border-radius:3px;
    padding:1px 4px;
    font-size:9px;
    margin:1px;
    white-space:nowrap;
}

md-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.11);
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.main-toolbar{
    background: linear-gradient(90deg, #2457C5, #2F6FED)!important;
}

.deployment-toolbar--lims {
    background: linear-gradient(90deg, #176A4C, #23885F) !important;
}

md-tabs {
    background: #ffffff;
    border-bottom: 1px solid #e8edf3;
}

/* System status cockpit */
.cockpit-summary-card md-card-content {
    min-width: 230px;
}

.cockpit-live-status {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(93, 107, 125, 0.2);
    border-radius: 999px;
    background: rgba(93, 107, 125, 0.08);
    color: #5d6b7d;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.cockpit-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.cockpit-live-status-live {
    border-color: rgba(32, 164, 100, 0.28);
    background: rgba(32, 129, 91, 0.08);
    color: #1a7a54;
    animation: live-badge-breathe 3.5s ease-in-out infinite;
}

.cockpit-live-status-live .cockpit-live-dot {
    background: #22b96e;
    box-shadow: 0 0 0 0 rgba(32, 164, 100, 0.55);
    animation: live-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cockpit-live-status-reconnecting {
    border-color: rgba(242, 169, 59, 0.36);
    background: rgba(242, 169, 59, 0.1);
    color: #9a6815;
}

.cockpit-live-status-reconnecting .cockpit-live-dot {
    background: #f2a93b;
}

.cockpit-live-status-offline {
    border-color: rgba(183, 53, 53, 0.28);
    background: rgba(183, 53, 53, 0.08);
    color: #9a3340;
}

.cockpit-live-status-offline .cockpit-live-dot {
    background: #b73535;
}

/* Dashboard counters */


/* Live badge — keyframes */
@keyframes live-dot-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(32, 164, 100, 0.55); }
    60%  { box-shadow: 0 0 0 6px rgba(32, 164, 100, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(32, 164, 100, 0);    }
}

@keyframes live-badge-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(32, 164, 100, 0),   0 1px 3px rgba(32, 129, 91, 0.08); }
    50%       { box-shadow: 0 0 8px 1px rgba(32, 164, 100, 0.14), 0 1px 3px rgba(32, 129, 91, 0.12); }
}

.dashboard-counters-card .dashboard-counters-live-badge {
    position: static;
    align-self: flex-start;
    flex: 0 0 auto;
    margin: 0 0 0 10px;
    cursor: default;
}

.dashboard-counters-card > md-card-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 12px 18px;
}

.dashboard-counters-card .dashboard-counters {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 148px;
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid rgba(36, 87, 197, 0.12);
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 58%, #f6fbf8 100%);
}

.dashboard-counters-card .dashboard-counter {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-height: 64px;
    padding: 10px 12px;
    overflow: hidden;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dashboard-counters-card .dashboard-counter + .dashboard-counter,
.dashboard-counters-card .dashboard-counter-status {
    border-top: 1px solid rgba(93, 107, 125, 0.12);
}

.dashboard-counters-card .dashboard-counter:hover {
    background: rgba(36, 87, 197, 0.04);
}

.dashboard-counters-card .dashboard-counter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin-right: 12px;
    border-radius: 8px;
    background: #e9f1ff;
    color: #2457C5;
}

.dashboard-counters-card .dashboard-counter-tests .dashboard-counter-icon {
    background: #e7f6ee;
    color: #20815b;
}

.dashboard-counters-card .dashboard-counter-icon md-icon {
    color: inherit;
}

.dashboard-counters-card .dashboard-counter-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    column-gap: 10px;
}

.dashboard-counters-card .dashboard-counter-label {
    min-width: 0;
    overflow: hidden;
    color: #5d6b7d;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-counters-card .dashboard-counter-value {
    display: inline-block;
    min-width: 4ch;
    overflow: hidden;
    color: #2457C5;
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 34px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-counters-card .dashboard-counter-tests .dashboard-counter-value {
    color: #20815b;
}

.dashboard-counters-card .dashboard-counter-value-updating {
    animation: dashboard-counter-number-pop 800ms ease-out;
}

.dashboard-counters-card .dashboard-counter-patients.dashboard-counter-updating {
    background: rgba(36, 87, 197, 0.07);
    box-shadow: inset 0 0 0 1px rgba(36, 87, 197, 0.18);
    animation: dashboard-counter-pulse 800ms ease-out;
}

.dashboard-counters-card .dashboard-counter-tests.dashboard-counter-updating {
    background: rgba(32, 129, 91, 0.08);
    box-shadow: inset 0 0 0 1px rgba(32, 129, 91, 0.2);
    animation: dashboard-counter-pulse 800ms ease-out;
}

.dashboard-counters-card .dashboard-counter-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    background: #fff5f5;
    color: #b73535;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-counters-card .dashboard-counter-status md-icon {
    margin-right: 6px;
    color: inherit;
}

.dashboard-counters-card .dashboard-counters-stale {
    opacity: 0.76;
}

.dashboard-counters-card .dashboard-counters-map-action {
    display: flex;
    justify-content: center;
    padding: 12px 10% 0;
}

.dashboard-counters-card .dashboard-counters-map-button.md-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 34px;
    height: 34px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(36, 87, 197, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #2457C5;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(36, 87, 197, 0.08);
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dashboard-counters-card .dashboard-counters-map-button.md-button md-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: inherit;
    font-size: 18px;
    line-height: 18px;
}

.dashboard-counters-card .dashboard-counters-map-button.md-button span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.dashboard-counters-card .dashboard-counters-map-button.md-button:hover,
.dashboard-counters-card .dashboard-counters-map-button.md-button:focus {
    background: #f4f8ff;
    border-color: rgba(36, 87, 197, 0.34);
    box-shadow: 0 4px 12px rgba(36, 87, 197, 0.14);
    transform: translateY(-1px);
}

@keyframes dashboard-counter-pulse {
    0% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes dashboard-counter-number-pop {
    0% {
        transform: translateY(0) scale(1);
    }
    35% {
        transform: translateY(-2px) scale(1.08);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 700px) {
    .dashboard-counters-card > md-card-content {
        padding-right: 10px;
        padding-left: 10px;
    }

    .dashboard-counters-card .dashboard-counter {
        min-height: 58px;
        padding: 9px 10px;
    }

    .dashboard-counters-card .dashboard-counter-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        margin-right: 10px;
    }

    .dashboard-counters-card .dashboard-counter-copy {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }

    .dashboard-counters-card .dashboard-counter-value {
        font-size: 26px;
        line-height: 30px;
        text-align: left;
    }

    .dashboard-counters-card .dashboard-counters-map-action {
        padding-right: 10px;
        padding-left: 10px;
    }

    .dashboard-counters-card .dashboard-counters-map-button.md-button {
        width: 100%;
    }
}
/* END of Dashboard counters */