/*POPUPS======================================================================================*/
  .modalOpen { overflow: hidden; }

  .modal {
    border: none;
    bottom: 0;
    display: none;
    left: 0;
    outline: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
    -webkit-overflow-scrolling: touch;
  }

  .modal.fade .modalDialog {
    -webkit-transition: -webkit-transform .3s ease-out;
         -o-transition:      -o-transform .3s ease-out;
            transition:         transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
        -ms-transform: translate(0, -25%);
         -o-transform: translate(0, -25%);
            transform: translate(0, -25%);
  }

  .modal.in .modalDialog {
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  .modalOpen .modal {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .modalDialog {
    border-radius: 10px;
    margin: 10px;
    max-width: 1200px;
    position: relative;
    width: auto;
  }

  .modalContent {
    border: none;
    outline: 0;
    position: relative;
    -webkit-background-clip: padding-box;
            background-clip: padding-box;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  }

  .modalBackdrop {
    background: var(--backgroundPopupFondo);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .modalBackdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
  }

  .modalBackdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
  }

  .modalHeader {
    background: var(--backgroundPopupHeader);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-height: 30px;
    padding: 5px 15px;
    position: relative;
    width: calc(100% - 30px);
  }

  .modalHeader button.close {
    background: var(--backgroundPopupHeader);
    border: none;
    border-radius: 6px;
    color: var(--colorLetraPopupHeader);
    cursor: pointer;
    float: right;
    font-size: 30px;
    font-weight: 600;
    padding: 0 5px;
  }

  .modalHeader button.close:hover {
    background: var(--backgroundPopupHeaderHover);
    color: var(--colorLetraPopupHeaderHover);
  }

  .modalTitle {
    color: var(--colorLetraPopupHeader);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 2;
    margin: 0;
    text-align: center;
  }

  .modalBody {
    background: var(--backgroundPopupBody);
    color: var(--colorLetraPopupBody);
    float: left;
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
    position: relative;
    text-align: center;
    width: calc(100% - 30px);
  }

  .modalBody.formPopup { background: var(--backgroundDivContenido); }

  .modalBody p.caracteristicaRecarga { margin-bottom: 10px; }

  .modalBody button.pagoRecarga {
    background: var(--backgroundBotonRecargar);
    border: none;
    border-radius: 15px;
    color: var(--colorLetraBotonRecargar);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 10px 0 0;
    min-width: 100px;
    padding: 10px;
  }

  .modalBody button.pagoRecarga:hover {
    background: var(--backgroundBotonRecargarHover);
    color: var(--colorLetraBotonRecargarHover);
  }

  .modalBody .divFormPopup {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

  .modalBody .divFormPopup input {
    background-color: var(--backgroundInput);
    border: var(--bordeInput);
    border-radius: 7px;
    color: var(--colorLetraInput);
    font-size: 16px;
    margin-bottom: 10px;
  }

  .modalBody .divFormPopup span.mostrarPassword {
    color: var(--colorLetraMostrarPassword);
    cursor: pointer;
    float: right;
    font-size: 14px;
    text-decoration: underline;
  }

  .modalBody .divFormPopup span.mostrarPassword:hover { color: var(--colorLetraMostrarPasswordHover); }

  .modalFooter {
    display: flex;
    position: relative;
    width: 100%;
  }

  .modalFooter button {
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    padding: 10px;
  }

  .modalFooter button.popupBtn { width: 100%; }

  .modalFooter button.popupBtnContinuar,
  .modalFooter button.popupBtnCancelar { width: 50%; }

  .modalFooter button.popupBtn,
  .modalFooter button.popupBtnContinuar {
    background: var(--backgroundPopupBtn);
    color: var(--colorLetraPopupBtn);
  }

  .modalFooter button.popupBtnCancelar {
    background: var(--backgroundPopupBtnSecundario);
    color: var(--colorLetraPopupBtnSecundario);
  }

  .modalFooter button.popupBtn:hover,
  .modalFooter button.popupBtnContinuar:hover,
  .modalFooter button.popupBtnCancelar:hover {
    background: var(--backgroundPopupBtnHover);
    color: var(--colorLetraPopupBtnHover);
  }
/*============================================================================================*/

/*OVERLAY=====================================================================================*/
  .messageOverlay {
    background-color: rgba(0, 0, 0, 0.7);
    height: 0;
    left: 0;
    overflow-x: hidden;
    overflow: hidden;
    position: fixed; 
    top: 0;
    transition: 0.5s;
    width: 0;
    z-index: 1050;
  }

  .messageOverlayContent {
    margin-top: 30px; 
    position: relative;
    text-align: center; 
    top: 25%; 
    width: 100%; 
  }

  .titleMessageOverlay {
    color: #FFF;
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0px;
    padding: 10px;
    text-transform: uppercase;
  }

  .texMessageOverlay {
    color: #FFF;
    font-size: 12px;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
  }

  .messageOverlayContent .sending { text-shadow: 0px 0px 16px #1545A6; }
/*============================================================================================*/

@media (min-width: 768px) {
/*POPUPS======================================================================================*/
  .modalDialog {
    width: 600px;
    margin: 30px auto;
  }

  .modalContent {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }

  .modalDialog.modalColSm24 { width: 99%; }
  .modalDialog.modalColSm23 { width: 95.83333334%; }
  .modalDialog.modalColSm22 { width: 91.66666667%; }
  .modalDialog.modalColSm21 { width: 87.5%; }
  .modalDialog.modalColSm20 { width: 83.33333333%; }
  .modalDialog.modalColSm19 { width: 79.16666667%; }
  .modalDialog.modalColSm18 { width: 75%; }
  .modalDialog.modalColSm17 { width: 70.83333334%; }
  .modalDialog.modalColSm16 { width: 66.66666667%; }
  .modalDialog.modalColSm15 { width: 62.5%; }
  .modalDialog.modalColSm14 { width: 58.33333333%; }
  .modalDialog.modalColSm13 { width: 54.16666667%; }
  .modalDialog.modalColSm12 { width: 50%; }
  .modalDialog.modalColSm11 { width: 45.83333334%; }
  .modalDialog.modalColSm10 { width: 41.66666667%; }
  .modalDialog.modalColSm09 { width: 37.5%; }
  .modalDialog.modalColSm08 { width: 33.33333333%; }
  .modalDialog.modalColSm07 { width: 29.16666667%; }
  .modalDialog.modalColSm06 { width: 25%; }
  .modalDialog.modalColSm05 { width: 20.83333334%; }
  .modalDialog.modalColSm04 { width: 16.66666667%; }
  .modalDialog.modalColSm03 { width: 12.5%; }
  .modalDialog.modalColSm02 { width: 8.33333333%; }
  .modalDialog.modalColSm01 { width: 4.16666667%; }
/*============================================================================================*/
}

@media (min-width: 992px) {
/*POPUPS======================================================================================*/
  .modalDialog.modalColMd24 { width: 99%; }
  .modalDialog.modalColMd23 { width: 95.83333334%; }
  .modalDialog.modalColMd22 { width: 91.66666667%; }
  .modalDialog.modalColMd21 { width: 87.5%; }
  .modalDialog.modalColMd20 { width: 83.33333333%; }
  .modalDialog.modalColMd19 { width: 79.16666667%; }
  .modalDialog.modalColMd18 { width: 75%; }
  .modalDialog.modalColMd17 { width: 70.83333334%; }
  .modalDialog.modalColMd16 { width: 66.66666667%; }
  .modalDialog.modalColMd15 { width: 62.5%; }
  .modalDialog.modalColMd14 { width: 58.33333333%; }
  .modalDialog.modalColMd13 { width: 54.16666667%; }
  .modalDialog.modalColMd12 { width: 50%; }
  .modalDialog.modalColMd11 { width: 45.83333334%; }
  .modalDialog.modalColMd10 { width: 41.66666667%; }
  .modalDialog.modalColMd09 { width: 37.5%; }
  .modalDialog.modalColMd08 { width: 33.33333333%; }
  .modalDialog.modalColMd07 { width: 29.16666667%; }
  .modalDialog.modalColMd06 { width: 25%; }
  .modalDialog.modalColMd05 { width: 20.83333334%; }
  .modalDialog.modalColMd04 { width: 16.66666667%; }
  .modalDialog.modalColMd03 { width: 12.5%; }
  .modalDialog.modalColMd02 { width: 8.33333333%; }
  .modalDialog.modalColMd01 { width: 4.16666667%; }
/*============================================================================================*/
}

@media (min-width: 1200px) {
/*POPUPS======================================================================================*/
  .modalDialog.modalColLg24 { width: 99%; }
  .modalDialog.modalColLg23 { width: 95.83333334%; }
  .modalDialog.modalColLg22 { width: 91.66666667%; }
  .modalDialog.modalColLg21 { width: 87.5%; }
  .modalDialog.modalColLg20 { width: 83.33333333%; }
  .modalDialog.modalColLg19 { width: 79.16666667%; }
  .modalDialog.modalColLg18 { width: 75%; }
  .modalDialog.modalColLg17 { width: 70.83333334%; }
  .modalDialog.modalColLg16 { width: 66.66666667%; }
  .modalDialog.modalColLg15 { width: 62.5%; }
  .modalDialog.modalColLg14 { width: 58.33333333%; }
  .modalDialog.modalColLg13 { width: 54.16666667%; }
  .modalDialog.modalColLg12 { width: 50%; }
  .modalDialog.modalColLg11 { width: 45.83333334%; }
  .modalDialog.modalColLg10 { width: 41.66666667%; }
  .modalDialog.modalColLg09 { width: 37.5%; }
  .modalDialog.modalColLg08 { width: 33.33333333%; }
  .modalDialog.modalColLg07 { width: 29.16666667%; }
  .modalDialog.modalColLg06 { width: 25%; }
  .modalDialog.modalColLg05 { width: 20.83333334%; }
  .modalDialog.modalColLg04 { width: 16.66666667%; }
  .modalDialog.modalColLg03 { width: 12.5%; }
  .modalDialog.modalColLg02 { width: 8.33333333%; }
  .modalDialog.modalColLg01 { width: 4.16666667%; }
/*============================================================================================*/
}