@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap');

#charger-search-pane {
    font-family: "Ubuntu Sans", Arial, Helvetica, sans-serif;
    width: 25%;
    height: 100%;
    background: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
    border-left: 1px solid #2c3e54;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#charger-search-pane-search-container {
    width: 79%;
    height: 3em;
    border-bottom: 1px solid #00469b;
    padding: 1px;
    margin-bottom: 5%;
    margin-left: 10%;
}

#charger-search-pane-input-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

#charger-search-pane-input-label {
    position: absolute;
    width: 80%;
    height: 3em;
    display: flex;
    align-items: center;
    z-index: -1;
    font-size: 11pt;
    color: #00469b;
}


#charger-search-pane-input-element {
    width: 90%;
    height: 95%;
    border: hidden;
    background: transparent;
    font-size: 12pt;
    color: #333;
    font-weight: bold;
}

/*
Eliminamos el botón de limpiar integrado en webkit para los campos search
*/
#charger-search-pane-input-element::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
  

#charger-search-pane-input-element:focus {
    outline-style: none;
    outline-width: 0px;
}

.charger-search-pane-input-header {
    animation: setAsInputHeaderAnimation 0.1s ease-out forwards;
}

.charger-search-pane-place-holder {
    animation: setAsInputPlaceHolderAnimation 0.1s ease-in forwards;
}

#charger-search-pane-clear-tool-button {
    border: none;
    background: transparent;
    color: #333;
    display: none;
}

#charger-search-pane-clear-tool-button.visible {
    display: block !important;
}


@keyframes setAsInputHeaderAnimation {
    from {
        transform: translate(0, 0);
        font-size: 11pt;
    }
    to {
        transform: translate(0, -1.6em);
        font-size: 8pt;
    }
  }
  
  @keyframes setAsInputPlaceHolderAnimation {
    from {
        transform: translate(0, -1.6em);
        font-size: 8pt;
    }
    to {
        transform: translate(0, 0);
        font-size: 11pt;
    }
  }

#charger-search-pane-result-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    overflow-y: auto;
    scrollbar-width: thin;
}


#charger-search-pane-result-container:before {
    content: " ";
    background-image: url(https://puntos-recarga.juntaex.es/files/images/sig-energetico-extremadura/intro/charging_station.jpg);
    opacity: 0.07;
    position: absolute;
    left: 0px;
    top: 0px;
    height:95%;
    width: 100%;
    z-index: -1;
}

/*
* Laptop mdpi
*/
@media only screen and (max-width: 1300px) {
    #charger-search-pane {
        width: 40%;
    }
}


/*
* Teléfono movil horizontal
*/
@media only screen and (max-width: 1000px) and  (max-height: 800px) {
    #charger-search-pane {
        width: 40%;
    }
}

/*
* Teléfono movil vertical
*/
@media only screen and (max-width: 600px) {
    #charger-search-pane {
        position: absolute;
        top: 60%;
        left: 0px;
        width: 100%;
        height: 40%;
        padding-top: 4%;
        padding-bottom: 4%;
        border-top: 1px solid #2c3e54;
    }

    #charger-search-pane-search-container {
        height: 12%;
    }

    #charger-search-pane-result-container {
        height: 80%;
    }
}

/*
* Tablets vertical
*/
@media only screen and (max-width: 900px) and (min-height: 1000px) {
    #charger-search-pane {
        width: 35%;
    }
}