/*For Prealoder*/
/**************************************

Template Name: Xmee | Login and Register Form Html Templates
Template URL: http://html.affixtheme.com/html/xmee
Description: Creative & Exclusive Login Registration Template
Author: AffixTheme
Author URL: https://themeforest.net/user/affixtheme
Version: 2.0 

======================================  
        Table Of Contents
======================================
1. Typography
2. Template Default Style


**************************************/
/*=======================================================================
1. Typography
=========================================================================*/
.Coption option {
    color: #000;
}

#corAlerta {
    color: #f1394a !important;
    font-size: 16px !important;
}

html {
    height: 100%;
}

body {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    height: 100vh;
    line-height: 1.7;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #646464;
    background-color: #fff;
}

p {
    margin: 0 0 20px 0;
    color: #646464;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    margin: 0 0 20px 0;
    color: #111;
}

h1,
h2 {
    line-height: 1.2;
}

h3,
h4,
h5,
h6 {
    line-height: 1.4;
}

h1 {
    font-size: 36px;
}

@media only screen and (max-width: 1199px) {
    h1 {
        font-size: 34px;
    }
}

@media only screen and (max-width: 991px) {
    h1 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 30px;
    }
}

h2 {
    font-size: 28px;
}

@media only screen and (max-width: 1199px) {
    h2 {
        font-size: 26px;
    }
}

@media only screen and (max-width: 991px) {
    h2 {
        font-size: 24px;
    }
}

@media only screen and (max-width: 767px) {
    h2 {
        font-size: 22px;
    }
}

h3 {
    font-size: 22px;
}

@media only screen and (max-width: 991px) {
    h3 {
        font-size: 20px;
    }
}

@media only screen and (max-width: 767px) {
    h3 {
        font-size: 18px;
    }
}

h4 {
    font-size: 20px;
}

@media only screen and (max-width: 991px) {
    h4 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    h4 {
        font-size: 16px;
    }
}

h5 {
    font-size: 18px;
}

@media only screen and (max-width: 991px) {
    h5 {
        font-size: 16px;
    }
}
/*=======================================================================
2. Template Default Style
=========================================================================*/
a {
    text-decoration: none;
}

    a:active,
    a:hover,
    a:focus {
        text-decoration: none;
    }

    a:active,
    a:hover,
    a:focus {
        outline: 0 none;
    }

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.fxt-content-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
    .fxt-none-767 {
        display: none !important;
    }
}

@media only screen and (max-width: 991px) {
    .fxt-none-991 {
        display: none !important;
    }
}
/*Preloader Styles Start*/
.preloader {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: 999999;
}

    .preloader .inner {
        width: 99px;
        height: 99px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

        .preloader .inner > div {
            border-radius: 50%;
            position: absolute;
            -webkit-animation-name: circle_rotate;
            animation-name: circle_rotate;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
            animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
        }

        .preloader .inner .line1 {
            width: 100%;
            height: 100%;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            border-top: 6px solid #740eaf;
            border-left: 6px solid rgba(116, 14, 175, 0);
            border-right: 6px solid rgba(116, 14, 175, 0);
            border-bottom: 6px solid rgba(116, 14, 175, 0);
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }

        .preloader .inner .line2 {
            width: 70%;
            height: 70%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            border-top: 6px solid #9726d8;
            border-left: 6px solid rgba(151, 38, 216, 0);
            border-right: 6px solid rgba(151, 38, 216, 0);
            border-bottom: 6px solid rgba(151, 38, 216, 0);
            -webkit-animation-delay: 0.25s;
            animation-delay: 0.25s;
        }

        .preloader .inner .line3 {
            width: 40%;
            height: 40%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            border-top: 6px solid #be70eb;
            border-left: 6px solid rgba(190, 112, 235, 0);
            border-right: 6px solid rgba(190, 112, 235, 0);
            border-bottom: 6px solid rgba(190, 112, 235, 0);
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }

@-webkit-keyframes circle_rotate {
    50%, 100% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}

@keyframes circle_rotate {
    50%, 100% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}
/*Preloader Styles End*/
/*========================================================================
3. Template Animation
=========================================================================*/
.fxt-template-animation {
    position: relative;
    z-index: 1;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .fxt-template-animation .fxt-opacity {
        opacity: 0;
    }

    .fxt-template-animation .fxt-transformY-50 {
        opacity: 0;
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
    }

    .fxt-template-animation .fxt-transformX-L-50 {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        transform: translateX(-50px);
    }

    .fxt-template-animation .fxt-transformX-R-50 {
        opacity: 0;
        -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
        transform: translateX(50px);
    }

.loaded.fxt-template-animation {
    opacity: 1;
}

    .loaded.fxt-template-animation .fxt-opacity {
        opacity: 1;
        -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .loaded.fxt-template-animation .fxt-transformY-50 {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .loaded.fxt-template-animation .fxt-transformX-L-50 {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .loaded.fxt-template-animation .fxt-transformX-R-50 {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .loaded.fxt-template-animation .fxt-transition-delay-1 {
        -webkit-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-2 {
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-3 {
        -webkit-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-4 {
        -webkit-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        transition-delay: 0.4s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-5 {
        -webkit-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-6 {
        -webkit-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        transition-delay: 0.6s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-7 {
        -webkit-transition-delay: 0.7s;
        -o-transition-delay: 0.7s;
        transition-delay: 0.7s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-8 {
        -webkit-transition-delay: 0.8s;
        -o-transition-delay: 0.8s;
        transition-delay: 0.8s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-9 {
        -webkit-transition-delay: 0.9s;
        -o-transition-delay: 0.9s;
        transition-delay: 0.9s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-10 {
        -webkit-transition-delay: 1s;
        -o-transition-delay: 1s;
        transition-delay: 1s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-11 {
        -webkit-transition-delay: 1.1s;
        -o-transition-delay: 1.1s;
        transition-delay: 1.1s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-12 {
        -webkit-transition-delay: 1.2s;
        -o-transition-delay: 1.2s;
        transition-delay: 1.2s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-13 {
        -webkit-transition-delay: 1.3s;
        -o-transition-delay: 1.3s;
        transition-delay: 1.3s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-14 {
        -webkit-transition-delay: 1.4s;
        -o-transition-delay: 1.4s;
        transition-delay: 1.4s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-15 {
        -webkit-transition-delay: 1.5s;
        -o-transition-delay: 1.5s;
        transition-delay: 1.5s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-16 {
        -webkit-transition-delay: 1.6s;
        -o-transition-delay: 1.6s;
        transition-delay: 1.6s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-17 {
        -webkit-transition-delay: 1.7s;
        -o-transition-delay: 1.7s;
        transition-delay: 1.7s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-18 {
        -webkit-transition-delay: 1.8s;
        -o-transition-delay: 1.8s;
        transition-delay: 1.8s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-19 {
        -webkit-transition-delay: 1.9s;
        -o-transition-delay: 1.9s;
        transition-delay: 1.9s;
    }

    .loaded.fxt-template-animation .fxt-transition-delay-20 {
        -webkit-transition-delay: 2s;
        -o-transition-delay: 2s;
        transition-delay: 2s;
    }

/*========================================================================
36. Demo Layout Thirty Three
=========================================================================*/
.fxt-template-layout33 {
    background-color: #ffffff;
    width: 100%;
    min-height: 100vh;
    display: -ms-grid;
    display: grid;
    position: relative;
    z-index: 1;
}

    .fxt-template-layout33 .fxt-content-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background-size: cover;
        background-image: url(./img/bgLogin.jpg)
    }

@media only screen and (max-width: 991px) {
    .fxt-template-layout33 .fxt-content-wrap {
        display: block;
    }
}

.fxt-template-layout33 .fxt-heading-content {
    position: relative;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 991px) {
    .fxt-template-layout33 .fxt-heading-content {
        width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-heading-content {
        padding: 15px;
    }
}

.fxt-template-layout33 .fxt-heading-content:before {
    content: "";
    border-radius: 0 100px 100px 0;
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

@media only screen and (max-width: 991px) {
    .fxt-template-layout33 .fxt-heading-content:before {
        border-radius: 0;
    }
}

.fxt-template-layout33 .fxt-heading-content .fxt-inner-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    padding: 20% 6%;
    max-width: 580px;
    width: 100%;
    background-image: url(./img/layerLogin.png);
    background-size: cover;
}


@media only screen and (max-width: 1550px) {
    .fxt-template-layout33 .fxt-heading-content .fxt-inner-wrap {
        padding: 10% 6%;
    }
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-heading-content .fxt-inner-wrap {
        padding: 40px 30px;
        border-radius: 15px;
    }
}

.fxt-template-layout33 .fxt-heading-content .fxt-logo {
    margin-bottom: 30px;
    display: block;
    max-width: 35vw;
}

.fxt-template-layout33 .fxt-heading-content .fxt-sub-title {
    color: #ffffff;
    margin-bottom: 5px;
    font-size: 40px;
    font-weight: 300;
}

@media only screen and (max-width: 767px) {
    .fxt-template-layout33 .fxt-heading-content .fxt-sub-title {
        font-size: 22px;
    }
}

.fxt-template-layout33 .fxt-heading-content .fxt-main-title {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 36px;
    font-weight: 300;
}

@media only screen and (max-width: 991px) {
    .fxt-template-layout33 .fxt-heading-content .fxt-main-title {
        font-size: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .fxt-template-layout33 .fxt-heading-content .fxt-main-title {
        font-size: 28px;
    }
}

.fxt-template-layout33 .fxt-heading-content .fxt-description {
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    max-width: 390px;
    width: 100%;
}

.fxt-template-layout33 .fxt-heading-content .fxt-switcher-description {
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
}

    .fxt-template-layout33 .fxt-heading-content .fxt-switcher-description .fxt-switcher-text {
        display: table;
        color: #ffffff;
        font-weight: 500;
    }

        .fxt-template-layout33 .fxt-heading-content .fxt-switcher-description .fxt-switcher-text:hover {
            text-decoration: underline;
        }

.fxt-template-layout33 .fxt-form-content {
    width: 50%;
}

@media only screen and (max-width: 991px) {
    .fxt-template-layout33 .fxt-form-content {
        width: 100%;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-page-title {
    margin-bottom: 15px;
    font-size: 36px;
    font-weight: 700;
    color: #14133b;
}

@media only screen and (max-width: 1199px) {
    .fxt-template-layout33 .fxt-form-content .fxt-page-title {
        font-size: 32px;
    }
}

@media only screen and (max-width: 991px) {
    .fxt-template-layout33 .fxt-form-content .fxt-page-title {
        font-size: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .fxt-template-layout33 .fxt-form-content .fxt-page-title {
        font-size: 28px;
    }
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-form-content .fxt-page-title {
        font-size: 26px;
    }
}

@media only screen and (max-width: 479px) {
    .fxt-template-layout33 .fxt-form-content .fxt-page-title {
        font-size: 24px;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-description {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 30px;
}

.fxt-template-layout33 .fxt-form-content .fxt-label {
    color: #14133b;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.fxt-template-layout33 .fxt-form-content .fxt-main-form {
    padding: 50px 65px 40px 65px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 991px) {
    .fxt-template-layout33 .fxt-form-content .fxt-main-form {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-form-content .fxt-main-form {
        padding: 40px 15px 30px;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-inner-wrap {
    max-width: 454px;
    width: 100%;
}

.fxt-template-layout33 .fxt-form-content .form-group {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

.fxt-template-layout33 .fxt-form-content .form-control {
    min-height: 50px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #e7e7e7;
    border-radius: 30px;
    padding: 10px 15px;
    color: #111;
}

.fxt-template-layout33 .fxt-form-content input::-webkit-input-placeholder {
    color: #acacac;
    font-size: 17px;
    font-weight: 400;
}

.fxt-template-layout33 .fxt-form-content input::-moz-placeholder {
    color: #acacac;
    font-size: 17px;
    font-weight: 400;
}

.fxt-template-layout33 .fxt-form-content input:-moz-placeholder {
    color: #acacac;
    font-size: 17px;
    font-weight: 400;
}

.fxt-template-layout33 .fxt-form-content input:-ms-input-placeholder {
    color: #acacac;
    font-size: 17px;
    font-weight: 400;
}

.fxt-template-layout33 .fxt-form-content .fxt-otp-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

    .fxt-template-layout33 .fxt-form-content .fxt-otp-row .fxt-otp-col {
        padding: 10px 5px;
        text-align: center;
        margin-right: 30px;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

        .fxt-template-layout33 .fxt-form-content .fxt-otp-row .fxt-otp-col:last-child {
            margin-right: 0;
        }

.fxt-template-layout33 .fxt-form-content .fxt-otp-btn {
    margin-bottom: 20px;
}

.fxt-template-layout33 .fxt-form-content .fxt-switcher-description {
    text-align: center;
    font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #646464;
}

.fxt-template-layout33 .fxt-form-content .fxt-switcher-text {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    color: #555;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .fxt-template-layout33 .fxt-form-content .fxt-switcher-text:hover {
        color: #000;
        text-decoration: none;
    }

    .fxt-template-layout33 .fxt-form-content .fxt-switcher-text:focus {
        outline: none;
    }

.fxt-template-layout33 .fxt-form-content .fxt-checkbox-box {
    margin-bottom: 25px;
}

    .fxt-template-layout33 .fxt-form-content .fxt-checkbox-box label {
        color: #14133b;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 500;
        position: relative;
    }

        .fxt-template-layout33 .fxt-form-content .fxt-checkbox-box label:before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            top: 5px;
            left: 0;
            right: 0;
            border: 1px solid;
            border-color: #dcdcdc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .fxt-template-layout33 .fxt-form-content .fxt-checkbox-box label:after {
            position: absolute;
            font-size: 10px;
            color: #555555;
        }

    .fxt-template-layout33 .fxt-form-content .fxt-checkbox-box input[type="checkbox"] {
        display: none;
    }

        .fxt-template-layout33 .fxt-form-content .fxt-checkbox-box input[type="checkbox"]:checked + label::after {
            font-family: 'Font Awesome 5 Free';
            content: "\f00c";
            font-weight: 900;
            color: #ffffff;
            left: 0;
            right: 0;
            top: 5px;
            width: 16px;
            text-align: center;
        }

        .fxt-template-layout33 .fxt-form-content .fxt-checkbox-box input[type="checkbox"]:checked + label::before {
            background-color: #1ebe92;
            border-color: #1ebe92;
        }

.fxt-template-layout33 .fxt-form-content .fxt-btn-fill {
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    display: inline-block;
    font-size: 17px;
    font-weight: 500;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    border: 1px solid;
    border-color: #111;
    color: #fff;
    border-radius: 10px;
    background-color: #333;
    padding: 9px 36px;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .fxt-template-layout33 .fxt-form-content .fxt-btn-fill:hover {
        background-color: #000;
        border-color: #000;
    }

    .fxt-template-layout33 .fxt-form-content .fxt-btn-fill:focus {
        outline: none;
    }

@media only screen and (max-width: 767px) {
    .fxt-template-layout33 .fxt-form-content .fxt-btn-fill {
        font-size: 16px;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-divider-text {
    text-align: center;
    margin-bottom: 20px;
}

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: -5px;
    margin-right: -5px;
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul {
        display: block;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
    width: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li {
        width: 100%;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li a {
    padding: 10px 15px;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 50px;
    width: 50px;
    border-radius: 10px;
    font-size: 15px;
}

@media only screen and (max-width: 767px) {
    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li a {
        min-height: 47px;
    }
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li a {
        width: 100%;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li a .fxt-option-icon {
    display: inline-block;
}

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li a .fxt-option-text {
    display: inline-block;
    display: none;
}

@media only screen and (max-width: 575px) {
    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li a .fxt-option-text {
        display: block;
    }
}

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.fxt-google a {
    background-color: #CC3333;
}

    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.fxt-google a:hover {
        background-color: #af2121;
    }

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.fxt-facebook a {
    background-color: #3b5998;
}

    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.fxt-facebook a:hover {
        background-color: #263f75;
    }

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.fxt-apple a {
    background-color: #132133;
}

    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.fxt-apple a:hover {
        background-color: #070e16;
    }

.fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.active {
    width: 100%;
}

    .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.active a {
        width: 100%;
    }

        .fxt-template-layout33 .fxt-form-content .fxt-login-option ul li.active a .fxt-option-text {
            display: block;
        }

.fxt-template-layout33.fxt-template-animation .fxt-heading-content:before {
    opacity: 0;
    visibility: hidden;
}

.fxt-template-layout33.loaded.fxt-template-animation .fxt-heading-content:before {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 1.5s ease-in-out;
    -o-transition: opacity 1.5s ease-in-out;
    transition: opacity 1.5s ease-in-out;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
/*
.btnLogin {
    background: linear-gradient(91.27deg, #7BBA06 2.57%, #3764B9 102.08%);
    border-radius: 60px;
    padding: 15px 2.7rem;
    color: #fff !important;
}.btnLogin2 {
    background: linear-gradient(91.27deg, #091c3d 2.57%, #18325f 102.08%);
    border-radius: 60px;
    padding: 15px 3.2rem;
    color: #fff !important;
}
.formLogin {
    height: 52px !important;
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 60px !important;
    border: 1px solid #ffffff60
}
.formLogin2 {
    line-height: 38px !important;
    color: #d0d0d0 !important;
    background-color: transparent !important;
    border-radius: 60px !important;
    display: flex;
    align-items: center;
}
.form-control {
    padding: .375rem 12px !important;
}

.input-group-text {
    border: none;
    background-color: transparent;
    padding: 0;
}
.input-group-append {
    position: absolute;
    right: 5%;
    top: 35%;
    z-index:999;
   
}*/



/* reset by rafaux */
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-weight: normal;
    font-size: 100%;
    list-style: none;
    line-height: 1;
    outline: 0px;
    background: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

/* var */
:root {
    --black: #373737;
    --red: #EB194B;
    --lightred: #FFDEE6;
    --lightgray: #9C9C9C;
    --white: #efefef;
    --white2: #ddd;
    --blackgray: #3A3A3A;
    --gray: #777;
    --green: #18B791;
    --fontmedium: 'Avenir Next Demi', sans-serif;
}

/* global class */
.block {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 80px;
}

.container {
    position: relative;
    display: block;
    width: 1260px;
    height: auto;
    margin: 0px auto;
}

/* base */
a {
    text-decoration: none;
    color: var(--black);
    transition: all .5s ease;
}

body {
    overflow: hidden;
    height: 100vh;
    background: #f4f4f4;
    color: var(--black);
    font: normal 14px 'Avenir Next', sans-serif;
}

input, textarea, select, button {
    font: normal 14px 'Avenir Next', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0px;
    cursor: pointer;
}

    input[type=submit], button {
        transition: all .5s ease;
    }

img {
    pointer-events: none;
}

label {
    cursor: pointer;
}

/* header */
#header {
    position: fixed;
    z-index: 20;
    top: 0px;
    left: 220px;
    width: calc(100% - 220px);
    height: 105px;
    padding-right: 25px;
    background-color: #f4f4f4;
    transition: all .3s ease;
}

    #header span.menu {
        position: relative;
        float: left;
        width: 20px;
        height: 16px;
        margin-top: 40px;
        border-top: 2px solid var(--red);
        cursor: pointer;
        transition: all .5s ease;
    }

        #header span.menu::before {
            position: absolute;
            top: 5px;
            left: 0px;
            width: 100%;
            height: 2px;
            background-color: var(--red);
            transition: all .5s ease;
            content: '';
        }

        #header span.menu::after {
            position: absolute;
            top: 12px;
            left: 0px;
            width: 100%;
            height: 2px;
            background-color: var(--red);
            transition: all .5s ease;
            content: '';
        }

        #header span.menu.on {
            border-top: transparent;
        }

            #header span.menu.on::before {
                top: 8px;
                transform: rotate(45deg);
            }

            #header span.menu.on::after {
                top: 8px;
                transform: rotate(-45deg);
            }

    #header form {
        float: left;
        width: auto;
    }

        #header form input.get-busca {
            display: block;
            width: 212px;
            height: 36px;
            margin: 30px 50px 0px 50px;
            padding: 0px 20px;
            background-color: #fff;
            box-shadow: 20px 20px 20px rgba(0,0,0,.05);
            border-radius: 18px;
            font-size: 12px;
        }

    #header nav {
        float: left;
        width: auto;
        margin-top: 43px;
    }

        #header nav li {
            float: left;
            width: auto;
            margin-right: 40px;
            font-size: 13px;
        }

            #header nav li:last-of-type {
                margin-right: 0px;
            }

    #header .right {
        float: right;
        width: auto;
        margin-top: 26px;
        text-align: right;
    }

        #header .right span {
            display: inline-block;
            width: auto;
            margin-right: 18px;
            vertical-align: middle;
            color: var(--red);
            font-size: 20px;
            cursor: pointer;
        }

        #header .right figure {
            position: relative;
            display: inline-block;
            width: 45px;
            height: 45px;
            /* border-radius: 100%; */
            background-color: #000;
            overflow: hidden;
            vertical-align: middle;
        }

            #header .right figure img {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    /* header -> live */
    #header span.live a {
        position: relative;
        margin-top: -1px;
        color: var(--red);
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
    }

    #header span.live::before {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 7px;
        background-color: var(--red);
        border-radius: 100%;
        opacity: .2;
        animation: live 2s infinite forwards;
        content: '';
    }

@keyframes live {
    0% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

/* header -> theme */
#header span.theme {
    margin-top: -1px;
}

    #header span.theme i {
        display: inline-block;
        width: auto;
        font-size: 14px;
        color: var(--white);
        vertical-align: middle;
        color: #ccc;
    }

    #header span.theme small {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 25px;
        margin: 0px 10px;
        border-radius: 40px;
        border: 1px solid #ccc;
        vertical-align: middle;
    }

        #header span.theme small b {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 17px;
            height: 17px;
            background-color: var(--red);
            border-radius: 100%;
            transition: all .5s ease;
        }

    #header span.theme.dark small b {
        left: 28px;
    }

/* dark */
body.dark, body.dark #wrapper, body.dark #header, body.dark #sidebar {
    background-color: var(--black);
}

    body.dark #header span.theme small b {
        left: 28px;
    }

    body.dark #header form input.get-busca {
        background-color: rgba(255,255,255,.3);
    }

        body.dark #header form input.get-busca::placeholder {
            color: #fff;
        }

    body.dark #wrapper .widget.pipeline article {
        background-color: var(--black);
        color: #fff;
    }

    body.dark #wrapper .widget.hoje article span {
        background-color: #222;
    }

    body.dark #wrapper .widget.hoje, body.dark #wrapper .widget.hoje header strong {
        background-color: transparent;
    }

    body.dark #header nav li a, body.dark #sidebar nav li a, body.dark #wrapper .widget.acontece article span strong, body.dark #wrapper .widget.acontece article span small, body.dark #wrapper .widget.producao span.ant, body.dark #wrapper .widget.acontece article abbr, body.dark #wrapper .widget.cambio article span small, body.dark #wrapper .widget.tempo article, body.dark #wrapper .widget.aniversario article strong, body.dark #wrapper .widget.cambio article span em, body.dark #wrapper .widget.pipeline article span, body.dark #header .busca label.check small {
        color: #fff;
    }

        body.dark #wrapper .widget.acontece article abbr::before {
            background-color: #fff;
        }

    body.dark #wrapper .widget.cambio article span:nth-of-type(even) {
        background-color: var(--black);
    }

    body.dark #wrapper .widget.cambio article span small figure img, body.dark #wrapper .widget.tempo article span img {
        filter: invert(1);
    }

    body.dark #header .busca label input[type=search], body.dark #header .busca label select {
        border-color: #555;
    }

    body.dark #wrapper .widget, body.dark #sidebar nav li a:hover, body.dark #sidebar nav li.on a, body.dark #wrapper .widget.producao .grafico b, body.dark #sidebar nav li ul li.on ul li a, body.dark #sidebar nav li ul {
        background-color: #222;
    }

        body.dark #sidebar nav li ul li.on a, body.dark #sidebar nav li ul li.on ul li a:hover {
            background-color: var(--blackgray);
        }

        body.dark #wrapper .widget header strong {
            background-color: var(--red);
            border-color: transparent;
            color: #fff;
        }

        body.dark #wrapper .widget.noticias article figure::after {
            background: linear-gradient(to left, #222, transparent);
        }

    body.dark #header .busca {
        background-color: var(--black);
    }

    body.dark #sidebar footer span a {
        color: #fff;
    }

/* header -> on */
#header.on {
    box-shadow: 100px 10px 30px rgba(0,0,0,.4);
}

/* header -> sidebar */
#header.sidebar {
    left: 100px;
    width: calc(100% - 100px);
}

/* header -> busca */
#header .busca {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 8px;
    left: 47px;
    width: 680px;
    height: auto;
    padding: 22px 2px 10px 22px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 40px 20px rgba(0,0,0,.3);
}

    #header .busca label {
        float: left;
        width: 100%;
        height: auto;
        margin-bottom: 12px;
        padding-right: 22px;
    }

        #header .busca label.select, #header .busca label.submit {
            width: 33.333%;
        }

        #header .busca label.check {
            width: 66.666%;
            padding-left: 20px;
        }

            #header .busca label.check input {
                position: relative;
                float: left;
                width: 18px;
                height: 18px;
                margin-top: 10px;
                border: 1px solid var(--gray);
                border-radius: 100%;
            }

                #header .busca label.check input:checked::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 8px;
                    height: 8px;
                    background-color: var(--gray);
                    border-radius: 100%;
                    transform: translate(-50%, -50%);
                    content: '';
                }

            #header .busca label.check small {
                float: left;
                width: auto;
                margin: 13px 0px 0px 5px;
                font-size: 12px;
            }

        #header .busca label input[type=search] {
            display: inline-block;
            width: 100%;
            height: 36px;
            padding: 0px 20px;
            border: 1px solid #DBDBDB;
            border-radius: 18px;
            font-family: var(--fontmedium);
            font-size: 12px;
            color: var(--gray);
        }

        #header .busca label ::placeholder {
            color: var(--gray);
        }

        #header .busca label select {
            display: inline-block;
            width: 100%;
            height: 36px;
            padding: 0px 20px;
            background: transparent url('../img/select.svg') no-repeat right 20px center;
            background-size: 11px;
            border: 1px solid #DBDBDB;
            border-radius: 18px;
            font-family: var(--fontmedium);
            font-size: 12px;
            color: var(--gray);
        }

        #header .busca label input[type=submit] {
            display: inline-block;
            width: 100%;
            height: 36px;
            background-color: var(--red);
            font-family: var(--fontmedium);
            background-color: var(--red);
            color: #fff;
            border-radius: 18px;
            text-align: center;
            font-size: 12px;
            transition: all .5s ease;
        }

            #header .busca label input[type=submit]:hover {
                background-color: var(--black);
            }

/* sidebar */
#sidebar {
    position: fixed;
    z-index: 30;
    top: 0px;
    left: 0px;
    width: 220px;
    height: 100vh;
    background-color: #f4f4f4;
    transition: all .3s ease;
}

    #sidebar span.logo {
        display: inline-block;
        width: 90px;
        height: auto;
        margin: 38px 0px 47px 50px;
        overflow: hidden;
        transition: all .5s ease;
    }

        #sidebar span.logo img {
            display: block;
            width: 90px;
            height: auto;
        }

    #sidebar nav {
        display: inline-block;
        width: 100%;
        height: auto;
        padding: 0px 28px;
    }

        #sidebar nav li {
            position: relative;
            display: inline-block;
            width: 100%;
            height: auto;
        }

            #sidebar nav li a {
                position: relative;
                display: inline-block;
                width: 100%;
                height: 36px;
                margin-bottom: 10px;
                border-radius: 18px;
                font-size: 13px;
                line-height: 36px;
                color: #393939;
            }

                #sidebar nav li a:hover {
                    background-color: var(--white2);
                }

                #sidebar nav li a.on, #sidebar nav li.on a.on {
                    background-color: var(--red);
                    color: #fff;
                }

                #sidebar nav li a i {
                    position: absolute;
                    top: 9px;
                    left: 24px;
                    font-size: 16px;
                    vertical-align: middle;
                    opacity: 0;
                    transition: all .5s ease;
                }

                #sidebar nav li a strong {
                    position: absolute;
                    top: 0px;
                    left: 24px;
                    line-height: 36px;
                    transition: all .5s ease;
                }

    #sidebar footer {
        position: absolute;
        bottom: 40px;
        left: 0px;
        width: 100%;
        height: auto;
        text-align: center;
    }

        #sidebar footer span {
            display: inline-block;
            width: auto;
            margin: 0px 3px;
            font-size: 12px;
        }

            #sidebar footer span a {
                display: block;
                width: 26px;
                height: 26px;
                color: var(--red);
                border: 1px solid var(--white2);
                line-height: 24px;
                border-radius: 100%;
            }

                #sidebar footer span a:hover {
                    background-color: var(--red);
                    border-color: var(--red);
                    color: #fff;
                }

    /* sidebar -> submenu */
    #sidebar nav li.on a {
        background-color: var(--white2);
    }

    #sidebar nav li:hover ul {
        display: block;
    }

        #sidebar nav li:hover ul li ul {
            display: none;
        }

    #sidebar nav li ul {
        display: none;
        position: absolute;
        z-index: 10;
        top: -10px;
        left: 168px;
        width: 220px;
        height: auto;
        padding: 10px;
        background-color: var(--white2);
        border-radius: 20px;
        box-shadow: 0px 20px 40px rgba(0,0,0,.5);
    }

        #sidebar nav li ul::before {
            position: absolute;
            top: 0px;
            left: -20px;
            width: 20px;
            height: 100%;
            background-color: transparent;
            content: '';
        }

        #sidebar nav li ul li a {
            margin-bottom: 0px;
            padding: 0px 24px;
        }

            #sidebar nav li ul li a i {
                top: 50%;
                left: auto;
                right: 24px;
                opacity: 1;
                transform: translateY(-50%);
                font-size: 8px;
            }

            #sidebar nav li ul li a:hover, #sidebar nav li ul li.on a {
                background-color: #fff;
            }

        /* sidebar -> submenu 2 */
        #sidebar nav li ul li:hover ul {
            display: block;
        }

        #sidebar nav li ul li ul {
            z-index: 30;
            top: -10px;
            left: 214px;
        }

        #sidebar nav li ul li.on ul li a {
            background-color: transparent;
        }

            #sidebar nav li ul li.on ul li a:hover {
                background-color: #fff;
            }

    /* sidebar -> on */
    #sidebar.on {
        width: 100px;
    }

        #sidebar.on span.logo {
            width: 30px;
            margin-left: 32px;
        }

        #sidebar.on nav li a {
            width: 36px;
            text-align: center;
        }

        #sidebar.on nav li i {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
        }

        #sidebar.on nav li strong {
            opacity: 0;
        }

        /* sidebar -> on -> menu */
        #sidebar.on nav li ul {
            left: 60px;
        }

            #sidebar.on nav li ul li a {
                width: 100%;
                text-align: left;
            }

        #sidebar.on nav li i.fa-chevron-right {
            left: auto;
            right: 24px;
            transform: translate(0%, -50%);
        }

        #sidebar.on nav li ul li ul {
            left: 220px;
        }

        #sidebar.on footer {
            display: none;
        }

/* wrapper */
#wrapper {
    float: left;
    width: calc(100% - 220px);
    height: auto;
    margin: 105px 0px 0px 220px;
    padding-right: 25px;
    transition: all .3s ease;
}

    /* wrapper */
    #wrapper.on {
        width: calc(100% - 100px);
        margin-left: 100px;
    }

/* widgets */
#widgets {
    columns: 350px;
    column-gap: 25px;
}

/* wrapper -> widget */
#wrapper .widget {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 25px;
    padding: 62px 20px 20px 20px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 20px 20px 20px rgba(0,0,0,.05);
    page-break-inside: avoid;
    break-inside: avoid-column;
}

    #wrapper .widget header strong {
        position: absolute;
        top: 20px;
        left: 20px;
        width: auto;
        padding: 4px 24px;
        background-color: var(--lightred);
        color: var(--red);
        font-family: var(--fontmedium);
        font-size: 12px;
        border-radius: 20px;
        transition: all .5s ease;
    }

    /* widget -> slider */
    #wrapper .widget.slider {
        height: 300px;
        padding: 0px;
        overflow: hidden;
    }

        #wrapper .widget.slider article {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

            #wrapper .widget.slider article::before {
                position: absolute;
                z-index: 2;
                bottom: 0px;
                left: 0px;
                width: 100%;
                height: 40%;
                background: linear-gradient(to top, #000, transparent);
                content: '';
            }

            #wrapper .widget.slider article img {
                width: 100%;
                height: 300px;
                object-fit: cover;
            }

        #wrapper .widget.slider button.slick-arrow {
            position: absolute;
            z-index: 10;
            bottom: 32px;
            color: #fff;
            font-size: 20px;
        }

        #wrapper .widget.slider button.slick-prev {
            left: 50%;
            margin-left: -70px;
        }

        #wrapper .widget.slider button.slick-next {
            right: 50%;
            margin-right: -70px;
        }

        #wrapper .widget.slider .slick-dots {
            position: absolute;
            z-index: 10;
            bottom: 34px;
            left: 50%;
            width: auto;
            text-align: center;
            transform: translate(-50%);
        }

            #wrapper .widget.slider .slick-dots li {
                display: inline-block;
                width: 9px;
                height: 9px;
                margin: 0px 10px;
                background-color: #fff;
                opacity: .4;
                border-radius: 100%;
                text-indent: -9999em;
                cursor: pointer;
                transition: all .5s ease;
            }

                #wrapper .widget.slider .slick-dots li.slick-active {
                    opacity: 1;
                }

    /* widget -> hoje */
    #wrapper .widget.hoje {
        padding: 0px;
        background-color: transparent;
        box-shadow: none;
        text-align: center;
    }

        #wrapper .widget.hoje header strong {
            position: relative;
            top: auto;
            left: auto;
            display: block;
            margin-bottom: 16px;
            padding: 0px;
            background-color: transparent;
            color: var(--red);
            text-transform: uppercase;
        }

        #wrapper .widget.hoje article {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 25px;
        }

            #wrapper .widget.hoje article span {
                display: block;
                height: 134px;
                padding-top: 22px;
                background-color: #fff;
                box-shadow: 0px 20px 20px rgba(0,0,0,.05);
                border-radius: 20px;
            }

                #wrapper .widget.hoje article span i {
                    display: block;
                    font-size: 30px;
                    color: var(--red);
                }

                #wrapper .widget.hoje article span strong {
                    display: block;
                    margin: 8px 0px 4px 0px;
                    font-weight: bold;
                    font-size: 30px;
                    color: var(--red);
                    text-transform: uppercase;
                }

                #wrapper .widget.hoje article span small {
                    display: block;
                    font-family: var(--fontmedium);
                    font-size: 12px;
                    color: var(--red);
                    text-transform: lowercase;
                }

    /* widget -> pauta */
    #wrapper .widget.pauta article strong {
        display: block;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 18px;
        color: #fff;
    }

    /* widget -> noticias */
    #wrapper .widget.noticias {
        height: 168px;
        background-color: var(--blackgray);
    }

        #wrapper .widget.noticias header strong {
            z-index: 10;
            background-color: transparent;
            border: 1px solid #fff;
            color: #fff;
        }

        #wrapper .widget.noticias .slide {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 168px;
            border-radius: 20px;
            overflow: hidden;
        }

        #wrapper .widget.noticias article {
            position: relative;
            width: 100%;
            height: 168px;
        }

            #wrapper .widget.noticias article figure {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 70%;
                height: 168px;
            }

                #wrapper .widget.noticias article figure::after {
                    position: absolute;
                    z-index: 2;
                    top: 0px;
                    right: 0px;
                    width: 40%;
                    height: 100%;
                    background: linear-gradient(to left, var(--blackgray), transparent);
                    content: '';
                }

                #wrapper .widget.noticias article figure img {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 168px;
                    margin: 0px !important;
                    object-fit: cover;
                    opacity: .7;
                }

            #wrapper .widget.noticias article figcaption {
                position: absolute;
                z-index: 2;
                top: 0px;
                left: 45%;
                width: 55%;
                height: auto;
                padding: 25px 20px 0px 0px;
            }

                #wrapper .widget.noticias article figcaption abbr {
                    display: block;
                    font-family: var(--fontmedium);
                    color: #fff;
                    font-size: 12px;
                    text-decoration: none;
                }

                #wrapper .widget.noticias article figcaption strong {
                    display: block;
                    margin-top: 10px;
                    font-weight: bold;
                    color: #fff;
                    font-size: 14px;
                    line-height: 1.3;
                }

    /* widget -> tiktok */
    #wrapper .widget.social.tiktok article {
        grid-template-columns: 1fr;
    }

.tiktok-embed {
    height: 160px;
    margin: 0px !important;
    overflow: hidden;
}

    .tiktok-embed iframe {
        width: 350px !important;
        margin: -153px 0px 0px -24px;
    }

/* widgets -> noticias -> filmes */
#wrapper .widget.noticias.filmes {
    background-color: #000;
}

    #wrapper .widget.noticias.filmes, #wrapper .widget.noticias.filmes .slide, #wrapper .widget.noticias.filmes article {
        height: 268px;
    }

        #wrapper .widget.noticias.filmes article figure {
            width: 100%;
            height: 100%;
        }

            #wrapper .widget.noticias.filmes article figure img {
                width: 100%;
                height: 100%;
                opacity: .8;
            }

            #wrapper .widget.noticias.filmes article figure::after {
                top: auto;
                bottom: 0px;
                width: 100%;
                height: 40%;
                background: linear-gradient(to top, #000, transparent);
            }

        #wrapper .widget.noticias.filmes article figcaption {
            top: auto;
            bottom: 0px;
            left: 0px;
            width: 100%;
            padding: 40px;
            text-align: center;
        }

/* widget -> pipeline */
#wrapper .widget.pipeline article {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 15px;
    background-color: #FFDEE6;
}

    #wrapper .widget.pipeline article:nth-of-type(1) {
        background-color: #FFF4F7;
    }

    #wrapper .widget.pipeline article:nth-of-type(2) {
        background-color: #FFEDF1;
    }

    #wrapper .widget.pipeline article:nth-of-type(3) {
        background-color: #FFE2E9;
    }

    #wrapper .widget.pipeline article:nth-of-type(4) {
        background-color: #FFDCE4;
    }

    #wrapper .widget.pipeline article:last-of-type {
        margin-bottom: 0px;
    }

    #wrapper .widget.pipeline article strong {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 18px;
    }

    #wrapper .widget.pipeline article p {
        display: block;
        line-height: 1.6;
        font-size: 14px;
    }

    #wrapper .widget.pipeline article span {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: auto;
        text-align: center;
        font-size: 12px;
        color: var(--red);
        font-family: var(--fontmedium);
    }

        #wrapper .widget.pipeline article span i {
            display: block;
            margin-bottom: 5px;
            font-size: 16px;
        }

    #wrapper .widget.pipeline article.aguardando span {
        width: auto;
        font-size: 10px;
        text-transform: lowercase;
    }

/* widget -> producao */
#wrapper .widget.producao .grafico {
    position: relative;
    display: block;
    width: 320px;
    height: 100px;
    margin: -20px auto 0px auto;
}

    #wrapper .widget.producao .grafico::before {
        position: absolute;
        top: 50px;
        left: 20px;
        width: calc(100% - 40px);
        height: 3px;
        background: linear-gradient(to right, #D1D1D1, var(--red));
        transform: rotate(350deg);
        content: '';
    }

    #wrapper .widget.producao .grafico b {
        position: absolute;
        bottom: 16px;
        width: 16px;
        height: 16px;
        background-color: #fff;
        border: 1px solid #D1D1D1;
        border-radius: 100%;
    }

        #wrapper .widget.producao .grafico b.esq {
            left: 20px;
        }

        #wrapper .widget.producao .grafico b.dir {
            top: 20px;
            bottom: auto;
            right: 20px;
            border: 1px solid var(--red);
        }

        #wrapper .widget.producao .grafico b::before {
            position: absolute;
            z-index: 2;
            top: 3px;
            left: 3px;
            width: 8px;
            height: 8px;
            background-color: #D1D1D1;
            border-radius: 100%;
            content: '';
        }

        #wrapper .widget.producao .grafico b.dir::before {
            background-color: var(--red);
        }

    #wrapper .widget.producao .grafico.down::before {
        transform: rotate(10deg);
    }

    #wrapper .widget.producao .grafico.down b.esq {
        bottom: auto;
        top: 20px;
    }

    #wrapper .widget.producao .grafico.down b.dir {
        bottom: 16px;
        top: auto;
    }

#wrapper .widget.producao span.ant {
    float: left;
    width: 50%;
    text-align: left;
}

#wrapper .widget.producao span.atual {
    float: right;
    width: 50%;
    height: auto;
    text-align: right;
}

    #wrapper .widget.producao span.atual strong {
        font-size: 18px;
        color: var(--red);
    }

    #wrapper .widget.producao span.atual small {
        color: var(--red);
    }

#wrapper .widget.producao span strong {
    display: block;
    font-weight: bold;
    font-size: 14px;
}

#wrapper .widget.producao span small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

/* widget -> pauta */
#wrapper .widget.pauta {
    background-color: var(--red);
}

    #wrapper .widget.pauta header strong {
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
    }

    #wrapper .widget.pauta article small {
        display: block;
        margin-bottom: 10px;
        text-align: right;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 10px;
        color: #fff;
    }

    #wrapper .widget.pauta span.bar {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 30px;
        border: 1px solid var(--black);
        border-radius: 15px;
        overflow: hidden;
    }

        #wrapper .widget.pauta span.bar b {
            position: absolute;
            top: 0px;
            left: 0px;
            width: auto;
            height: 100%;
            background-color: var(--black);
        }

        #wrapper .widget.pauta span.bar em {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            font-weight: bold;
            font-size: 12px;
            font-style: normal;
            color: #fff;
            text-transform: uppercase;
            transform: translate(-50%, -50%);
        }

/* widget -> acontece */
#wrapper .widget.acontece article {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

    #wrapper .widget.acontece article:last-of-type {
        margin-bottom: 0px;
    }

    #wrapper .widget.acontece article abbr {
        position: relative;
        display: inline-block;
        width: 100px;
        height: auto;
        text-decoration: none;
        vertical-align: middle;
        text-align: center;
        font-family: var(--fontmedium);
        font-size: 16px;
        line-height: 1.6;
    }

        #wrapper .widget.acontece article abbr::before {
            position: absolute;
            top: calc(50% - 2px);
            left: 50%;
            width: 22px;
            height: 2px;
            background-color: var(--blackgray);
            transform: translate(-50%, -50%);
            content: '';
        }

    #wrapper .widget.acontece article.hoje abbr {
        color: var(--red);
        font-size: 13px;
    }

        #wrapper .widget.acontece article.hoje abbr::before {
            display: none;
        }

    #wrapper .widget.acontece article span {
        display: inline-block;
        width: calc(100% - 110px);
        height: auto;
        vertical-align: middle;
    }

        #wrapper .widget.acontece article span strong {
            display: block;
            font-family: var(--fontmedium);
        }

        #wrapper .widget.acontece article span small {
            display: block;
            margin: 5px 0px;
            color: var(--gray);
            font-size: 12px;
        }

        #wrapper .widget.acontece article span em {
            display: block;
            font-style: normal;
            color: var(--red);
            font-size: 12px;
        }

/* widget -> social */
#wrapper .widget.social header i {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    color: var(--red);
}

    #wrapper .widget.social header i.fa-share-square {
        top: 21px;
        right: 54px;
        font-size: 16px;
    }

#wrapper .widget.social article {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 25px;
}

    #wrapper .widget.social article span {
        position: relative;
        display: block;
        height: 80px;
        border-radius: 10px;
        background-color: #000;
        overflow: hidden;
    }

        #wrapper .widget.social article span a {
            display: block;
            width: 100%;
            height: 100%;
        }

        #wrapper .widget.social article span img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* widget -> cambio */
#wrapper .widget.cambio article span {
    display: inline-block;
    width: 100%;
    height: auto;
    border-radius: 50px;
}

    #wrapper .widget.cambio article span:nth-of-type(even) {
        background-color: #f2f2f2;
    }

    #wrapper .widget.cambio article span small {
        float: left;
        width: 55%;
        padding: 10px 0px 7px 24px;
        font-family: var(--fontmedium);
        font-size: 12px;
    }

        #wrapper .widget.cambio article span small figure {
            display: inline-block;
            width: 19px;
            margin: -2px 5px 0px 0px;
            vertical-align: middle;
        }

            #wrapper .widget.cambio article span small figure img {
                display: block;
                width: 100%;
                height: 19px;
            }

    #wrapper .widget.cambio article span em {
        float: left;
        width: 45%;
        padding: 10px 0px 5px 0px;
        font-style: normal;
        font-family: var(--fontmedium);
        font-size: 12px;
        color: var(--red);
    }

/* widget -> tempo */
#wrapper .widget.tempo article {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 25px;
    text-align: center;
}

    #wrapper .widget.tempo article span img {
        display: block;
        width: auto;
        height: 38px;
        margin: 0px auto 10px auto;
    }

    #wrapper .widget.tempo article span strong {
        display: block;
        font-family: var(--fontmedium);
    }

    #wrapper .widget.tempo article span small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        text-transform: lowercase;
    }

/* widget -> aniversario */
#wrapper .widget.aniversario article span {
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: center;
}

    #wrapper .widget.aniversario article span figure img {
        display: block;
        width: 76px;
        height: 76px;
        margin: 0px auto;
        border-radius: 100%;
    }

#wrapper .widget.aniversario article strong {
    display: block;
    margin-top: 10px;
    font-family: var(--fontmedium);
}

#wrapper .widget.aniversario article .slick-arrow {
    position: absolute;
    top: 50%;
    font-size: 18px;
    transform: translateY(-50%);
    color: var(--gray);
}

    #wrapper .widget.aniversario article .slick-arrow.slick-prev {
        left: 40px;
    }

    #wrapper .widget.aniversario article .slick-arrow.slick-next {
        right: 40px;
    }

/* login */
#login {
    display: inline-block;
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: #fff;
}

    #login aside {
        position: relative;
        float: left;
        width: 100%;
        height: 64vh;
        /* margin: 20px;
    border-radius: 20px; */
        background-color: var(--red);
        overflow: hidden;
    }

        #login aside.bsj {
            position: relative;
            float: left;
            width: 100%;
            height: 64vh;
            /* margin: 20px;
    border-radius: 20px; */
            background-color: #737373;
            overflow: hidden;
        }

        #login aside header strong {
            position: relative;
            z-index: 2;
            display: block;
            margin-top: 60px;
            font-family: var(--fontmedium);
            font-size: 24px;
            color: #fff;
        }

        #login aside .tempo {
            position: relative;
            z-index: 2;
            position: absolute;
            bottom: 200px;
            left: 50%;
            width: 200px;
            height: auto;
            transform: translateX(-50%);
            transition: all .5s ease;
        }

            #login aside .tempo::before {
                position: absolute;
                z-index: 2;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                background-color: transparent;
                content: '';
            }

            #login aside .tempo.on {
                opacity: 1;
            }

            #login aside .tempo img {
                display: block;
                width: 45px;
                height: auto;
                margin: 0px auto 20px auto;
            }

            #login aside .tempo small {
                display: block;
                margin-top: 10px;
                font-family: var(--fontmedium);
                font-size: 16px;
                color: #fff;
            }

                #login aside .tempo small:first-of-type {
                    font-size: 18px;
                }

        #login aside datetime {
            position: absolute;
            z-index: 2;
            bottom: 60px;
            left: 0px;
            width: 100%;
            font-family: var(--fontmedium);
            text-align: center;
            color: #fff;
        }

        #login aside .slide {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

            #login aside .slide figure.swl {
                border-radius: 0;
                background: linear-gradient(104.58deg, #600d0d -1.93%, #320000 0%) !important;
            }

                #login aside .slide figure.swl img {
                    opacity: 1;
                    border-radius: 0;
                }

            #login aside .slide figure {
                border-radius: 0;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100vh;
                background: linear-gradient(180deg, #000000, #737373);
                border-radius: 20px;
                overflow: hidden;
            }

                #login aside .slide figure img {
                    border-radius: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    opacity: .6;
                    mix-blend-mode: screen;
                    filter: grayscale(100%);
                    border-radius: 20px;
                }

.tempo {
    width: 222px;
}

#login .tempoarea {
    position: absolute;
    bottom: 20px;
    height: 100px;
   /* width: 100%;*/
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    left: 0;
    gap: 5vw;
    color: #fff;
    top: 60vh !important;
}

.cotacao-container div {
    line-height: 28px;
}

.loginarea .form-control {
    border-radius: 30px;
    height: 48px;
}

body .loginarea input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
}

.wfit {
    width: fit-content !important;
}

#login .loginarea {
    width: calc(74% - 100px);
    height: auto;
    position: absolute;
    top: 41vh;
    left: 17.5vw;
    padding: 35px 40px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 20px 40px rgba(0,0,0,.2);
}

#login section article {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


    #login section article header {
        display: block;
        text-align: left;
    }

        #login section article header figure img {
            display: block;
            width: 150px;
            height: auto;
            margin: 0px auto 40px auto;
        }

    #login.swl section article header strong {
        color: #E11B22;
    }

    #login section article header strong {
        display: block;
        margin-bottom: 10px;
        font-family: var(--fontmedium);
        font-size: 34px;
        color: var(--red);
    }

    #login section article header a {
        font-weight: 600;
        border-bottom: 1px solid grey;
        padding-bottom: .7rem;
        letter-spacing: .3px;
        font-size: 15px;
    }

    #login section article header p {
        display: block;
        font-family: var(--fontmedium);
        font-size: 17px;
        color: var(--gray);
        line-height: 1.4;
        margin-bottom: 3rem;
    }

    a:hover {
        color: inherit !important;
    }

    #login section article fieldset label {
        position: relative;
        display: inline-block;
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

        #login section article fieldset label input[type=text], #login section article fieldset label input[type=password] {
            display: inline-block;
            width: 100%;
            height: 50px;
            padding: 0px 35px;
            border-radius: 50px;
            border: 1px solid #ADADAD;
            font-family: var(--fontmedium);
            font-size: 16px;
        }

    fieldset {
        width: 50% !important;
    }

    .btn {
        border-radius: 30px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-dark {
        width: 130px !important;
    }

    .swl .btnLogin {
        background-color: #E11B22 !important;
    }

    .btnLogin {
        display: inline-block;
        width: 220px;
        height: 50px;
        background-color: var(--red);
        color: #fff;
        border-radius: 25px;
        font-family: var(--fontmedium);
        font-size: 16px;
        line-height: 50px;
    }

    #login section article fieldset label ::placeholder {
        color: var(--gray);
    }

    #login section article fieldset label b {
        position: absolute;
        z-index: 3;
        top: 50%;
        right: 35px;
        width: auto;
        height: auto;
        transform: translateY(-50%);
        color: #6c6c6c;
        font-size: 20px;
        transition: all .5s ease;
    }

        #login section article fieldset label b:hover {
            color: var(--lightgray);
        }

        #login section article fieldset label b.on {
            color: var(--red);
        }

    #login section article fieldset #lRetorno {
        font-weight: bold;
        color: var(--red);
    }

    #login section article footer span a {
        display: inline-block;
        margin-top: 40px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--gray);
        font-family: var(--fontmedium);
        font-size: 16px;
    }

    .mt-3 {
        margin-top: 1.5rem;
    }

    #login aside {
        height: 100vh !important;
    }


    @media screen and (min-width: 1700px) {
        #login .loginarea {
            top: 55vh !important;
        }
    }

    @media screen and (max-width: 992px) {
        #login {
            height: 100vh;
            max-height: 100dvh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

            #login section article header p {
                font-size: 14px !important;
            }

            #login .loginarea {
                width: 90%;
                left: 4.5vw;
                top: 38vh;
                max-height: 60vh;
                max-height: calc(100dvh - 40vh);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            #login section article header a {
                display: none !important;
            }

        fieldset {
            width: 100% !important;
        }

        #login .tempoarea {
            left: -20px;
            bottom: 45px;
            padding: 0 10px;
        }

        .cotacao-container div {
            line-height: 19px !important;
        }
    }

    @media screen and (max-width: 1500px) {
        #login aside header strong {
            margin-top: 12vh !important;
        }

        .tempoarea {
            display: none !important;
        }
    }

    @media screen and (min-width: 1501px) {
        #login aside header strong {
            margin-top: 20vh !important;
        }

            #login aside header strong svg {
                width: 307px !important;
            }
    }

    @media screen and (min-width: 1365px) and (max-width: 1600px) {

        #login .loginarea {
            top: 50vh;
        }
    }

@media (min-width: 768px) {

    #login section article {
        flex-wrap: nowrap;
    }
}

    .mb-0 {
        margin-bottom: 0 !important;
    }

    .currentTemp {
        font-size: 1.4em !important;
    }

    .swl aside .slide {
        opacity: .15 !important;
    }


/*Somma login*/
.loginSomma {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background: #fdfdfd
}

.SomaBtnLogin {
    background: #2e8cff;
    background: linear-gradient(143deg,rgba(46, 140, 255, 1) 9%, rgba(15, 255, 155, 1) 100%);
    display: inline-block;
    width: 65vh;
    height: 45px;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 50px;
}

@media(max-width: 576px) {
    .SomaBtnLogin{
        max-width:45vh;
    }
}

.sliderSomma {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
}

.sliderSomma img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    animation: fade 8s infinite;
}

    .sliderSomma img:nth-child(1) {
        animation-delay: 0s;
    }

    .sliderSomma img:nth-child(2) {
        animation-delay: 4s;
    }

@keyframes fade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Sawala login*/
.loginSwala {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background-color: black
}

.sawalaInputField {
    background: #2a2a2a !important;
    color: #fff !important;
    border: 1px solid #3a3a3a !important;
}

.sawalaBtnEsqueceu{
    color:white;
}

    .sawalaBtnEsqueceu:hover {
        color: #e11b22!important;
    }

    .SawalaBtnLogin {
        background-color: #e11b22;
        display: inline-block;
        width: 65vh;
        height: 45px;
        color: #fff;
        border-radius: 5px;
        font-size: 16px;
        line-height: 50px;
    }

@media(max-width: 576px) {
    .SawalaBtnLogin {
        max-width: 45vh;
    }
}

.sliderSwl {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
}

    .sliderSwl::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        background: #8B1E2D
    }

    .sliderSwl img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        animation: fadeSwl 16s infinite;
    }

.sliderSwl img:nth-child(1) {
    animation-delay: 0s;
}
.sliderSwl img:nth-child(2) {
    animation-delay: 4s;
}
.sliderSwl img:nth-child(3) {
    animation-delay: 8s;
}
.sliderSwl img:nth-child(4) {
    animation-delay: 12s;
}

@keyframes fadeSwl {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Sawala Esqueci*/
.swalaDestaqueText {
    color: #e11b22;
}

.SawalaBtnEsqueci {
    background-color: #e11b22;
    display: inline-block;
    width: 25vh;
    height: 45px;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 50px !important;
}

.SawalaBtVoltarEsqueci {
    background-color: #212529;
    display: inline-block;
    width: 25vh;
    height: 45px;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 50px !important;
}


.swlMaxSizeInput {
    width: 100%;
    max-width: 400px;
}

/*Somma Esqueci*/
.SommaDestaqueText {
    color: #25afe1;
}

.SommaBtnEsqueci {
    background: linear-gradient(143deg,rgba(46, 140, 255, 1) 9%, rgba(15, 255, 155, 1) 100%);
    display: inline-block;
    width: 25vh;
    height: 45px;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 50px !important;
}

.SommaBtVoltarEsqueci {
    background-color: lightgray;
    display: inline-block;
    width: 25vh;
    height: 45px;
    color: black;
    border-radius: 5px;
    font-size: 16px;
    line-height: 50px !important;
}

.SommaMaxSizeInput {
    width: 100%;
    max-width: 350px;
}