/* Layout start */
.button-layout {
    border: 2px solid white;
    cursor: pointer;
    height: 80%; /* Adjust the height */
    margin: 0 3px; /* Margin between buttons */
    display: flex; /* Center content inside the button */
    align-items: center;
    justify-content: center;
}

.button-layout i {
    font-size: 1em;
}

.layout-label-button {
    padding-right: 10px;
    height: 99%;
    font-weight: 400;
    /* font-size: 18px; */
    border: none;
}

.layout-icon-button {
    font-size: 0.9em;
    text-align: center;
    border: none;
    border: 1px solid white;
}

.layout-icon-button-prime {
  background-color: var(--steel_blue);
}

/* Layout end */


/* Filter settings */
.dci-button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  margin-top:20px;
}

.dci-menu-category {
  position: relative;
  display: inline-block;
  display: flex;
  justify-content: center;
}

.dci-filter-button {
border: none;
padding: 0px; /* Updated padding to include space */
display: flex; /* Use flexbox for spacing */
align-items: center;
text-align: center;
vertical-align: middle;
justify-content: center; /* Distribute items evenly */
font-size:18px; /* 1.05em; */
font-family: var(--font_Noto);
width:180px;
height:30px;
line-height: 1.2; /* Adjust this value to center the text vertically */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
transition: font-size 0.5s;
}

.dci-dropdown-button { /* empty class to be used in clearFilterSelections() js */
  background-color: white; /*  var(--steel_blue); light grey #f1f1f1; */
  color: var(--grey_medium_1); /* white;  */
}

.dci-static-button {
  background-color:var(--light_grey_2);
  color:var(--steel_blue);
}

.dci-sort-button {
  width:180px;
}


.dci-dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  background-color: var(--light); /* light grey #f1f1f1; */
  width: 158px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
  font-size:1.05em;
  font-family: var(--font_Noto);
  color:red;
  padding-bottom:7px;
  padding-top:7px;

}

.dci-scroll {
  width:300px;
  height: 150px; /* this value defines how many items are shown in dropdown menu */
  overflow-y: auto;
}

.dci-dropdown-options.show {
    display: block;
}

.dci-dropdown-options label {
    display: block;
    padding: 8px 24px;
    cursor: pointer;
    margin-bottom: -7px; /* Adjust this value to reduce the vertical distance */
}


.dci-dropdown-options label:hover {
    background-color: #f1f1f1;
}


.dci-dropdown-options input[type="radio"],
.dci-dropdown-options input[type="checkbox"] {
    margin-right: 10px;
}

.dci-applied-filters-button {
    color: var(--steel_blue);
    background-color: yellow;
}
.dci-applied-filters {
  color: var(--steel_blue);
  font-weight: bold;
  font-size: 18px;
}


.dci-applied-filter-group {
    color: var(--steel_blue);
    font-weight: bold;
    font-size: 18px;
    padding-left:5px;
  }

.dci-applied-filter-bullet {
  color: black;
  padding-left:10px;

}



.close-button {
       display: block;
       width: 100%;
       padding: 8px 12px;
       background-color: #f1f1f1;
       border: none;
       border-top: 1px solid #ccc;
       cursor: pointer;
       text-align: center;
       font-size: 14px;
   }

   .close-button:hover {
       background-color: #ddd;
 }

/*

.dci-menu-category:hover .dci-dropdown-options {
  display: block;
}

*/

.arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: solid var(--grey_medium_1);
    border-width: 2px 2px 0 0;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
    margin-left:10px;
}

.arrow.open {
    transform: rotate(-45deg);
}



/* OLD */


    @media screen and (max-width: 1000px) {
      .dci-button-container {
        flex-direction: column;
        align-items: center;
        font-size: 16px;
      }
    }


    @media screen and (max-width: 400px) {
      .dci-button-container {
        font-size: 14px;
      }
    }