:root {
      --image-asset-width-lg: 280px;
      --image-asset-height-lg: 200px;
      --image-asset-width-sm: 210px;
      --image-asset-width-mobile: 240px;
      --image-asset-height-sm: 145px;
      --minus-handle-height-lg: -200px;
      --carousel-handle-height-lg: 200px;
      --carousel-handle-height-sm: 210px;
      --minus-handle-height-sm-left: -260px;
      --minus-handle-height-sm-right: -210px;
      --carousel-handle-width-lg: 100px;
      --carousel-handle-width-sm: 50px;
  }

  body, html {
    overflow-y: auto;
  }

  /* dashboard */
  .dash-content.traning {
    padding: 0 2% 2% 2%;
    background: #515960;
    min-height: 100vh;
  }
  .dash-content.traning, .top-menu {
    margin: 0 2%;
    overflow-x: clip;
  }

  .result-top {
    margin: 0 2%;
    background: #fff;
  }

  .result-top h1.title {
    font-size: 22px;
    font-weight: bold;
    font-family: 'BwDarius';
    padding-left: 2%;
    background: #fff;
    }

  .container-fluid {
    position: relative;
    padding-right: unset !important;
    padding-left: unset !important;
    margin-right: unset !important;
    margin-left: unset !important;
  }

  /* carousel section */
  .heading {
    font-family: 'BwDarius';
    font-weight: bolder;
    font-size: 18px;
    padding: 3% 0 2% 1.5%;
    color: #fff;
  }

  .ke-carousel-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 115% !important;
    height: 200px !important;
    transition: transform 0.5s ease;
  }

  .ke-carousel-item {
    width: var(--image-asset-width-lg) !important;
  }

  .container-fluid .img-fluid {
    width: 280px !important;
    max-width: 280px !important;
    height: 200px !important;
  }

  .grid .asset-item {
    width: 260px !important;
    height: 200px !important;
    /* margin-right: 30px !important; */
  }

  .grid .asset-item .text {
    font-size: 14px !important;
  }

  .grid .asset-item .image {
    border-radius: 8px !important;
  }

  .grid-item1.asset-item.traning {
    width: 260px !important;
    margin-right: 30px !important;
  }

  .grid-item.asset-item.traning {
    width: 260px !important;
    /* margin-right: 30px !important; */
  }
  .asset_label.text {
    background: #fff;
    height: 60px;
    top: -60px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
  }

  /* carousel handles */
  .kc-carousel-control-next,
  .kc-carousel-control-prev,
  .usa-carousel-control-next,
  .usa-carousel-control-prev,
  .eng-carousel-control-next,
  .eng-carousel-control-prev,
  .yl-carousel-control-next,
  .yl-carousel-control-prev {
    position: absolute;
    height: var(--carousel-handle-height-lg);
    width: 7% !important;
  }

  .kc-carousel-control-next,
  .usa-carousel-control-next,
  .eng-carousel-control-next,
  .yl-carousel-control-next {
    position: relative;
    margin-right: -2vw;
  }

  .kc-carousel-control-prev,
  .usa-carousel-control-prev,
  .eng-carousel-control-prev,
  .yl-carousel-control-prev {
    margin-left: -2vw;
  }

  .kc-carousel-control-next:hover,
  .kc-carousel-control-prev:hover,
  .usa-carousel-control-next:hover,
  .usa-carousel-control-prev:hover,
  .eng-carousel-control-next:hover,
  .eng-carousel-control-prev:hover,
  .yl-carousel-control-next:hover,
  .yl-carousel-control-prev:hover {
    background: rgba(255,255,255,0.4);
  }

  .fa.fa-chevron-left,
  .fa.fa-chevron-right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 50%;
  }

  .fa.fa-chevron-left::before,
  .fa.fa-chevron-right::before {
      color: #ffffff70;
  }

    #kc-carousel-next {
      z-index: 10;
      width: 12%;
    }

    a.kc-carousel-control-prev.kc-carousel-control-prev,
    a.usa-carousel-control-prev.usa-carousel-control-prev,
    a.eng-carousel-control-prev.eng-carousel-control-prev,
    a.yl-carousel-control-prev.yl-carousel-control-prev {
      left: -2%;
    }

    a.kc-carousel-control-next.kc-carousel-control-next,
    a.usa-carousel-control-next.usa-carousel-control-next,
    a.eng-carousel-control-next.eng-carousel-control-next,
    a.yl-carousel-control-next.yl-carousel-control-next {
      right: -2%;
    }

  #carousel_UK, 
  #carousel_USA, 
  #carousel_English, 
  #young_learners {
    height: 220px;
    background: #515960;
  }

  #kc-carousel-prev, 
  #kc-carousel-next,
  #usa-carousel-prev, 
  #usa-carousel-next,
  #eng-carousel-prev, 
  #eng-carousel-next {
    position: absolute;
    display: block !important;
    transform: translateY(-100%);
  }

  #yl-carousel-prev, 
  #yl-carousel-next {
    position: absolute;
    display: block;
    transform: translateY(-100%);
  }

  .col-lg-3,
  .col-md-3,
  .col-sm-6,
  .col-xs-6,
  .col-sm-12,
  .col-xs-12 {
    -webkit-box-flex: unset !important;
    flex: unset !important;
    max-width: unset !important;
    padding-right: unset !important;
    padding-left: unset !important;
  }

  @media screen and (max-width:768px) {

    .dash-content.traning {
      background: #fff !important;
      margin-top: 10vh;
    }

    .dash-content {
      overflow-x: hidden;
    }

    .type-row .heading {
      background: #111;
      color: #fff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      margin-top: 40px;
    }

    #carousel_UK, 
    #carousel_USA, 
    #carousel_English, 
    #young_learners {
      height: 200px;
      background: #515960;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      overflow-x: hidden;
      overflow-y: hidden;
    }

    .ke-carousel-inner{
      background: #515960;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      width: 100% !important;
      padding-left: 10px;
      z-index: 5;
      /* position: absolute; */
    }

    .ke-carousel-item {
      /* height: var(--image-asset-height-sm) !important; */
      width: var(--image-asset-width-mobile) !important;
      padding-top: 20px;
      margin-bottom: 40px;
    }

    .grid-item1.asset-item.traning,
    .grid-item.asset-item.traning {
      height: var(--image-asset-height-sm) !important;
      width: var(--image-asset-width-sm) !important;
    }

    .asset_label.text {
      height: 40px;
      top: -40px;
    }

    .grid .asset-item .asset-type-icon {
      margin-left: -20px;
    }
    
    .grid .asset-item .asset_type_name {
      padding-top: 5px;
    }

    #kc-carousel-next,
    #usa-carousel-next,
    #eng-carousel-next,
    #yl-carousel-next {
      width: 12.5% !important;
      right: 2% !important;
      display: none !important;
    }

    #kc-carousel-prev, 
    #usa-carousel-prev, 
    #eng-carousel-prev,
    #yl-carousel-prev {
      width: 12.5% !important;
      left: 2% !important;
      display: none !important;
    }

    #young_learners {
      margin-bottom: 10vh;
    }

  }

  a:hover {
    text-decoration: none !important;
  }