#mobile-how-to-start {
    display: none;
    background: white;
    border:1px solid #e5e5e5;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Montserrat',sans-serif;
    margin-bottom: 21px;
}

body.is-dark #mobile-how-to-start {
    background: #323236;
    border-color: #404046;
}

#desktop-how-to-start {
    position:fixed;
    top:110px;
    left:0;
    background-color: white;
    border-top:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 8px 10px;
    width: 300px;
    z-index: 99;
    font-family: 'Montserrat',sans-serif;
}

body.is-dark #desktop-how-to-start {
    background-color: #323236;
    border-color: #404046;
}

@media all and (max-width: 1481px) {
    #desktop-how-to-start {
        display: none;
    }

    #mobile-how-to-start {
        display: block;
    }
}

#desktop-how-to-start .title {
    display:flex;align-items:center;flex-direction:column;text-align:center;font-weight: 600;font-size: 19px;margin-bottom: 18px;
}

#mobile-how-to-start .title {
    display:flex;align-items:center;flex-direction:column;text-align:center;font-weight: 400;font-size: 15px;margin-bottom: 14px;
}


.stepper-container {
    width:100%;display: flex;justify-content: space-between;
}

.stepper-title {
    font-size:120%;font-weight: 600;text-decoration: underline;
}

#mobile-how-to-start .stepper-title {
    font-size:100%;font-weight: 400;text-decoration: underline;
}

.stepper-description {
    margin-top:10px;
}

#mobile-how-to-start .stepper-description {
    font-weight: 300;font-size: 93%;
}

.stepper-buttons-container {
    display:flex;width:100%;justify-content: space-between;padding:14px 4px 8px 4px;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stepper-item .step-name {
    color: rgb(120,120,120);
    font-size: 90%;
    text-align:center;
}

#mobile-how-to-start .step-name {
    font-weight: 300;
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 4px solid #e5e5e5;
    width: 100%;
    top: 6px;
    left: -50%;
    z-index: 2;
}

body.is-dark .stepper-item::before {
    border-bottom: 4px solid rgb(80,80,80);
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 4px solid #e5e5e5;
    width: 100%;
    top: 6px;
    left: 50%;
    z-index: 2;
}

body.is-dark .stepper-item::after {
    border-bottom: 4px solid rgb(80,80,80);
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e5e5e5;
    margin-bottom: 2px;
}

body.is-dark .stepper-item .step-counter {
    background: rgb(50,50,54);
    border: 2px solid rgb(80,80,80);
}

.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}


/** Active */
.stepper-item.active .step-counter {
    border: 2px solid #3498db;
    background-color: white;
}

body.is-dark .stepper-item.active .step-counter {
    border: 2px solid #3498db;
    background-color: rgb(50,50,54);
}

.stepper-item.active .step-name {
    color: #aaaab3;
    font-weight: 600;
}


/** Completed */
.stepper-item.completed .step-counter {
    border: 2px solid #3498db;
    background-color: #3498db;
}

body.is-dark .stepper-item.completed .step-counter {
    border: 2px solid #3498db;
    background-color: #3498db;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 4px solid #3498db;
    width: 100%;
    top: 6px;
    left: 50%;
    z-index: 3;
}

body.is-dark .stepper-item.completed::after {
    border-bottom: 4px solid #3498db;
}

.stepper-item.completed .step-name {
    color: #aaaab3;
}