/**
 * Ricerca pagina catalogo e altrove
 * 
<form action="/catalogo/query" method="get" class="main-search-form"> 
<div class="input-group">
  <span class="input-group-label"><i class="far fa-search"></i></span>
  <input class="input-group-field" type="text" value="${SEARCH}" placeholder="${PLACEHOLDER}" name="search[q]">
  <div class="input-group-button">
    <input type="submit" class="button" value="<po>Cerca</po>">
  </div>
</div>
</form>
 * **/

form.main-search-form {
    font-family: var(--font-main)
    padding: 0;
    margin: 0;
}
form.main-search-form .input-group {}
form.main-search-form .input-group:hover {}
form.main-search-form .input-group .input-group-label {
    background: white;
    border: none;
    border-bottom: solid 1px var(--color-grey);
}
form.main-search-form .input-group .input-group-field {
    border: none;
    box-shadow: none;
    font-size: 2rem;
    border-bottom: solid 1px var(--color-grey);
    height: 4rem;
    line-height: 4rem;
    color:  #757575;
    transition:all .2s ease-in-out;
    font-family: var(--font-alternative)
}

@media (max-width: 40rem) {
    form.main-search-form .input-group .input-group-field {
        font-size: 1.25rem;
        border-bottom: solid 1px #757575;
        height: 3rem;
        line-height: 3rem;
        color: #757575;
        transition: all .2s ease-in-out;
        font-family: var(--font-alternative)
    }
}


form.main-search-form .input-group .input-group-field:hover,
form.main-search-form .input-group .input-group-field:active {
   color: var(--color-loudblack)
}

form.main-search-form .input-group .input-group-button {
    font-size: 1.25rem;
    border-bottom: solid 1px var(--color-grey);  
}

form.main-search-form .input-group .input-group-button input[type=button] {
    background-color: white;
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    border: none;
    line-height: 2rem;
    cursor: pointer;
}

form.main-search-form .input-group .input-group-button input[type=button]:hover {
    color: #333;
}


/**
 * 
<div id="full-page-search">
    <div id="full-page-search-close">{X}</div>
    <div id="full-page-search-form">{FORM}</div>
</div>
 * 
 * **/

 #full-page-search {
    background-color: white;
    opacity: 0.95;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    padding: 2rem;
 }

 #full-page-search-close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2rem;
    text-align: center;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    cursor: pointer;
    transform: rotate( -360deg );            
    transition: transform 150ms ease;    
 }

 #full-page-search-close:hover {
    transform: rotate( -180deg );            
    transition: transform 150ms ease;
 }

 #full-page-search-form {
    padding-top: 10rem;
 }