.card {
      cursor: pointer;
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      background-color: var(--basic-card);
      transition: transform 0.3s ease;
}

.card:hover {
      transform: translateY(-5px);
      background-color: var(--basic-card-highlight);
}

.card-conteudo {
      padding: 20px;
}

.card-erro {
      padding: 2.5%;
      background-color: var(--erro-color);
      text-align: center;
}

.card-erro:hover {
      background-color: var(--erro-color-highlight);
      transform: none !important;
}

.dashboard {
      width: 100%;
      border-radius: 10px;
      margin: 1% 0;
      box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.5);
}

.light-dashboard {
      background-color: var(--basic-card);
}

.important-dashboard {
      background-color: var(--important-card);
}

.dashboard-card {
      cursor: auto;
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      background-color: var(--basic-card);
      margin: 1% 0;
      border-left: 2px solid transparent;
      border-bottom: 2px solid transparent;
      transition: border-color 0.3s ease-in-out;
      transition: box-shadow 0.3s ease;
}

.dashboard-card:hover {
      border-left-color: var(--primary-card-border);
      border-bottom-color: var(--primary-card-border);
      box-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0.5), 4px 0 6px -4px rgba(0, 0, 0, 0.5);
}

.dashboard-modal {
      position: fixed;
      z-index: 10;
      border-radius: 10px;
      top: 33%;
      align-self: center;
      display: none;
      padding: 3%;
      margin: 1% 0; 
      box-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0.5), 4px 0 6px -4px rgba(0, 0, 0, 0.5);
      max-width: 90% !important;
      min-width: 70% !important;
}

.dashboard-modal.top {
      z-index: 12;
}

.big-modal {
      min-width: 300px;
      width: 50%;
      height: auto;
      max-height: 700px;
}

.wide-form-modal 
{
      height: auto;
      max-height: 800px;
      overflow-y: auto;
}

.basic-card-wrapper {
      display: inline-block;
      text-align: start;
      width: 100%;
      padding: 2% 5%;
}

.divisor-header {
      padding: 0.5em 1em;
      border-radius: 10px;
}

.primary-divisor {
      background-color: var(--primary-dashboard-header); 
}

.secondary-divisor {
      background-color: var(--secondary-dashboard-header);
      color: var(--text-white);
}

.special-divisor {
      background-color: var(--special-dashboard-header);
      color: var(--text-white);
}

.alert-divisor {
      background-color: var(--alert-dashboard-header);
      color: var(--text-white);
}