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

::-webkit-scrollbar {
    height: 15px;
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: #94bbd8;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

figure{
    margin: 0;
}

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

.notice{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: #e1e1e1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.home-base{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96%;
    height: 95%;
    flex-direction: column;
    position: relative;
}

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

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

.header-up span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.4vw;
    font-weight: bold;
    text-transform: uppercase;
}

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

.header-down span{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    font-size: 1.9vw;
    color: #565050;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
}

.header .header-timeout {
    position: absolute;
    right: 0;
    top: 0;
    width: 28.5%;
    background: white;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 4px solid #bd2121;
    color: #215d7f;
    font-size: 1.6vw;
    font-weight: bold;
}

.header .header-timeout span {
    color: #bd2121;
}

.body{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 84%;
    margin-top: 1%;
    flex-direction: row;
}

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

.body-left ul {
    height: 100%;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    overflow: auto;
}

.body-left ul li:focus div figure{
    border-top: 5px solid #313d4e;
    border-right: 5px solid #313d4e;
    border-left: 5px solid #313d4e;
}

.body-left ul li:focus div .body-left-description{
    border-right: 5px solid #313d4e;
    border-left: 5px solid #313d4e;
    background: #313d4e;
    color: white;
}

.body-left ul li{
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 33.33%;
    width: 50%;
    background: none !important;
    outline: 0;
    cursor: pointer;
}

.body-left ul li div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90%;
    flex-direction: column;
}

.body-left ul li div figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
    flex-direction: row;
    border-top: 5px solid white;
    border-right: 5px solid white;
    border-left: 5px solid white;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    background: #c5d3de;
    box-shadow: 1px 1px 5px 0px #666666bf;
}

.body-left ul li div figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 50%;
    object-fit: scale-down;
}

.body-left ul li div figure figcaption{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 70%;
    height: 100%;
    padding-left: 3%;
}

.body-left ul li div figure figcaption span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 85%;
    height: 100%;
    font-size: 1.9vw;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-transform: uppercase;
}

.body-left ul li div .body-left-description{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
    background: white;
    border-bottom-left-radius: .3em;
    border-bottom-right-radius: .3em;
    border-right: 5px solid white;
    border-left: 5px solid white;
    font-size: 1.6vw;
    text-transform: uppercase;
    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;
    text-align: center;
    box-shadow: 1px 1px 5px 0px #666666bf;
}

.body-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28.5%;
    height: 100%;
    background: gray;
    flex-direction: column;
}

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

.body-right-up span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 100%;
    text-transform: uppercase;
    font-size: 1.5vw;
    text-align: center;
    color: white;
    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;
}

.body-right-down{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 90%;
}

.body-right-down ul{
    width: 97%;
    height: 99%; 
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex-wrap: wrap;
    white-space: nowrap;
    background: white;
}

.body-right-down ul li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 12.5%;
    font-size: 1.3vw;
    flex-direction: row;
    border-bottom: 2px solid #44546a;
}

.body-right-down ul li:focus{
    outline: 0;
}

.body-right-down-left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
}

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

.body-right-down-right{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 80%;
    height: 100%;
    flex-direction: column;
}

.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;
    height: 55%;
    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;
}

/** MODAL 
*/

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

.mymodal-automatic{
    height: auto;
}

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

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

.mymodal-automatic-hour{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
    flex-direction: row;
    margin: 12px 0;
}

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

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

.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;
    margin-right: 8px;
}

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

.mymodal-automatic-down span{
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    width: 85%;
    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: 24px 0;
}

.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: 15vh;
}

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

/* TRAZABILIDAD */

.traceability{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: #e1e1e1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.central{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96%;
    height: 95%;
    flex-direction: column;
    position: relative;
}

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

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

.theader-up span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.4vw;
    font-weight: bold;
    text-transform: uppercase;
}

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

.theader-down span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.9vw;
    color: #565050;
    -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;
}

.tbody{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85%;
    flex-direction: row;
}

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

.tbody-left ul {
    height: 100%;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    overflow: auto;
}

.tbody-left ul li:focus div figure{
    border-top: 5px solid #313d4e;
    border-right: 5px solid #313d4e;
    border-left: 5px solid #313d4e;
}

.tbody-left ul li:focus div .tbody-left-description{
    border-right: 5px solid #313d4e;
    border-left: 5px solid #313d4e;
    background: #313d4e;
    color: white;
}

.tbody-left ul li{
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 33.33%;
    width: 50%;
    background: none !important;
    outline: 0;
    cursor: pointer;
}

.tbody-left ul li div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90%;
    flex-direction: column;
}

.tbody-left ul li div figure{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
    flex-direction: row;
    border-top: 5px solid white;
    border-right: 5px solid white;
    border-left: 5px solid white;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    background: #c5d3de;
    box-shadow: 1px 1px 5px 0px #666666bf;
}

.tbody-left ul li div figure img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 50%;
    object-fit: scale-down;
}

.tbody-left ul li div figure figcaption{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 70%;
    height: 100%;
    padding-left: 3%;
}

.tbody-left ul li div figure figcaption span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 85%;
    height: 100%;
    font-size: 1.9vw;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    -webkit-box-pack: center;
    text-transform: uppercase;
}

.tbody-left ul li div .tbody-left-description{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
    background: white;
    border-bottom-left-radius: .3em;
    border-bottom-right-radius: .3em;
    border-right: 5px solid white;
    border-left: 5px solid white;
    font-size: 1.6vw;
    text-transform: uppercase;
    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;
    text-align: center;
    box-shadow: 1px 1px 5px 0px #666666bf;
}

.input-password{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.input-password input{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 20%;
    text-align: center;
    font-size: 2vw;
}

.input-password span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 15%;
    font-size: 1.5vw;
    color: darkred;
    font-weight: bold;
}

.escala-eva {
    width: 90%;
    margin: 8px auto;
}

.escala-eva .face-row {
    display: flex;
    flex-direction: row;
}

.escala-eva .face-row > div {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*padding: 20px;*/
    /*box-sizing: border-box;*/
}

.escala-eva .face-row > div img {
    width: 50%;
    margin-bottom: 8px;
}

.escala-eva .face-row > div span {
    font-size: 1.9vw !important;
    margin-bottom: 8px;
}

.escala-eva .face-row > div div.lines {
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    height: 20px;
    margin-bottom: 8px;
    width: 100%;
}

.escala-eva .face-row > div:last-child div.lines {
    border-right: 1px solid lightgray;
}

.escala-eva .color-line {
    height: 32px;
    width: 100%;
    border-radius: 3em;
    background: linear-gradient(90deg, #4badb6, #a6c81c, #fce50f, #f5a605, #e74b22);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.escala-eva .color-line > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 10%;
}

.escala-eva .color-line > div span {
    line-height: 26px;
    font-size: 22px;
    font-weight: bold;
    color: white;
    text-align: center;
    width: 26px;
    cursor: pointer;
}

.escala-eva .color-line > div span.selected {
    padding: 3px;
    border: 6px solid white;
    border-radius: 3em;
    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);
}