/* *{user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important;} */
:root {
    --menu-on: #f3f3f3;
    --menu-on-submenu-open: #fcfcfc;
}
body{overflow-y: scroll;}
/*Main*/
.col-dashboard-menu{background: #FFFFFF;box-shadow: 2px 5px 10px rgb(0 0 0 / 2%);z-index: 1;position: fixed;top: 0;left: 0;min-height: 100vh;margin-top: 45px; border-right: solid 1px #efefef;}
.div-logo{padding: 9px 20px 8px 0; height: var(--height);}
.div-logo img{width: 103px;margin-top: 2px;}

/*Menu*/
.div-menu-dashboard{position: relative;max-height: calc(100vh - 46px); height: calc(100vh - 138px); overflow-y: auto; padding: 15px;}

/* Customiza a barra de rolagem */
.div-menu-dashboard::-webkit-scrollbar {width: 6px;}
/* Customiza o trilho da barra de rolagem */
.div-menu-dashboard::-webkit-scrollbar-track {background: #f0f0f0; /* Cor de fundo do trilho */}
/* Customiza o "polegar" da barra de rolagem */
.div-menu-dashboard::-webkit-scrollbar-thumb { background: #cccccc; /* Cor do "polegar" */ border-radius: 10px; /* Deixa as bordas arredondadas */ }  
/* Efeito ao passar o mouse sobre o "polegar" */
.div-menu-dashboard::-webkit-scrollbar-thumb:hover {background: #aaaaaa; /* Cor ao passar o mouse */}

ul,li{user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important;}

.ul-menu{margin-left: 0;padding-left: 0;list-style-type: none;}
.ul-menu li{border-radius: 10px;display: flex; flex-wrap: wrap; align-items: center;padding: 8px;color: #000000;font-weight: 700;margin-bottom: 10px;position:relative;}
.ul-menu li.no-link:hover{ background: transparent;}
.ul-menu li:hover, .ul-menu li details summary:hover {background: var(--menu-on);}

.ul-menu li a{display: flex;align-items: center;width: 100%;font-size: 12px;}
.ul-menu li a i{background: #4b5563;width: 15px;height: 13px;}
.ul-menu li a svg, 
.ul-menu li details summary div svg{color: #4b5563;width: 15px; height: 13px;}
.ul-menu li details summary div i{background: #4b5563;width: 15px; height: 13px;}
.ul-menu li a div, 
.ul-menu li details summary div {padding:5px;background: #f9fafb;border-radius: 7px;margin-right: 6px; width: 33px; height: 33px;text-align: center;border: solid 1px #efeff0;align-items: center;justify-items: center;position: relative;display: flex;justify-content: center;}

.li-submenu-main{ padding: 0 !important;}
.li-submenu{ padding: 0 !important;}
.ul-menu li details {display: block;  width: 100%; transition: all 0.3s ease; border-radius: 10px;}
.ul-menu li details summary {display: flex; cursor: pointer; justify-content: flex-start; align-items: center; border-radius: 10px; padding: 8px;  font-size: 12px;transition: all 0.3s ease; color: #000000;font-weight: 700;  }
.ul-menu li details summary .arrow{ position: absolute; right: 13px;   }
.ul-menu li details summary::-webkit-details-marker {display: none;transition: all 0.3s ease;   }
/*.ul-menu li details[open]{ background: var(--menu-on-submenu-open);}*/
.ul-menu li details[open] summary .arrow{ transform: rotate(90deg);   }
/*
.ul-menu li details summary:before { content: "▸"; font-size: 15px; font-weight: bold; margin: 0 5px; padding: 0; width: 14px; text-align: center; position:absolute; right:0;}
.ul-menu li details[open] summary:before { content: "▾"; }
*/
.ul-menu li details .group-submenu{padding: 9px; border-radius: 5px; margin-top: 3px; font-weight: 400; font-size: 12px; display: flex;}
.ul-menu li details .group-submenu svg{width: 10px; margin-right: 20px; margin-left: 2px; fill: none;}
.ul-menu li details .group-submenu:hover,.ul-menu li details .group-submenu.on{font-weight: 600;}
.ul-menu li details .group-submenu:hover svg{stroke: var(--color1);}
.ul-menu li details .group-submenu.on svg{fill: #e9deff; stroke: var(--color1);}

.ul-submenu{padding-top: 5px; padding-left: 28px;}
.ul-submenu > li > a { font-size: 12px; font-weight: 500; color: #4b5563; }
.ul-submenu > li > a> div { width: 25px; height: 25px; border-radius: 5px;}
.ul-submenu > li > a> div > i {width: 10px !important;height: 10px !important;}

.ul-menu li.actived, summary.actived{background: var(--menu-on) !important; color: var(--color1) !important;}
.ul-menu li.actived i, summary.actived i{background: var(--color1) !important;}
.ul-menu li.actived svg, summary.actived svg{color: var(--color1) !important;}
.ul-menu li.actived a div, summary.actived a div{ background: #fff !important;}
.ul-submenu li.actived {background: #fff !important;}
.ul-submenu li.actived a{color: var(--color1) !important;}


/*Storage menu*/
.group-storage-menu{ position: absolute; bottom: 58px; width: 100%; border-top: 1px solid #EDEDED; background-color: #fff; padding: 6px 10px; transform-origin: bottom;}
.justify-content-space-between{justify-content: space-between;}
@media (max-width: 1400px) { .group-storage-menu { zoom: 0.8; box-sizing: border-box;} }
.top-storage-menu{ display: flex;}
.progress-bar-container{width: 100%; border-radius: 10px; background-color: #f3f3f3; border: #c9c9c9 1px solid;}
.progress {border-radius: 35px; overflow: hidden; height: 5px; animation-direction: reverse; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; background: linear-gradient(to right, #9358fc, #553095, #ff0000); transition: all 0.2s ease; background-size: 300px; max-width: 100% !important;}

/*Menu top Profile*/
.menu-top{position: fixed;padding: 9px 20px;right: 0;background: #FFFFFF;box-shadow: 4px 0px 10px rgb(0 0 0 / 5%);z-index: 11; height:var(--height);align-items: center;display: flex;border-bottom: solid 1px #efefef;}
.menu-top-profile{display: flex; justify-content: flex-end; align-items: center;}
.user-name, .user-name a{ font-size: 11px;align-items: center;display: flex;}
.user-div{width: 30px;height: 30px;padding: 4px 0;border-radius: 20px;display: flex;justify-content: center;}
.icon-user{font-size: large !important;background: #c6c6c6 !important;}
.link-logout{display: flex; font-size: 12px;}
.link-logout i{background: var(--color);font-size: 13px;margin: 0;}
.line-sep-left-menu{border-left: 1px solid #d1d1d1; margin: 0 10px; height: 22px;}

/*Text*/
.text-small{font-size: 0.7rem;}
.italic{font-style:italic;}
.text-left{ text-align: left;}
.text-center{ text-align: center;}
.line-height-small{line-height: 12px;}

.flex{ display: flex;}
.block{display:block;}
.inline-table{display: inline-table !important;}
.relative{ position: relative;}
.content-center{justify-content: center;}
.content-right{justify-content: right;}
.content-left{justify-content: left;}

/*Head Page*/
.head-container{width: 100%;height: 220px;position: absolute;top: 0;z-index: -1; padding: 0;}
.head-100{ height: 100%;}
.head-img{background-image: url(/assets/img/bg-top.jpg);width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;}
.head-mask{background: linear-gradient(130.78deg, rgba(80, 27, 156, 0.94) 0.44%, rgba(89, 34, 189, 0.50) 99.57%);width: 100%;height: 100%;position: absolute;top: 0; left: 0;}

.h1-with-btn{align-items: center;display: flex !important;justify-content: center; color: #fff;}
.h1-with-btn > a{font-size: 12px;font-weight: 400;padding: 4px 15px;border: 1px solid #fff;border-radius: 16px; cursor: pointer;}
.h1-with-btn > a:hover{ background: #fff; color: var(--colorDetail);}
.h1-with-btn > span{font-weight: 100;font-size: 32px;margin: 0 10px;}

/*Page*/
.line-page{border-radius: 10px; padding: 10px 20px; display: flex; align-items: center;font-weight: 600;font-size: 12px;}
.line-page-color{background: #FFFFFF;box-shadow: 0px 0px 10px rgb(0 0 0 / 10%); margin-bottom: 12px; padding: 25px 20px;}
.col-pz-1{ width: 34%; padding: 0 5px;}
.col-pz-2{ width: 10%; padding: 0 5px;}
.col-pz-3{ width: 12%; padding: 0 5px;}
.col-pz-4{ width: 12%; padding: 0 5px;}
.col-pz-5{ width: 12%; padding: 0 5px;}
.col-pz-6{ width:  8%; padding: 0 5px;}
.col-pz-7{ width:  8%; padding: 0 5px;}
.col-pz-8{ width:  8%; padding: 0 5px;}
.col-pz-9{ width:  8%; padding: 0 5px;}
.col-pz-title-line{font-size: 13px;font-weight: 600;color: var(--colorDetail);line-height: 15px;}
.col-pz-type-page{align-items: center;display: flex;}
.col-pz-type-page i{font-size: 14px; margin-right: 9px; display: list-item;}
.col-pz-center{text-align: center;}
.position-img-metric{margin-top: -80px;}

/*Box*/
.box-display{display: grid;}
.box{background: #FFFFFF;padding: 20px;margin-bottom: 20px; background-clip: padding-box;box-shadow: 0 2px 6px 0 rgba(67, 89, 113, .12);border-radius: 16px;}
.box-container{margin-top: 0.88rem;}
.box-shadow{box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.15);}
.box-link:hover{cursor: pointer; box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);}
.box-link:hover button{background: var(--colorDetail); color: #fff;}
.box-link:hover button i{background: #fff;}

/*Icon box*/
.icon-circle-title{border-radius: 6px; width: 35px; height: 35px; background: #eeecfd; display: flex; align-content: center; justify-content: center; align-items: center;border: 1px solid #b59ee0;}
.icon-circle-title i{width: 14px; height: 14px; background: var(--color1);}
.icon-circle-title svg{width: 14px; height: 14px;  color:var(--color1);}

.circle-icon{border: 1px solid var(--colorDetail);width: 60px;height: 60px;border-radius: 100px;margin: 0 auto;display: flex;justify-content: center;}
.circle-icon i{ background: var(--colorDetail); font-size: 25px;}
.box-detail-text{ height: 20vh; margin-top: 11px; margin-bottom: 20px; font-size: 12px;}

/*Steps*/
.content-line{padding: 0 1.5px;position: relative;}
.content-line .line{ width: 100%; height: 1px; margin-bottom: 15px;}
.content-line.ok  > .line{ background: var(--colorStepOk);}
.content-line.on  > .line{ background: var(--colorStepOn);}
.content-line.off > .line{ background: var(--colorStepOff);}
.content-line .icon{width: 25px;height: 25px;border-radius: 25px;border: 1px solid;position: absolute;top: -18%;left: 50%;margin-left: -12.5px;background: #57289d;justify-content: center;align-items: center;display: flex;}
.content-line > .icon i{display: none;}
.content-line > .icon span{display: none;}
.content-line.ok > .icon i{ font-size: 12px; background: var(--colorStepOk); display: list-item;}
.content-line.on > .icon span{ background: var(--colorStepOn);width: 8px;height: 8px;border-radius: 8px;display: block;}
.content-line.ok > .icon{border-color: var(--colorStepOk);}
.content-line.on > .icon{border-color: var(--colorStepOn);}
.content-line.off > .icon{display: none;}
.content-line .text{ text-align: center;}
.content-line.ok  > .text{ color: var(--colorStepOk);}
.content-line.on  > .text{ color: var(--colorStepOn);height: 50px;}
.content-line.off > .text{ color: var(--colorStepOff);}

/*Site*/
.circle-site            { width: 60px; height: 60px; border-radius: 100%; border: 1px solid #dcc9ff; display: flex; justify-content: center; background: #ebe1ff; }
.circle-site i          { font-size: 33px; background: var(--color1); }
.circle-site-image      { width: 60px; height: 60px; border-radius: 100%; display: flex; justify-content: center; background-size: 100%; background-position: center; background-repeat: no-repeat; border-radius: 60px; overflow: hidden;}
.title-name-site        { font-size: 19px; color: var(--colorIcon); font-weight: 500; margin-top: 4px; }
.status-site            { font-weight: 300; font-size: 12px;}
.no-site                { background: #f6f6f6; border: 2px dashed #dedede; color: #acacac; border-radius: 16px;}
.site-top               { display: flex; align-content: center; align-items: center; padding: 1px 10px 1px 1px; background: #eeecfd; border-radius: 15px; border: 1px solid #e0d0ff; color: var(--color1);}
.site-top-circle-site   { width: 20px; height: 20px; border-radius: 100%; border: 1px solid #dcc9ff; display: flex; justify-content: center; background: #ebe1ff; margin-right: 4px;}
.site-top-circle-site i { font-size: 12px; background: var(--color1); margin: 0; padding: 0; }
.site-top-circle-site svg { font-size: 12px; color: var(--color1); margin: 0; padding: 0; }

.css-1h26p0c {color: rgba(50, 71, 92, 0.87); padding: 0.5rem 0.75rem; display: flex; border-radius: 6px; align-items: center; background-color: rgb(245, 245, 249); margin-top: 1.25rem; margin-bottom: 1.25rem;}
.css-1b8l6fw {position: relative; display: flex;align-items: center;-webkit-box-pack: center;justify-content: center;flex-shrink: 0;border-radius: 5px;color: var(--color1);margin-right: 0.75rem;width: 44px;height: 44px;box-shadow: rgba(50, 71, 92, 0.1) 0px 2px 10px 0px;background-color: rgb(255, 255, 255);}
.css-qffts4  { width: 100%; display: flex; flex-wrap: wrap; align-items: center; -webkit-box-pack: justify; justify-content: space-between;}
.css-1rvrufc { margin-right: 0.5rem; display: flex; flex-direction: column;}
.css-1g4yrve { margin: 0px; font-weight: 400; font-size: 1rem; color: rgba(50, 71, 92, 0.6);}
.css-x9qluk  { margin: 0px; color: rgba(50, 71, 92, 0.87); font-weight: 500; font-size: 1.125rem;}
.css-t9zq2i  { font-size: 20px; font-weight: 500; padding: 0; margin: 0; width: 90px; text-align: center;}
.css-15k6onz {width: 70px; height: 28px; margin-left: 12px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; white-space: nowrap; color: rgb(101 48 201); background-color: rgb(230 227 252); border: 1px solid #6530c9;  text-align: center;}
.css-13gasb9 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; padding: 0rem 0.625rem;}

.hm-group{background: #f1f1f1; padding: 8px 10px; border-radius: 8px; color: var(--colorIcon); cursor: pointer;}
.hm-color-temp-session{width: 10px; height: 28px; margin-right: 5px; display: inline-block; border-radius: 2px;}
.hm-percentagem{padding: 3px 5px; background: #d1e7dd; text-align: center; font-size: 12px; border-radius: 5px; border: 1px solid #198754; color: #198754;}
.hm-color-100{background: #be000082;}
.hm-color-80 {background: #ff79008f;}
.hm-color-60 {background: #8fff728c;}
.hm-color-40 {background: #02a5ff94;}
.hm-color-40 {background: #e0f4ff8a;}

.div-highlight-overlay-button{position:absolute; top: -10px; left: 0; width: 100%; height: calc(100% + 20px); background: #5800ff8f; z-index: 10; border-radius: 8px;}
.div-highlight-overlay-button-count{position: absolute; top: 10px; right: 10px; background: #0000008f; color: #fff; z-index: 50; border-radius: 8px; font-weight: 600; padding: 10px;}

.button-lead-add{border-radius: 4px;
    border: 1px solid #e2e2e2;
    background: #f2f2f2;
    color: var(--colorTitle5);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding: 1px 6px;
    width: 100%;
    max-width: 175px;
    align-items: center;}
.icon-lead-add{
    padding: 5px;
    background: #e6e6e6;
    background: transparent;
    border-radius: 7px;
    margin-right: 11px;
    width: 33px;
    height: auto;
    text-align: center;
    /* border: solid 1px #efeff0; */
    align-items: center;
    justify-items: center;
    position: relative;
    display: flex;
    justify-content: center;
}
.icon-lead-add svg{    color: #8e8e8e;
    width: 17px;
    height: auto;
    margin-left: 4px;}

.button-lead-registered{border-radius: 4px;
    border: 1px solid #501ba042;
    background: #f2f2f2;
    color: var(--colorTitle5);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    vertical-align: middle;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding: 6px;
    width: 100%;
    max-width: 175px;
    }
.lead-img{background-size: cover; background-repeat: no-repeat; width: 2rem; height: 2rem; margin-right: 0.8rem !important; border-radius: 50% !important; overflow: hidden !important;border: 1px solid #4f1a9c29;}
.lead-info-name{white-space: nowrap;font-weight: 500;}
.lead-info-phone{color: var(--color1);font-size: 85%;}

.button-lead-add:hover{background: #e2e2e2;}
.button-lead-registered:hover{background: #e2e2e2; border-color: #501ba026;}

.position-sticky-search{position: sticky;top: 38px;z-index: 10;}
@media (max-width: 1400px) {
    .position-sticky-search{top: 50px;}
}