:root {
  --color-primary:        #5075B9;
  --color-primary-dark:   #405163;
  --color-primary-light:  #F5F6FB;
  --color-secondary:      #FBB41C;
  --color-red:            #ff5252;
  --color-blue:           #00bcd4;
  --color-jade:           #00bfa5;
  --color-green:          #66bb6a;
  --color-purple:         #6329a1;
  --color-orange:         #ffa726;
  --color-default:        #333;
  --py-body-centered:     1.25rem }

.text-primary,
a:hover:not(.btn,.dropdown-item)     { color: var(--color-primary) !important }  
.text-secondary   { color: var(--color-secondary) !important }  

.bg-primary       { background-color: var(--color-primary) !important }  
.bg-primary-light { background-color: var(--color-primary-light) !important }
.bg-primary-dark  { background-color: var(--color-primary-dark) !important }
.bg-secondary     { background-color: var(--color-secondary) !important }  

.bg-gradient-primary {
  background: rgb(49,89,161);
  background: linear-gradient(30deg, rgba(49,89,161,1) 0%, rgba(70,117,195,1) 100%) }

.bg-gradient-secondary {
  background: rgb(250,161,17);
  background: linear-gradient(30deg, rgba(250,161,17,1) 0%, rgba(255,203,47,1) 100%) }

.bg-gradient-blue {
  background: rgb(0,188,212);
  background: linear-gradient(30deg, rgb(0,188,212) 0%, rgb(0,205,234) 100%)
}

.bg-gradient-red {
  background: rgb(255,82,82);
  background: linear-gradient(30deg, rgb(255,82,82) 0%, rgb(255,104,104) 100%)
}

.bg-gradient-orange {
  background: rgb(255,167,38);
  background: linear-gradient(30deg, rgb(255,167,38) 0%, rgb(255,176,60) 100%)
}

.bg-gradient-green {
  background: rgb(102,187,106);
  background: linear-gradient(30deg, rgb(102,187,106) 0%, rgb(117,193,121) 100%)
}
  
.bg-gradient-jade {
  background: rgb(0,191,165);
  background: linear-gradient(30deg, rgb(0,191,165) 0%, rgb(0,213,186) 100%)
} 

.bg-gradient-jade-dark {
  background: rgb(0,145,132);
  background: linear-gradient(30deg, rgb(0,145,132)) 0%, rgb(0,166,149) 100%)
} 

.bg-gradient-purple {
  background: rgb(99,41,161);
  background: linear-gradient(30deg, rgb(99,41,161)) 0%, rgb(108,45,179) 100%)
}

.btn-primary { 
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important }

.btn-outline-primary { 
  border-color: var(--color-primary) !important;
  color: var(--color-primary) }

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  background: var(--color-primary) !important;
  color: #FFF  }
  
.btn-secondary { 
  border-color: var(--color-secondary) !important;
  background-color: var(--color-secondary) !important }

.btn-outline-white {
  border-color: #FFF;
  color: #FFF }

.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus {
  background: #FFF;
  color: var(--color-default)  }

.btn:hover,
.btn:active,
.btn:focus { box-shadow: inset 0 0 100rem rgba(255,255,255,.275) }


/* layout
//////////////////////////////////////////////////*/
/* html:not(.scroll),
html:not(.scroll) body { height: 100% } */

html { height: 100% }

body { 
  overflow-x: hidden;
  display: flex;
  margin: 0 auto;
  color: var(--color-default);
  font: 14px "Poppins", Sans-serif  }

/* aside, */
header, 
main,
footer { padding: 1.5rem 3rem }

main { padding-top: 0 !important }
              
@media(min-width:1153px){
  .centered { 
    padding: var(--py-body-centered) 10vw;
    height: calc(100vh - var(--py-body-centered)*2);
    border-radius: 30px }
}

@media(min-width:1367px){
  header, 
  main,
  footer { padding: 3rem 5rem }
}

@media(max-width:767.98px){
  aside,
  header, 
  main,
  footer { padding: 1rem }
}



/* header
//////////////////////////////////////////////////*/
header button.toggler {
  border: 0;
  background: transparent;
  position: relative;
  /* z-index: 1; */
  padding: 1.5rem;
  border-radius: 100%;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem  }

header button.toggler:active,
header button.toggler:focus,
header button.toggler:hover { background-color: rgba(0,0,0,.05) } 

header button.toggler .hamburger,
header button.toggler .hamburger:after, 
header button.toggler .hamburger:before {
  position: absolute;
  cursor: pointer;
  border-radius: .25rem;
  height: .25rem;
  width: 1.5rem;
  background: var(--color-primary-dark);
  display: block;
  content: "" }

header button.toggler .hamburger {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) }

header button.toggler .hamburger:before { top: -.5rem }

header button.toggler .hamburger:after {
  bottom: -.5rem;
  width: 1rem }

header .dropdown a { text-decoration: none }  

header .dropdown-profile img {
  border: 3px solid #FFF;
  width: 48px;
  height: 48px;
  object-fit: cover } 

header .dropdown-notifications .dropdown-toggle::after { content: none }   

header .dropdown-notifications .dropdown-menu { 
  max-height: calc(100vh - 7.5rem);
  min-width: 300px;
  padding: 0 }  

header .dropdown-notifications .dropdown-menu a { padding: .75rem 1rem }

header .dropdown-notifications .dropdown-menu a:hover { background: var(--color-primary-light) }

header .dropdown-notifications .dropdown-menu small { font-size: 75% }

@media(max-width:767.98px){
  header .dropdown-profile img {
    width: 32px;
    height: 32px }  
}

  
/* auth
//////////////////////////////////////////////////*/
.auth {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFF;
  height: 100vh;
  padding: 4rem;
  max-width: 480px }

.auth h1 { 
  font-weight: bold;
  font-size: 125% }  

.auth p { 
  margin-bottom: 2rem;
  opacity: .75 }  

.auth .form-control { 
  height: 46px;
  margin-bottom: .5rem }  

@media(max-width:767.98px){
  .auth { max-width: 100% }
}



/* aside ~ nav
//////////////////////////////////////////////////*/
:root { --p-nav-link: 1vw }

aside { 
  transition: all 300ms;
  z-index: 1;
  background: var(--color-primary-dark) }

aside.bg-light { 
  box-shadow: .5rem 0 1.5rem rgba(60,104,179,0.075);
  background: #FFF !important }

aside .navbar-brand { 
  transition: all 300ms;
  padding: 0;
  margin: 0;
  line-height: .75;
  color: #FFF;
  font-size: 150% }

aside:not(.bg-light) .navbar-brand * { color: #FFF !important  }

aside .navbar-brand small { 
  opacity: .75;
  font-size: 60% }

aside .nav-item { 
  margin-bottom: calc(var(--p-nav-link)/2);
  width: 100%;
  transition: all 270ms }

aside nav a { font-weight: 600 !important }

aside .nav-link { 
  transition: all 300ms;
  /* display: flex; */
  font-size: clamp(80%, 1.5vw, 100%);
  position: relative;
  padding: calc(var(--p-nav-link)/2) calc(2.5*var(--p-nav-link));
  color: rgba(255,255,255,.5) } 

aside .navbar-brand > span:nth-child(2),
aside .nav-link > span:nth-child(2) { transition: opacity 200ms 200ms }

aside .nav-link > span:nth-child(2),
aside .dropdown-toggle::after { margin-left: .75rem !important }
  
aside .dropdown-toggle::after { margin: auto 0 }

aside .nav-link .icon { 
  transition: all 300ms;
  position: relative;
  z-index: 1;
  width: 2rem; 
  height: 2rem }

aside .nav-link:hover { color: #FFF }

aside .nav-link.active { 
  box-shadow: inset -5px 0 0 0 #FFF, inset -5rem 0 5rem  rgba(255,255,255,0.05), inset 0 -1px 0 rgba(255,255,255,.075), inset 0 1px 0 rgba(0,0,0,.175);
  color: #FFF }

aside .nav h6 { 
  text-transform: uppercase;
  font-size: 80%;
  color: rgba(255,255,255,.25) }

aside:not(.toggled) .dropdown h6 { display: none }

aside .nav > li > h6 { margin-top: calc(var(--p-nav-link)*1.5) }

aside:not(.toggled) .dropdown-menu { 
  transition: all 200ms, opacity 0ms 0ms;
  border: 0;
  top: 0;
  height: 0;
  display: block;
  box-shadow: none;
  background: rgba(0,0,0,0.25);
  position: relative;
  border-radius: 0;
  padding: 0;
  opacity: 0;
  padding: 0 calc(3 * var(--p-nav-link));
  margin-right: calc(-3.5 * var(--p-nav-link)) !important;
  left: calc(-2 * var(--p-nav-link)) !important }

aside.bg-light .dropdown-menu {  background: var(--color-primary-light) } 

aside:not(.toggled) .dropdown .dropdown-menu.show {
  opacity: 1;
  padding-top: var(--p-nav-link);
  padding-bottom: var(--p-nav-link);
  height: auto }

aside:not(.toggled) .dropdown .dropdown-item,
aside:not(.toggled) .dropdown h6 { padding: calc(.275 * var(--p-nav-link)) 0 }

aside.toggled .dropdown:hover .dropdown-menu { display: block }

aside.toggled .dropdown .dropdown-menu { 
  margin-top: -.275rem;
  border: 0;
  border-radius: .5rem;
  left: calc(-1 * var(--p-nav-link)) !important }

aside .dropdown-divider { background: rgba(255,255,255,.5) !important }
aside.bg-light .dropdown-divider { background: rgba(0,0,0,.2) !important }
  
aside.bg-light .nav-link,
aside .dropdown-item { color: rgba(0,0,0,0.275) }

aside.bg-light .icon { fill: rgba(0,0,0,0.275) }

aside.bg-light .navbar-brand,
aside.bg-light .nav-link.active,
aside.bg-light .nav-link:hover,
/* aside.toggled .nav-item:hover .nav-link .icon,
aside.toggled .nav-item:active .nav-link .icon,
aside.toggled .nav-item:focus .nav-link .icon, */
aside.bg-light .nav h6,
aside.toggled .dropdown-menu h6,
aside.toggled .dropdown-toggle:hover::after { color: var(--color-default) !important }

aside.bg-light .nav-item:hover .nav-link,
aside .dropdown-item:hover { color: rgba(0,0,0,.75) }

aside.bg-light .nav-item:hover .icon,
aside.bg-light .nav-link.active .icon { fill: var(--color-primary) }

aside .dropdown-item { background: none !important }

aside:not(.toggled):not(.bg-light) .dropdown-item { color: rgba(255,255,255,.5) }
aside:not(.toggled):not(.bg-light) .dropdown-item:hover { color: #FFF }

aside.bg-light:not(.toggled) .nav-link.active { box-shadow: inset -5px 0 0 0 var(--color-primary) }

aside.toggled .navbar-brand { 
  width: 0;
  padding: 0 calc(var(--p-nav-link)/5) }

aside.toggled .nav > li > h6 { visibility: hidden }  

aside.toggled .nav { align-items: flex-start }  

aside.toggled .nav-item { width: 0 }

aside.toggled .nav-item:hover { width: auto }

aside.toggled .nav-link { 
  transition: all 0ms !important;
  padding: calc(var(--p-nav-link)/3) calc(var(--p-nav-link)/1.5) }

/* aside.toggled .nav-item:focus .nav-link,
aside.toggled .nav-item:active .nav-link,
aside.toggled .nav-item:hover .nav-link, */
aside.toggled .dropdown .dropdown-menu { 
  box-shadow: 0 0 4px 1px rgba(0,0,0,.075);
  background-color: #FFF }

aside.toggled .navbar-brand > span:nth-child(2),
aside.toggled .nav-link > span:nth-child(2),
aside.toggled .dropdown-toggle > span:nth-child(2) {
  transition: all 0ms !important;
  opacity: 0 }

aside.toggled .dropdown-toggle > span:nth-child(2) { display: none }

aside.toggled .nav-link:hover > span:nth-child(2) { 
  transition: all 300ms 300ms;
  color: var(--color-primary);
  display: none } 

.navbar-collapse button.close {
  margin: 1rem;
  width: 3rem;
  line-height: 3rem; 
  text-align: center;
  color: var(--color-light);
  background: transparent }
  
.bg-light .navbar-collapse button.close { color: var(--color-dark) }

.navbar-collapse button.close:active,
.navbar-collapse button.close:focus,
.navbar-collapse button.close:hover { background: rgba(255,255,255,.05) !important }

.bg-light .navbar-collapse button.close:active,
.bg-light .navbar-collapse button.close:focus,
.bg-light .navbar-collapse button.close:hover { background: rgba(0,0,0,.05) !important }



@media(min-width:768px){

  /* aside.scroll { 
    overflow-x: hidden;
    overflow-y: auto } */

  aside.toggled .nav-link { white-space: nowrap }

}

@media(max-width:1200px){
  aside { padding: 0 }

  aside .navbar-collapse { 
    overflow-y: auto;
    transition: all 150ms ease;
    background: var(--color-dark);
    display: flex !important;
    /* padding: calc(var(--p-nav-link)*2); */
    position: fixed;
    top: 0;
    left: -85%;
    width: 85%;
    max-width: 300px }

  aside .nav-link {
    font-size: 100%;
    margin-bottom: .75rem;
    padding: .5rem 3rem }

  aside .navbar-collapse.toggled { 
    box-shadow: 0 0 0 100rem rgba(0,0,0,.75);
    left: 0 }

  aside.bg-light .navbar-collapse { background-color: #FFF }  
  aside.bg-primary .navbar-collapse { background-color: var(--color-primary) }  

  aside .dropdown h6 { display: none }
}

/* aside configs
//////////////////////////////////////////////////*/

/*shrink aside*/ 
aside.toggled { 
  width: calc(1.25rem + (2*calc(var(--p-nav-link)/1.5))) !important } 

/*hide aside*/ 
aside.toggled.hide { 
  display: none } 

/*hide label*/ 
aside.toggled .nav-link:hover > span:nth-child(2) { 
  display: none }  

/*show label*/ 
aside.toggled.labeled .nav-item:not(.dropdown):hover .nav-link > span:nth-child(2) { 
  padding: .5rem;
  background: #FFF;
  display: inline;
  position: absolute;
  opacity: 1 } 
  


/* dashboard
//////////////////////////////////////////////////*/
#dashboard .table th,
#dashboard .table td {
  vertical-align: middle;
  padding: .5rem 1rem }

#dashboard .table th { font-size: 80%; color: rgba(0,0,0,.5) }

#dashboard .table tr > *:first-child { padding-left: 0 !important }
#dashboard .table tr > *:last-child { padding-right: 0 !important }

#dashboard .table * > *:last-child > * { border-bottom: 0 }

#dashboard .progress-bar { 
  text-align: right;
  line-height: 1;
  padding-right: .25rem;
  font-size: 75% }

@media(min-width:992px){
  .box-principal { background: #FFF url(img/bg-box1.jpg) no-repeat right bottom }
}


/* files
//////////////////////////////////////////////////*/
.files-menu a { 
  font-weight: bold;
  transition: all 300ms;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  margin-bottom: .25rem;
  border-radius: .25rem;
  text-decoration: none;
  color: rgba(0,0,0,0.275) }

.files-menu a .icon { fill: rgba(0,0,0,0.275) }

.files-menu a.active,
.files-menu a:hover { 
  color: currentColor;
  background: var(--color-primary-light) }

.files-menu a.active .icon,
.files-menu a:hover .icon { fill: currentColor }

#files .border { transition: all 300ms }

#files .border:hover { border-color: var(--color-primary) !important }



/* kanban
//////////////////////////////////////////////////*/
.kanban-board { 
  min-width: 300px;
  max-width: 300px;
  font-size: 87.5% }
  
.kanban-board:last-child:after {
  content: '';
  display: block;
  height: 1px;
  width: calc(100% + 1.5rem) }

.kanban-board a .avatar { 
  width: 24px;
  height: 24px;
  object-fit: cover }

.kanban-board .dropdown-toggle:after { content: none }

.kanban-board input[type="text"] {
  width: 100%;
  border-radius: .1px;
  margin: 0 5px }

.kanban-board input:active,
.kanban-board input:focus { 
  outline: 0;
  box-shadow: 0 0 0 4px  #FFF, 0 0 1px 5px #DDD;
  background: #FFF !important }

.kanban-board .cartao {
  position: relative;
  transition: all 300ms }

.kanban-board .handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px; }  

#detailCartao [id*="viewDescricao"].bg-light { 
  background:rgba(0,0,0,.05) !important;
  cursor: pointer }

#detailCartao [id*="viewDescricao"].bg-light:hover {
  background: rgba(0,0,0,.1) !important }

.modal textarea { font-size:14px }


@media(min-width:576px){

  /* padding right scroll*/
  .kanban-board:last-child:after { width: calc(100% + 6rem) }
  
}

/* heading/texts
//////////////////////////////////////////////////*/
h1  { font-size: clamp(125%, 3vw, 150%) }
h2  { font-size: clamp(112.5%, 3vw, 125%) }
h3  { font-size: clamp(106.75%, 3vw, 112.5%) }
h4  { font-size: clamp(100%, 3vw, 106.75%) }
h6  { font-size: clamp(100%, 3vw, 100%) }

h1, h2, h3, h6 { font-weight: 700 }



/* tables
//////////////////////////////////////////////////*/
.table-fixed { table-layout: fixed }

.table.massing { font-size: 75% } 

.table th, 
.table td { 
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis }

.table:not(#dashboard .table) td { overflow: hidden }

.table:not(#dashboard .table) th:hover,
.table:not(#dashboard .table) td:hover { overflow: visible }

.table:not(#dashboard .table) th:hover::after,
.table:not(#dashboard .table) td:hover::after {
  content: attr(data-label);
  background: #FFF;
  z-index: 1;
  padding: .125rem .25rem;
  border-radius: .25rem;
  box-shadow: 1px 1px 2px rgba(0,0,0,.25);
  position: absolute;
  top: .125rem;
  left: 0 }

.table:not(#dashboard .table) td:hover::after { content: attr(data-content) }

@media(max-width:767.98px){
  .table { font-size: 80% !important }

  .table th,
  .table td { padding: .5rem .5rem !important }
  
  .table td.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

  .table th:first-child, 
  .table td:first-child { padding-left: 0 !important } 

  .table th:last-child, 
  .table td:last-child { padding-right: 0 !important } 
}



/* scrollbar
//////////////////////////////////////////////////*/
::-webkit-scrollbar { width: .75rem }

::-webkit-scrollbar-track { background: #F6F6F6 }

::-webkit-scrollbar-thumb { 
  border-radius: 100px;
  background: var(--color-primary);
  background-clip: content-box;
  border: 3.5px solid transparent }

::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary-dark) }



/* global
//////////////////////////////////////////////////////////////////////////////////////////*/
.shadow { box-shadow: 0 .5rem 1rem rgba(60,104,179,0.075) !important }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(60,104,179,0.375) !important }

.rounded-5 { border-radius: 1rem }

.form-check {
  display: flex;
  gap: .75rem;
  align-items: center }

.form-check-input { margin: 0 }

.overflow-x { overflow-x: auto }
.overflow-y { overflow-y: auto }

.progress-bar { background-color: var(--color-primary) }

.apexcharts-text,
.apexcharts-text *,
.apexcharts-tooltip * { font-family: "Poppins", Sans-serif !important }

.accordion-button { color: var(--color-default) !important }

.accordion-button:after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235075B9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important ;
}

.dropdown-item.active, 
.dropdown-item:active,
.dropdown-item:focus { 
  color: #FFF !important;
  background: var(--color-primary) }

#delivery-time .apexcharts-tooltip {
  left: -150px !important
}

@media(max-width:480px){
  .apexcharts-legend.position-right { max-width: 120px }
  .apexcharts-legend-text { white-space: pre-wrap }
}



/* svg icons config
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon { 
  display: inline-block;
  position: relative }

.icon-16 { width: 16px; height: 16px }
.icon-24 { width: 24px; height: 24px }
.icon-32 { width: 32px; height: 32px }
.icon-48 { width: 48px; height: 48px }
.icon-56 { width: 56px; height: 56px }
.icon-64 { width: 64px; height: 64px }
.icon-96 { width: 96px; height: 96px }

.icon.text-primary    { fill: var(--color-primary) }
.icon.text-secondary  { fill: var(--color-secondary) }
.icon.text-default    { fill: var(--color-default) }
.icon.text-white      { fill: #FFF }
.icon.text-black-25   { opacity: .25 }
.icon.text-black-50   { opacity: .5 }
.icon.text-white-50   { fill: rgba(255,255,255,.5) }
.icon-whatsapp        { fill: #03B35B }


.animation-cog { 
  animation: spin 3s infinite linear }

@keyframes spin {
  0% { transform: rotate(0deg) scale(1) }
  50% { transform: rotate(180deg) scale(1.25) }
  100% { transform: rotate(360deg) scale(1) }
}





.page-item.active .page-link {
  color: #FFF !important;
  background-color: var(--color-primary);
  border-color: var(--color-primary) }

.page-item .page-link { color: var(--color-primary) !important  }


@media print{
  #header { display: none !important }

  .col-md-3 { width: 25% !important }
  /* .col-md-6,
  .col-xl-6 { width: 50% !important } */
  /* .col-md-9 { width: 75% !important } */

  .bg-primary-light { background: none !important }

  .bg-white.rounded-5.shadow {
    border: 1px solid #CCC; 
    box-shadow: none !important }
/* 
   #chartArea > *,
   #chartB > *,
   #chartMotivos > *,
   [id*="chartLine"] > *{ 
      width: 100% !important;
      max-width: 100% !important
   } */

}


/*EDIT 25/01/2023 */
[class*="bg-opacity"] {
  position: relative;
  overflow: hidden;
}


[class*="bg-opacity"] > * { 
  position:relative;
  z-index: 1 }

[class*="bg-opacity"]:before {
  content: '';
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0 }

.bg-opacity-40:before { background: rgba(255,255,255,.60) }
.bg-opacity-60:before { background: rgba(255,255,255,.40) }
.bg-opacity-80:before { background: rgba(255,255,255,.20) }


#dashboard .bg-gradient-red { color: #812027 }

#dashboard .bg-gradient-orange { color: #8F5E1C }

#dashboard .bg-gradient-green,
#dashboard .bg-gradient-green text { 
  fill: #3A863B;
  color: #3A863B }