_global_widget.scss

$toolbar_height:40px;
.nav_button{
    margin-left:10px;
    margin-right:10px;
    position:absolute;
    top:50vh;
    transform:translateY(-25px);
    cursor: pointer;
    opacity:0.5;
    transition:opacity 1s ease;
}
.nav_button:hover{
    opacity: 1;
    transition:opacity 1s ease;
}

.left_button{
    @extend .nav_button;
    display:none!important;
    left:0;
}
.right_button{
    @extend .nav_button;
    display:none!important;
    right: 0;
}

/* Larger than tablet */
@media (min-width: 750px) {
    .left_button,.right_button{
        display:inline-flex!important;
    }
}

.copyright{
    position:absolute;
    bottom:0;
    width:100vw;
    text-align: center;
}
.toolbar {
    height: $toolbar_height;
    position: absolute;
    width: 100%;
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 59%, rgba(0, 0, 0, 0) 100%);*/
    background:transparentize($primary_color, 0.2);
    display:flex;
    align-items: center;
}

.toolbar .toolbar_icon {
    margin-left:10px;
    color: white;
    float: left;
    height: $toolbar_height * 0.6;
    width: $toolbar_height * 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar .toolbar_title {
    float: left;
    padding: 0 10px;
    color: white;
    font-size: 1.5em;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu_button_container {
    position: absolute;
    right:0;
    top:0;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-right: 20px;*/
}
$progress_bar_height:2px;
.progress_container{
    pointer-events: none;
    position:absolute;
    // background:transparentize(white, 0.5);
    left:0;
    top:$toolbar_height;
    height:50px;
    width:100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    .progress_bar{
        pointer-events:all;
        position:relative;
        height:$progress_bar_height;
        width:80%;
        max-width:200px;
        display:flex;
        justify-content: space-around;
        align-items: center;
        padding:0!important;
    }
    .progress_bar_overlay{
        height:2px;
        width:80%;
        background-color:white;
        margin:0!important;
    }
    $progress_dot_size:10px;
    .progress_dot{
        cursor: pointer;
        height:$progress_dot_size;
        width:$progress_dot_size;
        border-radius:50%;
        border:2px pink solid;
        box-sizing: border-box;

        // transform:translate(- $progress_dot_size / 2,- $progress_dot_size / 2 );
        top:$progress_bar_height / 2;
        transition: all 0.5s ease;
    }
    .progress_dot:hover{
        transform: scale(2,2);
        transition: all 0.5s ease;
    }

}