.topics h2 {
  font-size: 22px;
  margin-bottom: 20px;
}

#d-select .dropdown-menu .dropdown-item{
    white-space: normal;
  }
  .my-herosec {
    background: #0A0E13;
    padding: 30px 0px;
  }
  
  .content-wrap h1 {
    font-size: 36px;
    font-family: 'zohoPuvi',sans-serif;
    margin-bottom: 10px;
  }
  .bradcrumb ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .bradcrumb ul li {
    color: #fff;
    position: relative;
    padding: 0px 10px;
  }
  
  .bradcrumb ul li:not(:last-child):before {
    position: absolute;
    content: '/';
    top: 0;
    right: -4px;
  }
  
  .bradcrumb ul li:last-child {
    color: #0c9949;
    font-family: 'ZohoPuviSemBd';
  }
  
  .bradcrumb ul li a {
    color: #fff;
  }
  
  .btn-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .btn-wrapper .line-btn {
    display: flex;
    align-items: center;
    background: none;
    margin-right: 15px;
    padding: 5px 10px;
    border: 1px solid #0c9949;
    font-size: 15px;
    color: #0c9949;
  }
  
  .btn-wrapper .line-btn img {
    display: inline-block;
    width: 18px;
    margin-right: 5px;
  }
  .btn-wrapper .dropdown-menu{
    top: 100% !important;
    transform: none !important;
  }
  .btn-wrapper .dropdown-menu .dropdown-item {
    font-size: 14px;
  }
  .btn-wrapper .dropdown-menu .dropdown-item:last-child{
    border-top: 1px solid #eee;
  }
  .left-sidebar {
    background: #f7f7f7;
  }
  
  
  .left-sidebar li{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    border-left: 4px solid transparent;
    border-radius: 0;
    font-size: 15px;
  }
  
  #hero-banner .dropdown-menu {
    z-index: 99999;
  }
  .left-sidebar  li:hover, .left-sidebar li.active {
    background: #ebebeb;
    border-left: 4px solid #000;
  }
  .cheat-sheet-sec{
    padding: 60px 0px;
  }
  .search-wrap img {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
  }
  
  .search-wrap input {
    padding: 8px 10px 8px 34px;
    font-size: 14px;
  }
  .cheatsheet-content .search-wrap input{
    padding: 8px 10px;
  }
  
  .cheat-sheet-sec .search-wrap {padding: 0;position: relative;height:unset;}
  .cheat-sheet-sec .search-wrap button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    border: none;
    justify-content: center;
    background: #0c9949;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
  }
  .cheat-sheet-sec .search-wrap button img {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
  }
   section h2 {
    font-size: 32px;
    font-family: 'zohoPuvi',sans-serif;
    margin-bottom: 50px;
  }
  
   section h5 {
    font-family: 'zohoPuvi',sans-serif;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }
  .sheet-details h6 {
    font-size: 16px;
    font-family: 'ZohoPuvi';
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  .sheet-details h6 span.highlight {
    margin-left: 4px;
}
  .sheet-details h6 img {
    display: inline-block;
    margin-right: 10px;
  }
  
  .right-sidebar .widget {
    padding: 20px;
    background: #f7f7f7;
    border-radius: 4px;
    margin-bottom: 30px;
  }
  
  .right-sidebar .widget p {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .right-sidebar .widget ul li a{
    padding: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 15px;
    display: flex;
  }
  .grid-item p{
    font-size: 15px;
    margin-bottom: 10px;
  }
  .right-sidebar .widget ul li img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
  }
  .right-sidebar .widget ul li a:hover{
    background: #fff;
  }
  
  .right-sidebar .widget.promo {
    background: #0a0e12;
  }
  
  .right-sidebar .widget.promo p {
    color: #fff;
    font-size: 15px;
    box-shadow: none;
  }
  
  .right-sidebar .widget.promo a {
    color: #0c9949;
  }
  .right-sidebar .widget.promo a img {
    width: 20px;
    height: 20px;
    border: 1px solid #0c9949;
    padding: 2px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
  }
  
  .left-sidebar, .right-sidebar {
    position: sticky;
    top: 80px;
  }
  .floating-buttons{
    display: none !important;
  }
  .about-section {
    padding: 60px 0px;
    background: #f7f7f7;
  }
  
  .promo-box {
    padding: 30px;
    position: relative;
    background: #0a0e11;
    color: #fff;
    z-index: 9;
  }
  
  .promo-box p {
    color: #fff;
    font-size: 16px;
  }
  
  .promo-box p span {
    color: #0c9949;
  }
  
  .promo-box-wrap:before {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    top: -18px;
    left: 0;
    background: #0c9949;
    border-radius: 50%;
    z-index: 1;
  }
  .promo-box-wrap:after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    bottom: -18px;
    right: 0;
    background: #0c9949;
    border-radius: 50%;
    z-index: 1;
  }
  .sheet-details h6 span.highlight {
    margin-left: 0;
    background: yellow;
    padding: 4px;
}
  
  .promo-box-wrap {
    margin: 50px 0px 0px;
    position: relative;
  }
  
  .promo-box a {
    color: #0c9949;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  
  .promo-box a span {
    width: 20px;
    height: 20px;
    border: 1px solid #0c9949;
    border-radius: 50%;
    padding: 2px;
    display: flex;
    margin-left: 5px;
  }
  
  .about-section p {
    font-size: 16px;
  }
  .recent-release .card {
    padding: 15px;
    height: 100%;
  }
  
  .recent-release .card ul li img {
    position: absolute;
    width: 15px;
    top: 10px;
    left: 0;
  }
  
  .recent-release .card ul li {
    padding-left: 20px;
    position: relative;
  }
  .recent-release .card ul {
    list-style: none;
    padding-left: 0;
}
  
  .recent-release .card ul a {
    padding: 5px 0px;
    display: flex;
  }
  
  .recent-release h5 {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .recent-release h5 img{
    display: inline-block;
    margin-right: 10px;
  }
  .topics .grid {
    position: relative;
  }
  
  section h5 img {
    display: inline-block;
    margin-right: 10px;
  }
  
  .topics h6 {
    font-size: 18px;
  }
  
  
  .topics .grid-item h6 { font-size: 16px; }
  
  .grid-item .card-body {
      background: #141414;
      border-radius: 10px;
  }
  .grid-item .card-body pre{
    margin-bottom: 0;
  }
  .syntax {
      padding: 15px;
      background: #F8FCFF;
      border-radius: 10px;
      margin-bottom: 15px;
  }
  .syntax span:not(.btn span) {
      font-size: 12px;
      padding: 5px;
      line-height: 12px;
      background: #FFD488;
      border-radius: 5px;
  }
  
  .copy-btn {background: transparent;font-size: 14px;padding: 0;}
  
  .copy-btn img {
      display: inline-block;
      margin-right: 5px;
  }
  
  .syntax pre {
      margin-top: 10px;
      margin-bottom: 0;
  }
  
  .show-btn {
      padding: 0;
      background: none;
      text-align: left;
      font-size: 15px;
      text-decoration: underline;
      color: #187DF4;
      box-shadow: none !important;
      border: none;
      outline: none !important;
      margin-bottom: 0px;
      cursor: pointer;
  }
  .grid-item .card.p-4 {
      padding: 15px !important;
  }
  .card-body .copy-btn {
    color: #FFD488;
    text-align: right;
    box-shadow: none !important;
    padding: 10px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
  }
  .card-body .copy-btn svg {
    width: 15px;
    display: inline-block;
    margin-right: 5px;
  }
  .cheatsheet-content p, .cheatsheet-content li {
    font-size: 15px;
}
  pre .code.hljs{
    background: #141414;
  }
  .list-wrap li ul > pre .code.hljs{
    padding: 15px;
    overflow: auto;
    border-radius: 10px;
  }
  .grid .shuffle-col{
    margin-bottom: 30px;
  }
  .cheatsheet-content.search .shuffle-col{
    display:none;
  }
  .cheatsheet-content.search .shuffle-col.searched{
    display:block;
    position:  relative !important;
    transform: none !important;
  }
  .cheatsheet-content.search .my-shuffle{
    height: auto !important;
  }
  .cheatsheet-content.search .no-highlight {
    display: none;
}
  .popup-alert{
    top: 80px;
      right: 0;
      display: inline-block;
      background: #0c9949;
      z-index: 9999;
      color: #fff;
      padding: 10px 30px;
      transition: all 0.3s ease;
      position: fixed;
      max-width: 50%;
  }
  .highlight {background-color: yellow;}
  .recent-release {padding: 60px 0px;}

  .essentials-kit.list-wrap ul li .grid-item span{
    background: transparent;
    padding: 0;
    font-size: 14px;
    margin: 0;
    color: #ffd489;
}
.grid-item ul {
  padding-left: 20px;
  list-style: disc;
}


  @media(min-width: 992px){
    .search-wrap {max-width: 25%;margin-left: auto;}
  }
  @media(max-width: 1280px) and (min-width: 992px){
    .sheet-details .container-fluid .row > .col-lg-2{max-width: 20%;flex: 0 0 20%;}
    .sheet-details .container-fluid .row > .col-lg-8{max-width: 60%;flex: 0 0 60%;}
    .cheatsheet-content .grid .col-lg-6{max-width: 100%; flex: 0 0 100%}
    }
  @media(max-width: 991px){
    .right-sidebar{display: flex; flex-wrap: wrap;flex-direction:column;}
    .right-sidebar .widget:not(.promo){order: 2};
    .right-sidebar .widget.promo{order:1}
    .left-sidebar .form-group {position: relative;margin-bottom:30px}
    .left-sidebar .form-group label {width: 100%;}
    #d-select {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0;font-size: 14px;}
    #d-select button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: transparent;
      color: #000;
      outline: none;
      box-shadow: none;
      border: 1px solid #dfdfdf;
  }
  #d-select .dropdown-menu {
    width: 100%;
    font-size: 14px;
    margin: 0;
  }
    .left-sidebar .form-group .down-arrow {position: absolute;top: 40px;right: 15px;max-width: 10px;pointer-events: none;}
    .down-arrow svg {width: 10px;}
    .left-sidebar{background: none;padding: 0px 0px 0px !important;}
    .left-sidebar h6{display: none;}
    .left-sidebar label{display: block;}
    .cheat-sheet-sec{padding: 30px 0px}
    section h5{margin-bottom: 20px}
    .sheet-details .row > .col-lg-2:first-child {position: sticky;top: 63px;left: 0;background: #f7f7f7;z-index: 9999;padding: 15px;}
    .cheatsheet-content .search-wrap{margin-bottom: 30px}
    .recent-release {padding: 40px 0px;}
    .bradcrumb ul{flex-wrap: wrap}
    .bradcrumb ul li{font-size: 15px;}
  }  
  @media(max-width:767px){
    .recent-release {padding: 30px 0px;}
    .recent-release .card{height:unset;margin-bottom:30px}
  }
  @media print {
    .no-print {
        display: none !important;
    }
    body {
        font-size: 12pt;
        line-height: 1.5;
        margin: 0;
        padding: 0;
    }
    .page-break {
        page-break-before: always;
    }
    .print-content {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    .grid .shuffle-col {
        margin-bottom: 30px;
        position: relative !important;
        top: unset !important;
        left: unset !important;
        transform: none !important;
        max-width: 100%;
    }
    .row.my-shuffle {
        height: unset !important;
    }
    pre {
        border: none;
    }
    .btn.show-btn,
    .copy-btn {
        display: none;
    }
    .site24x7-logo {
        display: block !important;
        margin: 0 auto 30px;
    }
    .grid-item .collapse {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }
    .grid-item {
        visibility: visible !important; 
    }
    .shuffle-item {
        opacity: 1 !important; 
        transform: none !important; 
    }
}




.opacity-0{
  opacity: 0;
}
.list-wrap > ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.list-wrap > ul > li {
  width: calc(50% - 20px);
  margin: 10px;
  padding: 10px 20px 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.list-wrap li ul {
  list-style: disc;
  padding-left: 15px;
  padding-bottom: 15px;
}

.list-wrap ul li h6 {
  margin-bottom: 10px;
}
.list-wrap > ul > li > span:not(.highlight) {
  background: #0c9949;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  display: inline-block;
  line-height: 12px;
  border-radius: 5px;
  margin-bottom: 10px;
  letter-spacing: normal;
}
@media(max-width: 767px){
  .list-wrap ul li {
      width: calc(100% - 20px);
  }
}