html {
    scroll-behavior: smooth;
}

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

figure{
    margin: 0;
}

p {
    margin: 0 !important;
}

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

.capitalize{
    text-transform: capitalize;
}

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

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

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

.cargaCentral figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    border: 8px solid white;
    border-radius: 1em;
}

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

.cargaCentral figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
    background: white;
    color: #3a526a;
    font-weight: bold;
    font-size: 2vw;
}

/* NUEVO LOADING */

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

@-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 */

.modalroomservice-body-up-description span::-webkit-scrollbar {
    height: 15px;
    width: 11px;
    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;
}

.responsive ::-webkit-scrollbar {
    height: 10px;
    width: 1.5vh;
    background: #ACACAC; 
}

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

.header-menu ul::-webkit-scrollbar {
    display: none;
}

.header-menu ul::-webkit-scrollbar-thumb {
    display: none;
}

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

.base{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: white;
}

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

.header-title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    background: #38393f;
}

.header-title span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    font-size: 2vw;
    color: white;
}

.header-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #38393f;
}

.header-menu-rs{
    justify-content: space-evenly;
}

.header-menu .header-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10vh;
    height: 100%;
    outline: 0;
}

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

.header-menu .header-button figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 20%;
    object-fit: scale-down;
}

.header-button-left{
    transform: rotate(180deg);
}

.header-menu ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*width: 80%;*/
    height: 100%;
    flex-direction: row;
    overflow-y: hidden !important;
    overflow-x: auto !important;
    white-space: nowrap;
    position: relative;
    flex: 1;
}

.header-menu ul li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: fit-content;
    outline: 0;
    flex: 1;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.header-menu ul li:last-child {
    border-right: 2px solid rgba(255, 255, 255, 0.2);    
}

.header-menu ul li div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 2.8vw;
    color: gray;
    font-weight: bold;
    cursor: pointer;
    padding: 0 8px;
}

.selected-header {
    background-color: rgba(255, 255, 255, 0.1);
    /*text-transform: uppercase;*/
    color: white !important;
}

.body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
    background: #e1e1e1;
}

.cleanance-rooms{
    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;
}

.cleanance-rooms li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 14.2%;
    border: 1px solid white;
    border-left: none;
    border-right: none;
    flex-direction: column;
    border-top: none;
    outline: 0;
    flex-direction: row;
    position: relative;
}

.cleanance-rooms li:nth-child(1){
    border-top: 1px solid #38393f;
}

.room-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    outline: 0;
}

.empty{
    background: #e6d881;
}

.busy{
    background: #d34f4f;
}

.cleaned{
    background: #a4c656;
}

.free{
    background: #b7b7b7;
}

.inprogress{
    background: #8cc7e6;
}

.revised{
    background: #0cbd00;
}

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

.room-icon figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 70%;
    object-fit: scale-down;
}

.room-name{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
    outline: 0;
    position: relative;
    text-transform: uppercase;
    background: #dedede;
    cursor: pointer;
    flex-direction: row;
}

.room-name .room-name-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
    flex-direction: column;
    padding-left: 5%;
    outline: 0;
}

.room-name .room-hab{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-size: 2.5vw;
}

.room-name figure{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 45%;
    flex-direction: row;
}

.room-name figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1%;
    height: 50%;
    object-fit: scale-down;
}

.room-name figure figcaption{
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    width: 80%;
    height: 100%;
    color: #808080;
    font-weight: normal;
    font-size: 2.1vw;
}

.room-name figure figcaption div{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    flex-direction: row;
}

.room-name figure figcaption div .separador{

}

.room-name figure figcaption p{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.room-settings{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    position: relative;
    outline: 0;
    right: 0;
}

.room-settings .room-wheel{
    outline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.room-settings .room-wheel figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 50%;
    outline: 0;
}

.room-settings .room-wheel figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.fecha{
    color: #000000;
}

.room-menu{
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}

.room-menu .room-menu-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 5vh;
    flex-direction: row;
    outline: 0;
    border: 1px solid gray;
    cursor: pointer;
    flex-direction: row;
}

.separator{
    background: black;
    height: 2vh !important;
}

.room-menu-button img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5%;
    height: 80%;
    object-fit: scale-down;
}

.room-menu-button div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5%;
    height: 100%;
}

.room-menu-button div svg{
    width: 85%;
    height: 85%;
}

.svg-red{
    color: red;
}

.svg-red svg{
    fill: red;
}

.svg-green{
    color: green;
}

.svg-green svg{
    fill: green;
}

.svg-orange{
    color: orange;
}

.svg-orange svg{
    fill: orange;
}

.svg-blue{
    color: blue;
}

.svg-blue svg{
    fill: blue;
}

.room-menu-button span{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-weight: bold;
    color: #000000;
}

.yellow{
    background: #f4e589;
    font-weight: bold;
}

.red{
    background: #e39da5;
    font-weight: bold;
}

.blue{
    background: #baddf0;
    font-weight: bold;
}

.gray{
    background: #dedede;
    font-weight: bold;
}

.green{
    background: #c6da94;
    font-weight: bold;
}

.dark-green{
    background: #7fd879;
    font-weight: bold;
}

/**
    MODALES
*/

/** MODAL ROOMSERVICE */

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

.modalroomservice-mini{
    height: 60vh;
}

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

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

.modalroomservice-medium{
    height: 45vh;
}

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

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

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

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

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

.modalroomservice-body-up{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 50%;
    flex-direction: column;
}

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

.modalorder-body-up-description{
    display: block;
    justify-content: flex-start;
    align-items: center;
    width: 80%;
    height: 70%;
    flex-direction: column;
    overflow: auto;
    flex-wrap: wrap;
    background: #e1e1e1;
}

.modalorder-body-up-description::-webkit-scrollbar {
    height: 15px;
    width: 11px;
    background: #ACACAC; 
}

.modalorder-body-up-description li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 20%;
    outline: 0;
}

.modalorder-body-up-description li:focus span{
    background: #af9f73;
    color: white !important;
}

.modalorder-body-up-description li span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 3%;
    font-size: 1.8vw;
    outline: 0;
}

.responsiveModal .modalorder-body-up-description li span{
    font-size: 1.8vh !important;
}

.modalroomservice-body-up-description{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 60%;
}

.modalroomservice-body-up-description span{
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2vw !important;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow-x: hidden;
    overflow-y: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    padding: 1.5%;
}

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

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

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

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

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

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

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

.modalroomservice-body-up-title p{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 5%;
    margin: 0 !important;
    font-size: 3vw !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;
}

.modalroomservice-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: 100%;
    height: 100%;
    text-align:center;
    font-size: 2vw;
    margin: 0 !important;
    padding: 0 !important;
    outline: 0;
}

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

.modalroomservice-body-down{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 50%;
}

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

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

.mail{
    display: none;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 30% !important;
    object-fit: scale-down;
}

.responsiveModal .mail{
    display: flex;
}

#invoicemodal{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 15%;
    border: 2px solid black;
    text-align: center;
    font-size: 1.7vw;
}

.responsiveModal #invoicemodal{
    font-size: 1.7vh;
}

#invoicemodal:focus{
    background: #ffff8c;
}

.redmail{
    background: #f9b2b2;
}

.modalinvoice-body-down .md-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 29%;
    height: 50%;
    border: 3px solid #af9f73;
    border-radius: 1em;
    background: white;
    margin-right: 1%;
    box-shadow: 2px 2px 5px 0px #80929b;
}

.modalinvoice-body-down .md-button span{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #796d4b !important;
    font-size: 1.8vw;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1em;
    white-space: normal;
}

.modalroomservice-body-down .md-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 29%;
    height: 50%;
    border: 3px solid #af9f73;
    border-radius: 1em;
    background: white;
    margin-right: 1%;
    box-shadow: 2px 2px 5px 0px #80929b;
}

.modalroomservice-body-down .md-button span{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #796d4b !important;
    font-size: 1.8vw;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1em;
    white-space: normal;
}
/**
    MODAL DE COMPRA
*/

.modalroomservicebuy {
    height: 70vh;
}

.modalroomservicebuymini{
    height: 40vh !important;
}

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

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

.modalroomservice .md-button{
    margin: 0 !important;
    padding: 0 !important;
}

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

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

.modalroomservice img{
    width: 300px;
}

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

.modalroomservice .md-button:focus{
    background: #af9f73 !important;
}

.modalroomservice .md-button:focus span{
    color: white !important;
}

/** 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: 70%;
    flex-direction: column;
}

.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: 20%;
    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;
    text-align: center;
}

.mymodal-automatic-down textarea{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80%;
    font: inherit;
    resize: none;
}

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

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

.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{
    background: #216b8e !important;
}

.mymodal .md-button:focus 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%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-y: auto;
}

.historic-menu-modal li{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 33.33%;
    width: 100%;
}

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

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

.historic-menu-modal li .historic-menu-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
}

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

/** MAINTENANCE */

.base-maintenance{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: row;
    background: white;
}

.maintenance-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    background: white;
    position: relative;
    flex-direction: column;
}

.maintenance-left figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100% - 48px);
    position: relative;
}

.maintenance-left figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.maintenance-left figure ul{
    display: flex;
    justify-content: center;
    align-items: center;
}

.maintenance-left figure ul li{
    outline: 0;
}

.maintenance-left figure li{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.maintenance-left figure li span{
    color: white;
}

.maintenance-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    background: #f6f6f6;
}

.maintenance-right .zones{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.maintenance-right .zones-header{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #dadada;
    height: 10%;
    width: 100%;
}

.maintenance-right .zones-header span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 3vw;
    width: 100%;
    height: 100%;
    padding-left: 7%;
}

.maintenance-right .zones-list{
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 100%;
    flex-direction: column;
    overflow: auto;
}

.maintenance-right .zones-list ul{
    justify-content: center;
    align-items: center;
    /*height: 100%;*/
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 7%;
}

.maintenance-right .zones-list ul li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*height: 16.66%;*/
    width: 100%;
    outline: 0;
    margin: 12px 0;
}

.maintenance-right .zones-list ul li figure{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: row;
}

.maintenance-right .zones-list ul li figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5%;
    height: 50%;
    object-fit: scale-down;
}

.maintenance-right .zones-list ul li figure figcaption{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 95%;
    height: 100%;
    padding-left: 3%;
}

.maintenance-right .zones-list ul li figure figcaption span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}

.maintenance-right .zones-comments{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35%;
    width: 100%;
    flex-direction: column;
}

.maintenance-right .zones-comments div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 20%;
}

.maintenance-right .zones-comments div span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 7%;
}

.maintenance-right .zones-comments textarea{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 70%;
    border: 2px solid #cbcbcb;
    border-radius: .2em;
    background: #ebebeb;
    resize: none;
    outline: 0;
}

.maintenance-right .zones-button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 15%;
    width: 91%;
}

.maintenance-right .zones-button .zones-button-response{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 60%;
    outline: 0;
}

.maintenance-right .zones-button .zones-button-response span{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 80%;
    outline: 0;
    text-align: center;
    font-size: 1.3vw;
}

.maintenance-right .zones-button .zones-button-send{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 30%;
    background: #dfd9c7;
    border: 1px solid #bfb28f;
    border-radius: .2em;
    outline: 0;
}

.maintenance-right .zones-select span{
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    text-align: center;
    height: 100%;
}

/** ROOMSERVICE **/

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

.roomservice-title span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    text-transform: uppercase;
    font-size: 2.5vw;
    font-weight: bold;
}

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

.back .back-button{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    width: 65%;
}

.back img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 80%;
    object-fit: scale-down;
    outline: 0;
}

.move-header:focus{
    border: 2px solid #af9f73;
}

.move-back:focus{
    background:  #af9f73;
    color: white !important;
    outline: 0;
}

.move-header-back:focus{
    border: 2px solid #af9f73;
    outline: 0;
}

/** CESTA */

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

.shopping-cart .orders{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 70%;
    outline: 0;
}

.shopping-cart .orders figcaption{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 50%;
    top: 0;
    right: 0;
}

.orderCircle {
    display: inline-block;
    line-height: 0px;
    border-radius: 50%;
    font-size: 2vw;
    background: lightblue;
}

.responsive .orderCircle{
    font-size: 2vh;
}

.orderCircle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 8px;
    margin-right: 8px;
    color: white;
}

.shopping-cart .cart{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 70%;
    outline: 0;
}

.shopping-cart img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 80%;
    object-fit: scale-down;
}

.shopping-cart .cart figcaption{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 50%;
    top: 0;
    right: 0;
}

.cartCircle {
    display: inline-block;
    line-height: 0px;
    border-radius: 50%;
    font-size: 2vw;
    background: orange;
}

.responsive .cartCircle{
    font-size: 2vh;
}

.cartCircle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 8px;
    margin-right: 8px;
    color: white;
}

.products{
    height: 100%;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    overflow: auto;
    justify-content: space-around;
    align-items: flex-start;
}

.cart-products::-webkit-scrollbar {
    height: 15px;
    width: 11px;
    background: #ACACAC; 
}

.products::-webkit-scrollbar {
    height: 15px;
    width: 11px;
    background: #ACACAC; 
}

.products li{
    overflow: hidden;
    position: relative;
    text-align: left;
    vertical-align: bottom;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 50%;
    z-index: 0;
}

.products li figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 95%;
    flex-direction: column;
}

.products li:focus{
    outline: 0;

}

.products li:focus figure{

}

.products li:focus figure img{
    border-top: 2px solid #af9f73;
    border-left: 2px solid #af9f73;
    border-right: 2px solid #af9f73;
}

.products li:focus figure figcaption{
    border-bottom: 2px solid #af9f73;
    border-left: 2px solid #af9f73;
    border-right: 2px solid #af9f73;
    background:#af9f73;
    color: white;
}

.products li figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
    box-shadow: 1px 1px 5px 0px #666666bf;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

.products li figure figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
    background: white;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    box-shadow: 1px 1px 5px 0px #666666bf;
}

.products li figure figcaption span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.8vw;
    text-transform: uppercase;
}

/** FIN ROOMSERVICE **/

/** CESTA DE LA COMPRA */

.body-cart{
    flex-direction: column !important;
}

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

.cart-adquire span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 80%;
    background: rgb(249, 249, 249);
    border-radius: .8em;
    box-shadow: 1px 1px 5px 0px #666666bf;
    text-transform: uppercase;
    font-size: 2vw;
}

.responsive .cart-adquire span{
    font-size: 2vh;
}

.responsive .cart-adquire span{
    width: 95%;
}

.cart-total{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 10%;
    border-top: 1px solid gray;
}

.cart-total span{
    text-transform: uppercase;
    font-size: 2vw;
}

.responsive .cart-total span{
    font-size: 2vh;
}

.cart-price{
    font-size: 3vw !important;
    font-weight: bold;
}

.responsive .cart-price{
    font-size: 3vh !important;
    font-weight: bold;
}

.cart-products{
    height: 75%;
    width: 100%;
    display: block;
    flex-wrap: wrap;
    overflow: auto;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.cart-products li{
    overflow: hidden;
    position: relative;
    text-align: left;
    vertical-align: bottom;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25%;
    z-index: 0;
    background: white;
    border-bottom: 2px solid gray;
}

.cart-products .cart-control{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    flex-direction: row;
}

.cart-operator{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%;
    height: 60%;
    border: 1px solid gray;
    font-size: 2vw;
    background: white;
    cursor: pointer;
    outline: 0;
}

.cart-operator:hover{
    background: lightgray;
}

.operator-minus{
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}

.cart-quantity-red{
    background: #f9b2b2 !important;
}

.operator-plus{
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
}

.responsive .cart-operator{
    font-size: 2vh;
}

.cart-quantity{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 60%;
    border: 1px solid gray;
    font-size: 2vw;
    background: #e8e7e7;
    font-weight: bold;
}

.minusculas{
    text-transform: initial !important;
}

.responsive .cart-quantity{
    font-size: 2vh;
}

.cart-products .cart-description{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 100%;
    flex-direction: row;
    text-transform: uppercase;
}

.cart-products .cart-description span{
    width: 95%;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    font-size: 2vw;
}

.responsive .cart-products .cart-description span{
    font-size: 2vh;
}

.cart-products li figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    flex-direction: column;
}

.cart-products li:focus{
    outline: 0;

}

.cart-products li:focus figure{

}

.cart-products li:focus{
    background:#af9f73;
}

.cart-products li:focus .cart-description span{
    font-weight: bold;
    color: white;
}

.cart-products li figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-products li figure figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
    background: white;
    box-shadow: 1px 1px 5px 0px #666666bf;
}

.cart-products li figure figcaption span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.8vw;
    text-transform: uppercase;
}

.responsive .cart-products li{
    height: 15%;
}

.responsive .cart-products li figure figcaption span{
    font-size: 2.2vh;
}

/** FIN CESTA */

/** PEDIDOS */

.body-order{
    flex-direction: column !important;
}

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

.order-adquire span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 80%;
    background: rgb(249, 249, 249);
    border-radius: .8em;
    box-shadow: 1px 1px 5px 0px #666666bf;
    text-transform: uppercase;
    font-size: 2vw;
}

.responsive .order-adquire span{
    font-size: 2vh;
}

.responsive .order-adquire span{
    width: 95%;
}

.order-total{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 10%;
    border-top: 1px solid gray;
}

.order-total span{
    text-transform: uppercase;
    font-size: 2vw;
}

.responsive .order-total span{
    font-size: 2vh;
}

.order-price{
    font-size: 3vw !important;
    font-weight: bold;
}

.responsive .order-price{
    font-size: 3vh !important;
    font-weight: bold;
}

.order-categories{
    display: flex;
    height: 5%;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: #216b8e;
    color: white;
}

.order-categories span{
    font-size: 2vw;
}

.responsive .order-categories span{
    font-size: 2vh;
}

.order-amount span{
    font-size: 2vw;
    text-align: center;
}

.responsive .order-amount span{
    font-size: 2vh;
}

.order-description span{
    font-size: 1.7vw;
    text-align: center;
}

.responsive .order-description span{
    font-size: 1.7vh;
}

.order-status span{
    font-size: 2vw;
    text-align: center;
}

.responsive .order-status span{
    font-size: 1.6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.order-categories span:nth-child(1){
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 15%;
}

.order-categories span:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 45%;
}

.order-categories span:nth-child(3){
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 20%;
}

.order-categories span:nth-child(4){
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 20%;
}

.order-products{
    height: 95%;
    width: 100%;
    display: block;
    flex-wrap: wrap;
    overflow: auto;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.order-products::-webkit-scrollbar {
    height: 10px;
    width: 1.5vh;
    background: #ACACAC; 
}

.order-products li{
    overflow: hidden;
    position: relative;
    text-align: left;
    vertical-align: bottom;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25%;
    z-index: 0;
    background: white;
    border-bottom: 2px solid gray;
}

.order-products .order-control{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    flex-direction: row;
}

.order-products .order-description{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45%;
    height: 100%;
    flex-direction: column;
}

.order-products .order-status{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    flex-direction: row;
}

.order-products li .order-amount{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    height: 100%;
    flex-direction: column;
}

.order-products li .order-invoice{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    flex-direction: column;
}

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

.order-invoice figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50% !important;
    height: 60% !important;
    object-fit: scale-down !important;
}

.invoice {
    margin-bottom: 15px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    background: lightblue;
    padding: 0 17px;
}
.border {
    border: 1px solid #e5e5e5;
}

.order-products li:focus{
    outline: 0;

}

.order-products li:focus figure{

}

.order-products li:focus{
    background:#af9f73;
}

.order-products li:focus .order-amount span{
    font-weight: bold;
    color: white;
}

.order-products li:focus .order-description span{
    font-weight: bold;
    color: white;
}

.order-products li:focus .order-status span{
    font-weight: bold;
    color: white;
}

.order-products li figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-products li figure figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20%;
    background: white;
    box-shadow: 1px 1px 5px 0px #666666bf;
}

.order-products li figure figcaption span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.8vw;
    text-transform: uppercase;
}

.responsive .order-products li{
    height: 15%;
}

.responsive .order-products li figure figcaption span{
    font-size: 2.2vh;
}

/** FIN CESTA */

/** KITCHEN */

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

.responsive .body-kitchen{
    height: 100% !important;
}

.waiting{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 3vw;
    text-transform: uppercase;
}

.commands{
    height: 100%;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    overflow: auto;
    justify-content: flex-start;
    align-items: flex-start;
}

.commands::-webkit-scrollbar {
    height: 15px;
    width: 11px;
    background: #ACACAC; 
}

.commands li{
    overflow: hidden;
    position: relative;
    text-align: left;
    vertical-align: bottom;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    height: 50%;
    z-index: 0;
    outline: 0;
}

.responsive .commands li{
    width: 50%;
}

.commands li .pedido{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 95%;
    border: 1px solid black;
    background: white;
    flex-direction: column;
}

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

.responsive .header-pedido{
    flex-direction: column;
}

.header-pedido span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    text-align: center;
    font-size: 1.5vw;
    -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: black;
    font-weight: bold;
}

.responsive .header-pedido span{
    width: 100%;
    height: 50%;
    font-size: 2vh;
}

.botones-header-pedidos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
}

.botones-header-pedidos li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}

.botones-header-pedidos li span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80%;
    background: lightgray;
    border-radius: .5em;
    color: black;
    box-shadow: 2px 2px 5px 0px #80929b;
}

.button-ready{
    background: white !important;
}

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

.body-pedido ul{
    justify-content: flex-start;
    align-items: center;
    width: 95%;
    height: 95%;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.body-pedido ul::-webkit-scrollbar {
    height: 15px;
    width: 11px;
    background: #ACACAC; 
}

.body-pedido ul li{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100% !important;
    height: 16.66%;
    font-size: 1.5vw;
    flex-direction: row;
}

.responsive .body-pedido ul li{
    font-size: 2vh;
}

.body-pedido ul li .descripcion-pedido{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    color: black;
    text-align: center;
}

.pedido-default{
    background: lightgray !important;
}

.pedido-received{
    background: white !important;
}

.pedido-inprogress{
    background: #fdfd8f !important;
}

.pedido-ok{
    background: lightgreen !important;
}

.footer-pedido{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 10%;
    border-top: 1px solid gray;
}

.footer-pedido span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 100%;
    font-size: 1.5vw;
    text-align: center;
}

.responsive .footer-pedido span{
    font-size: 1.8vh;
}

/** FIN KITCHEN */

/** RESPONSIVE */

.responsive .roomservice-title span{
    font-size: 2.5vh !important;
}

.responsive .products{
    display: block;
    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;
}

.responsive .products li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    border: 1px solid white;
    border-left: none;
    border-right: none;
    flex-direction: column;
    border-top: none;
    outline: 0;
    flex-direction: row;
    position: relative;
    border: none;
}

.responsive .products li figure{
    width: 95%;
    height: 95%;
}

.responsive .products li figure figcaption span{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    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;
    font-size: 3.1vh;
    white-space: normal;
}

.responsive .header{
    height: 10%;
}

.responsive .body{
    height: 90%;
}

.responsive .header-title span{
    font-size: 2.5vh;
}

.responsive .header-menu ul li div{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    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;
    font-size: 3vh;
}

.responsive .room-name .room-hab{
    font-size: 3vh;
}

.responsive .room-name figure figcaption{
    width: 60%;
    font-size: 2.5vh;
}

.responsive .room-name figure figcaption div{
    flex-direction: column;
}

.responsive .room-name figure figcaption div .separador{
    display: none;
}

.responsive .room-name figure figcaption p{

}

.responsive .room-name span{
    display: flex;
    justify-content: center;
    align-items: 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;
}

.responsive .room-menu .room-menu-button{
    font-size: 2vh;
}

.responsive .room-menu .room-menu-button span{
    margin-left: 2%;
}

.responsive .room-menu-button div{
    width: 10%;
}

.responsive .room-menu-button img{
    width: 10%;
}

.responsive .leyend{
    width: 19%;
}

.responsive .leyend div{
    width: 15%;
}

.responsive .leyend span{
    font-size: 1.4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 75%;
    height: 100%;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.responsiveModal{
    height: 70vh !important;
    width: 80vw !important;
}

.responsiveModal .my-modal-toolbar span{
    font-size: 2.5vh !important;
}

.responsiveModal .mymodal-automatic-title span{
    font-size: 2.5vh !important;
}

.responsiveModal .mymodal-automatic-down span{
    font-size: 2vh !important;
}

.responsiveModal .mymodal-automatic-down{
    justify-content: space-between !important;
}

.responsiveModal #modalTextInput{
    height: 65% !important;
    font-size: 2vh !important;
}

.responsiveModal .mymodal-body-down .md-button span{
    font-size: 2vh !important;
}

.responsiveModal .mymodal-automatic-down span{
    font-size: 2vh !important;
}

/**
    RESPONSIVE MAINTENANCE
*/

.responsive .base-maintenance{
    display: block;
    overflow: auto;
    height: 100vh;
    width: 100vw;
    justify-content: flex-start;
    flex-direction: column;
}

.responsive .maintenance-right .zones-header span{
    font-size: 4vh;
}

.responsive .maintenance-right .zones-list ul li figure figcaption span{
    font-size: 3vh;
}

.responsive .maintenance-right .zones-comments div span {
    font-size: 2.5vh;
}

.responsive .maintenance-right .zones-comments textarea{
    font-size: 2.5vh;
}

.responsive .maintenance-right .zones-button .zones-button-send{
    height: 60%;
    width: 35%;
    font-size: 3vh;
}

.responsive .maintenance-right .zones-select span{
    font-size: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    height: 100%;
}

.maintenance-right .zones-button .zones-button-response span{
    font-size: 2.3vh;
}

.response-ok{
    color: green;
    font-weight: bold;
}

.response-bad{
    color: darkred;
    font-weight: bold;
}

.response-select{
    color: purple;
    font-weight: bold;
}

.responsive .maintenance-left{
    display: inline-block;
    width: 100%;
    height: 100%;
}

.responsive .maintenance-right{
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* MODAL RESPONSIVE */

.responsiveModal{
    width: 80vw;
    height: 60vh;
}

.responsiveModal .my-modal-toolbar span{
    font-size: 2.4vh !important;
}

.responsiveModal .modalroomservice-body-up-title p{
    font-size: 6vh !important;
}

.responsiveModal .modalroomservice-body-up-description span{
    font-size: 2.5vh !important;
}

.responsiveModal .modalinvoice-body-down{
    justify-content: space-evenly;
    flex-direction: column;
}

.responsiveModal .modalroomservice-body-down{
    justify-content: space-evenly;
    flex-direction: column;
}

.responsiveModal .modalinvoice-body-down .md-button{
    width: 90%;
    height: 35%;
}

.responsiveModal .modalinvoice-body-down .md-button span{
    font-size: 3vh !important;
}

.responsiveModal .modalroomservice-body-down .md-button{
    width: 90%;
    height: 25%;
}

.responsiveModal .modalroomservice-body-down .md-button span{
    font-size: 3vh !important;
}


/**************** Reposición de productos ********************/

.reposition md-tabs {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.reposition md-tabs ul {
    width: 100%;
}

.reposition md-tabs li {
    margin: 12px 0;
    background: whitesmoke;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.reposition md-tabs md-tabs-content-wrapper {
    width: 100%;
    flex: 1;
}

.reposition md-tabs md-tab-content {
    width: 100%;
    margin: auto;
    height: 100%;
    overflow: auto;
    padding: 0 2.5%;
}

.reposition md-tabs md-ink-bar {
    color: white;
    background: white;
}

.reposition .reposition-description {
    /*width: 80%;*/
}

.reposition .reposition-control .md-button {
    width: 36px;
    min-width: 0;
    border: 1px solid #808080;
    color: #808080;
    font-size: 18px;
    border-radius: 8px;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
    margin: 2px;
}

.reposition .reposition-control .md-button[disabled] {
    border-color: #80808080;
    color: #80808080;
    box-shadow: none;
}

.reposition .reposition-control span {
    margin: 0 4px;
    min-width: 26px;
    text-align: center;
    font-weight: bold;
}

.reposition .reposition-control span.zero {
    color: #a5a5a5;
}

.reposition md-tab-item {
    background: #38393f;
    padding: 6px 24px;
}

.reposition md-tabs md-tabs-wrapper {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}

.reposition md-tab-item img {
    max-height: 36px;
    max-width: 36px;
}

.reposition .category-name {
    text-transform: uppercase;
    font-weight: bold;
}

.reposition .save-button {
    width: 95%;
    padding: 6px 12px;
    font-size: 16px;
}

.reposition .save-button:not([disabled]) {
    background: #38393f !important;
    color: white;    
}

md-toast.md-success-toast-theme .md-toast-content {
    background-color: green;
}

md-toast.md-error-toast-theme .md-toast-content {
    background-color: darkred;
}

@media (max-width: 450px) {
    .responsive .room-name figure figcaption{
        font-size: .8em;
    }

    .responsive .room-name .room-hab{
        font-size: .9em;
    }

    .responsive .header-menu ul li div{
        font-size: 1em;
    }

    /* Mantenimiento */

    .responsive .maintenance-right .zones-button .zones-button-send{
        font-size: 1.2em;
    }

    .responsive .maintenance-right .zones-select span{
        font-size: 1.3em;
    }

    .maintenance-right .zones-button .zones-button-response span{
        font-size: .8em;
    }

    /* Modal */
    .my-modal-toolbar span{
        font-size: .9em !important;
    }

    .modalroomservice-body-up-title p{
        font-size: 1em !important;
    }

    .modalroomservice-body-down .md-button span{
        font-size: .8em !important;
    }
}

@media (max-height: 450px) {
    .responsive .room-name figure figcaption{
        font-size: .8em;
    }

    .responsive .room-name .room-hab{
        font-size: .9em;
    }

    .responsive .header-menu ul li div{
        font-size: .8em;
    }

    .cleanance-rooms li{
        height: 25%;
    }

    /* Mantenimiento */

    .maintenance-right .zones-list ul li{
        height: 20%;
    }

    .maintenance-right .zones-list ul li figure figcaption span{
        font-size: .9em;
    }

    .maintenance-right .zones-header span{
        font-size: 1em;
    }

    .maintenance-right .zones-comments div span{
        font-size: .9em;
    }

    .maintenance-right .zones-comments textarea{
        font-size: .9em;
    }

    .maintenance-right .zones-comments{
        width: 95%;
    }

    .maintenance-right .zones-button .zones-button-send{
        height: 65%;
        width: 40%;
        font-size: .8em;
    }

    .maintenance-right .zones-button .zones-button-response span{
        font-size: .7em;
    }

    /** Modal **/
    .responsiveModal{
        height: 70vh;
    }

    .responsiveModal .my-modal-toolbar span{
        font-size: 1em !important;
    }

    .responsiveModal .modalroomservice-body-down .md-button span{
        font-size: 1em;
    }

    .responsiveModal .modalroomservice-body-down .md-button{
        padding: 0;
        margin: 0;
        width: 80%;
        height: 35%;
    }
}

@media (max-height: 250px) {
    .cleanance-rooms li{
        height: 33.33%;
    }

    .maintenance-right .zones-list ul li{
        height: 33.33%;
    }

    .maintenance-right .zones-list ul li figure figcaption span{
        font-size: .9em;
    }

    .maintenance-right .zones-header span{
        font-size: .8em;
    }

    .maintenance-right .zones-comments div span{
        font-size: .9em;
    }

    .maintenance-right .zones-comments textarea{
        font-size: .9em;
    }
    .maintenance-right .zones-button .zones-button-response span{
        font-size: .5em;
    }

    /** Modal **/
    .modalroomservice-mini{
        height: 70vh;
        width: 70vw;
    }

    .my-modal-toolbar span{
        font-size: 1.2em !important;
    }

    .modalroomservice-body-up-title p{
        font-size: 1.3em !important;
    }

    .modalroomservice-body-down .md-button span{
        font-size: 1.1em;
    }
}

@media (max-width: 250px) {
    .responsive .header-menu ul li div{
        font-size: .8em;
    }

    .responsive .room-name figure figcaption{
        font-size: .8em;
    }

    .responsive .room-name .room-hab{
        font-size: .9em;
    }

    .responsive .header-menu ul li div{
        font-size: .8em;
    }

    /** Modal **/

    .modalroomservice-mini{
        width: 40vw !important;
        height: 60vh !important;
    }
}

/** FIN RESPONSIVE */