* { box-sizing: border-box; }
hr { 
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
  color: #eeeeee;
}

/*--------------- input elemnte grid -----------*/

.ll_grid-container {
    display: grid;
    grid-template-columns: 150px 1fr 150px 1fr;
    grid-template-rows: min-content;
    grid-template-areas: "lable1 input1 input1 input1" "lable2 input2 lable3 input3" "lable4 input4 input4 input4" "lable5 input5 input5 input5";
    align-items:center;
    justify-items: center;
}


.ll_lable1 { grid-area: lable1; width: 100%; }

.ll_input1 { grid-area: input1; width: 100%;}

.ll_lable2 { grid-area: lable2; width: 100%;}

.ll_input2 { grid-area: input2; width: 100% }

.ll_lable3 { grid-area: lable3; width: 100%;}

.ll_lable4 { grid-area: lable4; width: 100%;}

.ll_input3 { grid-area: input3; width: 100%}

.ll_input4 { grid-area: input4; width: 100%}

.ll_lable5 { grid-area: lable5; width: 100%;}

.ll_input5 { grid-area: input5; width: 100%}


/*--------------- input -----------*/
.ll-echo-db-lable {
    text-align: left;
    padding-right: 10px;
    color: #9c8043;
    text-transform: uppercase;
    font-size: 18px;
}

.ll-lable-right{
    text-align: right;
    padding-right: 20px;
}


.ll-echo-db-input  {
    color: #646464 !important;
    background-color: #fff !important;
    padding: 0px 10px 0px 10px !important;
    font-size: 18px;
    width: 100%;
    height:46px;
    margin-top: 11px  !important;
    margin-bottom: 11px !important;
    border-radius: 0px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #C8C8C8 !important;
    cursor: pointer;
    outline:0;
}

.ll-echo-db-input::-ms-expand {
  display: none;
}

.ll-echo-db-input:focus::-ms-value {
  background-color: transparent;
}
.ll-echo-db-input option {
  margin: 10px;
  font-size: 18px !important;
   outline:0;
}
.ll-echo-db-input select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
.ll-echo-db-input option:not(:checked) {
  color: black; /* prevent <option>s from becoming transparent as well */
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

*:focus{outline:none !important;}


@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

.ll-dropdown {
  /* ... */
  position: relative;
}
.ll-dropdown::before {
  font-family: fontello;
  content: "\e800";
  font-size: 40px;
  position: absolute;
  right: 5px;
  top: 23px;
  color: #969696;
   pointer-events: none;
}

.ll-dropdown:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}


.ll-echo-db-input:select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline:0;
}
.ll-echo-db-input:focus {
    outline:0;
}
.ll-echo-btn:hover {
    background-color: #1874ce;
}

/*--------------- button -----------*/
#ll-reset{
    float: left;
}
#ll-submit{
    float: right;
}

.ll-echo-btn {
    color: #646464 ;
    background-color: #fff;
    padding: 0px 40px 0px 40px;
    font-size: 18px;
    text-transform: uppercase;
    height:46px;
    margin-top: 8px ;
    margin-bottom: 8px;
    border-radius: 0px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline:0;
}

.btn-grey {
    border: 2px solid #C8C8C8;
    background-color: #fff;
}
.btn-grey:hover {
    background-color: #f7f7f7;
}

.btn-grey:active {
    background-color: #efefef;
}
.btn-gold {
    color: #977A3C;
    border: 2px solid #977A3C;
    background-color: #fff;
}

.btn-gold:hover {
    background-color: #faf8f2;
}
.btn-gold:active {
    background-color: #f6f3e9;
}

/*--------------- results header -----------*/

#ll-echo-result-box{
    margin-top: 100px;
    clear: both;
}
#ll-echo-result-title{
    text-align: center;
    font-size: 48;
    color: #977A3C;
    line-height: 52px;
}
#ll-echo-result-sub{
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    color: #646464;
    margin-top: 30px;
    font-family: 'WorkSans-Regular',Helvetica,Arial,Lucida,sans-serif;
    letter-spacing: 2px;
}

/*--------------- results -----------*/

/*

    <div id="ll-echo-result-box">
      <h1 id="ll-echo-result-title">Suche nach<br>"ECHO-Pop, 2017"</h1>
      <h2 id="ll-echo-result-sub">Suchergebnisse:</h2>
      <hr><hr/>
      <div id="ll-echo-result"></div>
    </div>
*/

#ll-echo-result{
}

.ll-echo-result-block{
    display: flex;
    flex-flow: row wrap;
}

.ll-echo-result-item{
    box-sizing: border-box;
    padding-right: 40px;
    width:33.3%;
}

.ll-echo-res-ver{
    font-size: 18px;
    color:#646464;
    text-transform: uppercase;
    margin-top: 35px;
    padding-bottom: 0px;
}
.ll-echo-res-status{
    font-size: 18px;
    text-transform: uppercase;
    padding-bottom: 0px;
    margin-top:-5px;
    padding-top:0;
}
.ll-echo-nom{
    color:#646464;
}

.ll-echo-win{
    color:#977A3C;
}
.ll-echo-res-cat{ 
    font-size: 24px;
    color:#977A3C;
    padding-top:20px;
    line-height: 30px;
}
.ll-echo-res-kand{
    font-size: 24px;
    line-height: 30px;
    color:#141414;
    padding-bottom: 10px;
    padding-top:0;
}
.ll-echo-res-werk{
    font-size: 24px;
    line-height: 30px;
    color:#646464;
    margin-bottom: 35px;
    padding-bottom: 0px;
    padding-top:0;
}
.ll-echo-res-return{ 
    font-family: 'WorkSans-Regular',Helvetica,Arial,Lucida,sans-serif;
    font-size: 18px;
    color:#646464;
    line-height: 24px;
    margin-bottom: 35px;
    padding-bottom: 0px;
    padding-top:0;
}


/*--------------- jquery autocomplete -----------*/
  .ui-autocomplete {
    max-height: 200px;
    overflow-y: hidden;
    /* prevent horizontal scrollbar */
    overflow-x: auto;
  }
  .ui-autocomplete { position: absolute; }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 200px;
  }

  .ui-menu-item-wrapper{
        /*width: 100px;*/
        margin :0 !important;
        background-color: white;
        padding: 5px 10px !important;
        border-bottom: 1px solid #EBEBEB;
        border-left: 1px solid #EBEBEB;
        border-right: 1px solid #EBEBEB;
  }

  .ui-state-active{
        color: #3E3E3E;
        background-color: #efefef;
        margin :0 !important;
        padding: 5px 10px !important;
  }

/*--------------- autocomplete -----------*/
.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    z-index: 9999999;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

/* ------------------------------------ MEDIA QUERY ----------------------------------------------*/
@media only screen and (max-width: 850px) {
.ll-echo-result-item{
    width:50%;

}
}
@media only screen and (max-width: 710px) {
    .ll-echo-result-item{
    width:100%;

}
    .ll_grid-container {
        grid-template-columns: 1fr;
        grid-template-areas: "lable1" "input1" "lable2" "input2" "lable3" "input3" "lable4" "input4" "lable5" "input5" ;
    }   
     #ll-submit{
        float: none;
        display: block;
        margin: auto;
         margin-top: 20px;
    }

    .ll-echo-db-button-box{
        text-align: center;
    }
    .ll-lable-right{
        text-align: left;
    }
    #ll-reset{
        float: none;
        display: block;
        margin: auto;
        margin-top: 20px;
    }
    #ll-echo-result-box{
    margin-top: 40px;
    clear: both;
}
}