// >>-- 14 Cheatsheet css start --<<
.toggle-card{
  overflow: hidden;
  .card-header{
    text-transform: capitalize;
  }
    ul{
      padding: 0.4rem 0;
      li{
        padding: 0.75rem 1.25rem;
        color: rgba(var(--dark),.75);
        font-size: 16px;
        font-weight: 500;
        transition: var(--app-transition);
        cursor: pointer;
        .collapse-icons{
          float: right;
          opacity: 0;
          transition: var(--app-transition);
          a{
            font-size: 1.2rem;
          }
        }
        &+ {
          li{
            border-top: 1px dashed rgba(var(--dark), .2);
          }
        }
        &:hover{
          background-color: rgba(var(--primary),0.1);
          color: rgba(var(--primary-dark),1);
          transition: var(--app-transition);
          .collapse-icons{
            opacity: 1;
            transition: var(--app-transition);
          }
        }
      }
    }
}
.code-container{
  background: rgba(var(--dark), 0.6);
    position: fixed;
    bottom: 46px;
    width: 100%;
    padding-left: 17.6rem;
    right: -1px;
    z-index: 1001;
    .code-preview{
      height: 20vh;
      overflow-y: scroll;
      overflow-x: none;
    }
    .code-preview-header {
      background: rgba(var(--dark), 1);
      padding: 1rem 1.75rem;
    }
}
.box-shadow-none{
  box-shadow: none;
}

.active-preview{
  background-color:rgba(var(--primary), .1);
  // color:white!important;
  color: rgba(var(--primary), 1) !important;
  .collapse-icons{
    opacity: 1;
  }
  // &:hover{
  //   color: rgba(var(--secondary), 1)!important;
  // }
}
.cheatsheet-blocks{
  margin: 0 -6px 1.25rem;
  .cheatsheets-card{
      width: calc(33% - 12px);
      margin: 0 6px 12px;
  }
  .d-flex{
    a{
        width: 100%;
        cursor: pointer;
    }
}
}
.cheatsheet-header{
  min-height: 280px;
  background-image: url("../images/background/01.jpg");
  background-blend-mode:overlay;
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 50px;
  background-color: #a9acaf;
  h2{
    font-size: calc(22px + (32 - 22) * ((100vw - 300px) / (1920 - 300)));
  }
  .search-div{
    width: 60%;
    padding: 0.375rem 0.75rem;
  }
}

// >>-- 14 Cheatsheet css end --<<