@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body{
    font-family: 'Roboto', sans-serif;
  
    /*
    background-color: #a7a7d2;
    background-size: 20px 20px;
    background-image: repeating-linear-gradient(45deg, #45f7e0 0, #45f7e0 1px, #e5e5f7 0, #e5e5f7 50%);
    */
  
    background-color: #e5e5f7;
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #e5e5f7 10px ), repeating-linear-gradient( #45f7b98a, #45c5f7ed );
      

    /*background-position: 0 0, 10px 10px;*/
    display: flex;
    min-height: 100vh;
}

.rojo {
	color: #FF0000;
	font-style: italic;
}

.azul {
	color: #341995;
	font-style: italic;
  font-size: 16px;
}

.form1_textarea {
	font-family: 'Roboto', sans-serif;
	font-size: .8rem;
	font-weight: 300;
	text-align: right;
	color: #0c60c0a2;
	border: 0;	
	width: 250px;
	resize: none;
}

.form{
    background-color: #fff;
    margin: auto;
    width: 80%;
    max-width: 350px;
    padding: 3.5em 2em;
    border-radius: 10px;
    /*box-shadow: 0 5px 10px -5px rgb(0 0 0 /30%); */
    text-align: center;  
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;    
    font-family: 'Roboto', sans-serif;
}
  

.form__title{
    font-size: 2rem;
    margin-bottom: .5em;    
}

.form__session{
  font-weight: 300;
  font-size: .8rem;
  text-align: right;
  color: #0c60c0a2;
}

.form__paragraph{
    font-weight: 300;
}
  
.form__link{
    font-weight: 400;
    color: #0d3e8385;
}

.form__container{
    margin-top: 2em;
    display: grid; display:ruby-base-container;
    gap: 1.5em;    
}

.form__container1{
  margin-top: .1em;
  display: grid; display:ruby-base-container;
  gap: 1.5em;    
}

.form__group {
  position: relative;
  padding: 15px 0 0;
  --color: #575757df;
  margin-top: 10px;
  width: 50%;
}


/*
.form__group{
    position: fixed;
    --color: #575757df;
}
*/

/*.form__checkbox_table*/ 



.form__field_table {
  width: 100%;
  border: 1; 
  outline: 0;
  text-align: center;
  text-size: 1.3rem;
  font-size: 1.3rem;
  color: #661111;  
  font-family: 'Roboto', sans-serif;	
}

.form__field_table1 {
  width: 100%;
  border: 0; 
  outline: 0;
  text-align: left;
  font-size: 1.0rem;
  color: #661111;  
  font-family: 'Roboto', sans-serif;	
}

.form__field {
  width: 200%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #661111;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
  font-family: 'Roboto', sans-serif;

  &::placeholder {
    color: transparent;
  }

  &:placeholder-shown ~ .form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px;
  }
}

.form__select {
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
}

.form__label {
  width: 200%;
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #9b9b9b;
}

.form__field:focus {
  ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: #11998e;
    font-weight:700;
  }
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #11998e , #38ef7d);
  border-image-slice: 1;
}


/* reset input */
.form__field{
  &:required,&:invalid { box-shadow:none; }
}

.form__submit{
    width: 350;
    background: #3866f2;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    padding: 1em 0;
    border: none;
    border-radius: .5em;
    position:static;
}
  
.form__submit1{
  width: 150;
  background: #3866f2;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  padding: 1em 0;
  border: none;
  border-radius: .5em;
  position:static;
}

.form__submit2{
  width: 112;
  background: #3866f2;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  
  border: 1;
  border-radius: .5em;
  position:static;
}

.form__submit3{
  width: 250;
  background: #3866f2;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1rem;
 
  border: none;
  border-radius: .5em;
 /* position:static;*/
}


.tbl-content{
  height:300px;    
  overflow-x:auto;   
  margin-top: 0px; 
}


td{
  padding: 2px; 
  vertical-align:middle;
  font-weight: 300;
  font-size: 13px;
}




::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}