/* 

1 - Globais
2 - Components

*/


/* ======================================================================= */
/* GLOBAL */
/* ======================================================================= */
:root {
  --primary-color: #36AD5F; 
  --secondary-color: #0f401198;
}

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: #8392AB;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid var(--primary-color);  /* creates padding around scroll thumb */
}

/* ======================================================================= */
/* COMPONENTS */
/* ======================================================================= */

.cards-dashboard  {
  gap: 16px;
  display: grid; 
  grid-template-columns: minmax(200px, 240px) minmax(200px, 240px) minmax(200px, 240px) minmax(200px, 240px); 
  justify-content: center;
  margin-top: 16px;
  transition: all 0.4s;
  transform: scale(1);
}
.cards-dashboard .card .card-body h5 {
  font-weight: bold;
  margin-bottom: 0px;
}
.cards-dashboard .card .card-body .icon{
  width: 48px;
  height: 48px;
  background-position: center;
  background-color: var(--primary-color);
  border-radius: 0.4rem;
  align-items: center;
  color: #fff;
  position: relative;
}
.cards-dashboard .card .card-body .icon i{
  position: absolute;
  top: 24%;
  right: 24%;
}
.cards-dashboard .card:hover {
  transition: all 0.4s;
  transform: scale(1.05);
  background-color: var(--primary-color);
}
.cards-dashboard .card:hover h5{
  color: #fff;
}
.cards-dashboard .card:hover .card-body .icon{
  background-color: var(--secondary-color);
}
/* ACTIVE */
.cards-dashboard .card.active {
  transition: all 0.4s;
  transform: scale(1.05);
  background-color: var(--primary-color);
}
.cards-dashboard .card.active h5{
  color: #fff;
}
.cards-dashboard .card.active .card-body .icon{
  background-color: var(--secondary-color);
}
@media(max-width: 991px) {
  .cards-dashboard  {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr); 
    align-items: center;
    text-align: center;
  }
}
@media(max-width: 768px) {
  .cards-dashboard  {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr); 
  }
}

@media(max-width: 568px) {
  .cards-dashboard  {
    grid-template-columns: minmax(200px, 1fr); 
    align-items: center;
    text-align: center;
  }
  .cards-dashboard .card {
    justify-content: center;
  }
  .cards-dashboard .card .icon {
    margin-top: 12px;
  }
}

/* MENUS */
#menuMobilePrimeiraColeta ul li a{
  color: #000;
  width: 100%;
  text-align: center;
  padding: 12px 20px;
}
#menuMobilePrimeiraColeta ul li a:hover{
  color: #fff;
}
.modal-content .modal-body::-webkit-scrollbar {
  width: 12px;
}
.modal-content .modal-body::-webkit-scrollbar-track {
  background: #8392AB;
}
.modal-content .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);    
  border-radius: 20px;
  border: 3px solid var(--primary-color);
}

/* SEGUNDA COLETA */
#menuMobileSegundaColeta ul li a{
  color: #000;
  width: 100%;
  text-align: center;
  padding: 12px 20px;
}
#menuMobileSegundaColeta ul li a:hover{
  color: #fff;
}

/* TERCEIRA COLETA */
#menuMobileTerceiraColeta ul li a{
  color: #000;
  width: 100%;
  text-align: center;
  padding: 12px 20px;
}
#menuMobileTerceiraColeta ul li a:hover{
  color: #fff;
}

/* MENU DASHBOARD */
#sidenav-collapse-main {
  margin-top: 72px;
}