html {
    background-color: var(--background);
    color: var(--font-color);
    height: 100%; 

} 

body {
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
main{
    display: flex;
    flex-grow: 1;
    min-height: 0;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0px;
    display: none;
}

*{
    user-select: none;
}

#top-header {
    position: relative;
    height: 8%;
    display: flex;
    align-items: center;
}

#top-header>* {
    margin: auto;
}

.main-title {
    text-align: center;
    padding-left: 1vw;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: 3vw;
}

.header-gradient-ER {
    background: var(--headerBG);
    background: var(--headerBGL);
}

.search-wrapper{
    width: 100vw;
    display: flex;
    height: fit-content;
}
.search-selectors {
    display: flex;
    width: 13vw;
    height: 100%;
    
}

#search-keys {
    width: 100%;
    background: rgba(0, 0, 0, 0);
    border-radius: 10px 0 0 10px  ;
    border-color: var(--selActive);
    border-style: solid;
    color: var(--font-color);
    user-select: none;
    cursor: pointer;
    background-color: var(--btnNActive);
    outline: none;
    text-align: center;
}

.search-keys-wrapper {
    display: flex;
    position: relative;
}
#search-keys-selections {
    z-index: 2;
    padding: 0;
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#search-keys-selections>div {
    cursor: pointer;
    background-color: var(--selNActive);
    text-align: center;
    margin: auto;
    width: 100%;
    border: solid var(--shadow) 2px;
}

#search-keys-selections>div:hover {
    background-color: var(--selHover);
}

.main-search-label{
    position: relative;
    width: calc(70% -  5em);
}
#search-bar{
    text-align: center;
    padding-left: 7px;
    width: 100%;
    height: 100%;
    vertical-align: top;
    border-radius:0 10px 10px 0 ;
    outline: none;
}
#search-suggestion{
    position: absolute;
    z-index: 3;
}

#search-suggestion >div:hover{
    background-color: var(--selHover);
}
#search-suggestion > div{
    background-color: var(--selNActive);
    text-align: center;
    cursor: pointer; 
    border: 3px solid var(--selActive);
    border-top: 0;
    border-collapse: collapse;
    box-sizing: border-box;
}

#search-keys:hover{
    background-color: var(--selHover);
}


#filter-icon:hover,
.btn-n-active:hover {
    background-color: var(--btnHover);
}

#loading-screen{
    position: absolute;
    z-index: 30;
    top: 8%;
    width: 100%;
    height: 92%;
    display: flex;
    background-color: var(--background);
    display: flex;
    flex-direction: column;
}

#loading{
    overflow-y: scroll;
    margin: auto;
    width: 60%;
    height: fit-content;
    background-color: var(--colorA);
}

#debug{
    margin: auto;
    background-color: var(--colorD);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 60%;
    overflow: scroll;
}

.loading-row{
    display: flex;
}
.loading-text{
    width: 20em;
}
#non-header{
    flex-grow: 1;
    display: flex;
    min-height: 0;
}

aside {
    display: flex; 
}

aside>div {
    padding-left: 0.2em;
    padding-right: 0.2em;
    flex-grow: 1;
}

.side-btn {
    font-size: 2.5vmax;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.side-btn>span {
    margin: auto;
}
.big-select{
    margin-bottom: 0!important;
}
.small-select{
    margin-top: 0!important;
    font-size: 0.9vmax;
}

.btn-n-active {
    background-color: var(--btnNActive);
}

.btn-active {
    background-color: var(--btnActive);
} 

input[type="text"] {
    
}

.btn, .side-btn {
    cursor: pointer;
    display: flex;
} 
.btn:hover, .btn-hover:hover{
    background-color: var(--selHover);
}

.hidden{
    display: none!important;
}
#to-filter{
    height: 100%;
    margin: auto;
    position: relative;
    width: 5em;
    display: flex;
}

span{
    margin: auto;
    user-select: text;
}
@media (orientation: landscape) {
    .search-keys-wrapper{
        /* top-left top-righ bot-right bot-left*/
        border-radius: 0 7px 7px 0;
        width: 30%;
    }
    .main-search-label{
        border-radius: 7px 0 0 7px;
    }
    #search-keys, #search-bar{
        font-size: 20px;
    }
    #search-keys-selections > div, #search-suggestion > div {
        font-size: calc(2vw + 20px);
    }
    #non-header {
        flex-direction: row;
    }

    aside {
        flex-direction: column;
        height: 100%;
        min-width: 12vmax;
    }
    #filter-icon{
        width: 5vh;
        height: 5vh;
        padding: 2vh;
    }
    #settings-btn {
        width: 5vh;
        height: 5vh;
    }
}

@media (orientation: portrait) {
    .search-keys-wrapper{
        width: 30%;
    }
    .search-wrapper{
        flex-direction: row;
    }
    .search-keys-wrapper, #search-suggestion{
        font-size: 7vh;
    }
    #search-keys, #search-bar{
        font-size: 4vh;
    }
    #search-bar, #search-keys{
        border-radius: 0;
    }
    #search-keys-selections > option{
        font-size: 0.9em;
    }

    #non-header {
        flex-direction: column; 
    }

    aside {
        display: flex;
        flex-direction: row;
        min-height: 8%;
        overflow: auto;
        position: sticky;
        bottom: 0;
    }
    #filter-icon{
        width: 5vw;
        height: 5vw;
        padding: 2vw;
    }
    #settings-btn {
        width: 5vw;
        height: 5vw;
    }
}

#filter-counter{
    display: none;
    position: relative;
    height: fit-content;
    bottom: 10px;
    font-size: large;
    align-self: flex-end;
    right: 39%;
    padding: 2px; 
    background-color: red;
    border-radius: 100px;
}