:root {
    --sidebarWidth: 350px;
    --sidebarHeight: 100vh; /* vh: viewport height */
    --sidebarSlider: -330px;
}

#swimmer-plot-search-menu {
    font-size: 10px; 
    float:right; 
    margin-right:-100px; 
    margin-top: 50px; 
    cursor: pointer;
}

#swimmer-plot-sidebar {
    min-width: var(--sidebarWidth);
    max-width: var(--sidebarWidth);
    min-height: var(--sidebarHeight);
    margin-left: var(--sidebarSlider);
    /* background: #F1F3F4; */
    border-top: 1px solid #F1F3F4;
    border-right: 30px solid #F1F3F4;
    padding: 10px 5px;
}

#swimmer-plot-sidebar.active {
    margin-left:0px;
}

#swimmer-plot-sidebar a:hover {
    color: #17a2b8;
    background: #fff;
}

#swimmer-plot-sidebar a.inactive:hover {
    background-color: #DEE1E6;
    border: 1px solid #DEE1E6;
    cursor: default;
    color: #000000;
}

#swimmer-plot-sidebar i {
    font-size: 0.75rem;
}

#swimmer-plot-sidebar a.btn {
    font-size: 0.75rem;
    background-color: #ffffff;
    border: 1px solid #c7c6c6;
    cursor: pointer;
}

#swimmer-plot-sidebar a.inactive {
    background-color: #b3d7ff;
    border: 1px solid #c7c6c6;
    cursor: default;
}

#swimmer-plot-sidebar a.btn-switch {
    border: 2px solid #F1F3F4;
}

#swimmer-plot-sidebar li .select2-results__option.inactive {
    color: #eeeeee;
}

.rotate {

    /* Safari */
    -webkit-transform: rotate(90deg);

    /* Firefox */
    -moz-transform: rotate(90deg);

    /* IE */
    -ms-transform: rotate(90deg);

    /* Opera */
    -o-transform: rotate(90deg);

}