.button-one {
    background-color: var(--primaryGreen);
    color: var(--primaryWhite);
    border: none;
    border-radius: .3rem;
    height: 2rem;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-in-out;
    text-align: center;
}
.button-one:hover {
    background-color: var(--secondaryGreen);
    transition: .2s ease-in-out;
    /* border: 1px solid var(--primaryGreen); */
}
.button-one:active {
    transform: scale(.9);
    transition: .1s ease-in-out;
}


/* button two */
.button-two {
    background-color: var(--transparent);
    color: var(--primaryGreen);
    border: 1px solid var(--primaryGreen);
    border-radius: .2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease-in-out;
    column-gap: .5rem;
    padding: 0 1rem;
    text-align: center;
}

.button-two:hover {
    background-color: var(--secondaryGreen);
    color: var(--primaryWhite);
    transition: .2s ease-in-out;
}

.button-two:active {
    transform: scale(.9);
    transition: .1s ease-in-out;
}



/* button three */
.gray-button {
    background-color: var(--gray600);
    color: var(--primaryWhite);
    border-radius: .2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease-in-out;
    border: none;
    text-align: center;
}

.gray-button:hover {
    background-color: var(--gray900);
    color: var(--primaryWhite);
    transition: .2s ease-in-out;
}

.gray-button:active {
    transform: scale(.9);
    transition: .1s ease-in-out;
}

/* light gray */
.light-gray-button {
    background-color: var(--gray2);
    color: var(--primaryWhite);
    border-radius: .2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease-in-out;
    border: none;
    text-align: center;
}
.light-gray-button:hover {
    cursor:not-allowed;
}



/* modal button one */
.modal-btn-one {
    font-size: 1rem;
    border-radius: var(--circularBorderRadius);
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: .5rem;
    top: .5rem;
    /* font-family: var(--semiBold); */
    box-shadow: var(--shadow1);
    background-color: var(--gray600);
    color: white;
}

.transparent-modal-btn {
    font-size: 1rem;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: .5rem;
    top: .5rem;
    background-color: var(--transparent);
}

/* manage cta */
/* .manage-reservation-cta {
    width: 100%;
    border: 1px solid var(--green3);
    height: 2.5rem;
    border-radius: .3rem;
    color: var(--primaryWhite);
    display: flex;
    align-items: center;
    justify-content: center;
} */
/* end manage cta */


/* red-outline-btn */
.red-outline-btn {
    background-color: var(--transparent);
    color: var(--red1);
    border: none;
    border-radius: .3rem;
    height: 2rem;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-in-out;
    border: 1px solid var(--red1);
    text-align: center;
}
.red-outline-btn:hover {
    background-color: var(--red1);
    color: var(--primaryWhite);
    transition: .2s ease-in-out;
}
.red-outline-btn:active {
    transform: scale(.9);
    transition: .1s ease-in-out;
}