.submit-button {
    padding: .6em 1.2em;
    background-color: #254c50;
    color: #7abdc4;
    border: none;
    border-radius: var(--border-rounding);
    font-size: large;
}



.alternating-button {
    display: block;
    border: .1em solid;
    border-radius: var(--border-rounding);
    text-align: center;
    padding: .8em;
    text-decoration: none;
    font-size: large;
    width: 100%;
}
.alternating-regular {
    color: #d9d9d9;
    background-image: linear-gradient(to right, #254c50 20%, #3d7e85 80%);
    border-color: #3d7e85;
}
.alternating-alternate {
    color: #254c50;
    background-image: linear-gradient(to right, #d9d9d9 20%, #989898 80%);
    border-color: #d9d9d9;
}



.feedback-container {
    position: relative;
    width: 100%;
}
.feedback-box {
    border: none;
    resize: none;

    width: 100%;
    aspect-ratio: 2;
    padding: 1em 1.2em 2em 1.2em;
}
.feedback-limit {
    position: absolute;
    bottom: .4em;
    right: .2em;
    color: black;

    background-color: #d9d9d9;
    padding: .2em .4em;
    border-radius: var(--border-rounding);
}




.feedback-message {
    padding: 1.4em;
    position: relative;

    width: 100%;
}
.feedback-timestamp {
    position: absolute;
    bottom: .5em;
    right: 1em;

    font-size: smaller;
    color: #6c6c6c;
}
.feedback-report {
    position: absolute;
    top: .5em;
    right: .5em;
}
.feedback-report button {
    background: none;
    border: none;
}




.header-bar {
    height: fit-content;
    width: 100%;
    padding: calc(var(--spacing) / 2);
    background-color: rgba(0,0,0, .2);

    display: flex;
    justify-content: space-between;
    align-items: center;
}




.login-form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--spacing) / 1.5) var(--spacing);
    align-items: center;

    margin: 0 auto;
}



#toast-container {
    position: fixed;
    top: var(--spacing);
    left: 0;
    width: 100%;

    pointer-events: none;
}

.toast {
    text-align: center;
    padding: 1em 1.4em;
    background-color: #d9d9d9;
    border-radius: var(--border-rounding);
    border: .1em solid;

    color: gray;
    border-color: gray;

    transition: all .5s ease-out;
    opacity: 0;
    transform: translateY(-1em);
}

.toast-info {
    color: #18646c;
    border-color: #18646c;
}
.toast-error {
    color: darkred;
    border-color: darkred;
}

.toast-visible {
    opacity: 1;
    transform: translateY(0);
}