/*   Globals */
 select:has(option[value=""]:checked) {
  font-family: 'Montserrat' !important;
  color:#808080 !important;
   font-weight: 500 !important;
   font-size:15px !important;
 
 }
 select {
     background : #fff !important;
 }

 
 input::placeholder, textarea::placeholder {
  font-family: 'Montserrat' !important;
  color:#808080 !important;
  font-weight: 500 !important;
  font-size:15px !important;
 }


 /*  Button Template */
 .containerBTNPrimary__button {
   text-decoration: none !important;
   font-family: 'Roboto';
 }




 /*  MainForm */
 .mainForm__itemContainer {
   height: 100px;
   width:80%;
 }



 .mainForm__item {
   transition: border-bottom 0.5s;
   border: none;
   outline: none;
   border-bottom: 3px solid #e3e3e3;
   margin-left: 50px;
   margin-top: 50px;
   box-sizing: content-box;
   font-size: 16px;
   max-width: 245px;
   width: 100%;
   position: relative;
 }

 .mainForm__itemContainer--width {
   height: 200px;
   width:100%;
 }
 .mainForm__item--width {
   


  resize: none;

}



 .mainForm__item::placeholder {
   font-size: 17px;
   text-align: left;
   font-family: 'Montserrat';
 }

 .mainForm__item {
   font-size: 16px;
   font-family: 'Montserrat';

 }

 .mainForm__item:focus {
   border-bottom: 3px solid var(--color-blue);
 }

 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }








 .titleForm {
   font-size: 2em;
   text-align: center;
   margin-bottom:10px;
   width:100%;
   max-width:600px;
   margin:auto;

 }



 .mainForm__error {
   margin: auto;

   color: #d00;
   font-size: 14px;
   text-align: center;
   position:relative;
   
   
 }



 .mainForm__button {
   box-sizing: content-box;
   width: 94px;
   height: 16px;
   border-radius: 20px;
   display: inline-block;
   padding: 11px 37px;
   margin-top: 20px;
   background: #05a;
   font-size: 20px;
   color: white;
   line-height: 16px;
   outline: none;
   border: none;
   margin-left: 50px;
 }




 
 /*  Button Template */
 .containerBTNPrimary {
   max-width: 170px;
   width: 100%;
   margin: auto;
   padding: 10px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .containerBTNPrimary__button {
  margin-top:20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 40px;
   background: #fff;
   color: #000;
   border: 1px solid #e62e1b !important;
   font-size: 18px;
   font-weight: 500;
   border: none;
   cursor: pointer;
   transition: .3s ease all;
   border-radius: 5px;
   position: relative;
   overflow: hidden;
   padding: 20px;
   margin-top:20px;
 
 }

 .containerBTNPrimary__button span {
   position: relative;
   z-index: 100;
   transition: .3s ease all;
   font-family: 'Roboto';
   letter-spacing: 1px;
 }

 .containerBTNPrimary__button::after {
   content: "";
   position: absolute;
   z-index: 1;
   width: calc(100% + 40px);
   left: calc(-100% - 40px);
   top: 0;
   transition: all 0.3s ease-in-out;
   border-right: 40px solid transparent;
   border-bottom: 40px solid var(--color-red)
 }



 /* Utils */
 .flex-column-align-end {
  display:flex;
  /* align-items: flex-end; */
  flex-direction: column;

 }

 .incorrect {
  border-bottom: 3px solid var(--color-red) !important;
}

.h-25w {
  height: 25%;
}

/* Movil  max 600px*/
@media(max-width:600px) {

    .mainForm__itemContainer--width {
     
      width:80%;
    }
     
   .md-block {
    display:block;
   }
  .md-h-160 {
    height:160px;
  }
   .titleForm {
      margin-bottom:30px;
   }
  
}




 /*  Desktop  min 600px*/
 @media (min-width:600px) {
  .containerBTNPrimary__button {
    margin-left:40px;
  }

   /*  Button Template */
   .containerBTNPrimary__button:hover {
     background: transparent;
     border: 1px solid transparent !important;
     color: #fff !important;
   }
 
 


   .containerBTNPrimary__button:hover::after {
     left: 0;

   }

   /*  MainForm */
   .mainForm__pairContainer {
     display: flex;
     justify-content: center;
     max-width:600px;
     width:100%;
     margin:auto;
   }

   .form__containerButtom {
     width: 548px;
  
   }



   .mainForm__item--width {
   

     width: 90.9%;
     max-width: none;
     resize: none;
     margin:0;
     margin-top:50px;
     margin-left:50px;
     
 
   }



 }

 /*  Movil 599px */
 @media (max-width: 599px) {

   /*  Button Template */
   .containerBTNPrimary__button::after {
     left: 0;
   }
    .mainForm__itemContainer {
      margin:auto;
    }
   .containerBTNPrimary__button {
     color: #fff !important;
     border: 1px solid transparent !important;
     background: transparent;
   }

   /*  MainForm */
   .mainForm__item {
     display: block;
     margin: 0 auto;
   }

   .mainForm__itemContainer {
     padding-top: 10px;
     padding-bottom: 10px;

   }



 }

 @media (max-width:280px) {
   .containerBTNPrimary a {
     padding: 0;
     height: 100%;
   }


   .containerBTNPrimary__button::after {
     border-bottom: 80px solid var(--color-red);
   }

 }






 /*  Loading */
 .loader {
   position: relative;
   border-style: solid;
   box-sizing: border-box;
   border-width: 10px 15px 7.5px 15px;
   border-color: #3760C9 #96DDFC #96DDFC #36BBF7;
   animation: envFloating 1s ease-in infinite alternate;
   left: 10px;
 }

 .loader:after {
   content: "";
   position: absolute;
   right: 62px;
   top: -40px;
   height: 70px;
   width: 50px;
   background-image:
     linear-gradient(#fff 45px, transparent 0),
     linear-gradient(#fff 45px, transparent 0),
     linear-gradient(#fff 45px, transparent 0);
   background-repeat: no-repeat;
   background-size: 30px 4px;
   background-position: 0px 11px, 8px 35px, 0px 60px;
   animation: envDropping 0.75s linear infinite;
 }

 @keyframes envFloating {
   0% {
     transform: translate(-2px, -5px)
   }

   100% {
     transform: translate(0, 5px)
   }
 }

 @keyframes envDropping {
   0% {
     background-position: 100px 11px, 115px 35px, 105px 60px;
     opacity: 1;
   }

   50% {
     background-position: 0px 11px, 20px 35px, 5px 60px;
   }

   60% {
     background-position: -30px 11px, 0px 35px, -10px 60px;
   }

   75%,
   100% {
     background-position: -30px 11px, -30px 35px, -30px 60px;
     opacity: 0;
   }




 }

 /*  Success Message */
 .mainForm__message {
   background: #31a84f;
   color: #fff;
   border-color: #54b268;
   animation: envMessage 2.72s ease infinite;
   transform-origin: 50% 50%;
   -webkit-transition: 0.5s ease-out;
   -moz-transition: 0.5s ease-out;
   -o-transition: 0.5s ease-out;
   transition: 0.5s ease-out;
   text-align: center;
   font-size: 17px;
   padding: 10px;
   margin-bottom: 15px;
   clear: both;
   display: block;
   width: 80%;
   -webkit-border-radius: 6px;
   -moz-border-radis: 6px;
   border-radius: 6px;
   font-weight: bold;
   margin: auto;
 }



 @keyframes envMessage {
   0% {
     transform: translate(0, 0)
   }

   4.41177% {
     transform: translate(5px, 0)
   }

   8.82353% {
     transform: translate(0, 0)
   }

   13.23529% {
     transform: translate(5px, 0)
   }

   17.64706% {
     transform: translate(0, 0)
   }

   22.05882% {
     transform: translate(5px, 0)
   }

   26.47059% {
     transform: translate(0, 0)
   }

   100% {
     transform: translate(0, 0)
   }
 }

 /*   Animations */
 .c-red {
   background: var(--color-red) !important;
 }

 .c-redBackground {
   background: var(--color-red) !important;
   color: #fff !important;
 }