@import url('utils.css?v=3');

html {
	scroll-behavior: smooth !important;
}

:root {
    --primary: #0536C7;
    --secondary: #000000;
    --tertiary: #000000;
    --text: #21222D;
    --gray:#81889C;
    --stroke:#EDEDED;
    --radius:16px;
    --green: #25B700;
    --red: #D81E1E;
    --yellow: #FFAC33;
    --title: #22283A;
}
	
*::-webkit-scrollbar{
	background:#fff !important;
	width:6px;
    height: 5px;
	scroll-behavior: smooth !important;
}

*::-webkit-scrollbar-thumb{
	background:#ddd;
	width:6px;
	border-radius:6px !important;
	scroll-behavior: smooth !important;
}
.bootstrap-tagsinput { width: 100%; }

.transition{ transition-property: height, visibility;
	transition-duration: .35s;}

/* body{background-color: #fff; color: var(--text); font-size: 14px; font-family: 'Inter'; scroll-behavior: smooth !important;} */
/* #content .container-fluid{max-width: 1400px; width: 100%;} */


@media(max-width:991px){
	#header .header-search input{min-width: auto;}
}

.gap-1 {gap: 4px;}
.gap-2 {gap: 8px;}
.gap-3 {gap: 16px;}
.gap-4 {gap: 24px;}
.gap-5 {gap: 40px;}
.fw-700 {font-weight: 700;}
.mb-24 {margin-bottom: 24px;}
.mb-40 {margin-bottom: 40px;}

.table-responsive .button-group {display: flex; gap: 4px; justify-content: end;}
/* #header{grid-area: header; position: relative; display: block;}
#column-left{grid-area: column_left;  background-color: #fff; display: block; position: relative; top: 0; left: 0; z-index: 100; }
#column-left-inner{width: 100%; max-height: 100vh; position: sticky; top: 0; overflow-x: hidden; overflow-y: auto; padding:0 24px;}
#column-left-inner::-webkit-scrollbar {width: 0;}
.hide-menu #column-left-inner {padding: 0 12px;}
@media (max-width: 1200px) {
	#column-left-inner {padding: 0 6px !important;}
} */


/* #footer{grid-area: footer; position: relative; display: block; background-color: #000000; color: #fff; font-size: 12px;}
#footer ul{display: flex; gap: 15px; align-items: center; list-style: none; margin:0; padding:0; justify-content: space-between; padding: 15px;} */

@media(max-width:767px){
	#header .container-fluid{padding: 0;}
	#footer ul{flex-direction: column;}
}


/* .body{display: grid; min-height: 100vh;
	grid-template-areas: 
	"column_left header"
	"column_left content"
	"footer footer"
	;
	grid-template-columns: 16% 84%;
	grid-template-rows: 64px auto auto;
} */

@media(max-width:767px){
	.row-header{justify-content: space-between;}
}

#column-left h2{font-size: 14px; font-family: 'Sora'; font-weight: 400; color: var(--text);}
#column-left h2 span{color: var(--primary);}

.modal-variation-edit {max-height: 75vh; overflow: auto;}


/* @media(max-width:1280px){
	#column-left{padding:0 6px;}
	#menu > li.active::before{left: -15px;}
} */


/* #column-left #logo2{display: none;} */

/* HIDE MENU */
/* #column-left.hide-menu #logo1{display: none;}
#column-left.hide-menu #logo2{display: block;}
#column-left.hide-menu .menu-name{opacity:0;}
#column-left.hide-menu .separator{opacity:0;}
#column-left.hide-menu .icon-caret{opacity:0;}
#column-left.hide-menu .column-left-header{display: none;}
.body.hide-menu{grid-template-columns: 75px auto;} */

@media(max-width:991px){
	#column-left #logo1{display: none;}
	#column-left #logo2{display: block;}
	#column-left .menu-name{opacity:0;}
	#column-left .separator{opacity:0;}
	#column-left .icon-caret{opacity:0;}
	#column-left .column-left-header{display: none;}
	.body{grid-template-columns: 75px auto;}

	#column-left.hide-menu #logo1{display: block;}
	#column-left.hide-menu #logo2{display: none;}
	#column-left.hide-menu .menu-name{opacity:1;}
	#column-left.hide-menu .separator{opacity:1;}
	#column-left.hide-menu .icon-caret{opacity:1;}
	#column-left.hide-menu .column-left-header{display: block;}
	#column-left.hide-menu{display: block;}
	.body.hide-menu{grid-template-columns:200px auto;}
}
/* 
@media(max-width:991px){
	.body{display: block;}
	#column-left{display: none;}
} */

/* Tiles */
.dp-tile {
    height: 160px;
    margin-bottom: 24px;
    border-radius: 3px;
    color: #FFFFFF;
    transition: all 1s;
    border-radius: var(--radius);
    border:solid 1px var(--stroke);
    padding: 20px;
    z-index: 1;
    position: relative;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media(max-width:767px){
    .dp-tile {margin-bottom: 30px;}
}

.dp-flex{display: flex; gap: 10px;}

.dp-tile-primary {
    background-color: #fff;
}

.dp-tile-success {
    background-color: #53b953;
}

.dp-tile-warning {
    background-color: #f3aa41;
}

.dp-tile-danger {
    background-color: #e45847;
}

.dp-tile-dark {
    background-color:#efefef;
}

.dp-tile:hover {
    opacity: 0.95;
}

.dp-tile a {
    color: var(--primary);
}


.dp-tile-heading {
    font-weight: 500;
    font-size: 12px;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-tile-heading h3{
    margin:0;
    font-weight: 500;
    font-size: 16px; 
    color: var(--secondary);
}

.dp-tile .dp-tile-heading .pull-right {
    transition: all 1s;
    opacity: 0.7;
}

.dp-tile:hover .dp-tile-heading .pull-right {
    opacity: 1;
}

.dp-tile-body {
    padding: 15px 0;
    color: var(--primary);
}

.dp-tile .dp-tile-body h2 {
    font-size: 24px;
    margin: 0;
    font-weight: bold;
    color: var(--secondary);
}

.dp-tile-footer .custom_period {font-size:12px; color: var(--gray);}

.dp-tile-footer a{color: var(--gray);}

/* Panels */

/* Primary Panel */
.dp-panel-primary {
    background-color: #fff;
    border: 1px solid #c3e4f6;
    border-top: 2px solid #5cb7e7;
}

.dp-panel-primary .dp-panel-heading {
    color: #1e91cf;
    border-color: #96d0f0;
    background: white;
}

/* Default Panel */
.dp-panel-default {
    border-radius: var(--radius);
    padding: 20px;
    border:solid 1px var(--stroke);
    background-color: #fff;
}

.dp-panel-default .dp-panel-heading {
    color: var(--tertiary);
    padding:0;
    background: transparent;
    border:none;
}


.dp-panel-static {
    border-radius: var(--radius);
    padding: 20px;
    border:solid 1px var(--stroke);
    background-color: #fff;
}

.dp-panel-static .dp-panel-heading {
    color: var(--tertiary);
    padding:0;
    background: transparent;
    border:none;
}

.dp-panel-static .dp-panel-body{ min-height: auto;}



.percentage-success{color: #54C96A; font-weight: 600;}
.percentage-danger{color: #D44949; font-weight: 600;}

@media(max-width:767px){
    .dp-filter{order:-1; }
    .dp-tile .dp-filter{margin-right: auto; margin-left: 0;}
    .dp-tile .dp-filter .dropdown-menu{left: 0; right:auto;}
}

.dp-panel .badge-status{font-size:10px; font-weight: bold; min-width: 140px; text-align: center;}

#button-developer {background: var(--gray);}

#filemanager .video-wrapper {display: flex; position: relative;}
#filemanager .thumbnail-video {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1;}
.btn-video-play {width: 32px; height: 32px; border-radius: 50% !important; display: flex; justify-content: center; align-items: center; background: var(--primary); color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; }

.tooltip{
    backdrop-filter: blur(20px) !important; 
    box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.2); 
    padding: 0 !important;
    border:solid 1px var(--stroke);
    border-radius: 4px; 
}
.tooltip-inner{
    background-color: rgba(255, 255, 255, 0.7); 
    color: var(--secondary); 
    padding: 15px;
}
.tooltip-inner h3{font-size: 16px; font-weight: 600; margin:0}

.input-link{border:none; padding:4px 20px; cursor: pointer;}
.input-link:hover{background:#efefef;}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition-property: height, visibility;
        transition-duration: .35s;
    }
}

.page-header{border-bottom: none;}
.breadcrumb{padding: 0; margin-top: 3px; display: inline-block; background: transparent;}

.page-header .container-fluid:before, .container-fluid:after{display: none;}
/* .page-header .pull-right{float: none !important;} */

.panel-default{padding: 24px;}
.panel-default .panel-heading {padding: 0; padding-bottom: 12px;} /* ajuste 2024 */
.panel-default .panel-body {padding: 0;}
.panel-default > .panel-heading{border:none; background: none; display: flex; gap: 4px;}
.panel-default > .panel-heading .panel-title{font-size: 14px; font-weight: 600;}
.panel-default > .panel-heading .panel-title i{color: var(--primary);}

.img-thumbnail {border-radius: 8px; width: 100px; height: 100px; aspect-ratio: 1/1; object-fit: cover;}
.img-thumbnail img {max-width: 100%;}

.table-bordered{overflow-x: auto !important;}

input[type=checkbox] {position: relative;cursor: pointer; border-radius: 5px; width: 12px; height: 12px;}

input[type=checkbox]:before {
	content: "";
	display: block;
	position: absolute;
	width: 16px;
	height: 16px;
	top: -2px;
	left: -2px;
	border-radius: 2px;
	border:solid 1px #D9D9D9;
	background-color: #ffffff;
}

input[type=checkbox]:checked:after {
	content: "";
	display: block;
	width: 5px;
	height: 10px;
	border: solid var(--primary);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 1px;
	left: 4px;
}

.panel{border: 1px solid #ececec; border-radius: 16px; border: none; box-shadow: none;}

.tab-content{padding: 30px 0;}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{color: var(--primary); }
.nav-tabs > li > a{color: var(--text); font-size: 12px; font-weight: 500}

#product-footer{width: 100%; position: fixed; bottom: 0; left: 0; z-index: 999; background-color: #fff; display: flex; justify-content: space-between; padding:15px 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

.select-options-list{height: 200px; overflow: auto; position: absolute; top: 55px; background-color: #fff; z-index: 3; padding: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 5px; display: none;}
.select-options-list label{width: 100%; font-weight: normal;}

.dashboard-filter{display: flex; align-items: center;}
.dashboard-filter h4{font-size: 12px; color: var(--gray); margin:0; padding: 0; margin-right: 20px;}
.dashboard-filter .btn{color: var(--text); font-size: 13px; font-weight: 500;}
.dashboard-filter .btn.active{box-shadow: none; background-color: var(--primary); color: #fff;}

/* .btn{border:none; padding: 8px 14px; border-radius: 4px; justify-content: center; align-items: center; gap: 4px;}
.btn:active, .btn:focus {outline: none !important; box-shadow: none !important;}
.btn-default{border:solid 1px #efefef}
.btn-primary{background-color: var(--primary);} */


@media(min-width:1200px){
	.row-panels > :nth-child(2){padding-right: 0;}
	.row-panels > :nth-child(2) .dp-tile{border-top-right-radius: 0; border-bottom-right-radius: 0;}
	.row-panels > :nth-child(3){padding-left: 0; padding-right: 0;}
	.row-panels > :nth-child(3) .dp-tile{border-radius: 0; border-left:none}
	.row-panels > :nth-child(4){padding-left: 0; padding-right: 0; border-radius: 0;}
	.row-panels > :nth-child(4) .dp-tile{border-radius: 0; border-left:none; border-right: none;}
	.row-panels > :nth-child(5){padding-left: 0;}
	.row-panels > :nth-child(5) .dp-tile{border-top-left-radius: 0; border-bottom-left-radius: 0;}
}

.toast{padding:10px 20px; background-color: #54C96A; color: #fff; position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; z-index: 999999999;}

.order_status{padding: 5px; text-align: center; font-size: 12px; font-weight: 600; border-radius: 4px; max-width: 240px; white-space: nowrap;}


/* .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{background-color: var(--primary); border-radius: 50%;}
.pagination > li:first-child > a, .pagination > li:first-child > span{border-radius: 50%;}
.pagination > li > a, .pagination > li > span{border:none; color: var(--gray); font-weight: bold; border-radius: 50%;}
.pagination > li:last-child > a, .pagination > li:last-child > span{border-radius: 50%;} */

.disabled{opacity: 0.5;}

/* .table a{color: var(--text);} */
@media(max-width:767px){
	#content{padding: 0 10px;}
	.panel-default{padding: 10px;}
	.table-responsive{border:none}
}

/* .panel-resume{height: auto; padding-top: 0; padding-bottom: 0;}
.panel-resume .card{display: flex; gap: 20px; align-items: center; border-right: solid 1px #EDEDED; padding:30px 16px;}
.panel-resume h4,.panel-resume h2{margin:0; padding:0}
.panel-resume h4{font-size: 12px; color: var(--gray);}
.panel-resume h2{font-size: 16px; color: var(--text); font-weight: 700; margin-top: 8px;}
.panel-resume .icon{width: 48px; height: 48px; border-radius: 4px; display: flex; align-items: center; justify-content: center;}
.panel-resume .icon svg path{fill: #fff;}
.panel-resume .panel-resume-col{padding: 0;}
.panel-resume .panel-resume-col:nth-child(1) .icon{background-color: #25B700;}
.panel-resume .panel-resume-col:nth-child(2) .icon{background-color: #0380F2;}
.panel-resume .panel-resume-col:nth-child(3) .icon{background-color: #AAAAAA;}
.panel-resume .panel-resume-col:nth-child(4) .icon{background-color: #FF3232;}
.panel-resume .panel-resume-col:last-child .card{border-right: none;}
.panel-resume a:hover{text-decoration: none;}

@media(max-width:991px){
	.panel-resume .card{border:none;}
} */

/* .input-color{width: 50px; height: 50px; border-radius: 50;} */

.dropdown-menu {max-height: 200px; overflow-y: auto;}
.dropdown-menu > li > a {display: flex; align-items: center; gap: 4px;}