.tutorial,
.tutorial * {
    display: flex;
    flex-direction: column;
}

.tutorial {
    background-color: rgba(35, 35, 35, .7);
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    align-items: center;
    justify-content: center;
    z-index: 10;
}


.tutorial .card {
    width: 250px;
    border-radius: .5rem;
    box-shadow: -1rem 1rem 1rem rgba(35, 35, 35, .7);
    background-color: white;
    border: 1px solid #f2f2f2;
    align-items: center;
    justify-content: space-between;
}

.tutorial :is(.upper , .lower) {
    align-items: center;
    padding: .5rem;
    width: 100%;
}

.tutorial .icons {
    flex-direction: row;
    align-items: center;
}

.tutorial p {
    padding: 1rem;
}

.tutorial .button--row {
    flex-direction: row;
    width: 100%;
    column-gap: .5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tutorial .button--rect-w-icon {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: #333;
    background: transparent;
    border-radius: .25rem;
    border: 1px solid #333;
    padding: .25rem;
}

.tutorial .next {
    grid-column-start: 2;
}

.tutorial .button--rect-w-icon svg {
    stroke-width: 1.5;
}

.tutorial .button--rect-w-icon > * {
    margin: .25rem;
}

.tutorial .dots {
    flex-direction: row;
    margin: .5rem;
}

.tutorial .dot {
    height: .5rem;
    width: .5rem;
    border-radius: var(--circle);
    background: #bbb;
    margin: .25rem;
}

.tutorial .dot.active {
    background-color:  var(--government-med);
}

.tutorial svg {
    margin: .25rem;
}

.tutorial p,
.tutorial p * {
    display: revert;
}

.tutorial .blue {
    color: var(--government);
}

.tutorial .close{
    cursor: pointer;
    align-self: flex-end;
}
