@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');


*{
    --white:#F7F7F7;
    --blue:#385983;
    --dark-blue:#032A4A;
    --light-blue:#CADAED;
    --cian:#CADAED;
    --gray:#EBEBEB;
    color: var(--blue);
    box-sizing: border-box;
    font-family: 'Nunito';
}

hr {
    margin: 0;
    color: var(--blue);
    border: 0;
    border-top: 1px solid;
    opacity: 100;
    margin-inline: 10%;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

textarea {
    resize: none;
}

.is_closed{
    transition: 0.75s;
    height: auto;
    display: none;
}

.container {
    margin-top: 3%;
    margin-bottom: 3%;
    padding: 0;
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: 0px 3px 8px rgba(37, 105, 193, 0.3);
    /* padding-bottom: 2%; */
    background-color: white;
}

body{
    background-color: #EDF0F3;
}

h2 {
    font-weight: bold;
    margin-bottom: 2%;
}

label {
    font-size: 20px;
}

.input-container h4,label {
    margin-bottom: 10px;
}

.forms {
    width: 35%;
    height: 6%;
}

.input-container {
    padding: 2%;
}

.container .frist_container{
    border-radius: 15px 15px 0px 0px;
}

.input-container input , select{
    border: 0.75px solid var(--blue);
    border-radius: 15px;
    padding: 7px;
    width: 100%;
    background-color: white;
    padding-top: 12px;
    padding-bottom: 12px;
}

.input-container textarea{
    border: 0.75px solid var(--blue);
    border-radius: 15px;
    padding: 7px;
    width: 100%;
    margin-bottom: 2%;
}

.checkbox-custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 100%; 
    border: 2px solid ; 
    margin:  2% 2%; 
}

.checkbox-custom:checked {
    background-color: var(--blue); 
}

.check{
    display: flex;
    align-items: center;
}

.check h4, .check label{
    margin-top: 3%;
}


::placeholder {
    color:var(--light-blue)
}       


.form_container , .form_emp{
    width: 100%;
    background-color: #FFF;
    display: flex;
    position: relative;
    align-self: center;
    justify-content: space-around;
    margin-bottom: 2.5%;
    flex-wrap: wrap;
}  

.form_container input, select{
    margin-bottom: 2%;
}

#modal h3{
    font-weight: bold;
}

.form_container .buttons_termos .buttonTermos{
    width: 5%;
}

.form_container .buttons_termos{
    display: flex;
    align-items: center;
}

.form_container .buttons_termos label{
    font-size: 0.9rem;
}

label:hover{
    cursor: pointer;
}

.btn-add-form{
    background-color: white;
    font-size: 1.2rem;
    border: 0;
    font-weight: bold;
}

.form_tittle{
    width: 100%;
    display: flex;
    position: relative;
    align-self: center;
    margin: 20px 0px;
    justify-content: space-between;
}  

.circulo {
    border-radius: 100%;
    overflow: hidden;
    height: 150px;
    width:  150px;
    background: var(--light-blue);
}

.aling{
    display: flex;
    justify-content: flex-end;
}

.buttons{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 5%;
}


.buttons input{
    margin-top: 5%;
    margin: 10px;
    border: 0;
    padding: 1% 1%;
    background-color: #2569C1;                                                                       
    color: white;
    font-size: 17px;
    font-weight: bold;
    width: 35%;
    border-radius: 5px;
    transition: .2s;
}

.buttons input:hover{
    filter: brightness(1.15);
}

.buttons_admin input{
    width: 20%;
}

.buttons .cancela{
    background-image: linear-gradient(180deg, #F7F7F7, #fff);
    border: 1px solid #CADAED;
    color: #032A4A;
    margin: 10px;
    padding: 1% 1%;
    font-size: 17px;
    font-weight: bold;
    width: 20%;
    height: 70%;

    display: flex;
    align-items: center;
    border-radius: 5px;
    justify-content: center;
    text-decoration: none;
}

.Gambi {
   visibility: hidden;
}

.input-container .cursos{
    margin-top: 5%;
    margin-bottom: 5%;
    width: fit-content;
}

.cursos:hover{
    cursor: pointer;
}

.curso_dist{
    background-color: #F7F7F7;
    position: relative;
    padding-bottom: 20px;
    transition: 2s;
}

#id_curso_destino div label{
    display: flex;
    align-items: center;
    height: min-content;
    height: 50px;
    transition: .5s;
}

.curso_dist input{
    display: inline-block;
    width: 25px;
    margin-right: 1%;
}

.curso_dist p{
    position: absolute;
    bottom: 1%;
    right: 1%;
    background-color: #2569C1;
    color: white;
    border: 0;
    border-radius: 3px;
    padding: 1% 4%;
}

.curso_dist p:hover{
    cursor: pointer;
}



/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  .info{
      width: auto;
      display: flex;
      justify-content: flex-end;
  }

  .info img {
      width: 6%;
      position: right;
      margin-left: auto;
  } 

.remover{
    background-color: transparent;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    border: 0;
}

.remover:hover{
    cursor: pointer;
}

@media screen and (max-width: 993px) {
    .container{
        max-width: 90%;
    }
}

@media screen and (max-width:768px) {
    .container{
        max-width: 100%;
    }
    .input-container{
        width: 100%;
    }
    .forms{
        width: 45%;
    }
    h4, label {
        font-size: 1.2rem;
    }
    .form_container input{
        width: 100%;
    }

    .buttons {
        justify-content: space-between;
    }

    .buttons input{
        width: 50%;
    }

    .buttons .cancela{
        width: 50%;
        height: 70%;
    }
}

@media screen and (max-width: 500px) {
    .form_container{
        flex-direction: column;
    }

    .forms{
        width: 100%;
        padding: 0px 2%;
    }

    h4, label {
        font-size: 1.2rem;
    }

    .forms input{
        width: 100%;
        border-radius: 10px;
    }

    .buttons {
        padding: 0;
    }

    .buttons input{
        width: 50%;
    }

    .buttons .cancela{
        height: 100%;
        padding: 3% 1%; 
    }
    .forms select{
        border-radius: 10px;
    }

    .forms textarea{
        border-radius: 10px;
    }
}

.form-control {
    color: #385983;
    height: 45px;
    border-radius: 5px;
}
.form-control input{
    color: #385983;
    height: 45px;
    border-radius: 5px;
}
.form-control-file {
    height: fit-content;
}