@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800,900');
@import url('https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css');
@import "helper/message.css";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat",sans-serif;
}

/*VARIABLES*/
:root {
    --font-min: 0.8em;
    --font-small: 0.875em;
    --font-normal: 1em;
    --font-medium: 1.2em;
    --font-large: 1.4em;
    --font-max: 2em;

    --color-default: #555555;
    --color-white:#ffffff;
    --color-green: #36BA9B;
    --color-blue: #0030b9;
    --color-blue-1:#0059f9;
    --color-yellow: #F5B946;
    --color-red: #D94352;
    --color-fsphp: #1D2025;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-strong: 600;
    --weight-bold: 700;
    --weight-black: 900;

    --hover-color-green: #61DDBC;
    --hover-color-blue: #66D4F1;
    --hover-color-yellow: #FCD277;
    --hover-color-red: #F76C82;
    --hover-duration: 0.3s;

    --gradient-green: linear-gradient(to right,#42E695 0%,#3BB2B8 50%,#42E695 100%);
    --gradient-blue: linear-gradient(to right,#17EAD9 0%,#6078EA 50%,#17EAD9 100%);
    --gradient-red: linear-gradient(to right,#622744 0%,#C53364 50%,#622744 100%);
    --gradient-yellow: linear-gradient(to right,#FCE38A 0%,#F38181 50%,#FCE38A 100%);
     --gradient: #0f1630, #000;

    --radius-normal: 5px;
    --radius-medium: 10px;
    --radius-large: 20px;
    --radius-round: 50%;

    --index-back: -1;
    --index-fold: 2;
    --index-menu: 3;
    --index-modal: 4;

}

:root {
  --cor-0: #ffffff;
  --cor-1: #f7f7f7;
  --cor-2: #ededed;
  --cor-3: #dedede;
  --cor-4: #cccccc;
  --cor-5: #b2b2b2;
  --cor-6: #9c9c9c;
  --cor-7: #717171;
  --cor-8: #595959;
  --cor-9: #404040;
  --cor-10: #2e2e2e;
  --cor-11: #111111;
  --cor-12: #000000;
  --cor-p1: #ffbb00;
  --cor-p2: #e4a30b;
  --cor-p3: #a66f00;
  --cor-p4: #664400;
  --cor-p5: #332200;
  --cor-b-1: #14BDEB;
  --cor-b-2: #0C2A54;
  --cor-b-3: #0c121b;
  --cor-gre-1: #BAFF29;
  --cor-gre-hover: #d1eb44;
  --cor-bg-1: #A0AF84;

    --black: #000000;
    --primary: #aa88ff;
    --green: #8d2;
    --red: #f50;
    --c-1-light: #fa0;
    --c-1-dark: #f20;
    --c-2-light: #fd0;
    --c-2-dark: #f90;
    --c-3-light: #be2;
    --c-3-dark: #3b2;
    --c-4-light: #1ce;
    --c-4-dark: #16d;
    --c-5-light: #c1f;
    --c-5-dark: #70e;

    --gradientop-1: linear-gradient(to bottom, var(--c-1-light), var(--c-1-dark));
    --gradient-2: linear-gradient(to right, var(--c-2-light), var(--c-2-dark));
    --gradientop-2: linear-gradient(to bottom, var(--c-2-light), var(--c-2-dark));
    --gradient-3: linear-gradient(to right, var(--c-3-light), var(--c-3-dark));
    --gradientop-3: linear-gradient(to bottom, var(--c-3-light), var(--c-3-dark));
    --gradient-4: linear-gradient(to right, var(--c-4-light), var(--c-4-dark));
    --gradientop-4: linear-gradient(to bottom, var(--c-4-light), var(--c-4-dark));
    --gradient-5: linear-gradient(to right, var(--c-5-light), var(--c-5-dark));
    --gradientop-5: linear-gradient(to bottom, var(--c-5-light), var(--c-5-dark));
    --gradientop-5: linear-gradient(to bottom, var(--c-5-light), var(--c-5-dark));
}

.cor-0 {
  color: var(--cor-0);
}
.cor-1 {
  color: var(--cor-1);
}
.cor-2 {
  color: var(--cor-2);
}
.cor-3 {
  color: var(--cor-3);
}
.cor-4 {
  color: var(--cor-4);
}
.cor-5 {
  color: var(--cor-5);
}
.cor-6 {
  color: var(--cor-6);
}
.cor-7 {
  color: var(--cor-7);
}
.cor-8 {
  color: var(--cor-8);
}
.cor-9 {
  color: var(--cor-9);
}
.cor-10 {
  color: var(--cor-10);
}
.cor-11 {
  color: var(--cor-11);
}
.cor-12 {
  color: var(--cor-12);
}
.cor-p1 {
  color: var(--cor-p1);
}
.cor-p2 {
  color: var(--cor-p2);
}
.cor-p3 {
  color: var(--cor-p3);
}
.cor-p4 {
  color: var(--cor-p4);
}
.cor-p5 {
  color: var(--cor-p5);
}

.circle-sep-span,.circle-sep::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-image: var(--gradientop-5);
    border-radius: 50%;
    border: 2px solid var(--cor-10);
}

.circle-sep::before {
    margin-right: .5rem;
}

.circle-sep.true::before {
    background-image: var(--gradientop-3);
}

.circle-sep.canceled::before {
    background-image: var(--gradientop-1);
}

.circle-sep.false::before {
    background-image: var(--gradientop-2);
}

img{
    max-width: 100%;
    vertical-align: middle;
    margin: 0;
}

a img {
    border: none;
    margin: 0;
}

ul{
    list-style: none;
}

fieldset{border: 0;}
input,
select,
textarea{padding: 10px; width: 100%;}
input.btn{width: auto; cursor: pointer;}

.gradient {
    background-size: 200% auto;
    transition-duration: 0.5s
}

.gradient-green {
    background-image: var(--gradient-green)
}

.gradient-blue {
    background-image: var(--gradient-blue)
}

.gradient-yellow {
    background-image: var(--gradient-yellow)
}

.gradient-red {
    background-image: var(--gradient-red)
}

.gradient-hover:hover {
    background-position: right center
}

.tooltip{
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.tooltip:hover .tooltip_balloon{
    display: inline;
}

.tooltip_balloon{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 10px;
    font-weight: 500;
    width: 100%;
    padding: 20px;
    background: #463758;
    z-index: 99;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    text-shadow: none !important;
}

.tooltip_balloon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #463758;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

/***********************************
########## ALERT PAYMENTS  #############
***********************************/
.alert_yellow{color: #FAAD50 !important; font-size: .8rem; padding: .3rem .6rem; border-radius: 10px}
.alert_green{ color: #50cd89 !important; font-size: .8rem; padding: .3rem .6rem; border-radius: 10px}
.alert_blue{ color: #0030b9 !important; font-size: .8rem; padding: .3rem .6rem; border-radius: 10px}
.alert_red{ color: #f1416c !important; font-size: .8rem; padding: .3rem .6rem; border-radius: 10px}
.alert_purple{color: #b78fd3 !important; font-size: .8rem; padding: .3rem .6rem; border-radius: 10px}
.alert_vintage{color: #7eb1bc !important; font-size: .8rem; padding: .3rem .6rem; border-radius: 10px}


.message_warning {
    background: rgb(255 245 214);
    border-radius: 0.25rem;
    border-width: 1px 1px 1px 14px;
    border-color: rgb(255, 194, 14);
    border-style: solid;
    color: var(--cor-10);
    display: flex;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.025rem;
    line-height: 1.25rem;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    position: relative;
    width: 100%;
    margin-top: 30px;
}

.message_warning i {
   color:rgb(255, 194, 14);
   font-size: 2rem;
}

.message_warning b {
    color: rgb(224 168 0);
}

.message_warning span {
   color:red;
   font-size: 1rem;
}

/*CONTAINER*/
.content,
.container {
    display: block;
    width: 1200px;
    max-width: 90%;
    margin: 0 auto;
}

.content {
    padding: 60px 0;
}

/*EFFECTS*/
.transition {
    transition-duration: var(--hover-duration);
}

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

.rounded {
    -webkit-border-radius: var(--radius-round);
    -moz-border-radius: var(--radius-round);
    border-radius: var(--radius-round);
}

.box-shadow {
    -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);
}

/*ALIGN*/
.al-center {
    text-align: center;
}

.al-left {
    text-align: left;
}

.al-right {
    text-align: right;
}

/*DISPLAY*/
.ds-block {
    display: block;
}

.ds-flex {
    display: flex;
}

.ds-inblock {
    display: inline-block;
}

.ds-inline {
    display: inline;
}

.ds-none {
    display: none;
}

/*GRADIENTS*/
.gradient {
    background-size: 200% auto;
    transition-duration: 0.5s;
}

.gradient-green {
    background-image: var(--gradient-green);
}

.gradient-blue {
    background-image: var(--gradient-blue);
}

.gradient-yellow {
    background-image: var(--gradient-yellow);
}

.gradient-red {
    background-image: var(--gradient-red);
}

.gradient-hover:hover {
    background-position: right center;
}

:root {
    --border-red:#d75857;
    --border-blue:#0672c6;
    --border-green:#029a7c;
    --border-yellow:#d9a950;
}

.trigger_modal{
    position: fixed;
    right: 0;
    top: 0;
    width: 460px;
    max-width: 80%;
    padding: 20px 20px 0 0;
    cursor: pointer;
    z-index: 999;
}

.trigger_modal .trigger{
    padding: 20px;
    margin: auto 30px auto auto;
    border-radius: 5px;
    color: var(--cor-0);
}

.trigger {
    padding: 10px;
    color: var(--cor-0);
}

.trigger_none{
    margin-bottom: 0;
}

.trigger p{
    margin-top: 10px;
}

.trigger_ajax{
    display: none; 
    cursor: pointer;
}

.trigger_success{
    background-color: var(--color-green);
    border-bottom: 5px solid var(--border-green);
}
.trigger_info{
    background-color: var(--color-blue);
    border-bottom: 5px solid var(--border-blue);
}

.trigger_alert{
    background-color: var(--color-yellow);
    border-bottom: 5px solid var(--border-yellow);
}

.trigger_error{
    background-color: var(--color-red);
    border-bottom: 5px solid var(--border-red);
}

/* Estilo para o contêiner do campo de entrada e ícone */
.contêiner-do-campo {
    position: relative;
    /* outros estilos necessários */
}

/* Estilo para o ícone de olho */
.mostrar-senha {
    position: absolute;
    top: 15px; /* Ajuste conforme necessário */
    right: 15px; /* Ajuste conforme necessário */
    cursor: pointer;
}

/* Estilo para o ícone de olho */
.mostrar-senha-2 {
    position: absolute;
    top: 32px; 
    right: 15px;
    cursor: pointer;
}



.loader {
   display: none;
   border: 2px solid #f3f3f3;
   border-top: 2px solid #622744;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   animation: spin .3s linear infinite;
   position: absolute;
   top: 36%;
}

@keyframes spin {
  0% { transform: rotate(0deg); } /* Início da rotação */
  100% { transform: rotate(360deg); } /* Fim da rotação */
}

.paginator{
    display: flex;
    width: 100%;
    text-align: center;
    padding-right: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    justify-content: flex-end;
}

.paginator li{
    display: inline-block;
    border:1px solid var(--cor-6);
}

.paginator li:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.paginator li:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.paginator li span,
.paginator li a{
    font-size: 0.8em;
    display: inline-block;
    padding: 6px 12px;
    background: transparent;
    -moz-border-radius: 4px;
    text-decoration: none;
    color: var(--color-5);
    font-weight: 600;
}

.paginator li a:hover{
    background:var(--cor-5);
}

.paginator li span{
    background:var(--cor-5);
}