html {
  font-size: 14px;
}

body {
    padding: 0px;
    margin: 0px;
}

main { 
    min-height: 80vh;
}

.pad-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.pad-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.bg-banner {
    background-color: #178aa3;
}

label.error {
    color: #ff0000;
}

footer {
    background-color: #178aa3;    
}

.logo-footer {
    width: 200px;
}

.btn-primary {
    background-color: #17a460;
    border-color: #17a460;
}

    .btn-primary:disabled {
        background-color: #17a460 !important;
    }

    .btn-primary:hover {
        background-color: #00521b;
    }

.bg-primary {
    background-color: #17a460 !important;
}

.btn-outline-primary {
    color: #17a460;
    border-color: #17a460;
}

.text-primary {
    color: #17a460 !important;
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
}

.display-number {
    font-family: "Roboto", sans-serif;
    font-size: 38px;
    font-weight: 600;
}

.container-900 {
    width: 100%;
    max-width: 900px !important;
}

#faq h4 {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    font-size: 20px;
    cursor: pointer;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
    #faq h4:hover {
        color: #17a460;
    }

#faq .content {
    padding: 1.5rem;
}

.ui-accordion .ui-accordion-header {
    font-weight: 600;
}

.rating img {
    display: inline-block !important;
}

.lead {
    font-weight: 400;
}

.nav-link:hover {
    color: #178aa3 !important;
    padding-bottom: 5px;
    border-bottom: solid 1px #178aa3;
}

.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    background-color: #178aa3 !important;
    border-color: #178aa3 !important;    
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    outline-color: #178aa3 !important;
    box-shadow: 0 0 0 .25rem rgba(23,138,163,.5);
}

.btn-outline-primary:hover, .btn-outline-primary:active, .dropdown-togle-show {
    background-color: #178aa3 !important;
    border-color: #178aa3 !important;
}

@media only screen and (min-width: 1000px) {

    .mobile-menu, .btn-mobile-menu {
        display: none;
    }

    .menu-login ul {
        padding: 0px;
        list-style: none;
    }

        .menu-login ul li {
            padding: 5px 15px;
        }

            .menu-login ul li a {
                text-decoration: none;
                color: #178aa3;
                font-weight: 600;
                text-decoration: underline;
            }

                .menu-login ul li a:hover {
                    color: #000;
                }

    .col-sm-1-5 {
        flex: 0 0 auto;
        width: 12.5%; /* 1.5 de 12 colunas */
    }

    .arrow-down {
        display: none;
    }

}

@media only screen and (max-width: 999px) {

    .desktop-buttons {
        display: none !important;
    }

    .btn-mobile-menu a i {
        font-size: 32px;
        color: #178aa3;
    }

    .mobile-menu {
        position: fixed;
        display: none;
        top: 0px;
        left: 0px;
        width: 100%;
        bottom: 0px;
        right: 0px;
        padding: 30px 15px;
        background-color: #178aa3;
        z-index: 999;
    }

        .mobile-menu ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }

            .mobile-menu ul li {
                padding: 10px 0px;
                border-bottom: solid 1px #fff;
            }

            .mobile-menu ul a {
                font-size: 18px;
                color: #fff;
                text-decoration: none;
            }

    .cookies-popup {
        position: fixed;
        width: 90%;
        height: 290px;
        left: 5%;
        bottom: 30px;
        text-align: center;
        padding: 20px 20px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: solid 1px #d7d7d7;
        background-color: #053641;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 10px 10px 19px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 19px -10px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 19px -10px rgba(0,0,0,0.75);
        z-index: 100;
    }

        .cookies-popup .col-text {
            float: left;
            width: 100%;
            padding: 3px 20px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

            .cookies-popup .col-text p {
                color: #fff;
                font-size: 16px !important;
            }

            .cookies-popup .col-text a {
                color: #fbff94;
            }

        .cookies-popup .col-button {
            float: left;
            width: 100%;
            text-align: center;
            padding: 20px 10px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

    .col-sm-1-5 {
        padding: 20px 0px;
    }

    .arrow-right {
        display: none;
    }

}

@media only screen and (max-width: 1535px) {

    html {
        font-size: 16px;
    }

    .tela-painel {
        width: 100% !important;
        margin-top: 40px;
        --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
}

@media only screen and (min-width: 1536px) {

    html {
        font-size: 16px;
    }

    .container {
        max-width: 1536px;
    }

    .slick-next {
        right: -30px !important;
    }

        .slick-next:before {
            color: #17a460 !important;
        }

    .slick-prev {
        left: -50px !important;
    }

        .slick-prev:before {
            color: #17a460 !important;
        }

    .cookies-popup {
        position: fixed;
        width: 1000px;
        height: 90px;
        left: 25%;
        bottom: 30px;
        padding: 5px 20px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: solid 1px #d7d7d7;
        background-color: #178aa3;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 10px 10px 19px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 19px -10px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 19px -10px rgba(0,0,0,0.75);
        z-index: 100;
    }

        .cookies-popup .col-text {
            float: left;
            width: 78%;
            padding: 3px 20px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

            .cookies-popup .col-text p {
                color: #fff;
                font-size: 16px !important;
            }

            .cookies-popup .col-text a {
                color: #fbff94;
            }

        .cookies-popup .col-button {
            float: left;
            width: 22%;
            padding: 20px 10px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

}

.whatsapp-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    background-image: url(../images/whatsapp.png);
    background-size: cover;
}

.social-icons i {
    font-size: 24px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.resource-box {
    float: left;
    width: 100%;
    height: 250px;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-sizing: border-box;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.w-16 {
    width: 4rem;
}

.h-16 {
    height: 4rem;
}

.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.bg-yellow-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.text-yellow-600 {
    --tw-text-opacity: 1;
    color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.bg-indigo-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.text-indigo-600 {
    --tw-text-opacity: 1;
    color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.rounded-lg {
    border-radius: 0.5rem;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.bg-blue-600 {
    background-color: #17a460;
}

.rounded-full {
    border-radius: 9999px;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.plan-box {    
    position: relative;
    width: 100%;
    height: 550px;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-sizing: border-box;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}    

    .plan-box .monthly-payment .value, .plan-box .annual-payment .value {
        font-family: "Roboto", sans-serif;
        font-size: 32px;
        font-weight: 800;
    }

    .plan-box i {
        font-weight: 500;
        color: #ff0000;
    }

    .plan-box .discount {
        position: absolute;
        top: 25px;
        right: 20px;
        color: #fff;
        background-color: #008b2d;
        padding: 5px 15px;
    }

    .plan-box ul {
        list-style-image: url(../images/check-bullet.png);
    }

        .plan-box ul li {
            padding: 5px 0px;
        }

.switch-large .form-check-input {
    width: 3rem;
    height: 1.5rem;
    border-color: #17a460 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2317a460'/%3e%3c/svg%3e");
}

    .switch-large .form-check-input:checked {
        background-color: #fff;
        border-color: #17a460 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2317a460'/%3e%3c/svg%3e");
    }

    .switch-large .form-check-input::before {
        transform: scale(1.5);
    }

    .switch-large .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(23, 164, 96, 0.25); /* sombra verde suave */
        border-color: #17a460;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2317a460'/%3e%3c/svg%3e");
    }

        .switch-large label {
            font-size: 20px;
            color: #808080;
            cursor: pointer;
        }

.most-popular {    
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 8px 0px;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.border-most-popular {
    border-radius: 0 0 0.5rem 0.5rem !important;
    border-left: solid 1px #17a460;
    border-right: solid 1px #17a460;
    border-bottom: solid 1px #17a460;
}

.testimonial-box {
    position: relative;
    width: 100%;
    height: 300px;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-sizing: border-box;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

    .testimonial-box .photo {
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: 999rem;
        background-size: cover;
    }

.disabled {
    background-color: #e9ecef;
}

    .disabled:focus {
        background-color: #e9ecef;
        outline: none;
    }

form div[class^="col"] {
    padding-bottom: 10px;
}

.required > label:after {
    content: "*";
    color: red;
}

.field-validation-error {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    display: block;
    color: #ff0000;
    margin: 5px;
}

    .field-validation-error a {
        font-weight: bold;
        color: #ff0000;
        text-decoration: none;
    }

        .field-validation-error a:hover {
            text-decoration: underline;
        }

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000 !important;
}