
  #the-canvas {
    border: 1px solid black;
    direction: ltr;
  }  

  /* Horizontal scroll cards */
  .scroll-horizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;  
  }
  
  .scroll-horizontal::-webkit-scrollbar { width: 0 !important }
  
  .scroll-horizontal { overflow: -moz-scrollbars-none; }
  
  .card-scroll-horizontal {
    flex: 0 0 auto;
  }
  
  .news-horizontal-sizing {
    max-width: 33.33333333%;
    flex: 0 0 33.33333333%;
  }
  
 .arrow-right {
    position: absolute;
    z-index: 2;
    right: -15px;
    height: 30px;
    width: 30px;
    box-shadow: rgb(0 0 0 / 14%) 0px 1px 1px 1px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: transparent !important;
    background: rgb(255, 255, 255) !important;   
    top: 42%;
 }  
 
 .arrow-left {
    position: absolute;
    z-index: 2;
    left: -15px;
    height: 30px;
    width: 30px;
    box-shadow: rgb(0 0 0 / 14%) 0px 1px 1px 1px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: transparent !important;
    background: rgb(255, 255, 255) !important;   
    top: 42%;
 }
  
  /* Medium devices (tablets, less than 992px) */
  @media (max-width: 991.98px) {
    .news-horizontal-sizing {
      max-width: 45%;
      flex: 0 0 45%;
    }
    
    .arrow {
      display: none;
    }
  }
  
  /* Extra small devices (portrait phones, less than 576px) */
  @media (max-width: 575.98px) {
    .news-horizontal-sizing {
      max-width: 95%;
      flex: 0 0 95%;
    }
  }      
