@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
    /* Colores: */
    --color-primary: #00a3a6;
    --color-secondary: #fff;
    --color-tertiary: #28a745;
    --color-text: #fff;
    --color-button: #00a3a6;
}

html {
    font-size: 16px !important;
}

body {
    font-family: 'Quicksand', Arial, sans-serif;
    color: var(--color-text);
    font-weight: 500;
    /* background: var(--color-primary); */
}

.sf-toolbar {
    display: none !important;
}

header {
    /* position: absolute;
    top: 0;
    left: 0;
    right: 0; */
    background: var(--color-secondary);
    height: 18vh;
    height: 18dvh;
    padding: 12px;
    display: flex;
    align-content: center;
    align-items: center;
}
    .form_logo{
        height: 80px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
footer {
    /* position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12vh;
    height: 12dvh; */
    padding: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
}
    footer span {
        color: #fff;
        font-size: .875rem;
        font-weight: 700;
        padding: 5px;
    }
    footer img {
        max-height: 6vh;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }

.form_flux{
    /* height: 82vh;
    height: 82dvh; */
    background: var(--color-secondary);
    position: relative;
}

.form_flux > div {
    border-radius: 30px 30px 0 0;
    background: var(--color-primary);
    height: 100%;
    max-width: fit-content;
    margin: 0 auto;
}
    .section_form{
        padding: 30px;
        max-width: 600px;
        margin: 0 auto 135px;
    }
        .form_pre_text{
            font-size: 1rem;
            line-height: 1.25rem;
            /* text-align: justify; */
        }
        span.form_pre_text{
            max-width: 80%;
        }
            span.form_pre_text a,
            span.form_pre_text a:active,
            span.form_pre_text a:visited,
            span.form_pre_text a:hover {
                color: var(--color-text);
                text-decoration: underline;
            }
        .form_error_msg{
            display: block;
            text-align: center;
            font-size: 1rem;
            border-radius: 0.55rem;
        }

        .form_flux .form-select{
            background-color: var(--color-secondary) !important;
            border: 1px solid #ced4da;
            font-size: 1.125rem;
            padding-left: 3rem;
        }

        .form_flux input#phoneNumber{
            display: block;
            width: 100%;
            font-size: 1.125rem;
            font-weight: 500;
            color: var(--bs-gray-700);
            background-color: var(--color-secondary);
            background-clip: padding-box;
            border: 1px solid #ced4da;
            appearance: none;
            border-radius: 0.55rem !important;
            box-shadow: false;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .btn_form { /* Example: https://codepen.io/Shinobis/pen/yLNgWGM */
            position: relative;
            width: 230px;
            height: 50px;
            padding: 5px 35px !important;
            border-radius: 5px;
            /* background-color: #00d0d3; */
            color: var(--color-text);
            font-size: 1.25rem;
            font-weight: 700;
            /* -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15) !important;
            -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15) !important;
            box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15) !important; */
        }
        .btn_form:before {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 230px;
            height: 50px;
            -moz-box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff;
            -webkit-box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff;
            box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff;
            display: block;
            content: " ";
            cursor: pointer;
            transition: 0.3s ease-out;
            border-radius: 50px;
            filter: blur(5px), drop-shadow(8px 8px 20px rgba(255,255,255,0.5));
        }
        .btn_form:hover{
            color: var(--color-secondary) !important;
        }
            /* .btn_form:hover:before {
                background-color: var(--color-secondary) !important;
            } */

        #terms_form input[type=checkbox]{
            height: 0;
            width: 0;
            visibility: hidden;
        }
        
        #terms_form label {
            cursor: pointer;
            text-indent: -9999px;
            width: 40px;
            height: 20px;
            background: var(--color-secondary);
            display: block;
            border-radius: 100px;
            position: relative;
            margin: 0;
        }
        
        #terms_form label:after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: var(--color-primary);
            border-radius: 90px;
            transition: 0.3s;
        }

        #terms_form input:checked + label:after{
            background: var(--color-secondary);
        }
        
        #terms_form input:checked + label {
            background: var(--color-tertiary);
        }
        
        #terms_form input:checked + label:after {
            left: calc(100% - 2px);
            transform: translateX(-100%);
        }
        
        #terms_form label:active:after {
            width: 20px;
        }

        .reset { 
            border: 2px var(--color-text) solid;
            padding: 10px;
            color: var(--color-text);
            margin: 15px auto 0;
            display: inline-block;
            font-weight: 500;
            font-size: .9rem;
            border-radius: 5px;
        }
            .reset:hover { 
                background: var(--color-text);
                color: var(--color-primary);
            }

@media (min-width: 768px) {
    html {
        font-size: 16px !important;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 20px !important;
    }
}