:root {
    --white: #ffffff;
    --light: #c9efff;
    --dark: #1b295c;
    --primary: #f0ae66;
    --secondary: #4eafe2;
    --info: #c5e3f9;
    --success: #70d531;
    --warning: #fed094;
    --danger: #fc336d;
  }

  /* Override Bootstrap colors */
  .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
  }

  .btn-primary:hover {
    background-color: var(--dark);
    border-color: var(--dark);
  }

  .btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
  }

  .btn-secondary:hover {
    background-color: var(--dark);
    border-color: var(--dark);
  }

  .card-footer small {
    color: var(--warning);
  }

  .card-footer small:hover {
    color: var(--dark);
  }

  .footer {
    background-color: var(--dark);
    color: var(--white);
  }

  .footer a {
    color: var(--light);
  }

  .footer a:hover {
    color: var(--white);
  }

  .card {
    border: none;
  }

  .card:hover {
    box-shadow: 0px 0px 10px var(--dark);
  }

  .jumbotron {
    background-color: var(--light);
    color: var(--dark);
  }

  .jumbotron a {
    color: var(--dark);
  }

  .jumbotron a:hover {
    color: var(--primary);
  }

  .list-inline-item .link-light {
    color: var(--light) !important;
  }

  .list-inline-item .link-light:hover {
    color: var(--white) !important;
  }
  html, body {
    background-color: var(--light) !important;
  }

  .overlay-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: none;
    z-index: 1;
  }
  
  .circle {
    fill: #000;
    stroke: #808080;
    stroke-width: 1.5px;
    opacity: 0.7;
  }
  
  .empty-circle {
    fill: #808080;
    stroke: #484343;
    stroke-width: 1.5px;
    opacity: 0.7;
  }

  .logo-img {
    width: 40%;
    max-width: 700px;
  }
  .active {
    font-weight: 700;
  }
  .logo-plugin {
    width: 100%;
    max-width: 700px;
  }

  .text-justify {
    text-align: justify;
  }