:root {
  --color-primary:        #13316D;
  --color-primary-dark:   #122136;
  --color-primary-light:  #F5F6FB;
  --color-secondary:      #EC4E27;
  --color-red:            #EC4E27;
  --color-green:          #00D96E;
  --color-yellow:         #FAB519;
  --color-default:        #122136;
  --py-body-centered:     1.25rem }

.text-primary,
a:hover:not(.btn)     { 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-red           { background-color: var(--color-red) }
.bg-green         { background-color: var(--color-green) }
.bg-yellow        { background-color: var(--color-yellow) }

.text-dark { color: var(--color-primary-dark) !important }

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

.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 { min-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, 120%);
  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(2.5 * 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;
  margin-bottom: calc(.5 * var(--p-nav-link)) }

aside .dropdown-menu li:not(:last-child){ margin-bottom: calc(.5 * var(--p-nav-link)) }

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.375) }

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

aside.bg-light .navbar-brand,
aside.bg-light .nav-link.active,
aside.bg-light .nav-link:hover,
aside.bg-light .nav-link.dropdown-toggle.show,
/* 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 { 
  line-height: 1.25;
  white-space: pre-wrap !important;
  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: 120%;
    padding: .25rem 3rem }

  aside .dropdown-menu.show { padding: 1rem 3rem !important }
  aside .dropdown-menu li:not(:last-child) { margin-bottom: .75rem !important }

  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 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% }

#dashboard .bg-primary .border-bottom { border-bottom-color: rgba(255,255,255,.25) !important }  

@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 }


@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) }

.scroll-y { overflow-y: scroll }



/* 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) }

@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) }
}

.graphic-container {
  min-height: 300px !important;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: clip;
}