.swal2-html-container {
    font-size: 1.5em;
}

.swal2-styled.swal2-confirm {
    background-color: #005F8A;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(0,95,138,.5);
}

/* -------------
 ## RESET
--------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* -------------
 ## Basic layout
--------------- */
#flippersForm{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='rgba(89%2c 140%2c 163%2c 0.87)'%3e%3c/rect%3e%3cpath d='M0%2c674.044C123.779%2c681.929%2c195.711%2c533.915%2c301.141%2c468.585C408.974%2c401.766%2c568.95%2c399.178%2c626.236%2c285.992C683.433%2c172.984%2c596.303%2c42.204%2c580.553%2c-83.471C564.433%2c-212.102%2c598.951%2c-350.121%2c532.564%2c-461.47C461.514%2c-580.64%2c342.304%2c-673.57%2c207.993%2c-708.358C75.29%2c-742.729%2c-66.916%2c-708.087%2c-190.489%2c-648.747C-302.954%2c-594.741%2c-378.178%2c-492.212%2c-451.825%2c-391.509C-520.074%2c-298.187%2c-598.017%2c-202.065%2c-601.672%2c-86.507C-605.207%2c25.267%2c-530.323%2c120.299%2c-471.011%2c215.104C-418.591%2c298.892%2c-348.241%2c362.751%2c-277.453%2c431.725C-187.689%2c519.188%2c-125.075%2c666.076%2c0%2c674.044' fill='rgba(80%2c 126%2c 147%2c 0.87)'%3e%3c/path%3e%3cpath d='M1920 1550.769C2004.006 1528.229 2068.062 1469.681 2147.093 1433.363 2243.027 1389.277 2367.331 1396.67 2433.811 1314.65 2503.497 1228.675 2514.935 1106.25 2501.242 996.4300000000001 2487.411 885.504 2436.965 779.496 2357.308 701.0699999999999 2280.736 625.681 2171.725 604.005 2069.384 571.246 1964.418 537.646 1857.472 475.85799999999995 1751.827 507.255 1646.242 538.634 1589.229 647.789 1520.964 734.233 1455.7730000000001 816.7850000000001 1383.6100000000001 896.777 1362.796 999.886 1341.3490000000002 1106.133 1362.827 1215.405 1403.556 1315.852 1445.5729999999999 1419.476 1496.487 1534.324 1598.27 1580.622 1698.335 1626.1390000000001 1813.825 1579.258 1920 1550.769' fill='rgba(104%2c 152%2c 173%2c 0.87)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    font-family: 'Oxygen', sans-serif;
    overflow: auto;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    cursor: pointer;
    z-index: 100;
}

.flippersForm *{
    cursor: initial;
    font-family: 'Oxygen', sans-serif;
    font-size: 16px;
    line-height: 1.34;
}

.formWrapper{
    width: 1100px;
    max-width: calc(100% - 30px);
    min-height: 660px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 57.1429px 126.531px rgba(0, 0, 0, 0.1), 0px 17.2269px 38.1453px rgba(0, 0, 0, 0.0651589), 0px 7.15517px 15.8436px rgba(0, 0, 0, 0.05), 0px 2.58789px 5.73032px rgba(0, 0, 0, 0.0348411);
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: auto;
}

.step{
    padding: 65px;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    row-gap: 70px;
}
@media (max-width:768px){
    .step {
        row-gap: 25px;
        padding: 35px 25px;
    }
}

.closeButton{
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer !important;
}

.closeButton * {
    cursor: pointer !important;
}


/* -------------
 ## Button
--------------- */
#openFlippersForm{
    font-size: 2rem;
    line-height: 1;
    padding: 14px 16px;
}


#flippersForm .formWrapper button, .flippersButton {
    font-family: 'Oxygen', sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    border: none;
    background-color: #005F8A;
    border: 2px solid #005F8A;
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    min-width: 200px;
    cursor: pointer;
    transition: .3s;
    align-self: end;
    box-shadow: 0px 33px 41px rgba(0, 0, 0, 0.12), 0px 9.94853px 12.3603px rgba(0, 0, 0, 0.0781907), 0px 4.13211px 5.13384px rgba(0, 0, 0, 0.06), 0px 1.4945px 1.85681px rgba(0, 0, 0, 0.0418093);
}
#flippersForm .formWrapper button:hover, .flippersButton:hover {
    background: #007BB3;
    border: 2px solid #007BB3;
    text-decoration: none;

}
#flippersForm .formWrapper button:focus, .flippersButton:focus {
    border: 2px solid #005F8A;
}

#flippersForm .formWrapper button.next, .flippersButton.next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#flippersForm .formWrapper button.next:after, .flippersButton.next:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 33 33' fill='none'%3E%3Cpath d='M13.0214 29.5214L16.5 33L33 16.5L16.5 0L13.0214 3.4786L23.5827 14.0399H0V18.9601H23.5827L13.0214 29.5214Z' fill='white'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.formButtons{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

@media (max-width:768px){
    #flippersForm .formWrapper button{
        width: 100%;
    }
}

/* -------------
 ## Form fields
--------------- */
.fields{
    width: 600px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}
.formField{
    margin: 16px auto;
    width: 100%;
}
.formField label {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    color: #005F8A;
    font-size: 1.5em;
    line-height: 1.3;
    margin-bottom: 10px;
}

label a {
    cursor: pointer !important;
}

.formField textarea,
.formField input{
    border: 1px solid #005F8A;
    border-radius: 7px;
    padding: 15px;
    width: 100%;
    display: block;
    font-size: 1.2em;
    line-height: 1.35;
    color: #005F8A;
    font-family: 'Oxygen', sans-serif;
}

.formField textarea:focus,
.formField input:focus{
    outline: none;
    box-shadow: 0px 0px 10px rgba(0, 95, 138, 0.2);
}

.formField textarea:placeholder,
.formField input:placeholder{
    color:  #A6A6A6;
}

.formField textarea:disabled,
.formField input:disabled{
    background: #FBFBFB;
    border-color: #D9D9D9;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

input[type="radio"], input[type="checkbox"]{
    cursor: pointer;
}

/* -------------
 ## Form nav
--------------- */
.formNav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

.navStep{
    display: flex;
    flex-direction: column;    row-gap: 3px;
}

.navStep .stepName{
    color: #BBBBBB;
    font-size: 0.85em;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.navStep .stepName:before{
    content: "Paso";
    display: inline-block;
}


.navStep .stepDescription{
    color: #BBBBBB;
    font-size: 1.35em;
    font-weight: 300;
}

/* Active */
.navStep.active .stepName{
    color: #005F8A;
    text-transform: uppercase;
}

.navStep.active .stepDescription{
    color: #005F8A;
    font-weight: 700;
}

/* Complete */
.navStep.complete .stepName{
    color: #80AFC5;
    text-transform: uppercase;
}
.navStep.complete .stepName:after{
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15Z' fill='%2380AFC5'/%3E%3Cpath d='M11 3L5.75 8.4L4 6.6L2.25 8.4L5.75 12L12.75 4.8L11 3Z' fill='white'/%3E%3C/svg%3E");
}

.navStep.complete .stepDescription{
    color: #80AFC5;
}

.stepTitle{
    display: none;
    color: #005F8A;
    font-size: 2em;
    line-height: 1.3;
    text-align: center;
    font-weight: 300;
}

/* Mobile */
@media (max-width:768px){
    .navStep .stepName:before{content: none;}
    .navStep .stepDescription{display: none;}

    .navStep .stepName{
        width: 30px;
        height: 30px;
        border: 1px solid;
        border-radius: 100%;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navStep.active .stepName{
        background: #005F8A;
        color: white;
    }
    .navStep.complete .stepName{
        font-size: 0;
        border: none;
        display: block;
    }
    .navStep.complete .stepName:after{
        width: 30px;
        height: 30px;
        background-size: cover;
    }
    .stepTitle{display: block;}
}

/* -------------
 ## Text
--------------- */
.step p{
    color: #4087A7;
    font-size: 1.3em;
    line-height: 1.5;
}

.step a{
    color: #4087A7;
}


/* -------------
 ## First screen
--------------- */
.step0{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: start;
    row-gap: 20px;
}
.step0 h2{
    font-size: 3em;
    line-height: 1.35;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #005F8A;
    font-weight: 700;
}

.step0 .graphic img {
    width: 100%;
    max-width: 40vw;
    margin: 0 auto;
    display: block;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

@media (max-width:768px){
    .step0 {
        grid-template-columns: 1fr;
        justify-items: stretch;
        row-gap: 25px;
    }
    .step0 h2{
        font-size: 1.8em;
        line-height: 1.5;
    }
}
@media (min-width:769px){
    .step0  .graphic {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 2;
    }
    .step0  .graphic img{
        max-width: 500px;
    }
}