/*SideNav*/
.sidenav {
    display: flex;
    position: absolute;
    z-index: 1;
    margin-top: 1rem;
    margin-left: 1rem;
    align-items: center;
    background-color: white;
    border-radius: 5px;
    padding: 0 0.5%;
    border: 1px solid #999999;
    width: 15rem; /*fit-content !important;*/ /*12%;*/
}
.sidenav .search-menu {
    width: 15%;
    font-size:24px;
    cursor:pointer
}
.sidenav .search-icon,
.sidenav .shuffle-icon{
    margin-top:1%;
    padding: 1%;
    color: #999999;
    cursor: pointer;
    transition: color 0.2s;
}
.sidenav .shuffle-icon {
    border-left: 1px solid #999999;
}
.sidenav .search-icon:hover,
.sidenav .shuffle-icon:hover{
    color: #000;
}
.search-bar {
    padding: 0;
    margin-left: 5%;
}

/*.search-bar input {
    border-color: transparent;
    margin-bottom: 1% !important;
}
.search-bar input[type="text"]:focus{
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent;
    border-color: #ffffff !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}*/

/*Side Bar Content*/
.bs-canvas-overlay {
    opacity: 0.85;
    z-index: 1100;
}

.bs-canvas {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 330px;
    transition: margin .2s ease-out;
    -webkit-transition: margin .2s ease-out;
    -moz-transition: margin .2s ease-out;
    -ms-transition: margin .2s ease-out;
}
.bs-canvas-header {
    background-color: white !important;
    border-bottom: 1px solid #d9d9d9;
}

.bs-canvas-title {
    text-align: center;
    /*font-family: monospace;*/
    /*font-size: 1.5em;*/
    color: #525252 !important;
}
.bs-canvas-left {
    left: 0;
    margin-left: -330px;
}
.bs-canvas-close {
    float: right;
    cursor: pointer;
    color: #999999;
}