@media (max-width: 767px) {
    .flex-reverse-container {
        flex-direction: column-reverse;

        #floating-nav {
            position: static;
            margin: 0;
        }
    }
}

#my_profile_header #not-submitted {
    margin-top: 5rem;
}

.flex-reverse-container {
    display: flex;
    column-gap: 30px;

    .main_content {
        #print-profile {
            text-align: center;
        }
    }

    #floating-nav {
        height: fit-content;
        flex: 0 0 33%;
        margin-bottom: 30px;
        padding: 20px;

        > h3 {
            margin-top: 15px;
            margin-bottom: 4px;
        }

        & ul {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            list-style: none;

            & li {
                position: relative;

                & h3 {
                    font-weight: normal;
                }
                
                & p:last-child {
                    margin-bottom: 3px;  /*added to make up for the visual effect of the bottom margin seeming larger because the p is small in comparison to the h3*/
                }

                &::after {
                    /* The list marker/circle */
                    content: '•';
                    position: absolute;
                    font-size: 7rem;
                    top: -26px;
                    left: -38px;
                    color: #8DB754;
                }

                &::before {
                    /* Line between markers */
                    content: '';
                    position: absolute;
                    top: 25px;
                    left: -28px;
                    width: 1px;
                    height: 100%;
                    background-color: lightgrey;

                }

                &.current-step::after {
                    color: #337ab7;
                }

                &.current-step ~ *::after {
                    color: lightgrey;
                }

                &:last-child::before {
                    display: none;
                }
            }
        }
    }
}
