.fixed-box{
    position: fixed !important;
    top: 5% !important;
    overflow-y: scroll !important;
    height: 90% !important;
}
#selector-menu{
    position:absolute;
    background-color:rgba(200, 200, 200, 0.9);
    border-radius: 16px;
    border: 1px solid black;
    color: white;
    overflow: hidden;
}
.selector-categories{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.selector-sorting-categories{
    background-color: #04AA6D;
    display:flex;
    flex-wrap:wrap;
}
.selector-title{
    width: 15%;
    height:100%;
    padding:10px;
    border: none;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    text-align: center;
    text-decoration: none;
    font-size: 30px;
    cursor: pointer;
    background-color: #04AA6D;
    justify-content: center;
    align-items: center; 
    display:flex;
    user-select: none;
    font-family: Georgia;
    font-weight: bold;
    flex-grow: 4;
}
.sorter-selected{
    background-color: #45a049;
}
.selector-title:last-child{
    border-right: none;
}
.selector-title:hover {
    background-color: #45a049;
    transition-duration: 0.3s;
}
.sorter-title{
    height:100%;
    align-items: center; 
    display:flex;
    text-align: center;
    text-decoration: none;
    margin-left:10px;
    user-select: none;
    font-family: Georgia;
    font-weight: bold;
}
.extra-button{
    align-items: center; 
    display:flex;
    text-align: center;
    text-decoration: none;
    margin-left:10px;
    user-select: none;
    border:1px solid black;
    border-radius: 0px 0px 5px 5px;
    cursor: pointer;
    align-self: center;
    height:30px;
    padding:4px;
    color: black;
    background: mistyrose;
}

.sorting-categories, .sorting-additional-options{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.sorting-option, .sorting-additional-option{
    border: 1px solid black;
    border-radius: 5px;
    padding:5px;
    margin:5px;
    user-select: none;
    cursor: pointer;
}
.sorting-option:hover, .sorting-additional-option:hover {
    background-color: #45a049;
    transition-duration: 0.3s;
}
.sorted-data{
    display:flex;
}
.sorted-categories{
    width:80%;
}
.sneak-peak-cont{
    width:20%;
}
.sorted-category-content{
    display:flex;
    align-items: start;
}
.sorted-content{
    display:flex;
    flex-wrap:wrap;
    align-self: center;
}
.sorted-title{
    font-family: Courier;
    font-weight: bold;
    font-size: 28px;
    padding:10px;
}
.sorting-main-sort, .sorting-main-direction{
    display:flex;
    flex-direction: row;
    padding:5px;
    align-items: center;
}
.sorting-main-sort div, .sorting-main-direction div{
}
.sorting-main-sort select, .sorting-main-direction select{
    width: 80px;
    height: 30px;
}
.shown-data{
    text-wrap:nowrap;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid black;
    color: black;
    background-color: mistyrose;
    justify-content: center;
    align-items: center; 
    display:flex;
    user-select: none;
    padding:5px;
    border-radius: 5px;
    margin:5px;
}
.data-pair{
    padding: 10px;
    border-bottom: 1px solid black;
    color: black;
}
.data-pair:last-child{
    border-bottom: none;
}
.data-pair-title{
    font-family: Courier ;
    font-weight: bold;
}
.data-pair-content{
    font-size: 20px;
    font-weight: bold;
    color: black;
}
.cluster-cont{
    display:flex;
    flex-wrap: wrap;
    border-bottom: 1px solid black;
}
.cluster-cont .data-pair{
    padding: 5px;
    border: none;
}
.selector-menu-data-option{
    padding:4px;
    cursor: pointer;
    border-radius:4px;
    background: #04AA6D;
    color:white;
    font-weight: bold;
    text-align: center;
}
.selector-menu-data-option:hover{
    background-color: #45a049;
    transition-duration: 0.3s;
}
.regular-box{
    width:80%;
    left:10%;
    top:10%;
}
.big-box{
    width:95%;
    left:2.5%;
}
.currently-selected{
    background-color: slateblue;
    color:white;
    border-radius:12px;
    padding:10px;
    font-weight:bold;
}