/* BASE =================================== */
body{
    padding: 0px; margin: 0px;
    background-color: #f0eeed;
    color:black;
    font-size: 25px;
    font-family:Courier New,sans-serif;
}
#content{
    position: relative;
    padding: 0px; margin: 0px;
    height: 100vh;
}
/* link que ainda não foi visitado */
a:link,a:visited,a:hover,a:active {
     color: black;
     text-decoration: none;
 }
/** ========= TELA DE MAIN ===============================*/
.btnPlay{
    margin:2px;
    width:  28px;
    height: 28px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border:none;
}

.botoes{
	background:#4d6464;
	border-radius:6px;
	border: solid 2px #444470;
	border-bottom-width: thick;
	color:white;
}

.botoes:hover{
	background: #a3c3c3;
	border: solid 2px #8989b1;
	color:black;
	cursor:pointer;
}

/* ESTRUTURA PRINCIPAL=================================== */
#topo{
    position: relative;
    margin: 0px; padding: 0px;
    width: 100vw;
    min-height: 20vh;
}
#divTop1{
    position: relative;
    margin: 0px; padding: 0px;
    width: 70%;
    height: 100%;
    float: left;    
}
#divTop2{
    position: relative;
    margin: 0px; padding: 0px;
    width: 25%;
    height: 100%;
    float: left;
    margin-top: 20px;
    margin-bottom: -20px;
}

/* ELEMENTOS DO TOPO */
#sobra{
    position: relative;
    width: 100vw;
    min-height: calc(20vh - 15px);
}
.imgLogo{
    height: 100px;
}
#faixa{
    position: relative;
    width: 100vw;
    height: 15px;
    background-image: linear-gradient(to right, #005976, #36b19e);
}
#faixa2{
    background-image: linear-gradient(to right, #005976, #36b19e);
}

#meioId{
    position: relative;
    width: 90vw;
    height: 60vh;    
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;    
    overflow-y: auto;
    margin-left: 5vw;
}
#meioIdlog{
    position: relative;
    width: 90%;
    height: 70vh;    
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;    
    overflow-y: auto;
    margin-left:5%;
}
#identificar{
    position: relative;
    width: 80%;
    margin-left:12%;
    text-align: center;
}
.NomePart{
    width:90%;
    height:30px;
    font-size:30px;
}
.btnVerde{
    position: relative;
    border-radius: 20px;
    width:90%;
    height:50px;
    color:white;
    font-size:28px;
    background-color:#005976;
    border:none;
}
.styleCR{
    background-image: linear-gradient(to right, #5271ff, #fb9051);
}
.styleIAT{
    background-image: linear-gradient(to right, #fa4647, #a374fa);
}
.styleBase{
    background-image: linear-gradient(to right, #005976, #005976);
}
.selPerg{
    width:90%;
    height:30px;
    font-size:20px;
}
#excluirTeste{
    position: absolute;
    top:0; left: 0;
    background-color:white;
    border:thin solid black;
    text-align: center;
    z-index: 10;
    width: 80vw;
    height: 40vh;
    margin-left: 10vw;
    margin-top: 30vh;
    display:none;
}
.divPadrao{
    position: relative;
    width: 80%;
    margin-left:10%;
    text-align: center;
}

.head-table{
	padding:3px;
	font-size:large;
	background:black;
	color:white;
	box-shadow:2px 2px #b6d1e5;
}
.head-table th{
	padding:4px;
}
.out-botao{
	background:#f33434;
	border-radius:5px;
	padding:4px;
	font-size:large;
	color:#f5e3c2;
	font-weight:600;
	max-height:35px;
}
.out-botao:hover{
	background:#b11212;
	color:white;
}
#identificar-login{
	display:inline-table;
	color:white;
	text-align:left;
	padding-left:20px;
	background-size:cover;
	background-image: url("../imgs/login.jpg");
	background-repeat: round;
	width:400px;
	max-width:30vw;
	border-radius:40px;
	height:70vh;
	white-space-collapse:preserve-breaks;
}

@media screen and (max-width: 750px) {
    #divTop1{
        position: relative;
        margin: 0px; padding: 0px;
        width: 100%;
        height: 80%;
        margin-bottom: 20px;
    }
    #divTop2{
        position: relative;
        margin: 0px; padding: 0px;
        width: 100%;
        height: 20%;
        margin-top: -10px;
        margin-bottom: 10px;
    }
    #identificar-login{
    	min-width: fit-content;
    }
    #tabIAT{
    	display:grid;
    }
    #tabIAT td{
        display: contents;
    }
    #tabIAT tr{
    	display:grid;
    }
}
@media screen and (max-width: 280px) {
    .imgLogo{
        height: 50px;
    }
}