body {
    background-color: #282c34;
    color: #abb2bf;
    margin: 0 !important;
    display: grid !important;
    font-family: Arial, serif;
}

.display {
    display: block;
}

.hide {
    display: none;
}

button {
    font-weight: bold;
    font-family: Arial, serif;
}

/* SCOREBOARD */
.scoreboard {
    padding: 20px;
    /*border-radius: 10px;*/
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);*/
}

.title {
    font-size: 32px;
    color: #fff;
    text-align: center;
    margin-top: 0px;
}

table {
    border-collapse: collapse;
    width: 100%;
    color: rgb(51, 51, 51);
}

.m-t-30 {
    margin-top: 30px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.flex {
    display: flex;
}

.published-map-header {
    background-color: white;
    color: black;
    font-size: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 600;
}

.rate-map-text {
    margin-top: 25px !important;
    margin-bottom: -10px !important;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    color: white;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
}

.min-max-width-custom-table-spans {
    min-width: 174px;
    max-width: 174px;
    text-align: center;
    justify-self: center;
}

.no-maps-content-wrapper {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
}

.no-maps-create-button {
    width: 200px !important;
    margin-top: -3px !important;
}

.no-maps-message {
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
    justify-content: center;
}

.min-max-width-custom-table-spans-my-maps {
    min-width: 184px;
    max-width: 184px;
    text-align: center;
    justify-self: center;
}

.pagination-number-active {
    background-color: #7abe7a;
}

.pagination-number {
    display: inline-flex;
    cursor: pointer;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
}

.pagination-content {
    text-align: center;
    margin-top: -15px;
}

.my-maps-min-size {
    min-height: 355px;
    max-height: 355px;
}

.published-maps-min-size {
    min-height: 530px;
    max-height: 530px;
}

.my-maps-content {
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-y: auto;
    overflow-x: hidden;

    hr {
        height: 1px;
    }

    .map-single-row {
        display: flex;
        align-items: center;
        margin: 5px;

        .map-name-span {
            min-width: 385px;
            max-width: 385px;
        }

        .maps-buttons {
            cursor: pointer;
            border-radius: 5px;
            min-width: 110px;
            min-height: 35px;
        }

        .published-map {
            padding-top: 6px;
            height: 27px;
            text-align: center;
            background-color: rgba(109, 178, 109, 0.72); /* Green color for active tab */
            border-radius: 10px;
            min-width: 110px;
            max-width: 110px;
            color: white;
        }
    }
}

th, td {
    padding: 10px;
    text-align: left;
    /*border: 1px solid #dddddd;*/
}

th:first-child {
    border-top-left-radius: 10px;
}

th:last-child {
    border-top-right-radius: 10px;
}

tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

th {
    background-color: #f2f2f2;
}

tr {
    background-color: #f2f2f2;
}

/* SCOREBOARD END*/
/* LOGIN-REGISTER TABS */
.toggle-tab-container {
    display: flex;
    width: 100%;
}

/* Button styles */
.toggle-tab {
    width: 50%;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.general-submit-button {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: #282C34FF;
    width: 100%;
    font-weight: bold;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}

.general-submit-button:disabled {
    cursor: not-allowed;
    background-color: #7a7777;
}

/* Login tab styles */
.login-tab {
    background-color: #282c34; /* Gold color */
    border-radius: 5px;
}

/* Register tab styles */
.register-tab {
    background-color: #282c34; /* Orange-Red color */
    border-radius: 5px;
}

/* Active tab styles */
.active {
    background-color: rgba(109, 178, 109, 0.72); /* Green color for active tab */
}

.input-container {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    width: 100%;
    height: 100%;
}

.input-container input {
    margin: 5px;
    padding: 5px;
    width: 96%;
    max-width: 300px; /* Optional: Limit maximum width of inputs */
    box-sizing: border-box; /* Ensure padding is included in the width */
    border-radius: 5px;
    color: #282c34;
    font-weight: 500;
}

.register-login-input {
    width: 97% !important;
    max-width: unset !important;
}

/* LOGIN-REGISTER TABS END */
/* CHAT */
.chat-wrapper {
    position: absolute;
    padding: 10px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(51, 51, 51);
    border: 2px solid rgb(255, 255, 255);
    border-radius: 10px;
    overflow-wrap: break-word;
    /* Style the scrollbar */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: gray lightgray; /* For Firefox */
    /* Additiona styling for WebKit browsers (Chrome, Safari, Edge) */
    scrollbar-width: thin;
    scrollbar-color: gray lightgray;
    /* Additional styling for Internet Explorer and Edge */
    -ms-overflow-style: none; /* Hide the scrollbar in IE and Edge */
}

.chatHtmlEl::-webkit-scrollbar-thumb {
    background-color: lightgray;
    border-radius: 5px;
}

/* Style the scrollbar track for WebKit browsers */
.chatHtmlEl::-webkit-scrollbar-track {
    background-color: gray;
}

.chat-wrapper p {
    font-weight: 600;
}

.chat-wrapper span {
    color: white;
    font-weight: 600;
}

/* CHAT END */

/* SINGLE ROOM */
.room-users {
    display: flex;
    width: 100%;
    font-size: 22px;
    margin: 3px;
    font-weight: 700;
}

.room-users input {
    width: unset;
    cursor: pointer;
    font-size: 24px;
}

.ready-user {
    min-width: 118px;
    margin-left: 20px;
    color: #83c483eb;
}

.not-ready-user {
    min-width: 118px;
    margin-left: 20px;
    color: #d44343e0;
}

.ready-checkbox {
    font-size: 25px;
    cursor: pointer;
    margin-top: -5px;
    color: #83c483eb;
}

.not-ready-checkbox {
    font-size: 25px;
    cursor: pointer;
    margin-top: -5px;
    color: #d44343e0;
}

.leave-room-button {
}

.modal-content-single-room {
    height: 94%;
    display: flex;
    align-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    overflow-y: unset !important;
}

.prep-time-counter {
    font-size: 32px;
}

/* SINGLE ROOM END */
/* GENERAL */
.error-message {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
}

.fade-in {
    animation: fadeInAnimation 1s ease-in forwards;
    opacity: 0;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*EXTERNAL LINKS*/
.external-link {
    position: absolute;
    transform: translate(-50%, 0%);
    bottom: 1px;
    left: 50%;
    background-color: #333333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px !important;
}

.external-link a {
    color: #9ae19a;
}

.external-link p {
    margin-top: 0px;
    margin-bottom: 0px;
}

/*END EXTERNAL LINKS*/

/*TOASTER*/
#toaster {
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(28, 133, 46, 0.92);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    display: block;
    transition: transform 0.3s ease-out; /* Add transition for smooth animation */
}

.hidden {
    display: none !important;
}

/*SELECT CHARACTER*/
.characters-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .character-arrows {
        color: white;
        font-size: 36px;
        cursor: pointer;
    }
}

/*END SELECT CHARACTER*/
/*Mobile css*/
/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {*/
/*    html {*/
/*        transform: rotate(-90deg);*/
/*        transform-origin: left top;*/
/*        width: 100vh;*/
/*        height: 100vw;*/
/*        overflow-x: hidden;*/
/*        position: absolute;*/
/*        top: 100%;*/
/*        left: 0;*/
/*    }*/
/*}*/
/*End of Mobile css*/