@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kodchasan:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); 
* {
    margin: 0;
    padding: 0;
    border: 0;
}
/*---------------------- MENU----------------------*/

header{  
    height:7vh;     
    background-color: #255B52;
    box-shadow: 0 -2px 6px rgba(0,0,0,.4);
    display:flex;
    justify-content: space-between; 
    padding: 0 5%;
}

.icon{    
    text-align: center;
    font-family: audiowide;
    font-size: 2.4rem;
    color:#04CA23;
    margin:auto 1px;
}

.menu_0800{
    display:flex;
    display:none;
}

.social_network{
    display:flex;
    margin:auto;
}

.pre_menu{   
    text-align:center;    
    justify-content: center;     
    display:flex;     
}

.text_menu, .text_menu_01 {    
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size:1.20rem;  
    margin:auto;
    padding:12px;          
}

.text_menu_01 {    
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size:1.20rem;  
    margin:auto;
    padding:12px;          
}

.text_sub_menu, .text_menu_01{
    font-family:Kodchasan;
    font-weight: 600;   
    border-radius: 6px;      
    color:#FFFFFF; 
    cursor:pointer;
    text-decoration: none; 
}

.text_menu:hover,.text_menu_01:hover {
    background-color: #0CF02F;
    color:#FFFFFF;
    border-radius: 6px;
    transition: 0.2s;
}

.text_menu_01{
    display:none;
}

@media screen and (width  < 800px) {

    .header{
    justify-content: space-evenly;
    height:7%;
    width:100vw;
    padding: 0  5%;
    }
    .icon{
        font-size: 2.4rem;
        margin:auto 1px;
    }
    .menu_0800{
        display:block;
        display:flex;
        
    }
    .pre_menu{
        display:none;
    }
    .text_menu_01{
        display:block;
        margin:auto;
       }
       .text_menu {    
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:0.900rem;  
        margin:auto;
        display:none;
                    
    }
    .text_menu_01 { 
        display:block;
        color:white !important;  
        font-size:1.20rem;  
        margin:auto;
        color:white;
        padding:0;          
    }
    
    .text_menu_01{
        font-family:Kodchasan;
        font-weight: 600;   
        border-radius: 6px;      
        color:#FFFFFF; 
        cursor:pointer;
        text-decoration: none; 
    }
    
    .text_menu {
        position: relative;
        display: inline-block;    
    }
    
    .text_sub_menu {
        text-decoration: none;
        background-color: #04CA23;
        padding: 5px;
        display: block;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
        margin:auto 0;
        
    }
    
    .dropbtn {
        font-family: Kodchasan;
        font-weight: 600;
        font-size:1.20rem;
        border-radius: 6px;
        color: #FFFFFF;
        cursor: pointer;
        text-decoration: none;    
        padding: 5px;  
        margin-left:5px;  
        display: block;
    }
    
    .dropdown-content {
        display:flex;
        display: none;        
        position: absolute;
        color:white;
        gap:15px;        
        background-color: #255B52;
        padding:5px;
    }
    
    .dropdown-content a {
        margin:4px auto;
        color:white;
        font-family: Kodchasan;
        font-weight: 600;
        font-size:1rem;
        background-color: #255B52;
        padding:5px 8px 5px 5px;
        border-radius: 6px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #04CA23;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #04CA23;
    }
        
}
        
@media screen and (width  < 500px) {
        .header{
            padding:0 5%;
            justify-content: space-between;
        }
        .icon{
            font-size: 1.8rem;
        }
       
    
        .text_sub_menu, .dropbtn{
            font-size: 1rem;
        }

        .formulario{
            width:94%;
        }
    
}

/*---------------------- MENU----------------------*/
/*---------------------- MENU----------------------*/
/*---------------------- MENU----------------------*/
/*---------------------- MENU----------------------*/
/*---------------------- MENU----------------------*/
/*---------------------- MENU----------------------*/
/*---------------------- MENU----------------------*/
/*---------------------- MENU----------------------*/


.section_principal{
    width:100%;
    height:88%;
    display:flex;
}

/* styles.css */
.formulario {
    background-color: #255B52;
    color:#f2f2f2;
    border-radius: 5px;
    width:25%;    
    height:35%;
    margin: 5% auto;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }

.octa{    
        text-align: center;
        font-family: audiowide;
        font-size: 2rem;
        color:#04CA23;
        margin:auto 1px;
}
  
  .submit-button{
    margin-left: 30px;
 
  }
/* Layout container */
.guest-layout {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

/* Form group styling */
.form-group {
    display:flex;
    flex-direction: column;
    justify-items: left;
  
}

/* Input label styling */
.input-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: Lexend;
  
  justify-content: left;
  
}

/* Custom input field styling */
.custom-input {
  display: block;
  font-family: Lexend;
  background: #f2f2f2;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  box-sizing: border-box;
}

.custom-input:focus {
  border-color: #04CA23; /* Red border on focus */
  box-shadow: 0 0 0 1px #04CA23; /* Red shadow on focus */
  outline: none;
}

/* Error message styling */
.error-message {
  color: white; /* Red color for error messages */
  margin-top: 0.25rem;
}

/* Checkbox styling */
.custom-checkbox {
  margin-right: 0.5rem;
}

/* Text label styling */
.text-label {
  color: #4a5568; /* Dark gray color for text labels */
}

.text-label{
    color:white;
}
/* Link styling */
.forgot-password {
  color: white; /* Blue color for the link */
  text-decoration: none;
  font-family: Lexend;
}

.forgot-password:hover {
  color: #04CA23; /* Blue color on hover */
}

/* Submit button styling */
.submit-button {
    font-family: "Lexend";
    text-transform: uppercase;
    outline: 0;
    background: #04CA23;
    border-radius: 5px;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}

.submit-button:hover {
  color:#255B52;
  background-color: #f2f2f2; /* Blue background on hover */
}
.form-group {
    display: flex;
    flex-direction: column;
}

.input-label {
    align-self: flex-start; /* Alinha o label à direita */
    margin-bottom: 5px; /* Ajuste o espaçamento conforme necessário */
}

.custom-input {
    margin-bottom: 10px; /* Ajuste o espaçamento conforme necessário */
}

.error-message {
    color: white; /* Estilo para a mensagem de erro */
}



@media screen and (width  < 1550px) {
  

    .formulario{
        width:40%;
        margin:auto;
    }

}

@media screen and (width  < 960px) {
   

    .formulario{
        width:50%;
    }

}

@media screen and (width  < 800px) {
    

    .formulario{
        margin:auto;
        width: 78%;
        height: auto;
        padding: 29px;
    }

    .submit-button{
        padding: 15px 35px;
        margin:20px auto 0;
    }

}


@media screen and (width  < 500px) {
    .formulario{
        padding:15px;
    }
    .form-actions{
        flex-direction: column;
    }

    .submit-button{
        padding: 15px 35px;
        margin:20px auto 0;
    }

}