body {
    background: white;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    overflow: hidden;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nursingcontrol{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
}

md-progress-circular{
    position: absolute;
}

/** SECTION CENTRAL */

.section-central{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100vw;
    height: 93.34%;
    background: #e1e1e1;
}

.left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66%;
    height: 95%;
    flex-direction: column;
}

.left-header{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 10%;
    position: relative;
}

.left-header figure{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.left-header div img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.left-header div figure figcaption{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

.left-header div figure figcaption span{
    position: absolute;
    font-size: 1.5vw;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 90%;
    height: 100%;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-align: center;
}

.left-header-first{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35.5%;
    height: 100%;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    outline: 0;
    position: relative;
    border-top-right-radius: 3em;
    z-index: 2;
}

.left-header-second{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    outline: 0;
    position: absolute;
    left: 31%;
    border-top-right-radius: 3em;
    z-index: 1;
}

.left-header-third{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    outline: 0;
    position: absolute;
    left: 57.5%;
    border-top-right-radius: 3em;
    z-index: 1;
}

.volume-control {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;    
}

.volume-control .md-button {
    background-color: white !important;
    padding: 10%;
    margin: 0;
    height: 6vh;
    width: 6vh;
    min-height: 0;
}

.volume-control .md-button.md-fab:not([disabled]):hover {
    background-color: #efefef !important;
}

.volume-control .md-button img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.left-body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
    background: white;
    flex-direction: column;
    box-shadow: 3px 3px 5px 0px #666666bf;
    border-radius: 8px;
    border-top-left-radius: 0;
    overflow: auto;
}

.left-body-up{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 93%;
    background: white;
}

.left-body-down{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 7%;
    background: #46556a;
    flex-direction: row;
}

.left-body-down-interior{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100%;
    flex-direction: row;
}

.leyend{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 25%;
}

.leyend-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 100%;
}

.leyend-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
    object-fit: scale-down;
}

.leyend-left-small{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}

.leyend-left-big{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 100%;
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
}

.leyend-right{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 75%;
}

.leyend-right span{
    font-size: 1vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    line-height: 1.9vh;
    color: white;
    padding-left: 5%;
}

.leyend-green{
    background:#3aa935;
}

.leyend-red{
    background: #bd1622;
}

.leyend-white{
    background: white;
}

.leyend-yellow{
    background: #f8b133;
}

.right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 95%;
    flex-direction: column;
}

.right-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 10%;
    flex-direction: row;
    position: relative;
}

.right-header div figure{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.right-header div figure img{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.right-header div figure figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100%;
    position: absolute;
}

.right-header div figure figcaption tabName{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.header-normal{
    color: white;
}

.header-focus{
    color: black;
    z-index: 77 !important;
}

.right-header div span{
    font-size: 1.3vw;
    text-transform: uppercase;
}

.right-header-first{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 49%;
    height: 100%;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    position: relative;
    outline: 0;
    border-top-right-radius: 3em;
    z-index: 2;
}

.active-float{
    position: absolute;
    top: 10%;
    right: 12%;
    background: #bd1622;
    width: 10%;
    height: 30%;
    text-align: center;
    font-size: 1vw !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-header-second{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55%;
    height: 100%;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    position: relative;
    outline: 0;
    border-top-right-radius: 3em;
    position: absolute;
    left: 40%;
    z-index: 1;
}

.pending-float{
    position: absolute;
    top: 10%;
    right: 10%;
    background: #f8b133;
    width: 10%;
    height: 30%;
    text-align: center;
    font-size: 1vw !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-body{
    display: flex;
    justify-content: center;
    align-items: center;   
    width: 100%;
    height: 90%;
    background: white;
    box-shadow: 3px 3px 5px 0px #666666bf;
}

/** END OF SECTION CENTRAL */

/**
   HEADER
*/
header {
    background: white !important;
    color: #44546a !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 6.66%;
    border-bottom: 1px solid gray;
}

.header-logo{
    margin-left: 0;
}

.header-logo wc-logo{
    justify-content: flex-start;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.header-logo wc-logo img{
    max-height: 80%;
    max-width: 60%;
    padding-left: 0 !important;
}

.header-name{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 100%;
    font-size: 1.3vw;
    flex-wrap: wrap;
}

.header-title{
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-weight: bold;
    padding-left: 5%;
    font-size: 1.7vw;
}

wc-date{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 30%;
    flex-direction: row;
}

.header-widget{
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: row;
    padding-right: 8%;
}

.header-widget{
    height: 100%;
    padding-right: 0 !important;
}

.header-date{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    padding-right: 0 !important;
}

.header-date p{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    color: #3a546c !important;
    text-align: center;
    font-size: 0.95vw;
    margin-right: 5% !important;
    text-transform: uppercase;
    font-weight: bold;
}

.header-time{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    height: 100%;
    padding-right: 0 !important;
}

.header-time p{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    font-size: 1.3vw;
    color: #3b99e1 !important;
    margin-top: 5%;
    font-weight: bold;
}

.header-widget figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35%;
    height: 100%;
}

.header-widget figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
}

/**
   END OF HEADER
*/

/**
    PANTALLA DE CARGA
*/

.pantallaCarga{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.pantallaCarga h2 {
    margin-bottom: 2em;
}

.monitoring-nothing{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.monitoring-nothing span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 30%;
    font-size: 2vw;
    text-align: center;
}

#loading-anim {
    display: flex;
    justify-content: center;
    align-items:center;
    width: 170px;
    height: 170px;
    background: url("../images/loading_anim.png") left center;
    -webkit-animation: play_loading 3s steps(8) infinite;
    -moz-animation: play_loading 3s steps(8) infinite;
    -o-animation: play_loading 3s steps(8) infinite;
    animation: play_loading 3s steps(8) infinite;
    z-index: 5001;
    margin-left: -30px;
    margin-top: -30px;
}

@-webkit-keyframes play_loading {
    from { background-position:    0px; }
    to { background-position: -1360px; }
}

@-moz-keyframes play_loading {
    from { background-position:    0px; }
    to { background-position: -1360px; }
}

@-ms-keyframes play_loading {
    from { background-position:    0px; }
    to { background-position: -1360px; }
}

@-o-keyframes play_loading {
    from { background-position:    0px; }
    to { background-position: -1360px; }
}

@keyframes play_loading {
    from { background-position:    0px; }
    to { background-position: -1360px; }
}

/* FIN NUEVO LOADING */

/**
    MONITORIZANDO
*/

.left-body-monitoring{
    display: block !important;
    justify-content: space-around;
    align-items: center;
    z-index: 2;
    height: 95% !important;
    width: 98% !important;
    overflow-x: hidden;
    white-space: initial !important;
    overflow-y: auto;
}

.left-body-monitoring li{
    border-radius: 0 !important;
    display: inline-block;
    overflow: hidden;
    opacity: 0.9;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: calc(100% / 7);
    padding: 1% 1% 2%;
    vertical-align: top;
}

.left-body-monitoring li.bind{
    height: 25%;
}

.room-status-red {
    border: 3px solid #bd1622 !important;
    background: #ca454e !important;
    -webkit-animation-name: room-status-anim;
    animation-name: room-status-anim;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

@-webkit-keyframes room-status-anim {
    0%, 30%, 50%, 70%, 100% {
        opacity: 1;
        transform: none;
    }
    40% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    60% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes room-status-anim {
    0%, 30%, 50%, 70%, 100% {
        opacity: 1;
        transform: none;
    }
    40% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    60% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.room-status-red > div:first-child {
    background: #ca454e !important;
}

.room-status-yellow {
    border: 3px solid darkgoldenrod !important;
}

.room-status-yellow > div:first-child {
    background: #f8b133 !important;
}

.room-status-red .room-right span, .room-status-yellow .room-right span{
    color: white !important;
}

.room-status-red .room-left img, .room-status-yellow .room-left img{
    filter: brightness(10);
}

.room-status-on{
    background: #ededed;
}

.room-status-off{
    background: #c6c6c6 !important;
    border: 3px solid #b2b2b2 !important;
}

.room-status-off * {
    border-color: #b2b2b2 !important;
}

.room-status-off .room-right span{
    color: #9d9d9c !important;
}

.red-status{
    background: #bd1622 !important;
}

.gray-status{
    background: gray !important;
}

.green-status{
    background: #3aa935 !important;
}

.left-body-monitoring li md-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: row; 
}

.left-body-monitoring li .room-total{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    outline: 0;
    background: #ededed;
    border-radius: .7em;
    border: 3px solid #dadada;
    overflow: hidden;
    position: relative;
}

.left-body-monitoring li .room-total.disabled{
    background: #c6c6c6;
    border-color: #b5b5b5;
    filter: grayscale(1) contrast(0.5);
}

.left-body-monitoring li .room-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 100%;
}

.left-body-monitoring li .room-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 45%;
    object-fit: scale-down;
}

.left-body-monitoring li .room-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    outline: 0;
    margin-right: 20%;
}

.left-body-monitoring li .room-right span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90%;
    line-height: 1em;
    font-size: 1.5vw;
    font-weight: bold;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-align: center;
    color: #46556a;
}

.left-body-monitoring li .room-down{
    width: 100%;
    border-top: 1px solid #cbcbcb;
}

.left-body-monitoring li .room-down > div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 25%;
    outline: 0;
}

.left-body-monitoring li .room-down > div.danger {
    background-color: #d82641;
    color: white;
}

.left-body-monitoring li .room-down > div.danger * {
    filter: brightness(10);
}

.left-body-monitoring li .room-down > div:not(:last-child) {
    border-right: 1px solid #cbcbcb;
}

.left-body-monitoring li .room-down img{
    width: 80%;
    height: 50%;
    object-fit: scale-down;
}

.left-body-monitoring li .room-down span{
    line-height: 1em;
    font-size: 1.3vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    color: #46556a;
}

.room-status-off .room-down img {
    filter: grayscale(1);
    opacity: 0.5;
}

.room-status-off .room-down span {
    color: #9d9d9c !important;
}

/**
    SIN MONITORIZAR
*/
.left-body-without-monitoring{
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    height: 100% !important;
    width: 100% !important;
    overflow-x: hidden;
    white-space: initial !important;
    overflow-y: auto;
    flex-direction: column;
    position: relative;
}

.left-body-without-monitoring .pattern-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-body-without-monitoring .pattern-container .patt-holder {
    background: #465569;
    border-radius: 2em;
}

.without-monitoring-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 31%;
    height: 100%;
}

.places-menu{
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex-wrap: wrap;
    white-space: nowrap;
    border: 2px solid #b2b2b2;
}

.places-menu-list{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    background: white;
    position: relative;
}

.places-menu-list .arrow{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5%;
    height: 20%;
    object-fit: scale-down;
    right: 4%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

.places-menu-hospital{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 8vh;
    outline: 0;
    border-bottom: 2px solid #b2b2b2;
    background: #dadada;
    position: relative;
}

.places-menu-list:last-child .places-menu-hospital{
    border-bottom: 2px solid #b2b2b2;
}

.places-menu-hospital-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 100%;
}

.places-menu-hospital-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 40%;
    object-fit: scale-down;
}

.places-menu-hospital-right{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 75%;
    height: 100%;
    padding-left: 2%;
}

.places-menu-hospital-right span{
    font-size: 1.6vw;
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    font-weight: bold;
    align-items: center;
    width: 85%;
    height: 100%;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    line-height: 1.2em;
}

.places-menu-plants{
    display: flex;
    justify-content: center;
    width: 100%;
}

.plants-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
}

.plants-menu li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 5vh;
    flex-direction: row;
    background: #f6f6f6;
    outline: 0;
}

.plants-menu li.selected {
    background: #46556a;
}

.plants-menu li.selected .plants-menu-right span{
    color: white;
}

.plants-menu-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    height: 100%;
}

.plants-menu-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
    object-fit: scale-down;
}

.plants-menu-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 100%;
}

.plants-menu-right span{
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    width: 100%;
    height: 100%;
    font-size: 1.3vw;
}

.without-monitoring-up{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 93%;
    background: white;
}

/**
    LEYENDA DE SIN MONITORIZAR
*/

.without-monitoring-down{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 7%;
    background: #46556a;
    flex-direction: row;
}

.leyend-monitoring{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 25%;
}

.leyend-monitoring:nth-child(1){
    margin-left: 2%;
}

.leyend-monitoring-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 55%;
    border-radius: .5em;
}

.leyend-monitoring-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: scale-down;
    width: 100%;
    height: 100%;
}

.leyend-monitoring-left-small{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}

.leyend-monitoring-left-big{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 100%;
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
}

.leyend-monitoring-right{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5%;
    height: 100%;
}

.leyend-monitoring-right span{
    font-size: 1vw;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: 1.1em;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    color: #46556a;   
}

.leyend-blue{
    background: #c5d3de;
}

.leyend-blue span{
    border: 1px solid #46556a;
}

.leyend-monitorized{
    background: #8997a1;
}

.leyend-monitorized span{
    border: 1px solid black;
}

/**
    PARTE DERECHA DE SIN MONITORIZAR
*/

.without-monitoring-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 69%;
    height: 100%;
}

.without-monitoring-right ul{
    display: block !important;
    justify-content: space-around;
    align-items: center;
    z-index: 2;
    height: 98% !important;
    width: 98% !important;
    overflow-x: hidden;
    white-space: initial !important;
    overflow-y: auto;
    margin-left: 1%;
}

.without-monitoring-right ul li{
    border-radius: 0 !important;
    display: inline-flex;
    overflow: hidden;
    opacity: 0.9;
    align-items: center;
    justify-content: center;
    width: 33%;
    height: 12.5%;
    margin-bottom: 1%;
    outline: 0;
}

.without-monitoring-right ul li:nth-child(1){
    margin-top: 1%;
}

.room-monitoring{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90%;
    outline: 0;
}

.blue-status{
    background: #46556a !important;
}

.monitorized-byother-status .room-monitoring-left{
    background-color: #8cc7e6 !important;
}

.monitorized-status .room-monitoring-left{
    background: #95c11f !important;
}

.monitorized-status .room-monitoring-right{
    border-left: 3px solid #dadada !important;
}

.without-monitoring-right ul li .room-monitoring-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
    background-color: #ededed;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    border-top: 3px solid #dadada;
    border-left: 3px solid #dadada;
    border-bottom: 3px solid #dadada;
}

.without-monitoring-right ul li .room-monitoring-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    height: 70%;
    object-fit: scale-down;
}

.without-monitoring-right ul li .room-monitoring-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 100%;
    border-top-right-radius: .7em;
    border-bottom-right-radius: .7em;
    outline: 0;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    border: 3px solid #dadada;
    background: #ededed;
}

.without-monitoring-right ul li .room-monitoring-right span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100%;
    line-height: 1.12em;
    font-size: 1.8vw;
    font-weight: bold;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-align: center;
    color: #46556a;
}

/**
    MENU DERECHA
*/

.right-body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
    border-radius: 8px;
    border-top-left-radius: 0;
}

.historic-menu{
    width: 97%;
    height: 98%; 
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex-wrap: wrap;
    white-space: nowrap;
}

.historic-menu li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 99%;
    height: 12.5%;
    font-size: 1.3vw;
    flex-direction: row;
    border: 4px solid #b0b0b0;
    background: white;
    border-style: solid;
    border-width: 1px;
}

.historic-menu li:not(:last-child) {
    border-bottom: none;
}

.red-room{
    background: #bd1622 !important;
    color: white !important;
}

.yellow-room{
    background: #f8b133 !important;
    color: white !important;
}

.yellow-target{
    border-color: darkgoldenrod !important;
    background: #f9c15c !important;
}

.yellow-target .text-sent{
    color: black !important;
}

.yellow-target .date-sent{
    color: black !important;
}

.yellow-target .historic-menu-room span{
    color: black !important;
}

.red-target{
    border-color: #bd1622 !important;
    background: #ca454e !important;
}

.red-target .text-sent{
    color: white !important;
}

.red-target .date-sent{
    color: white !important;
}

.red-target .historic-menu-room span{
    color: white !important;
}

.historic-menu li:focus{
    outline: 0;
    /*background: #cbe2ff;*/ 
}

.historic-menu-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
}

.historic-menu-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    height: 65%;
    object-fit: scale-down;
}

.historic-menu-right{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 50%;
    height: 100%;
    flex-direction: column;
}

.historic-menu-room{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
}

.historic-menu-room span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 70%;
    line-height: 1em;
    font-size: 1.8vw;
    font-weight: bold;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-align: center;
}

.date-sent{
    font-size: 1.1vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 30%;
    width: 95%;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    color: gray;
}

.text-sent{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.1em;
    flex-wrap: wrap;
    width: 95%;
    font-weight: bold;
    font-size: 1.1vw;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

/**
    PENDIENTES
*/

.pending-menu{
    width: 97%;
    height: 98%;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex-wrap: wrap;
    white-space: nowrap;
}

.pending-menu li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1.3vw;
    flex-direction: column;
    margin-bottom: 3px;
    outline: 0;
}

.pending-menu li figure{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 90%;
}

.pending-menu li figure div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
}

.pending-menu li figure div img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 60%;
    object-fit: scale-down;
}

.pending-menu li figure figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
}

.pending-menu li figure figcaption span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2vw;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.pending-menu li .pending-number{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 10%;
}

.pending-menu li .pending-number span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 45%;
    background: black;
    color: white;
    border-radius: 50%;
}

.pending-category{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 7vh;
    outline: 0;
    border: 4px solid gray;
}

.pending-notice{
    display: flex;
    justify-content: center;
    width: 100%;
}

.pending-notice ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.pending-notice ul li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 8vh;
    flex-direction: row;
    border: 1px solid #9e9e9e;
    background: white;
    outline: 0;
    margin-bottom: 3px;
}

.pending-notice ul li:first-child{
    margin-top: 3px;
}

.pending-menu-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
}

.pending-menu-left img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    height: 65%;
    object-fit: scale-down;
}

.pending-menu-right{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 50%;
    height: 100%;
    flex-direction: column;
}

.pending-menu-room{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
}

.pending-menu-room span{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90%;
    line-height: 1em;
    font-size: 1.8vw;
    font-weight: bold;
    overflow: hidden;
    white-space: normal;
    flex-wrap: nowrap;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-align: center;
}

.pending-menu-room img.close-button {
    height: 30px;
    margin-left: 8px;
    cursor: pointer;
    outline: none;
}

.pending-red{
    color: #c34747;
}

.pending-yellow{
    color: #f8b133;
}

.pending-date-sent{
    font-size: 1.1vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 30%;
    width: 95%;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    color: gray;
}

.pending-text-sent{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: normal;
    flex-wrap: wrap;
    width: 95%;
    font-weight: bold;
    font-size: 1.1vw;
    line-height: 1.2em;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

/**
    MODALES DE TIPO MENU
*/

.md-open-menu-container.md-active{
    border: 1px solid gray;
}

md-menu-item>.md-button {
    border-bottom: 1px solid gray;
}

md-menu-item>.md-button span{
    font-size: 1.2vw;
}

md-menu-item {
    height: 55px !important;
}

md-menu-content{
    padding: 0 !important;
    max-height: 100vh;
}

/**
    MODALES
*/

/** MODAL 
*/

.mymodal {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55vw;
    height: 60vh;
    flex-direction: column;
    border-radius: 1.5em;
}

.mymodal-automatic{
    height: 60vh;
}

.mymodal-automatic-title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
}

.mymodal-automatic-title span{
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.9vw !important;
    font-weight: bold;
}

.mymodal-automatic-hour{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
    flex-direction: row;
}

.mymodal-automatic-hour-custom{
    height: 50% !important;
}

.mymodal-automatic-hour-custom .mymodal-automatic-hour-right figure img{
    margin-right: 5%;
}

.mymodal-automatic-hour-left{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: row;
}

.mymodal-automatic-hour-left figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: row;
}

.mymodal-automatic-hour-left figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    width: 30%;
    object-fit: scale-down;
    margin-right: 5%;
}

.mymodal-automatic-hour-left figure figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.mymodal-automatic-hour-left figure figcaption span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: row;
    font-size: 3vw;
    font-weight: bold;
    color: #ca454e;
}

.mymodal-automatic-hour-right{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 60%;
    flex-direction: row;
}

.mymodal-automatic-hour-right figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: row;
}

.mymodal-automatic-hour-right figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    width: 30%;
    object-fit: scale-down;
}

.mymodal-automatic-hour-right figure figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0 !important;
}

.mymodal-automatic-hour-right figure figcaption span{
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
    flex-direction: row;
    font-size: 2vw;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.mymodal-automatic-down{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
}

.mymodal-historic-down{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
}

.mymodal-automatic-down span{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
    font-size: 1.6vw !important;
    font-weight: bold;
    color: #696969;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.mymodal-mini{
    height: 40vh;
}

.mymodal-mini .mymodal-body-up{
    height: 50%;
}

.mymodal-mini .mymodal-body-down{
    height: 50%;
}

.mymodal-medium{
    height: 45vh;
}

.mymodal-medium .mymodal-body-up{
    height: 60%;
}

.mymodal-medium .mymodal-body-down{
    height: 40%;
}

.mymodal-form{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.my-modal-toolbar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 12.5%;
    background: #45546a !important;
}

.my-modal-toolbar span{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 100%;
    font-size: 1.7vw !important;
    text-transform: uppercase;
    text-align: center;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.mymodal-body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 87.5%;
    flex-direction: column;
    padding: 0.5em;
}

.mymodal-body-up{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
    flex-direction: column;
}

.mymodal-body-up .md-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #216b8e;
    border-radius: 0.5em;
    background: white;
    margin-right: 1%;
    box-shadow: 2px 2px 5px 0px #80929b;
    min-width: 0;
}

.mymodal-body-up .md-button img {
    height: 40px;
    width: auto;
    margin: 4px;
}

.mymodal-body-up .md-button:focus img, .mymodal-body-up .md-button.selected img {
    filter: invert(1);
}

.modal-phone-p{
    min-height: 60px;
}

.mymodal-body-up-title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 40%;
}

.mymodal-body-up-title-voip{
    width: 95%;
    height: 100% !important;
}

.mymodal-body-ul{
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap !important;
    flex-wrap: wrap;
}

.mymodal-body-ul li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25%;
    flex-direction: row;
    border-bottom: 1px solid black;
}

.mymodal-voip-ul-first{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    height: 100%;
    flex-direction: column;
}

.mymodal-voip-ul-second{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    height: 100%;
    flex-direction: column;
}

.mymodal-voip-ul-third{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    height: 100%;
    flex-direction: column;
}

.mymodal-body-ul li span{
    display: flex;
    justify-content: center;
    align-items: center;
    color: black !important;
    font-size: 1vw;
}

.mymodal-body-up-title p{
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 5%;
    margin: 0 !important;
    font-size: 1.7vw !important;
    color: black !important;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-transform: uppercase;
}

.mymodal-body-up-text{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
}

#modalTextInput{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 80%;
    text-align:center;
    font-size: 2vw;
    outline: 0;
}

.mymodal-body-down{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
}

.mymodal-body-success{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.mymodal-body-success .md-button{
    width: 70% !important;
    min-height: 9% !important;
}

.mymodal-body-down .md-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 49%;
    height: 60%;
    border: 2px solid #216b8e;
    border-radius: 1em;
    background: white;
    margin-right: 1%;
    box-shadow: 2px 2px 5px 0px #80929b;
}

.mymodal-body-down .md-button span{
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #216b8e !important;
    font-size: 1.5vw;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    margin: 0 !important;
    padding: 0 !important;
}

.mymodal-body-down .grayButton{
    cursor: default;
    background: lightgray;
}

.mymodal-body-down .grayButton span{
    color: black !important;
}

/**
    MODAL DE COMPRA
*/

.mymodalbuy {
    height: 70vh;
}

.mymodalbuymini{
    height: 40vh !important;
}

.mymodalbuymini .message-money-headers{
    height: 50% !important;
}

.mymodalbuymini .message-money-buttons{
    height: 50% !important;
}

.mymodal .md-button:hover{
    background: rgba(0,0,0,0);
}

.mymodal figcaption {
    font-size: 1.5em;
    margin-top: .5em;
}

.mymodal img{
    width: 300px;
}

.mymodal span{
    display: block;
    font-size: 3em;
}

.mymodal .md-button:focus, .mymodal .md-button.selected {
    background: #216b8e !important;
}

.mymodal .md-button.selected img {
    filter: brightness(10);
}

.mymodal .md-button:focus span, .mymodal .md-button.selected span {
    color: white !important;
}

/**
    MODAL DE ESTADO
*/

.mymodal-status .my-modal-toolbar{
    height: 18%;
}

.mymodal-status .my-modal-body{
    height: 82%;
}

.mymodal-status-up{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
    flex-direction: row;
}

.mymodal-status-up figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100%;
    flex-direction: row;
}

.mymodal-status-up figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
    height: 100%;
    object-fit: scale-down;
    margin-right: 5%;
}

.mymodal-status-up figure figcaption{
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 50%;
}

.mymodal-status-up figure figcaption span{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2vw;
    font-weight: bold;
}

.mymodal-status-middle md-button:focus{
    outline: 0;
    background: blue;
    color: white;
}

.mymodal-status-middle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
}

.mymodal-status-middle .md-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 60%;
    border: 2px solid #216b8e;
    border-radius: 1em;
}

.mymodal-status-middle .md-button:nth-child(1){
    margin-right: 3%;
}

.mymodal-status-middle .md-button:nth-child(2){
    margin-left: 3%;
}

.mymodal-status-middle .md-button span{
    font-size: 1.5vw;
    color: #216b8e;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.mymodal-status-down{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 30%;
    flex-direction: column;
}

.mymodal-status-leyend{
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-direction: row;
    font-size: 1.2vw !important;
    color: gray;
    margin-bottom: 1%;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.mymodal-status-leyend span{
    display: flex !important;
    font-size: 1.2vw;
}

.status-blue{
    color: #216b8e;
    font-weight: bold;
}

.mayus{
    text-transform: uppercase;
}

.status-red{
    color: #ca454e;
    font-weight: bold;
}

.status-orange{
    color: #f8b133;
    font-weight: bold;
}

.status-activate{
    background: #ca454e !important;
    font-weight: bold;
}

.status-activate .date-sent{
    color: white;
}

.status-pending{
    background: #f8b133 !important;
    font-weight: bold;
}

.status-pending .date-sent{
    color: white;
}

/**
    HISTORIC MENU MODAL
*/

.historic-menu-modal{
    width: 90%;
}

.historic-menu-modal li{
    height: 33.33%;
}

.historic-menu-modal li .historic-menu-right span{
    font-size: 1vw !important;
    height: auto !important;
    width: 100%;
}

.historic-menu-modal li .historic-menu-right span:nth-child(1){
    color: #abaaaa;
}

/**
    SCROLLBAR
*/

.historic-menu::-webkit-scrollbar {
    height: 10px;
    width: 4%;
    background: #ACACAC; 
} 

.historic-menu-modal::-webkit-scrollbar {
    height: 10px;
    width: 3%;
    background: #ACACAC; 
}

::-webkit-scrollbar {
    height: 10px;
    width: 3%;
    background: #ACACAC; 
}

::-webkit-scrollbar-thumb {
    background: #44546a;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    width: 20px;
    height: 10px !important;
}

/**
    PHONE
*/

.phone-down span{
    color: gray;
    text-align: center;
}

.red-text{
    color: #bd1622 !important;
}

.green-text{
    color: #3aa935 !important;
}

.gray-text{
    color: gray !important;
}

/* FUENTE GLOBER */

@font-face {
    font-family: 'GloberRegular';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/GloberRegular.otf') format('truetype');
}

@font-face {
    font-family: 'GloberBold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/GloberBold.otf') format('truetype');
}

@font-face {
    font-family: 'GloberSemiBold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/GloberSemiBold.otf') format('truetype');
}

.low-battery-indicator {
    width: 24px;
    position: absolute;
    top: 2px;
    right: 2px;

    -webkit-animation-name: my-flash;
    animation-name: my-flash;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

.link-off-indicator {
    width: 24px;
    position: absolute;
    bottom: 2px;
    right: 2px;

    -webkit-animation-name: my-flash;
    animation-name: my-flash;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

@-webkit-keyframes my-flash {
    0%, 30%, 50%, 70%, 100% {
        opacity: 1;
    }
    40%, 60% {
        opacity: 0;
    }
}

@keyframes my-flash {
    0%, 30%, 50%, 70%, 100% {
        opacity: 1;
    }
    40%, 60% {
        opacity: 0;
    }
}

.left-body-help {
    display: flex;
    flex-direction: row;
    z-index: 2;
    height: 100% !important;
    width: 100% !important;
    overflow-x: hidden;
    white-space: initial !important;
    overflow-y: auto;
}

.left-body-help-left {
    background-color: white;
    width: 20%;
    border-right: 2px solid #b2b2b2;
    padding: 1.5vh;
    overflow-y: auto;
}

.left-body-help-left .element {
    background-color: #909090;
    margin-bottom: 1.5vh;
    padding: 1.5vh;
    color: white;
    border-radius: 1vh;
    cursor: pointer;
    outline: none;
    text-align: center;
}

.left-body-help-left .element:last-child {
    margin-bottom: 0;
}

.left-body-help-left .element.selected {
    background-color: #465569;
}

.left-body-help-left .element img {
    margin-bottom: 1.5vh;
}

.left-body-help-right {
    background-color: white;
    width: 80%;
    overflow: auto;
}

.left-body-help-right .help-manual-pages {
    overflow: auto;
    height: 100%;
    padding: 1.5vh;
}

.left-body-help-right .help-manual-pages::after {
    content:'';
    padding-right: 0.02px;
}

.left-body-help-right .help-manual-pages img {
    height: 100%;
    margin-right: 1.5vh;
}

.left-body-help-right .help-manual-pages.zoom img {
    height: 150%;
}

.left-body-help-right .md-button.zoom-button {
    background-color: #465569 !important;
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.left-body-help-right .md-button.zoom-button:not([disabled]):hover {
    background-color: #6b7f9a !important;
}

.left-body-help-right .help-video {
    overflow: auto;
    height: 100%;
    padding: 1.5vh;
}

.left-body-help-right .help-video iframe {
    width: 100%;
    height: 100%;
}

.slider-container {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto;
    font-size: initial;
    padding: 0 5%;
    justify-content: space-evenly;
}

.slider-container span {
    font-size: 1em;
}

.slider-container img {
    width: 8vh;
    margin-right: 4vh;
}

.custom-slider.rzslider {
    margin: 48px 0;
}

.custom-slider.rzslider .rz-pointer {
    background-color: white;
    border: 4px solid #236b8c;
    outline: none;
}

.custom-slider.rzslider .rz-bar {
    background: #236b8c;
}

.custom-slider.rzslider .rz-selection {
    background: #d8e0f3;
}

.custom-slider.rzslider .rz-pointer:after {
    display: none;
}

.custom-slider.rzslider .rz-bubble {
    bottom: 20px;
}

.custom-slider.rzslider .rz-bubble.rz-limit {
    font-weight: bold;
    color: #236b8c;
}

.custom-slider.rzslider .rz-tick {
    width: 1px;
    height: 10px;
    margin-left: 16px;
    border-radius: 0;
    background: #236b8c;
    top: -1px;
}

.custom-slider.rzslider .rz-tick .rz-tick-value {
    color: #236b8c;
}

.custom-slider.rzslider .rz-tick.rz-selected {
    background: #d8e0f3;
}

.custom-slider.rzslider .rz-tick.rz-selected .rz-tick-value {
    color: #d8e0f3;
}

#modal-vigilancia {
    overflow-x: hidden;
    max-height: 95%;
    max-width: 95%;
    min-height: 50%;
    min-width: 50%;
}

#modal-vigilancia .grid-element {
    border-radius: 8px;
    overflow: hidden;
    margin: 2px;
    background: #46556a;
}

#modal-vigilancia .grid-element > div {
    width: 100%;
    color: white;
    padding: 4px 8px;
}

#modal-vigilancia .grid-element img {
    width: 100%;
    height: auto;
}

#modal-vigilancia .grid-element md-progress-circular {
    position: relative;
    margin: 12px auto;
}

#modal-vigilancia .grid-element md-progress-circular svg path {
    stroke: white !important;
}