/* favicon, BÖNGÉSZŐ ablak icon-ja*/

/**/
body{
  background-color: #F0EBE2;
  background-image: url(http://szabiapek.opt.hu/wp-content/uploads/2020/12/pattern-1.svg);
}   
ul {
  list-style:none;
}
/*NAVIGÁCIÓS FELÜLET LEGFELÜL, NETTÓ BRUTTÓ ÉRTÉK HÁTTÉR*/
.navbar-osszegek{
font-family: "Poppins", sans-serif;
font-weight: 600;
border: 1px solid wheat;
background-image: linear-gradient(to top, #706655, #5a5451);
border-radius: 0rem 0rem 0.7rem 0.7rem;
margin-bottom:0px;
margin-left: 10px;
/* padding-left: 10px; */
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
/**/

/* INFÓ PANEL TARTALMA */
/* INFÓ PANEL "KONTÉNERE/DOBOZA" EZ TARTALMAZZA A LENYÍLÓ GOMBOS VÁLASZTÓT, AZ INFÓT ÉS A RENDELÉS FELADÁS GOMBOT */

.div-rendf-cim{             
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  width:65%;
  /*
  border-bottom: 2px solid;
  */
  /*
  margin-top: 54px;
  */
  padding: 10px;
  padding-left:0px;
  padding-right:0px;
  padding-top: 0px;
  display: flex;
  justify-content: space-between; /* Space between the spans */
  /*
  box-shadow: 0px 0px 5px white;
  */
}
/**/

  /*VÁLASZTÓS GOMB */
  .dropbtn {
      position:relative;
      background-color: #AE883D;
      border-radius: 5px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      color: white;
      padding: 10px;
      font-size: 16px;
      overflow: hidden;
      border: none;
      cursor: pointer;
      width: 100%;
      height: 100%;
      /*
      text-shadow: 1px 1px #99d98c;
      */          
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      overflow: hidden; /* Hide overflowing content */
      text-overflow: ellipsis; /* Show ellipsis (...) for overflowed content */	
      display: inline-block; /* Maintain the same width regardless of content */
      box-shadow: 0px 5px 8px grey;  
      font-weight: 600;
  }
  /**/

  /*INFÓ TÁROLÓS "DOBOZOK" */
  .info-panel{
    display:flex;
    flex:2;
  }
  .span-rendf-cim{        
      display: flex;
      background-color: #DAC59E;
      color:black;
      opacity: 53%;
      padding:5px;
      border: 1px dashed #FFFF;
      border-radius: 5px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      flex: 1; /* Allow each span to grow and take an equal portion of space */
      text-align: center; /* Center the text horizontally */
      font-size:12px;      
      height:auto;
      /*
      height:60px;
      */
      justify-content: center;
      flex-direction: column;
      margin-left:5px;
      font-weight: 500;
  }
  /**/

  /* Rendelés leadás gomb FORM-ja*/
  .rendeles-feladas-form{
    display:flex; 
    width: auto;
    flex-direction: row;
  }
  /**/

  /*RENDELÉS LEADÁS GOMB  ALAP HELYZET*/    
  .btn-lezaras{
      background-color:#AE883D;
      border-radius: 5px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      height:auto;
      max-width:240px;
      display:block;
      /*
      border: outset #99d98c;
      */
      border:0px;
      box-shadow: 0px 5px 8px grey;
      font-size:15px;
      margin-left:5px;
      color:white;
      padding:10px;
      font-weight: 600;
  }
  /**/

  /* RENDELÉS LEADÁS GOMB HA RÁVISSZÜK AZ EGERET ERRE A SZÍNRE ÁLL*/
  .btn-lezaras:hover{
      background-color: #fd8900;
  }
  /**/

  /* RENDELÉS LEADÁS GOMB HA KIKAPCSOLJUK MERT MÁR STÁTUSZA 1*/
  .btn-lezaras-disabled{
      background-color: #DAC59E;
      color:#27AE60;
      box-shadow: 0px 0px 0px grey;
  }
  /**/

  /* RENDELÉS LEADÁS GOMB HA KIKAPCSOLJUK MERT MÁR STÁTUSZA 1 ÉS RÁVISZIK AZ EGERET*/
  .btn-lezaras-disabled:hover{
  background-color: lightgray;
  } 
  /**/
  
  /* SZERINTEM EZ NINCS HASZNÁLATBAN */
  .dropbtn:hover, .dropbtn:focus {
      background-color: #fd8900;
  }    
  /**/    
/**/

/*SZŰRŐ DOBOZ TARTALMA */

/* szűrő "konténer/doboz" az infó panel alatt van  */
.all-filter-div{
    border-radius: 5px;
  /*
  background-color: #cfe2ff;        
  box-shadow: 0px 0px 10px steelblue;
  */
  margin-bottom: 20px;
}
/**/

/* cikkszűrő tárolója*/
.cikkszuro-nevre-kodra-container{
  margin-right:auto; 
  width:40%; 
  margin-left:8px;
}    
/**/

/* cikk szűrés névre kódra */
.cikkszuro-nevre-kodra{
  color: #222222;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px 6px 6px 6px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: 0 7px 14px -3px rgba(0,0,0,0.175);
}    
/**/

/* cikk név szűrő és 3 gombos szűrő tárolója*/
.rend-filter-container{
  padding: 0px 0px 0px 0px; 
  width:65%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  
}
/**/

/* cikk név szűrő és 3 gombos szűrő tárolója */
.rend-filter{
  width: 100%;
  border-bottom: 0;
  margin-bottom: 0;
  list-stlye: none;
  padding-left:0;
  border-radius:5px;
  display:flex;        
}
/**/

/* 3 gombos szűrő egymás mellett TÁROLÓ*/
.checkboxok-filter-container{
  margin-left:8px;
  width:70%;
  text-align:-webkit-right;
  margin-right:8px; 
  padding-left:0px;
  margin-top: 5.4px;
}
/**/

/*3 gombos szűrő egymás melett (alap szín) */
.rend-filter-item{
  display:table-cell;
  /*
  width:100%;
  */
  margin-left: 10px;
  width:30%;
  /*
  border: outset;
  */
  /*
  box-shadow: 0px 4px 8px steelblue;
  */
  border-radius:5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  table-layout: fixed;
  height:auto;
  background: #AE883D;
  color: black;
  margin-bottom:8px;
  box-shadow: 0px -5px 15px grey; 
}
/**/

/* 3 gombos szúrő egymás melett (Aktívált szín) */    
.rend-filter-item.checked{        
  border-top: 3px solid wheat;
  border-left: 3px solid wheat;
  border-right: 3px solid wheat;    
  background-color: #DAC59E;
  /*
  background-color: #ffaf11;
  box-shadow: 0px -5px 15px orange;
  */
  /*
  border: ridge;
  */
  color: black;
}    
/**/

/* 3 gombos szúrő egymás melett szöveg? lehet ez nem használt */
.rend-filter-item-label{
  display: block;
  padding: 5px 0px;
  margin: 0px 5px 0px 5px;
  font-weight: bold;
  text-align: center;
  font-size: 0.7rem;
  color: white;
  text-shadow: 1px 1px 5px grey;  
}
/**/

/* Cikkcsoport szűrő lenyíló gomb alap helyzet */
.cikcsop-szuro-btn {
  border-radius:5px 5px;
  /*
  background-color:#99d98c;
  */
  border:0px;
  background-image: linear-gradient(to left, #AE883D, #DAC59E);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-weight: bold;
  margin-top:0px;
  color:white;
  /*
  box-shadow: 0px 4px 8px steelblue;
  */
  margin-bottom:8px;
  box-shadow: 0px 5px 8px grey;
}
/**/

/* Cikkcsoport szűrő lenyíló gomb ha rávisszük az egeret */
.cikcsop-szuro-btn:hover, cikcosp-suzor-bnt:focus{
  background:#fd8900;
}
/**/

/* cikkcsoport lenyíló része*/
.cikcsop-szuro-container{
  justify-content: flex-start;
  display: flex;
  border:2px solid #AE883D;
  border-top: 0px;
  border-radius: 5px 5px;
  width:65%;
  max-width:95%;
  margin-left: auto;
  margin-right: auto;
  /*
  display: flex;
  */
  flex-wrap: wrap;
  justify-content: space-between;
}
/**/

/* cikkcsoport gombok szöveg tartalma*/
.cikcsop-p {
  margin-bottom:auto;
  margin-top:auto;
  font-size: 0.6rem;
  font-weight: 500;
}
/**/

/* cikcsoport gombok*/
.filter-btn {
  background-color: #AE883D;
  box-shadow: 0px 5px 8px grey;
  min-height: 30px;
  display:flex;
  flex-direction: row;
}
.remove-filter-btn {
  display:none;
}

/**/

/*TÁBLA TARALOM*/

/* Tábla */
#myTable{
width:65%;
max-width:100%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 20px 25px grey;
}
/**/

/* Tábla sorok magassága*/
#myTable tbody tr{
height:45px !important;
}
/**/

/* Tábla fej és fejléc */
.table thead th{
  padding: 20px 10px;
  text-align: center;
}
/**/

/* tábla fejléc */
th{
      background-color: #5a5451;
      color: #DAC59E;
      font-size: 15px;
}
/**/

/* tábla cikkcsoportos, megkülönböztető csoport "fejlécei" */
.cikcsop-fejlec{
  
  background-color:#706655;
  
  /*
  background-image: linear-gradient(to top, #DAC59E, #AE883D);
  */
  color: #DAC59E; 
  font-style: italic;
}
/**/

/*tábla sorai (rekordok)*/
.table tbody tr {
  border-bottom: 1px solid #706655;    
  
  background-color: #ffffef;
  
  /*
  background-image: linear-gradient(to left, #ffff, #ceffe4);
  */
  font-weight: bold;
}  
/**/

.td-p-l{
  text-align:left; 
  padding-left: 20px;
}
.td-p-r{
  text-align:right; 
  padding-right:20px; 
}

/*tábla record oszlop tulajdonságai*/
td {
padding: 0;
margin: 0px;
text-align: center;
overflow: hidden;
font-size: 14px;
}
/**/

/**/








/* VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! VÉGE! */


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .container-cssz_szoveg{
    width:75%;
    max-width:95%;
    margin-left: auto;
    margin-right: auto;

  }

  .container-cssz{
    width:75%;
    max-width:95%;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

  }
  .mobil-navbar-ertekek{
    display:none!important; 
    flex-basis:auto; 
    align-items:center;
  }      

  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .card {
    /*
    flex-basis: calc(33.33% - 100px); /* Adjust the width as per your design */
    */
    width:12px;
    margin-bottom: 20px; /* Adjust the spacing between cards */
    max-height: 60px; /* Set a maximum height for the cards */
    /* aspect-ratio: 1; */ /* Set an aspect ratio for square cards */
    border:0px;
  }
  
  /* Media query for smaller screens */
  @media (max-width: 767px) {
    .card {
      flex-basis: calc(50% - 20px); /* Adjust the width for smaller screens */
    }
    .mobil-navbar-ertekek{
      display:flex!important;  
      flex-basis:auto;  
      align-items:center;
      -webkit-box-align: center;
      font-size: 2.5vw;
    }        
  }
  
  @media (max-width: 319px) {
    .mobil-navbar-ertekek{
      /*display:none!important; */
      flex-basis:auto; 
      align-items:center;
      -webkit-box-align: center;
      font-size: 2.5vw;
    }       
    .navbar-brand{
      font-size: 5vw;
      margin:0;
    } 
  }

  /* Media query for even smaller screens */
  @media (max-width: 480px) {
    /*Cards occupy full width on small screens */
    /*
    .card {
      flex-basis: 100%; /* 
    }
    */
  }

  .card-body {
    /* Adjust the width as per your design */
    /*
    flex-basis: calc(33.33% - 100px); 
    */
    display:inline-table;
    flex-basis: calc(20% - 100px); /* Adjust the width as per your design */
    margin-bottom: 0px; /* Adjust the spacing between cards */
    max-height: 20px; /* Set a maximum height for the cards */
    /* aspect-ratio: 1; */ /* Set an aspect ratio for square cards */
    padding: 1rem;
  }

  @media (max-width: 1024px) {
    #myTable{
      width:85%;
    }
    .div-rendf-cim{   
      width:85%;
    }
    .rend-filter-container{
      width:85%;
    }    
    .dropbtn{
      padding:0px;
      font-size:0.7rem;
    }
    .info-panel{
      display:grid;
      flex:none;
      width:200px;
    }
    .span-rendf-cim{
      font-size: 0.7rem;
      padding:0px;
    }
    .btn-lezaras {
      font-size: 0.7rem;
      padding:5px;
      margin-left:5px; 
    }
    .cikkszuro-nevre-kodra{
      font-size: 0.7rem;      
    }
    .table thead th {
      font-size: 0.7rem;
      padding: 10px 5px;
    }
    .cikcsop-fejlec{
      font-size: 0.7rem;
    }
    .cikcsop-szuro-btn{
      font-size: 0.7rem;
    }
    td {
      font-size: 0.7rem;
    }
  }

/*  
  @media (max-width: 1024px) {
    #myTable{
      width:70%;
    }
    .rend-filter-container{
      width:70%;
    }
    .nav-item{
      font-size:1.2vw;
    }
    .navbar{
      height:40px;
      margin-bottom: 0px;
    }
    icon-container{
      height:30px;
    }
    .dropbtn{
      padding:2px;
    }
    .span-rendf-cim{
      padding:2px;
      font-size:0.8rem;
    }
    .btn-lezaras{
      padding:2px;
    }
    .div-rendf-cim{
      padding:0px;
      margin-bottom:10px;
    }
    .navbar-osszegek{
      height:40px;
    }      
     
    table {
      border-collapse: collapse;
      border-spacing: 0px;
      border-radius: 8px 8px 0px 0px;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0,0,0,0.25);
      table-layout: auto;
    }
  
    .table thead th{
      
      padding: 10px 5px;
      
      text-align: center;
      font-size:10px;


      overflow:hidden;
      text-overflow:ellipsis;                
    }

    td {
      padding: 0;
      margin: 0px;
      text-align: center;
      overflow: hidden;      
      font-size: 10px;  
      overflow:hidden;
      text-overflow:ellipsis;      
    }

  }
*/
  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .mobil-navbar-osszegek{
      background-color: #27AE60;
      border-radius: 8px;
    }
    .card-body {
      display:contents;
      flex-basis: calc(50% - 20px); /* Adjust the width for smaller screens */
      padding:5px;
    }
    .div-rendf-cim{
        display:block;
        width:90%;
    }
    .info-panel{
      display:contents;
    }
    .dropbtn{
      height: 30px;
      box-shadow: 0px 0px 8px grey;
    }
    .rendeles-feladas-form{
      display:flex; 
      height: 30px;
      flex-direction: row-reverse;
    }
    .rend-filter-container{
        width:90%;
    }
    .rend-filter{
      display:list-item;      
    }
    .cikcsop-szuro-container{
      width:90%;
      display:none;
    }
    .cikkszuro-nevre-kodra-container{
      margin-right:auto; 
      width:90%; 
      margin-left:8px;
    }    
    .cikkszuro-nevre-kodra{
      width:100%;
      border-radius: 6px;
    }
    .checkboxok-filter-container{
      width:95%;
      text-align: -webkit-center;
      display:flex;
      /*
      margin
      */
    }
    .rend-filter-item{
      margin-bottom:0px;
      margin-top:20px;
      margin-left:0px;
      width: 100%;
    }
    #myTable {
        width: 90%;
    }
    .navbar{
      margin-bottom:40.3px;
    }
    td {
      padding: 0;
      margin: 0px;
      text-align: center;
      overflow: hidden;
      font-size: 0.7rem;
      }
    .td-p-l{
      width:100%;
      padding-left:5px;
    }
    .td-p-r{
      padding-right:5px;
    }
  }
  
  /* Media query for even smaller screens */
    /* Cards occupy full width on small screens */
  /*
  @media (max-width: 480px) {
    .card-body {
      display:inline-table;
      flex-basis: 100%; 
    }
  }  
  */

  .icon-container {
    width: 100%; /* Adjust container width as needed */
    text-align: center; /* Center the icon horizontally */
  }
  
  .icon {
    width: 2em; /* Initial size, adjust as needed */
    height: 2em; /* Maintain aspect ratio */
    fill: #333; /* Icon color */
  }
  
  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .icon {
      width: 2em;
      height: 2em;
    }
  }

  .cssMex{
    width:75px;
  }
  .td-netto-brutto-ar{
    color: #27AE60;
    width:120px;
  }
  .td-netto-brutto-ertek{
    color: #27AE60;
    width:120px;
  }

  
/*
  @media (max-width: 570px) {
    h1 {
      font-size: 3.5vw;
    }

    .lead{
      font-size: 2.5vw;
    }

    .container-cssz_szoveg{
      width:90%;
    }

    .container-cssz{
      width:90%;
    }

    .rend-filter{
      max-height: 30px;
      margin-top: 20px;
    }

    .rend-filter-item{
      max-height: 30px;
      height:auto;
      background: #0d6efd;
      color: white;
    }

    .rend-filter-item-label{
      padding: 10px 10px;
      font-size: 1.9vw;
      display:contents;
      max-height: 30px;
      margin: 0px 3px 0px 3px;
      font-weight: bold;
      text-align: center;          
    }

    li {
      max-height: 30px;
    
    }
    label{        
      margin-bottom:0;
    }

    .table{
      width:90%;
    }
    #myTable{
      width:90%;
      margin-bottom:0px;
    }

    .listing-sorting-li{
     font-size: 1.9vw;
    }
    .filter-span{
      font-size:1.9vw;
    }
    .cikkszuro-nevre-kodra{
      font-size:1.9vw;
    }
    .td-p-l{
      text-align:left; padding-left: 10px;
    }
    .td-p-r{
      text-align:right; padding-right: 10px; 
    }
    .cssMex{
      width:35px;
    }
    .td-netto-brutto-ar{
      width:55px;
      font-size:8px;
      color: #27AE60;
    }
    .td-netto-brutto-ertek{
      width:75px;
      font-size:8px;
      color: #27AE60;
    }        
    .div-rendf-cim{
      /*
      background-color: gray;
      */        
      border-bottom: 0px solid;
      border-radius: 5px;
      padding: 0px;
      /*          
      max-height:60px;
      */          
      display: flex;
      justify-content: space-between; /* Space between the spans */
    }
    .span-rendf-cim{
      background-color: aliceblue;
      display: flex;
      padding:10px;

      border: 1px solid grey;
      border-radius: 5px;
      
      flex: 1; /* Allow each span to grow and take an equal portion of space */
      text-align: center; /* Center the text horizontally */
      font-size:1.5vw;
      flex-direction: column;
    }
    /*
    .btn-lezaras{
      background-color:#0E6251;
      border-radius: 5px;
      height:auto;
      max-width:240px;
      font-size:16px;
      display:block;
      border: outset #0E6251;
      box-shadow: 1.5px 1.5px 0px;
      color:white;
    }
    */
    .btn-lezaras:hover{
      background-color: #fd8900;
    }        
    /*
    .dropbtn{
      font-size: 1.5vw;
    }
    .cikcsop-szuro-btn{
      font-size:1.9vw;
    }
    */
  
  }
*/  

  #scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 12px;
    border: none;
    outline: none;
    background-color: #6610f2;
    color: white;
    cursor: pointer;
    padding: 0px;
    border-radius: 100px;
  }
  
  #scrollToTopBtn:hover {
    background-color: darkcyan;
  }

  /* The container <div> - needed to position the dropdown content */
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #fcfcfd;
      max-height: 430px;
      overflow-y: auto;
      min-width: 230px;
      border: 10px solid #0065fd5b;
      z-index: 1;
      border-radius: 8px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }
    
    /* Links inside the dropdown */
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 16px;
      min-height: 70px;
      border: 1px solid #0065fd5b;
    }
    
    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {background-color: #7faff8}
    
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}  

    /* Add positioning styles to the dropdown button container */
    .clickable {
        position: relative;
    }    

    table {
      border-collapse: collapse;
      border-spacing: 0px;
      border-radius: 8px 8px 0px 0px;
      /*
      margin: 20px 20px;
      */
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0,0,0,0.25)
      table-layout:auto;
    }
    .table tbody tr.tr-expired{
      /*
      background-color: indianred;
      */
    }  
    .table tbody tr:nth-of-type(even) {
      /*
      background-color: #cfe2ff;
      */
    }
    .table tbody tr.active-row{
      font-weight: bold;
      color: #6610f2;
    }  
    .changedValue{
      color: #fd7e14;
      font-weight: bold;
    }
  
    .edit-input{
  
      border: 1px solid #6610f2;
      border-radius: 10px;
      text-align: center;
    }
  
    td >input[type='text']
  {
      padding:10px;
      margin:0;
      /*
      width: 100%; /*this will set the width of the textbox equal to its container td*/
      */
      height: 100%;
      max-height:90px;
      width:150px;    
  }
  td >input[type='number']
  {
      padding:10px;
      margin:0;
      /*
      width: 100%; /*this will set the width of the textbox equal to its container td*/
      */
      height: 100%;
      max-height:90px;
      width:150px;    
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
    .cent-div{
      text-align: center;
    }
  
  
    td div {
      border: 0;
      width: auto;
      height: auto;
      min-height: 12px;
      min-width: 12px;
    }

  
  
    thead{
      max-height: 80px;
    }
  
    .table td,.table th{
      vertical-align: middle;
    }
  
      .table tbody tr.filtered{
        background-color: #ffffef;
      }

  
  
      .listing-sorting-dropdown {
        /*
        position: relative;
        */
        z-index: 100;
        left: 0;
        top: 100%;
        width: 100%;
        margin-top: -1px;
        /*
        padding: 5px 10px;
        */
        font-size: 12px;
        color: #222222;
        background: #fff;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 6px 6px;
        visibility: hidden;
        opacity: 0;
        box-shadow: 0 7px 14px -3px rgba(0,0,0,0.175);
    }
    .listing-sorting-dropdown.show {
      visibility: visible;
      opacity: 100;
    }
  
    .listing-sorting-button{
      color: #222222;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 6px 6px 6px 6px; 
      box-shadow: 0 7px 14px -3px rgba(0,0,0,0.175);   
    }
  
    .listing-sorting-li{
      padding: 5px 10px;
    }
  
    .listing-sorting-li.active{
      background-color: #999bff;
    }
  
    .listing-sorting-dropdown ul {
      display: none;
    }
    
    .listing-sorting-dropdown ul.show {
      display: contents;
      list-style:none;
    }
  
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
  }    


  .edit-input{
    width:20px;
  }


  .active-filter{

    background-color: #fd8900!important; /* Replace with your desired color */
    color: #ff; /* Text color for better visibility */

  }