@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


#popups {
    position: absolute;

    bottom: 64px;
    right: 64px;

    width: calc(50vw - 64px);
    height: 64px;

    display: flex;
    flex-direction: column-reverse;

    gap: 8px;

    pointer-events: none;
}

.popup {
    width: 100%;
    height: 64px;

    display: flex;
    flex-direction: row;
    justify-content: center;

    border-radius: 4px;
}

.popup.info {
    background-color: rgb(0, 119, 255);
}

.popup.error {
    background-color: red;
}

.popup.success {
    background-color: green;
}

.popup-icon {
    width: 64px;
    height: 64px;

    padding: 8px;

    background-color: rgba(0, 0, 0, 0.2);
}

.popup-text {
    height: 64px;
    width: calc(100% - 64px);

    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 24px;

    display: flex;
    align-items: center;

    padding: 8px;
}


#content {
    display: grid;
    place-items: center;

    grid-template-areas: "back-button container next-button";
    grid-template-rows: 1fr;
    grid-template-columns: 10% 80% 10%;

    gap: 16px;
    padding: 32px;

    overflow: hidden;
}


#back-button {
    grid-area: back-button;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    cursor: pointer;

    transition: color .3s, transform .3s;
}

#back-button:hover {
    color: #ccc;
    transform: scale(1.1);
}

#back-button span {
    font-size: 48px!important;
}

#next-button {
    grid-area: next-button;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    cursor: pointer;

    transition: color .3s, transform .3s;
}

#next-button:hover {
    color: #ccc;
    transform: scale(1.1);
}

#next-button span {
    font-size: 48px!important;
}

#back-button.hidden, #next-button.hidden {
    display: none;
}


#container {
    grid-area: container;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;

    overflow-x: hidden;
    overflow-y: hidden;
    
    background-color: rgba(255, 255, 255, .05);
    border: 4px solid rgba(255, 255, 255, .05);
    border-radius: 8px;

    gap: 64px;
}

#container > * {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}


#register {
    margin: auto;

    width: 100%;
    height: 100%;

    overflow: auto;
    
    display: flex;
    flex-direction: column;

    padding: calc(var(--header-height) * .5) 48px;
    gap: calc(var(--header-height) * .25);
}

#register-title {
    width: 100%;
    text-align: center;

    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: white;
}


.selection {
    display: flex;
    align-items: center;
    flex-direction: column;

    width: 100%;
    gap: 2vh;
}

.selection-title {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #eee;
}

.selection-options {
    position: relative;

    /* width: max-content; */
    width: 100%;
    height: max-content;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .5vw;

    padding: .3vw;
    border-radius: 8px;

    background-color: #fff;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);

    font-family: "Montserrat", sans-serif;

    overflow-x: auto;
}

.selection-options .selection-option {
    flex-grow: 0;
    height: 32px;
    width: calc((100% - .6vw) / 5 - .3vw);
    text-align: center;
}

.selection-options .selection-option input {
    display: none;
}

.selection-options .selection-option>span {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;

    cursor: pointer;
    border-radius: 4px;

    border: none;
    padding: 0 1vw;

    color: rgba(51, 65, 85, 1);
    font-size: 16px;
    text-transform: capitalize;

    transition: all .15s ease-in-out;
}

.selection-options .selection-option .selection-option-icon {
    font-size: 20px;
    transition: all .15s ease-in-out;
}


.selection-options .selection-option:hover>span,
.selection-options .selection-option input:checked+span {
    background-color: #ddd;
    font-weight: bold;
}

.selection-options .selection-option:hover .selection-option-icon,
.selection-options .selection-option input:checked + span > .selection-option-icon {
    animation: spin 1s linear infinite;
}


#uniform-gender-selection .selection-options {
    width: max-content;
    max-width: 80%;

    justify-content: space-evenly;
    flex-wrap: nowrap;
}

#uniform-gender-selection .selection-options .selection-option {
    min-width: 172px;
}

#uniform-pieces-selection .selection-options {
    width: max-content;
    max-width: 80%;

    justify-content: space-evenly;
    flex-wrap: nowrap;
}

#uniform-pieces-selection .selection-options .selection-option {
    min-width: 128px;
}

#uniform-category-selection .selection-options .selection-option {
    min-width: 160px;
}


.register-input-label {
    display: flex;
    flex-direction: column;
}

.register-input-text {
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 24px;
}

.register-input {
    width: 100%;
    height: 48px;

    font-size: 20px;
    font-family: "Poppins", sans-serif;

    border: none;
    outline: none;
    
    padding: 8px;
    border-radius: 8px;
}


#register-button {
    margin: auto 0;

    display: flex;
    justify-content: center;
    align-items: center;

    align-self: flex-end;

    width: 10vw;
    aspect-ratio: 7/2;
    
    border: none;
    outline: none;
    
    border-radius: 8px;
    cursor: pointer;
    
    background-color: green;
    color: #ddd;

    font-family: "Poppins", sans-serif;
    font-size: calc(10vw / 7 * .75);

    transition: color .3s, font-size .3s;
}


#register-button:hover {
    color: white;
    font-size: calc(10vw / 7 * .775);
}


#uniforms-list {
    padding: calc(var(--header-height) * .5) 48px;
}

#uniforms-list-title {
    width: 100%;
    text-align: center;

    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: white;
}

#uniforms-list-container {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-height: calc(100% - (calc(var(--header-height) * .5) * 2) - 32px);

    margin-top: 32px;
    gap: 16px;
    
    list-style: none;

    overflow-x: hidden;
    overflow-y: auto;
}

.uniforms-list-item {
    width: 100%;
    height: 48px;

    flex-shrink: 0;

    border-radius: 8px;
    padding: 0 16px;

    background-color: rgba(255, 255, 255, .1);

    display: flex;
    align-items: center;
    gap: 16px;

    cursor: pointer;
    transition: transform .3s;
}

.uniforms-list-item:hover {
    transform: scale(1.015);
}

.uniforms-list-item:hover .uniforms-list-item-icon {
    animation: spin 1s linear infinite;
}

.uniforms-list-item-icon {
    color: white;
    font-size: 24px;
}

.uniforms-list-item-name {
    font-size: 20px;
    font-family: "Poppins", sans-serif;

    color: white;
}

.uniforms-list-item-person {
    margin-left: auto;

    max-width: 20%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 20px;
    font-family: "Poppins", sans-serif;

    color: rgba(255, 255, 255, .75);
}