@font-face { font-family: 'Titillium Web', sans-serif; src: url('TitilliumWeb-Light.ttf') format('truetype'); }

body { font-family: 'Titillium Web'; FONT-SIZE: 5vw; color: #000000;}        
table { font-family: 'Titillium Web'; FONT-SIZE: 5vw; color: #000000;}

.BTLogin {BACKGROUND-COLOR: #02d0fa; text-align:center; height:9vw; width:40vw; FONT-SIZE: 5vw; font-weight: bold; COLOR: #ffffff; BORDER: #ffffff 0px solid; cursor: pointer; -webkit-border-radius: 5px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.BTPort {BACKGROUND-COLOR: #02d0fa; text-align:center; FONT-SIZE: 5vw; font-weight: bold; COLOR: #ffffff; height:50px; width:400px; BORDER: #ffffff 0px solid; padding:5px 20px 5px 20px; cursor: pointer; -webkit-border-radius: 5px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.BTVoltar {text-align:center; FONT-SIZE: 5vw; font-weight: bold; COLOR: #0099cc; height:50px; BORDER: #0099cc 0px solid; padding:5px 20px 5px 20px; cursor: pointer; -webkit-border-radius: 5px;}
.BTChamar {BACKGROUND-COLOR: #0099cc; text-align:center; height:10vw; width:40vw; FONT-SIZE: 7vw; font-weight: bold; COLOR: #ffffff; BORDER: #ffffff 0px solid; cursor: pointer; -webkit-border-radius: 5px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.BTTurmaRedir {BACKGROUND-COLOR: #dbe6f5; COLOR: #000000; padding:0px 5px 0px 5px; -webkit-border-radius: 5px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.BTFecharTurma {BACKGROUND-COLOR: #b3b3f8; text-align:center; COLOR: #ffffff; height:35px; width:150px; FONT-SIZE: 3vw; font-weight: bold; BORDER: #ffffff 2px solid; padding:0px 5px 0px 5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.BTFecharTurma2 {BACKGROUND-COLOR: #b3b3f8; text-align:center; COLOR: #000000; height:7vw; width:50vw; FONT-SIZE: 3vw; font-weight: bold; BORDER: #dbe6f5 2px solid; padding:0px 5px 0px 5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.BTFecharTurma3 {BACKGROUND-COLOR: #dbe6f5; text-align:center; COLOR: #673e3e; height:4vw; width:40vw; FONT-SIZE: 2vw; font-weight: bold; BORDER: #673e3e 1px solid; padding:0px 5px 0px 5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.BTAbrirTurma {BACKGROUND-COLOR: #5353eb; text-align:center; COLOR: #ffffff; height:35px; width:150px; FONT-SIZE: 3vw; font-weight: bold; BORDER: #ffffff 2px solid; padding:0px 5px 0px 5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

.BTFT1 {BACKGROUND-COLOR: #ffffff; FONT-SIZE: 4vw; COLOR: #666666; BORDER:#d8cfcf 2px solid; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.BTFT2 {BACKGROUND-COLOR: #daeaff; FONT-SIZE: 4vw; COLOR: #000000; BORDER:#5353eb 2px solid; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

.BTative {BACKGROUND-COLOR: #0058a0; FONT-SIZE: 6vw; COLOR: #fff; BORDER:#0071f3 2px solid; padding:10px; border-radius: 15px; user-select:none;}
.BTinative {BACKGROUND-COLOR: #d3d3d3; FONT-SIZE: 6vw; COLOR: #fff; BORDER:#c9c9c9 2px solid; padding:10px; border-radius: 15px; user-select:none; pointer-events: none;}




.Alu                    {BACKGROUND-COLOR: #402a71; text-align:center; COLOR: #ffffff; box-shadow: 4px 4px 4px -1px #676767;  -webkit-border-radius: 7px; }
.Alu_Neutro             {BACKGROUND-COLOR: #402a71; text-align:center; COLOR: #ffffff; box-shadow: 4px 4px 4px -1px #676767;  -webkit-border-radius: 7px;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events: none;}
.Alu_Chamado            {BACKGROUND-COLOR: #c75000; text-align:center; COLOR: #ffffff; box-shadow: 4px 4px 4px -1px #676767;  -webkit-border-radius: 7px;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events: none;}
.Alu_Recebido           {BACKGROUND-COLOR: #077c1b; text-align:center; COLOR: #ffffff; box-shadow: 4px 4px 4px -1px #676767;  -webkit-border-radius: 7px;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events: none;}
.Alu_ChamadoSaida       {BACKGROUND-COLOR: #c75000; text-align:center; COLOR: #ffffff; box-shadow: 4px 4px 4px -1px #676767;  -webkit-border-radius: 7px;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events: none;}
.Alu_ChamadoSaidaResp   {BACKGROUND-COLOR: #5353eb; text-align:center; COLOR: #ffffff; box-shadow: 4px 4px 4px -1px #676767;  -webkit-border-radius: 7px;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events: none;}

.AlunoCelula         { width: 25vw; height: 35vw; float: left; COLOR: #ffffff; text-align: center; padding:7px; -webkit-border-radius: 10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.AlunoCelula[data-editing="true"] { animation: shake 0.5s infinite; border: 1px solid #5706b3; box-shadow: 0 0 5px rgba(159, 109, 238, 0.85); }

.AlunoCelulaSaida    { width: 14vw; float: left; COLOR: #ffffff; text-align: center; padding:7px; -webkit-border-radius: 7px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.TurmaCelula         { FONT-SIZE: 5vw; float: left; COLOR: #ffffff; BACKGROUND-COLOR: #0099cc; text-align: center; padding:10px; margin:10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border-radius: 15px;}
.TurmaCelula2         { FONT-SIZE: 5vw; float: left; COLOR: #ffffff; BACKGROUND-COLOR: #00cc8f; text-align: center; padding:10px; margin:10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border-radius: 15px;}
.TurmaCelula3         { FONT-SIZE: 5vw; float: left; COLOR: #ffffff; BACKGROUND-COLOR: #c75000; text-align: center; padding:10px; margin:10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border-radius: 15px;}
.AlunoCelulaResp     { width: 83vw; COLOR: #ffffff; text-align: center; padding:7px; -webkit-border-radius: 10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.AlunoCelulaRespExt  { background-image: linear-gradient(to right bottom, rgba(243, 242, 255, 0.3) -50%, rgba(215, 200, 255, 0.5) 50%); width: 87vw; COLOR: #000000; text-align: center; padding:7px; -webkit-border-radius: 10px;  }
.AlunoCelulaRespExtKey  { background-image: linear-gradient(to right bottom, rgba(243, 242, 255, 0.3) -50%, rgba(215, 200, 255, 0.5) 50%); text-align: center; padding:7px; -webkit-border-radius: 10px;  }

.AutCall {
    BACKGROUND-COLOR: #402a71;
    width: 83vw;
    height: 50vh; 
    display: flex;
    position: absolute;
    align-items: center;
    margin: 0 auto;
  }

.CelulaCarona  { background-image: linear-gradient( to right bottom, #eeeef7, #d9d9eb );COLOR: #000000; text-align:center; margin:2px; -webkit-border-radius: 15px;  }
.CelulaDetCarona1  { BACKGROUND-COLOR: #ffceb1; text-align:center; margin:2px; -webkit-border-radius: 15px; }
.CelulaDetCarona2  { BACKGROUND-COLOR: #b9dfd9; text-align:center; margin:2px; -webkit-border-radius: 15px; }

.CelAut1  { background-image: linear-gradient(to bottom right, rgb(159, 202, 189), rgb(141, 177, 165)); text-align:center; margin:2px; -webkit-border-radius: 10px; box-shadow: 4px 4px 4px -1px #9e9e9e; }
.CelAut2  { background-image: linear-gradient(to bottom right, rgb(219, 196, 176), rgb(221, 171, 130)); text-align:center; margin:2px; -webkit-border-radius: 10px; box-shadow: 4px 4px 4px -1px #9e9e9e; }
.DelFotoAut  { FONT-SIZE: 5vw; background-image: linear-gradient(to bottom right, rgb(219, 196, 176), rgb(221, 171, 130)); text-align:center; margin:2px; border-radius: 10px; box-shadow: 4px 4px 4px -1px #9e9e9e; }

.campocombo {font-family: 'Titillium Web'; BACKGROUND-COLOR: #5353eb; BORDER: #000000 1px solid; padding:0px; margin:0px; height:13vw; width:25vw; FONT-SIZE: 6vw; COLOR: #ffffff; cursor: block; -webkit-border-radius: 5px;}
.campoform {font-family: 'Titillium Web'; BACKGROUND-COLOR: #dbe6f5; BORDER: #000000 1px solid; padding:0px; margin:0px; height:9vw; width:50vw; FONT-SIZE: 5vw; COLOR: #000000;cursor: block; -webkit-border-radius: 5px;}
.CampoForm2 {font-family: 'Titillium Web'; BACKGROUND-COLOR: #dbe6f5; BORDER: #000000 1px solid; padding:0px; margin:5px; height:9vw; width:50vw; FONT-SIZE: 5vw; COLOR: #000000;cursor: block; -webkit-border-radius: 5px;}
.CampoForm3 {font-family: 'Titillium Web'; BACKGROUND-COLOR: #dbe6f5; BORDER: #000000 1px solid; padding:0px; margin:5px; height:9vw; width:80vw; FONT-SIZE: 5vw; COLOR: #000000;cursor: block; -webkit-border-radius: 5px;}

.campokey {font-family: 'Titillium Web'; COLOR: #ffffff; text-align:center; background-image: linear-gradient( to right bottom, #7f7fef, #3838ba ); box-shadow: 3px 3px 3px -1px #626262; padding:0px; margin:0px; height:15vw; width:25vw; FONT-SIZE: 8vw; -webkit-border-radius: 7px; text-transform:uppercase; }
.BTkey {font-family: 'Titillium Web'; COLOR: #ffffff; text-align:center;  background-image: linear-gradient( to right bottom, #7f7fef, #3838ba ); box-shadow: 3px 3px 3px -1px #626262; padding:0px; margin:0px; height:15vw; FONT-SIZE: 8vw; -webkit-border-radius: 7px; text-transform:uppercase; }
.BTkey:hover {  background-image: linear-gradient( to right bottom, #5353c4, #04049c ); box-shadow: 3px 3px 3px -1px #333333; }

.RetChave { width: 83vw; height: 12vw; FONT-SIZE: 6vw; text-align: center; margin-top:10px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.TableStep1  {  COLOR: #000000; FONT-SIZE: 10vw; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;  }
.TableStep2  {  COLOR: #000000; FONT-SIZE: 4vw; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }


.BTForm2 {BACKGROUND-COLOR: #02d0fa; text-align:center; height:9vw; padding:8px 8px 8px 8px; margin:10px; width:40vw; FONT-SIZE: 5vw; font-weight: bold; COLOR: #ffffff; BORDER: #ffffff 0px solid; cursor: pointer; -webkit-border-radius: 5px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.BTForm3 {BACKGROUND-COLOR: #402a71; text-align:center; height:9vw; padding:3px 8px 8px 8px; margin:10px; COLOR: #ffffff; box-shadow: 4px 4px 4px -1px #676767;  -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.Cellixo {float: right; text-align:center; padding: 5px; FONT-SIZE: 6vw; background-image: linear-gradient( to right bottom, #c898db, #96267a ); COLOR: #ffffff;  -webkit-border-radius: 7px;}
.CelPass1 {float: left; background-image: linear-gradient( to right bottom, rgb(248, 255, 253), rgb(211, 254, 250) );  FONT-SIZE: 4vw; COLOR: #4e4e4e; box-shadow: 3px 3px 3px -1px #718480; margin: 5px; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CelPass2 {FONT-SIZE: 4vw; COLOR: #000000;  -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CelCarona1 {float: left; background-image: linear-gradient( to right bottom, #f8fcff, rgb(248, 232, 208) );  FONT-SIZE: 4vw; COLOR: #4e4e4e; box-shadow: 3px 3px 3px -1px #7f7e6c; margin: 5px; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CelCarona2 {FONT-SIZE: 4vw; COLOR: #000000;  -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CelAlunoAut {FONT-SIZE: 6vw; text-align:center; padding: 10px; margin: 10px; COLOR: #000000; background-image:  linear-gradient( to right bottom, #e7fffb, #d1ece8 );   -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

.titcarona {text-align:center; FONT-SIZE: 5vw; COLOR: #000000;}
.CallCarona1 {width: 94%;  text-align:left;  background-image: linear-gradient( to right bottom, #ffffff, rgb(212, 224, 231) );  FONT-SIZE: 5vw; COLOR: #545454; box-shadow: 3px 3px 3px -1px #626262; margin: 10px; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CallCarona2 {width: 94%;  text-align:left;  font-weight: bold; background-image: linear-gradient( to right bottom, #8b5ed3, #7143bc );  FONT-SIZE: 5vw; COLOR: #ffffff; box-shadow: 3px 3px 3px -1px #2f0651; margin: 10px; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CallCarona3 {width: 94%;  text-align:left;  font-weight: bold; background-image: linear-gradient( to right bottom, #eaeafc, #b7b7e5 );  FONT-SIZE: 3vw; COLOR: #545454; box-shadow: 2px 2px 2px -1px #b1b1b1; margin: 10px; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CallCarona4 {text-align:center;  font-weight: bold; background-image: linear-gradient( to right bottom, #eaeafc, #b7b7e5 );  FONT-SIZE: 3vw; COLOR: #000000; box-shadow: 2px 2px 2px -1px #b1b1b1; margin: 10px; padding:5px; -webkit-border-radius: 7px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}


.btn-color-mode-switch{
    display: inline-block;
    margin: 0px;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align:baseline;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner{
    margin: 0px;
    width: 100%;
    height: 42px;
    font-size: 18px;
    background-image: linear-gradient(to top left, rgb(218, 218, 218), rgb(241, 241, 241));
    color: #999999;
    font-weight: 600;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
    border: 2px solid #ffffff;
    display: block;
    text-align: center;
    font-family: calibri;

}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:before{
    content: attr(data-on);
    position: absolute;
    font-size: 20px;
    font-weight: 600;
    top: 6px;
    right: 20px;

}
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{
    content: attr(data-on);
    left: 50%;
    background-image: linear-gradient(to top left, rgb(4, 122, 34), rgb(19, 241, 56));
    color: #fff;
    font-weight: 600;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:after{
    content: attr(data-off);
    width: 50%;
    height: 98%;
    background-image: linear-gradient(to top left, rgb(121, 3, 3), rgb(226, 0, 0));
    border-radius: 8px;
    position: absolute;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    left: 0px;
    margin: 0px;

    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0px 0px 6px -3px #111;
    padding: 5px 0px;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{
    content: attr(data-off);
    right: auto;
    left: 5%;
}


.btn-color-mode-switch input[type="checkbox"]{
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 1;
    margin: 0px;
    display: block;

}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    background-image: linear-gradient(to top left, rgb(218, 218, 218), rgb(241, 241, 241));
    color: #999999;
    text-align: center;
}

  @keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(0.5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
  }



/* INICIO BOTAO CONFIRMAR */
    *, *:after, *:before { box-sizing: border-box; margin: 0; padding: 0; }
    
    @keyframes fade {
        from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        }
        to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        }
    }

    .escurecerfundo {	
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 
        background-color:#000000; 
        opacity: .65; 
        filter: alpha(opacity=65); 
        z-index:1; 
    }

.confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80%;          /* margem lateral aproximada de 10% */
    max-width: 600px;    /* impede de ficar gigante em desktop */
    height: auto;

    background-image: linear-gradient(to right bottom, #ececec, #cfcfcf);
    border-radius: 20px;

    padding: 1rem 1rem 2rem 1rem;

    box-shadow: 4px 4px 4px -1px #ffffff;
    z-index: 10;
}
    
    .confirm h1 { font-weight: bold; text-align: center; FONT-SIZE:1.5rem; margin: 1.5rem 1rem 0.5rem; }
    .confirm p { text-align: center; FONT-SIZE: 1.5rem; margin: 0 2rem 4.5rem; }
    .confirm button { background: transparent; border: none; color: #1678E5; height: 3rem; FONT-SIZE: 1.5rem; width: 35%; position: absolute; bottom: 0; cursor: pointer;}
    .confirm button:nth-of-type(1) { background:#e9e9e9; box-shadow: 4px 4px 4px -1px #9e9e9e; left: 0; border-radius: 10px; color:#8a0000; margin: 0 0 2rem 2rem;}
    .confirm button:nth-of-type(2) { background:#e9e9e9; box-shadow: 4px 4px 4px -1px #9e9e9e; right: 0; border-radius: 10px; margin: 0 2rem 2rem 0;}
    .confirm button:nth-of-type(3) { background:#e9e9e9; box-shadow: 4px 4px 4px -1px #9e9e9e; left: 33%; border-radius: 10px; margin: 0 2rem 2rem 0;}
    .confirm button:focus,
    .confirm button:hover { font-weight: bold; background: #EFEFEF;}
    .confirm button:active { background: #D6D6D6;}

/* FIM BOTAO CONFIRMAR */