@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCs16Ew-.ttf)
    format("truetype");
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf)
    format("truetype");
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Ew-.ttf)
    format("truetype");
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf)
    format("truetype");
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf)
    format("truetype");
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvr70w-.ttf)
    format("truetype");
}
@keyframes myFadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.icon {
  height: 100%;
  width: 31px;
  background-repeat: no-repeat;
  background-size: 22px;
  background-position-x: 5px;
  background-position-y: center;
  padding: 4px;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
}
::placeholder {
  color: var(--medium_grey);
  font-weight: 300;
}
:root {
  --white: #fff;
  --black: #000;
  --light-blue: #10b7eb;
  --blue: #14387f;
  --light_green: #69b455;
  --green: #048c4b;
  --light_grey: #dbdbdb;
  --grey: #a5a5a5;
  --medium_grey: #7c7c7b;
  --dark_gray: #575756;
  --sm: 1.3rem;
  --md: 1.6rem;
  --lg: 2rem;
  --xlg: 5rem;
  --xmd: 1.7rem;
}
* {
  outline: 0;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
}
html {
  box-sizing: border-box;
}
*,
:after,
:before {
  box-sizing: inherit;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
}
:root {
  --white: #fff;
  --black: #000;
  --light-blue: #10b7eb;
  --blue: #14387f;
  --light_green: #69b455;
  --green: #048c4b;
  --light_grey: #dbdbdb;
  --medium_grey: #7c7c7b;
  --dark_gray: #575756;
  --sm: 1.3rem;
  --md: 1.6rem;
  --lg: 2rem;
  --xlg: 5rem;
  --xmd: 1.7rem;
}
body {
  font-family: Montserrat, sans-serif;
  margin: 0;
  background-color: #efefef;
  overflow-x: hidden;
}
.fondo_pasarela {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  margin: 0 auto;
}

.notCheck {
    color: red!important
}

.invalid {
    border: 1px solid red!important
}

.politicaDatos {
    cursor: pointer;
    color: var(--light-blue)
}

.politicaDatos:hover {
    color: var(--blue)
}

.container-modal-button img {
    width: 20px!important
}

dialog[open] {
    animation: myFadeIn .2s ease normal
}

@keyframes myFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.container-modal2 {
    background: linear-gradient(155deg,rgb(38,79,145) 50%,rgb(29,60,135) 50%);
    border: none;
    border-radius: 10px;
    box-shadow: 5px 5px 20px #00000098
}

.modal-info2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    max-width: 38rem;
    min-width: 30rem
}

.modal-info2 h1 {
    font-family: Montserrat,sans-serif;
    font-size: var(--lg);
    font-weight: 700;
    color: var(--white);
    text-align: center
}

.modal-info2 p {
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    font-weight: 400;
    color: var(--white);
    text-align: center;
    padding: 10px 45px;
    line-height: 23px
}

.modal-info2 img {
    width: 90px!important;
    margin-top: 15px
}

.container-modal-button2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px
}

.button-cerrar-modal2 {
    display: flex;
    justify-content: center;
    background: var(--white);
    border: none;
    border-radius: 20px;
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    font-weight: 600;
    color: var(--dark_gray);
    width: 40%;
    padding: 10px 0;
    margin: 20px 0;
    gap: 8px;
    cursor: pointer
}

.button-salir-modal2 {
    display: flex;
    justify-content: center;
    background: linear-gradient(90deg,rgb(153,10,10),rgb(227,6,19));
    border: none;
    border-radius: 20px;
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    font-weight: 400;
    color: var(--white);
    width: 40%;
    padding: 10px 0;
    margin: 20px 0;
    gap: 8px;
    cursor: pointer
}

.button-salir-modal2:hover,.button-cerrar-modal2:hover {
    scale: 1.1
}

.container-modal-button2 img {
    width: 20px
}

.bg-light_grey {
    background-color: transparent
}

.bg-light_grey_Selected {
    background-color: var(--light_grey)
}

.txtEscogeMedio {
    margin: 0 auto
}

.back-button {
    background-color: #474747;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px;
    transition: background-color .3s ease-out;
    margin: 0 10px;
    border-radius: 15%
}

.back-button:hover {
    background-color: #757575
}

.back-button svg {
    width: 20px;
    height: 20px;
    fill: #fff
}

.btnback span {
    font-size: 1.5rem;
    color: #000;
    font-weight: 700
}

.medios-pay {
    border: 1px solid;
    border-color: var(--medium_grey);
    border-radius: 5px;
    display: grid;
    padding: 10px
}

.medios-pay-title {
    font-family: Montserrat,sans-serif;
    font-size: var(--lg);
    color: var(--blue);
    font-weight: 700;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px
}

.medios-pay-select {
    display: flex;
    align-items: center;
    border: 1px solid;
    border-color: var(--dark_gray);
    border-radius: 5px;
    justify-content: center;
    gap: 1rem;
    background-color: #fff0;
    height: 8rem
}

.medios-pay-select:hover {
    background-color: #d1d1d1;
    cursor: pointer
}

.medios-pay-select.active {
    background-color: #d1d1d1;
    border: none
}

.medios-pay-select img {
    width: 6rem;
    height: 5rem;
    object-fit: contain;
    padding-left: 10px
}

.medios-pay-select>div:first-child {
    display: flex
}

.containerchangeMedio {
    display: flex;
    justify-content: center
}

.containerchangeMedio button {
    padding: 5px 15px;
    background-color: #fff;
    border-radius: 7px;
    border: 2px solid #E6007E;
    color: #e6007e;
    font-size: 1.5rem;
    cursor: pointer
}

.cointainer-mediosPays p {
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    font-weight: 600
}

.cointainer-mediosPays {
    height: 100%;
    gap: 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(146px,1fr));
    grid-gap: 8px
}

.container-pay-buttom {
    margin-top: auto;
    padding-top: 20px;
    border-radius: 5px;
    display: grid;
    align-items: end
}

.container-select-pay {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--medium_grey);
    padding: 10px;
    border-radius: 5px
}

@media (max-width: 350px) {
    .medios-pay-title {
        font-size:var(--md)
    }

    .select-pay-select p {
        font-size: var(--sm)
    }
}

#ico-name-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M25.7,13.12v5.67a2.14,2.14,0,0,1-2.15,2.15H2.83A2.15,2.15,0,0,1,.68,18.8V3.24A2.52,2.52,0,0,1,2.84.7h20.7A2.16,2.16,0,0,1,25.7,2.85Z'/%3e%3ccircle%20class='cls-2'%20cx='8.33'%20cy='7.25'%20r='1.86'/%3e%3ccircle%20class='cls-2'%20cx='8.33'%20cy='8.47'%20r='5.41'/%3e%3cpath%20class='cls-2'%20d='M5.39,13a3.16,3.16,0,0,1,5.88,0'/%3e%3cline%20class='cls-2'%20x1='5.44'%20y1='16.84'%20x2='20.36'%20y2='16.84'/%3e%3c/svg%3e")
}

#ico-number-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M25.7,13.12v5.67a2.14,2.14,0,0,1-2.14,2.15H2.83A2.14,2.14,0,0,1,.69,18.8V3.24A2.52,2.52,0,0,1,2.84.7H23.55A2.15,2.15,0,0,1,25.7,2.85Z'/%3e%3cpath%20class='cls-2'%20d='M13.86,6.91a1,1,0,0,1,.31.66.94.94,0,0,1-.31.66'/%3e%3cpath%20class='cls-2'%20d='M14.69,5.85a2.34,2.34,0,0,1,0,3.34'/%3e%3cpath%20class='cls-2'%20d='M15.78,4.93a3.46,3.46,0,0,1,1,2.55,3.59,3.59,0,0,1-1,2.54'/%3e%3cpath%20class='cls-2'%20d='M16.66,4.06a4.89,4.89,0,0,1,0,6.93'/%3e%3cpath%20class='cls-2'%20d='M10.49,10.6h-6A1.13,1.13,0,0,1,3.37,9.5V5.68a1.12,1.12,0,0,1,1.14-1.1h6a1.12,1.12,0,0,1,1.13,1.1V9.5A1.15,1.15,0,0,1,10.49,10.6Z'/%3e%3cpath%20class='cls-2'%20d='M11.32,6.69h-2a.38.38,0,0,0-.39.39v3.25'/%3e%3cline%20class='cls-2'%20x1='7.04'%20y1='10.29'%20x2='7.04'%20y2='4.85'/%3e%3cline%20class='cls-2'%20x1='3.63'%20y1='6.56'%20x2='6.78'%20y2='6.56'/%3e%3cline%20class='cls-2'%20x1='3.63'%20y1='8.58'%20x2='6.78'%20y2='8.58'/%3e%3cline%20class='cls-2'%20x1='8.92'%20y1='8.58'%20x2='11.62'%20y2='8.58'/%3e%3c/svg%3e")
}

#ico-exp-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2,.cls-3{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}.cls-3{stroke-width:1.36px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M21.43,19.43a1.76,1.76,0,0,1-1.76,1.76H2.55A1.76,1.76,0,0,1,.79,19.43V3.94A1.75,1.75,0,0,1,2.55,2.19H19.67a1.75,1.75,0,0,1,1.76,1.75v6.37'/%3e%3cline%20class='cls-1'%20x1='5.61'%20y1='0.7'%20x2='5.61'%20y2='3.57'/%3e%3cline%20class='cls-1'%20x1='16.46'%20y1='0.7'%20x2='16.46'%20y2='3.57'/%3e%3cline%20class='cls-1'%20x1='0.79'%20y1='6.61'%20x2='20.98'%20y2='6.61'/%3e%3cpath%20class='cls-1'%20d='M24.74,19.23H14.62a1.05,1.05,0,0,1-.91-1.59l5.07-8.51a1.05,1.05,0,0,1,1.81,0l5.06,8.51A1.05,1.05,0,0,1,24.74,19.23Z'/%3e%3cline%20class='cls-2'%20x1='19.68'%20y1='12.11'%20x2='19.68'%20y2='14.82'/%3e%3ccircle%20class='cls-2'%20cx='19.75'%20cy='16.7'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='4.66'%20cy='10.44'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='8.65'%20cy='10.44'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='12.65'%20cy='10.44'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='4.66'%20cy='13.93'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='8.65'%20cy='13.93'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='12.65'%20cy='13.93'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='4.66'%20cy='17.41'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='8.65'%20cy='17.41'%20r='0.23'/%3e%3c/svg%3e")
}

#ico-cvv-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M14.08,15.21v4.87a.87.87,0,0,1-.88.88H1.62a.88.88,0,0,1-.89-.88V10.86A.89.89,0,0,1,1.62,10H7'/%3e%3cpath%20class='cls-1'%20d='M2.41,9.83v-4A5.09,5.09,0,0,1,7.5.72h0a5.09,5.09,0,0,1,5.09,5.09v.5'/%3e%3cpath%20class='cls-1'%20d='M24.38,15.21H14.08l-3.21,3,0-3H8.38A1.4,1.4,0,0,1,7,13.81V8.07a1.4,1.4,0,0,1,1.39-1.4h16a1.4,1.4,0,0,1,1.4,1.4v5.74A1.4,1.4,0,0,1,24.38,15.21Z'/%3e%3cline%20class='cls-2'%20x1='11.3'%20y1='9.21'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='10.27'%20y1='12.52'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='12.41'%20y1='12.52'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='12.97'%20y1='10.4'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='9.74'%20y1='10.4'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='16.47'%20y1='9.21'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='15.44'%20y1='12.52'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='17.58'%20y1='12.52'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='18.14'%20y1='10.4'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='14.91'%20y1='10.4'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='21.64'%20y1='9.21'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='20.61'%20y1='12.52'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='22.75'%20y1='12.52'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='23.31'%20y1='10.4'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='20.08'%20y1='10.4'%20x2='21.64'%20y2='11.01'/%3e%3c/svg%3e")
}

.input-with-icon {
    position: relative;
    width: 100%
}

.input-with-icon input {
    width: 100%;
    padding-right: 30px
}

.input-icon {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    fill: #666
}

.containerFormTDC {
    display: grid;
    row-gap: 2.2rem;
    column-gap: .6rem;
    font-size: var(--md)!important;
    grid-template-columns: repeat(3,1fr);
    margin-top: 10px
}

.containerFormTDC>.input-group:nth-child(1),.containerFormTDC>.input-group:nth-child(2) {
    grid-column: 1/4
}

#ico-name-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M25.7,13.12v5.67a2.14,2.14,0,0,1-2.15,2.15H2.83A2.15,2.15,0,0,1,.68,18.8V3.24A2.52,2.52,0,0,1,2.84.7h20.7A2.16,2.16,0,0,1,25.7,2.85Z'/%3e%3ccircle%20class='cls-2'%20cx='8.33'%20cy='7.25'%20r='1.86'/%3e%3ccircle%20class='cls-2'%20cx='8.33'%20cy='8.47'%20r='5.41'/%3e%3cpath%20class='cls-2'%20d='M5.39,13a3.16,3.16,0,0,1,5.88,0'/%3e%3cline%20class='cls-2'%20x1='5.44'%20y1='16.84'%20x2='20.36'%20y2='16.84'/%3e%3c/svg%3e")
}

#ico-number-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M25.7,13.12v5.67a2.14,2.14,0,0,1-2.14,2.15H2.83A2.14,2.14,0,0,1,.69,18.8V3.24A2.52,2.52,0,0,1,2.84.7H23.55A2.15,2.15,0,0,1,25.7,2.85Z'/%3e%3cpath%20class='cls-2'%20d='M13.86,6.91a1,1,0,0,1,.31.66.94.94,0,0,1-.31.66'/%3e%3cpath%20class='cls-2'%20d='M14.69,5.85a2.34,2.34,0,0,1,0,3.34'/%3e%3cpath%20class='cls-2'%20d='M15.78,4.93a3.46,3.46,0,0,1,1,2.55,3.59,3.59,0,0,1-1,2.54'/%3e%3cpath%20class='cls-2'%20d='M16.66,4.06a4.89,4.89,0,0,1,0,6.93'/%3e%3cpath%20class='cls-2'%20d='M10.49,10.6h-6A1.13,1.13,0,0,1,3.37,9.5V5.68a1.12,1.12,0,0,1,1.14-1.1h6a1.12,1.12,0,0,1,1.13,1.1V9.5A1.15,1.15,0,0,1,10.49,10.6Z'/%3e%3cpath%20class='cls-2'%20d='M11.32,6.69h-2a.38.38,0,0,0-.39.39v3.25'/%3e%3cline%20class='cls-2'%20x1='7.04'%20y1='10.29'%20x2='7.04'%20y2='4.85'/%3e%3cline%20class='cls-2'%20x1='3.63'%20y1='6.56'%20x2='6.78'%20y2='6.56'/%3e%3cline%20class='cls-2'%20x1='3.63'%20y1='8.58'%20x2='6.78'%20y2='8.58'/%3e%3cline%20class='cls-2'%20x1='8.92'%20y1='8.58'%20x2='11.62'%20y2='8.58'/%3e%3c/svg%3e")
}

#ico-exp-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2,.cls-3{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}.cls-3{stroke-width:1.36px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M21.43,19.43a1.76,1.76,0,0,1-1.76,1.76H2.55A1.76,1.76,0,0,1,.79,19.43V3.94A1.75,1.75,0,0,1,2.55,2.19H19.67a1.75,1.75,0,0,1,1.76,1.75v6.37'/%3e%3cline%20class='cls-1'%20x1='5.61'%20y1='0.7'%20x2='5.61'%20y2='3.57'/%3e%3cline%20class='cls-1'%20x1='16.46'%20y1='0.7'%20x2='16.46'%20y2='3.57'/%3e%3cline%20class='cls-1'%20x1='0.79'%20y1='6.61'%20x2='20.98'%20y2='6.61'/%3e%3cpath%20class='cls-1'%20d='M24.74,19.23H14.62a1.05,1.05,0,0,1-.91-1.59l5.07-8.51a1.05,1.05,0,0,1,1.81,0l5.06,8.51A1.05,1.05,0,0,1,24.74,19.23Z'/%3e%3cline%20class='cls-2'%20x1='19.68'%20y1='12.11'%20x2='19.68'%20y2='14.82'/%3e%3ccircle%20class='cls-2'%20cx='19.75'%20cy='16.7'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='4.66'%20cy='10.44'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='8.65'%20cy='10.44'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='12.65'%20cy='10.44'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='4.66'%20cy='13.93'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='8.65'%20cy='13.93'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='12.65'%20cy='13.93'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='4.66'%20cy='17.41'%20r='0.23'/%3e%3ccircle%20class='cls-3'%20cx='8.65'%20cy='17.41'%20r='0.23'/%3e%3c/svg%3e")
}

#ico-cvv-TDC {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:1.24px;}.cls-2{stroke-width:0.9px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M14.08,15.21v4.87a.87.87,0,0,1-.88.88H1.62a.88.88,0,0,1-.89-.88V10.86A.89.89,0,0,1,1.62,10H7'/%3e%3cpath%20class='cls-1'%20d='M2.41,9.83v-4A5.09,5.09,0,0,1,7.5.72h0a5.09,5.09,0,0,1,5.09,5.09v.5'/%3e%3cpath%20class='cls-1'%20d='M24.38,15.21H14.08l-3.21,3,0-3H8.38A1.4,1.4,0,0,1,7,13.81V8.07a1.4,1.4,0,0,1,1.39-1.4h16a1.4,1.4,0,0,1,1.4,1.4v5.74A1.4,1.4,0,0,1,24.38,15.21Z'/%3e%3cline%20class='cls-2'%20x1='11.3'%20y1='9.21'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='10.27'%20y1='12.52'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='12.41'%20y1='12.52'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='12.97'%20y1='10.4'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='9.74'%20y1='10.4'%20x2='11.3'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='16.47'%20y1='9.21'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='15.44'%20y1='12.52'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='17.58'%20y1='12.52'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='18.14'%20y1='10.4'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='14.91'%20y1='10.4'%20x2='16.47'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='21.64'%20y1='9.21'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='20.61'%20y1='12.52'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='22.75'%20y1='12.52'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='23.31'%20y1='10.4'%20x2='21.64'%20y2='11.01'/%3e%3cline%20class='cls-2'%20x1='20.08'%20y1='10.4'%20x2='21.64'%20y2='11.01'/%3e%3c/svg%3e")
}

#selectCuotas {
    padding: 10px 10px 11px 25px;
    color: var(--dark_gray)
}

#imgCard {
    position: absolute;
    width: 3rem;
    height: 3rem;
    right: 3%;
    top: 15%
}

#NumberCard {
    padding: 12px 12% 11px 45px
}

src-otp-input {
    --src-h1-color: "blue";
    --src-h1-font-size: "28px";
    --src-h2-color: "green";
    --src-h2-font-size: 16px;
    --src-btn-bg-color: "green";
    --src-btn-text-color: "orange";
    --src-btn-disabled-bg-color: "navy";
    --src-btn-border-radius: 0px;
    --src-btn-borders: 2px solid orange;
    --src-btn-dancing-dot-color: "pink";
    --src-input-error-color: "red";
    --src-error-font-size: "16px";
    --src-color-white: "red";
    --src-btn-height: "48px";
    --src-btn-width: "279px";
    --src-accessibility-outline: "2px solid red";
    --src-accessibility-outline-offset: "2px";
    --src-btn-secondary-font-size: 202px !important
}

#ConfirmationCard,#CheckOutNewCard {
    border: none;
    border-radius: 10px
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.loading-spinner {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    background-color: #cbd8e300;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.container header {
    height: auto;
    width: 100%
}

.container-section {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15%;
    grid-template-rows: auto;
    max-width: 1280px;
    margin: 5% 10%;
    border-radius: 10px
}

.input-group {
    display: flex;
    flex-direction: column;
    position: relative
}

#select-bank {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0
}

.select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 11px 20px 11px 40px;
    background-repeat: no-repeat;
    background-size: 26px;
    background-position-y: center;
    background-position-x: 5px;
    background-color: var(--light_grey);
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    font-weight: 400
}

.imgBanner {
    cursor: pointer
}

.input-group input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px 20px 12px 40px;
    background-repeat: no-repeat;
    background-size: 26px;
    background-position-y: center;
    background-position-x: 5px;
    background-color: var(--light_grey);
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    font-weight: 400
}

.input-group select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 11px 20px 11px 35px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position-y: center;
    background-position-x: 5px;
    background-color: var(--light_grey);
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    font-weight: 400
}

.icon {
    height: 100%;
    width: 31px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position-x: 5px;
    background-position-y: center;
    padding: 4px;
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    left: 2px;
    transform: translateY(-50%)
}

input:-webkit-autofill,input:-webkit-autofill:focus {
    transition: background-color 600000s 0s,color 600000s 0s
}

input[data-autocompleted] {
    background-color: transparent!important
}

#ico-number {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026.38%2021.64'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.36px;}%3c/style%3e%3c/defs%3e%3ccircle%20class='cls-1'%20cx='8.9'%20cy='8.21'%20r='2.85'/%3e%3cpath%20class='cls-1'%20d='M4.35,16.28a4.55,4.55,0,1,1,9.1,0'/%3e%3cline%20class='cls-1'%20x1='16.26'%20y1='7.4'%20x2='22.03'%20y2='7.4'/%3e%3cline%20class='cls-1'%20x1='16.26'%20y1='11.72'%20x2='22.03'%20y2='11.72'/%3e%3cpath%20class='cls-1'%20d='M2.68.68h21a2,2,0,0,1,2,2V19a2,2,0,0,1-2,2h-21a2,2,0,0,1-2-2V2.68A2,2,0,0,1,2.68.68Z'/%3e%3c/svg%3e")
}

#ico-first-name {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024.17%2024.17'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.24px;}.cls-2{fill-rule:evenodd;}%3c/style%3e%3c/defs%3e%3ccircle%20class='cls-1'%20cx='12.09'%20cy='8.64'%20r='3.51'/%3e%3ccircle%20class='cls-1'%20cx='12.09'%20cy='12.09'%20r='11.46'/%3e%3cpath%20class='cls-2'%20d='M20.29,20.09a10.06,10.06,0,0,0-8.2-4.63,10.06,10.06,0,0,0-8.21,4.63'/%3e%3c/svg%3e")
}

#ico-last-name {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024.17%2024.17'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-2{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.24px;}.cls-2{fill-rule:evenodd;}%3c/style%3e%3c/defs%3e%3ccircle%20class='cls-1'%20cx='12.09'%20cy='8.64'%20r='3.51'/%3e%3ccircle%20class='cls-1'%20cx='12.09'%20cy='12.09'%20r='11.46'/%3e%3cpath%20class='cls-2'%20d='M20.29,20.09a10.06,10.06,0,0,0-8.2-4.63,10.06,10.06,0,0,0-8.21,4.63'/%3e%3c/svg%3e")
}

#ico-mail {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024.19%2018.87'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.26px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M.63.63H23.56V18.24H.63Z'/%3e%3cpath%20class='cls-1'%20d='M1.62,1.62l10.61,9.89L22.57,1.62'/%3e%3c/svg%3e")
}

#ico-phone {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.74%2022.96'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.42px;}%3c/style%3e%3c/defs%3e%3crect%20class='cls-1'%20x='0.71'%20y='0.71'%20width='14.32'%20height='21.54'%20rx='1.89'/%3e%3cline%20class='cls-1'%20x1='1.47'%20y1='16.3'%20x2='14.5'%20y2='16.3'/%3e%3cline%20class='cls-1'%20x1='7.86'%20y1='19.35'%20x2='7.88'%20y2='19.35'/%3e%3c/svg%3e")
}

#ico-phone {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.74%2022.96'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.42px;}%3c/style%3e%3c/defs%3e%3crect%20class='cls-1'%20x='0.71'%20y='0.71'%20width='14.32'%20height='21.54'%20rx='1.89'/%3e%3cline%20class='cls-1'%20x1='1.47'%20y1='16.3'%20x2='14.5'%20y2='16.3'/%3e%3cline%20class='cls-1'%20x1='7.86'%20y1='19.35'%20x2='7.88'%20y2='19.35'/%3e%3c/svg%3e");
    background-size: 16px;
    background-position-x: 8px;
    background-position-y: center
}

#ico-address {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.46%2024.25'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.26px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M9.29,23.62a37.83,37.83,0,0,0,5.82-6.88c2.56-3.92,4.41-10,.32-14C12.59,0,6.73,0,3.73,2.43-1.43,6.6.84,12.71,3.47,16.74A38.64,38.64,0,0,0,9.29,23.62Z'/%3e%3ccircle%20class='cls-1'%20cx='9.29'%20cy='9.7'%20r='2.54'/%3e%3c/svg%3e");
    background-size: 20px
}

#ico-bank {
    background-image: url("data:image/svg+xml,%3csvg%20id='Capa_1_copia'%20data-name='Capa%201%20copia'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024.17%2024.17'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:none;stroke:%2314387f;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.24px;}%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M22.2,8.42,14.38,1.49a3.45,3.45,0,0,0-4.58,0L2,8.42A3.47,3.47,0,0,0,.81,11V20.1a3.46,3.46,0,0,0,3.45,3.45H19.91a3.45,3.45,0,0,0,3.45-3.45V11A3.47,3.47,0,0,0,22.2,8.42Z'/%3e%3c/svg%3e");
    background-size: 20px
}

.label-pagador {
    font-size: var(--md);
    font-weight: 400;
    color: var(--dark_gray)
}

::placeholder {
    color: var(--medium_grey);
    font-weight: 300
}

.form-container-pagador {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.btn-no-continuar-container {
    width: 100%
}

.btn-no-continuar {
    width: 100%;
    color: var(--white);
    font-size: var(--md);
    font-weight: 400;
    font-family: Montserrat,sans-serif;
    cursor: pointer;
    background: linear-gradient(90deg,rgb(78,78,80) 42%,rgb(124,125,127) 100%);
    height: 5rem;
    border-radius: 5px;
    border: none;
    margin-top: 3rem
}

.pagaMovil {
    width: 100%;
    color: var(--white);
    font-size: var(--md);
    font-weight: 400;
    font-family: Montserrat,sans-serif;
    cursor: pointer;
    height: 5rem;
    border-radius: 5px;
    border: none;
    margin-top: 3rem
}

.container-info-pagador {
    margin-bottom: 20px
}

.container-info-pagador h2 {
    font-size: var(--md);
    color: var(--blue);
    margin: 0 0 15px
}

.container-info-pagador h1 {
    font-size: 2.5rem;
    color: var(--blue);
    margin: 25px 0 10px
}

.container-info-pagador p {
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    line-height: 22px;
    margin: 0
}

#nombreEntidad {
    margin: 0
}

.container-group-pay {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.total-pay-container {
    border: 1px solid;
    border-color: var(--medium_grey);
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4,1fr);
    padding: 2%
}

.justify-content-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.mediosPago {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px
}

.container-clickToPay {
    width: 100%;
    grid-area: 1 / 1 / 2 / 3
}

.active {
    background-color: var(--light_grey);
    border: 0px
}

.select-pay {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 5px
}

.border {
    border: 1px solid var(--medium_grey)
}

.borderNone {
    border: none
}

.borderRed {
    border: 1px solid red
}

.select-pay-select {
    display: flex;
    justify-content: center;
    border-radius: 5px;
    padding: 2rem;
    background: #d1d1d1
}

.titleMedioPago {
    display: flex;
    justify-content: center;
    align-items: center
}

.select-pay-select p {
    font-family: Montserrat,sans-serif;
    font-size: var(--xmd);
    color: var(--blue);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center
}

.select-pay-medio {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 25px
}

.select-pay-medio img {
    width: 4rem;
    aspect-ratio: 1;
    object-fit: contain
}

.select-pay-medio div {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.select-pay-medio>div>p {
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    font-weight: 600;
    margin: 0
}

.select-pay-medio>div :nth-child(2) {
    font-family: Montserrat,sans-serif;
    font-size: 10px
}

.container-pay {
    background: #dededb;
    border: 1px solid blue;
    border-radius: 5px
}

.total-pay {
    border-radius: 5px;
    grid-row: 1/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 1.5rem
}

.total-pay>.btnback {
    position: absolute;
    top: 5%;
    right: 0
}

.total-pay h1 {
    font-family: Montserrat,sans-serif;
    color: var(--blue);
    font-size: var(--xmd);
    margin: 0
}

.total-pay h3 {
    font-family: Montserrat,sans-serif;
    font-size: var(--xlg);
    color: var(--blue);
    margin: 0
}

.total-pay p {
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    font-weight: 700;
    margin: 0
}

.detail-pay-container {
    grid-row: 3/5;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.detail-pay-container>p {
    font-family: Montserrat,sans-serif;
    font-size: var(--lg);
    color: var(--blue);
    font-weight: 700;
    margin: 18px 0 4px
}

.detail-pay-container hr {
    margin: 0
}

.ref-pay {
    display: flex;
    justify-content: space-between
}

.ref-pay p {
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    margin: 6px 0
}

.date-pay {
    display: flex;
    justify-content: space-between
}

.date-pay p {
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    margin: 6px 0
}

.txt-legales-container>p {
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    margin: 6px 0;
    color: var(--dark_gray)
}

.txt-legales-container hr {
    margin: 10px 0;
    color: var(--dark_gray)
}

.txt-legales-container font {
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    color: var(--dark_gray);
    text-align: justify;
    line-height: 18px
}

.container-section-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.btnPagarValor {
    color: var(--white)
}

.disable {
    background-color: var(--medium_grey)!important;
    color: var(--light_grey)
}

.buttom-pay {
    border: none;
    border-radius: 8px;
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    font-weight: 700;
    width: 100%;
    height: 7rem;
    margin-top: 20px;
    cursor: pointer
}

.pay-buttom-time {
    display: flex;
    align-items: center
}

.pay-buttom-time img {
    width: 2.5rem
}

.pay-buttom-time p {
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    margin: 0 0 0 10px
}

.input-wrapper {
    width: 100%;
    position: relative
}

.input {
    border-radius: 4px;
    border: 1px solid #CBD8E3;
    width: 100%;
    outline: none;
    box-sizing: border-box;
    padding: 12px 20px 12px 45px
}

.placeholder {
    pointer-events: none;
    position: absolute;
    top: 11px;
    left: 37px;
    padding: 0 8px;
    background-color: var(--light_grey);
    border-radius: 5px;
    font-size: 14px;
    transition: transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1);
    color: var(--dark_gray)
}

.container-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.footer-publi_1 {
    background-color: var(--blue);
    width: 100%;
    display: flex;
    justify-content: center
}

.footer-publi_1>section {
    display: flex;
    margin: 1rem 0px
}

.textFooter {
    width: 30rem;
    text-align: center
}

.linkEscribenos {
    color: #fff
}

.btnFooter {
    display: flex;
    align-items: center
}

.footer-publi_1 p {
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    color: var(--white)
}

.footer-publi_1 button {
    height: 4rem;
    padding: 0 80px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    color: var(--white);
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    font-weight: 700;
    background: linear-gradient(90deg,#048C4B 42%,#69B455 100%)
}

.input:not(:placeholder-shown).input:not(:focus)+.placeholder {
    transform: scale(.75) translateY(-34px) translate(-60px);
    transition: .2s ease
}

.input:focus {
    border-color: #08f
}

.input:focus+.placeholder {
    transform: scale(.75) translateY(-34px) translate(-55px);
    transition: .2s ease
}

.input:focus+#identificacion {
    transform: scale(.75) translateY(-34px) translate(-58px)
}

.input:focus+#telefono {
    transform: scale(.75) translateY(-34px) translate(-45px)
}

.input:focus+#direccion {
    transform: scale(.75) translateY(-34px) translate(-56px)
}

.input:not(:placeholder-shown).input:not(:focus)+#identificacion {
    transform: scale(.75) translateY(-34px) translate(-58px);
    transition: .2s ease
}

.input:not(:placeholder-shown).input:not(:focus)+#telefono {
    transform: scale(.75) translateY(-34px) translate(-50px);
    transition: .2s ease
}

.input:not(:placeholder-shown).input:not(:focus)+#direccion {
    transform: scale(.75) translateY(-34px) translate(-50px);
    transition: .2s ease
}

.input:focus+#NombreTDC {
    transform: scale(.75) translateY(-34px) translate(-90px)
}

.input:not(:placeholder-shown).input:not(:focus)+#NombreTDC {
    transform: scale(.75) translateY(-34px) translate(-98px);
    transition: .2s ease
}

.input:invalid:not(:placeholder-shown) {
    transition: .2s ease
}

.input:invalid:not(:placeholder-shown)+.placeholder {
    transition: .2s ease
}

.input:invalid:not(:placeholder-shown).input:not(:focus)+.placeholder {
    transform: scale(.75) translateY(-36px) translate(-60px);
    color: #f52c5c;
    transition: .2s ease
}

.containerForm {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2.5rem
}

.contenedorInputs {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.btn-volver-container {
    width: 100%
}

.btn-volver {
    width: 100%;
    color: var(--white);
    font-size: var(--md);
    font-weight: 400;
    font-family: Montserrat,sans-serif;
    cursor: pointer;
    background: linear-gradient(90deg,rgb(78,78,80) 42%,rgb(124,125,127) 100%);
    height: 5rem;
    border-radius: 5px;
    border: none;
    margin-top: 3rem
}

@media (max-width: 800px) {
    .container-section {
        grid-template-columns:repeat(1,1fr)
    }
}

@media (max-width: 1191px) {
    .containerForm {
        grid-template-columns:repeat(1,1fr)
    }

    .container-section {
        margin: 6% 4rem
    }
}

@media (min-width: 500px) and (max-width:800px) {
    .containerForm {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (max-width: 500px) {
    .container-section {
        margin:10% 1.7rem
    }
}

@media (max-width: 580px) {
    .footer-copy {
        flex-direction:column
    }

    .textFooter {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center
    }

    .footer-publi_1>section {
        display: flex;
        flex-direction: column;
        margin: 1rem 0px
    }

    .btnFooter {
        justify-content: center
    }
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.flex-row {
    flex-direction: row
}

.justify-center {
    justify-content: center
}

.gap-6 {
    gap: 1.5rem
}

.gap-4 {
    gap: 1rem
}

.gap-2 {
    gap: .5rem
}

.gap-1 {
    gap: .25rem
}

.align-center {
    align-items: center
}

:root {
    --white: #fff;
    --black: #000;
    --light-blue: #10B7EB;
    --blue: #14387F;
    --light_green: #69B455;
    --green: #048C4B;
    --light_grey: #DBDBDB;
    --grey: #a5a5a5;
    --medium_grey: #7C7C7B;
    --dark_gray: #575756;
    --sm: 1.3rem;
    --md: 1.6rem;
    --lg: 2rem;
    --xlg: 5rem;
    --xmd: 1.7rem
}

.spanText {
    margin: 12px;
    font-size: var(--xmd)
}

.back_pag_retorno {
    background-image: url(/assets/img/fondo_pasarela_1920.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto
}

#container-header {
    background-color: #5757562b;
    display: grid;
    grid-template-rows: 1fr;
    border-radius: 0 0 10px 10px;
    padding: 20px 0
}

#container-header section {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 100px;
    max-width: 1280px;
    margin: 1.5% 12%;
    align-items: center
}

.header-info-pagar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center
}

.header-info-pagar div {
    padding: 10px 0 20px;
    border-radius: 8px
}

.TitleEstadoResumen {
    color: #fff
}

.TitleEstadoResumen h2 {
    font-size: var(--md)
}

.TitleEstadoResumen p {
    font-size: 2.5rem
}

.totalPagarResumen {
    padding: 2rem 0px
}

.fechaResumen {
    font-size: var(--xlg)
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    background-color: #cbd8e300;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-position-x: center
}

.header-info-pagar_Estado {
    color: #fff;
    font-family: Montserrat,sans-serif;
    font-size: 2.1rem;
    text-align: center;
    font-weight: 600;
    margin: 0
}

.header-info-pagar :last-child p {
    color: var(--white);
    font-family: Montserrat,sans-serif;
    font-size: 4rem;
    text-align: center;
    font-weight: 700;
    margin: 0
}

.header-info-pagar :last-child h3 {
    font-family: Montserrat,sans-serif;
    font-size: var(--lg);
    text-align: center;
    font-weight: 500;
    margin: 0
}

.header-fecha {
    display: flex;
    align-items: center
}

.header-fecha img {
    width: 20px
}

.header-fecha h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 0 10px
}

.header-fecha+p {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 10px 0 0
}

.header-info h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--dark_gray)
}

.header-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    justify-content: space-between
}

.header-entidad {
    display: flex;
    align-items: center;
    gap: 20px
}

.header-entidad p {
    font-size: 3rem;
    font-weight: 700
}

.container-resumen {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 100px;
    max-width: 1280px;
    margin: 6% 12% 0%
}

.container-buttoms {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 50px;
    max-width: 1280px;
    margin: 3% 12%;
    align-items: center
}

.button-generico {
    border: none;
    border-radius: 50px;
    color: var(--white);
    font-family: Montserrat,sans-serif;
    font-size: var(--md);
    font-weight: 600;
    width: 100%;
    height: 4.2em;
    box-shadow: 2px 4px 6px #00000030;
    cursor: pointer
}

.container-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 2rem
}

.container-footer img {
    width: 120px
}

.footer-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px
}

.footer-copy p {
    font-family: Montserrat,sans-serif;
    font-size: var(--sm);
    color: var(--dark_gray)
}

.container-resumen h2 {
    color: var(--white);
    font-family: Montserrat,sans-serif;
    font-size: var(--lg);
    text-align: left;
    font-weight: 600;
    background-color: var(--blue);
    border-radius: 5px;
    height: 5rem;
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0;
    padding: 0 0 0 12px
}

#number-factura {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 15px 0 19px
}

.container-resumen p {
    font-size: var(--xmd);
    padding: 0 0 0 12px;
    margin: 12px 0
}

.info-tramite>p {
    margin: 15px 0 34px
}

.button-generico:hover {
    filter: grayscale(.3)
}

.container-Button-Return {
    grid-column: -3/-1;
    display: flex;
    justify-content: center
}

.container-Button-Return a {
    display: grid;
    text-decoration: none;
    place-items: center;
    width: 50%
}

#btn-return:hover {
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5));
    scale: 1.01
}

* {
    outline: none
}

.align-self-end {
    align-self: end
}

.cont-label-email {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.cont-label-email label {
    margin-left: 10px;
    font-size: var(--sm)
}

.searchbox-wrap {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.containerImprimir {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.inputEnviarCorreo {
    font-family: Montserrat,sans-serif;
    flex: 1;
    padding: 25px 20px;
    font-size: 1.5em;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-bottomleft: 25px;
    box-shadow: none;
    border: none;
    box-shadow: 2px 4px 6px #00000030;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px
}

.btnEnviarCorreo {
    font-family: Montserrat,sans-serif;
    padding-right: 10px;
    background-color: #fff;
    -webkit-border-top-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-topright: 25px;
    -moz-border-radius-bottomright: 25px;
    box-shadow: 5px 4px 6px #00000030;
    border: none;
    cursor: pointer;
    cursor: hand;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px
}

.spanEnviarCorreo {
    font-family: Montserrat,sans-serif;
    padding: 16px;
    content: "Enviar Comprobante";
    display: flex;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    box-shadow: 2px 4px 6px #00000030;
    border-radius: 50px
}

.spanEnviarCorreo:hover {
    filter: grayscale(.3)
}

@media (max-width: 768px) {
    #container-header section {
        grid-template-columns:repeat(1,1fr);
        gap: 50px
    }

    .header-info {
        gap: 40px
    }

    .container-resumen {
        grid-template-columns: repeat(1,1fr);
        gap: 50px
    }

    .container-resumen h2 {
        margin: 40px 0
    }

    .button-generico {
        margin-top: 0
    }

    .container-buttoms {
        grid-template-columns: repeat(1,1fr)!important
    }

    .header-entidad {
        justify-content: center
    }

    .header-info h1 {
        text-align: center
    }
}

@media (min-width: 768px) and (max-width:1276px) {
    .container-buttoms {
        grid-template-columns:repeat(1,1fr)!important
    }

    .header-info-pagar :last-child p {
        font-size: 4rem
    }
}

@media (max-width: 930px) {
    .container-Button-Return {
        grid-column:1
    }

    .container-Button-Return a {
        width: 100%
    }

    .container-buttoms {
        gap: 30px
    }

    #container-header section {
        gap: 50px
    }

    .header-entidad p {
        font-size: 2.4rem
    }

    #container-header section {
        margin: 4% 12%
    }
}

@media (min-width: 325px) and (max-width:500px) {
    .spanEnviarCorreo {
        font-size:.8rem
    }

    .inputEnviarCorreo {
        font-size: 1.3rem
    }

    .container-buttoms {
        gap: 20px
    }
}

@media (max-width: 325px) {
    .spanEnviarCorreo {
        font-size:1rem
    }

    .containerImprimir button,.container-Button-Return a {
        font-size: 1.2rem
    }

    .inputEnviarCorreo {
        font-size: 1rem
    }

    .container-resumen {
        margin: 0
    }
}

.language-button {
    position: absolute;
    top: 20px;
    right: 20px
}

.language-button button {
    padding: 8px 14px;
    background-color: #007bff;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px #0003;
    transition: background-color .3s ease
}

.language-button button:hover {
    background-color: #0056b3
}

.checkbox-wrapper-24 {
    display: flex
}

.checkbox-wrapper-24 .checkbox {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center
}

.checkbox-wrapper-24 label {
    display: inline-block;
    color: #333;
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px
}

.checkbox-wrapper-24 label span {
    display: inline-block;
    position: relative;
    background-color: transparent;
    width: 20px;
    height: 20px;
    transform-origin: center;
    border: 2px solid #333;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
    transition: background-color .15s .2s,transform .35s cubic-bezier(.78,-1.22,.17,1.89)
}

.checkbox-wrapper-24 label span:before {
    content: "";
    width: 0px;
    height: 2px;
    border-radius: 2px;
    background: #333;
    position: absolute;
    transform: rotate(45deg);
    top: 8px;
    left: 5px;
    transition: width 50ms ease 50ms;
    transform-origin: 0% 0%
}

.checkbox-wrapper-24 label span:after {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #333;
    position: absolute;
    transform: rotate(305deg);
    top: 11px;
    left: 7px;
    transition: width 50ms ease;
    transform-origin: 0% 0%
}

.checkbox-wrapper-24 input[type=checkbox] {
    display: none
}

.checkbox-wrapper-24 input[type=checkbox]:checked+label span {
    background-color: #333;
    transform: scale(1.25)
}

.checkbox-wrapper-24 input[type=checkbox]:checked+label span:after {
    width: 10px;
    background: #fff;
    transition: width .15s ease .1s
}

.checkbox-wrapper-24 input[type=checkbox]:checked+label span:before {
    width: 5px;
    background: #fff;
    transition: width .15s ease .1s
}

.checkbox-wrapper-24 input[type=checkbox]:checked+label:hover span {
    background-color: #333;
    transform: scale(1.25)
}

.checkbox-wrapper-24 input[type=checkbox]:checked+label:hover span:after {
    width: 10px;
    background: #fff;
    transition: width .15s ease .1s
}

.checkbox-wrapper-24 input[type=checkbox]:checked+label:hover span:before {
    width: 5px;
    background: #fff;
    transition: width .15s ease .1s
}

dialog:-internal-dialog-in-top-layer::backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.185)
}

.tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%);
    background-color: #e74c3c;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 5px #0003;
    animation: fadeIn .2s ease
}

.tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #e74c3c transparent transparent transparent
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%) translateY(10px)
    }

    to {
        opacity: 1;
        transform: translate(-50%) translateY(0)
    }
}

html {
    box-sizing: border-box
}

*,*:before,*:after {
    box-sizing: inherit
}

html {
    font-size: 62.5%;
    overflow-x: hidden
}

:root {
    --white: #fff;
    --black: #000;
    --light-blue: #10B7EB;
    --blue: #14387F;
    --light_green: #69B455;
    --green: #048C4B;
    --light_grey: #DBDBDB;
    --medium_grey: #7C7C7B;
    --dark_gray: #575756;
    --sm: 1.3rem;
    --md: 1.6rem;
    --lg: 2rem;
    --xlg: 5rem;
    --xmd: 1.7rem
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

body {
    font-family: Montserrat,sans-serif;
    margin: 0;
    background-color: #efefef;
    overflow-x: hidden
}

.fondo_pasarela {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    margin: 0 auto
}

h3,h1 {
    margin: 0;
    padding: 0
}

.bank-option {
    padding: 10px 14px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    letter-spacing: 0.01em;
}
.bank-option:hover {
    background-color: #f0f4ff;
}
#bank-control {
    background-color: var(--light_grey, #f5f5f5) !important;
    border: 1px solid rgb(204, 204, 204) !important;
    border-radius: 4px !important;
    min-height: 38px !important;
    padding: 0 8px 0 14px !important;
    font-family: Montserrat, sans-serif !important;
    font-size: var(--sm, 0.85rem) !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}