input,
select,
textarea{ border: none; border-radius: 10px; font-family: var(--inter); color: var(--white); padding: 12px 15px; outline: none; background: rgba(0,0,0,.5); box-shadow: 0 4px 30px rgba(0,0,0,.1); backdrop-filter: blur(10px); font-size: 15px; } 

input:focus,
select:focus,
textarea:focus{ outline: none; }

/* Placeholders */
input::placeholder,
textarea::placeholder{ color: var(--grey-999); }

/* Input Date */
input[type="date"]{ color: var(--white); }
input[type="date"]::placeholder{ color: var(--grey-999); }
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-text{ color: var(--grey-999); }
input[type="date"]:not(:placeholder-shown){ color: var(--white); }
input[type="date"]::-webkit-calendar-picker-indicator{ filter: invert(.95) brightness(.7); opacity: .7; }
input[type="date"]:disabled{ color: var(--grey-666); }

/* Select */
.select-wrapper{ position: relative; display: flex; align-items: center; }
.select-wrapper label{ margin-right: 15px; }
.select-wrapper .selector{ position: relative; width: 100%; }
.select-wrapper .selector i{ position: absolute; top: 50%; transform: translateY(-50%); right: 10px; z-index: 10; }
.select-wrapper .selector select{ -moz-appearance: none; -webkit-appearance: none; appearance: none; cursor: pointer; }

/* Switch */
.switch{ position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input{ opacity: 0; width: 0; height: 0; }
.switch .slider{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 26px; }
.switch .slider:hover{ background-color: var(--white); }
.switch .slider:before{ position: absolute; content: ""; height: 18px; width: 18px; border-radius: 50%; left: 2px; top: 1px; background-color: black; transition: 0.4s; }
.switch input:checked + .slider{ background-color: var(--yellow); }
.switch input:checked + .slider:before{ transform: translateX(calc(40px - 18px - 4px)); } 

/* Power Filter */
.power-filter{ position: relative; display: inline-flex; height: 45px; width: 100%; }
.power-filter input[type="text"]{ position: relative; z-index: 10; width: 100%; }
.power-filter .filter-list{ position: absolute; max-height: 0; top: 48px; width: 100%; opacity: 0; visibility: hidden; background: var(--black); box-shadow: 0 4px 30px rgba(0,0,0,.1); backdrop-filter: blur(10px); border-radius: 10px; overflow-y: auto; }
.power-filter .filter-list ul{ padding: 3px; }
.power-filter .filter-list ul li{}
.power-filter .filter-list ul li a{ padding: 10px 15px; display: block; color: var(--white-ddd); transition: var(--transition); border-radius: 5px; font-size: 14px; line-height: 1.4; }
.power-filter .filter-list ul li.highlighted a{ background: var(--grey-111); color: var(--white); }
.power-filter .filter-list ul li.no-results-found{ padding: 12px 15px; color: var(--white-aaa); font-size: 14px; }

.power-filter.open{ z-index: 1000; }
.power-filter.open .filter-list{ max-height: 200px; opacity: 1; visibility: visible; box-shadow: 0 0 10px rgba(0,0,0,.5); border: 1px solid var(--grey-111); }

.power-filter{ scrollbar-width: thin; scrollbar-color: var(--grey-222) transparent; }
.power-filter::-webkit-scrollbar{ width: 8px; background: transparent; }
.power-filter::-webkit-scrollbar-thumb{ background: var(--grey-222); border-radius: 8px; }

/*Checkbox*/
.checkbox{ width: auto; position: relative; cursor: pointer; display: flex; align-items: center; }
.checkbox input[type="checkbox"] { opacity: 0; position: absolute; left: 0; top: 7px; margin: 0; z-index: 1; cursor: pointer; width: 18px; height: 18px; }
.checkbox .checkbox-check{ position: relative; top: -1px; background: rgba(0,0,0,.6); border: none; border-radius: 3px; display: inline-block; vertical-align: bottom; margin-right: 5px; width: 18px; height: 18px; }
.checkbox input[type="checkbox"]:checked + span:after{ content:'\ea5e'; font-family: var(--icons); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; width: 18px; height: 18px; color: var(--yellow); }
.checkbox .checkbox-label{ display: inline-block; padding-left: 5px; }

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

  input,
  select,
  textarea{ font-size: 14px; }

}

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


}

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


}