@charset "utf-8";

/**     
*  CONFIGURAÇÕES GERAIS
* .......................................................................... */

/* Gerais */
body{background-color:#d7d7d7;}
body, button, input, select, optgroup, textarea{
    color:#404040;
    font-family:"Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    font-size:1rem;
    line-height:1.5;
}

/* Retira espaço extra do padding */
* {margin:0; padding:0; box-sizing:border-box;}

/* Classes Flex e Grid */
.flex{display:flex;}
.grid{display:grid;}

/* Títulos */
h1{margin:0 0 25px; font-size:24px; line-height: 1.5;}
h2{margin:0 0 25px; line-height:1.3;}

/* Imagens */
img{object-fit:cover; width:100%;}

/* Login */
.login-box{
    background-color:#fff;
    width:25%;
    height:auto;
    padding:0;
    margin:auto;
    grid-template-columns:1fr;
    gap:30px;
    border-radius:10px;
}
.login-itens{grid-template-columns:1fr;}
.main-logo{width:230px; height:115px; margin:30px auto 20px; display:block}



/* Links */
a{color:#555; text-decoration:none;}
a:visited{color:#555; text-decoration:none;}
a:hover, a:focus, a:active{color:#8d3c0c; text-decoration:none;}
a:focus{outline:none;}
a:hover, a:active{outline:0;}

.page-default, .page-default-cadastro, .page-default-relatorio{margin:auto;}
.page-default{height:100vh;}
.page-default-cadastro, .page-default-relatorio{height:auto;}

.page-content, .page-content-cadastro, .page-content-relatorio, .page-content-stats{
    background-color: #fff;
    height: auto;
    padding: 0;
    margin: auto;
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: 10px; 
}
.page-content {width: 600px}
.page-content-cadastro, .page-content-stats {width: 800px}
.page-content-relatorio {width: 1140px}

.panel-itens {grid-template-columns: 1fr; margin: 45px auto 90px}
.panel-itens-cadastro, .panel-itens-relatorio {grid-template-columns: 1fr; margin: 60px auto}
.panel-itens-relatorio {width: 96%}
.panel-itens h2, .panel-itens-cadastro h2, .panel-itens-relatorio h2 {text-align: center}
.user-perfil {color: #8e3d0d; text-align: center; margin-bottom: 30px}
.avatar {
    width: 180px;
    height: 90px; 
    display: block; 
    margin: 0 auto 15px; 
    /*border-radius: 50%;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
    box-shadow: 0px 0px 10px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); */
}

/* Menu */
#menu ul {
    font-size: 14px;
    padding:0px;
    margin:0px;
    list-style:none;
    text-align: center;
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    padding: 2px;
    display: inline-block;
    margin: auto 5px;
    color: #333;
    text-decoration: none;
    border-bottom: 3px solid #c2c2c2;
}
#menu ul li a:hover {
    color: #6d6d6d;
    border-bottom:3px solid #a8531d;
}


.button-encerrar a {color: #fff;}

/* Formulários */
form {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.form-container {padding: 0 45px 30px;}
.mandatory {color: red; font-size: 12px}

.form-size {
    width: 75%;
    margin: auto;
}
.report_input > div:first-child { 
    flex: 90%;
}
.report_input > div:nth-child(2) { 
    flex: 10%;
}

/* Botões */
input[type=text], input[type=email], input[type=password], input[type=file], select, textarea {
    width: 100%;
    padding: 10px;
    margin: 0 0 14px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.button-enviar {
    background-color: #f5d389 /*#da9241 /*#e47b19  /*#04aa6d*/;
    color: #222 /*rgb(255, 255, 255);*/;
    padding: 10px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    font-weight: 600;
    letter-spacing: 1px
}
.button-encerrar {
    background-color: #900020;
    color: rgb(255, 255, 255);
    padding: 2.5px 10px 7.5px;
    border-radius: 5px;
    border: none;;
    cursor: pointer;
    display:block;
    margin: 45px auto 0;
}
.button-relatorio {
    background-color: #04aa6d;
    color: rgb(255, 255, 255);
    opacity: 0.8;
    padding: 2.5px 10px 7.5px;
    border-radius: 5px;
    border: none;;
    cursor: pointer;
    display:block;
    width: auto;
    font-weight:500
}
.button-salvar {
    background-color: #f5d389;
    color: #8e3d0d;
    opacity: 1;
    padding: 1.5px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display:block;
    width: auto;
    font-weight:500;
    margin-top: 1px;
    font-size: 14px;
}
.button-editar {
    background-color: #04aa6d;
    color: rgb(255, 255, 255);
    padding: 2.5px 10px 7.5px;
    border-radius: 5px;
    border: none;;
    cursor: pointer;
    display:block;
    margin:auto;
    margin-top:30px;
    margin-bottom: 45px;
}
.button-atualizar-pesquisa {
    background-color: #f5d389 /*#da9241 /*#e47b19  /*#04aa6d*/;
    color: #222 /*rgb(255, 255, 255);*/;
    padding: 3px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    font-weight: 600;
    letter-spacing: 1px
}
button:hover {opacity: 0.75;}


/* Tabela dos relatórios */
.table {
	width: 100%;
	border-collapse: collapse;
}
.table td, .table th {
    padding: 5px 15px;
    border: 1px solid rgb(142, 61, 13, 0.4);
    font-size: 14px;
}
.table th {
    padding: 7.5px 15px;
    font-size: 15px;
}
.table th {
	background-color: #f5d389;
	color: #8e3d0d;
    text-align: left;
}
.table tbody tr:nth-child(even){
	background-color: #f2f2f2;
}

.pagination {
    margin-top: 30px;
}
ul.pagination { /** Inicia a configiração da lista pagination**/
    display: inline-block; /** Inicia uma nova linha e espande para esquerda **/
    padding: 0; /** Retira o espaço interno da lista **/
 }
  
ul.pagination li { /** Inicia a configuração da linha da lista **/
    display: inline; /** Deixa uma linha do lado da outra **/
}
  
ul.pagination li a{ /** Coloca o estilo no botão que tem link a **/
    color: black; /** Fonte preta **/
    float: left; /** Alinha a esquerda **/
    padding: 4px 8px; /** Adiciona espaço na linha **/
    text-decoration: none; /** Tira decoração do texto **/
}

ul.pagination li a.active { /** Coloca o estilo no link com a classe active **/
    background-color: #cd6918; /** Define uma cor de fundo para o botão da página atual **/
    color: white; /** A cor da fonte também **/
}

ul.pagination li a:hover:not(.active) {/** Insere o estilo para quando o mouse passar por cima do link exeto no botão da página atual **/
    background-color: #f5d389; /** Insere um tom de cinza **/
}

@media screen and (max-width: 500px) {
	.table thead{
		display: none;
	}
    .table td, .table th {
        border: 0.5px solid #ddd;
    }

	.table, .table tbody, .table tr, .table td {
		display: block;
		width: 100%;
	}
	.table tr {
		margin-bottom:15px;
	}
	.table td {
		text-align: right;
		padding-left: 35%;
		text-align: left;
		position: relative;
	}
	.table td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		padding-left: 15px;
		font-size: 15px;
		font-weight: 700;
		text-align: left;
	}
    .form-size {
        width: 100%;
        margin: auto;
    }
    .form-container {padding: 0;}
    .report_input > div:first-child { 
        margin-right: 7.5px;
    }
    .report_input > div:nth-child(2) { 
        margin-left: 7.5px;
    }
}













/* Tablet */
@media screen and (max-width: 960px) {   
    .login-box {
        width: 70%;
    }
    .page-default {
        width: 100%;
    }
    .page-content {width: 80%}
    .page-content-stats {width: 80%}
    .page-content-cadastro {width: 80%}
    .page-content-relatorio {width: 94%}

    .report_input > div:first-child { 
        flex: 88%;
    }
    .report_input > div:nth-child(2) { 
        flex: 18%;
    }
    
    
}


/* Mobile */
@media screen and (max-width: 600px) {   
    .login-box {
        width: 90%;
    }
    .page-default {
        width: 100%;
    }
    .page-content {width: 94%}
    .page-content-stats {width: 94%}
    .page-content-cadastro {width: 94%}
    .page-content-relatorio {width: 94%}
    .form-container {padding: 0 15px;}
}