/* FILTER BOX */
.filter-box {
  display: flex;
  column-gap: 12px;
  min-height: auto;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
    margin-left: auto;
}

@media screen and (max-width: 900px) {
  .filter-box {
    margin-top: 20px;
    max-width: 95% !important;
    min-height: auto;
    }

  .filter-box > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .shiny-html-output > .shiny-input-container {
        width: 100% !important;
    max-width: 100% !important;
  }
}


/* DATEPICKER */
.sw-air-picker {
  text-align: center !important;
  color: var(--neutral-900) !important;
  background-color: white !important;
  outline: 1px solid var(--border-col-pri);
  margin-top: 1px;
  width: 100%;
  border-radius: .375rem;
  border: 0 !important;
  cursor: pointer;
  font-size: var(--font-size-filter) !important;
}
.sw-air-picker:focus,
.selectize-input:focus,
.selectize-input.focus,
.btn.dropdown-toggle:focus {
  background-color: var(--neutral-100) !important;
  outline: 1px solid var(--neutral-300) !important;
  box-shadow: none !important;
}

.sw-air-picker:hover,
.selectize-input:hover,
.btn.dropdown-toggle:hover{
  background-color: var(--neutral-100) !important;
  outline: 1px solid var(--neutral-300) !important;
}


.air-datepicker--pointer:after {
  left: 105px !important;
}

.air-datepicker-cell.-month-.-max-date-.-selected-,
.air-datepicker-cell.-month-.-selected-.-focus-,
.air-datepicker-cell.-month-.-selected-,
.air-datepicker-cell.-year-.-max-date-.-selected-,
.air-datepicker-cell.-year-.-selected-.-focus-,
.air-datepicker-cell.-year-.-selected-,
.air-datepicker-cell.-max-date-.-selected-,
.air-datepicker-cell.-selected-.-focus-,
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-year-.-selected-{
  background-color: var(--esrb-red-hl);
  color: white !important;
}

.air-datepicker-cell.-year-.-current-.-max-date- {
 color: inherit;
}

.air-datepicker-cell.-year-.-current-.-max-date-.-selected- {
  color: var(--neutral-50)
}

.dropdown-toggle::after {
  content: none !important;
}

/* PICKERINPUT */
.bootstrap-select {
  height: 32px !important;
  margin-top: 1px !important;
  outline: 1px solid var(--border-col-pri);
}

.filter-option-inner-inner {
  font-size: var(--font-size-filter) !important;
}


/* SELECTIZE INPUT */
.selectize-input {
    outline: 1px solid var(--border-col-pri) !important;
    border: 0 !important;
    margin-top: 1px;
    height: 32px !important;
    min-height: 32px !important;
    font-size: var(--font-size-filter) !important;

}

.selectize-control {
  margin-bottom: 0 !important;
}

.shiny-input-container {
  position: relative !important;
  max-width: 200px !important;
  margin-top: 15px !important;
}

label.control-label {
  position: absolute !important;
  top: -20px !important;
  font-size: var(--font-size-sm) !important;
  left: 7px !important;
  z-index: 10;
  font-weight: 600;
  color: var(--neutral-900);
}


.form-control:focus {
  outline: 1px solid var(--border-col-pri) !important;
}


/* Select shinywidgets */
.bootstrap-select > .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "" !important;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}


.bootstrap-select>.dropdown-toggle {
    position: static !important;
    width: 100%;
    text-align: right;
    white-space: nowrap;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select.dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
  outline: 0 !important;
}

.btn,
.btn:hover {
  transform: scale(1);
    outline: 0 !important;
    color: inherit !important;
    background-color: transparent !important;
    border: 0 !important;
}

.form-group {
  margin-bottom: 0 !important;
}

.btn-check:checked+.btn,
:not(.btn-check)+.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show,
.btn.in {
    color: inherit !important;
    background-color: transparent !important;
     border: 0 !important;
}

.dropdown-item, .dropdown-menu>li>a {
 font-size: 13px;
}


.dropdown-item.active,
.dropdown-menu>li>a.active,
.dropdown-item:active,
.dropdown-menu>li>a:active {
    color: var(--neutral-50) !important;
    text-decoration: none !important;
    background-color: var(--esrb-red-hl) !important;
}

.dropdown-item, .dropdown-menu>li>a {
 font-size: 13px;
}




/* RADIOGROUP */
label.btn {
  font-size: var(--font-size-filter) !important;
}

.btn-group-container-sw {
 outline: 1px solid var(--border-col-pri);
 border: 0;
}
.btn-group {
margin-top: 1px;
    height: 32.5px;
}


.btn-check:checked+.radiobtn , :not(.btn-check)+.radiobtn :active, .radiobtn :first-child:active, .radiobtn .active, .radiobtn .show, .radiobtn .in {
    color: white !important;
    background-color: var(--esrb-red-hl) !important;
    border: 0 !important;
}

.shiny-input-radiogroup br {
  display: none;
}

/* change slider-bars */

div:has(> [id$="DATE-label"]) {
  width: 400px !important;
  max-width: 400px !important;
}

div > span.irs {
  margin-left: 20px;
  margin-right: 15px;

}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
    color: #fff;
    text-shadow: none;
    padding: 1px 3px;
    background-color: var(--esrb-red-hl) !important;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.333;
}

.irs--shiny .irs-bar {
    top: 25px;
    height: 8px;
    border-top: 1px solid  var(--esrb-red-hl) !important;
    border-bottom: 1px solid  var(--esrb-red-hl) !important;
    background:  var(--esrb-red-hl) !important;
}

.irs--shiny .irs-bar--single {
  border-top: 1px solid  #cccccc !important;
    border-bottom: 1px solid  #cccccc !important;
    background:  white !important;
}

.irs--shiny .single {
  background-color: #8c4258 !important;
}

/* CUSTOM */
@media screen and (max-width: 1300px) {
  #filter-tab_2 > .shiny-input-container:nth-of-type(1),
  #filter-tab_2 > .shiny-input-container:nth-of-type(2),
  #filter-tab_2 > .shiny-input-container:nth-of-type(3){
    max-width: 130px !important;
  }
}