div.search-container {
  position:relative;
  width:80%;
  max-width:400px;
}
div.search-view {
  width:100%;
  height:34px;

  background-color: #FFF;

  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 22px 22px;
  background-image: url('../../assets/pics/search-24.svg');
  
  border:1px solid #EFEFEF;
  border-radius:20px;
  background-color: var(--search-background-color);
  /* box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2); */
}
div.search-view--hover {
  border:1px solid #FF9900;
/* box-shadow: 0 2px 8px 1px rgba(64,60,67,.24); */
}
div.search-view--active {
  border-top:1px solid #CCCCCC;
  border-left:1px solid #CCCCCC;
  border-right:1px solid #CCCCCC;
  border-bottom:none;
  border-radius:10px 10px 0px 0px;
  background-color: var(--search-background-color--active);
/* box-shadow: 0 2px 8px 1px rgba(64,60,67,.24), 0 2px 8px 1px rgba(64,60,67,.24), 0 2px 8px 1px rgba(64,60,67,.24); */
}


.input-search {
  /* width:90%;
  padding:4px 0px 4px 8px;

  background-color: transparent;
  border: none; */

  border: none;
  width:100%;
  height:100%;
  background-color: transparent;
  padding-left:32px !important;
  outline: none;

}

.search-box-results-layer {
  position:absolute !important; 

  border-radius: 0px 0px 10px 10px;
  background-color: #FFF;

  border-left:1px solid #CCCCCC;
  border-right:1px solid #CCCCCC;
  border-bottom:1px solid #CCCCCC;
  border-top:1px solid #EFEFEF;

  overflow-y:auto;
  /* box-shadow: 0px 2px 8px 1px rgba(64,60,67,.24);  */
  /* box-shadow: 0 2px 8px 1px rgba(64,60,67,.24);  */
/* box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; */


}
.search-results {
  z-index:10;
  position: absolute;
  top:35px;
  width:100%;
  height:auto;
  max-height:300px;
  overflow: auto;

  border-radius: 5px;
  background-color: #FFF;
  box-shadow: var(--box-shadow);

  list-style-type: none;
  padding: 0;
}

.search-result-item {
  border-bottom: 1px solid rgba(0,0,0,0.5);
  padding:6px 0px 6px 32px;
  background-color: #FFF;
  transition: background-color 0.4s;
  cursor: pointer;
}

.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background-color: #EFEFEF;
}

.search-icon--mobile {
  width: 32px;
  height: 32px;
  border-radius:50%;
  background-color: #FFF;  
  border:1px solid #CCC;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
  background-image: url('../../assets/pics/search-24.svg');

  cursor: pointer;

}

div.search-container--mobile {
  /* background-color: #CCC; */
  position: relative;
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
}
div.search-container--mobile .search-input {
  height:40px;

  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 20px 20px;
  background-image: url('../../assets/pics/search-24.svg');

  border-bottom:1px solid #CCC;
}
div.search-container--mobile .search-input form {
  width:100%;
  height:100%;
}
div.search-container--mobile .search-input form input[type=text]{
  background-color: transparent;
  width:90%;
  height:100%;
  padding-left:30px;
  border:none;
  outline:none;
}
.search-results {
  position:absolute;
}

@media screen and (max-width: 620px) {
  div.search-container {display:none}
  div.search-icon--mobile {display:block}
}


@media screen and (min-width: 620px) {
  div.search-container {display:block}
  div.search-icon--mobile {display:none}
}


ul.search-list li {
  padding:4px 10px 4px 0px;
  border-bottom:1px solid #EFEFEF;
  background-color:#FFF;
  transition: background-color 20ms;
}
ul.search-list li:hover {
  background-color:#FAFAFA;
}
/* ul.search-list li div {
  padding-left:30px
} */

.search-item {
    padding-left:36px;
    /* margin-bottom: 2px; */
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 20px 20px;
    /* background-color:rgba(0,0,0,0); */
    transition: color,background-color 20ms;
    /* font-weight:500; */
}

.search-item a {
  color:#000;
}

.search-icon-home {
    background-image: url('../../assets/pics/home-24.svg');
}
.search-icon-account {
    /* background-image: url('../../assets/pics/account-24.svg'); */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>');
}
.search-icon-activity {
    background-image: url('../../assets/pics/activity-24.svg');
}
.search-icon-tracking-sheets {
    background-image: url('../../assets/pics/tracking-sheets-24.svg');
}
.search-icon-students {
    background-image: url('../../assets/pics/students-24.svg');
}
.search-icon-hours-declaration {
    background-image: url('../../assets/pics/hours-declaration-24.svg');
}
.search-icon-documents {
    background-image: url('../../assets/pics/documents-24.svg');
}
.search-icon-balance-sheet {
    background-image: url('../../assets/pics/balance-sheet-24.svg');
}
.search-icon-payments-salary {
    background-image: url('../../assets/pics/payments-salary-24.svg');
}
.search-icon-profile-publication {
    background-image: url('../../assets/pics/profile-publication-24.svg');
}
.search-icon-payslip {
    background-image: url('../../assets/pics/payslip-24.svg');
}
.search-icon-power {
    background-image: url('../../assets/pics/power-24.svg');
}