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%;
    margin: 0;
    padding: 0;
    color: #22314a; /* Azul substituindo o verde */
    height: 100%;
    min-height: 100%;
    font-size: 15pt;
    background-color: #f0f0f0;    
}

*, *: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%;
}

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

.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;
}

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

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

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

.btnpreto:hover {
background-color: #404040; /* 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;
	border-radius: 12px;
}

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

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

button:disabled:hover{
background-color: #d3d3d3;
}

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

#copyBtn2 {
            display: inline-block;
            border: 0;
            outline: 0;
            cursor: pointer;
            background: linear-gradient(90deg, #2f55b4, #0072ff);
            color: #fff;           
            padding: 10px 14px;
            border-radius: 12px;
            text-decoration: none;
        }

#copyBtn2:hover {
    background: #2f55b4; 
}

#copyBtn2:disabled:hover {
    background: #d3d3d3;
}

.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 {
width: 100%;
top: 0;
left: 0;   
background-color: #22314a;
color: white;
padding: 10px;
text-align: center;
z-index: 500;
border-bottom: 1px solid #ccc; 
}

main {
width: 100%;
height: auto;
max-width: 900px;
margin: 0 auto;  
padding: 10px;			
}

#mainIndexfixo{
	margin-top: 80px; 
}

#hederfixo{
	position: fixed; 
}

#logoVidnet{
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;
}

section:hover {
        transform: translateY(-3px);       
    }
	
.cpanel {	 
display: grid;
width: 100%; 
margin: 0 auto;
margin-bottom: 2px;  
grid-template-columns: 1fr 1fr 1fr;  
gap: 5px;  
}

.cpanel img {
	width: 30%;
	margin: 0 auto;
}

#panelCompartilhar{
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 2fr;  
gap: 5px;  
}

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

#botoesHeader{
	position: relative;
	width: 20%;
	float: right;
}

.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;	 
}	

/* 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 */
}

/* 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;
}

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

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

.linhatransp{
	  display: block;
      visibility: hidden;
      height: 0;     
	}
	
.linhadecorada{
	display: block;
	 width: 100%;
    height: 2.5px;
    border: 0px;
    background: -webkit-linear-gradient(left, rgba(153, 187, 255, 0) 0%, rgba(153, 187, 255, 0.8) 20%, rgba(153, 187, 255, 1) 53%, rgba(153, 187, 255, 0.8) 79%, rgba(153, 187, 255, 0) 100%);
    background: linear-gradient(left, rgba(153, 187, 255, 0) 0%, rgba(153, 187, 255, 0.8) 20%, rgba(153, 187, 255, 1) 53%, rgba(153, 187, 255, 0.8) 79%, rgba(153, 187, 255, 0) 100%); 
}

#linha_sobrenos{
	display: none;
}

footer {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;	
	font-size: 12pt;
}

footer a:hover{
	color: blue;
	text-decoration: none;
}

footer a{	
	text-decoration: underline;
}

a {
	text-decoration: none;
}

.lefTermos{
	text-align: left;
}
.error {
        background-color: #f8d7da; /* Fundo vermelho claro */
        color: #721c24; /* Texto vermelho escuro */
        border: 1px solid #f5c6cb; /* Borda vermelha clara */
        padding: 15px; /* Espaçamento interno */
        border-radius: 5px; /* Bordas arredondadas */
        font-weight: bold; /* Texto em negrito */
        margin: 10px 0; /* Margem superior e inferior */
        display: flex; /* Usado para alinhar ícones, se necessário */
        align-items: center; /* Alinhamento vertical */
    }

    .error::before {
        content: "⚠️"; /* Ícone de aviso */
        margin-right: 10px; /* Espaçamento à direita do ícone */
    }
	
.topbar{
	  position: relative;
      display:flex;
	  align-items:center;
	  justify-content:space-between;
	  gap:12px;
	  flex-wrap:wrap
    }
	
.nav{
	position: absolute;
	margin-top: -140px;
	right: 2px;
}

.nav a{color:#fff;
text-decoration:none;
font-weight:700;
margin-left:12px;
font-size: 11pt;
opacity:.95}

.nav a:hover{opacity:1}


.welcome{
	margin-top:16px;
	background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.15);
	padding:14px;
	border-radius:14px;
	display:flex;gap:14px;
	align-items:center;
	flex-wrap:wrap;
	width: 100%;
	height: auto;
	max-width: 900px;
	margin: 0 auto;
    }
	
.hello{font-size:18px;margin:0}
.hello small{display:block;color:#ffe7e7;font-weight:500}

.icon{
      width:50px;height:50px;border-radius:12px;
      background: #22314a;
      display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800;flex:0 0 50px
    }
	
.card{
  background:rgb(255,255,255);
	border:1px solid rgba(28,28,28,.15);
	padding:10px;
	border-radius: 10px;
	display:flex;
	gap:10px;
	align-items:center;
	flex-wrap:wrap;
	width: 100%;
	height: auto;
	margin: 0 auto;	
}
.value{font-size:28px;font-weight:800}

#container_link_indicacao{	
	user-select: none;       /* Bloqueia seleção */
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge antigo */
}

/* Modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0; top: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.6);
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        max-width: 450px;
        width: 90%;
        text-align: center;
        animation: fadeIn 0.3s;
    }
    .modal-content h3 {
        margin-bottom: 20px;
    }
    .close {
        color: #aaa;
        float: right;
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
    }
    .close:hover {
        color: #000;
    }
    .compartilhar-opcoes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    .compartilhar-opcoes a {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80px;
        text-decoration: none;
        color: #333;
        font-size: 12px;
    }
    .compartilhar-opcoes img {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        transition: transform 0.2s;
    }
    .compartilhar-opcoes img:hover {
        transform: scale(1.1);
    }
	

    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }

@media only screen and (max-width: 768px) {
	
#panvideo{
		margin-left: 20px; 
		margin-right: 20px; 
		margin-top: 20px; 		
	}

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

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

#alinhamento{
text-align: center;
}

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

#panelCompartilhar{
grid-template-columns: 1fr; 
gap: 5px;	
}

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

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

#logoVidnet{
position: relative;	
width: 70%;
margin: 0 auto;
}

#botoesHeader{
	position: relative;
	width: 100%;
	float: left;
}

#mainIndexfixo{
	margin-top: 155px; 
}

.nav{
	position: relative;
	margin: 10px auto;

}
}