.grid-overflow {
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  display: flex;
  gap: 5px;
  scroll-behavior: smooth;
  padding: 0px;
  scrollbar-width: none; /* Firefox hide scrollbar */
  -ms-overflow-style: none; /* IE/Edge hide scrollbar */
}

.grid-overflow::-webkit-scrollbar {
  display: none; /* Chrome/Safari hide scrollbar */
}

/* Wrap both the arrows and scroll container inside a parent */
.scroll-wrapper {
  position: relative;
}

/* Arrows */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* Show arrows when hovering over the wrapper */
.scroll-wrapper:hover .scroll-arrow {
  opacity: 1;
}

.scroll-arrow.left {
  left: 5px;
}

.scroll-arrow.right {
  right: 5px;
}

.grid-overflow .ui-items {
  display: inline-block;
  min-width: 80px;
 
  text-align: center;
  padding: 1px 2px;
  white-space: normal;
  cursor: pointer;
  transition: 0.3s;
}

 .container_roots {
   min-height: calc(100vh - 0px);
   animation: fadeIn 0.10s ease-in-out;
     margin: 0px 0px 0px 0px;
     
 }
  .container_size {
   max-width: var(--maxwidth);
   margin: auto;
   padding: 0px 0px;

   display: flow-root;
   clear: both;
   min-height: 20px; 
 }
   .container_size_mobile {
   max-width: 600px;
   margin: auto;
   padding: 0px 0px;

   display: flow-root;
   clear: both;
   min-height: 20px; 
 }
.ui-grid-50 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, auto)); /* min 50px, max auto */
  gap: 5px;
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  justify-content: center;
  margin: auto;
}
  .ui-grid-150 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 5px 5px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
  .ui-grid-ads {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   gap: 5px 5px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
   .ui-items-ads {
 
   min-height: 20px;
   box-sizing: border-box;
   position: relative;
   padding: 2px 2px;
   font-size: var(--font-md);
   transition: box-shadow 0.5s ease-in-out;
   animation: fadeIn 0.50s ease-in-out;
   display: flow-root;

 }
   .ui-grid-button {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 5px 5px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
  .ui-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 20px 20px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
   .ui-grid-mobile-1item {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 20px 20px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
   }
   .ui-grid-400 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   gap: 20px 20px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
   .ui-grid-2item{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px 20px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
 .ui-grid-fill {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
 gap: 20px 20px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
 }
   .ui-grid-100 {
   display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, auto)); /* min 50px, max auto */
  gap: 5px;
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  justify-content: center;
  margin: auto;
 }
  .ui-items {
 
   min-height: 20px;
   box-sizing: border-box;
   position: relative;
   padding: 1px 5px;
   font-size: var(--font-md);
   transition: box-shadow 0.5s ease-in-out;
   animation: fadeIn 0.50s ease-in-out;
   display: flow-root;

 }
 
 .items-back {
   background-color: var(--layout-background-color);

 }
 .items-back-fill {
   background-color: var(--secondary-light-color);

 }
 .fill {
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
   /* includes padding/border in width */
   display: block;  
 }
 .ui-items.active {
   border: solid 1px var(--green);
 }
 .post-container {
   max-width: 100%;
   display: flex;
   gap: 10px;
   box-sizing: border-box;
 }

 .post-container .post_div {
   box-sizing: border-box;
   width: 100%;
   display: block;
   gap: 2px;
   min-height: 20px;
 }
 
 .post-container .post_updates {
   min-width: 280px;
   max-width: 500px; 
   box-sizing: border-box;
   display: block; 
  
 }

    /* Scroll to top button */
 .scroll-to-top-btn {
   position: fixed;
   bottom: 70px;
   right: 20px;
   width: 40px;
   height: 40px;
   background-color: var(--layout_background);
   text-align: center;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   color: var(--icon-color);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: opacity 0.3s, transform 0.3s;
   z-index: 999;
 }

 /* text color */
 .border-color {
   color: var(--border-color) !important; 
 }
 .orange {
   color: var(--orange) !important; 
 }
 .orange-back {
   background-color: var(--orange) !important;
  color: #fff !important;
 }
 
 .green {
   color: var(--green) !important;
 
 }
 .green-back {
   background-color: var(--green) !important;
  color: #fff !important;
 }
  .yellow-back {
   background-color: var(--yellow) !important;
  color: #000 !important;
 }
 .blue-back {
   background-color: var(--blue-color) !important;
    color: #fff !important;
 }
  .blue-light-back {
   background-color: var(--blue-light-color) !important; 
 }
  .blue {
   color: var(--blue-color) !important;
   ;
 }
  .black {
   color: #000 !important;
   ;
 }
 .red {
   color: var(--red) !important;
   ;
 }

 .red-back-light {
   padding: 2px 10px;
   background-color: var(--red-light) !important;
   color: var(--red) !important;
 }

 .green-back-light {
   background-color: var(--green-light) !important;
 
   padding: 2px 10px;
 }

 .red-back {
   background-color: var(--red) !important;
   ;
 }

 .primary {
   color: var(--primary) !important;
   ;
 }
  .primary-back { 
 background-color: var(--primary) !important;
    color: var(--white) !important;
   ;
 }
  .secondary {
   color: var(--secondary-color) !important;
 
 }
   .color_light {
   color: var(--light-text) !important;
 
 }
  .secondary-back { 
 background-color: var(--secondary-color) !important;
    color: var(--white) !important;
   ;
 }
@media only screen and (max-width: 768px) {
   .mobile_body {
     padding: 10px 10px 5px 10px;
   }
  .icon {
     width: 25px;
     height: 25px;
     font-size: 22px;
     color: var(--icon-color);
     margin: 2px;
   }
   .post-container {
     max-width: 100%;
     display: flow-root;
     gap: 2px;
     position: relative;
     box-sizing: border-box;
     overflow-y: auto;
   }

   .post-container .post_div {
     box-sizing: border-box;
     max-width: 100%;
     min-height: 20px;
    
     display: block;
     padding: 0px 0px;
   
     margin-bottom: 2px;
   }
   .post-container .post_updates {
      min-width: 10px; 
      max-width: 100%;
   box-sizing: border-box;
   display: block; 
   }
   
   .container_roots {
     min-height: calc(100vh - 0px);
     overflow-y: auto;
     margin: 0px 0px 0px 0px;
   }

   .container_size {
     max-width: 100%;
     margin: auto;
     padding:0px;
     display: flow-root;
     clear: both;
    margin:0px 5px auto;
   }
      .container_size_mobile {
   max-width: 100%;
   margin: auto;
   padding: 0px 0px;

   display: flow-root;
   clear: both;
   min-height: 20px; 
 }
 .ui-grid-2item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  
  gap: 20px;
  max-width: 100%;
  width: 100%;
  justify-content: center;
  margin: auto;
}
   .ui-grid-mobile-1item {
   display: grid;
  grid-template-columns: repeat(1, 1fr);  
   gap: 10px 0px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
   }
      .ui-grid-button {
   display: grid;
grid-template-columns: 1fr;
   gap: 5px 5px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
     .ui-grid-ads {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   gap: 5px 5px;
   max-width: 100%;
   width: 100%;
   justify-content: center;
   margin: auto;
 }
   .ui-items-ads {
 
   min-height: 20px;
   box-sizing: border-box;
   position: relative;
   padding: 2px 2px;
   font-size: var(--font-md);
   transition: box-shadow 0.5s ease-in-out;
   animation: fadeIn 0.50s ease-in-out;
   display: flow-root;

 }
   /* Scroll to top button */
   .scroll-to-top-btn {
     position: fixed;
     bottom: 70px;
     right: 0;
     left: 0;
     margin: auto;
     width: 30px;
     visibility: hidden;
     height: 30px;
     background-color: var(--layout_background);
     text-align: center;
     border: none;
     opacity: 0.6;
     border-radius: 50%;
     cursor: pointer;
     color: var(--icon-color);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     display: flex;
     justify-content: center;
     align-items: center;
     transition: opacity 0.3s, transform 0.3s;
     z-index: 999;
   }
  }