/* ------------------------------------- */
/* LOGIN PAGE STYLES START */
/* ------------------------------------- */

.login__section {
    width: 100%;
    height: 100vh;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.login__form__container {
    width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    gap: 1rem;
}

.login__form__container .logo__img {
    width: 200px;
}

.login__form__container .text__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login__form__container .text__container h1 {
    color: var(--clr-black);
    font-size: var(--size-3xl);
    font-weight: 500;
}

.login__form__container .text__container p {
    color: var(--clr-300-black);
    font-size: var(--size-sm);
    font-weight: 400;
}

.login__form__container .login__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    gap: 1rem;
}

.login__form .input__field__wrapper input {
    width: 100%;
    color: var(--clr-black);
    font-size: var(--size-base);
    font-weight: 400;
    border-radius: 0.4rem;
    border: 1px solid var(--clr-light-black-text);

    padding: 0.6rem 0.5rem;
}

.login__form .input__field__wrapper input::placeholder,
.login__form .input__field__wrapper select::placeholder {
    color: var(--clr-light-black-text);
}

.login__form .submit__btn__container {
    width: 100%;
}

.login__form .submit__btn__container button {
    width: 100%;
    color: var(--clr-white);
    background-color: var(--clr-blue);
    font-size: var(--size-base);
    font-weight: 400;
    border-radius: 0.4rem;

    padding: 0.6rem 0.5rem;

    transition: all 0.2s ease-in-out;
}

.login__form .submit__btn__container button:hover {
    opacity: 0.9;
}


/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------- */
/* LOGIN PAGE STYLES END */
/* ------------------------------------- */



/* ------------------------------------- */
/* DASHBOARD STYLES START */
/* ------------------------------------- */

.dashboard__grid {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 1rem;
}

.dashboard__grid .stats__grid {
    display: grid;

    gap: 1rem;
}

.dashboard__grid .stats__grid .grid__item {
    background-color: var(--clr-whitish-teal);
    border: 1px solid var(--clr-dark-teal);
    border-radius: 0.5rem;

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: start;

    gap: 0.4rem;
    padding: 1.5rem 1.2rem;
}

.stats__grid .grid__item .number {
    color: var(--clr-btn-background);
    font-size: var(--size-4xl);
    font-weight: 400;
}

.stats__grid .grid__item .title {
    color: var(--clr-dark-bg-green);
    font-size: var(--size-2xl);
    font-weight: 500;
}


/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .dashboard__grid .stats__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    
        gap: 1rem;
    }
    
}

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
@media (min-width: 1280px) {

    .dashboard__grid .stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------- */
/* DASHBOARD STYLES END */
/* ------------------------------------- */


/* ------------------------------------- */
/* TABLE CONTAINER STYLES START */
/* ------------------------------------- */

.table__container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    
    gap: 1rem
}

.table__container .table__row {
    border: 1px solid var(--clr-border-black);
    border-radius: 1rem;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: stretch;

    gap: 1rem;
    padding: 0.8rem 1rem;
}

.table__container .table__row .thumbnail {
    width: 175px;
    height: 120px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.table__container .table__row .content__container {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;

    gap: 0.8rem;
}

.table__container .table__row .content__container .text__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    gap: 0.35rem;
}

.table__container .table__row .content__container .title__wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;

    gap: 0.5rem;
}

.table__container .table__row .content__container .title {
    width: 100%;
    color: var(--clr-black);
    font-size: var(--size-lg);
    font-weight: 400;
}

.table__container .table__row .content__container .location {
    color: var(--clr-black);
    font-size: var(--size-sm);
    font-weight: 400;
}

.table__container .table__row .content__container .meta__data__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    gap: 0rem;

    padding: 0rem;
    margin: 0rem;
}

.table__container .table__row .content__container p {
    margin-top: -0.25rem;
    margin-top: 0rem;
}

.table__container .table__row .content__container .meta__data__wrapper .meta_data {
    color: var(--clr-black);
    font-size: var(--size-sm);
    font-weight: 400;
}

.table__container .table__row .content__container .bold__highlight {
    color: var(--clr-black);
    font-size: var(--size-sm);
    font-weight: 600;
}

.table__container .btn__container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    gap: 0.5rem;
}

.table__container .table__row .content__container .featured__hotel__btn {
    background-color: #ffdd32;
    background-color: #6aff1f;
    color: var(--clr-black);
    font-size: var(--size-xs);
    font-weight: 500;
    border-radius: 0.25rem;

    padding: 0.1rem 0.6rem;
}

/* ------------------------------------- */
/* TABLE CONTAINER STYLES END */
/* ------------------------------------- */

/* ------------------------------------------------ */
/* BOOKING REQUESTS TABLE SECTION START */
/* ------------------------------------------------ */

.bookings__table__section {
    overflow-x: scroll;
}

.bookings__table__section .bookings__table__container {
    width: 800px;
    color: var(--clr-333-black);
    background-color: #EDF2F7;
    border: 1px solid var(--clr-btn-background);
    border-radius: 0.5rem;
    overflow: hidden !important;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
}

.bookings__table__container .table__header {
    display: grid;
    grid-template-columns: repeat(4, 1fr) repeat(2, 0.5fr);
    grid-template-columns: repeat(4, 1fr) 0.5fr 0.25fr;
    justify-content: stretch;
    align-items: stretch;
    text-align: start;

    gap: 0.5rem;
}

.bookings__table__container .table__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.5fr 0.25fr;
    justify-content: stretch;
    align-items: stretch;
    text-align: start;

    gap: 0.5rem;
}

.bookings__table__container .table__header {
    background-color: var(--clr-dark-bg-green);
    border-radius: 0.4rem;

    padding: 1rem 1rem;
}

.bookings__table__container .table__header .head__data h2 {
    color: var(--clr-white);
    font-size: var(--size-lg-text);
    font-weight: 500;
}

.bookings__table__container .table__row {
    border: none;
    border-top: 1px solid var(--clr-a3a-black);

    padding: 0.8rem 1rem;
}

.bookings__table__container .table__row__start {
    border: none;
}

.bookings__table__container .table__row .row__data p {
    color: var(--clr-333-black);
    font-size: var(--size-sm);
    font-weight: 400;
}

.bookings__table__container .table__row .row__data__pair .value {
    color: var(--clr-dark-bg-green);
    color: #4F6169;
    font-weight: 700;
}

.bookings__table__container .table__row .row__data__order .value {
    font-weight: 700;
}

.bookings__table__container .table__row .row__data__order .value .blue__highlight {
    color: var(--clr-main-blue);
}

.bookings__table__container .table__row .row__data__order .value .red__highlight {
    color: var(--clr-main-red);
}

.bookings__table__container .table__row .row__data__sltp .value {
    color: var(--clr-333-black);
    font-weight: 400;
}

.bookings__table__container .table__row .row__data__sltp .value .blue__highlight {
    color: var(--clr-main-blue);
}

.bookings__table__container .table__row .row__data__sltp .value .red__highlight {
    color: var(--clr-main-red);
}

.bookings__table__container .table__row .row__data__profit .value .green__highlight {
    color: var(--clr-spc-green);
    color: #00D179;
    font-weight: 700;
}

.bookings__table__container .table__row .row__data__live {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    
    gap: 0.5rem;
}

.bookings__table__container .table__row .row__data__live .view__btn__solid {
    background-color: var(--clr-blue);
    color: var(--clr-white);
    font-size: var(--size-xs);
    font-weight: 500;
    border-radius: 0.2rem;

    padding: 0.4rem 0.8rem;

    transition: all 0.3s ease-in-out;
}

.bookings__table__container .table__row .row__data__live .view__btn__solid:hover {
    opacity: 0.9;
}

.bookings__table__container .table__row .row__data__live .edit__btn__solid {
    background-color: var(--clr-spc-green);
    color: var(--clr-black);
    font-size: var(--size-xs);
    font-weight: 500;
    border-radius: 0.2rem;

    padding: 0.4rem 0.8rem;
    transition: all 0.3s ease-in-out;
}

.bookings__table__container .table__row .row__data__live .edit__btn__solid:hover {
    opacity: 0.9;
}

.bookings__table__container .table__row .row__data__live .delete__btn__solid {
    background-color: var(--clr-btn-red-light);
    color: var(--clr-white);
    font-size: var(--size-xs);
    font-weight: 400;
    border-radius: 0.2rem;

    padding: 0.4rem 0.8rem;

    transition: all 0.3s ease-in-out;
}

.bookings__table__container .table__row .row__data__live .delete__btn__solid:hover {
    opacity: 0.9;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .bookings__table__section .bookings__table__container {
        width: 100%;
        color: var(--clr-a3a-black);
        color: var(--clr-333-black);
        background-color: #EDF2F7;
        border: 1px solid var(--clr-btn-background);
        border-radius: 0.5rem;
        overflow: auto;
    
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: stretch;
    
        /* gap: 1rem; */
    }
    
}

/* lg */
@media (min-width: 1024px) {

    .bookings__table__section {
        overflow-x: hidden;
    }
}

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */


/* ------------------------------------------------ */
/* BOOKING REQUESTS TABLE SECTION END */
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* CUSTOMER INQUIRIES SECTION START */
/* ------------------------------------------------ */

.inquiries__table__section {
    overflow-x: scroll;
}

.inquiries__table__section .inquiries__table__container {
    width: 800px;
    color: var(--clr-333-black);
    background-color: #EDF2F7;
    border: 1px solid var(--clr-btn-background);
    border-radius: 0.5rem;
    overflow: hidden !important;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
}

.inquiries__table__container .table__header {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.5fr;
    justify-content: stretch;
    align-items: stretch;
    text-align: start;

    gap: 0.5rem;
}

.inquiries__table__container .table__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.5fr;
    justify-content: stretch;
    align-items: stretch;
    text-align: start;

    gap: 0.5rem;
}

.inquiries__table__container .table__header {
    background-color: var(--clr-dark-bg-green);
    border-radius: 0.4rem;

    padding: 1rem 1rem;
}

.inquiries__table__container .table__header .head__data h2 {
    color: var(--clr-white);
    font-size: var(--size-lg-text);
    font-weight: 500;
}

.inquiries__table__container .table__row {
    border: none;
    border-top: 1px solid var(--clr-a3a-black);

    padding: 0.8rem 1rem;
}

.inquiries__table__container .table__row__start {
    border: none;
}

.inquiries__table__container .table__row .row__data p {
    color: var(--clr-333-black);
    font-size: var(--size-sm);
    font-weight: 400;
}

.inquiries__table__container .table__row .row__data__pair .value {
    color: var(--clr-dark-bg-green);
    color: #4F6169;
    font-weight: 700;
}

.inquiries__table__container .table__row .row__data__order .value {
    font-weight: 700;
}

.inquiries__table__container .table__row .row__data__order .value .blue__highlight {
    color: var(--clr-main-blue);
}

.inquiries__table__container .table__row .row__data__order .value .red__highlight {
    color: var(--clr-main-red);
}

.inquiries__table__container .table__row .row__data__sltp .value {
    color: var(--clr-333-black);
    font-weight: 400;
}

.inquiries__table__container .table__row .row__data__sltp .value .blue__highlight {
    color: var(--clr-main-blue);
}

.inquiries__table__container .table__row .row__data__sltp .value .red__highlight {
    color: var(--clr-main-red);
}

.inquiries__table__container .table__row .row__data__profit .value .green__highlight {
    color: var(--clr-spc-green);
    color: #00D179;
    font-weight: 700;
}

.inquiries__table__container .table__row .row__data__live {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    
    gap: 0.5rem;
}

.inquiries__table__container .table__row .row__data__live .view__btn__solid {
    background-color: var(--clr-blue);
    color: var(--clr-white);
    font-size: var(--size-xs);
    font-weight: 500;
    border-radius: 0.2rem;

    padding: 0.4rem 0.8rem;

    transition: all 0.3s ease-in-out;
}

.inquiries__table__container .table__row .row__data__live .view__btn__solid:hover {
    opacity: 0.9;
}

.inquiries__table__container .table__row .row__data__live .edit__btn__solid {
    background-color: var(--clr-spc-green);
    color: var(--clr-black);
    font-size: var(--size-xs);
    font-weight: 500;
    border-radius: 0.2rem;

    padding: 0.4rem 0.8rem;
    transition: all 0.3s ease-in-out;
}

.inquiries__table__container .table__row .row__data__live .edit__btn__solid:hover {
    opacity: 0.9;
}

.inquiries__table__container .table__row .row__data__live .delete__btn__solid {
    background-color: var(--clr-btn-red-light);
    color: var(--clr-white);
    font-size: var(--size-xs);
    font-weight: 400;
    border-radius: 0.2rem;

    padding: 0.4rem 0.8rem;

    transition: all 0.3s ease-in-out;
}

.inquiries__table__container .table__row .row__data__live .delete__btn__solid:hover {
    opacity: 0.9;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .inquiries__table__section .inquiries__table__container {
        width: 100%;
        color: var(--clr-a3a-black);
        color: var(--clr-333-black);
        background-color: #EDF2F7;
        border: 1px solid var(--clr-btn-background);
        border-radius: 0.5rem;
        overflow: auto;
    
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: stretch;
    
        /* gap: 1rem; */
    }
    
}

/* lg */
@media (min-width: 1024px) {

    .inquiries__table__section {
        overflow-x: hidden;
    }
}

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */


/* ------------------------------------------------ */
/* CUSTOMER INQUIRIES SECTION END */
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* EDIT PAGE STYLES START */
/* ------------------------------------------------ */

.form__container .form__element {
    /* width: 460px; */
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;

    gap: 2rem;
}

.form__container .form__element .form__input__wrapper {
    width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;

    gap: 1rem;
}

.form__container .form__element .input__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: start;

    gap: 0.2rem;
}

.form__container .form__element .input__wrapper label,
.form__container .form__element .input__wrapper .text {
    color: var(--clr-black);
    font-size: var(--size-text);
    font-weight: 400;
}

.form__container .form__element .input__wrapper input,
.form__container .form__element .input__wrapper select,
.form__container .form__element .input__wrapper textarea {
    /* width: 460px; */
    width: 100%;
    color: var(--clr-light-black-textt);
    font-size: var(--size-sm-text);
    font-weight: 400;
    background-color: var(--clr-background-black);
    border: none;
    border-radius: 0.5rem;

    padding: 0.6rem 0.8rem;
}

.form__container .form__element .input__wrapper .radio__input {
    width: 100%;
}

.form__container .form__element .input__wrapper .radio__selector__container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    gap: 1rem;
}

.form__container .form__element .input__wrapper .radio__selector__container .radio__selector__input {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    gap: 0.5rem;
}

.form__container .form__element .submit__btn__container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    gap: 0.5rem;
}

.form__container .form__element .submit__btn__container .submit__btn {
    width: 100%;
    color: var(--clr-black);
    background-color: var(--clr-spc-green);
    font-size: var(--size-text);
    font-weight: 500;
    border-radius: 0.5rem;

    padding: 0.5rem 1.2rem;
}

.form__container .form__element .grouped__input__fields {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;

    gap: 0.75rem;
    padding-top: 1rem;
}

.form__container .form__element  .sub__heading {
    color: var(--clr-black);
    font-size: var(--size-xl);
    font-weight: 500;

    margin-bottom: -0.75rem;
}

.form__container .form__element  .sub__heading.mg-tp {
    padding-top: 1rem;
}

.form__container .form__element .grouped__input__fields .sub__heading__2 {
    color: var(--clr-light-black-text);
    font-size: var(--size-lg);
    font-weight: 600;

    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
}

.form__container .form__element .dynamic__input__fields__container .input__wrapper label {
    color: var(--clr-black);
    font-size: var(--size-sm);
}

.form__container .form__element .grouped__input__fields .dynamic__form__fields__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;

    gap: 0.75rem;
}

.form__container .form__element .grouped__input__fields .add__remove__btn__container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;

    gap: 1rem;
}

.grouped__input__fields .add__remove__btn__container .add__form__field__btn,
.grouped__input__fields .add__remove__btn__container .remove__form__field__btn {
    font-size: var(--size-base);
    font-weight: 500;
    border: none;
    border-radius: 0.4rem;

    padding: 0.35rem 1rem 0.45rem 1rem;

    transition: all 0.2s ease-in-out;
}

.grouped__input__fields .add__remove__btn__container .add__form__field__btn:hover,
.grouped__input__fields .add__remove__btn__container .remove__form__field__btn:hover {
    opacity: 0.9;
}

.grouped__input__fields .add__remove__btn__container .add__form__field__btn {
    background-color: var(--clr-blue);
    color: var(--clr-white);
}

.grouped__input__fields .add__remove__btn__container .remove__form__field__btn {
    background-color: var(--clr-btn-red-light);
    color: var(--clr-white);
}


.table__input__row {
    display: grid;

    gap: 1rem;
}

.table__input__column {
    display: flex;
    flex-direction: column;
}

.table__input__column label {
    color: var(--clr-title-black);
    color: #495057;
    font-size: var(--size-sm);
    font-weight: 500;
}

.table__input__column input,
.table__input__column select {
    width: 100%;
    color: var(--clr-light-black-textt);
    font-size: var(--size-sm-text);
    font-weight: 400;
    background-color: var(--clr-background-black);
    border: none;
    border-radius: 0.5rem;

    padding: 0.6rem 0.8rem;
}


/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .table__input__row {
        display: grid;
        grid-template-columns: repeat(2, 1fr) 0.5fr;
    
        gap: 1rem;
    }

    .form__container .form__element .submit__btn__container {
        width: 460px;
    }
}

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */


/* ------------------------------------------------ */
/* EDIT PAGE STYLES END */
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* INQUIRIES VIEW PAGE STYLES START */
/* ------------------------------------------------ */

.inquiry__view__container {
    width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    gap: 1rem;
}

.inquiry__view__container .inquirey__block__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    gap: 0.5rem;
}

.inquirey__block__wrapper .title {
    color: var(--clr-title-blackk);
    font-size: var(--size-base);
    font-weight: 500;
}

.inquirey__block__wrapper .text {
    width: 100%;
    color: #343a40;
    font-size: var(--size-sm);
    font-weight: 400;

    background-color: var(--clr-background-black);
    border-radius: 0.5rem;

    padding: 0.4rem 0.75rem;
}

.inquiry__view__container form {
    width: 100%;
}

.inquiry__view__container form button{
    width: 100%;

    padding: 0.65rem;
    margin-top: 2rem;
}

.inquirey__block__wrapper select {
    width: 100%;
    color: #343a40;
    font-size: var(--size-sm);
    font-weight: 400;

    background-color: var(--clr-background-black);
    border-radius: 0.5rem;

    padding: 0.4rem 0.75rem;
}


/* ------------------------------------------------ */
/* INQUIRIES VIEW PAGE STYLES END */
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* PAGINETIONS STYLES START */
/* ------------------------------------------------ */

.pagination__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    gap: 0.5rem;
    margin-top: 1.5rem;
}

.pagination__wrapper .pagination__container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    gap: 0.5rem;
}

.pagination__wrapper .pagination__container .paginations__num__btn {
    width: 35px;
    height: 30px;
    color: var(--clr-black);
    font-size: var(--size-sm-text);
    font-weight: 400;
    background-color: var(--clr-white);
    border: 1px solid var(--clr-light-black-textt);
    border-radius: 0.5rem;
}

.pagination__wrapper .pagination__container .active__page__num {
    background-color: var(--clr-spc-green);
}

/* ------------------------------------------------ */
/* PAGINETIONS STYLES END */
/* ------------------------------------------------ */

/* ------------------------------------------------ */
/* 404 ERROR PAGE STYLES START */
/* ------------------------------------------------ */

.error__message__container {
    width: 100%;
    height: 100vh;
    background-color: var(--clr-background-green);

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
}

.error__message__container .error__message__grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    gap: 1rem;
    padding: 0rem 0.5rem;
    margin-top: 5rem;
}

.error__message__container .error__message__grid .text__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error__message__container .error__message__grid .title {
    color: var(--clr-spc-green);
    font-size: var(--size-12xl);
    font-weight: 500;
} 

.error__message__container .error__message__grid .text {
    width: 100%;
    color: var(--clr-white);
    font-size: var(--size-lg);
    font-weight: 300;
} 

.error__message__container .error__message__grid .error__page__login__btn {
    width: 100%;
    color: #85FF0D;
    background-color: var(--clr-dark-bg-green);
    font-size: var(--size-text);
    font-weight: 400;
    border: 1px solid #85FF0D;
    border-radius: 0.5rem;
    transition: all 0.3s ease-in-out;

    padding: 0.6rem 1rem;
}

.error__message__container .error__message__grid .error__page__login__btn:hover {
    color: var(--clr-black);
    background-color: var(--clr-white);
    border-color: var(--clr-white);
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .error__message__container .error__message__grid .text {
        width: 400px;
    } 
}

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */


/* ------------------------------------------------ */
/* 404 ERROR PAGE STYLES END */
/* ------------------------------------------------ */