html,
body {
    height: 100%; /* Set the height of the html and body elements to 100% */
    width: 100%; /* Set the width of the html and body elements to 100% */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    background-color: var(--background-colour);
    font-family: var(--main-font-face);
    font-weight: 350;
}

.modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--translucent);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    box-sizing: border-box;

}

.modal-content{
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background:var(--background-colour);
    color: black;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-container{
    position: relative;
    width: 100%;
}

/* Close button styles */
.close {
    position: absolute; /* Add position relative for positioning the circle */
    color: gray;
    top: 8px;
    font-size: 16px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close.right {
    right: 0px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Circle styles */
.close::before {
    content: ''; /* Empty content to create the circle */
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%); /* Move circle back to center */
    width: 32px; /* Adjust the size of the circle */
    height: 32px; /* Adjust the size of the circle */
    border-radius: 50%; /* Makes it a circle */
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.3s ease; /* Smooth transition */
}

.close:hover::before,
.close:focus::before {
    background-color: rgba(0, 0, 0, 0.1); /* Change the background color on hover */
}

/* button-action*/
.button-action {
    background: var( --game-button-background);
    color: white;
    padding: 10px 5px; /* Make the button taller */
    border: none;
    border-radius: var(--game-button-border-radius);
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
    width: 120px;
    height: 60px;
}

.button-action-outline {
    color: white;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 5px; /* Make the button taller */
    border: 2px solid #ff7659;
    border-radius: var(--game-button-border-radius);
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
    width: 120px;
    height: 60px;
}

.button-action:disabled {
    opacity: 0.9; /* You can adjust the opacity to your preference */
    cursor: not-allowed;
    background: linear-gradient(180deg, #cccccc, #888888); /* Gray gradient */
}

.button-inline {
    background: var(--accent-terracotta);
    color: white;
    padding: 2px; /* Make the button taller */
    border: none;
    border-radius: 50%; /* small square icon button - circular, matching Material's IconButton */
    cursor: pointer;
    font-size: 12px;
    margin-left: 2px;
    width: 28px;
    height: 28px;

}

.button-inline:disabled {
    opacity: 0.9; /* You can adjust the opacity to your preference */
    cursor: not-allowed;
    background: linear-gradient(180deg, #cccccc, #888888); /* Gray gradient */

}

.button-action-sm {
    background: var( --small-button-color);
    color: white;
    padding: 4px; /* Make the button taller */
    border-top: #ccc;
    border-left: #ccc;
    border-right: #888888;
    border-bottom: #888888;
    border-radius: var(--game-button-border-radius);
    cursor: pointer;
    font-size: 16px;
    margin-right: 8px;
    width: 72px;
    height: 32px;
    text-align: center;
}

/* Chat */
.chat-button-action {
    background: var(--game-button-background);
    color: white;
    padding: 10px 5px; /* Make the button taller */
    border: none;
    border-radius: var(--game-button-border-radius);
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
}

.chat-text-input[type="text"] {
    flex-grow: 1;
    padding: 15px 5px; /* Make the button taller */
    background-color:white;
    color: black;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
}

.chat-input input {
    flex-basis: 70%;
}

.chat-input button {
    flex-basis: 30%;
}

#player-icons {
    display: flex;
    align-items: center;
    bottom: 8px;
    justify-content: center;
    margin-top: 10px;
}

.player-icon {
    width: 50px;
    height: 50px;
    margin: 0 5px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* Style for the active (selected) icon */
.player-icon.active {
    border: 2px solid #007bff;
    /* Add a border to the active icon */
}

/*Chat Messages*/
.chat-message-container {
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 8px;
    width: 94%;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
  }
  
.darker {
    border-color: #ccc;
    background-color: #ddd;
}
  

.chat-container {
    padding: 10px;
    overflow-y: auto;
    display: flex; /* Show active tab content */
    flex-direction: column;
    height: 100%;
}

.chat-message-container::after {
    content: "";
    clear: both;
    display: table;
}

.chat-message-container img {
    max-width: 56px;
    width: 100%;
    margin-left: 8px;
    margin-right: 8px;
    border: #888888;
    border-radius: 50%;
}

.icon-strip {
    margin-bottom: 16px;
}

.chat-box {
    flex: 1;
    width: calc(100%-16px);
    height: 500px;
    padding: 10px;
    overflow-y: auto;
    border: 2px, solid rgb(44, 44, 44);
    border-radius: 8px;
    background-color: white;
}

.chat-text {
    color: black;
    font-family: var(--main-font-face);
    font-size: 16px;
    margin-left: 8px;
    margin-right: 8px;
    width: calc(100% - 54px);
}

.chat-text-red {
    color: red;
}

.chat-text-bold{
    font-weight: bold;
}

.chat-spooky {
    font-family: var(--heading-font-face);
}


/* Throbbers */
.throbber-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: .2em
}

.throbber-border-lg {
    width: 4rem;
    height: 4rem;
    border-width: .2em
}

@-webkit-keyframes throbber{
    0%  {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        opacity:1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes throbber{
    0%  {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.throbber{
    display:inline-block;
    position:realtive;
    top: 8px;
    right: 8px;
    width:2rem;
    height:2rem;
    vertical-align:-.125em;
    background-color: var(--small-button-color);
    border-radius:50%;
    opacity:0;
    -webkit-animation: .75s linear infinite throbber;
    animation: .75s linear infinite throbber;
}

.throbber-sm{
    width: 1rem;
    height: 1rem;
}

.throbber-lg{
    width: 4rem;
    height: 4rem;
}

@media (prefers-reduced-motion:reduce){
    .throbber-border,
    .throbber {
        -webkit-animation-duration:1.5s;
        animation-duration:1.5s
    }
}

.oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #888;
    margin: 16px 0;
}
.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
}
.oauth-divider:not(:empty)::before {
    margin-right: 0.75em;
}
.oauth-divider:not(:empty)::after {
    margin-left: 0.75em;
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}