/* ALGORITHM ABOUT SECTION */
#algorithm_about_section {
    width: 350px;
    height: 100%;
    position: absolute;
    left: -350px;
    z-index: 98;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(238, 238, 238, 0.527);
    border-right: 1px solid black;
    transition: left 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

#algorithm_about_close_bar {
    height: 40px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
}
#algorithm_about_close_bar img {
    height: 100%;
    border-radius: 25%;
}
#algorithm_about_close_bar img:hover {
    background-color: var(--hover-color);
}

#algorithm_name {
    display: block;
    color: black;
    text-align: center;
}

.horizontal_divider_outside {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}
.horizontal_divider {
    width: 50%;
    height: 0px;
    box-shadow: 0px 0px 1px 0.3px grey;
}

#algorithm_scroll_section {
    height: 100%;
    overflow-y: scroll;
}

#algorithm_about_text {
    display: block;
    font-size: 14pt;
    padding: 0px 10px;
}

#pre_alg_btn_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: fit-content;
}
.pre_alg_btn {
    width: 100%;
    font-size: 14pt;
    padding: 5px;
    background-color: white;
}
.pre_alg_btn:hover, .pre_alg_btn:disabled {
    background-color: var(--hover-color);
}

#path_result {
    width: 100%;
    height: fit-content;
    display: block;
    text-align: center;
    font-size: 16pt;
    overflow-x: auto;
}

.path_unvisited {
    color: grey;
}
.path_visited {
    color: rgb(43, 139, 14);
}
.path_next_visit {
    color: goldenrod;
}

#step_buttons {
    width: 100%;
    height: fit-content;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    box-sizing: border-box;
    gap: 10px;
}
.step_btn {
    width: 100%;
    height: 35px;
    font-size: 20pt;

    background-size: auto 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
}
.step_btn:hover, .step_btn:disabled {
    background-color: var(--hover-color);
}
#step_backward {
    background-image: url("../assets/left-arrow.svg");
}
#reset_algorithm {
    background-image: url("../assets/reset.svg");
}
#play_pause {
    background-image: url("../assets/play.svg");
}
#step_forward {
    background-image: url("../assets/right-arrow.svg");
}

#speed_slider_box {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: fit-content;
    gap: 10px;
}
input[type="range"] {
    width: 50%;
}
#speed_display {
    text-align: center;
    font-size: 12pt;
}


/* Once all of the menu section go into hamburger */
@media screen and (max-width: 760px) {
    #algorithm_about_section {
        width: 100%;
        height: 40%;
        left: -100%;
        flex-direction: column;
        justify-content: start;
        bottom: 0%;
    }
    #algorithm_about_close_bar {
        height: 30px;
    }
    #algorithm_name {
        font-size: 16pt
    }
    #algorithm_below_name_divider {
        display: none;
    }
    #algorithm_about_text {
        font-size: 12pt;
    }
}