/*********************************************************/
/*	STYLE CSS - MRPNET*/
/*********************************************************/
* {font-family: "Saira", sans-serif;}
:root {
    --bg1: #374953;
    --c1a: #1492A4;
    --c1: #17A2B8; 
    --c2a: #DB3444;
    --c2: #C62F3D;
}
/*********************************************************/
/*TELA DE LOGIN*/
.home {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.home .quadro {width: 25%; padding: 40px; border-radius: 20px; opacity: 0.9; text-align: center; background: rgba(255, 255, 255, 0.2);  backdrop-filter: blur(10px);  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.home h1 {color: var(--cor-p); font-size: 1.6em; padding-bottom: 20px; text-transform: uppercase;}
.home p {color: var(--cor-p);}
.home a {color: var(--cor-s);}
.home a:hover {color: var(--cor-p);}

.home .input {width: 100%; padding: 15px 15px 15px 50px; border: 1px solid #bbb; background-repeat: no-repeat; background-position: left top 10px; border-radius: 10px;}

.home .bg-email {background-image: url(../images/icon-email.png);}
.home .bg-senha {background-image: url(../images/icon-login.png);}
/*********************************************************/
.botao {background-color: var(--cor-p); color: #fff; padding: 10px 30px; border-radius: 10px; font-weight: 700; font-size: 1.1em; cursor: pointer;}
.botao:hover {background-color: var(--cor-s);}

.botao-cadastro {background-color: var(--cor-p); color: #fff; padding: 5px 15px; border-radius: 10px; font-weight: 500; font-size: 1em; cursor: pointer;}
.botao-cadastro:hover {background-color: var(--cor-s);}

.botao-busca {background-color: var(--cor-p); float: right; color: #fff; padding: 12px 5px; margin-left: 2%; width: 28%; border-radius: 10px; font-weight: 500; font-size: 1em; cursor: pointer;}
.botao-busca:hover {background-color: var(--cor-s);}
/*********************************************************/
.dashboard {background-color: #EBEFEE;}
.red {color: red;}
.blue {color: blue;}
.yellow {color: orange;}
.verde {color: green;}

.excluir {float: right; cursor: pointer; font-family: "Saira", sans-serif; }

.minifoto {width: 30px; height: 35px; float: left; background-size: cover; background-position: center center; margin: -5px 10px 0 0;}
/*********************************************************/
.centro {width: 83%; float: right; padding: 10px; transition: width 0.3s ease;}
.centro h3 {padding: 10px; border-top: 1px solid var(--cor-p); border-bottom: 1px solid var(--cor-p); text-align: center; color: var(--cor-p); margin-bottom: 20px; text-transform: uppercase;}
.centro h4 {background-color: #EBEFEE; padding: 10px; text-align: center; margin-bottom: 20px; color: var(--bg1); font-weight: 400; text-transform: uppercase;}
/*********************************************************/
header {width: 100%; display: table; text-align: center; background-color: #fff; padding: 10px; border-radius: 10px; background-color: var(--bg1);}
header h1 {color: #fff; font-size: 1.2em; text-transform: uppercase; letter-spacing: 2px;}
header i {color: var(--cor-s); padding-right: 10px;}
/*********************************************************/
.quadro {float: left; margin: 10px 0.5% 1% 0.5%; background-color: #fff; padding: 15px; border-radius: 10px;}
.quadro-3 {float: left; width: 30%; margin: 0 1.5% 10px 1.5%;}
.quadro-5 {float: left; width: 47%; margin: 0 1.5% 10px 1.5%;}
.quadro-6 {float: left; width: 63%; margin: 0 1.5% 10px 1.5%;}
.quadro-3a {float: left; width: 30%; margin: 1% 1.5%; background-color: #fff; padding: 15px; border-radius: 10px;}
.qd-10 {width: 9%;}
.qd-20 {width: 19%;}
.qd-30 {width: 29%;}
.qd-40 {width: 39%;}
.qd-50 {width: 49%;}
.qd-60 {width: 59%;}
.qd-70 {width: 69%;}
.qd-80 {width: 79%;}
.qd-90 {width: 89%;}
.qd-100 {width: 99%;}

.esquerda {width: 48%; float: left;}
.direita {width: 48%; float: right;}
/*********************************************************/
.titulos {width: 100%; display: table; background-color: var(--bg1); border-top-left-radius: 10px; border-top-right-radius: 10px; color: #fff; text-align: left;}
.resultados {width: 100%; display: table;}
.resultados li {font-size: 1em; color: #333; text-align: left !important;}
.resultados a {color: var(--cor-p);}
.resultados .ajuste {float: left; padding-right: 20px;}
.resultados .input {width: 50%; padding: 5px 15px; border: 1px solid #dfdfdf; border-radius: 10px; color: #333; position: relative; margin-top: -7px;}
.resultados .bts {background-color: var(--cor-p); color: #fff; padding: 5px; border-radius: 10px; font-weight: 400; font-size: 0.7em; cursor: pointer;}
.resultados .bts:hover {background-color: var(--cor-s) !important;}
/*********************************************************/
.tm-10 {width: 10%; float: left; padding: 10px;}
.tm-15 {width: 15%; float: left; padding: 10px;}
.tm-20 {width: 20%; float: left; padding: 10px;}
.tm-30 {width: 30%; float: left; padding: 10px;}
.tm-35 {width: 35%; float: left; padding: 10px;}
.tm-40 {width: 40%; float: left; padding: 10px;}
.tm-50 {width: 50%; float: left; padding: 10px;}
.tm-60 {width: 60%; float: left; padding: 10px;}
.tm-70 {width: 70%; float: left; padding: 10px;}
.tm-80 {width: 80%; float: left; padding: 10px;}
.tm-90 {width: 90%; float: left; padding: 10px;}
.tm-100 {width: 100%; float: left; padding: 10px;}
.total {width: 20%; float: right !important; padding: 10px; }
/*********************************************************/
.linha {width: 100%; border: 1px solid #ddd; display: table; background: linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 100%); border-bottom: 1px solid #ddd;}
.linha:hover {background: #EBEFEE}
.linha a {position: relative; z-index: 9999;}
.bg-bloqueado {color: var(--c2a);}
/*********************************************************/
.formulario {width: 100%; display: table; text-align: center;}
.formulario label {display: block; padding-bottom: 5px; color: var(--cor-s); font-size: 0.9em; width: 100%; text-align: left; padding-left: 10px; font-size: 1.1em;}
.formulario .input {width: 100%; padding: 15px; border: 1px solid #dfdfdf; border-radius: 10px; color: #333;}
.formulario .inputbusca {width: 70%; padding: 15px; border: 1px solid #dfdfdf; border-radius: 10px; color: #333; float: left;}
.formulario .inputtext {width: 100%; height: 200px; resize: none; padding: 15px; border: 1px solid #dfdfdf; border-radius: 10px; color: #333;}
.formulario fieldset {width: 100%; border: 0; margin-bottom: 20px; padding: 0;}
.formulario .interno {width: 20% !important; float: left; margin-bottom: 0 !important;}
.formulario .exibe-imagem {width: 100%; height: 200px;  background-size: contain; background-repeat: no-repeat; background-position: center center;  border: 1px solid #dfdfdf; border-radius: 10px;}
.formulario .info{display: block; width: 100%; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; padding: 10px 5px; min-height: 30px; font-size: 0.9em; text-align: left !important;}
.formulario a {color: var(--cor-p);}
/*********************************************************/
.opc a {color: var(--cor-s);}
.opc a:hover {color: var(--cor-p);}
.opc li {display: inline-block;}
/*********************************************************/
.botoes {width: 100%; display: table; }
.botoes li {width: 100%; background-color: var(--cor-p); text-align: center; color: #fff; font-weight: 600; padding: 15px; margin-bottom: 20px;}
.botoes li:hover {background-color: var(--cor-s);}
.botoes i {float: left; padding-top: 2px;}
/*********************************************************/
.icones {width: 100%; text-align: center;}
.icones h2 {color: #fff; text-align: left; font-weight: 400; font-size: 0.9em;}
.icones h3 {border: 0; padding: 0; margin: 0; font-weight: 400; letter-spacing: 1px; color: #fff; font-size: 1em;}
.icones li {display: inline-block; width: 14%; margin: 0 1% 30px 1%; height: 90px; padding: 10px 15px; background-color: var(--c1); position: relative; border-radius: 10px;}
.icones li:hover {background-color: var(--c2a);}
.icones li:hover .inferior {background-color: var(--c2);}
.icones li:hover .icon i {color: var(--c2);}

.icones .texto {float: left; width: 70%;}
.icones .icon {float: right; width: 30%;}
.icones .icon i {font-size: 2em; padding-top: 5px; color: var(--c1a);}
.icones .inferior {width: 100%; left: 0; bottom: 0; position: absolute; padding: 5px; text-align: center; background-color: var(--c1a);}
.icones .inferior i {padding-left: 10px;}
/*********************************************************/
.informacoes label {display: block; width: 100%; font-weight: 700; color: var(--cor-p); padding: 0 5px; margin-top: 10px; font-size: 1.1em;}
.informacoes span {display: block; width: 100%; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; padding: 5px; min-height: 30px; font-size: 1em;}
.informacoes span:hover {background-color: #f9f9f9;}
.informacoes .exibe-imagem {width: 100%; height: 200px;  background-size: contain; background-repeat: no-repeat; background-position: center center;}
/*********************************************************/
.calendar-container {display: flex; flex-wrap: wrap; width: 100%; padding: 0; background-color: #dfdfdf; border-radius: 10px;}
.calendar-day {flex: 1 1 24.5%; max-width: 24.5%; box-sizing: border-box; border: 1px solid #ccc; padding: 5px; background-color: #f9f9f9; margin: 10px 0.2%; min-height: 250px; max-height: 250px; border-radius: 10px; overflow: auto;}
.calendar-day h3 {font-size: 1em; padding: 5px; color: var(--cor-p);}
.calendar-day li {font-size: 0.8em;color: #333; padding: 5px;}
.calendar-day li:hover {background-color: #dfdfdf !important;}
.calendar-day i {color: var(--c2);}
/*********************************************************/
.modal {display: none; position: fixed; z-index: 999999999; left: 0;top: 0;	width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); }
.modal h2 {text-align: center; padding-bottom: 20px; color: var(--c2); font-size: 1em;}
.modal-content {background-color: #fff; margin: 10% auto; 	padding: 20px; border: 1px solid #888;	width: 80%; overflow: auto; max-width: 800px; max-height: 450px; border-radius: 8px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.close {color: #aaa;float: right;	font-size: 28px;font-weight: bold;}
.close:hover, .close:focus {color: black;	text-decoration: none; cursor: pointer;}
/*********************************************************/
.tabela-relatorio {width: 100%; border-collapse: collapse; }
.tabela-relatorio th, .tabela-relatorio td { border: 1px solid #ddd; padding: 10px; text-align: left;}
.tabela-relatorio th {background-color: #f2f2f2;font-weight: bold; color: #000; font-weight: 700;}
.tabela-produtos {width: 100%; border-collapse: collapse; margin: 10px auto 30px auto; }
.tabela-produtos th, .tabela-produtos td {border: 1px solid #ccc; padding: 8px; text-align: left;}
.tabela-produtos th {background-color: #e6e6e6; font-weight: bold;}
/*********************************************************/
.atualizacoes {display: table;}
.atualizacoes li {width: 100%; padding: 5px 10px; border-bottom: 1px dashed #ccc;}
.atualizacoes i {color: var(--cor-s); padding-right: 10px;}
/*********************************************************/
.downloads {width: 100%; text-align: center;}
.downloads h2 {font-size: 0.8em; text-transform: uppercase; color: var(--cor-p);}
.downloads h2:hover {color: var(--cor-s);}
.downloads .pasta {width: 10%; height: 200px; display: inline-block; margin: 1%;}
.downloads .imagem {width: 100%; height: 160px;}
.wts {font-size: 2em; color: green;} 
/*********************************************************/
.container { display: flex; flex-wrap: wrap; gap: 1%; justify-content: center; }
/*********************************************************/
.aulas .card { border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 15px; width: 100%; max-width: 48%; }
.aulas h4 { margin-bottom: 10px; font-size: 1em; color: var(--cor-p); text-align: center; }
.aulas table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.aulas th, td { padding: 5px 10px; border: 1px solid #ddd; text-align: left; }
.aulas th { background-color: var(--cor-p); color: white; }
.aulas td { background-color: #f9f9f9; }
.aulas a {color: var(--cor-s);}

@media (max-width: 768px) {
    .container { flex-direction: column; align-items: center; }
}

.atributos {width: 100%; display: table;}
.atributos li {width: 33%; float: left; padding: 5px 0; font-size: 0.9em; color: var(--preto); text-align: left;}

.info {background-color: var(--c2a) !important; color: #fff !important; font-weight: 900 !important; letter-spacing: 2px;}
.img {max-height: 45px;}
/*********************************************************/