/*cores*/
:root {
  --cor-escura: #283e1f;
  --cor-clara: #5c9046;
  --cor-table: #283e1f;
}


/*styles do form em geral*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  //height: 100vh;  
  /*
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, var(--cor-clara), var(--cor-escura));
  */
}
.container{
	/*trecho movido de body para .container visando corrigir problema do NAV*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, var(--cor-clara), var(--cor-escura));
  
  max-width: 1000px;
  width: 100%;
  background-color: #fff;
  padding: 25px 30px;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.container .title, .container .subtitle{
  font-size: 25px;
  font-weight: 500;
  position: relative;
}
.container .title::before, .container .subtitle::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--cor-clara), #fff);
}
.container .subtitle{
  font-size: 18px;
  font-weight: 500;
  position: relative;
}
.content form .user-details{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
form .user-details .input-box{
  margin-bottom: 15px;
  width: calc(100% / 3 - 20px);
}
form .input-box span.details{
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}
.user-details .input-box input ,select{
  height: 45px;
  width: 100%;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
  border-color: #9b59b6;
}
 form .gender-details .gender-title{
  font-size: 20px;
  font-weight: 500;
 }
 form .category{
   display: flex;
   width: 80%;
   margin: 14px 0 ;
   justify-content: space-between;
 }
 form .category label{
   display: flex;
   align-items: center;
   cursor: pointer;
   margin: 2px;
 }
 form .category label .dot{
  height: 18px;
  width: 18px;
  border-radius: 50%;
  margin-right: 10px;
  background: #d9d9d9;
  border: 5px solid transparent;
  transition: all 0.3s ease;
}
 #dot-1:checked ~ .category label .one,
 #dot-2:checked ~ .category label .two,
 #dot-3:checked ~ .category label .three,
 #dot-4:checked ~ .category label .one,
 #dot-5:checked ~ .category label .two,
 #dot-6:checked ~ .category label .three{
   background: #9b59b6;
   border-color: #d9d9d9;
 }
 form input[type="radio"],  form input[type="checkbox"]{
   display: none;
 }
 form .button, .button_red {
   height: 45px;
   margin: 35px 0;
   //max-width: 300px;
 }
 form .button, .button_red {
   height: 100%;
   width: 100%;
   margin: 10px;
   border-radius: 5px;
   border: none;
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 1px;
   cursor: pointer;
   transition: all 0.3s ease;
  background: linear-gradient(135deg, var(--cor-clara), var(--cor-escura));
 }
 form .button:hover{
  /* transform: scale(0.99); */
  background: linear-gradient(-135deg, var(--cor-clara), var(--cor-escura));
  }
 form .button_red {	 
  background: linear-gradient(135deg, #e67171, #b65959);
 }
  form .button_red:hover{
  /* transform: scale(0.99); */
  background: linear-gradient(-135deg, #e67171, #b65959);
  }
  

@media(max-width: 900px){
	
	form .user-details .input-box{
		margin-bottom: 15px;
		width: calc(100% / 2 - 20px);
	}
}
  
@media(max-width: 584px){
	.container{
		max-width: 100%;
	}
	form .user-details .input-box{
		margin-bottom: 15px;
    width: 100%;
	}
	form .category{
		width: 100%;
	}
	.content form .user-details{
		//max-height: 300px;
		//overflow-y: scroll;
	}
	.user-details::-webkit-scrollbar{
		width: 5px;
	}
}
@media(max-width: 459px){
	.container .content .category{
	flex-direction: column;
}
}

/*style da table*/
.styled-table {
    border-collapse: collapse;
	border: thin solid white;
	border-radius: 10px;
    width: auto;
    //margin: 25px 0;
    margin: auto;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    background-color: var(--cor-table);
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tbody tr {
    border-bottom: thin solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:nth-of-type(odd) {
    background-color: #fff;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--cor-table);
}
.styled-table tbody tr.active-row {
    font-weight: bold;
    color: var(--cor-table);
}

/*styles do loader*/
.myLoader {
  //display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
	/* Modal Content */
.loader-content {
  //background-color: #fefefe;
  background-color: none;
  margin: auto;
  padding: 20px;
  //border: 1px solid #888;
  width: 200px;
  //min-width: 250px;
}

.modal {
  //display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
	/* Modal Content */
.modal-content {
  background-color: #fefefe;
  background-color: none;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 90%;
  max-width: 900px;
  //min-width: 90%;  
}