/* Início do reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Fim do reset */

:root{
    --primary-color:#007DC5;
    --secondary-color:#FDB717;
    --primary-color-hover:rgb(8, 93, 143);
}

.flex{
    display:flex;
}

a{
	text-decoration:none;
}

html{
	font-family:'Inter', 'Poppins';
}

.ck-balloon-panel .ck-powered-by{
    display:none;
}

.ck-editor__editable[role="textbox"] {
    /* Editing area */
    min-height: 400px;
}

.mg-x-auto{
    margin-left:auto;
    margin-right:auto;
}

.ck-content .image {
    /* Block images */
    max-width: 80%;
    margin: 20px auto;
}

.login-container{
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-gap:0;
    height:100vh;
}

.screen-login{
    background-color:var(--primary-color);
    padding:0 10%;
}

.screen-login img{
    width:80%;
    height:auto;
    display:block;
    margin:0 auto;
}

.login-form{
    background-color:#E9EAEB;
    text-align:center;
    position:relative;
    /* overflow: hidden; */
}

.inner-login{
    width:70%;
    display:block;
    margin:0 auto;
}

.screen-login h1{
    font-size:2rem;
    font-weight:600;
    color:#fff;
    text-align: center;
    margin:15% 0 5% 0;
    font-family:"Poppins";
}

.login-form form{
    /* width:70%; */
    display:block;
    margin:0 auto;
}

.login-form h2{
    font-size:1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    color:var(--primary-color);
    font-family:"Poppins";
}

.login-form p{
    margin:0.5rem 0;
    color:#414C56;
    opacity: 0.7;
}

.help-user{
    margin-top:5%;
}

.help-user p a{
    font-size:0.9rem;
    color:#414c56;
}

.login-form img{
    width:150px;
    display:block;
    margin: 40% auto 15% auto;
    height:auto;
}

.login-form input{
    width:100%;
    height:3.2rem;
    border:1px solid var(--primary-color)49;
    border-radius:6px;
    margin:0.7rem 0; 
}

.btn-submit{
    width:50%;
    padding:1rem 0;
    border:1px solid var(--primary-color);
    background-color: var(--primary-color);
    font-family: 'Poppins';
    color:#fff;
    letter-spacing: 0.02rem;
    border-radius:2rem;
    transition:0.2s ease-in-out;
    margin-top:1rem;
    position:relative;
}
    .btn-submit:hover{
        background-color: var(--primary-color-hover);
    }

::placeholder{
    font-family:'Poppins';
    font-weight:300;
    padding-left:1rem;
    letter-spacing: 0.01rem;
    font-size:0.8rem;
}

.box-msg{
    display:flex;
    flex-direction: row;
    position:absolute;
    border-radius:5px;
    padding:1rem 1rem 1rem 4rem;
    right:10%;
    bottom:250px;
    /* border:1px solid #2d1d723f; */
    box-shadow: 0 1px 2px rgba(0,0,0,0.11);
    transform: translateY(calc(100% + 250px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

.active{
    transform: translateY(250px);
}

.form-page{
    overflow-y: hidden;
    position:relative;
    /* height: 400px; */
}

.alert-white,
.alert-white i,
.alert-white .icon{
    background-color:#fff;
    color:var(--primary-color);
    border:1px solid transparent;
}
.alert-ocean,
.alert-white i,
.alert-ocean .icon{
    background-color:var(--primary-color);
    color:var(--primary-color);
    border:1px solid var(--primary-color-hover);
}
.alert-info,
.alert-white i,
.alert-info .icon{
    background-color:#FC9700;
    color:#FC9700;
    border:1px solid #be7301;
}
.alert-error,
.alert-white i,
.alert-error .icon{
    background-color:#D0312D;
    color:#D0312D;
    border:1px solid #D0312D;
}
.alert-success,
.alert-white i,
.alert-success .icon{
    background-color:#29AB87;
    color:#29AB87;
    border:1px solid #29AB87;
}

.box-msg p{
    color:#fff;
    font-weight: 300;
}

.box-msg .icon{
    text-align:center;
    background-color:#fff;
    width:45px;
    height:100%;
    position:absolute;    
    left:0px;
    top:0px;
    border-radius: 3px 0 0 3px;
}

.box-msg .icon:after{
    display:block;
    content:'';
    width:10px;
    height:10px;
    /* border:1px solid #bdbdbd; */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position:absolute;
    background-color:#fff;
    right:-5px;
    top:50%;
    margin-top:-5px;
}

.box-msg .icon i{
    top:50%;
    position:absolute;
    font-size:20px;
    left:12px;
    margin-top:-10px;
}

.close-msg{
    /* float:right; */
    position:absolute;
    right:0;
    top:0;
    color:#fff;
    border:none;
    background-color:transparent;
}

.validator-list h3{
    color:#D0312D;
    font-weight:600;
    text-transform: uppercase;
    margin-bottom:1rem;
}

.error-list li{
    font-size:0.9rem;
    margin:0.5rem 0;
}

.loader{
    border:4px solid #fff;
    border-radius:50%;
    border-top:4px solid var(--primary-color);
    border-bottom:4px solid var(--primary-color);
    width:30px;
    height:30px;
    position:absolute;
    top:8px;
    left:8px;
    animation: loading 2s linear infinite;
}

.loader-small{
    border:3px solid #fff;
    border-radius:50%;
    border-top:3px solid var(--primary-color);
    border-bottom:3px solid var(--primary-color);
    width:20px;
    height:20px;
    /* position:absolute; */
    /* top:8px;
    left:8px; */
    animation: loading 2s linear infinite;
}

@keyframes loading{
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}

.alert-msg{
    text-align: left;
    width:90%;
    background-color: rgba(228,208,10, 0.3);
    padding:0.8rem 0.8rem;
    border:1px solid  #C8A606;
    border-radius:5px;
    display:block;
    margin:1rem auto;
}

.success-msg{
    text-align: left;
    width:90%;
    background-color: #62a70e46;
    padding:0.8rem 0.8rem;
    border:1px solid  #61A70E;
    border-radius:5px;
    display:block;
    margin:1rem auto;
}

.alert-msg h4{
    font-weight:600;
    text-transform: uppercase;
    color:  #C8A606;
    font-family:'Poppins';
    font-size:0.8rem;
}

.alert-msg li{
    color: #C8A606 ;
    font-size:0.9rem;
    margin:0.8rem 0;
    margin-left:1rem;
}

.success-msg h4{
    font-weight:600;
    text-transform: uppercase;
    color:#253f04;
    font-family:'Poppins';
    font-size:0.8rem;
}

.success-msg p{
    color: #253f04;
    font-size:0.9rem;
    margin:0.8rem 0;
    margin-left:1rem;
}

.danger-msg{
    text-align: left;
    width:60%;
    background-color: rgba(208,49,45, 0.3);
    padding:0.8rem 0.8rem;
    border:1px solid  #D0312D;
    border-radius:5px;
    display:block;
    margin:1rem auto;
}

.danger-msg h4{
    font-weight:600;
    text-transform: uppercase;
    color:  #D0312D;
    font-family:'Poppins';
    font-size:0.8rem;
}

.danger-msg li{
    color: #D0312D ;
    font-size:0.9rem;
    margin:0.8rem 0;
    margin-left:1rem;
}

.painel-container{
    display:grid;
    grid-template-columns: 250px calc(100% - 250px);
    width:100%;
    height:100%;
    /* background-color:#F9FAFD; */
}

.side-menu{
    background-color:var(--primary-color);
    height:100dvh;
    position:fixed;
}

.horizontal-bar{
    background-color:#fff;
    padding:0 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15);
}

.horizontal-bar .image-user{
    width:50px;
    height:50px;
    border:2px solid #414c5650;
    border-radius:50%;
}

.menu-topbar-horizontal{
    display:flex;
    gap:1.5rem;
    align-items: center;
}   

.menu-subitems{
    display:flex;
    align-items: center;
    position:relative;
    cursor:pointer;
    gap:10px;
}

.menu-subitems:hover{
    color:var(--primary-color);
}

.menu-subitems{
    background-color:#FAFAFD;
    padding-right:0.75rem;
    padding-left:0.75rem;
    border-width:0 1px;
    border-color:#6666662a;
    border-style: solid;
}

.dropdown-menu{
    display:block;
    position: absolute;
    top:100%;
    left: 0;
    width:100%;
    padding:0.3rem 1rem;
    transition:.2s ease-in-out;
}

.hide{
    display:none;
    transition:.2s ease-in-out;
}

.titulo-dropdown{
    font-size:0.9687rem;
    color:#414C56;
    font-weight:600;
    margin:0.3rem 0 0.2rem 0;
}

.dropdown-menu ul li{
    padding:0.5rem 0;
}

.dropdown-menu ul li a{
    color:#414c5688;
    font-size:0.9rem;
}

.profile-menu button{
    background: transparent;
    border:none;
    color:#414c5688;
    font-size:0.9rem;
    padding:0;
}

.menu-subitems:after{
    content: none;
}

.menu-subitems h5{
    font-size:1rem;
    font-weight: 600;
    color:#666666;
    /* line-height: 1.1; */
    margin-block-start: 1rem;
    margin-block-end: 0.3rem;
}

.menu-subitems h6{
    font-size:0.692rem;
    font-weight: 300;
    text-transform: uppercase;
    /* line-height: 1.1; */
    margin-block-start: 0.5rem;
    margin-block-end: 1.1rem;
}

.menu-topbar-horizontal .horizontal-bar-icon i{
    font-size:1.7rem;
    color:#414c56a4;
}

.info-submenu form input{
    background-color:transparent;
    text-transform:uppercase;
    color:#fff;
    font-size:0.7rem;
    border:none;
    padding:0rem 0rem;
}

.lateral-menu{
    padding:0 1rem;
}

.lateral-menu img{
    width:50%;
    height:auto;
    margin:10% auto 3% auto;
    display:block;
}

.side-menu-painel ul{
    margin-top:10%;
}

.side-menu-painel ul li{
    margin:0.265rem 0;
}

.side-menu-painel ul li a{
    color:#fff;
    font-family:'Poppins';
    font-weight:400;
    font-size:0.8rem;
    padding:0.9rem 0.7rem;
    display:flex;
    align-items:center;
    /* justify-content:space-between; */
    transition:.2s ease-in-out;
    position:relative;
}

.side-menu-painel ul li a p{
    padding:0.3rem 0 0.3rem 0.3rem;    
}

.side-menu-painel ul li a:hover{
    background-color: var(--primary-color-hover);
    border-radius: 0.325rem;
}

.side-menu-painel ul li a i{
    margin-right: 0.5rem;
    font-size:1.2rem;
}

.side-menu-painel ul h3{
    color:#fff;
    opacity:0.7;
    font-size:0.8rem;
    text-transform:uppercase;
    padding:1rem 0;
}

.side-menu-painel ul li a:after{
    content: url(../images/chevron-right.png);
    position:absolute;
    right: 0.5rem;
}

.spaced-content h2{
    color:var(--primary-color-hover);
    font-family:'Poppins';
    font-weight:600;
    text-transform: uppercase;
    font-size:1.5rem;
    margin-top:5%;
    position:relative;
}

.spaced-content h2 span{
    color:var(--secondary-color);
    font-weight:700;
}

.option-buttons{
    margin:4% 0 2% 0;
}

.option-buttons li{
    display:inline-block;
    margin-right: 1rem;
}

.option-buttons li a{
    background-color:var(--secondary-color);
    color:var(--primary-color);
    font-weight:600;
    text-transform: uppercase;
    font-family:'Poppins';
    padding:0.5rem 2rem;
}

.listagem{
    width:100%;
    display:table;
    text-align:center;
    /* margin-top:4%; */
}

.listagem th{
    padding:0.5rem 0;
    background-color:var(--primary-color);
    color:#fff;
    font-weight:600;
    text-transform: uppercase;
    font-family:'Poppins';
    border-right:1px solid rgba(255,250,250,0.3);
}

.banner-image img{
    width:100px;
    height:auto;
}

.formulario-painel{
    width:100%;
    display:block;
    margin:4% auto;
}

.formulario-painel label{
    font-family:'Poppins';
    font-weight:600;
    color:var(--primary-color);
    font-size:0.9rem;
    margin-bottom:0.2rem;
    text-transform: uppercase;
}

.formulario-painel input[type=text]{
    width:100%;
    height:3rem;
    border:1px solid var(--primary-color);
    border-radius:2px;
    margin-bottom:1.5rem;
}

.formulario-painel input[type=password]{
    width:100%;
    height:3rem;
    border:1px solid var(--primary-color);
    border-radius:2px;
    margin-bottom:1.5rem;
}

.formulario-painel select{
    width:100%;
    height:3rem;
    border:1px solid var(--primary-color);
    /* border-radius:2px; */
    margin-bottom:1.5rem;
    color:var(--primary-color);
    font-size:0.9rem;
}

.formulario-painel select option span{
    font-weight:600;
}

.formulario-painel textarea{
    width:100%;
    /* height:3rem; */
    border:1px solid var(--primary-color);
    border-radius:2px;
    margin-bottom:1.5rem;
}

.preview-link{
    font-size:0.9rem;
    color:var(--primary-color);
    opacity:0.8;
    font-weight:400;
}

.formulario-painel input[type=file]{
    /* opacity: 0; */
    display: none;
}

.btn-edit{
    gap:10px;
    margin:1% 0;
}

.picker-btn{
    width:20px;
    height:20px;
    cursor:pointer;
}

#blue-span{
    background-color:var(--primary-color);
}
#yellow-span{
    background-color: var(--secondary-color);
}

.image-loader label,
.image-loaded label{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.image-loader{
    position:relative;
    display: block;
    margin-top:0.6rem;
    margin-bottom:0.6rem;
    border-width:3px;
    border-style: dashed;
    border-color: var(--primary-color);
    text-align: center;
}

.image-loaded{
    position:relative;
    display: block;
    margin-top:0.6rem;
    margin-bottom:0.6rem;
    border-width:3px;
    border-style: solid;
    border-color: var(--primary-color);
    text-align: center;
}

.image-loaded .gal-thumb img{
    width:300px;
}

.image-large{
    width:100%;
    height:300px;
}

.image-medium{
    width:300px;
    height:300px;
}

.image-small{
    width:200px;
    height:200px;
}

.gal-thumb img{
    width:90%;
    display: block;
    margin:0 auto;
}

.btn-form{
    padding:0.7rem 2rem;
    background-color: var(--primary-color);
    border-radius:2px;
    color:#fff;
    font-family:'Poppins';
    text-transform: uppercase;
    border:none;
}

.cep-field{
    position:relative;
}

#buscarCep{
    background-color:var(--primary-color);
    color:#fff;
    border:none;
    padding:0.5rem 0.5rem;
    position:absolute;
    top:1.8rem;
    right:1rem;
}

.profile-main{
    margin-top:5%;
    padding-bottom:5%;
    border-bottom:1px solid #414c563a;
}

.page-profile h3{
    font-size:1.5rem;    
    font-weight:600;
    color:var(--primary-color);
    margin-bottom:0.4rem;
    position: relative;
    margin-top:4%;
}

.page-profile h3 span{
    font-weight:300;
    /* color:#414C56; */
    font-size:0.5rem;
    position:absolute;
    top:0;
}

.page-profile i{
    color:#61A70E;
}

.page-profile h4{
    text-transform: uppercase;
    font-size:0.9rem;
    color:#414C56;
    margin-bottom:2rem;
}

.profile-list li{
    display:flex;
    align-items: center;
    /* align-content: center; */
}

.profile-list li i{
    margin-right:0.2rem;
}

.page-profile li{
    margin:1rem 0;
    color:var(--primary-color);
    font-weight:600;
}

.page-profile ul li span{
    font-weight:400;
    color:#414C56;
    margin-left:0.3rem;
}

.perfil-img{
    border:3px solid #62a70e3f;
    border-radius: 50%;
    width:250px;
    height:auto;
    margin-top:2rem;
}

.icon-status .user-active{
    color:#61A70E;
}
.icon-status .user-iddle{
    color:#C8A606;
}
.icon-status .user-inactive{
    color:#D0312D;
}

.data-loading{
    height:50px;
    border:1px solid #fff;
    background: #ececec;
    background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    animation: skeleton-loader 1s infinite ease-in-out;
}

.name-loading-data{
    border:1px solid #fff;
    width:25%;
    height:30px;
    background: #ececec;
    background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    animation: skeleton-loader 1s infinite ease-in-out;
}

.profile-loading-data{
    border:1px solid #fff;
    width:20%;
    height:20px;
    background: #ececec;
    background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    animation: skeleton-loader 1s infinite ease-in-out;
}

.span-loading-data{
    border:1px solid #fff;
    width:20%;
    height:20px;
    background: #ececec;
    background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: -o-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    background-size: 250px;
    animation: skeleton-loader 1s infinite ease-in-out;
}

.image-loading{
    border-radius: 50%;
    width:200px;
    background: #ececec;
    background-image: -webkit-linear-gradient(left, #ececec 0px, #ddd 40px, #ececec 80px);
    background-image: linear-gradient(90deg, #ececec 0px, #ddd 40px, #ececec 80px);
    animation: skeleton-loader 1s infinite ease-in-out;
    height:200px;
}

.profile-main h5{
    color:#61A70E;
    text-transform: uppercase;
    font-size:0.9rem;
    margin:1.5rem 0;
}


@keyframes skeleton-loader{
    0% { background-position: -32px;}
    40%, 100% {background-position: 208px;}
}

.listagem-body td{
    background-color:#eaeaea;
    padding:1rem 0;
    text-align: center;
    font-family:'Poppins';
    color:#414C56;
    font-size:0.9rem;
    border:1px solid #414c560c;
}

.product-check{
    border-bottom:1px solid #414c563a;
    margin-bottom:3%;
}

.product-check li{
    display:inline-block;
}

.product-check .product-title{
    font-weight: 600;
    color:var(--primary-color);
    margin:1.2rem 0 0.5rem 0;
    font-size:1.1rem;
    text-transform: uppercase;
}

.btn-icon-list{
    font-size:1.2rem;
}

.green-icon{
    color:#3d6607;
}
.blue-icon{
    color:var(--primary-color);
}
.red-icon{
    color:#D0312D;
}
.yellow-icon{
    color:#be7301;
}

.table-modern{
    display:table;
    width:100%;
    text-align: center;
    /* overflow:hidden; */
    /* border-collapse:separate; */
    border:none;
    border-radius:0.375rem;    
}

.table-modern thead tr{
    padding:2rem 0 3rem 0;
}

.table-modern th{
    color:#414C56;
    padding:2rem 0 3rem 0;
    font-weight:600;
    font-size:0.95rem;
}

.table-modern tbody tr{
    border-left:5px solid #61A70E;
    /* border-radius:0.375rem;     */
    background-color: #fff;
    cursor:pointer;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.table-modern tbody tr td{
    padding:1.5rem 1rem;
    font-size:0.9rem;
    color:#414C56;
    opacity:0.8;
    vertical-align: middle;
    font-family: 'Poppins';
}

.table-modern .flag{
    padding:0.2rem 1rem;
    border-radius:2rem;
    font-weight:600;
}

.table-modern .success{
    background-color:rgba(61, 102, 7, 0.2);
    color:#3d6607;
}

.table-modern .status-check{
    color:#61A70E;
    font-weight:600;
}

@keyframes growProgressBar {
    0%, 33% { --percentageN: 0; }
    100% { --percentageN: var(--value); }
  }

@property --percentageN{
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.progress{
    --size:3rem;
    --percentageN: var(--value);
    margin:0 auto;
    animation: growProgressBar 3s 1 forwards;
    width:var(--size);
    height: var(--size);
    border-radius:50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, #fff 80%, transparent 0 99.9%, #fff 0),
                conic-gradient(#61A70E calc(var(--percentageN) * 1%), #62a70e2d 0);
}

.progress::before{
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
    color:#61A70E;
}

.pagina h3{
    font-size:1.4rem;
    font-weight:600;
    color:var(--primary-color);
    margin:3% 0;
}

.card-profile{
    margin-top:8%;
    width:80%;
    padding:2%;
}

.card-title{
    font-weight:600;
    font-size:1.2rem;
    margin:1rem 0;
    color:#007DC5;
}

.card-title span{
    color:#414C56;
    font-weight:400;
}

.card-subtitle{
    font-weight:600;
    font-size:1rem;
    color:#007DC5;
    margin:1rem 0;
}

.card-subtitle span{
    color:#414C56;
    font-weight:300;
}

.card-row-flex{
    display:flex;
    justify-content:flex-start;
    gap:5%;
}

.line{
    width:100%;
    height:1px;
    background-color:rgba(65, 76, 86, 0.1);
    margin:2% 0;
}

.panel-card{
    background-color:#fff;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border-radius:4px;
    padding:1rem 1rem;
    margin:3% 0;
}

.dashboard{
    margin-top:5%;
}

.panel-card h3{
    color:#6C757D;
    font-weight:300;
}

.float-end{
    float: right;
}

.float-end i{
    background-color:var(--primary-color)3d;
    color:var(--primary-color);
    font-size:1.5rem;
    border-radius:4px;
    /* border:1px solid var(--primary-color); */
    padding: 0.5rem;
}

.ck-content p strong{
    font-weight:800;
}

.ck-content p i{
    font-style: italic;
}