input[type=search] {
    -webkit-appearance: textfield;
}

form.filter {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     background-color: #e5e5e5;
     border-radius: 30px;
     box-sizing: border-box;
     padding: 6px;
}

 form.filter input[type="text"], form.filter input[type="search"]{
   width: 100% !important;
   height: 35px !important;
   box-sizing: border-box;
   border: 1px solid #d8d8d8;
   background-color: #FFF;
   border-radius: 30px;
   font-size: 1.2em !important;
 }

 form.filter input[type="text"].date-input, form.filter input[type="search"].date-input{
   color: #494949 !important;
   background-image: url('../images/form/date.png');
   background-repeat: no-repeat;
   background-position: calc(100% - 10px) center;
   background-size: 20px;
 }

 form.filter input[type="text"].date-input:hover, form.filter input[type="text"].date-input:focus, form.filter input[type="search"].date-input:hover, form.filter input[type="search"].date-input:focus{
   background-image: url('../images/form/date-over.png');
 }

  form.filter input[type="text"].date-input::placeholder, form.filter input[type="search"].date-input::placeholder {
   color: #494949 !important;
   opacity: 1 !important;
 }
  form.filter input[type="text"].date-input::-moz-placeholder, form.filter input[type="search"].date-input::-moz-placeholder {
    color: #494949 !important;
    opacity: 1 !important;
  }
 form.filter input[type="text"].date-input::-webkit-input-placeholder, form.filter input[type="search"].date-input::-webkit-input-placeholder {
   color: #494949 !important;
   opacity: 1 !important;
 }
form.filter input[type="text"].date-input:-moz-placeholder, form.filter input[type="search"].date-input:-moz-placeholder {
  color: #494949 !important;
  opacity: 1 !important;
}


 form.filter > div {
     position: relative;
     max-width: 287px;
     width: 24%;
     height: 35px;
     /*overflow: hidden;*/
     transition: all 0.3s;
}
 form.filter div.placeholder {
     position: absolute;
     color: #494949;
     font-family: "Citi-Sans";
     font-size: 1.2em;
     pointer-events: none;
     top: 8px;
     left: 15px;
     z-index: 100;
}
 form.filter > div div.select {
     max-width: 287px;
     width: 100%;
     height: 35px;
     box-sizing: border-box;
     border-right: 1px solid #d8d8d8;
     color: #494949;
     background-color: #fff;
     border-radius: 30px;
     /*overflow: hidden;*/
}
 form.filter > div div.select select {
     background-image: url("../images/form-arrow-down.png");
     background-size: 15px;
     font-size: 1.2em !important;
     background-repeat: no-repeat;
     background-position: calc(100% - 10px);
     width: 101%;
     height: 35px !important;
     border-radius: 30px;
     background-color: #fff;
     -webkit-appearance: none;
     -moz-appearance: none;
     text-indent: 1px;
     text-overflow: '';
}
 form.filter > div div.select select::-ms-expand {
     display: none;
}
 form.filter > div div.select select:focus {
     background-image: url("../images/form-arrow-down-over.png");
}


.combobox-dropdown.location{
  background-image: url("../images/form/location.png");
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  top: 8px;
}

.combobox-dropdown.location:hover, .combobox-dropdown.location:focus{
  background-image: url("../images/form/location-over.png");
}

.combobox-dropdown.artistsearch{
  background-image: url("../images/form/search.png");
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
  top: 8px;
}

.combobox-dropdown.artistsearch:hover, .combobox-dropdown.artistsearch:focus{
  background-image: url("../images/form/search-over.png");
}


form.filter > div button.artistsearch{
  background-image: url("../images/form/search.png");
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  background-size: contain;
  background-color: transparent;
}

form.filter > div button.artistsearch:hover, form.filter > div button.artistsearch:focus{
  background-image: url("../images/form/search-over.png");
}

form.filter > div button.locationsearch{
  background-image: url("../images/form/location.png");
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  background-size: contain;
  background-color: transparent;
}

form.filter > div button.locationsearch:hover, form.filter > div button.locationsearch:focus{
  background-image: url("../images/form/location-over.png");
}

 form.filter > div div.application {
     width: calc(200%);
     max-width: 570px;
     display: flex;
     position: relative;
     justify-content: space-between;
     flex-wrap: wrap;
     margin-top: 10px;
     background: #FFF;
     box-sizing: border-box;
     border-radius: 10px;
     padding: 20px 10px;
     box-shadow: 0 0 10px 1px rgba(0,0,0,0.42);
    -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.42);
    -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.42);
    z-index: 300;
}

 form.filter > div div.application.application_closed{
   display: none;
 }

 form.filter > div div.application > div.date_content {
     width: 100%;
     display: flex;
     flex-flow: column;
     justify-content: space-between;
}

 form.filter > div div.application > div.date_content div.dates-texts{
   width: 100%;
   display: flex;
   justify-content: space-between;
 }

 form.filter > div div.application > div.date_content div.dates-texts > div{
   width: 49%;
   display: flex;
   flex-flow: column;
   display: none;
 }

 form.filter > div div.application > div.date_content input {
     width: 100% !important;
     height: 24px !important;
     font-size: 1em !important;
     margin-bottom: 10px;
}

 form.filter > div div.application > div.date_content input::placeholder{
   opacity: 1 !important;
   color: #494949 !important;
 }

 form.filter > div div.application > div.date_content label {
     width: 100%;
     display: block;
     font-family: "Citi-Sans";
     box-sizing: border-box;
     padding-left: 5px;
}
 form.filter > div div.application > div.date_content button {
     background-image: none;
     background-color: #004684;
     box-sizing: border-box;
     font-family: "Citi-Sans";
     width: 60px;
     height: 45px;
     color: #FFF;
     margin: 0;
     position: relative;
     text-align: center;
     font-size: 1em;
     cursor: pointer;
}

.ui-widget.ui-widget-content{
  width: 100% !important;
}

a.ui-state-default.selected{
  border: 1px solid #0F1632;
  background: #0F1632;
  color: #FFF;
}

a.ui-state-default.ranged{
  background: #d8eaff;
}
a.ui-state-default.ranged:hover{
  background: #45546E;
  color: #fff;
}

a.ui-datepicker-prev:focus, a.ui-datepicker-next:focus{
  border: 1px solid #00b2f0 !important;
}

 form.filter > div div.application > div.date-buttons{
   width: 100%;
   display: flex;
   margin-top: 10px;
 }

 form.filter > div div.application > div.date-buttons button{
   position: inherit;
   color: #003867;
   font-size: 1em;
   text-transform: uppercase;
   width: auto;
   height: auto;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 7px 20px;
   border: 1px solid #003867;
   border-radius: 30px;
   margin: 0;
   background-image: none;
   background: transparent;
 }

 form.filter > div div.application > div.date-buttons button:focus{
   border: 1px solid #00b2f0;
 }

 form.filter > div div.application > div.date-buttons button.btn_date_reset{
   margin-right: auto;
   border: 0;
 }

 form.filter > div div.application > div.date-buttons button.btn_date_apply{
   margin-left: 15px;
   color: #FFF;
   background-color: #003867;
 }

 @media screen and (max-width: 1100px) {
     form.filter > div div.application {
         width: calc(200% + 10px);
    }
}
 form.filter > div button {
     position: absolute;
     right: 0;
     left: 0;
     top: 0;
     bottom: 0;
     margin: auto;
     margin-right: 10px;
     width: 18px;
     height: 11px;
     background-image: url("../images/form-arrow-down.png");
     background-size: 100% 100%;
     border: none;
     box-sizing: border-box;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
}
 form.filter > div button:hover {
     background-image: url("../images/form-arrow-down-over.png");
}
 form.filter > div button:focus {
     background-image: url("../images/form-arrow-down-over.png");
     /*background-size: calc(100% + 4px) calc(100% + 4px);
     width: 22px;
     height: 15px;*/
}
 form.filter > div button.up {
     background-image: url("../images/form-arrow-up.png");
}
 form.filter > div button.up:hover {
     background-image: url("../images/form-arrow-up-over.png");
}
 form.filter > div button.up:focus {
     background-image: url("../images/form-arrow-up-over.png");
}
 form.filter > div input[type='submit'] {
     max-width: 287px;
     width: 100%;
     height: 35px;
     background-color: #0F1632;
     color: #FFF;
     font-family: "Citi-Sans";
     font-weight: 400;
     font-size: 1.2em;
     border-radius: 30px;
     border: none;
     box-sizing: border-box;
     -webkit-appearance: none;
     -moz-appearance: none;
     cursor: pointer;
}
 form.filter > div input[type='submit']:hover {
     background-color: #FFF;
     color: #0F1632;
     border: 1px solid #0F1632;
}
 form.filter > div input[type='submit']:focus {
     background-color: #FFF;
     color: #004684;
     border: 1px solid #0F1632;
}
 form.filter > div.event_date {
     overflow: inherit;
}
 form.filter > div.submit {
     min-width: 287px;
}


form.filter a.delete_content {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 20px;
  background-color: #fff;
  font-size: 1.2em;
  text-decoration: none;
  display: none;
  z-index: 50;
  color: #494949;
}

form.filter a.delete_content:hover, form.filter a.delete_content:focus {
  color: #0F1632;
}


@media screen and (max-width:1050px) {
  form.filter > div{
    width: 50%;
    max-width: none;
  }

  form.filter > div div.select{
    max-width: none;
  }

  form.filter > div div.select select{
    width: 100% !important;
  }

  form.filter > div input[type="submit"]{
    max-width: none;
  }

  form.filter > div.submit{
    margin-top: 1px;
  }
}

@media screen and (max-width:700px) {
  form.filter > div.artist_search {
    width: 100%;
    margin-top: 10px;
  }

  form.filter > div.submit{
    width: 100%;
    margin-top: 10px;
    opacity: 1;
  }

  form.filter > div input[type="submit"]{
    border: 1px solid #FFF;
  }

  form.filter{
    background: transparent;
  }

  div.location_search input{
    border-top-right-radius:  0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    background-image: linear-gradient(to right, #494949, #494949);
    background-repeat: no-repeat;
    background-size: 1px 25px;
    background-position: right;

  }

  div.event_date input.date-input{
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  div.event-type{
    width: 100% !important;
  }

}

@media screen and (max-width:500px) {
  form.filter input[type="text"].date-input, form.filter input[type="search"].date-input{
    background-image: none;
  }

  form.filter input[type="text"].date-input:hover, form.filter input[type="search"].date-input:hover{
    background-image: none;
  }

  form.filter > div button.locationsearch{
    display: none;
  }
}