body, html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: normal;
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    color: #224A6A; /* Azul substituindo o verde */
    height: 100%;
    min-height: 100%;
    font-size: 15pt;
    background-color: #f0f0f0;
    background-image: url('../img/1737647393999.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

fieldset {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #ededed;
    color: #303030;
    margin-top: 20px;
    text-align: left;
}

legend {
    font-size: 16pt;
    color: #8B4513;
}

label {
width: 100%;
}
.btnazul {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;	
background-color: #1976D2; /* Azul primário */
color: white;
cursor: pointer;
font-size: 14pt;
}

.btnazul:hover {
background-color: #1565C0; /* Azul mais escuro para hover */
}

input, select, textarea, button {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
    background-color: #0066CC; /* Azul substituindo o verde */
    color: white;
    cursor: pointer;
    font-size: 14pt;
}

button:hover {
    background-color: #005BB5; /* Azul mais escuro para hover */
}

button:disabled{
background-color: #d3d3d3;
color: #808080;  
cursor: not-allowed;
}

.botao {    
color: white;
display: inline-block;       
text-align: center;   
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;	
padding: 8px;
margin-top: 6px;
width: 100%;
}

.btneditar{
background-color: #007BFF;
}

.btneditar:hover{
background-color: #0056b3;
}

.btnupdate {
background-color: #388E3C;
}

.btnupdate:hover {
background-color: #2E7D32;
}

.btnexcluir {
background-color: red;
color: #fff;
text-decoration: none;
}

.btnexcluir:hover {
background-color: #8B0000;
}

.botao:disabled{
background-color: #d3d3d3;
color: #808080;  
cursor: not-allowed;
}

a{
text-decoration: none;
border-radius: 4px;
}

header {
position: fixed; 
width: 100%;
top: 0;
left: 0;   
background: #000153;
color: white;
padding: 10px;
text-align: center;
z-index: 500;
}
main {
width: 100%;
max-width: 900px;
margin: 85px auto;  
padding-bottom: 10px;			
}
#logomenu{
position: absolute;
right: 5px;
top: 5px;
width: 60px;
cursor: pointer;
}
#logoSemel{
position: absolute;
left: 5px;
top: 5px;
width: 200px;
}
.container{	
position: relative;
width: 100%;           
background-color: rgba(255,255,255,0.9);	
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;	
padding-top: 2px;			
}

h1 {
margin: 0;
}
section {
margin-top: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}



.linhadecorada {
    display: block;
    width: 100%;
    height: 2px;
    border: 0px;
    background: -webkit-linear-gradient(left, rgba(0, 102, 204, 0) 0%, rgba(0, 102, 204, 0.8) 20%, rgba(0, 102, 204, 1) 53%, rgba(0, 102, 204, 0.8) 79%, rgba(0, 102, 204, 0) 100%);
    background: linear-gradient(left, rgba(0, 102, 204, 0) 0%, rgba(0, 102, 204, 0.8) 20%, rgba(0, 102, 204, 1) 53%, rgba(0, 102, 204, 0.8) 79%, rgba(0, 102, 204, 0) 100%);
    margin-top: 20px;
}

.zebra:nth-child(odd) {
    background-color: #ADD8E6; /* Azul claro */
    border: 1px solid #87CEEB; /* Azul mais suave */
}

.zebra:nth-child(even) {
    background-color: #E0FFFF; /* Azul muito claro */
    border: 1px solid #ddd;
}

.cpanel {	 
display: grid;
width: 100%; 
margin: 0 auto;
margin-bottom: 2px;  
grid-template-columns: 1fr 1fr 1fr;  
gap: 5px;  
}

.cpanel2 {
position: relative;	
display: grid;
width: 100%; 
margin: 0 auto;
margin-bottom: 2px;  
grid-template-columns: 1fr 1fr;  
gap: 5px;  
}

.cpanel3 {
position: relative;	
display: grid;
width: 100%; 
margin: 0 auto;
margin-bottom: 2px;  
grid-template-columns: 1fr 1fr;  
gap: 5px;  
}

.link{	
position: relative;
background: #e1eaeb;
color: #7f7c7c;
left: 0px;
width: 100%;
padding: 5px;
padding-top: 20px;
padding-bottom: 20px; 
text-align: right;
border-top: 1px solid #dbe5e8;
cursor: pointer;
-webkit-border-radius: 0 0  5px 5px;
border-radius: 0 0  5px 5px;
}

.link a {
    font-weight: bold;
    background: #f7f8f1;
    padding: 6px;
    color: #0056B3; /* Azul substituindo o verde */
    margin-left: 10px;
    border: 1px solid #0066CC; /* Azul substituindo o verde */
    text-decoration: none;
    border-radius: 4px;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.link a:hover {
    color: #003E99; /* Azul mais escuro */
    background: #f7f7f7;
    border: 1px solid #004C99; /* Azul escuro */
}

.link a.disabled{
pointer-events: none;
cursor: default;
text-decoration: none;
color: inherit;
background-color: #bbb;
color: #ddd;
cursor: not-allowed;	 
}	

table {
    border-collapse: collapse;
    border: 1px solid #87CEEB; /* Azul claro */
}

table td {
padding-left: 10px;
}

.error {
color: red;
text-align: center;
}

.lidashboard{
width: 100%;	
padding: 5px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin: 0 auto;
text-align: center;
}

.lidashboard:hover {
background-color: dedfd7; /* Nova cor de fundo */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Nova sombra */
border: 1px solid #bbb; 	
}

.lidashboard img{
width: 60px;
border-radius: 10px;
margin-bottom: 5px;

}

.cpdashboard {	 
display: grid;
width: 100%; 
margin: 0 auto;
margin-bottom: 2px;  
grid-template-columns: 1fr 1fr 1fr;     
gap: 20px;  
}

.cpdashboard a{
text-decoration: none;
color: #226A4A;  
}

/* Botão de edição (btn-edit) */
.btn-edit {
    background-color: #4A90E2; /* Azul substituindo o verde */
    color: #fff;
}

.btn-edit:hover {
    background-color: #357ABD; /* Azul mais escuro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.btn-edit:active {
background-color: #45a049; /* Verde mais escuro */
transform: scale(0.98); /* Leve compressão para efeito de clique */
}

/* Botão de exclusão (btn-delete) */
.btn-delete {
background-color: #f44336; /* Vermelho */
color: #fff;	
}

.btn-delete:hover {
background-color: #e53935; /* Vermelho mais escuro */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05); /* Leve aumento no tamanho do botão */
}

.btn-delete:active {
background-color: #e53935; /* Vermelho mais escuro */
transform: scale(0.98); /* Leve compressão para efeito de clique */
}

/* Botão de ativação (btn-ativar) */
.btn-ativar {
background-color: #ff9800; /* Laranja */
color: #fff;
}

.btn-ativar:hover {
background-color: #fb8c00; /* Laranja mais escuro */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05); /* Leve aumento no tamanho do botão */
}

.btn-ativar:active {
background-color: #fb8c00; /* Laranja mais escuro */
transform: scale(0.98); /* Leve compressão para efeito de clique */
}

/* Estilo adicional para os botões */
.btn:active {
transform: scale(0.98); /* Efeito de clique */
}

.btn:disabled {
background-color: #ddd;
color: #999;
cursor: not-allowed;
}

#alinhamento{
text-align: left;
}

.perfil-info p {
font-size: 18px;
margin: 10px 0;
}

.perfil-actions {
margin-top: 20px;
width: 100%;
}

.btn_ {
width: 200px;
float: left;
margin-right: 5px;
}

.button.logout {
background-color: #dc3545;
transition: background-color 0.3s ease;
}

.button.logout:hover {
background-color: #c82333;
}

.button:hover {
background-color: #2E7D32;
}

.logout a {
text-decoration: none;
color: #fff;
}

.btnperfil {	 
display: grid;
width: 100%; 
margin: 0 auto;
margin-bottom: 2px;  
grid-template-columns: 1fr 1fr 1fr 1fr;  
gap: 5px;  
}

.disabled-div {
pointer-events: none; /* Desabilita eventos de mouse */
opacity: 0.5; /* Faz a div parecer desabilitada */
}

.habilita-div {
pointer-events: auto; /* Desabilita eventos de mouse */
opacity: 1; /* Faz a div parecer desabilitada */
}

.disabled-form {
pointer-events: none; /* Desabilita eventos de mouse */
opacity: 0.7; /* Faz a div parecer desabilitada */
}

.habilita-form {
pointer-events: auto; /* Desabilita eventos de mouse */
opacity: 1; /* Faz a div parecer desabilitada */
}

#uploadForm{
display: none;
}

#btnfoto{
width: 100%;
font-size: 10pt;
background-color: #efefef;
color: #282828;
}

#btnfoto:hover{	
background-color: #ccc;
}

.btnfoto{
width: 100%;
font-size: 10pt;
background-color: #efefef;
color: #282828;
}

.btnfoto:hover{	
background-color: #ccc;
}

#divfoto{
float: left;
width: 20%;
}

#divnome{
float: right;
width: 79.4%;  
}

#img_perfil{
width: 100%;
text-align: center;
padding-top: 10px;
}

#fotoAtleta{
position: relative;
width: 200px;
height: 200px;
border-radius: 100px;
border: 1px solid #ccc;
margin: 0 auto;
}

#fotoPerfil{
width: 100%;
border-radius: 50%;
}

#iconeCamera{
	position: absolute;
	width: 40px;
	height: 40px;	
	right: 7px;
	bottom: 7px;
	border: 3px solid #fff;
	border-radius: 50%;
	cursor: pointer;
}

#mapamundi{
background-image: url('../img/map-7442006_640.png'); /* Substitua por seu caminho da imagem */
background-repeat: no-repeat; /* Impede a repetição da imagem */	
background-size: cover; /* Faz a imagem cobrir toda a área disponível, mantendo a proporção */  
}

#formLocalidade{
width: 100%;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 8px;
}

#panel_computer{
display: block;	
}

#panel_mobile{
display: none;	
}

#btnBuscar{
position: relative;
}
#btnLimpar{
position: relative;
}

#espacoRodape{	
display: none;
}

#imgindex{
width: 90%;
margin: 0 auto;
}

.panfiltros {    	
display: grid;
width: 100%; 
margin: 0 auto;	   
grid-template-columns: 2fr 1fr 1fr;  
gap: 5px;   
}

#xfechar {
position:absolute;
margin-top : -8px;
right : -8px;
width: 50px;
cursor: pointer;
box-sizing: content-box;
z-index: 400;
}

#containerModal{	
	position:fixed;	
	top:0;
	left:0;
	z-index: 1000;
	background-color: rgba(0,0,0,.9);
	width:100%;
	height:100%;	
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#containerComputer{
	position: relative;
	width: 340px;
	height: auto;
	background-color: rgba(255,255,255,0.9);
	border-radius: 8px;
	text-align: center;
	padding: 20px;
	padding-top: 0;
	font-size: 12pt;
}

#containerModal button{	
    width: 100px;	
	background-color: #dedede;
    border: 1px solid #bcbcbc;
	color: #282828;	
	padding: 8px;
	font-size: 12pt;
}

#containerModal button:hover{    	
	background-color: #ccc;   
}

#canvas{  
   border: 1px solid #ccc;
   border-radius: 50%;
   margin: 20px auto;   
}

#controls{
	margin-top: -15px;
}


@media only screen and (max-width: 768px) {

.perfil-actions {   
width: 80%;
margin: 0 auto;
}

.btn_{
clear: both;
width: 100%;
margin-top: 8px;
margin-right: 0px;
}

body {   
padding: 10px;
}

header {
position: relative;
border-radius: 8px;
}

header h1 {
font-size: 18pt;
}

#alinhamento{
text-align: center;
}

.cpanel {	 
grid-template-columns: 1fr; 
gap: 5px;
}

.cpanel2 {	 
grid-template-columns: 1fr; 
}

.cpdashboard {	 
margin-bottom: 2px;  
grid-template-columns: 1fr 1fr;  
gap: 5px;  
}

.btnperfil {	 
grid-template-columns: 1fr; 

}

#divfoto{
width: 100%;
}

#divnome{
width: 100%;  
}

legend {
font-size: 13pt;
}

#panel_computer{
display: none;	
}

#panel_mobile{
display: block;	
}

#btnBuscar{
position: fixed;
bottom: 55px;
width: 90%;
left: 5%;
}
#btnLimpar{
position: fixed;
bottom: 5px;
width: 90%;
left: 5%;
}

#espacoRodape{
width: 100%;
height: 75px;
display: block;
}

#imgindex{
width: 90%;
margin: 0 auto;
}

.cpanel3 {    
margin-bottom: 0;  
margin-top: 0; 
grid-template-columns: 1fr;  
gap: 0;  
}

.panfiltros { 	  
grid-template-columns: 1fr;	  	
}

#logoSemel{
position: relative;	
width: 100%;
}

main {
margin: 10px auto; 		
}

}