/*	Album Collection
	CSS for ../css/search-bar.css
*/

/*Search bar*/
#search {width: 100%; background: #c2d3e2; padding: 4px; display: block; margin: 0 0 16px 0;}
.search-form {margin: 0; padding: 0; box-sizing: border-box;}

.search-button {all: unset; color: #e8e353; font: normal bold 13px Arial, Helvetica, sans-serif; background: var(--azul); margin: 0 0 0 8px; padding: .7em 1.6em .6em 1.6em; border: none; cursor: pointer; position: absolute; text-transform: uppercase; vertical-align: baseline; max-width: 100%; text-shadow: 1px 1px 1px #000000;}
.search-button:hover {background: #e8e353; color: var(--azul); text-shadow: 1px 1px 1px #fafafa;}
.search-button:focus, .search-button:active {background: #e8e353; color: var(--azul); text-shadow: 1px 1px 1px #fafafa;}

.fa-search {color: var(--azul);}
.fa-search:hover {color: var(--rojo);}

#search input[type="text"] {width: calc(100% - 105px); background: var(--azul-claro); padding: 10px; border: 0;}
#search input[type="text"]:focus {background: var(--amarillo-claro)!important;}
#search input[type="text"]:active {background: var(--amarillo-claro)!important;}