/*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 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, #DF0C3C, #79001C);
                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;
}

.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 section article header p {
        font-size: 14px !important;
    }

    #login .loginarea {
        width: 90%;
        left: 4.5vw;
        top: 38vh;
    }

    #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;
        }
}

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

.currentTemp {
    font-size: 1.4em !important;
}
.swl aside .slide{
    opacity: .15!important;

}