$turbo-yellow: #ffcc19;
$turbo-yellow-10: lighten($turbo-yellow, 40%);
$turbo-yellow-20: lighten($turbo-yellow, 30%);
$turbo-yellow-30: lighten($turbo-yellow, 20%);
$turbo-yellow-40: lighten($turbo-yellow, 10%);
$turbo-yellow-50: lighten($turbo-yellow, 0%);
$turbo-yellow-60: darken($turbo-yellow, 10%);
$turbo-yellow-70: darken($turbo-yellow, 20%);
$turbo-yellow-80: darken($turbo-yellow, 30%);
$turbo-yellow-90: darken($turbo-yellow, 40%);

.bg-turbo-yellow {
  background-color: #0E0E0E;
  color: #fff !important;

  &:focus {
    box-shadow: none;
  }
}


#sidebarCollapse {
  display: none;
  @media (max-width: 991px) {
    display: block;
  }
}

.bg-turbo-yellow-10 {
  background-color: $turbo-yellow-10;
}

.bg-turbo-yellow-20 {
  background-color: $turbo-yellow-20;
}

.bg-turbo-yellow-30 {
  background-color: $turbo-yellow-30;
}

.bg-turbo-yellow-40 {
  background-color: $turbo-yellow-40;
}

.bg-turbo-yellow-50 {
  background-color: $turbo-yellow-50;
}

.bg-turbo-yellow-60 {
  background-color: $turbo-yellow-60;
}

.bg-turbo-yellow-70 {
  background-color: $turbo-yellow-70;
}

.bg-turbo-yellow-80 {
  background-color: $turbo-yellow-80;
}

.bg-turbo-yellow-90 {
  background-color: $turbo-yellow-90;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

$lila: $turbo-yellow/*#7386D5*/
;
$lila-60: $turbo-yellow-60/*#6d7fcc*/
;
$lila-line: $turbo-yellow-70/*#47748b*/
;

$text-sidebar: #6b6b6b/*#fff*/
;
$text-sidebar-hover: #6b6b6b/*#fff*/
;

.text-sidebar {
  color: $text-sidebar;
}

.user_detail h4 {
  color: #323232;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  margin: 10px 0 0;
}

.user_detail p {
  color: #565656;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: normal;
}

#sidebar {
  background: #fff;
  border-radius: 18px;
  transition: all 0.3s;
  padding: 30px 0 50px;
  height: 100vh;
  margin: 20px 15px 30px;

  @media (max-width: 991px) {
    margin: 0;
  }

  .img-cont {
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 25px;
    margin-bottom: 35px;
    text-align: center;
  }

  .sidebar_trigger {
    ul {
      list-style: none;
      padding: 0 10px 0 0;
      @media (max-width: 1199px) {
        padding: 0;
      }

      li {
        display: flex;
        align-items: center;
        padding: 8px 20px 8px 20px;
        margin: 0 25px 35px;
        position: relative;

        @media (max-width: 1399px) {
          margin: 0 15px 35px;
        }
        @media (max-width: 1299px) {
          margin: 0 0 35px;
        }

        @media (max-width: 991px) {
          margin-bottom: 15px;
        }
        //svg{
        //    width: 40px;
        //}
        a {
          font-size: 16px;
          font-weight: 500;
          line-height: 19px;
          color: #858585;
          text-decoration: none;
          margin-left: 15px;
        }

      }

      .active {
        background: #060B16;
        border-radius: 60px;
        justify-content: center;

        svg {
          rect,
          path {
            fill: #00C5B4;
            stroke: #00C5B4;
          }
        }

        a {
          color: #00C5B4;
          font-weight: 700;
        }
      }
    }
  }

  .create-form {
    background: #F1F7FF;
    margin: 0 20px;
    border-radius: 10px;

    a {
      display: flex;
      justify-content: space-between;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      line-height: 16px;
      color: #323232;
      align-items: center;
      padding: 10px 20px;
    }
  }

  .side_menu {
    h3 {
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      color: #94A3B8;
      margin: 25px;
    }

    .policies-link {
      text-decoration: none;
      display: block;
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      letter-spacing: 0.20000000298023224px;
      color: #64748B;
      margin-bottom: 35px;
      padding-left: 25px;
    }
  }
}

#sidebar.active {
  transform: translateX(-350px);
}

#sidebar .sidebar-header {
  padding: 20px;
  background: $lila-60 /*#6d7fcc*/
;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid $lila-line;
}

#sidebar ul p {
  color: $text-sidebar;
  padding: 10px;
}

#sidebar ul li a {
  font-size: 1.1em;
  display: block;
}

// #sidebar ul li a:hover {
//     color: $lila;
//     background: $text-sidebar-hover;
// }

// #sidebar ul li.active>a, a[aria-expanded="true"] {
// }

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

//ul ul a {
//    font-size: 0.9em !important;
//    padding-left: 30px !important;
//    background: $lila-60;
//}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: $text-sidebar;
  color: $lila;
}

a.article,
a.article:hover {
  background: $lila-60 !important;
  color: $text-sidebar !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

// #content {
//     width: 100%;
//     padding: 20px;
//     min-height: 100vh;
//     transition: all 0.3s;
// }

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 991px) {
  #sidebar {
    display: none;
  }
  #sidebar.active {
    transform: translateX(0px);
    display: block;
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
  }

  button#sidebarCollapse {
    display: block;
    position: absolute;
    left: 0;
    top: 100px;
    z-index: 9999999;
    padding: 0 6px;
    transition: .5s;
  }
}

