html {

    font-family: Arial;

    display: inline-block;

    text-align: center;

}



h2 {

    font-size: 3.0rem;

}

h4 {

    font-size: 1.50rem;

    color:#f32144;

    font-weight: bold;

}

body {

    max-width: 450px;

    margin:0px auto;

    padding-bottom: 25px;

}



.titulo-tela {

    height: 1px;

    color:blue;

    text-align:center;

    font-size: 20px;

    font-weight: bold;

}

 

input[type=text],input[type=email]{

    width: 100%;

    padding: 12px 20px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid rgb(17, 17, 17);

    border-radius: 4px;

    box-sizing: border-box;

}



input[type=password]{

    width: 35%;

    background-color: rgb(255, 255, 128);

    padding: 12px 20px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid rgb(10, 10, 10);

    border-radius: 4px;

    box-sizing: border-box;

}



#idnome{

    width: 35%;

    background-color: rgb(255, 255, 128);

    padding: 12px 20px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid rgb(8, 8, 8);

    border-radius: 4px;

    box-sizing: border-box;

}



#idselrele{

    width: 30%;

    padding: 12px 20px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid rgb(8, 8, 8);

    border-radius: 4px;

    box-sizing: border-box;

}



#idselequip{

    width: 40%;

    padding: 12px 20px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid rgb(8, 8, 8);

    border-radius: 4px;

    box-sizing: border-box;

}



#idnrpgr1,#idnrpgr2,#idnrpgr3,#idnrpgr4 {

    width: 15%;

    padding: 5px 10px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid rgb(8, 8, 8);

    border-radius: 4px;

    box-sizing: border-box;

}



#idhini1, #idhfim1,#idhini2,#idhfim2,#idhini3,#idhfim3,#idhini4,#idhfim4{

    width: 25%;

    padding: 8px 10px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid rgb(8, 8, 8);

    border-radius: 4px;

    box-sizing: border-box;

}



input[type=submit] {

    width: 100%;

    background-color: #4707dd;

    color: white;

    padding: 14px 20px;

    margin: 8px 0;

    border: none;

    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;

}



#idvalidar{

    width: 27%;

    background-color: #2a07c4;

    color: white;

    padding: 14px 20px;

    margin: 8px 0;

    border: none;

    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;

    font-size: 15px;

    font-weight: bold;

}



#idagendar{

    width: 27%;

    background-color: #2a07c4;

    color: white;

    padding: 13px 15px;

    margin: 8px 0;

    border: none;

    border-radius: 4px;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer; 

}



#ok1 ,#ok2, #ok3, #ok4{

    width: 25%;

    background-color: #2a07c4;

    color: white;

    padding: 5px 15px;

    margin: 8px 0;

    border: none;

    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;

}



#iddiretor1,#iddiretor2,#iddiretor3,#iddiretor4{

    width: 24%;

    background-color: hsl(129, 74%, 34%);

    color: white;

    padding: 13px 15px;

    margin: 8px 0;

    border: none;

    border-radius: 4px;

    font-size: 13px;

    font-weight: bold;

    cursor: pointer; 

    text-align: center;

}



#labelpgr{

   text-align: center;

}



input[type=submit]:hover {

    background-color: #005a4c;

}



div {

    text-align: left;

    border-radius: 4px;

    background-color: #efefef;

    padding: 20px;

}



div h3 {

    text-align: center;

    color:blue;

}



#labelledwifi,#labelledrele,#labelequipdesligado{

     color:rgb(252, 7, 7);

     font-style: italic;

     font-weight: bold;

}



.liga-direto{

    width: 50%;

    height: 5px;

    line-height: 1.6;

}



.switch-direto {

    position: relative;

    display: flex; 

    width: 60px; 

    height: 25px;

} 



.switch-direto input {

    display: none

}



.slider-direto {

    position: absolute; 

    top: 0; 

    left: 0; 

    right: 0; 

    bottom: 0; 

    background-color: rgb(214, 211, 211); 

    border-radius: 34px;

    cursor: pointer;

 

}



.slider-direto:before{

    position: absolute; 

    content: "";

    height: 17px; 

    width: 17px; 

    left: 3px; 

    right: 3px;

    bottom: 4px; 

    background-color: rgb(15, 247, 65); 

    -webkit-transition: 

    .3s; transition: 

    .3s; border-radius: 68px;

}



input:checked+.slider-direto{

    background-color: #eb141f

}



input:checked+.slider-direto:before {

    -webkit-transform: translateX(37px); 

    -ms-transform: translateX(37px); 

    transform: translateX(37px)

}



.liga-direto .descricao {

    margin-left: 4rem;

    font-weight: bold;

    letter-spacing: 0.2rem;

    font-size: 1.0rem;

}



.titulo-liga-direto,.titulo-configura-equip {

    height: 1px;

    color:blue;

    text-align:center;

    /*line-height: 1.0;*/

    font-size: 20px;

    font-weight: bold;

}



#casa{

    width:50px;

    height:50px; 

    margin-left: 160px;

}



#slider-pre-monitora,#slider-pre-equipligado,#slider-pre-ledreles,#slider-pre-ledwifi,

#slider-pre-eventual1,#slider-pre-eventual2,#slider-pre-eventual3,#slider-pre-eventual4{

    

    font-family: Arial;

    color: #009900;

    margin: 4px;

    font-style: italic;

    font-weight: bold;

}

.alert-box {
	padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #f7f4f4;
    background-color: #570ce2;
    border-color: #2e5e08;
    display: none;
}