@charset "utf-8";

/* *********************************** */
/*      RESETS E ESTILOS PADRAO        */
/* *********************************** */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; }
ul { list-style: none; }
button, input, select, textarea{ margin: 0; }
img, embed, iframe, object, video{ height: auto; max-width: 100%; border: 0; margin: 0; padding: 0; }
audio { max-width: 100%; }
iframe { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; text-align: left; }
html { font-size: 62.5%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; text-rendering: optimizeLegibility; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
article, aside, figure, footer, header, hgroup, section{ display: block; }
body, button, input, select, textarea{ font-family: var(--font); }
code, pre{ -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; }
body { color: var(--color1); font-weight: 400; line-height: 1.5; -webkit-overflow-scrolling: touch; margin: 0; }
a { cursor: pointer; text-decoration: none; color: inherit; }
a strong { color: currentColor; }
a:hover{ color: inherit; }
code { background-color: whitesmoke; color: #ff3860; font-size: 0.875em; font-weight: normal; padding: 0.25em 0.5em 0.25em; }
hr { background-color: whitesmoke; border: none; display: block; height: 2px; margin: 1.5rem 0; }
input[type="checkbox"], input[type="radio"] { vertical-align: baseline; }
small { font-size: 0.875em; }
span { font-style: inherit; font-weight: inherit; }
strong { font-weight: bolder; }
fieldset { border: none; }
pre { -webkit-overflow-scrolling: touch; background-color: whitesmoke; color: #4a4a4a; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; }
pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; }
table td, table th { text-align: left; vertical-align: middle; }

::-moz-selection { background: #D5EAFF; }
::selection { background: #D5EAFF; }


.swal2-container{ z-index: 99999 !important; }

.centralizador { width:1300px; width:130rem; }
.hack   { clear:both; }
.oculto { display:none; }
.oculto2 { opacity:0.20; pointer-events: none; filter: grayscale(100%);  }
.block  { display: block; }

.flex             { display: flex; }
.inline-flex      { display: inline-flex; }
.flex-wrap        { flex-wrap: wrap; }
.justify-center   { justify-content: center; }
.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.align-center     { align-items: center; }
.align-start      { align-items: flex-start; }
.align-base       { align-items: baseline; }
.align-end        { align-items: flex-end; }
.direction-column { flex-direction: column; }
.direction-row    { flex-direction: row; }

.aesquerda { float:left; }
.adireita  { float:right; }
.center    { margin-right: auto; margin-left: auto; }

.txt-aesquerda { text-align:    left; }
.txt-adireita  { text-align:   right; }
.txt-aocentro  { text-align:  center; }
.txt-justify   { text-align: justify; }

.thin      { font-weight: 100; }
.extralight{ font-weight: 200; }
.light     { font-weight: 300; }
.regular   { font-weight: 400; }
.medium    { font-weight: 500; }
.semibold  { font-weight: 600; }
.bold      { font-weight: 700; }
.extrabold { font-weight: 800; }
.black     { font-weight: 900; }
.italic    { font-style: italic; }

.capitalize { text-transform: capitalize; }
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }

.ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.left{ margin-right: 8px; }
.right{ margin-left: 8px; }

.row    { display: flex; flex-wrap: wrap; }
.cl     { padding: 0 12px; transition: var(--smooth); }
.cl_100 { width: 100%;     }
.cl_90  { width: 90%;      }
.cl_80  { width: 80%;      }
.cl_70  { width: 70%;      }
.cl_75  { width: 75%;      }
.cl_66  { width: 66.666%;  }
.cl_60  { width: 60%;      }
.cl_50  { width: 50%;      }
.cl_40  { width: 40%;      }
.cl_33  { width: 33.333%;  }
.cl_30  { width: 30%;      }
.cl_25  { width: 25%;      }
.cl_20  { width: 20%;      }
.cl_10  { width: 10%;      }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
    .centralizador        { max-width:1300px; max-width:130rem; margin:0 auto; }
    .esconde_desktop      { display: none; }
    .esconde_fulldesktop  { display: none; }
    .exibe_desktop        { display: block; }
    .exibe_fulldesktop    { display: block; }

    .cl_fd     { padding: 0 12px; }
    .cl_fd_100 { width: 100%;     }
    .cl_fd_90  { width: 90%;      }
    .cl_fd_80  { width: 80%;      }
    .cl_fd_70  { width: 70%;      }
    .cl_fd_75  { width: 75%;      }
    .cl_fd_66  { width: 66.666%;  }
    .cl_fd_60  { width: 60%;      }
    .cl_fd_50  { width: 50%;      }
    .cl_fd_40  { width: 40%;      }
    .cl_fd_33  { width: 33.333%;  }
    .cl_fd_30  { width: 30%;      }
    .cl_fd_25  { width: 25%;      }
    .cl_fd_20  { width: 20%;      }
    .cl_fd_10  { width: 10%;      }
    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .centralizador        { width:95%; max-width:1280px; max-width:128rem; margin:0 auto; }
    .esconde_desktop      { display: none; }
    .esconde_smalldesktop { display: none; }
    .exibe_desktop        { display: block; }
    .exibe_smalldesktop   { display: block; }
    
    .cl_d     { padding: 0 12px; }
    .cl_d_100 { width: 100%;     }
    .cl_d_90  { width: 90%;      }
    .cl_d_80  { width: 80%;      }
    .cl_d_70  { width: 70%;      }
    .cl_d_75  { width: 75%;      }
    .cl_d_66  { width: 66.666%;  }
    .cl_d_60  { width: 60%;      }
    .cl_d_50  { width: 50%;      }
    .cl_d_40  { width: 40%;      }
    .cl_d_33  { width: 33.333%;  }
    .cl_d_30  { width: 30%;      }
    .cl_d_25  { width: 25%;      }
    .cl_d_20  { width: 20%;      }
    .cl_d_10  { width: 10%;      }

}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .centralizador    { width:95%; margin: 0 auto; }
    .esconde_tablet   { display: none !important; }
    .exibe_tablet     { display: block; }

    .cl_t     { padding: 0 12px; }
    .cl_t_100 { width: 100%;     }
    .cl_t_90  { width: 90%;      }
    .cl_t_80  { width: 80%;      }
    .cl_t_70  { width: 70%;      }
    .cl_t_75  { width: 75%;      }
    .cl_t_66  { width: 66.666%;  }
    .cl_t_60  { width: 60%;      }
    .cl_t_50  { width: 50%;      }
    .cl_t_40  { width: 40%;      }
    .cl_t_33  { width: 33.333%;  }
    .cl_t_30  { width: 30%;      }
    .cl_t_25  { width: 25%;      }
    .cl_t_20  { width: 20%;      }
    .cl_t_10  { width: 10%;      }
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .centralizador    { width: 95%; margin: 0 auto; }
    .esconde_celular  { display: none !important; }
    .exibe_celular    { display: block; }   

    .cl_c     { padding: 0 12px; }
    .cl_c_100 { width: 100%;     }
    .cl_c_90  { width: 90%;      }
    .cl_c_80  { width: 80%;      }
    .cl_c_70  { width: 70%;      }
    .cl_c_75  { width: 75%;      }
    .cl_c_66  { width: 66.666%;  }
    .cl_c_60  { width: 60%;      }
    .cl_c_50  { width: 50%;      }
    .cl_c_40  { width: 40%;      }
    .cl_c_33  { width: 33.333%;  }
    .cl_c_30  { width: 30%;      }
    .cl_c_25  { width: 25%;      }
    .cl_c_20  { width: 20%;      }
    .cl_c_10  { width: 10%;      }

    .w3-copy{ top: calc(100vh + 390px) !important; }
}


/* ************************************************************************************************************************** */
/*          CSS CLIENTE           CSS CLIENTE           CSS CLIENTE           CSS CLIENTE           CSS CLIENTE               */
/* ************************************************************************************************************************** */
.ps__rail-x,
.ps__rail-y { background: transparent !important; }
.ps__thumb-x,
.ps__thumb-y{ background: #00000080 !important; }

/* CSS ASSINATURA W3 CORP */
:root{
    --color-primaria: var(--color2);     /* ALTERAR */
    --color-secundaria: var(--color-client1);   /* ALTERAR */
    --color-coracao: var(--color-client2);      /* ALTERAR */
    --smooth: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.w3-copy{ position: absolute; bottom: 0; top: calc(100vh + 100px); }
p.w3{ font-size: 12px; color: var(--color-primaria); text-align: center; opacity: .5; }
a.w3-assinatura{ transition: var(--smooth); }
a.w3-assinatura svg{ height: 7px; margin-left: 3px; }
a.w3-assinatura svg path#w,
a.w3-assinatura svg path#t,
a.w3-assinatura svg path#re{ fill: var(--color-primaria); transition: var(--smooth); }
a.w3-assinatura svg path#c,
a.w3-assinatura svg path#o,
a.w3-assinatura svg path#r,
a.w3-assinatura svg path#p{ fill: var(--color-primaria); transition: var(--smooth); }
a.w3-assinatura:hover svg path#w,
a.w3-assinatura:hover svg path#t,
a.w3-assinatura:hover svg path#re,
a.w3-assinatura:hover svg path#c,
a.w3-assinatura:hover svg path#o,
a.w3-assinatura:hover svg path#r,
a.w3-assinatura:hover svg path#p{ fill: var(--color-secundaria); }
/* CSS ASSINATURA W3 CORP */

/* BUTTONS */
.btn{ display: inline-block; font-size: 12px; font-weight: 700; vertical-align: middle; text-align: center; cursor: pointer; border-radius: 8px; color: var(--color5); text-transform: uppercase; padding: 12px 24px; margin-top: 16px; line-height: 1.4; white-space: nowrap; border: 0; box-shadow: var(--shadow-sm); transition: var(--smooth); }
.btn:focus{ opacity: .75; outline: none; }
/* Tamanhos */
.btn-sm{ font-size: 12px; padding: 8px 16px; letter-spacing: -.4px; line-height: initial; }
.btn-lg{ font-size: 14px; padding: 14px 64px; }
/* Variações */
.btn-default      { background-color: var(--color2); }
.btn-default:hover{ background-color: var(--color1); color: var(--color5); }
.btn-user         { background-color: var(--color-user1); }
.btn-user:hover   { background-color: var(--color-user2); color: var(--color-user1); }
.btn-success      { background-color: var(--color-user7); }
.btn-success:hover{ background-color: var(--color-user8); color: var(--color-user7); }
.btn-warning      { background-color: var(--color-user11); }
.btn-warning:hover{ background-color: var(--color-user12); color: var(--color-user11); }
.btn-danger       { background-color: var(--color-user9); }
.btn-danger:hover { background-color: var(--color-user10); color: var(--color-user9); }
.btn-info         { background-color: var(--color-user5); }
.btn-info:hover   { background-color: var(--color-user6); color: var(--color-user5); }
.btn-light        { background-color: var(--color5); color: var(--color-user14); }
.btn-light:hover  { background-color: var(--color-user14); color: var(--color5); }
.btn-dark         { background-color: var(--color-user15); }
.btn-dark:hover   { background-color: var(--color-user16); color: var(--color-user15); }
.btn-disable      { opacity: .5; cursor: default; pointer-events: none; }
/* Icons */
.btn-icon{ display: inline-block; vertical-align: middle; text-align: center; line-height: 40px; padding: 0; height: 40px; width: 40px; }
/* Btn Link */
.btn-link{ display: inline-block; background: none; border: 0; margin-top: 16px; font-size: 14px; color: var(--color2); font-weight: 700; letter-spacing: -.4px; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: var(--smooth); }
.btn-link:hover{ color: var(--color1); }
.btn-link .left{ margin-right: 4px; }
.btn-link .right{ margin-left: 4px; }
/* Link */
.a-link{ color: var(--color-user5); text-decoration: underline; }

/* TAGS */
.tag-float{ position: relative; margin-left: -24px; transform: translate(50%, -50%); border: 3px solid var(--color5); height: 24px; width: 24px; border-radius: 50%; text-align: center; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.tag-user  { background-color: var(--color-user1); color: var(--color5); }
.tag-danger{ background-color: var(--color-user10); color: var(--color-user9); }

/* VARIÁVEIS DO PROJETO */
:root{
    --color1: var(--color-user15);
    --color2: var(--color-user16);
    --color3: #e9ecef;
    --color4: #f8f9fa;
    --color5: #ffffff;
    --font: 'Open Sans', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;

    --color-user1:  #13171f;
    --color-user2:  #d9e2f5;
    --color-user3:  #5974a2;
    --color-user4:  #e4e8ed;
    --color-user5:  #08a1c4;
    --color-user6:  #abe9f7;
    --color-user7:  #67b108;
    --color-user8:  #cdf59b;
    --color-user9:  #fb0000;
    --color-user10: #fdd4d4;
    --color-user11: #f2930d;
    --color-user12: #ffdfb3;
    --color-user13: #8e9faf;
    --color-user14: #c7d3de;
    --color-user15: #252f40;
    --color-user16: #67748e;

    
    --color-facebook: #3b5998;
    --color-twitter: #00aced;
    --color-linkedin: #007bb6;
    --color-youtube: #bb0000;
    --color-instagram: #517fa4;
    --color-pinterest: #cb2027;
    --color-behance: #1769ff;
    --color-skype: #00aff0;
    --color-twitch: #6441a5;
    --color-spotify: #7ab800;
    --color-whatsapp: #25d366;
    --color-whatsapp-alt: #128C7E;
    
    --shadow-sm: 0 4px 7px -1px rgb(0 0 0 / 11%), 0 2px 4px -1px rgb(0 0 0 / 7%);
    --shadow-xl: 0 20px 27px 0 rgb(0 0 0 / 5%);

    --smooth: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}


/*************************************** CSS PADRÃO ***************************************/
.color-verde{ color: #67b108; }
.color-laranja{ color: #f2930d; }
.color-vermelho{ color: #fb0000; }


.color-facebook{ color: var(--color-facebook); }
.color-twitter{ color: var(--color-twitter); }
.color-linkedin{ color: var(--color-linkedin); }
.color-youtube{ color: var(--color-youtube); }
.color-instagram{ color: var(--color-instagram); }
.color-pinterest{ color: var(--color-pinterest); }
.color-behance{ color: var(--color-behance); }
.color-skype{ color: var(--color-skype); }
.color-twitch{ color: var(--color-twitch); }
.color-spotify{ color: var(--color-spotify); }
.color-whatsapp{ color: var(--color-whatsapp); }
.color-whatsapp-alt{ color: var(--color-whatsapp-alt); }

.margin-top{ margin-top: 16px !important; }
.margin-bottom{ margin-bottom: 16px !important; }
.margin-top-0{ margin-top: 0 !important; }
.margin-bottom-0{ margin-bottom: 0 !important; }
.margin-left{ margin-left: 16px !important; }
.margin-right{ margin-right: 16px !important; }
.margin-left-0{ margin-left: 0 !important; }
.margin-right-0{ margin-right: 0 !important; }

.adm-body{ background-color: var(--color4); }
.adm-body.swal2-shown{ padding-right: 0 !important; }
section.adm-dashboard{ margin-top: 83px; margin-left: 278px; padding: 0 12px 24px 0; display: flex; flex-wrap: wrap; }

.row{ width: 100%; }
.row .box{ margin-top: 24px; height: calc(100% - 24px); }
.row .cl > .box{ display: flex; flex-direction: column; }

.box{ border-radius: 10px; background-color: var(--color5); box-shadow: var(--shadow-xl);  }
.box.padding,
.padding{ padding: 16px; }
.box-header{ padding-bottom: 16px; }
.box-header h2{ font-size: 16px; color: var(--color1); line-height: 1.625; font-weight: 600; margin-bottom: 8px; }
.box-header h3{ font-size: 14px; color: var(--color2); line-height: 1.5; font-weight: 400; }
.box-body{ flex-grow: 1; }
.box-txt{ margin-bottom: 48px; }
.box-txt p{ font-size: 14px; margin-bottom: 8px; }
.box-img{ width: 100%; max-width: 430px; max-height: 290px; overflow: hidden; border-radius: 10px; margin-bottom: 16px; }
.box-img img{ height: initial; min-width: none; }
.box-icon{ color: var(--color-user1); font-size: 14px; }

.atualiza_valores{ cursor: pointer; color: var(--color-user7); }
.nada-encontrado{ color: var(--color-user9); font-size:30px; margin: 10px auto; }

.subtitle{ font-size: 14px; color: var(--color2); line-height: 1.5; font-weight: 600; }
.subtitle i:is(.fa-info, .fa-info-circle){ opacity: .75; }
.title{ font-size: 20px; color: var(--color1); line-height: 1.375; font-weight: 700; }
span.porcentagem{ font-size: 14px; font-weight: 700; }
span.porcentagem[data-status="+"]{ color: var(--color-user7); }
span.porcentagem[data-status="-"]{ color: var(--color-user9); }

/* Tabelas */
.box-table{ width: 100%; overflow-x: auto; }
.box-table::-webkit-scrollbar{ width: 8px; height: 8px; }
.box-table::-webkit-scrollbar-thumb{ background: #8e9faf; border-radius: 4px; }
.box-table::-webkit-scrollbar-thumb:hover{ background: #67748E; }
.box-table::-webkit-scrollbar-track{ background: #e9ecef; border-radius: 4px; box-shadow: inset 7px 10px 12px #f0f0f0; }
.box-table table{ width: 100%; }
.box-table table tr{ border-radius: 10px; border-bottom: 1px solid var(--color3); transition: var(--smooth); }
.box-table table tr:last-of-type{ border-bottom-color: transparent; }
.box-table table tr:first-of-type:hover{ background-color: transparent; }
.box-table table tr:hover{ background-color: var(--color3); }
.box-table table tr th.tablecel-width{ min-width: 200px; }
.box-table table tr th.tablecel-options{ text-align: center; max-width: 180px; }
.box-table table tr th,
.box-table table tr td{ line-height: 1.4; padding: 12px 24px 12px 8px; }
.box-table table tr th{ font-size: 10px; color: var(--color2); text-transform: uppercase; font-weight: 600; }
.box-table table tr td{ font-size: 14px; }
.box-table table tr td p[data-status="ativo"],
.box-table table tr td p[data-status="enviado"]{ color: var(--color-user7); font-weight: 600; }
.box-table table tr td p[data-status="inativo"],
.box-table table tr td p[data-status="aguardando-pagamento"]{ color: var(--color-user9); font-weight: 600; }
.box-table table tr td p[data-status="aguardando-envio"]{ color: var(--color-user5); font-weight: 600; }
.table-img{ height: 80px; width: 80px; min-width: 80px; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; margin-right: 16px; }
.table-img img{ height: 100%; max-width: none; }
.table-buttons .btn{ margin: 0 4px; }

/* Formulários */
.box-valor{ display: flex; flex-wrap: wrap;  }
.box-valor-group{ margin-bottom: 20px; padding-right:30px; }
.box-valor-group:last-of-type{ margin-bottom: 0; }
.box-valor-group p{ font-size: 14px; margin-left:2px; }
.box-valor-group label{ display: block; font-size: 12px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; color: var(--color2); }
.box-valor-group label span,
.box-valor-group h4 span{ color: var(--color-user9); }



fieldset.box-form{ border: 1px solid var(--color-user14); border-radius: 6px; padding: 22px 0 12px; transition: opacity 300ms ease-in-out; }
fieldset.box-form legend{ font-size: 14px; font-weight: 600; color: var(--color1); margin-left: 16px; padding: 0 8px; }
.box-form{ display: flex; flex-wrap: wrap; margin-bottom: 24px; }
.box-form-group{ margin-bottom: 24px; }
.box-form-group p{ font-size: 12px; }
.box-form-group label{ display: block; font-size: 12px; font-weight: 600; line-height: 1.2; margin: 0 0 8px 4px; color: var(--color2); }
.box-form-group label span,
.box-form-group h4 span{ color: var(--color-user9); }
.box-form-group input,
.box-form-group select{ height: 40px; }
.box-form-group input,
.box-form-group select,
.box-form-group textarea{ font-size: 14px; color: var(--color1); background-color: var(--color5); border-radius: 8px; border: 1px solid var(--color-user13); width: 100%; max-width: 100%; padding: 8px 12px; line-height: 1.4; -webkit-appearance: none; }
.box-form-group input:focus,
.box-form-group select:focus,
.box-form-group textarea:focus{ outline-color: var(--color-user1); }
.box-form-group textarea{ height: 90px; }

.box-form-group select{   background: transparent; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/></svg>"); background-repeat: no-repeat; background-position-x: 98%; background-position-y: 11px; background-size: 15px; }


.box-form-group .form-btn-unico{ margin-top: 22px; }
.form-info{ padding: 4px 8px; border-radius: 4px; font-size: 11px; display: block; margin-top: 4px; }
.form-info.erro{ background-color: var(--color-user10); color: var(--color-user9); }
.form-info.warning{ background-color: var(--color-user12); color: var(--color-user11); }
.form-info.success{ background-color: var(--color-user8); color: var(--color-user7); }
.form-info.info{ background-color: var(--color-user6); color: var(--color-user5); }
.box-form-group input[data-info="erro"],
.box-form-group select[data-info="erro"],
.box-form-group textarea[data-info="erro"]{ border-color: var(--color-user9); background-image: url('../img/img-info-erro.svg'); background-repeat: no-repeat; background-size: 12px 12px; background-position: right 12px top 12px; }
.box-form-group input[data-info="warning"],
.box-form-group select[data-info="warning"],
.box-form-group textarea[data-info="warning"]{ border-color: var(--color-user11); background-image: url('../img/img-info-warning.svg'); background-repeat: no-repeat; background-size: 12px 12px; background-position: right 12px top 12px; }
.box-form-group input[data-info="success"],
.box-form-group select[data-info="success"],
.box-form-group textarea[data-info="success"]{ border-color: var(--color-user7); background-image: url('../img/img-info-success.svg'); background-repeat: no-repeat; background-size: 12px 12px; background-position: right 12px top 12px; }
.box-form-group input[data-info="info"],
.box-form-group select[data-info="info"],
.box-form-group textarea[data-info="info"]{ border-color: var(--color-user5); background-image: url('../img/img-info-info.svg'); background-repeat: no-repeat; background-size: 12px 12px; background-position: right 12px top 12px; }
.box-form-group select[data-info="erro"],
.box-form-group select[data-info="warning"],
.box-form-group select[data-info="success"],
.box-form-group select[data-info="info"]{ background-position: right 24px top 12px; }
/* Checkbox Switch */
.form-checkbox-switch.horizontal{ display: flex; align-items: center; }
.form-checkbox-switch.horizontal h4{ margin-left: 8px; order: 1; }
.form-checkbox-switch h4{ font-size: 12px; font-weight: 600; line-height: 1.2; margin: 0 0 8px 4px; color: var(--color2); }
.switch{ position: relative; display: inline-block; width: 40px; min-width: 40px; height: 20px; }
.switch input{ opacity: 0; width: 0; height: 0; }
.slider{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color3); -webkit-transition: var(--smooth); transition: var(--smooth); }
.slider:before{ position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: var(--smooth); transition: var(--smooth); }
input:checked + .slider{ background-color: var(--color-user1); }
input:checked + .slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
.slider.round{ border-radius: 10px; }
.slider.round:before{ border-radius: 50%; }
/* Checkbox */
.form-options h4{ display: block; font-size: 12px; font-weight: 600; line-height: 1.2; margin: 0 0 8px 4px; color: var(--color2); }
.form-options .checkbox{ display: flex; align-items: center; margin-bottom: 12px; }
.form-options .checkbox input[type='checkbox'],
.form-options .checkbox label{ cursor: pointer; margin: 0; color: var(--color1); }
.form-options .checkbox input[type='checkbox']{ -webkit-appearance: none; height: 20px; width: 20px; margin-right: 8px; padding: 0; font-size: 0; border-radius: 6px; position: relative; transition: var(--smooth); display: inline-block; }
.form-options .checkbox input[type='checkbox']:checked:active{ background-color: var(--color-user1); }
.form-options .checkbox input[type='checkbox']:checked{ border-color: var(--color-user1); background-color: var(--color-user1); }
.form-options .checkbox input[type='checkbox']:disabled{ background-color: var(--color3); border-color: var(--color4); }
.form-options .checkbox input[type='checkbox']:before{ opacity: 0.14; content: '\f00c'; font-family: 'Font Awesome 5 Pro'; font-size: 10px; font-weight: bold; width: 100%; height: 100%; background: transparent; transition: var(--smooth); display: flex; align-items: center; justify-content: center; }
.form-options .checkbox input[type='checkbox']:checked:before{ opacity: 1; color: var(--color5); }
/* Radio */
.form-options h4{ display: block; font-size: 12px; font-weight: 600; line-height: 1.2; margin: 0 0 8px 4px; color: var(--color2); }
.form-options .radio{ display: flex; align-items: center; margin-bottom: 12px; }
.form-options .radio input[type='radio'],
.form-options .radio label{ cursor: pointer; margin: 0; color: var(--color1); }
.form-options .radio input[type='radio']{ -webkit-appearance: none; height: 20px; width: 20px; margin-right: 8px; padding: 0; font-size: 0; border-radius: 50%; position: relative; transition: var(--smooth); display: inline-block; }
.form-options .radio input[type='radio']:checked:active{ background-color: var(--color-user1); }
.form-options .radio input[type='radio']:checked{ border-color: var(--color-user1); background-color: var(--color-user1); }
.form-options .radio input[type='radio']:before{ opacity: 0.14; content: '\f111'; font-family: 'Font Awesome 5 Pro'; font-size: 8px; font-weight: bold; width: 100%; height: 100%; background: transparent; transition: var(--smooth); display: flex; align-items: center; justify-content: center; padding: 1px 0 0 1px; }
.form-options .radio input[type='radio']:checked:before{ opacity: 1; color: var(--color5); }

/***************** Choices CSS *****************/
.box-form-group.choices{ margin-bottom: 24px; }
.box-form-group .choices .choices__inner { font-size: 14px; color: var(--color1); background-color: var(--color5); border-radius: 8px; border: 1px solid var(--color-user13); width: 100%; max-width: 100%; padding: 8px 12px; display: inline-block; vertical-align: top; max-height: 40px; overflow: hidden; }
.box-form-group .choices .choices__list--dropdown { display: block; opacity: 0; top: 6px; transform-origin: 50% 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform,box-shadow; border: 1px solid var(--color3); border-radius: 8px; box-shadow: var(--shadow-sm); transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0,37px,0)!important; padding: 8px 12px; transition: visibility .25s,opacity .25s,transform .25s; }
.box-form-group .choices .choices__list--dropdown.is-active { transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0,37px,5px)!important; opacity: 1; display: block; pointer-events: auto; }
.box-form-group .choices .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--color3); border-radius: 8px; }
.box-form-group .choices[data-type*=select-one]:after{ color: var(--color2); transition: var(--smooth); }
/***************** Choices CSS *****************/

/**************** Sweet Alert 2 ****************/
.swal2-popup{ border-radius: 10px !important; width: auto !important; min-width: 320px; padding: 16px !important; overflow: hidden; }
.swal2-styled{ display: inline-block; font-size: 12px !important; font-weight: 700 !important; vertical-align: middle !important; text-align: center !important; cursor: pointer !important; border-radius: 8px !important; color: var(--color5) !important; text-transform: uppercase !important; padding: 12px 24px !important; margin-top: 16px !important; line-height: 1.4 !important; white-space: nowrap !important; border: 0 !important; box-shadow: var(--shadow-sm) !important; transition: var(--smooth) !important; }
.swal2-styled.swal2-confirm { background-color: var(--color-user1) !important; color: var(--color5); }
.swal2-styled.swal2-deny { background-color: var(--color-user9) !important; color: var(--color5); }
.swal2-styled.swal2-cancel { background-color: var(--color2) !important; color: var(--color2); }
.swal2-title{ font-size: 18px !important; color: var(--color1) !important; }
.swal2-popup.swal2-toast .swal2-title{ font-size: 14px !important; }
.swal2-html-container{ font-size: 14px !important; color: var(--color2) !important; }
.swal2-footer{ font-size: 14px !important; }
.swal2-footer a{ color: var(--color-user5); font-weight: 600; }
.swal2-footer a:hover{ text-decoration: underline; }
.swal2-validation-message{ font-size: 14px !important; color: var(--color2) !important; }
.swal2-input{ font-size: 14px !important; color: var(--color1) !important; background-color: var(--color5) !important; border-radius: 8px !important; border: 1px solid var(--color-user13) !important; padding: 8px 12px !important; line-height: 1.4 !important; -webkit-appearance: none; height: 40px !important; }
/**************** Sweet Alert 2 ****************/





/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .box-table table tr th, .box-table table tr td{ min-width: 100px; }

}
/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .box-table::-webkit-scrollbar{ width: 4px; height: 4px; }
    .box-table::-webkit-scrollbar-thumb, .box-table::-webkit-scrollbar-track{ border-radius: 2px; }
    .box-table table tr th, .box-table table tr td{ padding-right: 8px; min-width: 100px; }
    .table-img{ height: 60px; width: 60px; min-width: 60px; }
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    section.adm-dashboard{ margin-top: 140px; }

    .box-table::-webkit-scrollbar{ width: 4px; height: 4px; }
    .box-table::-webkit-scrollbar-thumb, .box-table::-webkit-scrollbar-track{ border-radius: 2px; }
    .box-table table tr th, .box-table table tr td{ padding-right: 8px; min-width: 100px; }
    .table-img{ height: 60px; width: 60px; min-width: 60px; }
}
/*************************************** CSS PADRÃO ***************************************/


/*************************************** COMEÇO DO LOGIN ***************************************/
.adm-login-wellcome{ background: url('../img/img-bg.png') no-repeat top; background-size: cover; min-height: 50vh; border-radius: 10px; margin-top: 12px; padding-top: 48px; padding-bottom: 224px; }
.adm-login-wellcome h1{ font-size: 48px; margin: 8px 0; text-align: center; color: var(--color5); }
.adm-login-wellcome h2{ font-size: 16px; text-align: center; color: var(--color5); }

.adm-login-form{ position: relative; margin: -220px auto 0; background-color: var(--color5); border-radius: 10px; max-width: 400px; }
.adm-login-form-cabecalho h3{ padding: 24px; font-size: 20px; text-align: center; font-weight: 600; }
.adm-login-form-cabecalho h5{ padding: 24px 0 0; font-size: 16px; text-align: center; font-weight: 600; color: var(--color2); }
.adm-login-form-cabecalho h4{ padding: 0 0 24px; font-size: 16px; text-align: center; font-weight: 600; color: var(--color2); }
ul.adm-login-form-contas{ display: flex; justify-content: center; }
ul.adm-login-form-contas li{ margin: 0 4px; }
ul.adm-login-form-contas li a{ display: flex; align-items: center; justify-content: center; height: 58px; width: 76px; border-radius: 8px; border: 1px solid var(--color3); transition: var(--smooth); }
ul.adm-login-form-contas li a:hover{ background-color: var(--color3); }
ul.adm-login-form-contas li a img{ height: 24px; width: 24px; }
/* Controle flip login/cadastro */
.flip-card { background-color: transparent; perspective: 1000px; }
.flip-card-inner { position: relative; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card-inner-rotate { transform: rotateY(180deg); }
.flip-card-front,
.flip-card-back { position: relative; width: 100%; height: 100%; background-color: var(--color5); border-radius: 10px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: var(--smooth); box-shadow: var(--shadow-xl); }
.flip-card-back { margin-top: -100%; transform: rotateY(180deg); }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
 
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {

}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {    

    
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .adm-login-form{ max-width: calc(100% - 32px); margin: -160px auto 0; }
}
/*************************************** FIM DO LOGIN ***************************************/

/*************************************** COMEÇO DO CADASTRO ***************************************/
.adm-cadastro-wellcome{ background: url('../img/img-bg.jpg') no-repeat center; background-size: cover; min-height: 50vh; border-radius: 10px; margin-top: 12px; padding-top: 48px; padding-bottom: 224px; }
.adm-cadastro-wellcome h1{ font-size: 48px; line-height: 1; margin: 8px 0; text-align: center; color: var(--color5); }
.adm-cadastro-wellcome h2{ font-size: 16px; text-align: center; color: var(--color5); }

.adm-cadastro .box{ margin-top: -200px; }

.multistep-passos{ margin-bottom: 24px; }
.multistep-passos .passo{ display: flex; justify-content: center; align-items: center; padding: 12px; border-radius: 8px; cursor: default; transition: var(--smooth); }
.multistep-passos .passo.active{ background-color: var(--color3); box-shadow: var(--shadow-sm); background-color: var(--color2); }
.multistep-passos .passo.active span{ color: var(--color5); }
.multistep-passos .passo span{ text-align: center; font-size: 14px; color: var(--color2); transition: var(--smooth); line-height: 1; }

.multistep-form .form{ background-color: var(--color5); transition: var(--smooth); }
.multistep-form .form-2,
.multistep-form .form-3,
.multistep-form .form-4{ display: none; }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
 
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {

}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {    

    
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .multistep-passos .passo span{ font-size: 0; height: 24px; width: 24px; border-radius: 50%; border: 8px solid var(--color3); }
    .multistep-passos .passo.active{ background-color: transparent; box-shadow: none; }
    .multistep-passos .passo.active span{ border: 8px solid var(--color2); box-shadow: var(--shadow-sm); transform: scale(1.5); }
}
/*************************************** FIM DO CADASTRO ***************************************/


/*************************************** COMEÇO DO TOPO ***************************************/
header.adm-topo{ transition-duration: 0.5s; position: fixed; top: 0; right: 0; left: 0; margin: 16px 24px 0 290px; padding: 10px 16px; background: rgba( 255, 255, 255, 0.75 ); backdrop-filter: blur( 5.0px ); -webkit-backdrop-filter: blur( 5.0px ); border-radius: 10px; border: 1px solid rgba( 255, 255, 255, 0.18 ); z-index: 991; }
header.adm-topo .container{ display: flex; justify-content: space-between; }

header.adm-topo.hide{ transition-duration: 0.5s; top: -90px; }


.info-breadcrumb{ font-size: 14px; }
.info-breadcrumb ul{ display: flex; align-items: center; }
.info-breadcrumb ul li{ opacity: .5; }
.info-breadcrumb ul li:last-of-type{ opacity: 1; }
.info-breadcrumb ul li:not(:last-of-type)::after{ content: '/'; font-size: 14px; color: var(--color1); padding: 0 8px; }
.info-page h1{ font-size: 16px; font-weight: 700; }

.adm-topo-conta > ul{ display: flex; align-items: center; height: 100%; }
.adm-topo-conta > ul > li,
.adm-topo-conta > ul > li .adm-topo-conta-perfil{ display: flex; align-items: center; font-size: 14px; font-weight: 600; text-align: right; transition: var(--smooth); padding-left: 16px; cursor: pointer; }
.adm-topo-conta > ul > li p{ transition: var(--smooth); }
.adm-topo-conta > ul > li p i.fa-chevron-down{ font-size: 9px; position: relative; top: -2px; margin-left: 4px; transition: var(--smooth); }
.adm-topo-conta > ul > li p:hover{ color: var(--color-user1); }
.adm-topo-conta-foto{ height: 30px; width: 30px; border-radius: 50%; border: 2px solid var(--color5); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; justify-content: center; align-items: center; }
.adm-topo-conta-foto img{ max-width: none; height: 100%; }
ul.adm-conta-dropdown{ position: absolute; top: 0; margin-top: 70px; display: flex; flex-direction: column; text-align: left; transition: var(--smooth); }
ul.adm-conta-dropdown li{ margin-bottom: 2px; }
ul.adm-conta-dropdown li:last-of-type{ border-top: 1px solid var(--color3); color: var(--color-user9); }
ul.adm-conta-dropdown li a{ display: block; width: 100%; padding: 12px 16px; transition: var(--smooth); }
ul.adm-conta-dropdown li a:hover{ color: var(--color-user1); }
.openPerfil{ opacity: 1; pointer-events: auto; }
.closePerfil{ opacity: 0; pointer-events: none; }
.adm-topo-notification{ display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; min-width: 32px; border-radius: 8px; background-color: var(--color3); transition: var(--smooth); }
.adm-topo-notification:hover{ background-color: var(--color-user2); color: var(--color-user1); }
.adm-topo-notification.active{ background-color: var(--color-user1); color: var(--color5); }
.adm-topo-notification-box{ position: fixed; top: 0; right: 0; margin-top: 70px; width: 250px; transition: var(--smooth); }
.adm-topo-notification-box li{ margin-bottom: 8px; }
.adm-topo-notification-box li a.notification-card{ display: flex; align-items: center; padding: 8px 8px; border-radius: 8px; transition: var(--smooth); }
.adm-topo-notification-box li a.notification-card .notification-img{ display: flex; align-items: center; justify-content: center; border-radius: 8px; height: 32px; width: 32px; min-width: 32px; margin-right: 12px; transition: var(--smooth); box-shadow: var(--shadow-sm); }
.adm-topo-notification-box li a.notification-card[data-info="erro"] .notification-img{ background-color: var(--color-user10); color: var(--color-user9); }
.adm-topo-notification-box li a.notification-card[data-info="warning"] .notification-img{ background-color: var(--color-user12); color: var(--color-user11); }
.adm-topo-notification-box li a.notification-card[data-info="success"] .notification-img{ background-color: var(--color-user8); color: var(--color-user7); }
.adm-topo-notification-box li a.notification-card[data-info="info"] .notification-img{ background-color: var(--color-user6); color: var(--color-user5); }
.adm-topo-notification-box li a.notification-card .notification-img i{ font-size: 12px; }
.adm-topo-notification-box li a.notification-card .notification-txt{ text-align: left; font-size: 14px; }
.adm-topo-notification-box li a.notification-card .notification-txt p{ font-weight: 400; font-size: 12px; color: var(--color2); }
.adm-topo-notification-box li a.notification-card:hover{ background-color: var(--color3); }


/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
    .mobile-bars{ display: none !important; }
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .mobile-bars{ display: none !important; }
}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {    
    header.adm-topo{ margin-left: 24px; }
    .mobile-bars{ transition: var(--smooth); }
    
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    header.adm-topo{ margin-left: 24px; z-index: 990; }
    header.adm-topo .container{ flex-wrap: wrap; }

    .adm-topo-info{ border-bottom: 1px solid var(--color3); margin-bottom: 8px; padding-bottom: 8px; }
    .adm-topo-info,
    .adm-topo-conta{ width: 100%; }
    .adm-topo-conta{ display: flex; justify-content: flex-end; }
    .adm-topo-conta ul{ width: 100%; }
    .adm-topo-conta ul li:first-of-type{ padding-left: 0; }
    .adm-topo-conta ul li.mobile-bars{ flex-grow: 1; justify-content: flex-end; }
    
    .adm-topo-conta-perfil{ padding-left: 0 !important; }
    ul.adm-conta-dropdown{ left: 0; margin-top: 130px; }
    .adm-topo-notification-box{ margin-top: 130px; }

    .mobile-bars{ transition: var(--smooth); }
}
/*************************************** FIM DO TOPO ***************************************/


/*************************************** COMEÇO DO MENU ***************************************/
aside.adm-sidenav{ width: 100%; max-width: 250px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 990; transition: var(--smooth); margin: 16px 0 16px 16px; }
.adm-sidenav-header{ padding: 24px 32px; }
.adm-sidenav-header img{ height: 32px; }
aside.adm-sidenav hr{ background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.15),transparent); background-color: transparent; margin-top: 0; }
aside.adm-sidenav hr:not([size]){ height: 1px; }
nav.adm-sidenav-menu{ height: calc(100% - 190px); overflow-y: auto; }
nav.adm-sidenav-menu::-webkit-scrollbar{ width: 8px; height: 8px; }
nav.adm-sidenav-menu::-webkit-scrollbar-thumb{ background: #8e9faf; border-radius: 4px; }
nav.adm-sidenav-menu::-webkit-scrollbar-thumb:hover{ background: #67748E; }
nav.adm-sidenav-menu::-webkit-scrollbar-track{ background: #e9ecef; border-radius: 4px; box-shadow: inset 7px 10px 12px #f0f0f0; }
li.nav-item{ margin-top: 2px; width: 100%; }
a.nav-link{ display: flex; align-items: center; line-height: 1.4; padding: 10px 16px; margin: 0 10px; font-size: 14px; color: var(--color2); border-radius: 8px; transition: var(--smooth); }
ul.nav-list > li.nav-item:hover > a.nav-link{ background-color: var(--color3); }
ul.nav-list > li.nav-item:hover > a.nav-link .nav-icon{ background-color: var(--color5); }
a.nav-link:hover{ background-color: var(--color3); }
a.nav-link:hover .nav-icon{ background-color: var(--color5); }
.nav-icon{ display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; text-align: center; border-radius: 8px; margin-right: 8px; box-shadow: var(--shadow-sm); background-color: var(--color3); transition: var(--smooth); }
.nav-icon i{ font-size: 12px; }
ul.nav-dropdown{ margin-left: 40px; display: none; }
a.nav-link.active{ background-color: var(--color3); }
a.nav-link.active .nav-icon{ background-color: var(--color-user1); }
a.nav-link.active:hover .nav-icon{ background-color: var(--color-user1) !important; }
a.nav-link.active .nav-icon i{ color: var(--color5); }
a.nav-link.active .nav-txt{ font-weight: 600; }
.adm-sidenav-footer{ padding: 24px 32px; }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
 
}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {    
    .close-menu{ transform: translateX(-274px); opacity: 0; }
    .open-menu{ transform: translateX(0); opacity: 1; }

    aside.adm-sidenav{ max-height: calc(100vh - 32px); margin-left: 24px; }
    section.adm-dashboard{ margin-left: 12px; }

    nav.adm-sidenav-menu::-webkit-scrollbar{ width: 4px; height: 4px; }
    nav.adm-sidenav-menu::-webkit-scrollbar-thumb, nav.adm-sidenav-menu::-webkit-scrollbar-track{ border-radius: 2px; }
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .close-menu{ transform: translateX(-274px); opacity: 0; }
    .open-menu{ transform: translateX(0); opacity: 1; }

    aside.adm-sidenav{ max-height: calc(100vh - 32px); margin-left: 24px; }
    section.adm-dashboard{ margin-left: 12px; }

    nav.adm-sidenav-menu::-webkit-scrollbar{ width: 4px; height: 4px; }
    nav.adm-sidenav-menu::-webkit-scrollbar-thumb, nav.adm-sidenav-menu::-webkit-scrollbar-track{ border-radius: 2px; }
}
/*************************************** FIM DO MENU ***************************************/