body {
          font-family: 'Open Sans', sans-serif !important;
      }

      body {
        background-color: #f1f1f1;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;
      }

      .col-feature {
        color: #810050;
      }

      .top-spacer {
        height: 10px; 
        background-color:#810050;
      }

      .navbar-light .navbar-nav .nav-link {
        font-size: 0.85rem;
        font-weight: 700;
        padding: 0px !important;
        border-bottom: 3px solid rgba(0,0,0,0);
        transition: all 0.5s;
        color: #810050;
      }

      .navbar-brand {
        position: relative;
        top: -10px;
        left: -12px;
      }

      .navbar-brand img:first-child {
        padding-right:20px; 
        padding-left: 30px;
        border-right: 1px solid #666;
      }

      .navbar-brand img:last-child {
        padding-right:  20px;
      }

      #main-navbar.navbar {
        box-shadow: none;
        padding-top: 0px;
        padding-bottom: 0px;
        border-top:10px solid #810050;
      }

      .navbar-collapse {
        padding-right: 30px;
      }

      .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        text-decoration: none;
        border-bottom: 3px solid #efae00;
      }

      .btn {
        border-radius: 20px;
        box-shadow: none;
      }

      .btn-outline-primary,
      .btn-outline-primary:hover,
      .btn-outline-primary.active,
      .btn-outline-primary.dropdown-toggle.show,
      .btn-outline-primary.focus,
      .btn-outline-primary:active,
      .btn-outline-primary:focus {
          color: #205352;
          border-color: #205352;
      }

      .btn-primary {
          background-color: #205352;
      }

      .form-outline .form-control:focus ~ .form-label {
          color: #205352;
      }

      .form-outline .form-control:focus ~ .form-notch .form-notch-leading {
          border-top: .125rem solid #205352;
          border-bottom: .125rem solid #205352;
          border-left: .125rem solid #205352;
      }

      .form-outline .form-control:focus ~ .form-notch .form-notch-middle {
          border-bottom: .125rem solid #205352;
      }

      .form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
          border-top: .125rem solid #205352;
          border-bottom: .125rem solid #205352;
          border-right: .125rem solid #205352;
      }

      .btn-primary.focus,
      .btn-primary:focus,
      .btn-primary:hover {
          background-color: #B5121B;
      }

      .yellow-button {
        background-color: #efae00; 
        color: #fff;
      }

      .yellow-button.focus,
      .yellow-button:focus,
      .yellow-button:hover {
        background-color: #be6105;
        color: #fff;
      }

      .card-header {
          padding-top: 1.3rem;
          color: #205352;
          font-weight: 700;
          border-bottom: none;
          font-size:  24px;
      }

      .card, .card:hover {
        background-color: transparent !important;
      }
      .file-image {
        filter: brightness(100%);
      }

      .card {
        border-bottom: 2px dashed #dcdcdc;
        border-right: 2px dashed #dcdcdc;
        border-radius: 0 0 30px 0;
        box-shadow: none;
      }

      a {
          color: #B5121B;
          transition: all 0.4s;
      }

      a:hover {
          color: #205352;
          text-decoration: underline;
      }

      main {
          flex: 1 0 auto;
          margin-top: 100px;
      }

      .form-outline .form-control {
        background-color: #fff;
      }

      .card {
          transition: all 0.5s;
      }

      .card:hover {
          background-color: #eee;
      }

      @media only screen and (min-width: 1200px) {
          .file-image {
              border-bottom-left-radius: 0.5rem;
          }
      }

      .bubble {
        border-width: 3px;
        border-style: solid;
        border-radius: 30px;
        min-height: 220px;
        padding: 20px;
        margin-bottom:  20px;
      }

      .bubble-stat {
        font-size: 30px;
        font-weight: 700;
        border-bottom-width: 2px;
        border-bottom-style: dashed;
        margin-bottom:  10px;
      }

      .bubble.bubble-blue, .bubble.bubble-blue .bubble-stat {
        border-color: #0e6e8c;
        color: #0e6e8c;
      }
      .bubble.bubble-pink, .bubble.bubble-pink .bubble-stat {
        border-color: #c10054;
        color: #c10054;
      }
      .bubble.bubble-purple, .bubble.bubble-purple .bubble-stat {
        border-color: #473f6f;
        color: #473f6f;
      }
      .bubble.bubble-green, .bubble.bubble-green .bubble-stat {
        border-color: #61ab34;
        color: #61ab34;
      }

      .dgreen-button { background-color: #1d4442; color:#fff; }
      .purple-button { background-color: #413969; color:#fff; }
      .dyellow-button { background-color: #d2732c; color:#fff; }
      .green-button { background-color: #66a93b; color:#fff; }
      .blue-button { background-color: #1094c9; color:#fff; }
      .pink-button { background-color: #bb0a4f; color:#fff; }
      .teal-button { background-color: #1f6e89; color:#fff; }
      .dct-button:hover { color:#fff; filter: grayscale(0.2);  }