@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: 40px;
    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-color: #fbfbfb !important;
    height: 100%;
}

.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 .md-headline{
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget .smallsize{
    font-size: 13px;
}
.widget md-card-content{
    position:relative;
}
.widget .loading{
    position: absolute; top: calc(50% - 40px); left: calc(50% - 15px);z-index: 59;
}
.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-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-sidenav {
    fill: #737373;
}
.user-avatar {
    border-radius: 99%;
}
/* </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;
}
/* </data-table> */

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

.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;
}

.grey-toolbar{
    background-color: #616161 !important;   
}

.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: 0 2px 5px 0 rgb(0 0 0 / 26%);color: rgb(33,33,33);background-color: rgb(250,250,250);min-height: 36px;min-width: 88px;line-height: 36px;vertical-align: middle;padding: 0 6px;margin: 0;text-transform: uppercase;font-weight: 500;font-size: 14px;
}

.btn-filter-lvl1{
    border-bottom: #E53935 3px solid;
}
.btn-filter-lvl1.active{
    /*color:#fff!important;*/
    background-color: #E53935!important;/*600*/
}
.btn-filter-lvl2{
    border-bottom: #1E88E5 3px solid;
}
.btn-filter-lvl2.active{
    /*color:#fff!important;*/
    background-color: #1E88E5!important;/*600*/
}
.btn-filter-lvl3{
    border-bottom: #8E24AA 3px solid;
}
.btn-filter-lvl3.active{
    /*color:#fff!important;*/
    background-color: #8E24AA !important;/*600*/
}
.btn-filter-lvl4{
    border-bottom: #00897B 3px solid;
}
.btn-filter-lvl4.active{
    /*color:#fff!important;*/
    background-color: #00897B!important;/*600*/
}
.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-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;
}
table.md-table{
    overflow: initial!important;
}

.italic{
    font-style: italic;
}