/*-----------ESTILOS input----------*/

input, textarea {
  width: 100%;
}

input{font-size: 120%;}



input[type=text], input[type=number], input[type=date], input[type=week], input[type=time], input[type=month], input[type=password], select, input select, textarea {
    background: transparent;
    border: 0.5px solid #919191;
    font-size: 14px;
    height: 40px;
    padding: 5px;
    width: 100%;
    border-radius: 0px !important;
}

.caja {
    border: 0.5px solid;
    height: 40px;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.caja input, .caja select{

    padding-right: 40px;
    width: 100%;
    border: none;

}

.caja60{
    height: 60px;
}

.caja60 input, .caja60 select{
    height: 60px;
    font-size: 20px;
    padding-right: 60px;

}

.caja60 span{
    font-size: 30px;
    line-height: 50px;
    height:60px;
}


.caja60 ::-webkit-calendar-picker-indicator { opacity: 0; padding-right: 44px;}



input[type=date], input[type=month], input[type=week], input[type=time] {
    padding-right: 0px;
}

.caja60 input[type=date], .caja60 input[type=month], .caja60 input[type=week], .caja60 input[type=time] {
    padding-right: 0px;
}


input:focus[type=date],input:focus[type=week], input:focus[type=number], input:focus[type=text], input:focus[type=month], input:focus[type=password],  select:focus, textarea:focus, input:focus {
    outline-offset: 2px;
    outline-offset: 2px;
    box-shadow: none;
    border-color: inherit;
    outline: 0;
}
select,
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=text]::-webkit-inner-spin-button,
input[type=text]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=week]::-webkit-inner-spin-button,
input[type=week]::-webkit-outer-spin-button,
input[type=password]::-webkit-inner-spin-button,
input[type=password]::-webkit-outer-spin-button,
input[type=month]::-webkit-inner-spin-button,
input[type=month]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

::-webkit-datetime-edit-text { color: inherit; }
::-webkit-datetime-edit-month-field { color: inherit; }
::-webkit-datetime-edit-day-field { color: inherit; }
::-webkit-datetime-edit-year-field { color: inherit; }

::-webkit-inner-spin-button { -webkit-appearance: none; }
::-webkit-outer-spin-button { -webkit-appearance: none;}
::-webkit-calendar-picker-indicator { opacity: 0; padding-right: 11px;}
.caja60 ::-webkit-calendar-picker-indicator { opacity: 0; padding-right: 11px;}


option{
    background-color: grey;
}


.limpiaInput{
    background-color: #ffffff00;
    border: 0;
    box-shadow: none;
    display: block;
    width: 100%;
    height: auto !important;
    min-height: auto !important;
    padding: 0px !important;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    border: none;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.limpiaInput:focus {
  border-color: transparent;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* <div class="cajaFecha"><input><span class="icon-fecha formIcon"></span></div> */

.formIcon{
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 0px 7px;
    width: auto;
    line-height: 30px;
    font-size: 18px;
    pointer-events: none;
    z-index: 99;
/*    border-left: 1px solid;*/
margin: 4px 0px;
}





.formIconR {
    position: absolute;
    right: 0px;
    top: 0px;
    color: #8c8c8c;
    padding: 0px 7px;
    width: auto;
    line-height: 30px;
    font-size: 18px;
    pointer-events: none;
    z-index: 99;
    border-left: 1px solid #8c8c8c;
    margin: 4px 0px;
    background-color: white;
}

.flechaDown{
  width: 15px;
  height: 3px;
  position: relative;
  transform: rotate(225deg);
}


.flechaDown: before{
 content: "";
 position: absolute;
 left: 0;
 width: 3px;
 height: 15px;
 background-color: inherit;
}

.flechaLeft{
    width: 15px;
    height: 3px;
    position: relative;
    transform: rotate(315deg);
}


.flechaLeft: before{
   content: "";
   position: absolute;
   left: 0;
   width: 3px;
   height: 15px;
   background-color: inherit;
}

.cajaFlecha{

  position: absolute;
  top: 4px;
  right: 0px;
  border-left: 1px solid;
  width: 40px;
  height: 30px;
  background-color: white;
  pointer-events: none;

}





/*-----------ESTILOS CHECK----------*/


/** Clases de estilo para los checkbox */

check input:checked + .box { background-color: #b3ffb7;}
check input:checked + .boxNoOk { background-color: #b3ffb7;}
input[type="checkbox"]:checked + label { background-color: #b3ffb7; }
input[type="checkbox"] { display:none; }


check input:checked + .box { background-color: #b3ffb7;}


.checkOk{
    color: #70ea41;
    display: contents;}
    .checkOk label{margin-bottom: 0px;}

    .checkcaja{display: grid;}

    .checkcaja label{margin-bottom: 0px;}

    .checkRRG{
      width: 24px;
      min-width: 24px;
      height: 24px;
      content: '';
      position: relative;
      transform-origin: center center;
      transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
      border: 0.5px solid #dedede;
      overflow: visible;
      cursor: pointer;
      margin-bottom: 0px;
  }

  .check {
    width: 24px;
    min-width: 21px;
    height: 21px;
    content: '';
    position: relative;
    transform-origin: center center;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border: 0.5px solid #dedede;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 0px;
}

.box {
    width: 110%;
    height: 100%;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px rgba(0, 0, 0, 0.2);
}

.boxApagado {
    width: 110%;
    height: 100%;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px rgba(0, 0, 0, 0.2);
}


/** Cuando esta Checked se sube el div box */
.checkRRG input:checked + .boxRRG span {
    top: -3px;
    opacity: 1;
    font-size: 130%;
}

.check input:checked + .box:after {
    top: -4px;

}

.check input:checked + .boxApagado:after {
    top: -4px;

}

.check input:checked + .boxNoOk:after {
    top: 0px;
}

.box:after {
    width: 107%;
    height: 50%;
    content: '';
    position: absolute;
    border-left: 4px solid;
    border-bottom: 4px solid;
    border-color: #4F21FF;
    transform: rotate(-45deg) translate3d(0, 0, 0);
    transform-origin: center center;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    top: 200%;
    bottom: 5%;
    margin: auto;
    z-index: 9999;
}


.boxApagado:after {
    width: 107%;
    height: 50%;
    content: '';
    position: absolute;
    border-left: 4px solid;
    border-bottom: 4px solid;
    border-color: #a2a2a2;
    transform: rotate(-45deg) translate3d(0, 0, 0);
    transform-origin: center center;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    top: 200%;
    bottom: 5%;
    margin: auto;
    z-index: 9999;
}

.checkOpcion{
    display: inline-flex;
    /*min-width: 120px;*/
    min-height: 40px;
    padding: 4px 1px;
}
.checkOpcion span {
    font-family:RenaultLife-Regular;
    padding-left: 7px;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    font-weight: normal;
}

.boxNoOk {
    width: 110%;
    height: 100%;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px rgba(0, 0, 0, 0.2);
}

.boxNoOk:after{
    content: '\274c';
    position: absolute;
    color: #ff0000;
    font-size: 85%;
    transform-origin: center center;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    top: 200%;
    margin: auto;
    z-index: 9999;

}

.boxRRG {
    width: 100%;
    height: 100%;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border: 2px solid transparent;
    cursor: pointer;
}


.boxRRG span {
    position: absolute;
    color: #4F21FF;
    transition: all 0.3s;
    top: 10%;
    bottom: 29%;
    left: -8%;
    margin: auto;
    z-index: 9999;
    opacity: 0;
}


/** Fin de las clases de para los checkbox*/


/** Clases de estilo para los radio */

check input:checked + .radioBox { background-color: #b3ffb7;}
input[type="radio"]:checked + label { background-color: #b3ffb7; }
input[type="radio"] { display:none; }

.radioOpcion{
    display: inline-flex;
    min-width: 120px;
    min-height: 40px;
    padding: 4px 1px;
}
.radioOpcion span {
    font-family:RenaultLife-Regular;
    padding-left: 3px;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    font-weight: normal;
}
.radio {
    width: 27px;
    min-width: 27px;
    height: 27px;
    content: '';
    position: relative;
    transform-origin: center center;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border: 3px solid #dedede;
    background-color: #dedede;
    overflow: hidden;
    cursor: pointer;
    margin-top: 0px;
    margin-bottom: 0px;
}
.radioBox {
    width: 100%;
    height: 100%;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
}



/** Cuando esta Checked se sube el div box */
.check input:checked + .radioBox:after {
    top: 0px;
    border-radius: 66px;

}
.radioBox:after {
    width: 70%;
    height: 70%;
    content: '';
    position: absolute;
    border: 7px solid;
    border-color: #4F21FF;
    background-color: #4F21FF;
    border-radius: 0px;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    top: 180%;
    bottom: 0%;
    left: 17%;
    margin: auto;
    z-index: 9999;
}




/*-----------FIN ESTILOS CHECK----------*/


/*---------------------------------------------BOOTSTRAP--------------------------------------*/

.form-control {
    height: 40px;
    border-radius: 0px;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.form-control:focus {
  border-color: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*---------------------------------------------INOUT GOOGLE--------------------------------------*/


.inputBordeB:focus {
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%) !important;
    border-bottom: 1px solid #4F21FF !important;
    outline: 0 !important;

}
.inputBordeB{
    font-size:15px;
    padding:0px !important;
    display:block;
    border:none !important;
    border-bottom:1px solid #ededed !important;
}



.inputBordeB:focus ~ .inputNombre,.inputBordeB:valid ~ .inputNombre,.inputBordeB:read-only ~ .inputNombre   {
    top:-15px;
    font-size:10px;
    color:#9b9898;
}

.inputNombre{
    color:#999;
    font-size:15px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    top:10px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

.inputBordeB:valid{
    border-bottom: 1px solid #4F21FF !important;

}

.inputBordeB:read-only{
    background-color: transparent;

}