:root {
    /* Theme */
    --color-surface-primary: #142A36;
    --color-surface-main: #FFFFFF;

    --color-text-on-primary: #FFFFFF;
    --color-text-on-main: #515151;
    --color-text-on-main-a50: #51515188;

    --color-btn-primary: #A6845B;
    --color-text-on-btn-primary: #ffffff;

    --color-link: #FFFFFF;
    --color-link-surface-active: #A5845B;
    --color-link-surface-active-a15: #A5845B26;
    --color-link-on-link-active: #ffffff;

    --color-surface-warning: #f1b0b7;
    --color-surface-warning-hover: #f8d7da;

    /* Overrid Bootstrap */
    --bs-heading-color: var(--color-text-on-main);

    .nav-link {
        --bs-nav-link-color: var(--color-link);
    }

    .nav-link:focus, .nav-link:hover {
        color: var(--color-link);
    }

    .bg-dark {
        background-color: var(--color-surface-primary) !important;
    }

    .btn-primary {
        --bs-btn-color: var(--color-text-on-btn-primary);
        --bs-btn-bg: var(--color-btn-primary);
        --bs-btn-border-color: var(--color-btn-primary);
    }

    .table {
        --bs-table-bg: var(--color-surface-main);
        --bs-table-color-state: var(--color-text-on-main);
    }

    .table thead{
        --bs-table-bg: #9FA0AE;
        --bs-table-color-state: var(--color-text-on-primary);
        border:none;
    }
    .sandard-header {
        background-color: #9FA0AE;
        color: var(--color-text-on-primary);
    }
    .text-muted {
        color: var(--color-text-on-main-a50) !important;
    }
    .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        --bs-gutter-x: 1rem;
    }

    @media (min-width: 576px) {
        .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
            --bs-gutter-x: 1.5rem;
        }
    }
}

body {
    color: #ffffff;
    min-height: 100vh;
}

.cursor-pointer { cursor: pointer; }

.auth-content { 
    /* the later number (60px) is nav-bar height */
    min-height: calc(100vh - 60px);
    color: var(--color-text-on-main);
}

.auth-content p { 
    color: var(--color-text-on-main);
}

.topBtn {
    width: 80%;
    max-width: 300px;
}
.hoops-nav {
    background-color: white;
    padding: 0;
    height: 60px;
    position: relative;
    border-top: solid 14px #212020;
}
.hoops-nav .navbar-brand {
    padding: 0 0 0 250px;
    margin: 0;
    display: block;
    /* position: absolute; */
    left:5px;
    top:3px;
    width:73px;
    /* height: 55px; */
    color: #7B7B7B;
    text-align: left!important;
}
.navbar-brand img {
    width: 73px;
}
.hoops-title {
    font-size: 1em;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 60px;
    color: #ffffff;
}
.register {
    width: 100%;
    margin: 60px auto 0;
}
.register label {
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
}
.register input.form-control {
    width: 100%;
    height: 39px;
    border-radius: 3px;
    border: none;
    line-height: 39px;
    font-size: 16px;
    padding: 0 20px;
}
.register select {
    font-size: 0.9em;
}
.register .register-submit, .nav-btn {
    display: block;
    width: 300px;
    height: 40px;
    margin: 60px auto 0;
    background-color: #A6845B;
    color: white;
    font-size: 16px;
    border: none;
}
.register .register-submit:hover, .nav-btn:hover {
    background-color: #A6845B;
    color: #ffffff;
}
.register ::placeholder {
    color: #8f8f8f;
    font-size: 0.9em;
}
#wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: 4em;
    position: relative;
}
#wrapper::before {
    content: '';
    display: block;
    width: calc(100% - 480px) ;
    height: 100%;
    background: url(/img/bg_login.jpg) no-repeat left center / cover;
    position: absolute;
    top: 0;
    left: 480px;
}
.bgfix{
    position: fixed;
    top: 0px;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #212121, #44423E);
    background-size: cover;
    background-position: center;
    z-index: -1;
 }
.page-wrapper {
    width: 100%;
    margin: 0 auto;
}
.pagetitle {
    font-size: 0;
    display: block;
    aspect-ratio: 22 / 13;
    width: 198px;
    margin: 0 auto;
    background: url(/img/logo.png) center / contain;
}
.qr {
    width: 90%;
    height:auto;
    aspect-ratio: 1/1;
    margin: 2em auto;
    text-align: center;
    position: relative;
}
.qr svg {
    width: 100%;
    height:auto;
    aspect-ratio: 1/1;
}
.qr_alt {
    width: 100%;
    height:auto;
    aspect-ratio: 1/1;
    text-align: center;
    background: #2E455A;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
}
.qr_alt_txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
}
#qr_svg {
    width: 100%;
    height:auto;
    aspect-ratio: 1/1;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.footnav {
    width: 100%;
    position: absolute;
    bottom: 5%;
    left: 0;
    padding: 0 10%;
    padding-top: 1em;
}
.spacer {
    height: 100px;
}
.member-card-wrap {
    width: 100%;
    max-width: 640px;
}
.member-card .card-title {
    font-size: 0.9em;
    color: #888;
}
.member-card .card-text {
    font-size: 1em;
    color: #000;
}
.desc {
    font-size: 0.9em;
    color: #fff;
    text-align: center;
}
p {
    font-size: 0.9em;
    color: #fff;
}
.pp-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 1em 1em 1.5em;
    color: #e3e5e7;
}
.pp-wrap a, .pp-wrap a:visited {
    text-decoration: none;
    color: #5996cf;
}
.pp-wrap a:hover {
    color: #4a8ac2;
}
.privacy-wrap {
    margin-bottom: 40px;;
}
.privacy-wrap p {
    font-size: 0.8em;
    color: #fff;
}
.privacy-wrap h4 {
    font-size: 1em;
    color: #fff;
}
.privacy-wrap ul li {
    font-size: 0.8em;
    color: #fff;
}

.btn-outline-hoops {
    --bs-btn-color: #5996CF;
    --bs-btn-border-color: #5996CF;
    --bs-btn-hover-color: #042433;
    --bs-btn-hover-bg: #5996CF;
    --bs-btn-hover-border-color: #5996CF;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #5996CF;
    --bs-btn-active-border-color: #5996CF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #5996CF;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #5996CF;
    --bs-gradient: none;
    width: 84px;
    height: 30px;
    border-radius: 8px;
    line-height: 1.2;
    font-size: 0.9em;
}
.memberlist {
    min-height:50vh;
}

.nav-link.active, .nav-link:hover.active:hover, button.nav-link.active:hover {
    background-color: var(--color-link-surface-active) !important;
    color: var(--color-link-on-link-active);
    font-weight: 600;
}

.nav-link:hover,
button.nav-link:hover {
    background-color: var(--color-link-surface-active-a15) !important;
}

.sx__month-agenda-events__empty {
    margin-bottom: 3rem;
}

/* Table */
.table-striped tbody tr.table-red > td {
    background-color: var(--color-surface-warning) !important; 
}
.table-hover tbody tr.table-red:hover > td {
    background-color: var(--color-surface-warning-hover) !important;
}
.table-hover tbody tr:hover > td {
    background-color: rgba(0, 0, 0, 0.075) !important;
}

/* Pagination */
.pagination-theme .page-link:hover {
    color: var(--color-text-on-main);
    background-color: var(--color-link-surface-active-a15);
    border-color: var(--color-link-surface-active-a15);
}
.pagination-theme .page-item.active .page-link {
    background-color: var(--color-btn-primary); 
    border-color: var(--color-btn-primary);
    color: var(--color-text-on-btn-primary);
}
.pagination-theme .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(230, 57, 70, 0.25);
}

@media (min-width: 1044px) {
    .sx-calendar-user  {
        height: 70vh; 
    }
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.loader {
  display: none; /* Hidden by default */
  font-size: 4px; /* Adjusted size slightly for the navbar */
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
  margin-left: 20px; /* Spacing from the buttons */
  vertical-align: middle;
}

.btn-primary:disabled {
    background-color: #adb5bd; 
    border-color: #adb5bd;
    color: #fff;
}

.badge-invert {
    background-color: #fff;
    color: #000;
}

@keyframes mulShdSpin {
  /* Note: Changed #ffffff (white) to #555 (dark gray) for visibility on white background */
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #555, 1.8em -1.8em 0 0em rgba(85,85,85, 0.2), 2.5em 0em 0 0em rgba(85,85,85, 0.2), 1.75em 1.75em 0 0em rgba(85,85,85, 0.2), 0em 2.5em 0 0em rgba(85,85,85, 0.2), -1.8em 1.8em 0 0em rgba(85,85,85, 0.2), -2.6em 0em 0 0em rgba(85,85,85, 0.5), -1.8em -1.8em 0 0em rgba(85,85,85, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(85,85,85, 0.7), 1.8em -1.8em 0 0em #555, 2.5em 0em 0 0em rgba(85,85,85, 0.2), 1.75em 1.75em 0 0em rgba(85,85,85, 0.2), 0em 2.5em 0 0em rgba(85,85,85, 0.2), -1.8em 1.8em 0 0em rgba(85,85,85, 0.2), -2.6em 0em 0 0em rgba(85,85,85, 0.2), -1.8em -1.8em 0 0em rgba(85,85,85, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(85,85,85, 0.5), 1.8em -1.8em 0 0em rgba(85,85,85, 0.7), 2.5em 0em 0 0em #555, 1.75em 1.75em 0 0em rgba(85,85,85, 0.2), 0em 2.5em 0 0em rgba(85,85,85, 0.2), -1.8em 1.8em 0 0em rgba(85,85,85, 0.2), -2.6em 0em 0 0em rgba(85,85,85, 0.2), -1.8em -1.8em 0 0em rgba(85,85,85, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(85,85,85, 0.2), 1.8em -1.8em 0 0em rgba(85,85,85, 0.5), 2.5em 0em 0 0em rgba(85,85,85, 0.7), 1.75em 1.75em 0 0em #555, 0em 2.5em 0 0em rgba(85,85,85, 0.2), -1.8em 1.8em 0 0em rgba(85,85,85, 0.2), -2.6em 0em 0 0em rgba(85,85,85, 0.2), -1.8em -1.8em 0 0em rgba(85,85,85, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(85,85,85, 0.2), 1.8em -1.8em 0 0em rgba(85,85,85, 0.2), 2.5em 0em 0 0em rgba(85,85,85, 0.5), 1.75em 1.75em 0 0em rgba(85,85,85, 0.7), 0em 2.5em 0 0em #555, -1.8em 1.8em 0 0em rgba(85,85,85, 0.2), -2.6em 0em 0 0em rgba(85,85,85, 0.2), -1.8em -1.8em 0 0em rgba(85,85,85, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(85,85,85, 0.2), 1.8em -1.8em 0 0em rgba(85,85,85, 0.2), 2.5em 0em 0 0em rgba(85,85,85, 0.2), 1.75em 1.75em 0 0em rgba(85,85,85, 0.5), 0em 2.5em 0 0em rgba(85,85,85, 0.7), -1.8em 1.8em 0 0em #555, -2.6em 0em 0 0em rgba(85,85,85, 0.2), -1.8em -1.8em 0 0em rgba(85,85,85, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(85,85,85, 0.2), 1.8em -1.8em 0 0em rgba(85,85,85, 0.2), 2.5em 0em 0 0em rgba(85,85,85, 0.2), 1.75em 1.75em 0 0em rgba(85,85,85, 0.2), 0em 2.5em 0 0em rgba(85,85,85, 0.5), -1.8em 1.8em 0 0em rgba(85,85,85, 0.7), -2.6em 0em 0 0em #555, -1.8em -1.8em 0 0em rgba(85,85,85, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(85,85,85, 0.2), 1.8em -1.8em 0 0em rgba(85,85,85, 0.2), 2.5em 0em 0 0em rgba(85,85,85, 0.2), 1.75em 1.75em 0 0em rgba(85,85,85, 0.2), 0em 2.5em 0 0em rgba(85,85,85, 0.2), -1.8em 1.8em 0 0em rgba(85,85,85, 0.5), -2.6em 0em 0 0em rgba(85,85,85, 0.7), -1.8em -1.8em 0 0em #555;
  }
}

/* addition */
.navbar-expand-lg {
    display: none;
}
main.py-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 480px;
    position: relative;
    translate: 0 -23%;
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.jumbotron {
    width: 341px;
}
h2.pagetitle + p {
    display: none;
}
label[for="email"] {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
}
.register br {
    display: none;
}
.logo-login_sp {
    display: none;
}
aside.sidebar {
    width: 200px;
    height: 100%;
    padding: 0!important;
    background: #212020;
    position: fixed;
    top: 0;
    left: 0;
}
aside.sidebar::before {
    content: '';
    display: block;
    width: 134px;
    height: 55px;
    margin: 21px auto 13px;
    background: url(/img/logo.png) no-repeat center / contain;
}
.text-light, .text-light .link-light {
    color: #7B7B7B!important;
}
.text-light .link-light:hover {
    color: #212020!important;
}
h3.mb-4 {
    display: none;
}
.container-fluid > div > .border-end {
    border-right: none !important;
}
.container .chat-container {
    max-width: 1140px;
    height: 85vh;
}
.container .chat-container .card {
    display: block;
    height: 100%;
    border-radius: 0;
    background: url(/img/bg_chat.png) no-repeat center / cover;
}
.container .chat-container .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.container .chat-container .text-muted {
    display: none;
}
.container .chat-container .chat-input-container {
    padding-bottom: 0;
}
.container .chat-container .chat-messages {
    flex: 1;
    background: none;
    border: none;
}
.container .chat-container .message.bubble:not(.user) {
    padding: 20px 30px;
    border-radius: 0 30px 30px 30px;
    background-color: white;
    border: solid 1px #E4E4E4;
    box-sizing: content-box;
}
.container .chat-container .message.bubble.user {
    padding: 20px 30px;
    border-radius: 30px 0 30px 30px;
    background-color: #FFFAE3;
    border: solid 1px #CEC6B7;
    color: #212529;
    text-align: left;
    box-sizing: content-box;
}
.container .chat-container .message-item {
    gap: 30px;
}
.container .chat-container .message-item.user .msg-stack-name {
    display: none;
}
.container .chat-container .avatar {
    flex: 0 0 50px;
    height: 50px;
}
.container .chat-container .send-btn {
    width: 150px;
    height: 38px;
    border-radius: 20px;
    border: none;
}
.container .chat-container .send-btn:hover {
    background-color: #A6845B;
    border: none;
}
.container .chat-container .file-attach-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: url(/img/chat_clip.png) no-repeat center / contain;
}
.container .chat-container .file-attach-btn:hover {
    background-color: transparent;
}
.container .chat-container .file-attach-btn img {
    display: none;
}
.container .chat-container .chat-input {
    border: solid 1px #828282;
}

/* sp login */
@media (max-width: 999px) {
    #wrapper {
        background: rgba(40, 20, 10, .4);
        position: relative;
    }
    #wrapper::before {
        width: 100%;
        opacity: .2;
        left: 0;
    }
    main.py-4 {
        width: 90%;
        max-width: 293px;
        min-width: auto;
        margin: 0 auto;
    }
    .jumbotron {
        width: 100%;
    }
    .pagetitle {
        width: 137px;
    }
    .register {
        margin-top: 50px;
    }
    .register .register-submit, .nav-btn {
        margin-top: 50px;
    }
}

/* sp */
@media (max-width: 991px) {
    .hoops-nav {
        height: 100px;
        margin-bottom: 50px;
        background: #212020;
        border: none;
    }
    .hoops-nav .container-fluid {
        margin: auto auto 9px;
    }
    .hoops-nav .container-fluid::before {
        content: '';
        display: block;
        width: 88px;
        height: 36px;
        background: url(/img/logo.png) no-repeat center / contain;
    }
    .hoops-nav .navbar-brand {
        width: 100%;
        height: 50px;
        padding: 10px 0 10px 16px;
        position: absolute;
        top: 100px;
        left: 0;
    }
    .hoops-nav button.btn-outline-light {
        border: none;
    }
    .hoops-nav button.btn-outline-light:hover {
        background-color: transparent;
    }
    .offcanvas.offcanvas-end {
        background-color: #212020;
        border: none;
    }
    .offcanvas-header {
        height: 100px;
        padding: 0 0 10px;
        justify-content: space-between !important;
        align-items: flex-end;
    }
    .offcanvas-header::before {
        content: '';
        display: block;
        width: 88px;
        height: 36px;
        background: url(/img/logo.png) no-repeat center / contain;
    }
    .offcanvas-header .btn-close {
        width: 24px;
        height: 24px;
        margin: 0 8px 0 0;
        padding: 6px 12px;
        filter: invert(1);
    }
    .offcanvas-body {
        padding: 0;
    }
    .offcanvas-body .flex-column {
        border-top: solid 1px #565151;
        gap: 0 !important;
    }
    .offcanvas-body .nav-link {
        padding: 13px 20px;
        border-bottom: solid 1px #565151;
        text-align: right !important;
    }
    .offcanvas-body .flex-column > form {
        border-bottom: solid 1px #565151;
    }
    .my-4 > h3.mb-4 {
        display: none;
    }
    main.auth-content {
        min-height: auto;
        padding: 0 !important;
        background-color: #F7F8F9;
    }
    main.auth-content > .container {
        margin: 0 auto !important;
        padding: 0;
        max-width: none;
    }
    .container .chat-container {
        height: calc(100svh - 236px);
        margin: 0 auto;
    }
    .container .chat-container .card-body {
        padding: 0 14px;
    }
    .container .chat-container .chat-messages {
        padding: 0;
        margin-bottom: 0;
    }
    .container .chat-container .avatar {
        flex: 0 0 40px;
        height: 40px;
    }
    .container .chat-container .message-item {
        gap: 10px;
    }
    .container .chat-container .message-item.user .avatar {
        display: none;
    }
    .container .chat-container .message.bubble:not(.user) {
        padding: 12px 20px;
        font-size: 14px;
    }
    .container .chat-container .message.bubble.user {
        padding: 12px 20px;
        font-size: 14px;
    }
    .container .chat-container .chat-input-container {
        width: 100%;
        min-height: 86px;
        padding-top: 0;
        padding-bottom: 20px;
        position: fixed;
        left: 0;
        bottom: 0;
        background: #FFFFFF80;
    }
    .container .chat-container .chat-input-row {
        width: 100%;
        padding: 0 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .container .chat-container .file-attach-btn {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container .chat-container .send-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        color: transparent;
        font-size: 0;
        flex-shrink: 0;
    }
    .container .chat-container .send-btn:hover {
        background-color: transparent;
    }
    .container .chat-container .send-btn::before {
        content: '';
        display: block;
        width: 22px;
        height: 20px;
        background: url(/img/chat_send_sp.png) no-repeat center / contain;
    }
    .container .chat-container .chat-input {
        flex: 1;
        margin: 0 !important;
        height: 48px;
        padding: 10px 12px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
}

.table-dark {
    background-color: #9FA0AE !important;
}