@charset "UTF-8";

@font-face {
  font-family: "fsphp";
  src:url("fonts/fsphp.eot");
  src:url("fonts/fsphp.eot?#iefix") format("embedded-opentype"),
    url("fonts/fsphp.woff") format("woff"),
    url("fonts/fsphp.ttf") format("truetype"),
    url("fonts/fsphp.svg#fsphp") format("svg"),
    url("fonts/font_categoria.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: "categoria";
  src:url("fonts/categoria.eot");
  src:url("fonts/categoria.eot?#iefix") format("embedded-opentype"),
  url("fonts/categoria.woff") format("woff"),
  url("fonts/categoria.ttf") format("truetype"),
  url("fonts/categoria.svg#categoria") format("svg") ;
}


[data-icon]:before {
  font-family: "fsphp" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "fsphp" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="iconCateg-"]:before,
[class*=" iconCateg-"]:before{
  font-family: "categoria" !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-font-color-yellow {
  color: var(--color-yellow) !important;
  text-shadow: 2px 3px 4px rgba(0, 0, 0, .2);
}

.color-yellow {
  color: var(--color-yellow) !important;
}

.color-gray {
  color: #CCCCCC!important;
}


.padding-main {
  padding: 5px !important;
}

.padding-main_05 {
  padding: 5px !important;
}

.padding-main_10 {
  padding: 10px !important;
}

.padding-main_15 {
  padding: 15px !important;
}

.padding-main_20 {
  padding: 20px!important;
}

.padding-auto {
  padding: auto!important;
}


.padding-top-05 {
  padding-top: 5px!important;
}
.padding-top-10 {
  padding-top: 10px!important;
}
.padding-top-15 {
  padding-top: 15px!important;
}
.padding-top-20 {
  padding-top: 20px!important;
}

.padding-left-5 {
  padding-left: 5px!important;
}
.padding-left-10 {
  padding-left: 10px!important;
}
.padding-left-15 {
  padding-left: 15px!important;
}
.padding-left-20 {
  padding-left: 20px!important;
}

.padding-right-05 {
  padding-right: 5px!important;
}
.padding-right-10 {
  padding-right: 10px!important;
}
.padding-right-15 {
   padding-right: 15px!important;
 }
.padding-right-20 {
    padding-right: 20px!important;
  }

.padding-bottom-05 {
  padding-bottom: 5px!important;
}
.padding-bottom-10 {
  padding-bottom: 10px!important;
}
.padding-bottom-15 {
  padding-bottom: 15px!important;
}
.padding-bottom-20 {
  padding-bottom: 20px!important;
}


.margin-auto {
  margin: auto!important;
}

.margin-main-05 {
  margin: 5px!important;
}
.margin-main-10 {
  margin: 10px!important;
}
.margin-main-15 {
  margin: 15px!important;
}
.margin-main-20 {
  margin: 20px!important;
}

.margin-top-03 {
  margin-top: 3px!important;
}
.margin-top-05 {
  margin-top: 5px!important;
}
.margin-top-10 {
  margin-top: 10px!important;
}
.margin-top-15 {
  margin-top: 15px!important;
}
.margin-top-20 {
  margin-top: 20px!important;
}

.margin-left-05 {
  margin-left: 5px!important;
}
.margin-left-10 {
  margin-left: 10px!important;
}
.margin-left-15 {
  margin-left: 15px!important;
}
.margin-left-20 {
  margin-left: 20px!important;
}

.margin-right-05 {
  margin-right: 5px!important;
}
.margin-right-10 {
  margin-right: 10px!important;
}
.margin-right-15 {
  margin-right: 15px!important;
}
.margin-right-20 {
  margin-right: 20px!important;
}
.margin-bottom-05 {
  margin-bottom: 5px!important;
}
.margin-bottom-10 {
  margin-bottom: 10px!important;
}
.margin-bottom-15 {
  margin-bottom: 15px!important;
}
.margin-bottom-20 {
  margin-bottom: 20px!important;
}

.margin-bottom-30 {
  margin-bottom: 30px!important;
}

.margin-bottom-40 {
  margin-bottom: 40px!important;
}

::-webkit-calendar-picker-indicator{
  margin-left: -15px;
}


.flex_col_10{
  flex: 10%;
}

.flex_col_20{
  flex: 20%;
}

.flex_col_25{
  flex: 25%;
}

.flex_col_30{
  flex: 30%;
}

.flex_col_35{
  flex: 35%;
}

.flex_col_40{
  flex: 40%;
}

.flex_col_45{
  flex: 45%;
}

.flex_col_50{
  flex: 50%;
}

.width-100{
  width: 100%;
  position: relative;
}

.app_box_shadow_padrao{
  background-image: linear-gradient(to bottom right,#e9eaec,#ffffff);
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,.25));
  box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0,0,0,.25);
  border-radius: 7px;
}

.centraliza{
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
}

.adm_btn_create {
  font-size: 24px; /* Ajuste conforme necessário */
cursor: pointer;
font-weight: 700;
color: var(--color-green);
opacity: .5;
text-decoration: none
}

.adm_btn_create:hover {
  opacity: 1
}

.iconCateg{
  color: #000;
}

.iconCateg-home:before{
  content: "H";
}

.iconCateg-a:before{
  content: "a";
}

.iconCateg-b:before{
   content: "b";
 }
.iconCateg-e:before{
  content: "e";
}

.iconCateg-j:before{
  content: "j";
}
.iconCateg-p:before{
  content: "p";
}

.iconCateg-t:before{
  content: "t";
}

.iconCateg-A1:before{
  content: "A";
}
.iconCateg-B1:before{
  content: "B";
}
.iconCateg-C1:before{
  content: "C";
}
.iconCateg-D1:before{
  content: "D";
}
.iconCateg-E1:before{
  content: "E";
}
.iconCateg-F1:before{
  content: "F";
}
.iconCateg-G1:before{
  content: "G";
}
.iconCateg-H1:before{
  content: "H";
}
.iconCateg-L1:before{
  content: "L";
}
.iconCateg-M1:before{
  content: "M";
}
.iconCateg-N1:before{
  content: "N";
}
.iconCateg-O1:before{
  content: "O";
}
.iconCateg-P1:before{
  content: "P";
}
.iconCateg-Q1:before{
  content: "Q";
}
.iconCateg-R1:before{
  content: "R";
}
.iconCateg-S1:before{
  content: "S";
}
.iconCateg-T1:before{
  content: "T";
}
.iconCateg-U1:before{
  content: "U";
}
.iconCateg-V1:before{
   content: "V";
 }
.iconCateg-X1:before{
    content: "X";
  }
.iconCateg-Z1:before{
     content: "Z";
   }

.icon-coffee:before {
  content: "\e000";
}
.icon-address-card:before{
    content:"\f2bb";
}
.icon-facebook:before {
  content: "\e001";
}
.icon-twitter:before {
  content: "\e002";
}
.icon-instagram:before {
  content: "\e003";
}
.icon-youtube:before {
  content: "\e004";
}
.icon-phone:before {
  content: "\e005";
}
.icon-envelope:before {
  content: "\e006";
}
.icon-map-marker:before {
  content: "\e007";
}
.icon-menu:before {
  content: "\e008";
}
.icon-error:before {
  content: "\e009";
}
.icon-check-square-o:before {
  content: "\e00a";
}
.icon-sign-in:before {
  content: "\e00b";
}
.icon-sign-out:before {
  content: "\e00c";
}
.icon-clock-o:before {
  content: "\e00d";
}
.icon-heartbeat:before {
  content: "\e00e";
}
.icon-bar-chart:before {
  content: "\e00f";
}
.icon-suitcase:before {
  content: "\e010";
}
.icon-play-circle-o:before {
  content: "\e011";
}
.icon-link-broken:before {
  content: "\e012";
}
.icon-link:before {
  content: "\e013";
}
.icon-check:before {
  content: "\e014";
}
.icon-graduation-cap:before {
  content: "\e015";
}
.icon-life-ring:before {
  content: "\e016";
}
.icon-leanpub:before {
  content: "\e017";
}
.icon-plus:before {
  content: "\e018";
}
.icon-minus:before {
  content: "\e019";
}
.icon-search:before {
  content: "\e01a";
}
.icon-unlock-alt:before {
  content: "\e01b";
}
.icon-user:before {
  content: "\e01c";
}
.icon-user-plus:before {
  content: "\e01d";
}
.icon-warning:before {
  content: "\e01e";
}
.icon-info:before {
  content: "\e01f";
}
.icon-home:before {
  content: "\e020";
}
.icon-calendar-check-o:before {
  content: "\e021";
}
.icon-calendar-minus-o:before {
  content: "\e022";
}
.icon-calendar:before {
  content: "\e023";
}
.icon-cog:before {
  content: "\e024";
}
.icon-heart:before {
  content: "\e025";
}
.icon-heart-o:before {
  content: "\e026";
}
.icon-bell-o:before {
  content: "\e027";
}
.icon-bell:before {
  content: "\e028";
}
.icon-bell-slash:before {
  content: "\e029";
}
.icon-bell-slash-o:before {
  content: "\e02a";
}
.icon-trophy:before {
  content: "\e02b";
}
.icon-th-list:before {
  content: "\e02c";
}
.icon-star:before {
  content: "\e02d";
}
.icon-star-o:before {
  content: "\e02e";
}
.icon-star-half-o:before {
  content: "\e02f";
}
.icon-signal:before {
  content: "\e030";
}
.icon-print:before {
  content: "\e031";
}
.icon-pencil-square-o:before {
  content: "\e032";
}
.icon-paper-plane:before {
  content: "\e033";
}
.icon-paper-plane-o:before {
  content: "\e034";
}
.icon-money:before {
  content: "\e035";
}
.icon-gift:before {
  content: "\e036";
}
.icon-flask:before {
  content: "\e037";
}
.icon-flag:before {
  content: "\e038";
}
.icon-credit-card:before {
  content: "\e039";
}
.icon-comments:before {
  content: "\e03a";
}
.icon-comments-o:before {
  content: "\e03b";
}
.icon-bullhorn:before {
  content: "\e03c";
}
.icon-align-justify:before {
  content: "\e03d";
}
.icon-briefcase:before {
  content: "\e03e";
}
.icon-filter:before {
  content: "\e03f";
}
.icon-plus-circle:before {
  content: "\e040";
}
.icon-ban:before {
  content: "\e041";
}
.icon-minus-circle:before {
  content: "\e042";
}
.icon-times-circle:before {
  content: "\e043";
}
.icon-angle-down:before {
  content: "\e044";
}
.icon-thumbs-o-down:before {
  content: "\e045";
}
.icon-thumbs-o-up:before {
  content: "\e046";
}
.icon-thumb-tack:before {
  content: "\e047";
}
.icon-random:before {
  content: "\e048";
}
.icon-exchange:before {
  content: "\e049";
}
.icon-square-o:before {
  content: "\e04a";
}
.icon-whatsapp:before {
  content: "\e04b";
}
.icon-bug:before {
  content: "\e04c";
}
.icon-paint-brush:before {
  content: "\e04d";
}
.icon-pencil:before {
  content: "\e04e";
}
.icon-reply-all:before {
  content: "\e04f";
}
.icon-retweet:before {
  content: "\e050";
}
.icon-rss-square:before {
  content: "\e051";
}
.icon-share-alt:before {
  content: "\e052";
}
.icon-share-square-o:before {
  content: "\e053";
}
.icon-tags:before {
  content: "\e054";
}
.icon-tag:before {
  content: "\e055";
}
.icon-folder-open:before {
  content: "\e056";
}
.icon-folder:before {
  content: "\e057";
}
.icon-folder-o:before {
  content: "\e058";
}
.icon-folder-open-o:before {
  content: "\e059";
}
.icon-bookmark:before {
  content: "\e05a";
}
.icon-bookmark-o:before {
  content: "\e05b";
}
.icon-asterisk:before {
  content: "\e05c";
}
.icon-at:before {
  content: "\e05d";
}
.icon-trash-o:before {
  content: "\e05e";
}
.icon-trash:before {
  content: "\e05f";
}
.icon-ticket:before {
  content: "\e060";
}
.icon-thumbs-up:before {
  content: "\e061";
}
.icon-thumbs-down:before {
  content: "\e062";
}
.icon-lock:before {
  content: "\e063";
}
.icon-upload:before {
  content: "\e064";
}
.icon-download:before {
  content: "\e065";
}
.icon-camera-retro:before {
  content: "\e066";
}
.icon-camera:before {
  content: "\e067";
}
.icon-cogs:before {
  content: "\e068";
}

/*MCE*/
.mce_upload {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: var(--index-modal);
  background: rgba(0, 0, 0, 0.2);
}

.mce_upload_box {
  margin: auto;
  width: 400px;
  max-width: 90%;
  background: #FFFFFF;
  padding: 30px;
  text-align: center;

  -webkit-border-radius: var(--radius-normal);
  -moz-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);
}

.mce_upload_box label.legend {
  margin-bottom: 15px;
}

.mce_upload_box .btn {
  width: 100%;
}

/*MESSAGES*/

.message {
  color: #ffffff;
  font-size: var(--font-normal);
  font-weight: var(--weight-strong);

  display: block;
  width: 100%;
  padding: 15px;
  border: 2px solid #cccccc;
  margin-bottom: var(--area-box);

  -webkit-border-radius: var(--radius-normal);
  -moz-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);
}

form .message {
  text-align: center
}

.message.success {
  --color: var(--color-green);
  color: var(--color);
  border-color: var(--color);
}

.message.info {
  --color: var(--color-blue);
  color: var(--color);
  border-color: var(--color);
}

.message.warning {
  --color: var(--color-yellow);
  color: var(--color);
  border-color: var(--color);
}

.message.error {
  --color: var(--color-red);
  color: var(--color);
  border-color: var(--color);
}

.message_btn {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  background-color: var(--color);
  -webkit-border-radius: var(--radius-normal);
  -moz-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);
  cursor: pointer;
  opacity: .8;
  transition-duration: 0.2s
}

.message_btn:hover {
  opacity: 1
}

.grid_field_container {
  width: 100%;
  position: relative;
  padding-bottom: 5px;
}

.field_1 {
  grid-area: field_1;
}
.field_2 {
  grid-area: field_2;
}
.field_3 {
  grid-area: field_3;
}
.field_4 {
  grid-area: field_4;
}
.field_5 {
  grid-area: field_5;
}
.field_6 {
  grid-area: field_6;
}
.field_7 {
  grid-area: field_7;
}
.field_8 {
  grid-area: field_8;
}
.field_9 {
  grid-area: field_9;
}
.field_10 {
  grid-area: field_10;
}
.field_11 {
  grid-area: field_11;
}
.field_12 {
  grid-area: field_12;
}
.field_13 {
  grid-area: field_13;
}
.field_14 {
  grid-area: field_14;
}
.field_15 {
  grid-area: field_15;
}
.field_16 {
  grid-area: field_16;
}
.field_17 {
  grid-area: field_18;
}
.field_18 {
  grid-area: field_18;
}
.field_19 {
  grid-area: field_19;
}
.field_20 {
  grid-area: field_20;
}

/*AJAX RESPONSES MESSAGES*/

.ajax_response {
  position: fixed;
  padding: 20px 20px 0 0;
  z-index: 998;

  top: 0;
  right: 0;
  width: 300px;
  max-width: 100%;
}

.ajax_response .message {
  color: #ffffff !important;
  font-size: var(--font-small);
  font-weight: var(--weight-normal);
  overflow: hidden;
  border: none;

  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 15px 20px 15px;
  background: #333333;
  margin-bottom: 15px;
  position: relative;

  -webkit-border-radius: var(--radius-normal);
  -moz-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);

  cursor: pointer;
}

.ajax_response .message:before {
  flex-basis: 0;
  margin: -5px 15px 0 0 !important;
  font-size: calc(var(--font-max) * 1.2);
  color: rgba(0, 0, 0, 0.5);
}

.ajax_response .message_time {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4%;
  height: 5px;
  background: rgba(0, 0, 0, 0.5);
}

.ajax_response .message.success {
  background: var(--color-green);
}

.ajax_response .message.info {
  background: var(--color-blue);
}

.ajax_response .message.warning {
  background: var(--color-yellow);
}

.ajax_response .message.error {
  background: var(--color-red);
}

/*BUTTONS*/
.btn {
  display: inline-block;
  padding: 5px 10px;
  background: #555555;
  border: none;
  cursor: pointer;
  text-align: center;
  align-items: center;

  color: #ffffff;
  font-size: 0.9em;
  font-weight: var(--weight-strong);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  text-decoration: none;

  -webkit-border-radius: var(--radius-normal);
  -moz-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);
  transition-duration: var(--hover-duration);
}

.btn-green {
  background-color: var(--color-green);
}

.btn-green:hover {
  background-color: var(--hover-color-green);
}

.btn-blue {
  background-color: var(--color-blue);
}


.color-blue {
  color: var(--color-blue);
}

.color-blue {
  color: var(--color-blue);
}

.color_green_hover {
  color: var(--hover-color-green);
}

.btn-blue2 {
  background-color: #182633;
}

.btn-blue2:hover {
  background-color: var(--color-blue);
}

.btn-red {
  background-color: var(--color-red);
}

.btn-red:hover {
  background-color: var(--hover-color-red);
}

.btn-yellow {
  background-color: var(--color-yellow);
}

.btn-yellow:hover {
  background-color: var(--hover-color-yellow);
}


.cursor-pointer {
  cursor: pointer;
}
.cursor-pointer a {
  text-transform: none;
  color: var(--color-default);
  font-weight: 700;
}

/*DEFAULT PAGINATOR*/
.paginator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px auto;
}

.paginator a, .paginator span {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #cccccc;
  border-right: 0;
  color: #555555;
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition-duration: 0.2s;
}

.paginator a:first-of-type {
  -webkit-border-radius: var(--radius-normal) 0 0 var(--radius-normal);
  -moz-border-radius: var(--radius-normal) 0 0 var(--radius-normal);
  border-radius: var(--radius-normal) 0 0 var(--radius-normal);
}

.paginator a:last-of-type {
  border-right: 1px solid #cccccc;
  -webkit-border-radius: 0 var(--radius-normal) var(--radius-normal) 0;
  -moz-border-radius: 0 var(--radius-normal) var(--radius-normal) 0;
  border-radius: 0 var(--radius-normal) var(--radius-normal) 0;
}

.paginator a:hover {
  background: var(--hover-color-yellow);
  background-size: 200%;
  color: #FBFBFB;
}

.paginator span {
  background: var(--hover-color-yellow);
  color: #FBFBFB;
}


.cont_login_plan {
  width: 60%;
  margin: auto;
  position: relative;

}

.login-background{
  height: 100%;
  background:  url("../images/fundo_login-3.png") top center no-repeat;
  background-position: center;
  background-size: cover;
}

.message_erro{
  color: red;
  font-weight: 400;
  font-size: 0.9em;
  margin:5px;
  padding: 5px;
  text-align: center;
}

.message_erro a{
  text-decoration: none;
  color: #ac8a28;
  font-weight: 700;
  padding: 2px 5px;
}

.cont_form{
  grid-area: login;
  align-items: center;
  font-size: var(--font-small);
  margin: auto;
}

.button_register_disable{
 opacity: 40%;
}

.elementor-8 .elementor-element.elementor-element-8896297 .eael-register-form .eael-lr-footer{
  flex-direction: row;
  justify-content: center!important;
}

.eael-lr-form-wrapper .eael-lr-password-wrapper button, .eael-lr-form-wrapper .eael-lr-password-wrapper-register button {
  right: 20px!important;
  color: #ffcb3c!important;
}

.terms_page_content{
  position: relative;
  margin-top: 15px;
  padding: 20px;
  background: #FFFFFF;
  max-height: 100vh; /* Define a altura máxima como 100% da altura da tela */
  overflow-y: auto; /* Habilita a rolagem vertical caso o conteúdo seja maior que a altura máxima */
}
.termo_box_flex_center {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  position: relative;
  width: 100%;
}

.termo_toggle-content {
  padding: 10px 20px;
  margin: 5px;
  background-color: #2C3037;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  max-width: 183px;
  transition: background-color 0.3s ease;
}

.termo_toggle-content:hover {
  background-color: #febf3c;
}


.web_footer_policy{
  text-transform: none;
}
.auth_form {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  color: #757575;
}

.auth_form .check {
  cursor: pointer;
  display: flex;
  margin: 20px 0 30px 0;
  font-size: var(--font-small);
  transition: var(--hover-duration);
}

.auth_form .check:hover {
  color: #000000;
}

.auth_form .check input {
  width: auto;
  font-size: var(--font-large);
  margin-right: 10px;
  display: inline-block;
}

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 20px;
  background: #545454;
}

.login {
  border-radius: 2px 2px 5px 5px;
  padding: 10px 20px 20px 20px;
  max-width: 320px;
  background: #ffffff;
  position: relative;
  padding-bottom: 80px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}

.login_signature {
  border-radius: 2px 2px 5px 5px;
  padding: 10px 20px 20px 20px;
  max-width: 500px;
  background: #ffffff;
  position: relative;
  padding-bottom: 80px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}

.login_signature_plan {
  border-radius: 2px 2px 5px 5px;
  padding: 10px 20px 20px 20px;
  max-width: 500px;
  background: #d9d9d9;
  position: relative;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
  z-index: 15;
}

.login_signature_image img {
  width: 100%;
  background: #d9d9d9;
}

.login.loading button {
  max-height: 100%;
  padding-top: 50px;
  z-index: 99;
}

.login.loading button .spinner {
  opacity: 1;
  top: 40%;
  z-index: 99;
}

.login.ok button {
  background-color: #8bc34a;
  z-index: 99;
}

.login.ok button .spinner {
  border-radius: 0;
  border-top-color: transparent;
  border-right-color: transparent;
  height: 20px;
  animation: none;
  transform: rotateZ(-45deg);
}

.login input {
  display: block;
  padding: 15px 10px;
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid #ddd;
  transition: border-width 0.2s ease;
  border-radius: 2px;
  color: #ccc;
}

.login input + i.fa {
  color: #fff;
  font-size: 1em;
  position: absolute;
  margin-top: -47px;
  opacity: 0;
  left: 0;
  transition: all 0.1s ease-in;
}

.login input:focus {
  outline: none;
  color: #444;
  border: 1px solid var(--color-yellow);
  border-left-width: 15px;
}

.login input:focus + i.fa {
  opacity: 1;
  left: 30px;
  transition: all 0.25s ease-out;
}

.login a {
  font-size: 0.9em;
  color: var(--color-yellow);
  text-decoration: none;
}

.login .transition a {
  color: #fff;
}

.login .title {
  color: #444;
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 30px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.login button {
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  background: var(--color-yellow);
  color: #fff;
  display: block;
  margin-top: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  max-height: 60px;
  border: 0px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 2px 2px;
  transform: rotateZ(0deg);
  transition: all 0.1s ease-out;
  border-bottom-width: 7px;
}

.login button:hover {
  background: #545454;
}
.login button .spinner {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  border: 4px solid #ffffff;
  border-top-color: rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  left: 50%;
  top: 0;
  opacity: 0;
  margin-left: -20px;
  margin-top: -20px;
  animation: spinner 0.6s infinite linear;
  transition: top 0.3s 0.3s ease, opacity 0.3s 0.3s ease, border-radius 0.3s ease;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}

.login:not(.loading) button:focus {
  border-bottom-width: 4px;
}
.login .link a {
  color: #fff;
}


.custom-dropdown {
  position: relative;
  width: 100%; /* Ajuste a largura conforme necessário */
}

.dropdown-input {
  width: 100%;
  position: relative;
  padding: 5px 10px;
  color: #454545;
  font-weight: 700;
  font-size: 0.8em;
  text-align: left;
  background: transparent;
}

.input-container {
  position: relative;
}

.dropdown-input {
  padding-right: 20px; /* Ajuste o valor para garantir que o ícone não sobreponha o texto */
}

.dropdown-input-tab{
  padding-right: 15px!important;
  padding-left: 2px!important; /* Ajuste o valor para garantir que o ícone não sobreponha o texto */

}

.clear-input {
  position: absolute;
  right: 30px; /* Ajuste a posição horizontal */
  top: 40%;
  transform: translateY(-50%);
  cursor: pointer;
  display: none;
  color: #999;
  font-size: 16px; /* Ajuste o tamanho do ícone conforme necessário */
  z-index: 99;
}

.clear-input-tab {
  font-size: 14px!important; /* Ajuste o tamanho do ícone conforme necessário */
  right: -10px!important;
  background: #F0F0F0;
}

.dropdown-input:not(:placeholder-shown) + .clear-input {
  display: inline;
}

.grid-cell .dropdown-input {
  font-weight: 400;
}

.dropdown-list {
  display: none;
  position: absolute;
  width: 95%;
  font-size: 0.8em;
  overflow-wrap: break-word; /* Força a quebra de linha */
  white-space: normal; /* Permite quebra de linha e mantém espaços em branco */
  top: 100%; /* Posiciona abaixo do elemento pai */
  left: 50%; /* Centraliza horizontalmente */
  transform: translateX(-50%); /* Ajusta o ponto de ancoragem para o centro */
  margin-top: 5px;
  max-height: 150px; /* Altura máxima do dropdown */
  overflow-y: auto;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  list-style-type: none;
  padding: 5px;
  background: #31353D;
  z-index: 1; /* Garante que fique acima dos demais itens */
}

.form-field {
  flex: 1 1 300px; /* Campo se expande mas tem um tamanho mínimo de 300px */
  min-width: 150px; /* Tamanho mínimo do campo */
}

.wallet-new{
  top: 70%!important;
  z-index: 99;
  font-size: 0.85em;
}

.dropdown-list-form {
  margin-top: -15px!important;
  font-size: 0.8em;
  z-index: 999!important;
}

.dropdown-list li {
  padding: 5px;
  cursor: pointer;
  font-weight: 800;
  color: #FFFFFF ;
}

.dropdown-list-ckeck li{
  padding: 0px!important;
}

.multi-select-check{
  padding: 5px;
}

.dropdown-list li:hover {
  background-color: #f2f2f2;
  color: #31353D;

}

.small-text {
  font-size: 0.8em!important;
}

.break-line {
  white-space: normal!important;
  height: auto!important;
}


.appfin-header {
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  z-index: 20;
  background: #e2e1e4;
  text-align: center;
}

.appfin-header-content {
  display: grid;
  grid-template-columns: 1fr 8fr 2fr;
  grid-template-areas: "header title icon";
  width: 100%;
  position:relative;
}
.appfin-header-width-show-sidebar {
  width: calc(100% - 270px)!important;

}

.appfin-header-1 {
  grid-area: header;
  max-width: 25px;
  max-height: 25px;
  margin: 0 15px;
}

.appfin-header-content-box {
  grid-area: title;
  height: 50px;
  text-align: center;
  font-weight: bold;
  color: #31353D;
  position:absolute;
  width: 100%;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.appfin-header-content-box h3 {
  font-size: 1.3em;
  font-weight: 800;
}

/*ICONS IMAGE*/
.appfin-header-icons {
  max-width: 25px;
  max-height: 25px;
  margin: 0 15px;
}

/*APRESENTAÇÃO LOGO*/
/*x*/
.appfin-header-logo {
  grid-area: icon;
  max-width: 150px;
  height: 50px;
  padding: 10px 25px!important;
  right: 0;
  display: flex;
  position:absolute;
  justify-content: center;
  align-items: center;
}

.appfin-header-logo img{
  max-width: 180px;
  height: 80px;
}

.appfin-header-nav {
  grid-area: menu;
  width: 90%;
  text-align: right;
  font-size: var(--font-small);
}

/*ESTILIZAÇÃO DO FOOTER*/
footer {
  background: #33373F;
  grid-area: footer;
  height: 10vh;
  width: 100%;
  bottom: 0;
  text-align: center;
  font-size: var(--font-small);
  color: #F2F2F2;
  z-index: 99;
}

.appfin_footer {
  align-content: center;
  margin-bottom: 0;
  padding: 10px;
  position: fixed;
}


.appfin_signature {
  overflow: hidden;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}

.appfin_signature_header {
  padding: 40px;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}

.appfin_signature_header h2 {
  font-size: var(--font-large);
  font-weight: var(--weight-black);
}

.appfin_signature_header p {
  font-weight: var(--weight-bold);
}

.appfin_signature_header .icon {
  font-size: calc(var(--font-large) * 3);
}

.appfin_signature_me {
  padding: 0 40px 40px 40px;
  background: #ffffff;
}

.appfin_signature_me p {
  margin: 0;
}

.appfin_signature_me_header {
  text-align: center;
  color: #31353d;
  margin: 15px 0;
  font-weight: bold;
}

.appfin_signature_detail {
  padding: 10px;
  background: #FAFAFA;
  margin-bottom: 10px;
  font-size: var(--font-small);
}

.appfin_signature_detail li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.appfin_signature_detail li:nth-child(2n+0) {
  background: #ffffff;
}

.appfin_signature_detail li span {
  flex-basis: 50%;
  padding: 5px;
  color: #555;
  font-weight: 600;
}

.appfin_signature_info {
  color: #888888;
  font-size: var(--font-small);
}

.appfin_signature_orders_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-small);
  color: #888888;
  text-align: center;
}

.appfin_signature_orders_item:nth-child(2n+0) {
  background: #FAFAFA;
}

.appfin_signature_orders_item p {
  padding: 5px;
  color: #555;
  font-weight: 600;
  flex-basis: 33.33%;
}

.appfin_signature_resources {
  padding: 40px;
  background: #ffffff;
  text-align: center;
}

.appfin_signature_resources h3 {
  font-size: var(--font-large);
  margin-bottom: 30px;
  color: #888888;
}

.appfin_signature_resources p {
  margin: 0;
}

.appfin_signature_resources_item {
  color: #888888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
}

.appfin_signature_resources_item.title {
  padding: 20px 0;
  font-weight: bold;
  color: #cccccc;
}

.appfin_signature_resources_item p {
  padding: 8px;
  font-size: 0.95em;
}

.appfin_signature_resources_item p.resouce {
  flex-basis: 60%;
}

.appfin_signature_resources_item p.check {
  flex-basis: 20%;
}

.appfin_signature_resources_item:nth-child(2n+1) {
  background: #FAFAFA;
}

.appfin_signature_resources_item .icon-check {
  color: var(--color-green);
}

.appfin_signature_resources_item .icon-error {
  color: var(--color-red);
}


.appfin_signature_resources_item .resouce {
  font-weight: var(--weight-bold);
}

.appfin_signature_pay {
  padding: 0 40px 40px 40px;
  background: #ffffff;
}

.appfin_signature_pay header {
  text-align: center;
  margin-bottom: 20px;
  color: #888888;
}

.appfin_signature_pay header p {
  margin-top: 5px;
  font-size: var(--font-small)
}

.appfin_signature_pay_card {
  max-width: 500px;
  margin: 0 auto;
}

.appfin_signature_pay_card .label_check {
  margin-bottom: 20px;
}



/*SIDEBAR - ADMIN1*/
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sonar {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
body {
  font-size: 0.9rem;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;

}

/*LISTA CATEGORIA*/
/*----------------------sidebar-menu-------------------------*/

.app_launch_box .sidebar-menu {
  padding-bottom: 10px;
}

.app_launch_box .sidebar-menu .header-menu span {
  font-weight: bold;
  font-size: 0.95em;
  color: #ee8d26;
  padding: 15px 20px 5px 20px;
  display: inline-block;
}

.app_launch_box .sidebar-menu ul li a {
  display: inline-block;
  width: 100%;
  font-size: 0.87em;
  text-decoration: none;
  position: relative;
  padding: 0 30px 1px 20px;
}

.app_launch_box .sidebar-menu ul li a i {
  margin-right: 10px;
  font-size: 12px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
}

.app_launch_box .sidebar-menu ul li a:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}

.app_launch_box .sidebar-menu .sidebar-dropdown .dropdown {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
    cursor: pointer;
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  right: 15px;
  top: 14px;
}

.app_launch_box .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 5px 0;
}

.app_launch_box .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
  padding-left: 25px;
  font-size: 13px;
}

.app_launch_box .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 10px;
  font-size: 8px;
}

.app_launch_box .sidebar-menu ul li a span.label,
.app_launch_box .sidebar-menu ul li a span.badge {
  float: right;
  margin-top: 8px;
  margin-left: 5px;
}

.app_launch_box .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.app_launch_box .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
  float: right;
  margin-top: 0px;
}

.app_launch_box .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  right: 17px;
}


/* CONTEXTO GERAL */
.admin_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 8vh 84vh;
  grid-template-areas: "header" "main" "footer";
}

.admin_container a {
  transition-duration: 0.2s;
  text-decoration: none;
}

.admin_header header{
  grid-area: header;
  height: 8vh;
  width: auto;
  padding: var(--area-normal);
  z-index: 99;
}

.admin_header h3 {
  color: #bdbdbd;
}

.header {
  background: #31353D;
  text-align: center;
}

.header_fixed {
  position: fixed!important;
}


/*APRESENTAÇÃO LOGO*/
.main_header_logo {
  grid-area: logo;
  max-width:45px;
  max-height:45px;
  margin-left: 20px;
  margin-top: 4px;
  align-items: center;
  font-size: var(--font-small);
}


.admin_main {
  grid-area: main;
  z-index: 97;
}

/*DIV CONTENTE HEADER*/
.admin_header_content_box {
  padding: 0;
  display: grid;
  align-items: center;
  grid-template-columns: 6fr;
  grid-template-rows: 10vh;
  grid-template-areas: "user menu notify"
}

.admin_header_content_box .not_found {
  text-align: center;
  margin: 0 auto;
}

.admin_header_content_box .not_found_icon {
  font-size: 6em;
}

.wrapper {
  max-width: 1200px;
  margin: auto;
}

strong {
  font-weight: 600;
}

hr {
  border: none;
  height: 1px;
  background-color: rgba(51, 153, 204, 0.2);
}

.img-placeholder {
  background-image: url("http://placehold.it/200x100/CC99CC/ffffff&text=Feature");
  background-size: cover;
  min-height: 100px;
  min-width: 100px;
}

/*Basic Grid Styles*/
.Grid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.u-textCenter {
  text-align: center;
}

.Grid-cell {
  flex: 1;
}

.Demo {
  padding: .8em 1em 0;
  margin-bottom: 1em;
  transition: background-color 0.3s ease;
  border-radius: 3px;
}
.Demo:after {
  content: "";
  display: block;
  margin-top: .8em;
  height: 1px;
}
.Demo:hover {
  background: rgba(51, 153, 204, 0.6);
}

.Demo.Holly {
  background: rgba(102, 51, 255, 0.1);
}
.Demo.Holly:hover {
  background: rgba(102, 51, 255, 0.25);
}

/* With gutters*/
.Grid--gutters {
  margin-left: -1em;
}
.Grid--gutters .Grid-cell {
  padding-left: 1em;
}
.Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
  margin-right: 1em;
}

/* Justify per row*/
.Grid--right {
  justify-content: flex-end;
}

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

/* Alignment per row */
.Grid--top {
  align-items: flex-start;
}

.Grid--bottom {
  align-items: flex-end;
}

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

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}

.Grid-cell--bottom {
  align-self: flex-end;
}

.Grid-cell--center {
  align-self: center;
}

/*===========================================*/
/* Base classes for all media - Mobile first */
.Grid--cols-2 > .Grid-cell {
  flex: 0 0 100%;
}

.Grid--cols-3 > .Grid-cell {
  flex: 0 0 100%;
}

.Grid--cols-4 > .Grid-cell {
  flex: 0 0 100%;
}

/* One of -- columns*/
.Grid--1of2 > .Grid-cell,
.Grid--1of4 > .Grid-cell:first-of-type,
.Grid--1of3 > .Grid-cell:first-of-type{
  flex: 0 0 100%;
}
.Grid--1of6 > .Grid-cell:first-of-type {
  flex: 0 0 50%;
}

.Grid--fit > .Grid-cell {
  flex: 1;
}
.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}

/* Tablet (medium) screens */
@media (min-width: 30em) {

  .Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .Grid--1of6 > .Grid-cell:first-of-type {
    flex: 0 0 30%;
  }
  .Grid--1of4 > .Grid-cell:first-of-type {
    flex: 0 0 50%;
  }
  .Grid--1of3 > .Grid-cell:first-of-type {
    flex: 0 0 100%;
  }
}

/* Large screens */
@media (min-width: 48em) {
  .Grid--cols-2 > .Grid-cell,
  .Grid--cols-3 > .Grid-cell,
  .Grid--cols-4 > .Grid-cell,
  .Grid--cols-6 > .Grid-cell,
  .Grid--cols-12 > .Grid-cell{
    flex: 1;
  }
  .Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .Grid--1of6 > .Grid-cell:first-of-type {
    flex: 0 0 16.6666%;
  }
  .Grid--1of4 > .Grid-cell:first-of-type {
    flex: 0 0 25%;
  }
  .Grid--1of3 > .Grid-cell:first-of-type {
    flex: 0 0 30%;
  }

  .Grid--20of80 > .Grid-cell:first-of-type {
    flex: 0 0 80%;
  }

}

.navigation {
  list-style: none;
  /*background: deepskyblue;*/
  background: rgba(102, 51, 255, 0.1);
  margin: 0 0 1em;
  border: 1px solid #33cccc;
  border-radius: 3px;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}
.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: #333;
}
.navigation a:hover {
  background: rgba(64, 0, 255, 0.1);
  border-radius: 3px;
}
.navigation:hover {
  background: rgba(102, 51, 255, 0.25);
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}
@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
  .navigation a {
    text-align: center;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }

}
/*===========================================*/
/* Base classes for all media - Mobile first */
.Grid--cols-2 > .Grid-cell {
  flex: 0 0 100%;
}

.Grid--cols-3 > .Grid-cell {
  flex: 0 0 100%;
}

.Grid--cols-4 > .Grid-cell {
  flex: 0 0 100%;
}

.Grid--cols-6 > .Grid-cell {
  flex: 0 0 calc(50% - 1em);
}

.Grid--cols-12 > .Grid-cell {
  flex: 0 0 calc(33.3333% - 1em);
}

.Grid--holly-grail .aside, .Grid--holly-grail .main {
  flex: 1 100%;
}

/* One of -- columns*/
.Grid--1of2 > .Grid-cell,
.Grid--1of4 > .Grid-cell:first-of-type,
.Grid--1of3 > .Grid-cell:first-of-type {
  flex: 0 0 100%;
}

.Grid--1of6 > .Grid-cell:first-of-type {
  flex: 0 0 50%;
}

.Grid--fit > .Grid-cell {
  flex: 1;
}

.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}

/* Tablet (medium) screens */
@media (min-width: 30em) {
  .Grid--cols-4 > .Grid-cell {
    flex: 0 0 calc(50% - 1em);
  }

  .Grid--cols-6 > .Grid-cell {
    flex: 0 0 calc(33.3333% - 1em);
  }

  .Grid--cols-12 > .Grid-cell {
    flex: 0 0 calc(16.6666% - 1em);
  }

  .Grid--holly-grail .aside {
    flex: 1 calc(25% - 1em);
  }

  .Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }

  .Grid--1of6 > .Grid-cell:first-of-type {
    flex: 0 0 30%;
  }

  .Grid--1of4 > .Grid-cell:first-of-type {
    flex: 0 0 50%;
  }

  .Grid--1of3 > .Grid-cell:first-of-type {
    flex: 0 0 100%;
  }
}
/* Large screens */
@media (min-width: 48em) {
  .Grid--cols-2 > .Grid-cell,
  .Grid--cols-3 > .Grid-cell,
  .Grid--cols-4 > .Grid-cell,
  .Grid--cols-6 > .Grid-cell,
  .Grid--cols-12 > .Grid-cell {
    flex: 1;
  }

  .Grid--holly-grail .main {
    flex: 2;
  }
  .Grid--holly-grail .aside {
    flex: 1;
  }
  .Grid--holly-grail .aside-1 {
    order: 1;
  }
  .Grid--holly-grail .main {
    order: 2;
  }
  .Grid--holly-grail .aside-2 {
    order: 3;
  }

  .Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }

  .Grid--1of6 > .Grid-cell:first-of-type {
    flex: 0 0 16.6666%;
  }

  .Grid--1of4 > .Grid-cell:first-of-type {
    flex: 0 0 25%;
  }

  .Grid--1of3 > .Grid-cell:first-of-type {
    flex: 0 0 30%;
  }
  .Grid--1of45 > .Grid-cell:first-of-type {
    flex: 0 0 45%;
  }

  .Grid--gutters.Grid--nested .Grid-cell:first-of-type .Demo {
    margin-right: 0;
  }
}
.content-1of1::before {
  content: "1";
}

.content-1of2::before {
  content: "1/2";
}

.content-1of3::before {
  content: "1/3";
}

.content-1of4::before {
  content: "1/4";
}

.content-1of6::before {
  content: "1/6";
}

.content-1of12::before {
  content: "1/12";
}

.font-color {
    color: #3f4159!important;
  font-size: 0.85em;
}

/* linha */
.row {
  margin-left: 0;
  margin-right: 0;
}

.row:before,
.row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}

/* colunas */
.col {
  display: inline-block;
  vertical-align: middle;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
  margin-right: -4px;
  *zoom: 1;
  *display: inline;
}

.grid-container{
  width: 100%;
  display: grid;
  grid-gap: 5px;
  padding: 5px;
  position: relative;
}

.grid-container-table{
  width: 100%;
  display: grid;
  position: relative;
}

.icon-social-media {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
          "icon-face icon-insta icon-whats";
  margin: auto;
  margin-top: 50px;
  width: 110px;
  height: 20px;
  grid-gap: 20px;
}

.icon-social-media-face img {
  grid-area: icon-face;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 5px 5px 20px 0 rgb(41 46 51 / 80%);

}

.icon-social-media-insta img {
  grid-area: icon-insta;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 5px 5px 20px 0 rgb(41 46 51 / 80%);
}

.icon-social-media-youtube img{
  grid-area: icon-youtube;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 5px 5px 20px 0 rgb(41 46 51 / 80%);
}


/* duas colunas */
@media (min-width: 320px) {

  .col-auto {
    width: auto;
  }

  .col-2 {
    width: 50%;
  }
  .col-3{
    width: 33.333%;
  }
  .col-5 {
    width: 20%;
  }
  .col-05 {
    width: 5%;
  }
  .col-06 {
    width: 6%;
  }
  .col-7 {
     width: 7%;
   }
  .col-8 {
    width: 8%;
  }
  .col-9 {
    width: 9%;
  }
  .col-10 {
    width: 10%;
  }
  .col-12 {
    width: 12%;
  }
  .col-13 {
     width: 13%;
    }
  .col-14 {
    width: 14%;
  }
  .col-15 {
    width: 15%;
  }
  .col-18 {
    width: 18%;
  }
  .col-19 {
    width: 19%;
  }
  .col-22 {
    width: 22%;
  }
  .col-20 {
    width: 20%;
  }
  .col-25 {
    width: 25%;
  }
  .col-24 {
    width: 24%;
  }
  .col-30 {
    width: 30%;
  }
  .col-35 {
    width: 35%;
  }
  .col-40 {
    width: 40%;
  }
  .col-44 {
    width: 44%;
  }
  .col-45 {
    width: 45%;
  }

  .col-48 {
    width: 45%;
  }
  .col-50 {
    width: 50%;
  }

  .col-55 {
    width: 55%;
  }

  .col-60 {
    width: 60%;
  }
  .col-65 {
    width: 65%;
  }
  .col-70 {
    width: 70%;
  }
  .col-75 {
    width: 75%;
  }
  .col-80 {
    width: 80%;
  }

  .col-85 {
    width: 85%;
  }
  .col-90 {
    width: 90%;
  }
  .col-95 {
    width: 95%;
  }
  .col-100 {
    width: 100%;
  }

}

/* sidebar */
@media (min-width: 992px) {
  .col-content {
    width: 60%;
  }

  .col-sidebar {
    width: 40%;
  }

  /*854px */
  /*823px */
  /*812px */
  /*800px   XX*/



  /*414 X*/
  /*412 XXX*/
  /*411 XX*/
  /*390px*/
  @media (max-width: 26em) {
    .chat {
      width: 360px ;
    }
  }

  /*360px    XXXX*/
  @media (max-width: 23em) {
    .chat {
      width: 340px ;
    }
  }

}

@media (max-width: 50em) {

  .cont_login_plan {
    width: 70%;

  }
}

/*672px*/
@media (max-width: 42em) {

  .cont_login_plan {
    width: 80%;

  }
}

/*480px    X*/
@media (max-width: 30em) {

  .cont_login_plan {
    width: 90%;

  }

  footer {
    height: 10vh;
  }
}