@import url("../modals/globalModal.css");

.forms__wrapper {
    width: 100%;
}

/* ======== Navbar ======== */
.navbar__logo > img {
    max-width: 200px;
}

.forms__navbar {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    gap: 2rem;
}

.account_options button {
    height: auto;
}

.referenceNumber [name="referenceNumber"] {
    width: auto;
}

.nabar__instructions {
    max-width: 50rem;
}
/**/

/* ======== Steps ======== */
.forms__steps,
.forms__content {
    --containers-width: 95%;
    --containers-max-width: 800px;
}

.forms__steps {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.steps__container {
    width: var(--containers-width);
    max-width: var(--containers-max-width);
    gap: 2.5rem;
}

.steps__wrapper {
    gap: 5rem;
    overflow-x: auto;
    margin: 0 auto;
    max-width: inherit;
}

.steps__servee_container {
    display: inherit;
    flex: inherit;
    align-items: inherit;
    flex-flow: inherit;
    gap: inherit;
}

.forms__steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.forms__steps .step:hover {
    cursor: pointer;
}

.forms__steps .step > i {
    font-size: 3rem;
    margin-bottom: 10px;
}
.forms__steps .step h3 {
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.forms__steps .step:not(.active) > i,
.forms__steps .step:not(.active) h3 {
    color: #bebebe !important;
}

.steps__buttons_control,
.steps__buttons_control > div {
    gap: 1rem;
}

/* == delete button == */
.servee__item-delete {
    all: initial;
    position: absolute;
    top: 0;
    right: 0;
}

.servee__item-delete:hover {
    transform: scale(1.2);
}
/**/
/**/

/* ======== Content ======== */
.content__container {
    width: var(--containers-width);
    max-width: var(--containers-max-width);
}

.content__container > div {
    display: flex;
    flex-flow: column wrap;
    gap: 3rem;
}

form.content_form {
    gap: 2.5rem;
}

form.content_form label {
    text-transform: capitalize;
}

form.content_form label + * {
    margin-top: 11.25px;
}

.content_form > div.is-flex {
    gap: 1rem;
}

.content_form > div.is-flex > div {
    flex-basis: 50%;
}
/**/

/* ======== Form Review ======== */
.servicesServeeLvl {
    gap: 0.5rem;
}

.form_review_tags {
    border-radius: 10px;
    background-color: #e0e0e0;
    color: #646464;
}

.form_review_tags > div {
    gap: 5px;
}

.review_servee_container {
    display: flex;
    flex-flow: inherit;
    gap: inherit;
}
/**/

.modal .delete_btn:hover {
    transform: scale(1.2);
}

/* ======== Media queryes ======== */
@media screen and (max-width: 1000px) {
    .forms__navbar {
        justify-content: center !important;
    }
}