@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.font-light {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.font-regular {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-medium {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.font-semibold {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.font-bold {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.font-extrabold {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.font-black {
  font-family: "Kanit", sans-serif;
  font-weight: 900;
  font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll !important;
}

html::-webkit-scrollbar {
    width: 0;
}

html::-webkit-scrollbar-thumb {
    width: 0;
}

div::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px;
    background-color: #0a0a0a;
}

div::-webkit-scrollbar-thumb {
    width: 8px;
    border-radius: 4px;
    border: solid 1px #0a0a0a;
    background-color: var(--primary);
}

body {
    height: 100%;
    padding-right: 0 !important;
    text-align: center;
    background-color: #0c0b06;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    font-family: "Kanit", sans-serif;
}

body.active {
    overflow: hidden;
}

button, a, input, select, textarea {
    outline: none !important;
    transition: 0.3s;
}

button { padding: 0; white-space: nowrap; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a { color: #98a7b5; text-decoration: none; position:relative; }

a:hover { color: var(--primary); text-decoration: none; }

img { pointer-events: none; }

tr { cursor: pointer; }

.w-b, .w-a, .w-ba {
    position: relative;
    z-index: 1;
}

.w-b:before, 
.w-a:after,
.w-ba:before, 
.w-ba:after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transition: 0.3s;
}

.dflex-ac-jc {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dflex-ac-js {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.min-h-auto {
    min-height: auto !important;
}

.min-h-400 {
    width: 100%;
    min-height: 440px;
}

.table-layout-fixed {
    table-layout: fixed;
}

.bs-ul,
.bs-ul-df {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    display: table;
    padding: 0;
}

.bs-ul-df {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.bs-ul li,
.bs-ul-df li {
    list-style: none;
    width: auto;
    height: auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.bs-ul-df li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.easy-ticker ul {
    list-style: none;
    margin-bottom: 0;
    width: auto;
    padding: 0;
    position: relative !important;
}

.easy-ticker ul li {
    list-style: none;
    width: auto;
    height: auto;
    position: relative;
    display: block;
    white-space: nowrap;
    cursor: pointer;
}

:root {
    --header-bg: #222222;
    --header-middle: #b32517;
    --header-secondary: #7e1a0b;
    --header-halfway: #d22f28;

    --primary: #e63025;
    --darker: #999999;

    --bg-white: #333333;

    --btn-border: #666666;
    --btn-white: #444444;
    --btn-gray: #555555;
    --btn-hover: #a00d04;

    --panel-gray: #333333;

    --font-primary: #e63025;
    --font-second: #ead347;
    --font-white: #ffffff;
    --font-darker: #cccccc;
    --font-gray: #999999;
    --font-green: #53f95e;
    --font-red: #ff4c51;

    --hits: #e70012;
    --new: #1a8754;
    --events: #ff9c38;
}

.text-primary { color: var(--primary) !important; }

.text-second { color: var(--font-second) !important; }

.text-gray { color: var(--font-gray) !important; }

.text-darker { color: var(--font-darker) !important; }

.text-green { color: var(--font-green) !important; }

.text-red { color: var(--font-red) !important; }

.font-size-sm { font-size: 14px !important; }

.font-light { font-weight: 300 !important; }

.font-medium { font-weight: 500 !important; }

.font-bold { font-weight: 700 !important; }

.font-sz-12 { font-size: 12px; }

.font-sz-14 { font-size: 14px; }

.font-sz-16 { font-size: 16px; }

.font-sz-18 { font-size: 18px; }

.font-gms-light { font-family: GmarketSansLight !important; }

.font-gms-medium { font-family: GmarketSansMedium !important; }

.font-gms-bold { font-family: GmarketSansBold !important; }

.panel-gray { 
    background-color: var(--panel-gray);
    border-radius: 10px;
}


/* Iconify */

.iconify {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.tabler--user {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
}

.tabler--building-bank {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E");
}

.ri--lock-password-line {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2V7a6 6 0 1 1 12 0zM5 10v10h14V10zm6 4h2v2h-2zm-4 0h2v2H7zm8 0h2v2h-2zm1-6V7a4 4 0 0 0-8 0v1z'/%3E%3C/svg%3E");
}

.meteor-icons--language {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5h14M9 2v3m4 0q-2 8-9 11m2-7q2 4 6 6m1 7l5-11l5 11m-1.4-3h-7.2'/%3E%3C/svg%3E");
}

.solar--document-linear {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z'/%3E%3Cpath stroke-linecap='round' d='M8 10h8m-8 4h5'/%3E%3C/g%3E%3C/svg%3E");
}

.mdi--information-variant-circle-outline {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.3 7.29c.2-.18.44-.29.7-.29c.27 0 .5.11.71.29c.19.21.29.45.29.71c0 .27-.1.5-.29.71c-.21.19-.44.29-.71.29c-.26 0-.5-.1-.7-.29c-.19-.21-.3-.44-.3-.71c0-.26.11-.5.3-.71m-2.5 4.68s2.17-1.72 2.96-1.79c.74-.06.59.79.52 1.23l-.01.06c-.14.53-.31 1.17-.48 1.78c-.38 1.39-.75 2.75-.66 3c.1.34.72-.09 1.17-.39c.06-.04.11-.08.16-.11c0 0 .08-.08.16.03c.02.03.04.06.06.08c.09.14.14.19.02.27l-.04.02c-.22.15-1.16.81-1.54 1.05c-.41.27-1.98 1.17-1.74-.58c.21-1.23.49-2.29.71-3.12c.41-1.5.59-2.18-.33-1.59c-.37.22-.59.36-.72.45c-.11.08-.12.08-.19-.05l-.03-.06l-.05-.08c-.07-.1-.07-.11.03-.2M22 12c0 5.5-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2s10 4.5 10 10m-2 0c0-4.42-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8'/%3E%3C/svg%3E");
}

.icon-park-outline--protect {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M6 9.256L24.009 4L42 9.256v10.778A26.32 26.32 0 0 1 24.003 45A26.32 26.32 0 0 1 6 20.029z'/%3E%3Cpath stroke-linecap='round' d='m15 23l7 7l12-12'/%3E%3C/g%3E%3C/svg%3E");
}

.simple-line-icons--login {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M532.528 661.408c-12.512 12.496-12.513 32.752-.001 45.248c6.256 6.256 14.432 9.376 22.624 9.376s16.368-3.12 22.624-9.376l189.008-194L577.775 318.64c-12.496-12.496-32.752-12.496-45.248 0c-12.512 12.496-12.512 32.752 0 45.248l115.744 115.76H31.839c-17.68 0-32 14.336-32 32s14.32 32 32 32h618.448zM960.159 0h-576c-35.36 0-64.017 28.656-64.017 64v288h64.432V103.024c0-21.376 17.344-38.72 38.72-38.72h496.704c21.408 0 38.72 17.344 38.72 38.72l1.007 818.288c0 21.376-17.311 38.72-38.72 38.72H423.31c-21.376 0-38.72-17.344-38.72-38.72V670.944l-64.432.08V960c0 35.344 28.656 64 64.017 64h576c35.344 0 64-28.656 64-64V64c-.016-35.344-28.672-64-64.016-64'/%3E%3C/svg%3E");
}

.tabler--user-hexagon {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 13a3 3 0 1 0 0-6a3 3 0 0 0 0 6m-5.799 5.744A4 4 0 0 1 10 16h4a4 4 0 0 1 3.798 2.741'/%3E%3Cpath d='M19.875 6.27c.7.398 1.13 1.143 1.125 1.948v7.284c0 .809-.443 1.555-1.158 1.948l-6.75 4.27a2.27 2.27 0 0 1-2.184 0l-6.75-4.27A2.23 2.23 0 0 1 3 15.502V8.217c0-.809.443-1.554 1.158-1.947l6.75-3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98z'/%3E%3C/g%3E%3C/svg%3E");
}

.ic--baseline-arrow-forward-ios {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z'/%3E%3C/svg%3E");
}

.ep--right {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312z'/%3E%3C/svg%3E");
}

.tabler--logout-2 {
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 8V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M15 12H3l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");
}

.tabler--copy {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z'/%3E%3Cpath d='M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1'/%3E%3C/g%3E%3C/svg%3E");
}

.mdi--eye-off-outline {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 5.27L3.28 4L20 20.72L18.73 22l-3.08-3.08c-1.15.38-2.37.58-3.65.58c-5 0-9.27-3.11-11-7.5c.69-1.76 1.79-3.31 3.19-4.54zM12 9a3 3 0 0 1 3 3a3 3 0 0 1-.17 1L11 9.17A3 3 0 0 1 12 9m0-4.5c5 0 9.27 3.11 11 7.5a11.8 11.8 0 0 1-4 5.19l-1.42-1.43A9.86 9.86 0 0 0 20.82 12A9.82 9.82 0 0 0 12 6.5c-1.09 0-2.16.18-3.16.5L7.3 5.47c1.44-.62 3.03-.97 4.7-.97M3.18 12A9.82 9.82 0 0 0 12 17.5c.69 0 1.37-.07 2-.21L11.72 15A3.064 3.064 0 0 1 9 12.28L5.6 8.87c-.99.85-1.82 1.91-2.42 3.13'/%3E%3C/svg%3E");
}

.mdi--eye-outline {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0'/%3E%3C/svg%3E");
}

.tabler--shield-check-filled {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m11.998 2l.118.007l.059.008l.061.013l.111.034a1 1 0 0 1 .217.112l.104.082l.255.218a11 11 0 0 0 7.189 2.537l.342-.01a1 1 0 0 1 1.005.717a13 13 0 0 1-9.208 16.25a1 1 0 0 1-.502 0A13 13 0 0 1 2.54 5.718a1 1 0 0 1 1.005-.717a11 11 0 0 0 7.531-2.527l.263-.225l.096-.075a1 1 0 0 1 .217-.112l.112-.034a1 1 0 0 1 .119-.021zm3.71 7.293a1 1 0 0 0-1.415 0L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.32 1.497l2 2l.094.083a1 1 0 0 0 1.32-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32z'/%3E%3C/svg%3E");
}

.ic--outline-account-circle {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2M7.35 18.5C8.66 17.56 10.26 17 12 17s3.34.56 4.65 1.5c-1.31.94-2.91 1.5-4.65 1.5s-3.34-.56-4.65-1.5m10.79-1.38a9.95 9.95 0 0 0-12.28 0A7.96 7.96 0 0 1 4 12c0-4.42 3.58-8 8-8s8 3.58 8 8c0 1.95-.7 3.73-1.86 5.12'/%3E%3Cpath fill='%23000' d='M12 6c-1.93 0-3.5 1.57-3.5 3.5S10.07 13 12 13s3.5-1.57 3.5-3.5S13.93 6 12 6m0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11'/%3E%3C/svg%3E");
}

.ri--checkbox-circle-fill {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m5.457-12.543L11 15.914l-4.207-4.207l1.414-1.414L11 13.086l5.043-5.043z'/%3E%3C/svg%3E");
}

.carbon--home {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M16.612 2.214a1.01 1.01 0 0 0-1.242 0L1 13.419l1.243 1.572L4 13.621V26a2.004 2.004 0 0 0 2 2h20a2.004 2.004 0 0 0 2-2V13.63L29.757 15L31 13.428ZM18 26h-4v-8h4Zm2 0v-8a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v8H6V12.062l10-7.79l10 7.8V26Z'/%3E%3C/svg%3E");
}

.ooui--share {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M12 6V2l7 7l-7 7v-4c-5 0-8.5 1.5-11 5l.8-3l.2-.4A12 12 0 0 1 12 6'/%3E%3C/svg%3E");
}

.proicons--info {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Ccircle cx='12' cy='12' r='9.25' stroke='%23000' stroke-width='1.5'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M12 11.813v5'/%3E%3Ccircle cx='12' cy='8.438' r='1.25' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
}

.material-symbols--arrow-back-rounded {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z'/%3E%3C/svg%3E");
}

.lucide--wallet {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/g%3E%3C/svg%3E");
}

.ph--arrow-circle-left-bold {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84m52-84a12 12 0 0 1-12 12h-51l11.52 11.51a12 12 0 0 1-17 17l-32-32a12 12 0 0 1 0-17l32-32a12 12 0 0 1 17 17L117 116h51a12 12 0 0 1 12 12'/%3E%3C/svg%3E");
}

.solar--settings-broken {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath stroke-linecap='round' d='M3.661 10.64c.473.296.777.802.777 1.36s-.304 1.064-.777 1.36c-.321.203-.529.364-.676.556a2 2 0 0 0-.396 1.479c.052.394.285.798.75 1.605c.467.807.7 1.21 1.015 1.453a2 2 0 0 0 1.479.396c.24-.032.483-.13.819-.308a1.62 1.62 0 0 1 1.567.008c.483.28.77.795.79 1.353c.014.38.05.64.143.863a2 2 0 0 0 1.083 1.083C10.602 22 11.068 22 12 22s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.092-.223.129-.483.143-.863c.02-.558.307-1.074.79-1.353a1.62 1.62 0 0 1 1.567-.008c.336.178.58.276.82.308a2 2 0 0 0 1.478-.396c.315-.242.548-.646 1.014-1.453c.208-.36.369-.639.489-.873m-.81-2.766a1.62 1.62 0 0 1-.777-1.36c0-.559.304-1.065.777-1.362c.321-.202.528-.363.676-.555a2 2 0 0 0 .396-1.479c-.052-.394-.285-.798-.75-1.605c-.467-.807-.7-1.21-1.015-1.453a2 2 0 0 0-1.479-.396c-.24.032-.483.13-.82.308a1.62 1.62 0 0 1-1.566-.008a1.62 1.62 0 0 1-.79-1.353c-.014-.38-.05-.64-.143-.863a2 2 0 0 0-1.083-1.083C13.398 2 12.932 2 12 2s-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083c-.092.223-.129.483-.143.863a1.62 1.62 0 0 1-.79 1.353a1.62 1.62 0 0 1-1.567.008c-.336-.178-.58-.276-.82-.308a2 2 0 0 0-1.478.396C4.04 5.79 3.806 6.193 3.34 7c-.208.36-.369.639-.489.873'/%3E%3C/g%3E%3C/svg%3E");
}

.cuida--calendar-outline {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg class='calendar-outline'%3E%3Cg fill='%23000' class='Vector'%3E%3Cpath fill-rule='evenodd' d='M6 4h12a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M3 10a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1m5-8a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1' clip-rule='evenodd'/%3E%3Cpath d='M8 13a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.tabler--message {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}


/* Button Styles */

.btn-prime, .btn-white, .btn-border, .btn-gradient, .btn-gradient-light, .btn-gradient-second, .btn-gray {
    color: #ffffff;
    border-radius: 25px;
    font-weight: 500;
    background-color: var(--primary);
    border: solid 1px var(--text-prime);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.btn-white {
    background-color: var(--primary);
    border: solid 1px var(--text-prime);
}

.btn-gray {
    color: var(--font-darker);
    background-color: var(--btn-gray);
    border-color: var(--btn-gray);
}

.btn-gradient {
    border: none;
}

.btn-gradient-light {
    color: #cccccc;
    border: none;
    background-color: #555555;
}

.btn-gradient-second {
    background-color: var(--primary);
}

.btn-border {
    background-color: var(--primary);
    border: solid 1px var(--text-prime);
}

.btn-gradient:before,
.btn-gradient-light:before,
.btn-gradient-second:before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
    bottom: 50%;
    left: 0;
    position: absolute;
    opacity: .7;
    z-index: -1;
}

.btn-gray.active {
    border-width: 2px;
    border-color: var(--primary);
}

@media(min-width: 1025px){
    .btn-prime:hover {
        background-color: var(--btn-hover);
        border-color: var(--btn-border);
    }

    .btn-gradient:hover {
        background-color: var(--btn-hover);
    }

    .btn-white:hover {
        background-color: var(--btn-hover);
        border-color: var(--btn-border);
    }

    .btn-border:hover {
        background-color: var(--btn-hover);
        border-color: var(--btn-border);
    }

    .form-group .btn-gray:hover {
        background-color: #666666;
        border-color: #cccccc;
        color: #ffffff;
    }

    .btn-gradient-second:hover {
        background-color: var(--btn-hover);
    }
}

.container {
    position: relative;
    max-width: 1200px;
    padding: 0;
}


/* Wrapper */

.wrapper {
    width: 100%;
    min-height: 100%;
    min-width: 360px;
    position: relative;
    overflow: hidden;
    padding: 105px 0 107px;
    transition: 0.3s;
}

.header-section {
    width: 100%;
    max-width: 1200px;
    height: 95px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    z-index: 100;
}

.header-background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0 0 28px 28px;
    background: linear-gradient(0deg, #1b1a1a 0, #222222 100%);
    background-size: 100% 62px;
    background-repeat: no-repeat;
    overflow: hidden;
    /*filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));*/
    filter: drop-shadow(0 1px 0 var(--primary));
    pointer-events: none;
    z-index: 10;
}

.header-background:before,
.header-background:after {
    width: calc(100% - 105px);
    height: 100%;
    position: absolute;
    top: 0;
    background: linear-gradient(0deg, #161515 0, #222222 100%);
}

.al-active .header-background:before,
.al-active .header-background:after {
    width: calc(100% - 280px);
}

.header-background:before {
    left: -50%;
    border-radius: 0 0 15px 0;
    transform-origin: bottom right;
    transform: skew(-15deg);
    background-color: var(--header-bg);
}

.header-background:after {
    right: -50%;
    border-radius: 0 0 0 15px;
    transform-origin: bottom left;
    transform: skew(15deg);
    background-color: var(--header-bg);
}

.mid-background {
    width: 202px;
    height: 20px;
    left: 0;
    right: 0;
    bottom: 13px;
    margin: 0 auto;
    position: absolute;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 0 #1b1a1a, 0 -6px 0 #1b1a1a;
    transition: 0.3s;
}

.al-active .mid-background {
    width: 552px;
}

.header-top {
    width: 100%;
    height: 62px;
    position: relative;
    z-index: 15;
    padding: 0 28px;
}

.logo {
    width: 180px;
    display: inline-block;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.logo div {
    position: absolute;
    overflow: hidden;
}

.logo div .d-img {
    width: 100%;
    position: relative;
}

.logo img {
    position: absolute;
}

.logo .logo-img {
    width: 100%;
    position: relative;
    opacity: 0;
}

.logo .top {
    width: 100%;
    left: 0;
    top: 0;
    animation: lgTopBot 7s ease infinite;
}

@keyframes lgTopBot {
    0% { 
        transform: scale(0.5);
        opacity: 0;
    }
    10% { 
        transform: scale(1.0);
        opacity: 1.0;
    }
    95% { 
        transform: scale(1.0);
        opacity: 1.0;
    }
    100% { 
        transform: scale(1.0);
        opacity: 0;
    }
}

.logo .top .d-img {
    animation: lgTopImg 2s ease infinite;
}

@keyframes lgTopImg {
    0% { transform: translateY(0); }
    20% { transform: translateY(10%); }
    30% { transform: translateY(10%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

.logo .bottom {
    width: 96.23%;
    left: 0;
    bottom: 28%;
    animation: lgTopBot 7s ease infinite;
}

.logo .bottom .d-img {
    animation: lgBottomImg 2s ease infinite;
}

@keyframes lgBottomImg {
    0% { transform: translateY(0); }
    20% { transform: translateY(-10%); }
    30% { transform: translateY(-10%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

.logo .casino {
    width: 45.29%;
    left: 1%;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    animation: lgCasino 7s ease infinite;
}

@keyframes lgCasino {
    0% { 
        transform: translateY(-50%);
        opacity: 0;
    }
    10% { 
        transform: translateY(-50%);
        opacity: 0;
    }
    25% { 
        transform: translateY(0);
        opacity: 1.0;
    }
    95% { 
        transform: translateY(0);
        opacity: 1.0;
    }
    100% { 
        transform: translateY(0);
        opacity: 0;
    }
}


/* Nav Group */

.header-top .nav-group button {
    color: var(--primary);
    background-color: transparent;
    border: none;
    margin-left: 15px;
}

.header-top .nav-group button i {
    font-size: 28px;
}

.header-top .nav-group button img {
    width: 30px;
    filter: brightness(0) invert(1);
}

.right-trigger {
    width: 26px;
    height: 15px;
    background-color: transparent;
    border: none;
    padding: 0;
    position: relative;
    z-index: 100;
}

.right-trigger:before,
.right-trigger:after,
.right-trigger span {
    width: 100%;
    height: 2px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    background-color: var(--primary);
    display: block;
    border-radius: 2px;
    transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.right-trigger span {
    width: 18px;
    left: auto;
    margin: auto 0;
}

.right-trigger:before {
    transform-origin: bottom left;
    top: -16px;
}

.right-trigger:after {
    transform-origin: top right;
    top: 16px;
}

.right-trigger.opened:before,
.right-trigger.opened:after {
    left: 0;
    top: 0;
    transform-origin: center;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.right-trigger.opened:before {
    transform: rotate(-45deg);
}

.right-trigger.opened:after {
    transform: rotate(45deg);
}

.right-trigger.opened span {
    opacity: 0;
    right: -20px;
}


/* Header Bottom */

.header-bottom {
    width: 100%;
    height: 33px;
    position: relative;
    align-content: flex-end;
}

.before-login, 
.after-login {
    display: none;
    position: relative;
}

.before-login.active, 
.after-login.active {
    display: block;
}

.header-bottom .before-login {
    z-index: 20;
}

.header-bottom .after-login {
    z-index: 5;
}

.header-bottom .after-login .dflex-ac-jc {
    flex-wrap: nowrap;
}

.header-top .after-login button {
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    margin-right: 10px;
}

.header-top .after-login a {
    color: #ffffff;
    font-size: 24px;
    margin-right: 10px;
    display: inline-block;
}

.message-link {
    position: relative;
}

.message-link .count {
    width: 16px;
    height: 16px;
    background-color: #d91d09;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: -5px;
    font-size: 11px;
    color: #ffffff;
}

.sidebar-right .message-link .count {
    width: 18px;
    height: 18px;
    top: -3px;
    right: -12px;
    font-size: 12px;
}

.mobile-menu .message-link .count {
    width: 18px;
    height: 18px;
    right: -4px;
}

.header-section .before-login button {
    width: 96px;
    height: 28px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    margin: 0 1px;
}

.after-login .info-panel {
    width: 182px;
    height: 33px;
    background-color: #e82e1a;
    color: #ffffff;
    font-size: 16px;
    position: relative;
    margin: 0 1px 0 0;
    padding: 0 20px 0 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.after-login .info-panel:first-child {
    border-radius: 20px 0 0 20px;
}

.after-login .info-panel:last-child {
    border-radius: 0 20px 20px 0;
}

.after-login .info-panel .labels {
    color: #000000;
    font-size: 14px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}

.after-login .refresh-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    right: 4px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: linear-gradient(#e63025, #b81b11);
    color: #ffffff;
    border: none;
    position: absolute;
}


/* Marquee */

.marquee-wrapper {
    width: 100%;
    height: 32px;
    left: 0;
    top: 0;
    border-radius: 20px;
    background-color: #000000;
    border: solid 1px #91302a;
    margin: 0 0 16px;
}

.marquee-wrapper .icon-panel {
    width: 28px;
    height: 28px;
    font-size: 18px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--font-white);
}

.marquee-wrapper .icon-panel i {
    display: inline-block;
    animation: shakeAnim 1.5s ease infinite;
}

@keyframes shakeAnim {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(30deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(5deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.marquee-wrapper .marquee-panel {
    width: calc(100% - 34px);
    font-size: 12px;
    letter-spacing: 1px;
    margin-left: auto;
    overflow: hidden;
}


/* Visual Section */

.swiper {
  width: 100%;
}

.visual-section .swiper-slide {
    border-radius: 20px;
    background-color: #000000;
}

.swiper .swiper-wrapper {
    height: initial;
}

.swiper .swiper-pagination {
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 0;
}

.swiper-peaking .swiper-pagination {
    width: 90%;
}

.swiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background-color: #ffffff;
}

.swiper .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 4px;
    background-color: var(--primary);
}

.swiper .swiper-pagination {
    position: relative;
    top: 0;
    bottom: 0;
}

.visual-section .v-img {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    animation: vImgAnim 1.5s ease 0.5s 1 forwards;
}

@keyframes vImgAnim {
    0% { transform: translateX(10%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1.0; }
}

.visual-section .text-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: flex-start;
    color: #ffffff;
    padding: 0 0 3% 6%;
}

.visual-section .logo-panel {
    width: 100%;
    justify-content: flex-start;
    margin: 0 0 4%;
}

.visual-section .logo-panel .logo {
    width: 19.34%;
    position: relative;
    margin: 0;
}

.visual-section .text {
    margin: 0 0 -0.25%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 1.0), 0 -1px 5px rgba(0, 0, 0, 1.0),
                1px 0 8px rgba(0, 0, 0, 1.0), -1px 0 10px rgba(0, 0, 0, 1.0),
                1px 1px 0 rgba(0, 0, 0, 1.0), -1px 1px 0 rgba(0, 0, 0, 1.0),
                1px -1px 0 rgba(0, 0, 0, 1.0), -1px -1px 0 rgba(0, 0, 0, 1.0);
}

.visual-section .text-panel h1 {
    font-size: 66px;
    margin: 0 0 -1.25%; 
}

.visual-section .text-panel h2 {
    font-size: 54px;
}

.visual-section .text-panel h6 {
    font-size: 28px;
}

.visual-section .text-panel .text-dark {
    color: #4e3605 !important;
}

.text-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(#ff311f, #ff311f, #812301, #812301);
    background-size: 100% 100%;
    text-shadow: none;
}


/* Section Header */

.section-header {
    width: 100%;
    font-size: 20px;
    margin: 0 0 10px;
}

.section-header .title-panel {
    padding-left: 15px;
    color: var(--font-darker);
}

.section-header .title-panel:before {
    width: 8px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-color: var(--primary);
}

.section-header .title-panel .text-en {
    font-size: 26px;
}


/* Swiper Peaking */

.swiper-peaking {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    padding: 0 0 12px;
}

.swiper-peaking .swiper {
    width: 110%;
    overflow: visible;
}


/* Game Btn */

.game-btn {
    width: 100%;
    display: inline-block;
    border-radius: 20px;
    overscroll-behavior: hidden;
    overflow: hidden;
    background-color: #3a3a3a;
    color: #ffffff;
}

.gamelist-panel .game-btn {
    width: calc(14.28% - 8px);
    margin: 0 4px 8px;
}

.game-btn .g-panel {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin: 0 0 5px;
}

.game-btn .title {
    margin: 5px 0 0;
    width: 100%;
    max-width: 90%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-btn .g-img {
    transition: 0.3s;
}

.game-btn:hover .g-img {
    filter: blur(5px);
    transform: scale(1.1);
}

.game-btn .hover {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: 0.3s;
}

.game-btn:hover .hover {
    opacity: 1.0;
}

.game-btn .play-btn {
    background-color: transparent;
    border: none;
    font-size: 64px;
    color: #ffffff;
    position: relative;
    z-index: 5;
}

.tag-panel {
    width: 44px;
    position: absolute;
    left: 6%;
    top: 3%;
    z-index: 10;
}

.tag-panel .tag {
    width: 100%;
    height: 14px;
    border-radius: 10px;
    margin: 6px 0;
    background-color: var(--hits);
    font-size: 10px;
    color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.tag-panel .tag.hit {
    animation: hitTagAnim 1s ease infinite;
}

@keyframes hitTagAnim {
    0% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(231, 0, 18, 1.0); }
    100% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(231, 0, 18, 0); }
}

.tag-panel .tag.event {
    background-color: var(--events);
    animation: eventTagAnim 1s ease infinite;
}

@keyframes eventTagAnim {
    0% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(255, 156, 56, 1.0); }
    100% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 156, 56, 0); }
}

.tag-panel .tag.new {
    background-color: var(--new);
    animation: newTagAnim 1s ease infinite;
}

@keyframes newTagAnim {
    0% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(26, 135, 84, 1.0); }
    100% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(26, 135, 84, 0); }
}

.tag-panel .tag:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
    border-radius: 100%;
    bottom: 50%;
    left: 0;
    position: absolute;
    z-index: -1;
}


/* Sports Widget */

.sports-widget {
    background-color: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    padding: 15px;
}

.sports-widget .header {
    width: 100%;
    font-size: 16px;
}

.sports-widget .sports-info {
    width: 100%;
}

.sports-widget .sports-info .team-td {
    width: 30%;
}

.sports-widget .sports-info .team-td .icon-panel {
    min-height: 30px;
}

.sports-widget .sports-info .team-td .icon-img {
    max-width: 30px;
    max-height: 30px;
}

.sports-widget .sports-info .team-td .title {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--font-darker);
    margin: 5px 0 0;
}

.sports-widget .sports-info .info-td {
    width: 40%;
}

.sports-widget .sports-info .info-td .date {
    width: 100%;
    display: inline-block;
    font-size: 12px;
}

.sports-widget .betting-wrap {
    width: calc(100% + 8px);
    margin: 5px -4px 0;
}

.sports-widget .bet-btn {
    width: calc(33.33% - 8px);
    height: 26px;
    font-weight: 300;
    border-radius: 3px;
    margin: 0 4px;
    border: solid 1px #999999;
    background-color: rgba(255, 255, 255, 0);
    color: var(--font-darker);
}


/* Promotion */

.promotion-card {
    width: 100%;
    background-color: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 20px;
}

.promotion-card .p-panel {
    width: 100%;
    max-width: 290px;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 auto 10px;
}

.promotion-card .p-info .title {
    font-size: 16px;
    font-weight: 700;
}

.promotion-card button {
    width: 100%;
    height: 40px;
    font-size: 16px;
    margin: 10px 0 0;
}

.done .p-panel img {
    opacity: 0.5;
}

.promo-img {
    border-radius: 15px;
}

.promo-tag {
    color: #ffffff;
    font-size: 12px;
    background-color: var(--primary);
    padding: 2px 8px;
    border-radius: 5px;
    margin-left: 5px;
}

.done .promo-tag {
    background-color: #df1f00;
}

.card-tag {
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--primary);
    border: solid 1px var(--primary);
    font-size: 12px;
    margin: 0 8px 0 0;
}

.bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #393939;
    display: inline-block;
    border-radius: 50%;
}


/* Event */

.event-card {
    width: 100%;
    background-color: #161515;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 10px;
}

.event-card .e-panel {
    overflow: hidden;
    margin: 0 0 10px;
}

.event-card .e-panel .e-img {
    max-width: 100px;
}

.event-card .e-info {
    min-height: 92px;
}

.event-card .e-info .title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

.event-card .e-info .sub {
    word-wrap: break-word;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.25rem;
}

.event-card button {
    width: 100%;
    height: 35px;
    font-size: 16px;
    margin: 10px 0 0;
}


/* Page Content */

.page-content {
    margin: 0 0 15px;
    position: relative;
}

.category-wrap {
    width: 78px;
    min-height: 100%;
    align-content: flex-start;
}

.category-wrap.relative {
    align-content: flex-end;
    padding: 0 0 35px;
}

.category-menu {
    width: 78px;
    height: 350px;
    position: relative;
    background-color: #161515;
    border-radius: 40px;
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.affix .category-menu {
    position: fixed;
    top: 105px;
}

.category-swiper {
    height: 100%;
    padding: 16px 8px;
}

.category-btn {
    width: 100%;
    display: inline-block;
}

.category-btn .icon-panel {
    width: 100%;
    max-width: 42px;
    margin: 0 auto;
    position: relative;
}

.category-btn .icon-panel img {
    filter: brightness(80%);
}

.category-btn .icon-panel .over-img {
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.3s;
    filter: hue-rotate(0deg);
    opacity: 0;
}

.category-btn.active .icon-panel .over-img {
    opacity: 1.0;
}

.category-btn .title {
    width: 100%;
    display: inline-block;
    color: var(--font-gray);
    font-size: 14px;
    font-weight: 300;
    position: relative;
    top: 1px;
}

.category-btn.active .title {
    color: var(--primary);
    font-weight: 400;
}

.category-menu .swiper-button-next.swiper-button-disabled, 
.category-menu .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

.category-menu .swiper-button-prev:after,
.category-menu .swiper-rtl .swiper-button-next:after {
    content: ''
}

.category-menu .swiper-button-next:after,
.category-menu .swiper-rtl .swiper-button-prev:after {
    content: ''
}

.category-menu .swiper-button-prev,
.category-menu .swiper-button-next {
    width: 100%;
    height: 78px;
    background-image: linear-gradient(rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    position: absolute;
    right: 0;
    left: 0;
    margin: 0;
    font-size: 20px;
    color: var(--primary);
    display: flex;
    justify-content: center;
}

.category-menu .swiper-button-prev {
    bottom: absolute;
    top: 0;
    align-items: flex-start;
    padding: 5px 0 0;
}

.category-menu .swiper-button-next {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    bottom: 0;
    top: auto;
    align-items: flex-end;
    padding: 0 0 5px;
}


/* Page Wrapper */

.page-wrapper {
    width: calc(100% - 93px);
    margin-left: auto;
}

.providers-tab {
    display: none;
}

.providers-tab.active {
    display: block;
}

.providers-panel {
    width: calc(100% + 12px);
    margin: 20px -6px 0;
}

.sc-btn {
    width: calc(20% - 12px);
    max-width: 216px;
    margin: 0 6px 12px;
    position: relative;
    color: #ffffff;
    overflow: hidden;
    transition: 0s;
    animation: scBtnAnim 0.5s ease 1 backwards;
}

@keyframes scBtnAnim {
    0% {
        opacity: 0;
        transform: translateY(-25%);
    }
    100% {
        opacity: 1.0;
        transform: translateY(0);
    }
}

.sc-btn .a-wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: initial;
}

.sc-btn .a-wrap:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    border: solid 1px #ad8100;
    z-index: 5;
    opacity: 0;
}

.sc-btn .a-panel {
    z-index: initial;
}

.sc-btn .sc-bg {
    transition: 0.3s;
}

.sc-btn .sc-char {
    width: 137.04%;
    position: absolute;
    left: -18.52%;
    bottom: 12%;
    z-index: 10;
    transition: 0.3s;
}

.sc-btn .sc-logo {
    width: 100%;
    height: 25%;
    position: absolute;
    left: 0;
    bottom: 14%;
    z-index: 15;
}

.sc-btn .sc-logo img {
    max-width: 50%;
    max-height: 60%;
}

.sc-btn .a-footer {
    width: 100%;
    height: 34px;
    font-size: 18px;
    font-weight: 700;
    font-family: YeogiOttaeJalnan;
    position: absolute;
    left: 0;
    bottom: 2%;
    z-index: 2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(#f2b74a, #f2b74a, #ffff87, #f2b74a, #f2b74a);
    background-size: 100% 100%;
    text-shadow: none;
}


/* Top Games */

.topgames-section {
    margin: 0 0 20px;
    position: relative;
    z-index: 5;
}

.topgames-section .section-header {
    margin: 10px 0 -25px;
}

.topgames-swiper {
    width: 100%;
    padding: 40px 0 0;
}

.swiper-wrapper {
    position: relative;
    z-index: 15;
}

.swiper-slide:hover {
    z-index: 5;
}

.swiper-slide .sc-btn {
    width: 80%;
    margin: 0 0 0 auto;
    transition: 0.3s;
    display: block;
}

.sc-count {
    width: 34.98%;
    position: absolute;
    left: 0;
    top: 4%;
    transition: 0.3s;
    filter: grayscale(100%);
}

.swiper-pagination-bullet {
    opacity: 1.0;
    background-color: #282933;
}

.swiper-pagination-bullet-active {
    opacity: 1.0;
    background-color: #ffbe00;
}

@media(min-width: 1024px){
    .sc-btn:hover {
        color: #ffbe00;
        overflow: visible;
    }

    .sc-btn:hover .a-wrap:before {
        opacity: 1.0;
    }

    .sc-btn:hover .a-panel:before {
        animation: breatheAnim 0.5s ease infinite;
    }

    @keyframes breatheAnim {
        0% { opacity: 0; }
        50% { opacity: 1.0; }
        100% { opacity: 0; }
    }

    .sc-btn.off .sc-bg {
        filter: brightness(50%);
    }
    
    .sc-btn:hover .sc-bg,
    .sc-btn:hover .a-panel:before {
        transform: scale(1.2);
        transition: 0.5s;
    }

    .sc-btn:hover .sc-char {
        transition: 0.5s;
        transform: translateY(-10%) scale(1.2);
    }

    .swiper-slide .sc-btn:hover {
        z-index: 10;
    }

    .swiper-slide:hover .sc-count {
        opacity: 0;
        transform: translateX(20%);
    }   
}


.xs-tag-panel {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    border-radius: 35px;
    overflow: hidden;
    z-index: 20;
}

.xs-tag-panel .xs-tag {
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    white-space: nowrap;
}

.xs-tag-panel .xs-tag:before {
    width: 100px;
    height: 100%;
    left: 0;
    top: 0;
    transform-origin: bottom left;
    background-color: var(--primary);
    transform: rotate(-30deg);
    animation: xsTagAnim 0.5s ease infinite;
}

@keyframes xsTagAnim {
    0% { background-color: var(--primary); }
    50% { background-color: var(--header-secondary); }
    100% { background-color: var(--primary); }
}

.xs-tag-panel .xs-tag span {
    display: inline-block;
    transform: rotate(-30deg);
    font-size: 12px;
    color: #ffffff;
    margin: 0 0 11px 11px;
}


/* Winner Table */

.winner-wrap {
    width: 100%;
    border-radius: 15px;
    background-color: #161515;
    position: relative;
    padding: 50px;
}

.winner-wrap .left-panel {
    width: 50%;
    position: relative;
    z-index: 10;
}

.winner-wrap .right-panel {
    width: 50%;
    position: relative;
    z-index: 10;
    padding-left: 0;
    justify-content: flex-end;
}

.winner-wrap .title-panel .title {
    font-size: 36px;
}

.winner-wrap .title-panel .sub {
    font-size: 18px;
}

.winner-wrap .title-panel br {
    display: none;
}

.winner-wrap .title-panel button {
    width: 200px;
    height: 60px;
    font-size: 24px;
    font-weight: 700;
    margin: 15px 0 0;
    border-radius: 50px;
}


/* Winner Table */

.winner-table {
    width: 100%;
    max-width: 480px;
}

.winner-table li {
    width: 100%;
}

.winner-table li .win-tr {
    width: 100%;
    min-height: 70px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 4px 0;
    border: solid 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
}

.winner-table li:nth-child(1) .win-tr {
    animation: winnerTableBorder03 1.5s ease infinite;
}

@keyframes winnerTableBorder01 {
    0% { border-color: rgba(5, 4, 9, 0.25); }
    20% { border-color: #ffbe00; }
    50% { border-color: rgba(5, 4, 9, 0.25); }
    100% { border-color: rgba(5, 4, 9, 0.25); }
}

.winner-table li:nth-child(2) .win-tr {
    animation: winnerTableBorder02 1.5s ease infinite;
}

@keyframes winnerTableBorder02 {
    0% { border-color: rgba(5, 4, 9, 0.25); }
    10% { border-color: rgba(5, 4, 9, 0.25); }
    30% { border-color: #ffbe00; }
    60% { border-color: rgba(5, 4, 9, 0.25); }
    100% { border-color: rgba(5, 4, 9, 0.25); }
}

.winner-table li:nth-child(3) .win-tr {
    animation: winnerTableBorder01 1.5s ease infinite;
}

@keyframes winnerTableBorder03 {
    0% { border-color: rgba(5, 4, 9, 0.25); }
    20% { border-color: rgba(5, 4, 9, 0.25); }
    40% { border-color: #ffbe00; }
    70% { border-color: rgba(5, 4, 9, 0.25); }
    100% { border-color: rgba(5, 4, 9, 0.25); }
}

.winner-table li .win-tr div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.winner-table li .count-td {
    width: 50px;
}

.winner-table li .count-td .icon-img {
    max-width: 30px;
}

.winner-table li .game-td {
    width: calc(45% - 50px);
    justify-content: flex-start;
    padding-left: 5px;
}

.winner-table li .game-td .game-panel {
    width: 40px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 8px;
}

.winner-table li .game-td .title {
    width: calc(100% - 48px);
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}

.winner-table li .user-td {
    width: 20%;
    color: #9495a0;
}

.winner-table li .amount-td {
    width: 35%;
    font-size: 20px;
    font-weight: 700;
}



/* Winner Bg */

.winner-wrap .bg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    border-radius: 15px;
    position: absolute;
    overflow: hidden;
}

.winner-wrap .bg:before {
    width: 60%;
    height: 100%;
    left: 50%;
    top: 0;
    transform-origin: top left;
    transform: skew(-18deg);
    background-color: rgba(255, 255, 255, 0.03);
}

.winner-wrap .bg img {
    position: absolute;
}

.winner-wrap .bg-img {
    width: 100%;
    left: 0;
    top: 0;
    animation: reelsBg 20s linear infinite;
}

@keyframes reelsBg {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

.winner-wrap .pot {
    width: 14.75%;
    max-width: 263px;
    right: -1.25%;
    bottom: -16.5%;
}

.winner-wrap .coins {
    width: 13.23%;
    max-width: 236px;
    right: 9%;
    bottom: 0;
}

.winner-wrap .coin-01,
.winner-wrap .coin-02,
.winner-wrap .coin-03 {
    right: 0;
    top: 0;
    position: absolute;
    z-index: 5;
}

.winner-wrap .coin-01 {
    width: 2.81%;
    max-width: 50px;
    right: 10%;
    top: -3%;
    animation: winwrapCoin01 2s ease infinite;
}

@keyframes winwrapCoin01 {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
    10% { transform: rotate(0deg); }
}

.winner-wrap .coin-02 {
    width: 2.99%;
    max-width: 53px;
    right: 12%;
    top: 27%;
    animation: winwrapCoin02 2s ease infinite;
}

@keyframes winwrapCoin02 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-45deg); }
    50% { transform: rotate(25deg); }
    10% { transform: rotate(0deg); }
}

.winner-wrap .coin-03 {
    width: 2.99%;
    max-width: 53px;
    right: 4%;
    top: 8%;
    animation: winwrapCoin03 3s ease infinite;
}

@keyframes winwrapCoin03 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(45deg); }
    50% { transform: rotate(-25deg); }
    10% { transform: rotate(0deg); }
}


/* Latest Bet */

.latestbet-section {
    margin: 30px 0 20px;
}

.latestbet-table {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    padding: 20px;
}

.lb-table,
.lb-table li {
    width: 100%;
}

.lb-table .lb-tr {
    width: 100%;
    height: 50px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
    border-radius: 10px;
}

.lb-table .lb-td {
    width: calc(24.99% - 16px);
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-table.head .lb-tr {
    background-color: #161515;
    margin-bottom: 2px;
}

.lb-table.body .lb-tr {
    height: 80px;
    background-color: #0d0c0c;
    margin: 2px 0;
    cursor: pointer;
    transition: 0.3s;
}

.lb-table.body .lb-tr:nth-child(even) {
    background-color: #161515;
}

.lb-table.body .lb-tr:hover {
    background-color: #212020;
}

.lb-table.body .lb-td {
    font-size: 16px;
}

.lb-table .game-td {
    max-width: 80px;
}

.lb-table.body .name-td {
    justify-content: flex-start;
    padding-left: 10px;
}

.lb-table.body .amount-td {
    font-size: 18px;
}

.lb-table .game-panel {
    width: 60px;
    overflow: hidden;
    border-radius: 10px;
    border: solid 2px #000000;
}

.lb-table .game-panel img {
    animation: lbGameImg 1s ease infinite;
}

@keyframes lbGameImg {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}


/* Company Section */

.company-section {
    margin: 20px 0 30px;
}

.company-swiper .swiper-slide {
    padding: 0 2px;
}

.company-swiper a {
    width: 100%;
    height: 56px;
    background-color: #222222;
    border-radius: 10px;
}

.company-swiper a:hover {
    background-color: #333333;
}

.company-swiper a img {
    max-width: 60%;
    max-height: 30px;
}


/* Footer Section */

.footer-section {
    width: 100%;
    max-width: 1200px;
    height: 77px;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 100;
    filter: drop-shadow(0 -2px 0 var(--primary));
}

.footer-section .footer-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(#161515, #222222);
    border-radius: 15px;
    --r: 48px;
    --s: 36px;
    --a: 23deg;
    --_m: 0 / calc(var(--r) * 2) var(--r) no-repeat radial-gradient(50% 100% at bottom, #000 calc(100% - 1px), #0000);
    --_d: (var(--s) + var(--r)) * cos(var(--a));
    -webkit-mask: calc(50% + var(--_d)) var(--_m), calc(50% - var(--_d)) var(--_m), radial-gradient(var(--s) at 50% calc(sin(var(--a)) * -1 * var(--s)), transparent 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--_d)), transparent 0 calc(50% + var(--_d)), #000 0);
    mask: calc(50% + var(--_d)) var(--_m), calc(50% - var(--_d)) var(--_m), radial-gradient(var(--s) at 50% calc(sin(var(--a)) * -1 * var(--s)), transparent 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--_d)), transparent 0 calc(50% + var(--_d)), #000 0);
}

.mobile-menu {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.mobile-menu .menu-btn {
    width: calc(20% - 20px);
    max-width: 67px;
    margin: 0 10px 26px;
    background-color: transparent;
    border: none;
    font-size: 12px;
    color: #ffffff;
    border-radius: 10px;
    padding: 2px 0;
    position: relative;
}

.mobile-menu .menu-btn:nth-child(3) {
    margin-bottom: 50px;
}

.mobile-menu .menu-btn .icon-panel {
    width: 44px;
    position: relative;
    font-size: 28px;
    color: #cccccc;
    margin: 0 0;
}

.mobile-menu .menu-btn .icon-panel .active-img {
    position: absolute;
    left: 0;
    top: 2px;
    transition: 0.3s;
    opacity: 0;
}

.mobile-menu .menu-btn.active .icon-panel .active-img {
    opacity: 1.0;
}

.mobile-menu .menu-btn .icon-panel.w-100 {
    max-width: 63px;
    margin: 0 0 5px;
}

.mobile-menu .menu-btn .icon-panel .glow-img {
    position: absolute;
    left: 0;
    top: 0;
}

.mobile-menu .menu-btn:nth-child(3) .icon-panel {
    width: 62px;
}

.mobile-menu .menu-btn .title {
    display: inline-block;
    width: 100%;
    margin: 0 0 -2px;
    position: relative;
    top: 3px;
}


/* Sn Overlay */

.sn-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 110;
    background-color: rgba(10, 10, 10, 0.5);
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
}

.sn-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


/* Sidebar Right */

.sidebar-right {
    width: 100%;
    max-width: 448px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: #111111;
    transform: translateX(100%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    z-index: 120;
    transition: 0.3s;
    padding: 60px 66px 20px;
    overflow-y: auto;
}

.sidebar-right::-webkit-scrollbar {
    width:0px;
    background:transparent;
}

.sidebar-right::-webkit-scrollbar-thumb {
    background:transparent;
}

.sidebar-right.active {
    transform: translateX(0);
}

.divider {
    width: 100%;
    height: 1px;
    margin: 20px 0;
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-right .sidebar-wrap {
    width: 100%;
    min-height: 100%;
    padding: 0 0 95px;
}

.sidebar-right .sb-header {
    position: relative;
    padding: 0 0 10px;
}

.sidebar-right .logo {
    width: 180px;
    position: relative;
    margin: 0 auto;
}

.close-sb {
    color: var(--font-darker);
    position: absolute;
    font-size: 26px;
    background-color: transparent;
    border: none;
    right: 0;
}

.sidebar-right .navigation {
    width: 100%;
}

.sidebar-right .navigation a {
    width: 100%;
    height: 50px;
    margin: 0 0 8px;
    font-size: 18px;
    padding: 0 24px;
    color: var(--font-darker);
    background-color: #222222;
    font-weight: 400;
}

.sidebar-right .navigation a .iconify {
    margin-right: 10px;
    color: var(--font-primary);
}

.sidebar-right .navigation a:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.sidebar-right .navigation a:hover .iconify {
    color: #ffffff;
}

.after-login .account-info {
    width: 100%;
    padding: 8px 10px 8px 20px;
    border-radius: 50px;
    background-color: #3a3a3a;
    color: #cccccc;
    text-align: left;
    font-size: 14px;
    margin: 0 0 5px;
}

.after-login .account-info .icon-panel {
    width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    margin: -4px 8px -4px -15px;
    padding: 2px 0 0;
}

.after-login .account-info .icon-panel img {
    max-height: 34px;
}

.after-login .account-info .amount {
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
}

.after-login .account-info button {
    width: 100px;
    height: 36px;
    margin-left: 3px;
}

.after-login .account-info .deposit-link,
.after-login .account-info .withdraw-link {
    width: 70px;
    height: 36px;
}

.sidebar-right .sidebar-footer {
    margin: -95px 0 0;
}

.sidebar-right .logout-btn {
    width: 100%;
    height: 43px;
    border-radius: 25px;
    border: solid 1px var(--primary);
    color: var(--primary);
    background-color: rgba(0, 0, 0, 0.15);
    font-weight: 500;
    font-size: 18px;
}


/* Subpages */

.subpage-wrapper {
    width: 100%;
    background-color: #2a2a2a;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.subpage-header {
    margin: 0 0 15px;
    overflow: hidden;
}

.indicator-ul {
}

.indicator-ul li {
    padding: 0 20px;
    font-size: 18px;
}

.indicator-ul li:first-child {
    padding-left: 0;
}

.indicator-ul li:before,
.indicator-ul li:after {
    width: 1px;
    height: 40%;
    background-color: #555555;
    right: 0;
}

.indicator-ul li:before {
    top: 10%;
    transform-origin: bottom center;
    transform: rotate(-20deg);
}

.indicator-ul li:after {
    bottom: 10%;
    transform-origin: top center;
    transform: rotate(20deg);
}

.indicator-ul li:last-child {
    padding-right: 10px;
}

.indicator-ul li:last-child:before,
.indicator-ul li:last-child:after {
    display: none;
}

.indicator-ul li a {
    color: var(--font-darker);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.indicator-ul li a .iconify {
    margin-right: 10px;

}

.subpage-header .back-link .iconify {
    width: 28px;
    height: 28px;
    color: var(--font-darker);
}

.subpage-header .nav-group button {
    padding: 0 15px;
    margin-left: 5px;
    height: 30px;
    white-space: nowrap;
}

.subpage-header .nav-group .info-btn {
    background-color: transparent;
    border: none;
    padding: 0;
}

.subpage-header .nav-group .info-btn .iconify {
    width: 32px;
    height: 32px;
}

.share-btn .iconify {
    width: 16px;
    height: 16px;
}


/* News Card */

.news-card {
    width: calc(33.33% - 16px);
    margin: 0 8px 10px;
    background-color: #333333;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    padding: 20px;
}

.news-card .c-panel {
    overflow: hidden;
    width: 100%;
    border-radius: 20px;
    margin: 0 0 10px;
    position: relative;
}

.news-card .c-info .title {
    font-size: 18px;
    font-weight: 600;
}

.news-card .c-info .text {
    word-wrap: break-word;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-card button {
    min-height: 35px;
    margin: 10px 0;
}

.news-card .count-panel {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 25px;
    padding: 0 20px 0 15px;
}

.view-img {
    width: 100%;
    max-width: 640px;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px auto 30px;
}

.subpage-panel .promotion-card {
    width: calc(25% - 16px);
    margin: 0 8px 16px;
    padding-bottom: 70px;
}

.promotion-card .p-footer {
    width: calc(100% - 40px);
    position: absolute;
    left: 20px;
    bottom: 20px;
}

.event-card-h {
    width: calc(50% - 20px);
    margin: 0 10px 20px;
    background-color: #3a3a3a;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    padding: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.event-card-h.active {
    animation: eventCardAnim 2s ease infinite;
}

@keyframes eventCardAnim {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1.0); }
}

.card-active {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.card-active:before,
.card-active:after {
    content: '';
    position: absolute;
    z-index: -1;
}

.card-active:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, transparent, var(--primary), transparent);
    animation: eventBorder 2s linear infinite;
    opacity: 0;
}

.card-active:before {
    opacity: 1.0;
}

@keyframes eventBorder {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.card-active:after {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 20px;
    background-color: #444444;
}

.event-card-h .e-panel {
    width: 100%;
    position: relative;
}

.event-card-h .img-panel {
    width: 100px;
}

.event-card-h .text-panel {
    width: calc(100% - 100px);
    padding-left: 20px;
}

.event-card-h .share-btn {
    width: 66px;
    height: 24px;
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
}


/* Table Drop */

.table-drop .tr {
    width: 100%;
    background-color: #333333;
    border-radius: 20px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
    padding: 0 12px;
    margin: 15px 0;
}

.table-drop .tr .depth-click {
    width: 100%;
    height: 48px;
    border: none;
    background-color: transparent;
    font-size: 16px;
    color: #cccccc;
}

.table-drop .tr .depth-click .title {
    width: calc(100% - 30px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.table-drop .tr .depth-click .arrow-icon {
    display: inline-block;
    transition: 0.3s;
    transform: rotate(0deg);
    font-size: 24px;
}

.table-drop .tr .depth-click.active .arrow-icon {
    transform: rotate(180deg);
}

.table-drop .tr .message-panel {
    width: 100%;
    display: none;
    padding-bottom: 10px;
    font-size: 16px;
}


/* Profit Page */

.profit-steps {
    width: calc(100% + 20px);
    margin: 0 -10px;
}

.profit-card {
    width: calc(25% - 20px);
    margin: 0 10px 20px;
    background-color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 8px 16px 16px;
}

.profit-card:after {
    border-radius: 10px;
}

.profit-card .title-panel {
    width: 100%;
    position: absolute;
    left: 0;
    top: 10px;
}

.profit-card .card-panel {
    padding: 7.82%;
    margin: 20px 0;
}

.profit-card .card-badge {
    width: calc(100% - 32px);
    height: 90px;
    color: #ffffff;
    background-image: linear-gradient(var(--header-secondary), var(--header-middle));
    align-content: flex-start;
    border-radius: 20px;
    padding: 8px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    margin: 0 auto;
}

.profit-card .card-badge .amount {
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.profit-card .card-badge .sub {
    width: 100%;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 -5px;
}

.profit-card .card-badge .time {
    font-weight: 700;
}

.profit-card .card-badge button {
    width: 100%;
    height: 35px;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 16px;
}

.profit-card.card-active .card-badge button {
    animation: profitCardAnim 1s ease infinite;
}

@keyframes profitCardAnim {
    0% { transform: scale(1.0); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1.0); }
}

.pt-mobile {
    display: none;
}

.profit-table th {
    height: 42px;
    color: #000000;
    font-size: 16px;
    background-color: #ffb800;
    border: solid 1px #ffb800;
}

.profit-table th:first-child {
    background-color: transparent;
    border: none;
}

.profit-table td {
    color: #ffffff;
    font-size: 16px;
    height: 26px;
    background-color: #000000;
    border: solid 1px #ffb800;
}

.profit-table tbody tr:last-child td {
    color: #ffb800;
}

.mobile .profit-table th {
    height: 26px;
    color: #ffffff;
    background-color: #000000;
    border: solid 1px #ffb800;
}

.mobile .profit-table th:first-child {
    background-color: transparent;
    border: none;
}

.mobile .profit-table td:first-child {
    color: #000000;
    background-color: #ffb800;
    border: solid 1px #ffb800;
}

.mobile .profit-table td:last-child {
    color: #ffb800;
}

.mobile .profit-table tbody tr:last-child td {
    color: #ffffff;
}

.mobile .profit-table tbody tr:last-child td:first-child {
    color: #000000;
}

.mobile .profit-table tbody tr:last-child td:last-child {
    color: #ffb800;
}


/* Cashback */

.cashback-form {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

.cashback-form button {
    width: 100%;
    height: 35px;
}

.loss-amount {
    padding: 16px;
    border: solid 1px var(--primary);
}

.loss-amount .amount {
    font-size: 20px;
}

.panel-gray ul,
.panel-gray ul li {
    width: 100%;
    font-size: 16px;
    color: var(--font-darker);
    justify-content: flex-start;
    text-align: left;
}


/* Video */

.video-frame {
    width: 100%;
    height: 620px;
    border-radius: 20px;
    overflow: hidden;
}

.video-frame video {
    width: 100%;
}

.video-frame .chest-panel {
    width: 30%;
    position: absolute;
}

.video-frame .chest-panel .open {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
}

.reward-btn {
    height: 40px;
    width: 100%;
    max-width: 300px;
    font-size: 16px;
}


/* Refferal Code */

.referral-code {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    margin: 0 auto;
    border: solid 1px #d1d1d1;
}

.referral-code .rcode-input {
    width: 100%;
    height: 44px;
    padding: 0 24px;
    border-radius: 10px;
    background-color: #4d4d4d;
}

.referral-code button {
    width: 100%;
    height: 40px;
    margin: 10px 0;
}


/* Chart Box */

.pyramid-chart {
    width: calc(100% + 90px);
    margin: 40px -45px 0;
}

.chart-box {
    width: calc(33.33% - 90px);
    min-height: 175px;
    margin: 45px;
    background-color: #111111;
    border-radius: 10px;
    border: solid 1px var(--primary);
    position: relative;
    color: var(--font-gray);
    font-size: 16px;
    padding: 40px 20px 15px;
}

.chart-box:before {
    content: '';
    width: 1px;
    height: 45px;
    position: absolute;
    bottom: -45px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-image: repeating-linear-gradient(var(--primary) 0 12px, transparent 13px 24px);
}

.chart-box .title {
    color: var(--font-darker);
    font-size: 20px;
}

.chart-box .star-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    top: 35px;
    background-color: var(--primary);
    color: #ffffff;
    font-size: 50px;
}

.chart-row {
    padding-top: 45px;
    position: relative;
}

.chart-row:before {
    content: '';
    width: 66.66%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-image: repeating-linear-gradient(to right, var(--primary) 0 12px, transparent 13px 24px);
}

.chart-row .chart-box .star-badge {
    width: 80px;
    height: 80px;
    font-size: 44px;
}

.chart-row .chart-box:before {
    height: 90px;
    bottom: absolute;
    top: -90px;
}

.chart-box ul,
.chart-box ul li {
    width: 100%;
}

.chart-box ul li .labels {
    width: 55%;
    text-align: left;
}

.chart-box ul li .info {
    width: 45%;
    text-align: right;
}


/* Gamelist Page */

.gl-home {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

.gl-home .iconify {
    width: 24px;
    height: 24px;
}

.gamelist-container {
    width: calc(100% + 8px);
    margin: 0 -4px;
}

.gamelist-container .game-btn {
    width: calc(14.28% - 8px);
    margin: 0 4px 15px;
}

.search-input {
    width: 100%;
    height: 42px;
    background-color: #222222;
    border: solid 1px var(--primary);
    border-radius: 25px;
}

.search-input input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    padding: 0 12px;
    font-size: 16px;
    color: #ffffff;
}


/*=========================================================== M O D A L ===============================================================*/

.modal-backdrop {
    background-color: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(5px);
}

.modal-backdrop.show {
    opacity: 1.0;
}

.modal {
    padding: 0 15px !important;
    overflow-y: auto;
}

.modal::-webkit-scrollbar {
    width: 0;
}

.secondary-modal {
    z-index: 1060;
}

.modal-backdrop.secondary {
    z-index: 1055;
}

.modal-dialog {
    max-width: 440px;
    padding: 0 !important;
    margin: 20px auto !important;
}

.size-md .modal-dialog {
    max-width: 500px;
}

.size-lg .modal-dialog {
    max-width: 680px;
}

.joinModal .modal-dialog {
    max-width: 860px;
}

.profitModal .modal-dialog {
    max-width: 1165px;
}

.modal-wrapper button {
    min-height: 35px;
}

.modal-content {
    background-color: transparent;
    border: none;
    border-radius: 0px;
}


/* Modal Close */

.modal .close-btn {
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    position: absolute;
    right: 15px;
    top: 15px;
}

.modal .close-btn:before,
.modal .close-btn:after {
    width: 2px;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #666666;
    transition: 0.3s;
}

.modal .close-btn:before {
    transform: rotate(-45deg);
}

.modal .close-btn:after {
    transform: rotate(45deg);
}

.modal .close-btn:hover:before {
    transform: rotate(-135deg);
    background-color: #dd3000;
}

.modal .close-btn:hover:after {
    transform: rotate(-45deg);
    background-color: #dd3000;
}

.modal .logo-2 {
    margin: 0 auto;
}


/* Modal Wrapper */

.modal-wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: #2a2a2a;
    border-radius: 15px;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 32px 32px 32px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}


/* Modal Panel */

.modal-panel {
    width: 100%;
    position: relative;
}

.modal-title {
    margin: 50px 0 10px;
    font-size: 16px;
    color: var(--font-darker);
}

.modal-title h3 {
    font-size: 24px;
}

.modal-title h4 {
    font-size: 20px;
}

.modal-title h5 {
    font-size: 18px;
}


/* Form Container */

.form-container {
    width: 100%;
    max-width: 1024px;
    display: inline-block;
    position: relative;
    z-index: 2;
    margin: 10px 0 0;
}

.form-container .form-group {
    width: 100%;
    display: inline-block;
    margin: 0 0 15px;
}

.form-container .form-group:last-child {
    margin: 0 0;
}

.form-container .labels {
    width: 100%;
    text-align: left;
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 2px;
    color: var(--font-darker);
}

.form-container .labels .icon-img {
    max-width: 22px;
}

.form-container .infos {
    width: 100%;
    display: flex;
    align-items: center;
}

.form-container .form-group .input-container {
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(56, 61, 68, 0);
    border: solid 1px rgba(56, 61, 68, 0);
}

.form-container .form-group .input-container.phone-code {
    min-width: 95px;
    max-width: 95px;
    margin-right: 2px;
}

.form-container .form-group .input-container.phone-code .flag-icon {
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
}

.form-container .form-group .input-container.phone-code input {
    padding-left: 40px;
}

.form-container .form-group.w-icon .input-container {
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 0 5px;
}

.form-container .w-btn .input-container {
    width: calc(100% - 165px);
}

.form-container .w-btn-sm .input-container {
    width: calc(100% - 105px);
}

.form-container .form-group .input-container .icon-panel{
    width: 40px;
    height: 40px;
    color: var(--font-darker);
    font-size: 20px;
}

.form-container .form-group input {
    width: 100%;
    height: 42px;
    float: left;
    color: #ffffff;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: 0.3s;
    padding: 0 15px;
}

.form-container .form-group input:disabled {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--font-darker);
}

.form-container .form-group.w-icon input {
    width: calc(100% - 40px);
    background-color: rgba(56, 61, 68, 0);
    border: solid 1px rgba(56, 61, 68, 0);
    padding-left: 0;
}

.form-container .form-group input::-webkit-input-placeholder {
    color: #8d8d8d;
}

.form-container .form-group input::placeholder {
    color: #8d8d8d;
}

.form-container .infos .symbol {
    position: absolute;
    right: 15px;
}

.form-container .form-group .input-container .icon-side {
    right: 10px;
    position: absolute;
    font-size: 20px;
    color: #6d6d6d;
    cursor: pointer;
}

.form-container .form-group .input-container .icon-side:hover {
    color: var(--primary);
}

.select-input {
    width: 100%;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 5px;
}

.select-input.w-icon-img {
    padding-left: 20px;
}

.select-input:last-child {
    margin-right: 0;
}

.select-input select {
    width: 100%;
    height: 100%;
    border: none;
    color: #8d8d8d;
    font-size: 16px;
    background-color: transparent;
    -webkit-appearance: none;
    padding: 0 20px;
    cursor: pointer;
}

.form-container .w-icon .select-input select {
    padding-left: 65px;
}

.select-input select option {
    background-color: #1f0a0a;
    color: #fff;
}

.select-input .icon-img {
    max-width: 24px;
    position: absolute;
    left: 10px;
    pointer-events: none;
}

.select-input i {
    color: #8d8d8d;
    font-size: 28px;
    position: absolute;
    right: 0;
    pointer-events: none;
}

.form-container .form-group textarea {
    width: 100%;
    height: 200px;
    float: left;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    font-size: 16px;
    transition: 0.3s;
    padding: 20px 18px;
    resize: none;
}

.form-container .form-group .form-btn {
    width: 160px;
    height: 44px;
    float: right;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    transition: 0.3s;
    margin: 0 0 0 5px;
    font-size: 14px;
    border-radius: 5px;
}

.form-container .w-btn-sm .form-btn {
    width: 100px;
}

.qr-code {
    width: 80%;
    max-width: 200px;
}


/* Form Btn Group */

.form-container .form-group .infos .btn-grp {
    width: calc(100% + 4px);
    float: left;
    margin: 0 -2px;
}

.form-container .form-group .infos .btn-grp button {
    width: calc(33.33% - 4px);
    height: 38px;
    float: left;
    margin: 0 2px 4px;
    font-size: 16px;
}


/* Modal Footer */

.modal-footer {
    width: 100%;
    border: none;
    margin: 40px auto 0;
    padding: 0;
}

.form-footer {
    width: calc(100% + 10px);
    margin: 0 -5px;
    flex-wrap: nowrap;
}

.form-footer button {
    width: 100%;
    max-width: 240px;
    height: 50px;
    margin: 0 5px;
    font-size: 18px;
}

.form-footer button.size-sm {
    max-width: 150px;
}

.form-footer button.size-lg {
    max-width: 300px;
}

.have-account {
    font-size: 14px;
    margin: 20px 0 0;
}

.have-account a {
    color: var(--primary);
    text-decoration: underline;
    margin-left: 10px;
}

.text-underline {
    color: var(--primary);
    text-decoration: underline;
}

.font-sz-16 { font-size: 16px; }

.font-sz-18 { font-size: 18px; }


/* Modal Tabs */

.modal-tab {
    width: 100%;
    position: static;
}

.tab-menu {
    width: 100%;
    max-width: 200px;
    padding: 4px;
    background-color: #333333;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-radius: 25px;
    margin: 0 auto 10px;
}

.tab-menu.dw-menu {
    max-width: 140px;
}

.tab-menu button {
    width: 100%;
    height: 36px;
    border-radius: 25px;
    border: solid 1px rgba(255, 255, 255, 0);
    background-color: transparent;
    color: #999999;
}

.tab-menu button.active {
    background-color: #3d1212;
    color: #ffffff;
    border-color: var(--primary);
}

.tab-wrapper {
    align-items: stretch;
    align-content: stretch;
}

.modal-tab .tab,
.modal-tab .tab-sub {
    width: 100%;
    min-height: 100%;
    display: none;
    animation: tabAnim 0.5s ease forwards;
}

@keyframes tabAnim {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.modal-tab .tab.active,
.modal-tab .tab-sub.active {
    display: block;
}


/* Sheets Tab */

.sheet-tab, .withdraw-tab {
    display: none;
    animation: tabAnim 0.5s ease forwards;
}

.sheet-tab.active, .withdraw-tab.active {
    display: block;
}

.sheet-back {
    position: absolute;
    left: -5px;
    top: -80px;
    font-size: 18px;
}

.sheet-back i {
    font-size: 28px;
}


/* Notification List */

.notif-card {
    width: 100%;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    padding: 0 0 8px;
    margin: 0 0 8px;
    text-align: left;
    cursor: pointer;
}

.notif-card .title {
    font-size: 18px;
}

.notif-card .category {
    font-size: 16px;
}


/* BS Table */

.bs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 3px;
}

.bs-table.one-th {
    border-spacing: 0 2px;
}

.bs-table thead th {
    height: 50px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: var(--header-bg);
}

.bs-table thead th:first-child {
    border-radius: 8px 0 0 8px;
}

.bs-table thead th:last-child {
    border-radius: 0 8px 8px 0;
}

.one-th thead th {
    border-radius: 8px !important;
}

.bs-table tr {
    cursor: pointer;
}

.bs-table tr td {
    height: 40px;
    color: #ffffff;
    text-align: center;
    padding: 1px;
    transition: 0.3s;
    background-color: rgba(255, 255, 255, 0.05);
}

.bs-table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.1);
}

.bs-table tr td:first-child {
    border-radius: 8px 0 0 8px;
}

.bs-table tr td:last-child {
    border-radius: 0 8px 8px 0;
}

.bs-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.15);
}

.bs-table tr td a {
    color: #000000;
    transition: 0.3s;
    display: inline-block;
    vertical-align: middle;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.bs-table tr td a:hover {
    color: #f57224;
    text-decoration: underline;
}

.bs-table tr .count-td {
    width: 50px;
}

.bs-table tr .count-tag {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}

.bs-table tr .title-td {
    text-align: left;
    padding-left: 15px;
    max-width: 590px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-table tr .status-td {
    width: 15%;
    padding-left: 5px;
}

.bs-table tr .date-td {
    width: 20%;
    color: #565454;
}

.bs-table tr .nav-td {
    width: 40px;
}

.bs-table tr td .delete-btn {
    background-color: transparent;
    border: none;
    color: #999999;
    font-size: 18px;
    transition: 0.3s;
}

.bs-table tr td .delete-btn:hover {
    color: #ff4444;
}

.bs-table tr td .plus-btn {
    width: 18px;
    height: 18px;
    min-height: auto;
    background-color: var(--primary);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    padding: 0 0 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.bs-table tr td .plus-btn:hover {
    background-color: var(--btn-hover);
}

.bs-table tr td .plus-btn:before,
.bs-table tr td .plus-btn:after {
    content: '';
    width: 2px;
    height: 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    background-color: #ffffff;
    transition: 0.3s;
}

.bs-table tr td .plus-btn:after {
    transform: rotate(90deg);
}

.bs-table tr.active td .plus-btn:before {
    height: 0;
}

.bs-table tr td .plus-btn:hover:before,
.bs-table tr td .plus-btn:hover:after {
    background-color: #ffffff;
}

.new-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
    margin-left: 5px;
    background-color: #d91d09;
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    padding: 1px 0 0;
}


/* With Depth */

table.with-depth {
    border-spacing: 0 2px;
}

.with-depth .message-content {
    display: none;
    height: 200px;
    margin: 2px 0 5px;
}

.with-depth tr.depth-click {
    cursor: pointer;
}

.with-depth tr.dropdown {
    background-color: transparent;
}

.with-depth tr.dropdown td {
    padding: 0;
    border: none;
    height: auto;
    box-shadow: none;
}

.with-depth tr.dropdown td {
    background-color: transparent;
    border: none;
}

.with-depth tr.dropdown:hover td {
    background-color: transparent;
    border: none;
}


/* Message Content */

.message-content {
    width: 100%;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.15);
    margin: 5px 0 0;
    border-radius: 8px;
    padding: 10px;
}

.message-content .inner-container {
    width: 100%;
    height: 100%;
    float: left;
    color: #ffffff;
    white-space: pre-wrap;
    text-align: left;
    overflow-y: scroll;
    padding: 5px 10px;
}


/* Level Information */

.bs-table td .level-icon {
    margin-right: 8px;
}

.bs-table td .level-txt {
    display: inline-block;
    width: 45px;
    text-align: left;
    white-space: nowrap;
}

.level-information .bs-ul {
    width:calc(100% - 310px);
}

.level-information .bs-ul li {
    width:calc(50% - 10px);
    height: 40px;
    margin-right: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.level-information .bs-ul li .labels {
    color: rgba(0, 0, 0, 1.0);
    margin-right: 10px;
    color: #cccccc;
}

.level-information .bs-ul li .amount {
    font-size: 14px;
}

.level-information .point-form{
    width:310px;
    height:100%;
    position:relative;
    border-radius: 0;
}

.level-information .point-form input{
    width:calc( 100% - 115px);
    height:38px;
    padding:0 5px;
    color:#ffffff;
    background-color:rgba(255, 255, 255, 0.03);
    border:solid 1px rgba(255, 255, 255, 0.08);
    margin-right: auto;
    border-radius: 8px;
}

.level-information .point-form input::-webkit-input-placeholder{
    color: #999999;
}

.level-information .points-btn{
    width:110px;
    height:38px;
    border-radius: 8px;
    box-shadow: none;
    white-space:nowrap;
    box-shadow: none;
    font-size: 12px;
}

.level-information .points-btn:before,
.level-information .points-btn:after {
    border-radius: 8px;
}


/* Pagination */

.pagination {
    font-size: 16px;
    margin: 20px 0 0;
}

.pagination button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: #666666;
    color: #cccccc;
    font-size: 20px;
}

.pagination button:hover {
    background-color: #888888;
    color: #ffffff;
}


/* No Data */

.no-data {
    width: 100%;
    min-height: 360px;
    pointer-events: none;
    font-size: 18px;
}

.no-data img {
    width: 60px;
}


/* Language Modal */

.language-options button {
    width: 100%;
    height: 52px;
    border-radius: 30px;
    margin: 8px 0;
    font-size: 16px;
}

.language-options button .flag-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 5px;
}

.language-options button .text {
    display: inline-block;
    min-width: 60px;
}


/* Avatar Wrap */

.avatar-wrap .avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    position: relative;
}

.avatar-wrap .avatar .hover {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    transition: 0.3s;
    border-radius: 50%;
    border: solid 2px var(--primary);
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 26px;
    opacity: 0;
}

.avatar-wrap .avatar:hover .hover {
    opacity: 1.0;
}


/* Manage Account */

.account-ul {
    padding: 10px;
}

.account-ul, .account-ul li {
    width: 100%;
}

.account-ul li {
    height: 40px;
    color: var(--font-darker);
    justify-content: flex-start;
}

.account-ul li .icon-panel {
    width: 24px;
    margin-right: 10px;
}

.account-ul li .icon-panel img {
    width: 24px;
    border-radius: 50%;
}

.account-ul li .icon-panel .iconify {
    width: 24px;
    height: 24px;
}

.form-must {
    padding: 5px 10px;
}

.form-must li {
    height: 26px;
}

.form-must li .check {
    margin-right: 10px;
}


/* Money Modal */

.payment-method-menu button {
    width: 100%;
    height: 60px;
    border-radius: 15px;
    border-width: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    padding: 0 20px;
    margin: 8px 0;
}

.payment-method-menu button:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.payment-method-menu button .icon-panel {
    width: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.providers-channel button {
    width: 100%;
    height: 70px;
    color: #6d6d6d;
    background-color: #ffffff;
    border: solid 2px #d1d1d1;
    border-radius: 10px;
    margin: 5px 0;
    padding: 0 8px;
    justify-content: flex-start;
    position: relative;
}

.providers-channel button.active {
    border-color: var(--primary);
}

.providers-channel button .icon-panel {
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.providers-channel button .checkbox {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: solid 1px #d1d1d1;
    transition: 0.3s;
}

.providers-channel button.active .checkbox {
    background-color: #28c76f;
    border-color: #28c76f;
    background-image: url(../img/icon/check.svg);
    background-size: 100% 100%;
}


/* Withdraw */

.remaining-balance {
    height: 80px;
}

.remaining-balance .amount {
    width: 100%;
    font-size: 20px;
}

.method-options {
    width: calc(100% + 10px);
    margin: 0 -5px 20px;
}

.method-options button {
    width: calc(50% - 10px);
    max-width: 138px;
    padding: 12px 5px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    margin: 0 5px;
}

.method-options button.active {
    color: #ffffff;
    background-color: var(--primary);
}

.method-options button .icon-panel img {
    max-width: 25px;
}

.method-options button.active .icon-panel .bank-icon {
    filter: brightness(0) invert(1);
}

.form-container.not-ready .form-group:last-child,
.form-container.not-ready .labels .text-red {
    display: none !important;
}

.withdraw-conditions {
    width: 100%;
    background-color: #f4f4f4;
    border: solid 1px #1a8754;
    border-radius: 10px;
    padding: 16px;
    margin: 10px 0 0;
}


/* Progress Panel */

.progressbar-panel {
    padding: 10px;
    background-color: #333333;
    border-radius: 20px;
}

.after-login .progressbar-panel {
    padding-left: 10px;
    border-radius: 20px;
}

.progressbar-panel .text-panel {
    padding-left: 5px;
}

.progressbar-panel .pb-labels {
    width: 100%;
    font-size: 12px;
    padding: 0 5px;
}

.progressbar-panel .progressbar {
    width: 100%;
    height: 18px;
    border-radius: 10px;
    background-color: #1a1a1a;
    border: solid 2px #1a1a1a;
    position: relative;
    overflow: hidden;
    margin: 0 0 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.progressbar-panel .progressbar .percent {
    width: 75%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    border-radius: 25px;
    overflow: hidden;
    z-index: 1;
}

.progressbar-panel .progressbar .percent.w-70 { width: 70%; }
.progressbar-panel .progressbar .percent.w-90 { width: 90%; }
.progressbar-panel .progressbar .percent.w-20 { width: 20%; }

.progressbar-panel .progressbar .percent:before {
    content: '';
    width: 200%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, #0bb74b, #22c55e, #0bb74b, #22c55e, #0bb74b);
    position: absolute;
    z-index: -1;
    animation: progressbarAnim 0.5s linear infinite;
}

@keyframes progressbarAnim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* Attendance Modal */

.attendance-info {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    background-color: #111111;
    margin: 0 0 15px;
    padding: 0 15px;
}

.attendance-nav {
    margin-left: auto;
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attendance-nav .nav-btn {
    width:auto;
    height:auto;
    background-color:transparent;
    border:none;
    color: #ffffff;
    font-size:24px;
}

.attendance-nav .nav-btn:hover {
    color: #ff6700;
}

.attendance-info table {
    width: auto;
    border-collapse: separate;
    border-spacing: 5px 0;
}

.attendance-info table td {
    height: 40px;
    color: #ffffff;
    padding: 0 20px 0 0;
}

.attendance-info table td i{
    position: relative;
    margin-right: 0;
    font-size: 18px;
}


/* Calendar */

.attendance-calendar {
    width: 100%;
    border-spacing: 1px;
    border-collapse: separate;
}

.attendance-calendar th {
    color: #fff;
    font-size: 12px;
    height: 40px;
    font-weight: normal;
    text-align:center;
    background-color: #666666;
}

.attendance-calendar th.active {
    background-color: #444444;
}

.attendance-calendar td {
    width: 14.28%;
    height: 120px;
    text-align: center;
    background-color: #3a3a3a;
    border: none;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}

.attendance-calendar td:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.attendance-calendar td.active {
    background-color: rgba(41, 57, 76, 1.0);
}

.attendance-calendar td.empty{
    pointer-events:none;
    background-color: rgba(0, 0, 0, 0.05);
}

.attendance-calendar td.today {
    background-color: #444444;
    border: solid 1px #4a4a4a;
}

.attendance-calendar td .date {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #cccccc;
    font-size:14px;
    position: absolute;
    left:5px;
    top:5px;
}

.attendance-calendar td.today .date {
    height: 30px;
    color: var(--text-prime);
    font-size: 20px;
    left: 0;
    top: 0;
    border-radius: 0 0 15px 0;
}

.attendance-calendar td.empty .date {
    color: rgba(0, 0, 0, 0.25);
}

.attendance-calendar td .info-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    opacity: 0;
    transform: scale(0);
    transition: 0.3s;
}

.attendance-calendar td.attended .info-panel {
    opacity: 1;
    transform: scale(1.0);
}

.attendance-calendar td .attend-stamp {
    width: 50px;
}

.attendance-calendar td .attend-stamp:before {
    content: '';
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 50%;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    position: absolute;
    border:solid 1px rgba(0, 0, 0, 0.75);
}

.attendance-calendar td .info-panel .info{
    width: 100%;
    text-align: center;
    display: inline-block;
    color: #ffffff;
}

.attendance-calendar td .info i{
    color: #eb7413;
    margin-right: 5px;
}


/* Gamelist Modal */

.gamelistModal .modal-dialog {
    max-width: 1200px;
}

.gamelist-title {
    min-width: 340px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--primary);
    color: #ffffff;
    font-size: 20px;
    margin: 0 auto 15px;
}

.gamelist-container.gamelist-scroll {
    width: calc(100% + 8px);
    align-items: stretch;
    align-content: stretch;
    max-height: 580px;
    overflow-y: scroll;
    margin: 0 -8px 0 0;
    padding: 10px 5px 0 0;
}


/* Wheel Container */

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@import url('https://fonts.cdnfonts.com/css/futura-pt');
.wheel-container {
    width: 100%;
    max-width: 632px;
    margin: 3% auto;
    position: relative;
}

.wheel-wrap {
    position: relative;
    z-index: 5;
    animation: whlWrapAnim 1s ease 1 backwards;
}

@keyframes whlWrapAnim {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }
    100% {
        opacity: 1.0;
        transform: translateY(0);
    }
}

.wheel-wrap .border-img {
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    position: absolute;
}

.wheel-spin {
    width: 90.04%;
    position: absolute;
    margin: 0 0 0.5% 0.5%;
}

.play .wheel-spin {
    animation: wheelPlay 5s ease 1 forwards;
}

@keyframes wheelPlay {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(2065deg);
    }
}

.wheel-spin .spin-img {
    opacity: 0;
}

.spin-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.spin-wrap .panels {
    width: 49.91%;
    position: absolute;
    right: 0;
    transform-origin: left center;
}

.spin-wrap .panels:nth-child(2) {
    transform: rotate(36deg);
}

.spin-wrap .panels:nth-child(3) {
    transform: rotate(72deg);
}

.spin-wrap .panels:nth-child(4) {
    transform: rotate(108deg);
}

.spin-wrap .panels:nth-child(5) {
    transform: rotate(144deg);
}

.spin-wrap .panels:nth-child(6) {
    transform: rotate(180deg);
}

.spin-wrap .panels:nth-child(7) {
    transform: rotate(216deg);
}

.spin-wrap .panels:nth-child(8) {
    transform: rotate(252deg);
}

.spin-wrap .panels:nth-child(9) {
    transform: rotate(288deg);
}

.spin-wrap .panels:nth-child(10) {
    transform: rotate(324deg);
}

.spin-wrap .panels .cont {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #000000;
    font-size: 30px;
    font-family: Pretendard;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    padding: 0 0 0 36%;
    justify-content: flex-start;
}

.spin-wrap .panels:nth-child(2) .cont,
.spin-wrap .panels:nth-child(7) .cont {
    color: #000000;
}

.spin-wrap .panels .tether-icon {
    width: 19.37%;
    position: absolute;
    right: 10%;
}

.spin-btn {
    width: 21.05%;
    max-width: 133px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: transparent;
    border: none;
}

.spin-btn:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    transition: 0.3s;
    background-image: url(../img/wheel/spin-btn-hover.png);
    background-size: 100% 100%;
    opacity: 0;
}

.spin-btn:hover:before {
    opacity: 1.0;
}

.spin-btn img {
    width: 100%;
}

.wheel-panel {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    pointer-events: none;
}

.wheel-panel img {
    position: absolute;
}

.wheel-panel .arrow {
    width: 14.54%;
    right: -1%;
    margin: 0 auto;
    z-index: 5;
}

.wheel-panel .light-img {
    width: 97.31%;
    top: -1.15%;
}

.wheel-panel .lights-on {
    animation: wheelLight02 0.5s ease infinite;
}

@keyframes wheelLight02 {
    0% { opacity: 0; }
    50% { opacity: 1.0; }
    100% { opacity: 0; }
}


/* Wheel Deco */

.wheel-deco {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    pointer-events: none;
}

.wheel-deco .glow {
    width: 159.97%;
    position: absolute;
    animation: wheelGlow 1s ease infinite;
}

@keyframes wheelGlow {
    0% { opacity: 1.0; }
    50% { opacity: 0.25; }
    100% { opacity: 1.0; }
}

.wheel-deco .items {
    width: 119.94%;
    position: absolute;
    animation: wheelItems 5s ease infinite;
}

@keyframes wheelItems {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}


/* Wheel Result */

.wheel-result {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    border: solid 2px var(--primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 1.0);
    position: absolute;
    border-radius: 30px;
    z-index: 20;
    flex-direction: column;
    color: #ffffff;
    padding: 7% 9.16%;
    display: none;
    animation: wheelResult 1s ease 1 forwards;
}

@keyframes wheelResult {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.wheel-result.active {
    display: block;
}

.wheel-result .labels {
    color: #f7eeee;
    font-size: 36px;
    font-family: Pretendard-Regular;
    margin: 0 0 -4%;
}

.wheel-result .amount {
    font-size: 54px;
    font-family: Pretendard;
}

.wheel-result .amount .amount-anim {
    animation: amountAnim 0.5s ease infinite;
}

@keyframes amountAnim {
    0% { 
        text-shadow: 0 0 0 transparent;
        color: #f7eeee;
    }
    20% { 
        text-shadow: 0 0 10px #c74400;
        color: #ffe761;
    }
    80% { 
        text-shadow: 0 0 10px #c74400;
        color: #ffe761;
    }
    100% { 
        text-shadow: 0 0 0 transparent;
        color: #f7eeee;
    }
}

@media(max-width: 690px) {
    .spin-wrap .panels .cont {
        font-size: 4.35vw;
    }

    .wheel-result .labels {
        color: #f7eeee;
        font-size: 5.22vw;
    }

    .wheel-result .amount {
        font-size: 7.83vw;
    }

    .wheel-deco .items {
        width: 100%;
        position: absolute;
        animation: wheelItems 5s ease infinite;
    }
}


/* Login Modal */

.loginModal .modal-dialog {
    max-width: 830px;
}

.loginModal .modal-wrapper {
    min-height: 610px;
}

.loginModal .modal-panel {
    padding: 30px;
}

.modal .logo {
    width: 212px;
    margin: 20px auto 30px;
    position: relative;
}

.modal-sidebar {
    width: 100%;
    background-color: #130214;
    padding: 40px 15px 15px;
    position: relative;
    overflow: hidden;
}

.modal-sidebar:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../img/bg/login-bg.webp);
    background-position: bottom center;
    background-size: 100%;
    background-repeat: no-repeat;
    animation: mdlSbBg 1s ease infinite;
}

@keyframes mdlSbBg {
    0% { opacity: 0.7; }
    50% { opacity: 0.9; }
    100% { opacity: 0.7; }
}

.modal-sidebar .ms-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.modal-sidebar .ms-bg:before,
.modal-sidebar .ms-bg:after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-position: bottom center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.modal-sidebar .ms-bg:before {
    background-image: url(../img/bg/modal-bg-02.png);
    animation: mdlSb02Bg 5s ease infinite;
}

@keyframes mdlSb02Bg {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

.modal-sidebar .ms-bg:after {
    background-image: url(../img/bg/modal-bg-03.png);
}

.modal-sidebar .panel {
    position: relative;
    z-index: 5;
}


/* Event Modal */

.ne-wrap {
    width: calc(100% + 20px);
    margin: 0 -10px;
    justify-content: flex-start;
}

.event-a {
    width: calc(33.33% - 20px);
    margin: 0 10px 20px;
    background-color: #19191c;
    border: solid 1px #19191c;
    border-radius: 10px;
    padding: 0 0 10px;
    position: relative;
    color: #ffffff;
    display: inline-block;
}

.event-a:hover {
    color: #ffffff;
    background-color: #555555;
    border-color: #555555;
}

.event-a .tag {
    width: 90px;
    height: 26px;
    position: absolute;
    right: 5px;
    top: 5px;
    overflow: hidden;
    border-radius: 20px;
    color: #ffffff;
    transition: 0.3s;
    z-index: 10;
    padding: 1px 0 0;
}

.event-a .tag:before {
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    transform-origin: top right;
    background-color: #d91f25;
    background-image: linear-gradient(to left, var(--gradient-primary-1), var(--gradient-primary-2));
}

.event-a .tag.ended {
    color: #cccccc;
}

.event-a .tag.ended:before {
    background-color: #2e2e37;
    background-image: linear-gradient(to right, #7c7c8b, #52525e);
}

.event-a .g-panel {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 10px;
    background-color: var(--bg-01);
}

.event-a .g-img {
    width: 100%;
    transition: 0.3s;
}

.event-a:hover .g-img {
    opacity: 0.75;
    transform: scale(1.1);
}

.event-a .g-footer .title {
    margin: 0 0 -5px;
}

.event-a .g-info {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 10;
    border-radius: 5px;
}

.event-a .g-info li {
    height: 30px;
    padding: 0 10px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    margin-left: 1px;
    transition: 0.3s;
}

.event-a .g-info li:first-child {
    border-radius: 5px 0 0 5px;
}

.event-a .g-info li:last-child {
    border-right: none;
    border-radius: 0 5px 5px 0;
}

.event-a .g-info li:hover {
    background-color: #3a3a3a;
    color: #ffffff;
}

.event-a .g-info li i {
    margin: 0 5px 0 0;
}

.event-a .g-info li:hover i {
    color: var(--text-primary);
}

.event-a .title {
    max-width: 90%;
    color: var(--text-white);
    font-size: 16px;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
}

.event-a .view-btn {
    width: 80%;
    max-width: 130px;
    height: 44px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.75);
}

.event-a:hover .view-btn {
    opacity: 1.0;
    transform: scale(1.0);
}


/* Table Nav */

.table-nav {
    width: 100%;
    padding: 10px 0;
    border-bottom: dashed 1px rgba(255, 255, 255, 0.15);
}

.table-nav:last-child {
    border-bottom: none;
}

.table-nav .btn-grp {
    justify-content: flex-end;
}

.table-nav .btn-grp button {
    width: 80px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    margin-left: 5px;
}

.table-nav ul li {
    padding: 0 10px;
}

.table-nav ul li i {
    font-size: 16px;
}

.view-content {
    width: 100%;
    min-height: 300px;
    border-radius: 10px;
    margin: 20px 0 0;
    font-size: 18px;
}

.view-content img {
    border-radius: 15px;
}

.event-card .e-img {
    border-radius: 18px;
}