/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------                        MODAL          ---------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.fondo_modal {
    
    background:                 rgba(0,0,0,.6);
    display:                    none;
    height:                     100%;
    left:                       0;
    overflow:                   auto;
    position:                   fixed;
    top:                        0;
    width:                      100%;
    z-index:                    9999999;
    
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------                        MODAL          ---------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.modal {
    
    display:                    none;
    background:                 white;
    border-radius:              10px;
    font-family:                sans-serif;
    left:                       50%;
    max-height:                 80vh;
    max-width:                  800px;
    overflow:                   auto;
    position:                   fixed;
    top:                        50%;
    transform:                  translate(-50% , -50%);
    -webkit-transform:          translate(-50% , -50%);
    -moz-transform:             translate(-50% , -50%);
    -ms-transform:              translate(-50% , -50%);
    -o-transform:               translate(-50% , -50%);
    width:                      95%;
    z-index:                    9999999;
    
}
.modal .cerrar_modal {
    
    color:                      black;
    cursor:                     pointer;
    font-size:                  1.5em;
    position:                   absolute;
    right:                      .5em;
    top:                        .5em;
    
}
.modal .titulo {
    
    box-sizing:                 border-box;
    color:                      black;
    font-size:                  1.2em;
    padding:                    1em 0;
    text-align:                 center;
    width:                      100%;
    
}
.modal .titulo label {
    
    background:                 #502763;
    color:                      white;
    cursor:                     pointer;
    display:                    inline-block;
    font-family:                sans-serif;
    font-size:                  .9em;
    margin-top:                 .25em;
    padding:                    0.25em 0.5em;
    
}
.modal .titulo input {
    
    height:                     .1px;
    width:                      .1px;
    
}
.modal .contenido {
    
    box-sizing:                 border-box;
    margin:                     auto;
    width:                      95%;
    
}
.modal .contenido h2 {
    
    margin-bottom:              0;
    text-align:                 center;
    
}
.modal .contenido .pasos_titulo {
    
    box-sizing:                 border-box;
    display:                    flex;
    margin:                     auto;
    transition:                 .5;
    -webkit-transition:         .5;
    -moz-transition:            .5;
    -o-transition:              .5;
    width:                      90%;
    
}
.modal .contenido .pasos_titulo div {
    
    box-sizing:                 border-box;
    font-size:                  1em;
    padding:                    .5em 0;
    text-align:                 center;
    width:                      25%;
    
}
.modal .contenido .pasos_titulo div:nth-child(1){
    
    background:                 #23e6e8;
    transform:                  skew(-20deg);
    
}
.modal .contenido .pasos_titulo div:nth-child(2){
    
    background:                 #502763;
    color:                      white;
    transform:                  skew(-20deg);
    -webkit-transform:          skew(-20deg);
    -moz-transform:             skew(-20deg);
    -o-transform:               skew(-20deg);
    -ms-transform:              skew(-20deg);
    
}
.modal .contenido .pasos_titulo div:nth-child(3){
    
    background:                 #502763;
    color:                      white;
    transform:                  skew(-20deg);
    -webkit-transform:          skew(-20deg);
    -moz-transform:             skew(-20deg);
    -o-transform:               skew(-20deg);
    -ms-transform:              skew(-20deg);
    
}
.modal .contenido .pasos_titulo div:nth-child(4){
    
    background:                 #502763;
    color:                      white;
    transform:                  skew(-20deg);
    -webkit-transform:          skew(-20deg);
    -moz-transform:             skew(-20deg);
    -o-transform:               skew(-20deg);
    -ms-transform:              skew(-20deg);
    
}
.modal .contenido .pasos {
    
    display:                    none;
    
}
.modal .contenido .pasos:nth-child(1){
    
    display:                    block;
    
}
.modal .contenido .renglon {
    
    margin:                     auto;
    max-width:                  100%;
    text-align:                 left;
    
}
.modal .contenido .renglon .renglon_direcciones {
    
    align-items:                center;
    border-top:                 1px solid #c0c0c0;
    box-sizing:                 border-box;
    display:                    flex;
    justify-content:            space-between;
    margin:                     0 auto;
    max-width:                  100%;
    padding:                    1em 0;
    position:                   relative;
    
}
.modal .contenido .renglon .renglon_direcciones:first-child {
    
    margin-top:                 2em;
    
}
.modal .contenido .renglon .renglon_direcciones:last-child {
    
    border-bottom:              1px solid #c0c0c0;
    margin-bottom:              2em;
    
}
.modal .contenido .renglon .renglon_direcciones div {
    
    position:                   relative;
    
}
.modal .contenido .renglon .renglon_direcciones div .boton {
    
    background:                 inherit;
    border-radius:              50%;
    cursor:                     pointer;
    display:                    inline-block;
    padding:                    1em;
    
}
.modal .contenido .renglon .renglon_direcciones div .boton:hover {
    
    background:                 #c0c0c0;
    
}
.modal .contenido .renglon .renglon_direcciones div .subtitulo {
    
    color:                      #515151;
    display:                    block;
    font-size:                  .8em;
    margin-top:                 .25em;
    
}
.modal .contenido .renglon .renglon_direcciones div label {
    
    cursor:                     pointer;
    display:                    block;
    font-size:                  22px;
    margin-bottom:              12px;
    padding-left:               35px;
    position:                   relative;
  
}
.modal .contenido .renglon .renglon_direcciones div label input {
    
  cursor:                       pointer;
  opacity:                      0;
  position:                     absolute;
  
}
.modal .contenido .renglon .renglon_direcciones div label .checkmark {
    
    background-color:           #eee;
    border-radius:              50%;
    height:                     25px;
    left:                       0;
    position:                   absolute;
    top:                        0;
    width:                      25px;
    
}
.modal .contenido .renglon .renglon_direcciones div label:hover input ~ .checkmark {
    
    background-color:           #ccc;
  
}
.modal .contenido .renglon .renglon_direcciones div label input:checked ~ .checkmark {
    
    background-color:           #502763;
    
}
.modal .contenido .renglon .renglon_direcciones div .checkmark:after {
    
    content:                    "";
    display:                    none;
    position:                   absolute;
    
}
.modal .contenido .renglon .renglon_direcciones div label input:checked ~ .checkmark:after {
    
    display:                    block;
    
}
.modal .contenido .renglon .renglon_direcciones div label .checkmark:after {
    
    background:                 white;
    border-radius:              50%;
    height:                     8px;
    left:                       9px;
    top:                        9px;
    width:                      8px;
    
}
.modal .contenido .renglon label {
    
    box-sizing:                 border-box;
    display:                    block;
    font-size:                  1em;
    padding:                    .5em 0 0;
    
}
.modal .contenido .renglon label span {
    
    font-size:                  .8em;
    
}
.modal .contenido .renglon input {
    
    border:                     1px solid #f0f0f0;
    box-sizing:                 border-box;
    display:                    block;
    font-size:                  1em;
    padding:                    .5em .25em;
    width:                      100%;
    
}
.modal .contenido .renglon select {
    
    appearance:                 none;
    -webkit-appearance:         none;
    border:                     1px solid #f0f0f0;
    box-sizing:                 border-box;
    cursor:                     pointer;
    display:                    block;
    font-size:                  1em;
    padding:                    .5em .25em;
    width:                      100%;
    
}
.modal .contenido .renglon button {
    
    background:                 #502763;
    border:                     none;
    color:                      white;
    font-size:                  1em;
    margin:                     1em auto;
    outline:                    none;
    padding:                    1em 0;
    width:                      100%;
    
}
.modal .contenido .renglon p {
    
    cursor:                     pointer;
    font-size:                  .8em;
    margin:                     .5em 0;
    text-align:                 center;
    text-decoration:            underline;
    
}
.modal .contenido .renglon input[type="file"] {
    
    height:                     0.1px;
    opacity:                    0;
    overflow:                   hidden;
    position:                   absolute;
    text-align:                 center;
    width:                      0.1px;
    z-index:                    -1;
    
}
.modal .contenido .renglon label[for="archivos"] {
    
    background-color:           #502763;
    box-sizing:                 border-box;
    color:                      #fff;
    cursor:                     pointer;
    display:                    inline-block;
    font-size:                  .8em;
    padding:                    .5em 5px !important;
    text-align:                 center;
    text-transform:             uppercase;
    transition:                 all .5s;
    width:                      fit-content;
    width:                      100%;
    
}
.modal .contenido .renglon .codigo {
    
    align-items:                center;
    display:                    flex;
    flex-wrap:                  nowrap;
    justify-content:            center;
    margin:                     auto;
    width:                      95%;
    
}
.modal .contenido .renglon .codigo input {
    
    border:                     1px solid #515151;
    box-sizing:                 border-box;
    font-size:                  12px;
    height:                     36px;
    margin:                     0 .5em;
    padding:                    12px;
    width:                      36px;
    
}




/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------                BOTON ON_OFF                ------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.modal .contenido .renglon .on_off {
    
    margin-left:                auto;
    width:                      80px;
    
}
.modal .contenido .renglon .on_off .switch {
    
    float:                      right;
    height:                     34px;
    margin-left:                0 !important;
    position:                   relative;
    width:                      60px !important;
  
}
.modal .contenido .renglon .on_off .switch input {
    
    height:                     0;
    opacity:                    0;
    width:                      0;
    
}
.modal .contenido .renglon .on_off .switch .slider {
    
    background-color:           #c0c0c0;
    bottom:                     0;
    cursor:                     pointer;
    left:                       0;
    position:                   absolute;
    right:                      0;
    top:                        0;
    -o-transition:              .4s;
    -moz-transition:            .4s;
    -webkit-transition:         .4s;
    transition:                 .4s;
  
}
.modal .contenido .renglon .on_off .switch .slider:before {
    
    background-color:           white;
    bottom:                     4px;
    content:                    "";
    height:                     26px;
    left:                       4px;
    position:                   absolute;
    -o-transition:              .4s;
    -moz-transition:            .4s;
    -webkit-transition:         .4s;
    transition:                 .4s;
    width:                      26px;
  
}
.modal .contenido .renglon .on_off .switch input:checked + .slider {
    
    background-color:           green;
  
}
.modal .contenido .renglon .on_off .switch input:focus + .slider {
    
    box-shadow:                 0 0 1px #2196F3;
  
}
.modal .contenido .renglon .on_off .switch input:checked + .slider:before {
    
    -webkit-transform:          translateX(26px);
    -ms-transform:              translateX(26px);
    -moz-transform:             translateX(26px);
    -o-transform:               translateX(26px);
    transform:                  translateX(26px);
  
}
.modal .contenido .renglon .on_off .switch .slider.round {
    
    border-radius:              34px;
  
}
.modal .contenido .renglon .on_off .switch .slider.round:before {
    
    border-radius:              50%;
  
}