/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
:root {
    --app-height: 100%;
}

@font-face {
    font-family: "Open Sans";
    src: url('/fonts/Open Sans/OpenSans-SemiBold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: "Pixel";
    src: url('/fonts/PixeloidSansBold-RpeJo.ttf');
    font-weight: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url('/fonts/Open Sans/OpenSans-SemiBold.ttf');
    font-weight: 500;
}

@font-face {
    font-family: "Open Sans";
    src: url('/fonts/Open Sans/OpenSans-light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: "Open Sans";
    src: url('/fonts/Open Sans/OpenSans-Regular.ttf');
    font-weight: normal;
}
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/fonts/Glyphicons Halflings/glyphicons-halflings-regular.eot');
    src: url('/fonts/Glyphicons Halflings/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/Glyphicons Halflings/glyphicons-halflings-regular.woff2') format('woff2'), url('/fonts/Glyphicons Halflings/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/Glyphicons Halflings/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/Glyphicons Halflings/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('/fonts/Gotham/Gotham Book Font.otf') format("opentype");
}
@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-weight: 400;
    src:  url('/fonts/Gotham/GothamBookItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 300;
    src:  url('/fonts/Gotham/GothamLight.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-weight: 300;
    src:  url('/fonts/Gotham/GothamLightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    src:  url('/fonts/Gotham/GothamMedium.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    src:  url('/fonts/Gotham/GothamMedium_1.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-weight: 500;
    src:  url('/fonts/Gotham/GothamMediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 700;
    src:  url('/fonts/Gotham/GothamBold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 700;
    src:  url('/fonts/Gotham/Gotham-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-weight: 700;
    src:  url('/fonts/Gotham/GothamBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Black';
    font-style: normal;
    font-weight: 500;
    src: local('Gotham Black'), url('/fonts/Gotham/Gotham-Black.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Light';
    font-style: normal;
    font-weight: 500;
    src: local('Gotham Light'), url('/fonts/Gotham/Gotham-Light.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Thin';
    font-style: normal;
    font-weight: 500;
    src: local('Gotham Thin'), url('/fonts/Gotham/Gotham-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Gotham XLight';
    font-style: normal;
    font-weight: 500;
    src: local('Gotham XLight'), url('/fonts/Gotham/Gotham-XLight.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Book';
    font-style: italic;
    font-weight: 500;
    src: local('Gotham Book'), url('/fonts/Gotham/Gotham-BookItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Thin';
    font-style: italic;
    font-weight: 500;
    src: local('Gotham Thin'), url('/fonts/Gotham/Gotham-ThinItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham Ultra';
    font-style: italic;
    font-weight: 500;
    src: local('Gotham Ultra'), url('/fonts/Gotham/Gotham-UltraItalic.woff') format('woff');
}

@font-face {
    font-family: 'Gotham XLight';
    font-style: italic;
    font-weight: 500;
    src: local('Gotham XLight'), url('/fonts/Gotham/Gotham-XLightItalic.woff') format('woff');
}


a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: blue;
  cursor:pointer;
}
    a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
    }
.btn-primary {
    color: black;
    background: linear-gradient(180deg, #ffefcb 0%, #ffcd16 100%);
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    font-weight: Bold;
    font-size: 14px;
    cursor: pointer;
    border-color: #ffcd16 !important;
}
.primary-text {
    color: #f4e5ae !important;
}
.primary-bg {
    background-color: #ffd950 !important;
}
.btn-black {
    color: #ffd950;
    background: black;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    font-weight: Bold;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid #ffd950;
}
.btn-black:hover {
    color: white;
}
    .btn-primary:disabled {
        background-color: #435572;
    }

.btn-white {
    cursor: pointer;
    border-radius: 3px;
    padding: 8px 5px;
    background-color: white;
    width: 20%;
    margin-right: 3px;
    text-align: center;
    font-weight: bold;
    border-color:transparent
}

    .btn-white:hover {
        color: white;
        background-color: #3793d6;
    }
    .btn-white:focus {
        color: white;
        background-color: #3793d6;
        border-color: transparent;
        outline:0;
    }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
  /* Bootstrap paints body white and the dark theme sits on inner wrappers, so
     without this the browser flashes white between page navigations. */
  background-color: #16130E;
  /* Tells the browser the page is dark, so its own surfaces - scrollbars, the canvas
     painted before any stylesheet applies, form controls - match instead of flashing light. */
  color-scheme: dark;
}

/* Cross-document view transitions. Must stay top level: the rule only takes effect when it
   is present on BOTH the page being left and the page being entered, and every page in this
   site renders through _Layout.cshtml, which loads this file. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}
:root {
    --app-height: 100%;
}
/* Sticky footer styles
-------------------------------------------------- */

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
    font-family: 'Gotham';
    color: #ACACAC;
    background-color: #16130E;
    font-weight: normal;
    font-size: 14px;
}
.uppercase{
    text-transform:uppercase;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

.color-main {
    color: #ffdb57 !important;
}
.color-main-bg {
    background-color: #3a5fff !important;
}


.z-depth-0 {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.z-depth-0-half {
    -webkit-box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.17);
    box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.17);
}

.z-depth-1 {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-1-half {
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.z-depth-3 {
    -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}


.background-responsive {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
    width: 100%;
}
.sidenav-toggle {
    color: white !important;
    background-color: #3a5fff !important;
    border-color: #3a5fff !important;
    border-width:3px;
    border-style:solid;
    padding-right:10px;
    padding-left:10px;
    height:34px;
    cursor:pointer;
    border-radius:5px;
    margin-left:10px;
    display:flex;
    align-items:center;
}



.img-circle {
    border-radius: 50%;
    height:auto;
}

.align-middle{
    display:flex;
    align-items:center;
}
a:hover
{
    text-decoration:none;
}
.searching-label {
    display: flex;
    align-items: center;
    font-weight: bold;
    flex-wrap: nowrap;
}


@media (min-width: 768px) {
    .searching-label {
    }
}

@media (max-width: 767px) {
    .searching-label {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}


.white-rounded-container {
    border-radius: 20px;
    background-color: white;
    border: 1px solid #dee2e6;
    padding-top: .5rem !important;
    padding-bottom: 1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    margin-left: .5rem !important;
    margin-right: .5rem !important;
}

.white-rounded-container-header {
    font-size: 20px;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}

    .white-rounded-container-header a {
        margin-bottom: 3px;
    }

@media (min-width: 768px) {
    .white-rounded-container-header {
        display: flex;
        white-space: nowrap;
    }
}
.input-label {
    font-weight: bold;
    margin-bottom: 4px;
}

    .input-label ~ input, .input-label ~ textarea, .input-label ~ select, .input-label ~ div {
        margin-bottom: 12px;
    }


.searching-label {
    display: flex;
    align-items: center;
    font-weight: bold;
    flex-wrap: nowrap;
}

.row {
    margin: 0;
}

@media (min-width: 768px) {
    .searching-label {
    }
}

@media (max-width: 767px) {
    .searching-label {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6 .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    padding-top: 3px;
    padding-bottom: 8px;
}
.error {
    color: red;
    font-size: 14px;
    font-style: italic;
}


table.dataTable {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 20px !important;
    max-width: none !important
}

    table.dataTable td, table.dataTable th {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box
    }

        table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {
            text-align: center
        }

    table.dataTable.nowrap th, table.dataTable.nowrap td {
        white-space: nowrap
    }

div.dataTables_wrapper div.dataTables_length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap
}

div.dataTables_wrapper div.dataTables_length select {
    width: 75px;
    display: inline-block
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right
}

    div.dataTables_wrapper div.dataTables_filter label {
        font-weight: normal;
        white-space: nowrap;
        text-align: left
    }

    div.dataTables_wrapper div.dataTables_filter input {
        margin-left: 0.5em;
        display: inline-block;
        width: auto
    }

div.dataTables_wrapper div.dataTables_info {
    padding-top: 8px;
    white-space: nowrap
}

div.dataTables_wrapper div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right
}

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin: 2px 0;
        white-space: nowrap
    }

div.dataTables_wrapper div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -26px;
    text-align: center;
    padding: 1em 0
}

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting {
    padding-right: 30px
}

table.dataTable thead > tr > th:active, table.dataTable thead > tr > td:active {
    outline: none
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    position: relative
}

    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
        position: absolute;
        bottom: 8px;
        right: 8px;
        display: block;
        font-family: 'Glyphicons Halflings';
        opacity: 0.5
    }

    table.dataTable thead .sorting:after {
        opacity: 0.2;
        content: "\e150"
    }

    table.dataTable thead .sorting_asc:after {
        content: "\e155"
    }

    table.dataTable thead .sorting_desc:after {
        content: "\e156"
    }

    table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
        color: #eee
    }

div.dataTables_scrollHead table.dataTable {
    margin-bottom: 0 !important
}

div.dataTables_scrollBody table {
    border-top: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

    div.dataTables_scrollBody table thead .sorting:after, div.dataTables_scrollBody table thead .sorting_asc:after, div.dataTables_scrollBody table thead .sorting_desc:after {
        display: none
    }

    div.dataTables_scrollBody table tbody tr:first-child th, div.dataTables_scrollBody table tbody tr:first-child td {
        border-top: none
    }

div.dataTables_scrollFoot table {
    margin-top: 0 !important;
    border-top: none
}

@media screen and (max-width: 767px) {
    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
        text-align: center
    }
}

table.dataTable.table-condensed > thead > tr > th {
    padding-right: 20px
}

table.dataTable.table-condensed .sorting:after, table.dataTable.table-condensed .sorting_asc:after, table.dataTable.table-condensed .sorting_desc:after {
    top: 6px;
    right: 6px
}


table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    border-left-width: 0
}

    table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child {
        border-right-width: 0
    }

table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
    border-bottom-width: 0
}

div.dataTables_scrollHead table.table-bordered {
    border-bottom-width: 0
}

div.table-responsive > div.dataTables_wrapper > div.row {
    margin: 0
}

    div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
        padding-left: 0
    }

    div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
        padding-right: 0
    }



.tree {
}

    .tree ul {
        position: relative;
        padding: 1em 0;
        white-space: nowrap;
        margin: 0 auto;
        text-align: center;
    }

        .tree ul::after {
            content: '';
            display: table;
            clear: both;
        }

    .tree li {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 1em 0.5em 0 0.5em;
    }

        .tree li::before, .tree li::after {
            content: '';
            position: absolute;
            top: 0;
            right: 50%;
            border-top: 1px solid #ccc;
            width: 50%;
            height: 1em;
        }

        .tree li::after {
            right: auto;
            left: 50%;
            border-left: 1px solid #ccc;
        }

        .tree li:only-child::after, .tree li:only-child::before {
            display: none;
        }

        .tree li:only-child {
            padding-top: 0;
        }

        .tree li:first-child::before, .tree li:last-child::after {
            border: 0 none;
        }

        .tree li:last-child::before {
            border-right: 1px solid #ccc;
            border-radius: 0 5px 0 0;
        }

        .tree li:first-child::after {
            border-radius: 5px 0 0 0;
        }

    .tree ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 1px solid #ccc;
        width: 0;
        height: 1em;
    }

    .tree a {
        border: 1px solid #ccc;
        padding: 0.5em 0.75em;
        text-decoration: none;
        display: inline-block;
        border-radius: 5px;
        color: #333;
        position: relative;
        top: 1px;
    }

        .tree a:hover, .tree a:hover + ul li a {
            background: #e9453f;
            color: #fff;
            border: 1px solid #e9453f;
        }

            .tree a:hover + ul li::after, .tree a:hover + ul li::before, .tree a:hover + ul::before, .tree a:hover + ul ul::before {
                border-color: #e9453f;
            }

.red-dot {
    background-color: red;
    border-radius: 50%;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 30px;
    text-align: center;
    float: right;
    margin-top: -5px;
    height: 30px;
    display: block;
    font-size:12px;
}



/*start of add on */

.input-group-addon,
.input-group-btn,
.input-group .form-control {
    display: table-cell;
}

    .input-group-addon:not(:first-child):not(:last-child),
    .input-group-btn:not(:first-child):not(:last-child),
    .input-group .form-control:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

.input-group-addon,
.input-group-btn {
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-addon {
    background-color: #fff;
    border: 1px solid #E5E6E7;
    border-radius: 1px;
    color: black;
    font-size: 1rem;
    font-weight: 400;
    padding: 7px 12px;
    padding-bottom:6px;
    text-align: center;
}

    .input-group-addon.input-sm {
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 3px;
    }

    .input-group-addon.input-lg {
        padding: 10px 16px;
        font-size: 18px;
        border-radius: 6px;
    }

    .input-group-addon input[type="radio"],
    .input-group-addon input[type="checkbox"] {
        margin-top: 0;
    }

    .input-group .form-control:first-child,
    .input-group-addon:first-child,
    .input-group-btn:first-child > .btn,
    .input-group-btn:first-child > .btn-group > .btn,
    .input-group-btn:first-child > .dropdown-toggle,
    .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
    .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-group-addon:first-child {
        border-right: 0;
    }

    .input-group .form-control:last-child,
    .input-group-addon:last-child,
    .input-group-btn:last-child > .btn,
    .input-group-btn:last-child > .btn-group > .btn,
    .input-group-btn:last-child > .dropdown-toggle,
    .input-group-btn:first-child > .btn:not(:first-child),
    .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .input-group-addon:last-child {
        border-left: 0;
    }

.input-group.input-group-spaced {
    display: flex;
    gap: 10px;
}

.input-group.input-group-spaced .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #363636;
    border-radius: 4px;
}

.input-group.input-group-spaced .form-control {
    display: block;
    flex: 1;
    border-radius: 4px;
}


.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
    width: auto;
}

.has-success .input-group-addon {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #3c763d;
}


.has-error .input-group-addon {
    color: #a94442;
    background-color: #f2dede;
    border-color: #a94442;
}


.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
    width: auto;
}

/*end of add on */

/* iCheck plugin Square skin, green
----------------------------------- */
.icheckbox_square-green,
.iradio_square-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(green.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_square-green {
    background-position: 0 0;
}

    .icheckbox_square-green.hover {
        background-position: -24px 0;
    }

    .icheckbox_square-green.checked {
        background-position: -48px 0;
    }

    .icheckbox_square-green.disabled {
        background-position: -72px 0;
        cursor: default;
    }

    .icheckbox_square-green.checked.disabled {
        background-position: -96px 0;
    }

.iradio_square-green {
    background-position: -120px 0;
}

    .iradio_square-green.hover {
        background-position: -144px 0;
    }

    .iradio_square-green.checked {
        background-position: -168px 0;
    }

    .iradio_square-green.disabled {
        background-position: -192px 0;
        cursor: default;
    }

    .iradio_square-green.checked.disabled {
        background-position: -216px 0;
    }
    .label-title{
        font-weight:bold;
        margin-bottom:2px;
        font-size:15px;

    }


.select-border {
    border-radius: 5px;
    border-color: darkgrey;
    border-width: 2px;
    border-style:solid;
}
    .select-border.selected {
        border-color: #3a5fff;
        border-width :3px;
    }
    .select-border:hover {
        border-color: #3a5fff;
        border-width :3px;
    }

    label{
        margin-bottom:0px;
    }

.background-grey {
    background: linear-gradient(180deg, #fbfbfb 0%, #e6e6e6 100%);
}
.background-black {
    background: #202020;
    background: #202020;
    color:white;
}
.body-container {
    background-color: #2d291e;
    min-height: 100%;
    width: 100%;
}

.btn-grey {
    color: #001326;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(142,142,142,1) 7%, rgba(255,255,255,1) 50%, rgba(142,142,142,1) 96%, rgba(255,255,255,1) 100%);
    border-style: solid;
    border-width: 3px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 8px;
    padding-bottom: .175rem;
    padding-top: .175rem;
    font-weight: bold;
    height: 34px;
    cursor: pointer;
}
.btn-yellow {
   background-color:black;border:2px solid #ffd950;border-radius:10px; height:50px;color:white;
   cursor:pointer;
   display:flex;
   align-items:center;
   justify-content:center;

}
    .btn-yellow:hover {
        background-color: #ffd950;
        color: black;
    }
    .btn-yellow:hover, .btn-yellow.selected {
        background-color: #ffd950;
        color: black;
    }
.btn-blue {
    color: #001326;
    background: rgb(146,201,231);
    background: linear-gradient(90deg, rgba(146,201,231,1) 0%, rgba(136,194,228,1) 8%, rgba(255,255,255,1) 50%, rgba(136,194,228,1) 92%, rgba(146,201,231,1) 100%);
    border-style: solid;
    border-color: black !important;
    border-width: 2px;
    border-radius: 8px;
    padding-bottom: .175rem;
    padding-top: .175rem;
    font-weight: bold;
    height: 34px;
    cursor: pointer;
}
.whitespace-nowrap{
    white-space:nowrap;
}

.mobile-login-bt {
    width: 50%;
    text-align: center;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #001326;
    font-weight: bold;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(142,142,142,1) 20%, rgba(255,255,255,1) 50%, rgba(142,142,142,1) 80%, rgba(255,255,255,1) 100%);
    cursor: pointer;
}
.mobile-register-bt {
    width: 50%;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #001326;
    font-weight: bold;
    background: rgb(146,201,231);
    background: linear-gradient(90deg, rgba(146,201,231,1) 0%, rgba(136,194,228,1) 8%, rgba(255,255,255,1) 50%, rgba(136,194,228,1) 92%, rgba(146,201,231,1) 100%);
    cursor: pointer;
}

.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(80% - 0rem);
}
.modal-body {
    background: #202020;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
}
    .modal-body .input-label {
        font-weight: normal !important;
        color: white;
    }
    .modal-body a {
    }
    .modal-body .form-control, .modal-body .input-group-addon {
        border: 1px solid black;
    }
.modal-header {
    border: 0;
    justify-content: center;
    background-color: #202020;
    font-weight: bold !important;
    color: black !important;
}
.modal-header h5,.modal-header button {
    font-weight: bold !important;
    color:white;
    opacity:1;
}
.modal-header-empty-span {
   width:13px;
}

/* Shared referral/share modal */
.referral-share-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 4px;
    padding: 6px 18px;
    color: #000;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

.share-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.share-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.share-label {
    margin-top: 6px;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
}

.share-url-field {
    position: relative;
}

.share-url-field .form-control {
    padding-right: 84px;
}

.share-copy-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 4px;
    padding: 6px 16px;
    color: #fff;
    background-color: #ED1919;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

     .modal-header .close
    {
        margin:0;
        padding:0;
        right:10px;
        font-size:30px;
        position:absolute;
    }

.label-hint {
    color: #919499;
    margin-top:2px;
}
.nav-bt {
    color: #001326 !important;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    margin-top: 8px;
    margin-bottom: 8px;
}
    .nav-bt.selected {
        color: white !important;
        background-color: #3692d5;
    }
    .nav-bt:hover {
        color: white !important;
        background-color: #3692d5;
    }


.collapse-bar {
    width: 100%;
    display: block;
    background-color: #3793d6;
    color: white;
    font-weight: bold;
    padding: 10px;
    padding-left: 10px;
    border-radius: 5px;
    cursor: pointer;
}

    .collapse-bar.collapsed {
        background-color: white;
        color: #001326;
        border: 1px solid lightgrey;
    }

.blue-container {
    border-radius: 5px;
    margin-top: 0.5rem;
    background-color: white;
    background-color: #98a8b5 !important;
    padding: 20px 11px;
}
.blue-container-label {
    padding-top: 1rem;
    margin-bottom: 0.5rem;
    color: white;
}
.blue-container-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}
.background-lightblue {
    background-color: #98a8b5 !important;
}

.blue_table thead {
    background-color: #3692d5;
    color: white;
    border-radius: 4px;
}

.blue_table {
    overflow: hidden;
    border-radius: 4px;
}

    .blue_table th {
        padding: 5px 10px;
    }
    .blue_table td {
        padding: 5px 10px;
    }

.sidenav {
    color: white !important;
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0;
    background: rgb(70,62,41);
    background: linear-gradient(180deg, rgba(70,62,41,1) 0%, rgba(53,47,35,1) 50%, rgba(21,21,21,1) 100%);
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

    /* The navigation menu links */
    .sidenav a {
        padding: 12px 8px 12px 21px;
        text-decoration: none;
        font-size: 14px;
        color: white !important;
        display: block;
        display:flex;
        align-items:center;
        transition: 0.3s;
    }
    .sidenav img {
     width:28px;
     margin-right:8px;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
        }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}


@media only screen and (min-width: 768px) {
    .is-mobile {
        display: none !important;
    }


    .desktop-50{
        width:50%;
    }
}

@media only screen and (max-width: 768px) {

    .game-selection-parent {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
.game-selection-parent .col-4 {
    padding:5px;
    padding-bottom: 5px !important;
}
.game-selection-parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    padding-right: 20px !important;
    padding-left: 20px !important;
}
.main-color {
    color: #001326;
}
.slick-dots
{
    bottom:0px;

}
.slick-dotted.slick-slider
{
    margin-bottom:0px;
}
.slick-dots li button:before {
    opacity: 0.75;
}
.slick-dots li button:before {
    font-size: 20px;
    line-height: 20px;
    color: white;
}
.slick-active button:before {
    background-color: #FFC425 !important;
    color: #FFC425 !important;
}
.slick-dots li button:before {
    background-color: white;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    text-indent: -9999px;
    overflow: hidden;
}
.moving-banner .banner-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    z-index: 5;
}
    .moving-banner .banner-progress .banner-progress-bar {
        height: 100%;
        width: 0%;
        background-color: #F4E5AE;
    }
.moving-banner .banner-progress .banner-progress-bar.animate {
    animation-name: bannerProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes bannerProgress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
* {
    scrollbar-width: thin;
    scrollbar-color: #453d28 white;
}

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
    }

    *::-webkit-scrollbar-track {
        background: white;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #453d28;
        border-radius: 20px;
        border: 3px solid white;
    }

.horizontal-scrollbar::-webkit-scrollbar {
    width: 1px !important;
}
.horizontal-scrollbar-none::-webkit-scrollbar {
   display:none;
}
.horizontal-scrollbar::-webkit-scrollbar-thumb {
    border:8px solid white;
}
.horizontal-scrollbar::-webkit-scrollbar-track {
    border: 7px solid white;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.menubar ul {
    margin-bottom: 0px;
    display: -webkit-inline-box;
    padding-left: 0px;
    list-style: none;
    width: 100%
}

.menubar li {
    background: white;
    width: 25%;
    text-align: center;
}

    .menubar li.selected {
        background: #3792d6;
        color: white !important;
    }

    .menubar li:hover {
        background: #3792d6;
        color: white !important;
    }

    .menubar li.selected a {
        color: white !important;
    }

    .menubar li a:hover {
        color: white !important;
    }

    .menubar li a {
        color: #001326;
        font-size: 12px;
        height: 100%;
        width: 100%;
        display: block;
        padding: 10px 0;
    }

.menubar {
    overflow-x: scroll;
    position:sticky;
    top:0px;
}
.menubar2 .position-absolute img, .mobile-menu .position-absolute img {
    border-radius: 50%;
}
.mobile-menu .position-absolute img {
   margin-bottom:7px;
}
.sticky-menu {
    position: sticky;
    top: 0;
    z-index: 9999
}

.align-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.paginate_button {
    margin-left:4px;
    margin-top:5px;
}
.paginate_button a{
    color:white !important;
    display: inline-block;
}
.paginate_button.previous a {
    background-color: #16130E !important;
    color: #B09A51 !important;
    border: 1px solid #858585 !important;
    border-radius: 4px;
    padding: 5px 14px;
}
.paginate_button.next a {
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%) !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: 4px;
    padding: 5px 14px;
}
.datatables-bt {
    background-color: transparent;
    border: 0;
    padding: 5px 8px;
}
.input-group .form-control {
    height: auto;
}

.modal-header {
    border-top-left-radius:0;
    border-top-right-radius:0;
    color:white
}

.modal-content {
    border-radius: 10px;
    overflow: hidden;
    background: #202020;
}
.modal-body .btn-primary
{
}
.game-selection.selected {
    background: #202020;
    border-color: #F4E5AE;
    color: #F4E5AE;
}
.game-selection, .game-selection2, .payment-selection {
    cursor: pointer;
    height: 80px !important;
    padding-bottom:5px;
    padding-top:5px;
}
    .game-selection2 div, .game-selection div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
.main-bg {
    background-image: url('/Images/home/background v2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 768px) {
    .main-bg {
        background-image: url('/Images/home/Background_desktop.png') !important;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

.table-yellow td, .table-yellow th {
    align-items: center;
    justify-content: center;
    text-align: center !important;

}
.table-yellow {
    border-radius: 10px;
    background-color: #202020;
    width:100%;
    border: 0;
    overflow: hidden;
    margin-bottom: 20px;
}
.table-yellow  td{
    background-color: #202020;
    border: 0;
    color: #ffffff;
}
    .table-yellow thead tr {
        color: #F4E5AE;
        font-weight: Bold;
        background-color: #363636;
    }
    .table-yellow thead th {
       padding-top:0.5rem;
       padding-bottom:0.5rem;
       background-color: #363636;
       color: #F4E5AE;
       border: 0;
    }
.close
{
    text-shadow:none !important;
}
.btn-primary:hover
{
    color:black;
}
.modal{
    overflow:auto !important;
}

.glow {
    -webkit-animation: glow 0.5s ease-in-out infinite alternate;
    -moz-animation: glow 0.5s ease-in-out infinite alternate;
    animation: glow 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
    from {
        box-shadow: 0 0 0px #fff, 0 0 5px #fff, 0 0 5.5px #fc970d, 0 0 10px #fc970d, 0 0 12.5px #fc970d, 0 0 15px #fc970d, 0 0 17.5px #fc970d;
    }

    to {
        box-shadow: 0 0 10px #f5da78, 0 0 7.5px #fc970d, 0 0 15px #fc970d, 0 0 22.5px #fc970d, 0 0 15px #fc970d, 0 0 17.5px #fc970d, 0 0 20px #fc970d;
    }
}


.hide-scroll-bar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scroll-bar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.marquee {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

    .marquee span {
        display: inline-block;
        animation: marquee 20s linear infinite;
    }

@keyframes marquee {
    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Announcement icon stays pinned to the left while the text scrolls behind it */
.marquee .marquee-icon {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: black;
    z-index: 2;
}

/* ── Reskin: single mobile-only column, capped at 800px and centered ──
   Collapse the _LayoutHome desktop two-column shell into one column at all
   widths: hide the desktop sidebar, drop the desktop-only content variants,
   and show the mobile variants everywhere. The whole app — top nav, body,
   and bottom menu bar — is one 800px column centered on the dark background. */

/* Sitewide: Gotham at weight 300 (Light) as the base. Bold text keeps its
   own explicit weight; this only changes the default. */
body {
    font-family: 'Gotham', "Open Sans", sans-serif;
    font-weight: 300;
}

/* Always use the mobile content variant, never the desktop two-column one. */
.is-mobile {
    display: block ;
}

.is-desktop {
    display: block;
}

/* Hide the desktop left sidebar (banners / login / live txn duplicate). */
.desktop-left {
    display: none !important;
}

/* Body content: one column, max 800px, centered. */
.desktop-right {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

/* Top nav bar: capped to the same 800px column, centered. */
.body-container > .background-responsive {
    margin-left: auto;
    margin-right: auto;
}

/* Bottom menu bar: it is position:absolute + w-100 (inline), so override
   width and stretch left/right to 0 with auto margins to center at 800px. */
.main-bottom-container > .navigation-bar {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.main-bottom-container {
    background: #000;
}

/* ── Reskin: topbar — hamburger (left) | logo (center) | live chat + language (right) ── */
.home-topbar {
    background-color: #000;
    background-image: none;
}

/* Equal-width side groups keep the centre logo perfectly centred. */
.home-topbar .topbar-side {
    flex: 1 1 0;
    display: flex;
    align-items: center;
}

.home-topbar .topbar-side-right {
    justify-content: flex-end;
    gap: 5px;
}

.home-topbar .topbar-logo {
    flex: 0 0 auto;
    text-align: center;
}

.home-topbar .topbar-logo-img {
    max-height: 40px;
    max-width: 100%;
}

.home-topbar .topbar-burger-btn {
    cursor: pointer;
    line-height: 0;
}

.home-topbar .topbar-burger {
    height: 24px;
}

.home-topbar .topbar-support {
    height: 24px;
    cursor: pointer;
}

.home-topbar .topbar-notification {
    margin-left: 5px;
}

.home-topbar .topbar-lang {
    margin-left: 5px;
    margin-right: 0;
}

/* Flag in the language toggle (menu-item flags keep their own width). */
.home-topbar .topbar-lang-flag {
    height: 24px;
    width: 24px;
    object-fit: cover;
    border: 1px solid #fff;
    border-radius: 50%;
}

/* ── Reskin: bottom nav bar — flat #202020 with a raised centre Promotion circle ── */
.bottom-nav {
    display: flex;
    align-items: stretch;
    height: 65px;
    background-color: #202020;
}

.bottom-nav-item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 300;
    text-align: center;
}

.bottom-nav-link:hover,
.bottom-nav-link:focus,
.bottom-nav-link:visited {
    color: #fff;
    text-decoration: none;
}

.bottom-nav-icon {
    height: 28px;
    margin-bottom: 5px;
}

.bottom-nav-label {
    line-height: 1;
    color: #fff;
}

/* Selected item highlight. */
.bottom-nav-item.selected .bottom-nav-label {
    color: #B09A51;
}

/* Centre Promotion item: circular button raised above the bar, icon as bg. */
.bottom-nav-item-center {
    position: relative;
}

/* Keep the label pinned to the bottom so it clears the raised circle and
   lines up with the other (centred) labels. */
.bottom-nav-item-center .bottom-nav-link {
    justify-content: flex-end;
}

.bottom-nav-circle {
    position: absolute;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* 2px gradient ring: icon + dark fill clipped to padding-box, the
       #F4E5AE → #B09A51 gradient clipped to border-box. */
    border: 2px solid transparent;
    background-image:
        url('/images/iconv3/middle-logo.webp'),
        linear-gradient(#202020, #202020),
        linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    background-clip: padding-box, padding-box, border-box;
    background-origin: padding-box, padding-box, border-box;
    background-position: center, center, center;
    background-size: cover, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Unread live-chat badge on the Support item. */
.bottom-nav-badge {
    position: absolute;
    top: 2px;
    right: 25%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

/* Override: remove .main-bg background image, use solid color */
.main-bg {
    background-image: none !important;
    background-color: #16130E !important;
    padding-bottom: 100px;
}

@media (min-width: 768px) {
    .main-bg {
        background-image: none !important;
        background-color: #16130E !important;
    }
}

/* ── Reusable app buttons ── */
.btn-app {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
}

    /* Shown while a submit is in flight - e.g. the Deposit button once the form has posted. */
    .btn-app:disabled,
    .btn-app[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Gradient (primary) button */
.btn-gradient {
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: #000;
}

.btn-gradient:hover, .btn-gradient:focus, .btn-gradient:active {
    color: #000;
}

/* Ghost (secondary) button */
.btn-ghost {
    background-color: #16130E;
    color: #B09A51;
    border: 1px solid #858585;
}

/* ── Game category tabs: left column beside the game body ── */
.game-section {
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 20px;
}

.game-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 76px;
}

/* Narrower tab column on mobile */
@media (max-width: 767.98px) {
    .game-tabs {
        min-width: 0;
        max-width: 57px;
        flex-basis: 57px;
    }
}

.game-tabs .mobile-game-selection {
    display: flex;
    width: 100%;
    min-height: 57px;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: #ffffff !important;
    border-radius: 0;
    padding: 4px 2px !important;
    cursor: pointer;
    text-transform: capitalize;
    font-weight: 400 !important;
}

    .game-tabs .mobile-game-selection.selected {
        background: transparent !important;
        color: #F4E5AE !important;
        font-weight: 500 !important;
    }

    .game-tabs .mobile-game-selection.selected::before {
        position: absolute;
        inset: -6px -8px -2px;
        z-index: 0;
        background: url('/images/home/light.webp') center / 100% 100% no-repeat;
        border-bottom: 1px solid #F4E5AE;
        content: '';
        pointer-events: none;
    }

.game-tab-icon {
    display: block;
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.game-tab-icon-active {
    display: none;
}

.game-tabs .mobile-game-selection.selected .game-tab-icon-static {
    display: none;
}

.game-tabs .mobile-game-selection.selected .game-tab-icon-active {
    display: block;
}

.game-tab-label {
    display: block;
    margin-top: 3px;
    position: relative;
    z-index: 1;
    color: inherit;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}

.game-body {
    flex: 1 1 auto;
    min-width: 0;
}

    /* The body already provides its own gutter via the section padding */
    .game-body .mobile-game-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


/* Remove the frame image / dark background on the realtime transaction tabs */
.realtime-deposit-bt,
.realtime-deposit-bt div,
.realtime-deposit-bt.selected,
.realtime-deposit-bt.selected div {
    background-image: none !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* ── Live Transaction card ── */
.live-tx-header {
    width: 100%;
    margin-bottom: 0;
    padding: 12px 16px;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    border: 1px solid #363636;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.live-tx-title {
    color: #1a1a1a;
    font-weight: bold;
    font-size: 1rem; /* match the Sign Up button text size */
    line-height: 1.2;
}

.live-tx-subtitle {
    color: #2b2515;
    font-size: 13px;
    font-weight: 400;
}

/* ── "Enter The World of MYCS33" YouTube embed section ── */
.youtube-section-title {
    color: #F4E5AE;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.youtube-embed-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border: 2px solid #c4ad59;
    border-radius: 6px;
    overflow: hidden;
    /* The poster image is set inline on the element so the video id stays in one place in the
       view. maxresdefault is 1280x720, the same 16:9 as this box, so it needs no cropping. */
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.youtube-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* The iframe paints its own blank box while the YouTube player boots, which flashed over
       the poster image on scrolling to it. Stay transparent - so the poster shows through -
       and fade in once the embed has actually loaded. */
    opacity: 0;
    transition: opacity .25s ease;
}

    .youtube-embed-wrapper iframe.is-loaded {
        opacity: 1;
    }

/* Card body that holds the table */
.live-tx-body {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: #202020;
    border: 1px solid #363636;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* Live withdraw table rows */
/* Wrapper around the withdrawal table (for outer padding) */
.withdrawal-table-wrapper {
    padding: 5px;
}

.live-withdraw-table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}

/* Scope under .live2 so we beat the `.live2 td/tr { border-style: hidden }` rule.
   The `tr` part of that rule hides the horizontal (row-edge) borders under
   border-collapse, so it must be neutralised too — otherwise only the vertical
   (between-column) lines show. */
.live2 .live-withdraw-table tr,
.live2 .live-withdraw-table thead,
.live2 .live-withdraw-table table {
    border-style: none !important;
}

/* Only inner grid lines: border on the right + bottom of each cell, then strip
   the table's outer edge (last column's right, last row's bottom). */
.live2 .live-withdraw-table td {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid #363636 !important;
    border-bottom: 1px solid #363636 !important;
    vertical-align: middle !important;
    padding: 5px !important;
    background-color: transparent !important;
}

    .live2 .live-withdraw-table tr:last-child td {
        border-bottom: 0 !important;
    }

    .live2 .live-withdraw-table td:last-child {
        border-right: 0 !important;
    }

.lw-member-name {
    color: #E7D49A;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.2;
}

.lw-member-label {
    color: #d9d9d9;
    font-weight: normal;
    font-size: 12px;
    white-space: nowrap;
}

/* Shrink the label on small screens so it doesn't wrap/clamp */
@media (max-width: 575.98px) {
    .lw-member-label {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .lw-member-label {
        font-size: 9px;
    }
}

.lw-amount {
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    white-space: nowrap;
}

.lw-game {
    text-align: center;
}

/* Fixed game-column width only on larger (non-mobile) screens */
@media (min-width: 768px) {
    .lw-game {
        width: 200px;
        max-width: 200px;
    }
}

.lw-game-pill {
    display: inline-block;
    width: 88%;
    padding: 6px 6px;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: #111111;
    font-weight: bold;
    border-radius: 6px;
    text-align: center;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #E2231A;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.live-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    animation: live-badge-blink 1.2s ease-in-out infinite;
}

@keyframes live-badge-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.15;
    }
}

/* ===== Testimonial section ===== */
.testimonial-section {
    margin-top: 1.5rem;
}

.section-heading {
    color: #F4E5AE;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 1rem;
}

.testimonial-list {
    margin-left: -8px;
    margin-right: -8px;
}

/* Show 1 full card + half of the next card peeking on the right */
.testimonial-list .slick-list {
    padding-right: 33% !important;
}

/* Equal height cards */
.testimonial-list .slick-track {
    display: flex;
}

.testimonial-list .slick-slide {
    height: auto;
}

.testimonial-card {
    background-color: #202020;
    border-radius: 10px;
    padding: 18px 16px;
    margin: 0 8px;
    height: 100%;
}

.testimonial-card-title {
    color: #B09A51;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 8px;
}

.testimonial-card-text {
    color: #cfcfcf;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.testimonial-stars {
    color: #B09A51;
    font-size: 14px;
    letter-spacing: 2px;
}

/* ── Home wallet card (authenticated) ── */
.wallet-card {
    color: #fff;
    background-color: #202020;
    padding-bottom: 16px;
}

.wallet-card.profile-card {
    background: linear-gradient(180deg, #3D3829 0%, #352F1E 100%);
}

    .profile-card .wallet-card-head {
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
    }

    .profile-card-left {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
    }

    /* Welcome / user block (left) — mirrors sidebar membership card */
    .profile-card .membership-user {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .profile-card .membership-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
    }

    .profile-card .membership-user-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .profile-card .membership-welcome {
        font-size: 14px;
        font-weight: 400;
        color: #858585;
        line-height: 1.2;
    }

    .profile-card .membership-name {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.25;
    }

    .profile-member-level {
        display: flex;
        align-items: center;
        margin-top: 14px;
        margin-bottom: 10px;
    }

    .profile-member-tier-img {
        height: 35px;
        width: auto;
        margin-right: 10px;
    }

    .profile-member-level-text {
        text-align: left;
    }

    .profile-member-level-label {
        color: #858585;
        font-size: 14px;
    }

    .profile-member-tier-name {
        color: #ffffff;
        font-weight: bold;
        font-size: 16px;
    }

    /* WalletCard's compact variant (same row as Transaction History) */
    .profile-member-level.my-0 .profile-member-level-label {
        font-size: 12px;
    }

    .profile-member-level.my-0 .profile-member-tier-name {
        font-size: 14px;
        margin-top: -2px;
    }

    /* Wallet balance + restore button (right, stacked) */
    .profile-card .wallet-balance-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 30px;
        border-left: 1px solid #5A4E26;
    }

    .profile-card .wallet-balance-block {
        text-align: left;
    }

    /* Mobile: keep left (Welcome / Member Level) and right (Wallet Balance)
       side by side without wrapping — scale everything with screen width. */
    @media (max-width: 575.98px) {
        .profile-card .membership-avatar {
            width: clamp(28px, 9vw, 40px);
            height: clamp(28px, 9vw, 40px);
            margin-right: clamp(5px, 2vw, 10px);
        }

        /* labels match the Wallet Balance label scale */
        .profile-card .membership-welcome {
            font-size: clamp(9px, 2.8vw, 14px);
            line-height: unset;
        }

        /* username matches the balance value scale */
        .profile-card .membership-name {
            font-size: clamp(10px, 3.4vw, 26px);
            line-height: unset;
        }

        .profile-member-tier-img {
            height: clamp(17px, 6vw,38px);
            margin-right: clamp(5px, 2vw, 10px);
        }

        /* label matches the Wallet Balance label scale */
        .profile-member-level-label {
            font-size: clamp(9px, 2.8vw, 14px);
        }

        /* tier value matches the balance value scale */
        .profile-member-tier-name {
            font-size: clamp(10px, 3.4vw, 26px);
        }

        .profile-card .wallet-balance-right {
            padding-left: clamp(8px, 3vw, 30px);
        }

        .profile-card .wallet-balance-label {
            font-size: clamp(9px, 2.8vw, 14px);
        }

        .profile-card .wallet-balance-amount {
            font-size: clamp(10px, 3.4vw, 26px);
        }

        .profile-card .wallet-balance-amount > span:first-child {
            margin-right: clamp(2px, 1vw, 6px);
        }

        .profile-card .wallet-refresh-icon {
            width: clamp(11px, 3.2vw, 20px);
            height: clamp(11px, 3.2vw, 20px);
            margin-left: clamp(3px, 1.5vw, 10px);
        }
    }

.wallet-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.wallet-balance-label {
    color: #858585;
    font-size: 14px;
    font-weight: 400;
}

.wallet-balance-amount {
    display: flex;
    align-items: center;
    color: #F4E5AE;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 2px;
}

.wallet-balance-amount > span:first-child {
    margin-right: 6px;
}

.wallet-balance-amount .balance-text img {
    width: 22px;
}

.wallet-refresh-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    cursor: pointer;
}

.wallet-refreshing {
    animation: wallet-spin 0.6s linear infinite;
}

@keyframes wallet-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wallet-restore-wrap {
    cursor: pointer;
    flex-shrink: 0;
}

.wallet-restore-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.55rem 0.9rem;
    text-transform: none;
    font-size: 15px;
    white-space: nowrap;
}

.wallet-restore-btn img {
    width: 22px;
    margin-right: 8px;
    filter: brightness(0);
}

.wallet-card-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #6f5e2a;
    position: relative;
}

@media (max-width: 499.98px) {
    .wallet-card-sub {
        flex-wrap: wrap;
        gap: 25px;
    }
}

.wallet-autotransfer {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.wallet-autotransfer-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    margin-left: 8px;
}

.wallet-status-active {
    color: #2ecc40;
    font-weight: bold;
}

.wallet-status-active.wallet-status-inactive {
    color: #858585;
}

.wallet-status-note {
    color: #858585;
    font-weight: 400;
}

@media (max-width: 767.98px) {
    .wallet-status-note {
        font-size: 1.5vh;
    }
}

/* Mobile: keep balance + restore button on one row; scale text with screen width */
@media (max-width: 767.98px) {
    .wallet-card-head {
        flex-wrap: nowrap;
    }

    .wallet-balance-label {
        font-size: clamp(10px, 3vw, 14px);
    }

    .wallet-balance-amount {
        font-size: clamp(16px, 5vw, 26px);
    }

    .wallet-refresh-icon {
        width: clamp(12px, 3.8vw, 20px);
        height: clamp(12px, 3.8vw, 20px);
        margin-left: clamp(5px, 1.5vw, 10px);
    }

    .wallet-restore-btn {
        font-size: clamp(11px, 3.3vw, 15px);
    }

    .wallet-restore-btn img {
        width: clamp(16px, 4.5vw, 22px);
        margin-right: clamp(4px, 1.5vw, 8px);
    }

    .wallet-autotransfer {
        font-size: clamp(10px, 3vw, 14px);
    }

    .wallet-status-note {
        font-size: 1em;
    }

    /* keep auto-transfer toggle + Transaction History on one row */
    .wallet-card-sub {
        flex-wrap: nowrap;
        gap: clamp(4px, 1.5vw, 10px);
    }

    .wallet-autotransfer-text {
        margin-left: clamp(4px, 1.5vw, 8px);
        column-gap: clamp(3px, 1vw, 6px);
    }
}

.wallet-history-link {
    display: flex;
    align-items: stretch;
    color: #B09A51 !important;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    padding-right: 50px;
    margin-left: auto;
}

.wallet-history-link > span:first-child {
    display: flex;
    align-items: center;
    text-align: right;
}

.wallet-history-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    width: 40px;
    height: 40px;
    background: #B09A51;
    border-radius: 4px 4px 0 0;
    position: absolute;
    bottom: 0;
    right: 0;
}

.wallet-history-toggle img {
    width: 14px;
    transform: rotate(180deg);
    filter: brightness(0);
    transition: transform 0.2s;
}

/* Transaction History link (matches the old first-child span styling) */
.wallet-history-text {
    display: flex;
    align-items: center;
    text-align: right;
    color: #B09A51 !important;
    text-decoration: none;
}

/* Mobile: scale the Transaction History text with screen width.
   Placed after the base .wallet-history-link rule so it wins on source order. */
@media (max-width: 767.98px) {
    .wallet-history-link,
    .wallet-history-text {
        font-size: clamp(11px, 3vw, 14px);
    }

    /* shrink reserved space for the history toggle button as it shrinks */
    .wallet-history-link {
        padding-right: clamp(34px, 9vw, 50px);
    }

    /* Member Level (profile-member-level.my-0) sits on the same row as Transaction History —
       scale it the same way instead of staying pinned at a fixed px size. */
    .profile-member-level.my-0 .profile-member-level-label {
        font-size: clamp(9px, 3vw, 12px);
    }

    .profile-member-level.my-0 .profile-member-tier-name {
        font-size: clamp(10px, 3.2vw, 14px);
    }
}

/* collapse/expand of the action icons via the history toggle */
.wallet-history-toggle {
    cursor: pointer;
}

.wallet-history-toggle-collapsed img {
    transform: rotate(0deg);
}

.wallet-actions.wallet-actions-collapsed {
    display: none;
}

/* auto-transfer toggle switch */
.wallet-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin: 0;
    flex-shrink: 0;
}

.wallet-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.wallet-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    border-radius: 24px;
    transition: 0.2s;
}

.wallet-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.wallet-switch input:checked + .wallet-slider {
    background-color: #2ecc40;
}

.wallet-switch input:checked + .wallet-slider:before {
    transform: translateX(22px);
}

/* Mobile: shrink the auto-transfer switch and history toggle button, same as .wallet-autotransfer text */
@media (max-width: 767.98px) {
    .wallet-switch {
        width: clamp(34px, 9vw, 46px);
        height: clamp(20px, 5vw, 24px);
    }

    .wallet-switch .wallet-slider:before {
        width: clamp(14px, 3.6vw, 18px);
        height: clamp(14px, 3.6vw, 18px);
    }

    .wallet-switch input:checked + .wallet-slider:before {
        transform: translateX(clamp(14px, 4vw, 22px));
    }

    .wallet-history-toggle {
        width: clamp(30px, 8vw, 40px);
        height: clamp(30px, 8vw, 40px);
    }

    .wallet-history-toggle img {
        width: clamp(10px, 2.8vw, 14px);
    }
}

/* action icons */
.wallet-actions {
    display: flex;
    margin-top: 16px;
}

.wallet-action {
    flex: 1;
    text-align: center;
    color: #fff !important;
    text-decoration: none;
    font-size: 12px;
}

    .wallet-action.selected {
        font-weight: bold;
        color: #F4E5AE !important;
    }

.wallet-action img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 6px;
}

.wallet-action span {
    display: block;
}

/* ── Home page quick-link buttons (Partnership / Mini Game / Live Soccer / VIP / Contact Us) ── */
.home-quick-links {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.home-quick-links::-webkit-scrollbar {
    display: none;
}


.home-quick-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 185px;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff !important;
    text-align: left;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.home-quick-btn:hover {
    filter: brightness(1.05);
    color: #fff !important;
}

.home-quick-btn img {
    width: 26px;
    height: 26px;
    margin: 0 8px 0 0;
    object-fit: contain;
    flex-shrink: 0;
}

.home-quick-btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.home-quick-btn-title {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.home-quick-btn-subtitle {
    font-size: 10px;
    margin-top:2px;
    font-weight: 400;
    opacity: 0.85;
    white-space: normal;
    min-width: 0;
}

.home-quick-btn-partnership {
    background: linear-gradient(135deg, #C9A227 0%, #8A6D1A 100%);
}

.home-quick-btn-minigame {
    background: linear-gradient(135deg, #E4483C 0%, #B02E24 100%);
}

.home-quick-btn-livesoccer {
    background: linear-gradient(135deg, #1FA98A 0%, #0E7A63 100%);
}

.home-quick-btn-vip {
    background: linear-gradient(135deg, #8B4FC7 0%, #5B2E8C 100%);
}

.home-quick-btn-contactus {
    background: linear-gradient(135deg, #3E7FE0 0%, #2454B0 100%);
}

.home-quick-btn-rtp {
    background: linear-gradient(135deg, #F5921F 0%, #E4640C 100%);
}

/* ── Refer & Earn banner ── */
.refer-earn-banner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height:70px;
    width: calc(100% );
    margin-top:6px;
    margin-bottom:16px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.refer-earn-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    pointer-events: none;
}

.refer-earn-left {
    position: relative;
    z-index: 1;
    flex: 0 0 29.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 3%;
    color: #fff7df;
}

.refer-earn-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.35px;
    line-height: 1.08;
    white-space: nowrap;
    text-transform: uppercase;
    color: #fff7df;
}

.refer-earn-subtitle {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin-top:4px;
    color: #fff7df;
    opacity: 0.95;
}

.refer-earn-right {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 26px 0 30px;
    min-width: 0;
}

.refer-earn-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: left;
    color: #fff7df;
    white-space: normal;
}

.refer-earn-item img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.refer-earn-item span {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.15;
}

.refer-earn-divider {
    width: 1px;
    height: 38%;
    background: rgba(255, 247, 223, 0.35);
    flex-shrink: 0;
}

.refer-earn-item-invite span {
    max-width: 56px;
}

.refer-earn-item-copy span {
    max-width: 46px;
}

.refer-earn-item-downline span {
    max-width: 64px;
}

.refer-earn-item-info span {
    max-width: 36px;
}

@media (min-width: 786px) {
    .refer-earn-right {
        justify-content: space-between;
        gap: 0;
    }

    .refer-earn-item {
        flex: 1 1 0;
    }

    .refer-earn-divider {
        margin: 0 8px;
    }
}

/* Keep the banner legible on phones while scaling only its text. */
@media (max-width: 768px) {
    .refer-earn-left {
        flex-basis: 29%;
        padding-left: 12px;
    }

    .refer-earn-title {
        font-size: 2.5vw;
    }

    .refer-earn-subtitle {
        font-size: clamp(8px, 2.1vw, 12px);
        margin-top: 4px;
    }

    .refer-earn-right {
        justify-content: space-between;
        padding: 0 10px 0 16px;
        gap: 0;
    }

    .refer-earn-item {
        flex: 1 1 0;
        min-width: 0;
        gap: 5px;
    }

    .refer-earn-item-invite {
        flex-grow: 1.05;
    }

    .refer-earn-item-copy {
        flex-grow: 0.85;
    }

    .refer-earn-item-downline {
        flex-grow: 1.2;
    }

    .refer-earn-item-info {
        flex-grow: 0.85;
    }

        .refer-earn-item img {
            width: 4vw;
            height: 4vw;
        }

    .refer-earn-item span {
        max-width: 37px;
        font-size: clamp(10px, 2.5vw, 14px);
        line-height: 1.15;
    }

    .refer-earn-item-copy span {
        max-width: 32px;
    }

    .refer-earn-item-downline span {
        max-width: 54px;
    }

    .refer-earn-item-info span {
        max-width: 32px;
    }

    .refer-earn-divider {
        height: 28px;
        margin: 0 4px;
    }
}

@media (max-width: 360px) {
    .refer-earn-left {
        flex-basis: 27%;
        padding-left: 8px;
    }

    .refer-earn-right {
        padding: 0 7px 0 10px;
        gap: 0;
    }

    .refer-earn-item {
        gap: 3px;
    }

    .refer-earn-item img {
        width: 18px;
        height: 18px;
    }

    .refer-earn-item span {
        max-width: 30px;
    }

    .refer-earn-item-downline span {
        max-width: 40px;
    }

    .refer-earn-divider {
        height: 22px;
    }
}

/* ── Hot Game section ── */
.hotgame-section {
    display: flex;
    align-items: stretch;
    border: 1px solid #B09A51;
    border-radius: 10px;
    overflow: hidden;
    background-color: #000;
}

.hotgame-label {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: #000;
}

.hotgame-icon {
    width: 26px;
    margin-bottom: 6px;
    filter: brightness(0);
}

.hotgame-title {
    font-weight: bold;
    font-size: 17px;
    line-height: 1.2;
}

.hotgame-subtitle {
    font-size: 12px;
}

@media (max-width: 767.98px) {
    .hotgame-label {
        flex: 0 0 90px;
    }

    .hotgame-title {
        font-size: 14px;
    }

    .hotgame-subtitle {
        font-size: 9px;
    }
}

.hotgame-list {
    flex: 1;
    display: flex;
    gap: 6px;
    padding: 8px;
    background-color: #000;
}

.hotgame-item {
    flex: 1;
    aspect-ratio: 1 / 1;
}

.hotgame-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}

/* ── Reusable section heading (gold tab) ── */
.section-heading-gold {
    border-bottom: 2px solid #B09A51;
}

.section-heading-gold-tab {
    display: inline-block;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: #000;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
}

/* ── Recommended game list (slick carousel) ── */
.rec-game-list {
    margin-top: 12px;
}

.rec-game-list .slick-slide {
    padding: 0 5px;
}

.rec-game-item {
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.rec-game-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.rec-game-name {
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 8px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Open the side menu from the left instead of the right */
.sidenav {
    left: 0;
    right: auto;
}

/* Home hamburger menu: slide in via translateX instead of animating width */
#mySidenav {
    width: 350px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    background: #16130E;
}

#mySidenav.open {
    transform: translateX(0);
}

/* Membership card at the top of the side navigation */
.sidenav .membership-card {
    position: relative;
    overflow: hidden;
    margin: 12px 14px 16px;
    padding: 14px;
    border-radius: 14px;
    background-image: url('../images/membership-card-bg.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    color: #16130E;
}

/* Gradient accent bar stuck to the very bottom of the card */
.sidenav .membership-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #A0956B, #FBF0C6, #B9AE84, #E8DDB3, #978C62);
}

/* Top row: user info (left) + token (right) */
.sidenav .membership-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidenav .membership-card .membership-user {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sidenav .membership-card .membership-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.sidenav .membership-card .membership-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidenav .membership-card .membership-welcome {
    font-size: 12px;
    font-weight: 400;
    color: #16130E;
    line-height: 1.2;
}

.sidenav .membership-card .membership-name {
    font-size: 15px;
    font-weight: 700;
    color: #16130E;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Token block (top right) */
.sidenav .membership-card .membership-token {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
}

.sidenav .membership-card .membership-token-icon {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    flex-shrink: 0;
}

.sidenav .membership-card .membership-token-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sidenav .membership-card .membership-token-label {
    font-size: 12px;
    font-weight: 400;
    color: #16130E;
}

.sidenav .membership-card .membership-token-value {
    font-size: 15px;
    font-weight: 700;
    color: #16130E;
}

/* Tier / progress section */
.sidenav .membership-card .membership-tier-section {
    margin-top: 10px;
    padding-top: 30px;
    border-top: 2px solid #86784D;
}

.sidenav .membership-card .membership-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidenav .membership-card .membership-tier-col {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sidenav .membership-card .membership-tier-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.sidenav .membership-card .membership-tier-caption {
    font-size: 11px;
    font-weight: 400;
    color: #16130E;
}

.sidenav .membership-card .membership-tier-name {
    font-size: 14px;
    font-weight: 700;
    color: #433A1E;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidenav .membership-card .membership-tier {
    width: auto;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidenav .membership-card .membership-progress {
    height: 8px;
    margin-top: 10px;
    border-radius: 4px;
    background-color: #615738;
    border: 2px solid #615738;
    overflow: hidden;
}

.sidenav .membership-card .membership-progress-fill {
    width: 45%; /* dummy progress state */
    height: 100%;
    border-radius: 4px;
    background: #B09A51;
}

.sidenav .membership-card .membership-next-text {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #16130E;
}

.sidenav .membership-card .membership-next-name {
    font-weight: 700;
    color: #16130E;
}

/* Live clock below the membership card */
.sidenav .sidenav-clock {
    margin: 0 14px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: #858585;
    background: #202020;
    padding:1%;
    border-radius:5px;
}

/* Quick-link buttons (2 per row) below the clock */
.sidenav .sidenav-quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 14px 16px;
}

.sidenav .sidenav-quick-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    border: 1px solid #B09A51;
    color: #000 !important;
    text-align: center;
    transition: filter 0.2s ease;
}

.sidenav .sidenav-quick-btn:hover {
    filter: brightness(1.05);
}

.sidenav .sidenav-quick-btn img {
    width: 26px;
    height: 26px;
    margin: 0 8px 0 0;
    object-fit: contain;
    filter: brightness(0);
}

.sidenav .sidenav-quick-btn span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

/* Grey divider after the quick-link buttons */
.sidenav .sidenav-divider {
    border-top: 1px solid #363636;
    margin: 0 14px 14px;
}

/* Language accordion */
.sidenav .sidenav-lang-accordion {
    margin: 0 14px 14px;
    border-radius: 8px;
    overflow: hidden;
    background: #202020;
}

.sidenav .sidenav-lang-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
}

.sidenav .sidenav-lang-caret {
    color: #fff;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.sidenav .sidenav-lang-header[aria-expanded="true"] {
    color: #B09A51;
}

.sidenav .sidenav-lang-header[aria-expanded="true"] .sidenav-lang-caret {
    transform: rotate(180deg);
}

.sidenav .sidenav-lang-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: #fff !important;
    font-size: 14px;
    cursor: pointer;
}

.sidenav .sidenav-lang-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidenav .sidenav-lang-item img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border: 2px solid #B09A51;
    border-radius: 50%;
    margin-right: 10px;
}

/* Language flag icons (mini games topbar language switcher) */
.lang-flag-circle {
    border: 2px solid #B09A51;
    border-radius: 50%;
    object-fit: cover;
}

/* Profile button below the language accordion (matches accordion size) */
.sidenav .sidenav-profile-btn {
    display: flex;
    align-items: center;
    margin: 0 14px 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #202020;
    color: #fff !important;
    font-size: 14px;
    cursor: pointer;
}

.sidenav .sidenav-profile-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Push the nav content into a column so the logout can sit at the bottom */
.sidenav .sidenav-nav-bar {
    display: flex;
    flex-direction: column;
}

/* Keep each section at its natural height so the bar scrolls instead of
   compressing the card / accordions when content exceeds the viewport */
.sidenav .sidenav-nav-bar > * {
    flex-shrink: 0;
}

/* Logout button pinned to the bottom of the side navigation */
.sidenav .sidenav-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 14px 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #363636;
    color: #ff4d4d !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sidenav .sidenav-logout-btn:hover {
    background: #424242;
}

/* Page header bar (back button + centered title) */
.page-header-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 50px;
    background: #202020;
}

.page-header-bar--profile {
    background: #3c3728;
}

.page-header-back {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.page-header-back img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.page-header-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/* ===== Deposit page reskin overrides ===== */
/* Wallet card spacing in the wallet layout */
.wallet-card-spacing {
    margin-bottom: 20px;
}

/* Form labels in white */
.text-label {
    color: #ffffff;
}

/* Section title used on profile sub-pages */
.profile-title {
    color: #F4E5AE;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 10px;
}

/* Inputs & selects site-wide: dark background, white text */
.form-control {
    background-color: #363636;
    color: #ffffff;
    border-color: #363636;
}

.form-control:focus {
    color: #ffffff;
    background-color: #1d1d1d;
    border-color: #b09a51;
    outline: 0;
    box-shadow: none;
}

.form-control::placeholder {
    color: #b5b5b5;
}

.form-control[readonly] {
    background-color: #363636;
    opacity: 1;
    color: white;
}

    .form-control[readonly]:focus {
        background-color: #363636;
        color: #5f5f5f;
        border-color: #363636;
    }

.input-group-addon {
    background-color: #363636;
    color: #ffffff;
    border-color: #363636;
}

/* Prefill amount buttons */
.amount-bt-container div {
    background-color: #202020;
    color: #858585;
    border: 1px solid transparent;
}

.amount-bt-container div.selected {
    border: 1px solid #F4E5AE;
    color: #F4E5AE;
    background-color: #202020;
}

/* ===== Login / Register auth pages ===== */
.auth-page {
    margin: 0 auto;
    padding-bottom: 40px;
}

.auth-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}

.auth-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    background-color: #202020;
    color: #858585;
    text-decoration: none;
}

    .auth-tab:hover, .auth-tab:focus {
        color: #858585;
        text-decoration: none;
    }

    .auth-tab.selected {
        background-color: #B09A51;
        color: #111111;
    }

        .auth-tab.selected:hover, .auth-tab.selected:focus {
            color: #111111;
        }

.auth-card {
    background: #202020;
    padding: 24px 20px 28px;
}

    .auth-card .input-label {
        color: #ffffff;
    }

.form-signin {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    /* The inputs and the Login button render at different font sizes and line heights, and the
       inputs also carry a 1px border, so matching them through padding does not work. Pin both
       to one height instead - box-sizing is border-box, so this is the final rendered height
       for all three and they cannot drift apart. */
    .form-signin .form-control,
    .form-signin .btn-app {
        height: 42px;
    }

/* "Keep Me Logged In" - sits opposite Forgot Password under the password field. */
.keep-logged-in {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b5b5b5;
    cursor: pointer;
    user-select: none;
}

    .keep-logged-in input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #b09a51;
        cursor: pointer;
        flex: none;
    }

.auth-social {
    margin-top: 18px;
}

.auth-social-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #858585;
    font-size: 13px;
    margin: 4px 0 14px;
}

    .auth-social-divider::before,
    .auth-social-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #3a3a3a;
    }

    .auth-social-divider span {
        padding: 0 12px;
    }

/* Make .btn-primary match the Deposit page CTA (.btn-app .btn-gradient) */
.btn-primary {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    border: 0 !important;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: #000;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        color: #000;
        background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    }

/* ── Daily Check-In modal: MYK99 Weekly Check-In (Views/Shared/_WeeklyCheckIn.cshtml) ──
   The customer's block draws its own panel, border and close button, so the modal is just
   a see-through frame around it. 520px = its 500px column plus the 10px it pads itself
   with; below 391px wide it drops that padding and runs edge to edge. */
#check_in_modal .modal-dialog {
    max-width: 520px;
}

#check_in_modal .modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
}

#check_in_modal .wk-stage {
    background: transparent;
}

/* ── Page hero: overlay title + subtitle on a blank hero image ──
   Universal — shared by the VIP and Commission/Referral hero banners.
   The blank background image is set per-page on the <img> src. */
.page-hero {
    position: relative;
}

.page-hero img {
    display: block;
    width: 100%;
}

.page-hero-text {
    position: absolute;
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
}

.page-hero-title {
    color: #f5e6af;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
    /* scale with viewport width, bounded for very small / large screens */
    font-size: clamp(18px, 5vw, 42px);
}

.page-hero-subtitle {
    display: inline-block;
    padding: 6%;
    color: #ffffff;
    padding-top: 5% !important;
    font-weight: bold;
    white-space: nowrap;
    font-size: clamp(9px, 3vw, 20px);
    /* highlighted bar stretched to fit the text */
    background-image: url('/images/referral/hero-image-highlighted.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Make .btn.btn-black match the .btn-app.btn-ghost button site-wide */
.btn.btn-black {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    background-color: #16130E;
    color: #B09A51;
    border: 1px solid #858585;
}
.btn.btn-black:hover {
    color: #B09A51;
}

/* Hot game list: size items so 4 fit per row, scroll horizontally beyond that */
.hotgame-list {
    flex-wrap: nowrap;
    overflow-x: auto;
}
.hotgame-item {
    flex: 0 0 calc((100% - 18px) / 4);
}

/* Transaction history table: divider below each row */
.table-yellow tbody tr td {
    border-bottom: 1px solid #363636;
    padding: 0.1rem 0.5rem;
}

/* Password field show/hide toggle */
.password-field-wrapper {
    position: relative;
}
.password-field-wrapper .form-control {
    padding-right: 40px;
}
.password-field-wrapper .password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #b5b5b5;
    cursor: pointer;
}

/* Enlarges the tappable area on mobile without affecting the icon's own box/position
   (icon already uses ::before for its glyph, so the hit-area goes on ::after). */
.password-field-wrapper .password-toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

/* Deposit Options icon dimming — dim by default, full opacity when selected */
.payment-selection .payment-selection-icon {
    opacity: 0.4;
}
.payment-selection.selected .payment-selection-icon {
    opacity: 1;
}

/* ── Desktop: dock the side navigation permanently on the left ──
   Below 992px the app stays the single centered mobile column with the
   hamburger sidebar sliding in. From 992px up, the sidebar (#mySidenav) is
   pinned open on the left at full height, the burger trigger is hidden, and
   the rest of the app — top bar, body, and bottom bar — is pushed into the
   space to the right of it. Logic/markup is untouched; layout only. */
@media only screen and (min-width: 992px) {
    /* The sidebar is always visible now, so drop the hamburger button. */
    .home-topbar .topbar-burger-btn {
        display: none !important;
    }

    /* Pin the sidebar open on the left: cancel the slide-in transform and
       lower its z-index so centered modals still appear above it. */
    #mySidenav {
        transform: none !important;
        transition: none !important;
        z-index: 100;
        border-right: 1px solid #3a3428;
    }

    /* Shift the top bar, body and bottom bar to the right of the sidebar.
       body-container is border-box + width:100%, so the padding narrows the
       content area rather than overflowing. 350px = #mySidenav width. */
    .body-container {
        padding-left: 350px;
    }

    /* No dark overlay when the sidebar is a permanent fixture. */
    #sidenav_opacity {
        display: none !important;
    }

    /* The bottom bar is position:absolute against the viewport, so the
       body-container padding doesn't move it — start it at the sidebar edge. */
    .main-bottom-container > .navigation-bar {
        left: 350px !important;
    }
}

/* Contact Us page */
.contact-hero {
    background:
        linear-gradient(135deg, #3a2a0a 0%, #120e05 60%, #1a1408 100%) padding-box,
        linear-gradient(135deg, #ffe9a0 0%, #c9992e 50%, #ffe9a0 100%) border-box;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.45), inset 0 0 12px 1px #F4E5AE;
    padding: 26px 20px;
    text-align: center;
}

.contact-hero-badge {
    display: inline-block;
    background-color: rgba(238, 204, 83, 0.12);
    color: #eecc53;
    border: 1px solid rgba(238, 204, 83, 0.4);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.contact-hero-title {
    color: white;
    font-weight: bold;
    font-size: 22px;
    margin-top: 3%;
    line-height: 1.3;
}

.contact-hero-subtitle {
    color: #cfcfcf;
    font-size: 13px;
    margin-top: 2%;
}

.contact-us-wrap {
    margin-left: auto;
    margin-right: auto;
}

.contact-section-title {
    color: #F4E5AE;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-section-subtitle {
    color: white;
    margin-top: 2px;
}

.contact-agent-card {
    display: block;
    background:
        linear-gradient(150deg, #2a2412 0%, #1a1509 45%, #0f0d08 100%) padding-box,
        linear-gradient(135deg, #ffe9a0 0%, #c9992e 50%, #ffe9a0 100%) border-box;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.45), inset 0 0 12px 1px #F4E5AE;
    padding: 12px 14px;
    margin-bottom: 14px;
    text-decoration: none !important;
    color: #ffffff;
}

.contact-agent-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-agent-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    overflow: hidden;
}

.contact-agent-info {
    flex: 1 1 0;
    min-width: 0;
}

.contact-agent-name {
    color: #F4E5AE;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

.contact-agent-role {
    color: white;
    font-size: 13px;
    margin-top: 1px;
}

.contact-agent-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

    .contact-agent-tags span {
        background-color: black;
        color: #858585;
        font-size: 11px;
        border: 2px solid #363636;
        border-radius: 4px;
        padding: 3px 8px;
    }

.contact-agent-divider {
    display: none;
}

.contact-agent-bottom {
    display: flex;
    align-items: center;
    gap: 28px;
    border: 1px solid transparent;
    border-radius: 8px; /* 按你的实际圆角 */
    background: linear-gradient(#000, #000) padding-box, linear-gradient(315deg, #E9DF9E 0%, #191101 100%) border-box;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
}

.contact-agent-chat-btn {
    margin-left: auto;
}

.contact-agent-stat {
    line-height: 1.3;
}

.contact-agent-stat-value {
    color: #F4E5AE;
    font-weight: bold;
}

.contact-agent-stat-label {
    color: #a0a0a0;
    font-size: 12px;
    margin-top:3px;
}

.contact-agent-online {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #47d437;
    font-weight: bold;
    font-size: 13px;
    text-transform:uppercase;
}

.contact-agent-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #47d437;
    display: inline-block;
}

.contact-agent-dot.offline {
    background-color: #e03532;
}

.contact-agent-chat-btn {
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: black;
    font-weight: bold;
    font-size: 13px;
    border-radius: 6px;
    padding: 9px 20px;
    white-space: nowrap;
    text-align: center;
}

.contact-social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3%;
}

.contact-social-card {
    width: 48.5%;
    border-radius: 12px;
    padding: 16px 16px 14px;
    text-decoration: none !important;
    margin-bottom: 14px;
    color: #ffffff;
}

.contact-social-card.facebook {
    background: linear-gradient(180deg, rgba(59, 108, 244, 0.22) 0%, #0a0a0d 55%);
    border: 1.5px solid #3b6cf4;
    box-shadow: 0 0 10px rgba(59, 108, 244, 0.25);
}

.contact-social-card.instagram {
    background: linear-gradient(180deg, rgba(194, 54, 168, 0.22) 0%, #0a0a0d 55%);
    border: 1.5px solid #c236a8;
    box-shadow: 0 0 10px rgba(194, 54, 168, 0.25);
}

.contact-social-card.twitter {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, #0a0a0d 55%);
    border: 1.5px solid #6b6b6b;
    box-shadow: none;
}

.contact-social-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-social-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
}

.contact-social-text {
    flex: 1 1 0;
    min-width: 0;
}

.contact-social-name {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.contact-social-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 2px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .contact-social-header {
        flex-direction: column;
        text-align: center;
    }

    .contact-social-icon {
        margin: 0 auto;
    }
}

.contact-social-follow {
    margin-top: 14px;
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #F4E5AE;
    font-weight: bold;
    border-radius: 6px;
    padding: 8px 0;
    text-align: center;
}

.contact-help-box {
    padding: 12px;
    background: #222222;
    border: 1px solid #3f3f3f;
    border-radius: 5px;
}

.contact-help-box .contact-section-title,
.contact-why-section .contact-section-title {
    color: #f7e7a3;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.contact-help-box .contact-section-subtitle {
    color: #f4f4f4;
    font-size: 13px;
    line-height: 1.2;
}

.contact-help-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.contact-help-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 84px;
    background: linear-gradient(135deg, #211805, #150f05) !important;
    border: 1px solid #36270b !important;
    border-radius: 5px;
    box-shadow: none;
    padding: 10px 4px 8px;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff;
}

.contact-help-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-help-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.contact-help-label {
    font-weight: bold;
    color: #ffffff;
    line-height: 1.08;
}

@media (max-width: 767px) {
    .contact-help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.contact-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.contact-why-card {
    min-height: 118px;
    background: #17130d;
    border: 1px solid #c9b56a;
    border-radius: 5px;
    box-shadow: none;
    padding: 13px 10px 10px;
    margin: 0;
    text-align: center;
}

.contact-why-icon {
    width: 31px;
    height: 31px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-why-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.contact-why-title {
    color: #f5e49a;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.05;
    margin-bottom: 0;
}

.contact-why-desc {
    color: #f4f4f4;
    font-size: 11px;
    line-height: 1.1;
    margin-top: 8px;
}

/* ── Home blog behind the footer "More" button ── */
/* Home blog behind the footer "More" button */
.home-blog {
    padding: 16px 20px 24px;
    text-transform: none;
}

/* Nothing is shown until the button is pressed - no preview, no fade, and no heading.
   Pressing it reveals the whole article at once. */
.home-blog-body {
    display: none;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}

    .home-blog-body.is-open {
        display: block;
    }

.home-blog-body img {
    max-width: 100%;
    height: auto;
}

.home-blog-toggle {
    display: block;
    margin: 12px auto 0;
    padding: 6px 22px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}


/* Per-page terms & conditions block rendered by _PageTerms.cshtml.
   Matches the .rebate-card treatment so it sits naturally under the cards. */
.page-terms {
    margin: 0 11px 16px;
    padding: 16px 18px;
    border: 1px solid #B09A51;
    background-color: #202020;
    border-radius: 10px;
    color: #ACACAC;
    font-size: 12px;
    line-height: 1.7;
}

/* Lucky Draw / Smash / Spin frame their panels in yellow on black
   (border: 1px solid #ffde3e; border-radius: 10px; background-color: black),
   so the terms box on those pages matches instead of the site default. */
.page-terms--minigame {
    border-color: #ffde3e;
    background-color: black;
}

.page-terms-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.page-terms--minigame .page-terms-title {
    color: #ffdd33;
}

.page-terms-intro {
    margin-bottom: 10px;
}

.page-terms-list {
    margin: 0;
    padding-left: 18px;
}

    .page-terms-list li {
        margin-bottom: 6px;
    }

.page-terms-footer {
    margin-top: 10px;
    color: #858585;
}
/* ── Home notice popup: carousel frame ──
   Only the multi-notice case gets arrows / name buttons / dots; with a single
   notice the markup carries none of these elements and slick never initialises. */
.notice-popup {
    position: relative;
    /* deliberately keeps the global .modal-content overflow:hidden + #202020
       background, so the frame still clips to its rounded corners */
    border-radius: 10px;
}

/* Slick can only measure slides once the dialog is actually on screen, so it is
   initialised on shown.bs.modal - which fires a full fade-transition after the popup
   appears. Until then every slide sits in normal flow and they stack down the page.
   Keep only the first one visible for that window so the popup opens looking the way
   it will settle. */
.notice-slider:not(.slick-initialized) .notice-slide + .notice-slide {
    display: none;
}

.notice-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: #202020;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
}

.notice-close:hover,
.notice-close:focus {
    filter: brightness(1.1);
    outline: 0;
}

/* Prev / next arrows, vertically centred over the image */
.notice-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
    width: 30px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    /* gradient cannot paint glyph colour directly, so clip it to the text */
    background-image: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.notice-arrow:focus { outline: 0; }
.notice-arrow-prev { left: 2px; }
.notice-arrow-next { right: 2px; }

/* Footer band behind the name buttons and dots. */
.notice-footer {
    background: #202020;
}

/* Exactly three buttons across. The row is allowed to be wider than the frame
   when the active buttons full name needs the space - overflow is hidden and the
   row is centred, so the first and last are clipped rather than wrapping. */
.notice-tabs {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
    padding: 8px 6px 4px;
}

/* only the active button and its two neighbours are rendered */
.notice-tab {
    display: none;
    flex: 0 0 calc((100% - 8px) / 3);
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid #B09A51;
    border-radius: 4px;
    background: transparent;
    color: #F4E5AE;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.notice-tab.in-window { display: block; }

/* the highlighted one is never truncated - it sizes to its full name and the
   neighbours give up the room */
.notice-tab.active {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
    color: #202020;
    border-color: #F4E5AE;
}

.notice-tab:focus { outline: 0; }

/* Pagination dots, rendered here by slick via appendDots */
.notice-dots { padding-bottom: 10px; }

/* The dismiss row is the bottom of the frame, so it carries the surface and the
   rounded corners. Without this it rendered on the page behind the popup, outside
   the frame entirely. */
.notice-dismiss {
    background: #202020;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.notice-dots .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice-dots .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.notice-dots .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #5a5341;
    text-indent: -9999px;
}

.notice-dots .slick-dots li button:before { display: none; }

.notice-dots .slick-dots li.slick-active button {
    width: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   MYK99 theme
   Everything below applies at every width: the desktop is the same layout
   with the sidebar pinned open at 992px, and the owner asked for the Figma
   look there too (the blocks were written for the 375px frames first, hence
   the "mobile" labels). Desktop-only adjustments sit in the last block.
   Palette taken from the Figma frames, not guessed:
     page      #0A0D15      top bar   #000000      bottom nav #111622
     primary   #0F84EA → #06286C      gold       #E9C559
   ══════════════════════════════════════════════════════════════════════════ */
@media screen {

    html,
    body {
        background-color: #0A0D15;
    }

    /* ── Top bar ── */
    .home-topbar {
        background-color: #000000;
    }

    /* The burger sits inside a thin ring in the design rather than bare. */
    .home-topbar .topbar-burger-btn {
        width: 34px;
        height: 34px;
        border: 1px solid #2D3A57;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .home-topbar .topbar-burger {
        height: 16px;
    }

    .home-topbar .topbar-support {
        height: 22px;
    }

    .home-topbar .topbar-notification {
        margin-left: 12px;
    }

    /* ── Bottom nav ── */
    .bottom-nav {
        background-color: #111622;
        border-top: 1px solid #1B2437;
    }

    .bottom-nav-label {
        font-weight: 400;
    }

    /* the design keeps every label white; only the icon carries the blue accent */
    .bottom-nav-item.selected .bottom-nav-label {
        color: #ffffff;
    }

    /* Raised centre button: gold ring, page-dark fill, M logo on top. */
    .bottom-nav-circle {
        background-image:
            url('/images/iconv3/middle-logo.webp'),
            linear-gradient(#0A0D15, #0A0D15),
            linear-gradient(180deg, #E9C559 0%, #8A6B23 100%);
        box-shadow: 0 0 12px rgba(233, 197, 89, .25);
    }
}
/* ── MYK99 mobile: Login / Register ──────────────────────────────────────────
   Geometry and colour read off the Figma frames (Login 19-968, Sign Up 68-1152),
   which export at 2x from a 375x812 artboard:
     gutter 12   field/button/tab height 40   radius 4   tab track padding 4
     page #0A0D15   tab track #19191D   active tab + links #156AEE
     idle tab text #E9C65A   field #25252B   button #0F86ED -> #06286C
   Mobile-scoped like the rest of the MYK99 theme; the desktop auth pages keep
   the gold styling they have today. ──────────────────────────────────────── */
@media screen {

    /* Segmented LOGIN / SIGN UP control: one rounded track, the active half filled.
       Scoped to .auth-page - Home/CommissionDetails reuses .auth-tabs for its own
       three-tab strip and is a separate screen in this redesign. */
    .auth-page .auth-tabs {
        gap: 0;
        margin: 16px 12px 0;
        padding: 4px;
        background-color: #19191D;
        border-radius: 6px;
    }

    .auth-page .auth-tab {
        height: 40px;
        padding: 0;
        background-color: transparent;
        border-radius: 4px;
        color: #E9C65A;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

        .auth-page .auth-tab:hover,
        .auth-page .auth-tab:focus {
            color: #E9C65A;
        }

        .auth-page .auth-tab.selected,
        .auth-page .auth-tab.selected:hover,
        .auth-page .auth-tab.selected:focus {
            background-color: #156AEE;
            color: #ffffff;
        }

    /* 12px gutter, and the form runs the full width of it - the 80% desktop width
       would leave it floating in the middle of a phone screen. */
    .auth-page .auth-card {
        padding-left: 12px;
        padding-right: 12px;
    }

    .auth-page .form-signin {
        width: 100%;
    }

    .auth-page .input-label {
        margin: 20px 0 10px;
        color: #ffffff;
        font-weight: 700;
    }

    /* Fields: flat dark fill, no border, 40px tall. */
    .auth-page .form-signin .form-control,
    .auth-page .form-control {
        height: 40px;
        padding: 0 14px;
        background-color: #25252B;
        border: 0;
        border-radius: 4px;
        color: #ffffff;
    }

        .auth-page .form-control::placeholder {
            color: #8A8A90;
        }

        .auth-page .form-control:focus {
            background-color: #25252B;
            border: 0;
            color: #ffffff;
            box-shadow: none;
        }

    .auth-page .password-field-wrapper .form-control {
        padding-right: 40px;
    }

    /* Country prefix. Register already ships a "+60" addon, so this restyles existing
       markup rather than adding any, and the flag arrives through ::before - the
       desktop page therefore keeps exactly the HTML and the look it has today. */
    .auth-page .input-group.input-group-spaced {
        gap: 8px;
    }

    .auth-page .input-group.input-group-spaced .input-group-addon {
        gap: 5px;
        padding: 0 8px;
        background-color: #25252B;
        border: 0;
        border-radius: 4px;
        color: #ffffff;
        font-weight: 400;
    }

        .auth-page .input-group.input-group-spaced .input-group-addon::before {
            content: "";
            flex: none;
            width: 20px;
            height: 14px;
            border-radius: 2px;
            background: url('/images/flag/malaysia.webp') center / cover no-repeat;
        }

    /* Primary action. */
    .auth-page .form-signin .btn-app.btn-gradient,
    .auth-page .btn-app.btn-gradient {
        height: 40px;
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        border-radius: 4px;
        color: #ffffff;
        letter-spacing: .04em;
    }

    .auth-page .text-center.pt-3 {
        padding-top: 24px !important;
    }

    .auth-page .label-hint {
        margin-top: 6px;
        color: #8A8A90;
    }

    .auth-page .keep-logged-in {
        color: #8A8A90;
    }

        .auth-page .keep-logged-in input[type="checkbox"] {
            accent-color: #156AEE;
        }

    .auth-page .auth-social-divider {
        color: #8A8A90;
    }

    /* Google / Telegram buttons: white discs from the Figma Login frame (the gold
       discs stay for whatever else uses those two images) */
    .auth-page .auth-social img[src$="/images/google.webp"] {
        content: url('/images/myk99/login-google.webp');
    }

    .auth-page .auth-social img[src$="telegram frame.webp"] {
        content: url('/images/myk99/login-telegram.webp');
    }

    .auth-page .password-toggle-icon {
        color: #8A8A90;
    }

    /* Forgot Password / Create an account / Support / Log in instead. In the design
       these are blue, but the views paint them gold through an inline style
       attribute, which only !important can outrank. Confined to this media query,
       so the desktop pages keep their gold links. */
    .auth-page a.primary-text,
    .auth-page .auth-card a[style] {
        color: #156AEE !important;
    }
}

/* ── MYK99 mobile: side menu (Figma 79-3328) ─────────────────────────────────
   Drawer 300 wide on #0A0D15 with a 16px gutter. Membership card is a dark
   gold-glow gradient with white text (was a light gold texture with dark text),
   quick links are the blue MYK99 gradient, accordions/profile sit on #19191D,
   logout on #25252B in #ED1919. Same markup, mobile only. ────────────────── */
@media screen {
    #mySidenav {
        width: 300px;
        background: #0A0D15;
    }

    /* normal-bg.png from the Figma card (gold bar and rounded corners are part of the
       image), so the CSS accent bar is dropped here. */
    .sidenav .membership-card {
        margin: 16px 16px 16px;
        padding: 16px 12px 14px;
        border-radius: 8px;
        box-shadow: none;
        color: #ffffff;
        background-image: url('/images/myk99/membership-card-bg.webp');
        background-size: 100% 100%;
        background-position: center;
    }

        .sidenav .membership-card::after {
            display: none;
        }

        .sidenav .membership-card .membership-welcome,
        .sidenav .membership-card .membership-name,
        .sidenav .membership-card .membership-token-label,
        .sidenav .membership-card .membership-token-value,
        .sidenav .membership-card .membership-tier-name,
        .sidenav .membership-card .membership-next-text,
        .sidenav .membership-card .membership-next-name {
            color: #ffffff;
        }

        .sidenav .membership-card .membership-tier-caption {
            color: #C9C4B4;
        }

        .sidenav .membership-card .membership-avatar {
            background-color: #ffffff;
        }

        .sidenav .membership-card .membership-tier-section {
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, .18);
        }

        .sidenav .membership-card .membership-progress {
            height: 6px;
            border: 0;
            border-radius: 3px;
            background-color: #4B4533;
        }

        .sidenav .membership-card .membership-progress-fill {
            background: #C1BDB1;
        }

    .sidenav .sidenav-clock {
        margin: 0 16px 16px;
        padding: 4px 8px;
        border-radius: 4px;
        background: #19191D;
        color: #858585;
    }

    .sidenav .sidenav-quick-links {
        gap: 8px;
        margin: 0 16px 16px;
    }

    .sidenav .sidenav-quick-btn {
        height: 48px;
        padding: 0 6px;
        border: 0;
        border-radius: 4px;
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        color: #ffffff !important;
    }

        .sidenav .sidenav-quick-btn img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            filter: brightness(0) invert(1);
        }

        .sidenav .sidenav-quick-btn span {
            font-weight: 700;
            white-space: nowrap;
        }

    .sidenav .sidenav-divider {
        margin: 0 16px 16px;
        border-top-color: #25252B;
    }

    .sidenav .sidenav-lang-accordion {
        margin: 0 16px 8px;
        border-radius: 4px;
        background: #19191D;
    }

    /* vertical padding stays at the original 12px / 10px - the tighter Figma rows
       only work with its smaller type, and font sizes are not to be changed */
    .sidenav .sidenav-lang-header {
        padding: 12px 12px;
    }

        .sidenav .sidenav-lang-header[aria-expanded="true"] {
            color: #156AEE;
            font-weight: 700;
        }

    .sidenav .sidenav-lang-panel {
        padding-bottom: 4px;
    }

    .sidenav .sidenav-lang-item {
        padding: 10px 12px 10px 20px;
    }

        /* Each language shows its country flag, plain and round like the header's - the
           base rule's gold ring is the old MYCS33 look. */
        .sidenav .sidenav-lang-item img {
            border: 0;
        }

    .sidenav .sidenav-profile-btn {
        margin: 0 16px 8px;
        padding: 12px 12px;
        border-radius: 4px;
        background: #19191D;
    }

    .sidenav .sidenav-logout-btn {
        height: 45px;
        margin: auto 16px 16px;
        padding: 0 12px;
        border-radius: 4px;
        background: #25252B;
        color: #ED1919 !important;
        font-weight: 700;
    }

        .sidenav .sidenav-logout-btn:hover {
            background: #2C2C33;
        }
}

/* ── MYK99 mobile: shared components + home page (Figma 224-7145 / 2002-7008) ──
   The gold accent (#F4E5AE→#B09A51) becomes the MYK99 blue everywhere on
   mobile: primary buttons, section headings, selected states, table heads,
   links. Restore Balance and the testimonial stars stay gold, as in the design.
   Home geometry measured from the 2x export: 12px gutter, 40px auth buttons,
   143x45 promo tiles, 42px refer strip, 60px category column, 8px grid gaps. */
@media screen {

    /* ---- primitives ---- */
    .btn-gradient,
    .btn-gradient:hover, .btn-gradient:focus, .btn-gradient:active,
    .btn-primary,
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        color: #ffffff;
        border-radius: 4px;
    }

    .btn-ghost {
        background-color: #0A0D15;
        border: 1px solid #858585;
        border-radius: 4px;
        color: #E0B74C;
    }

    .btn-app {
        height: 40px;
    }

    .primary-text {
        color: #156AEE !important;
    }

    .primary-bg {
        background-color: #156AEE !important;
    }

    .color-main,
    .section-heading,
    .youtube-section-title,
    .footer-section-title,
    .profile-title,
    .contact-section-title,
    .testimonial-card-title {
        color: #156AEE;
    }

    .form-control:focus {
        border-color: #156AEE;
    }

    .game-selection.selected,
    .amount-bt-container div.selected {
        border-color: #156AEE;
        color: #156AEE;
    }

    .table-yellow thead tr,
    .table-yellow thead th {
        color: #156AEE;
    }

    /* DataTables pager. The base rules further up paint Next gold and Previous on a
       brown-black plate with every property !important, so the blue has to be
       !important as well - without it Next stayed gold on the History page. */
    .paginate_button.previous a {
        background-color: #0E1A2E !important;
        border-color: #156AEE !important;
        color: #156AEE !important;
    }

    .paginate_button.next a {
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%) !important;
        color: #ffffff !important;
    }

    .paginate_button.next a,
    .lw-game-pill,
    .section-heading-gold-tab,
    .notice-close,
    .notice-tab.active,
    .notice-dots .slick-dots li.slick-active button,
    .referral-share-btn,
    .contact-agent-chat-btn {
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        color: #ffffff;
    }

    .section-heading-gold {
        border-bottom-color: #156AEE;
    }

    .notice-tab {
        border-color: #156AEE;
        color: #156AEE;
    }

        .notice-tab.active {
            border-color: #156AEE;
        }

    .btn-black, .btn.btn-black, .btn.btn-black:hover {
        color: #156AEE;
        border-color: #156AEE;
    }

    .moving-banner .banner-progress .banner-progress-bar {
        background-color: #156AEE;
    }

    /* ---- home: banner / marquee / auth row ---- */
    /* The 2px gold rule under the banner is not in the design. */
    .moving-banner.is-mobile + div[style*="615738"] {
        display: none;
    }

    .marquee {
        height: 28px !important;
    }

    .py-3.d-flex.px-4 {
        padding: 8px 12px 8px !important;
    }

        .py-3.d-flex.px-4 > .w-50.pr-2 {
            padding-right: 4px !important;
        }

        .py-3.d-flex.px-4 > .w-50.pl-2 {
            padding-left: 4px !important;
        }

        .py-3.d-flex.px-4 .btn-app {
            height: 40px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

    /* ---- home: promo tiles (Contact Us / Mini Game / VIP) ---- */
    .home-quick-links {
        gap: 8px;
        margin: 0 0 14px;
        padding: 0 12px;
    }

    .home-quick-btn {
        min-height: 45px;
        padding: 0 8px;
        border: 0;
        border-radius: 4px;
    }

        .home-quick-btn img {
            width: 30px;
            height: 30px;
            margin-right: 8px;
        }

    .home-quick-btn-title {
        line-height: 1.1;
        text-transform: uppercase;
    }

    .home-quick-btn-subtitle {
        line-height: 1.15;
        margin-top: 1px;
        opacity: 1;
    }

    .home-quick-btn {
        overflow: hidden;
    }

    /* Flat gold / red / teal in tile order, as drawn. */
    .home-quick-links .home-quick-btn:nth-child(1) { background: #B09A51; }
    .home-quick-links .home-quick-btn:nth-child(2) { background: #CD2E2E; }
    .home-quick-links .home-quick-btn:nth-child(3) { background: #1FA98A; }
    .home-quick-links .home-quick-btn:nth-child(4) { background: #156AEE; }

    /* RTP keeps the orange it has on the other brands - the tile is the odd one out
       on purpose, so it reads first. Class beats the nth-child rules above. */
    .home-quick-links .home-quick-btn.home-quick-btn-rtp {
        background: linear-gradient(135deg, #F5921F 0%, #E4640C 100%);
    }

    /* ---- home: Refer & Earn strip — colours and icons only ----
       The bar keeps every size it had before the theme (70px, 29.5% left block,
       36px / 4vw icons, the phone breakpoints above). Only the artwork changes:
       the gold frame image is swapped for the same frame in the Figma colours
       (blue gradient + the Figma pointer vector), the #156AEE rim is a border
       (border-box, so the height stays 70px) and the icons are the Figma gold set. */
    .refer-earn-banner {
        border-top: 1px solid #156AEE;
        border-bottom: 1px solid #156AEE;
        background: #07286C;
    }

    .refer-earn-frame[src$="Frame 1707479727.webp"] {
        content: url('/images/myk99/refer-strip-frame.webp');
    }

    .refer-earn-left,
    .refer-earn-title,
    .refer-earn-subtitle,
    .refer-earn-item {
        color: #ffffff;
    }

    .refer-earn-subtitle {
        opacity: 1;
    }

    /* two of the items pin the cream colour inline */
    .refer-earn-right a.refer-earn-item[style] {
        color: #ffffff !important;
    }

    .refer-earn-item img[src$="home/invite.webp"]    { content: url('/images/myk99/refer-invite.webp'); }
    .refer-earn-item img[src$="home/copy-link.webp"] { content: url('/images/myk99/refer-copy.webp'); }
    .refer-earn-item img[src$="home/downline.webp"]  { content: url('/images/myk99/refer-downline.webp'); }
    .refer-earn-item img[src$="home/info.webp"]      { content: url('/images/myk99/refer-info.webp'); }

    .refer-earn-divider {
        background: rgba(233, 197, 89, .6);
    }

    /* ---- home: category column + game grid ---- */
    /* The view pins padding:0 16px inline with !important, so the two children pull
       outward by 4px each to land on the 12px gutter without touching the markup. */
    .game-section {
        gap: 8px;
    }

    .game-section .game-tabs {
        margin-left: -4px;
    }

    .game-section .game-body {
        margin-right: -4px;
    }

    .game-tabs {
        max-width: 60px;
        flex-basis: 60px;
        gap: 0;
    }

        .game-tabs .mobile-game-selection {
            min-height: 62px;
        }

            .game-tabs .mobile-game-selection.selected {
                color: #3EB0E5 !important;
            }

                .game-tabs .mobile-game-selection.selected::before {
                    inset: 0 0 -1px;
                    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(62, 176, 229, .35) 0%, rgba(62, 176, 229, 0) 100%);
                    border-bottom: 2px solid #3EB0E5;
                }


    .game-body .mobile-game-container.row {
        width: auto !important;
        margin-left: -4px;
        margin-right: -4px;
    }

    .game-body .game {
        padding: 0 4px 8px !important;
    }

    /* ---- home: game tips ("Recommended") ---- */
    .game-tips-categories {
        padding: 0 12px 16px;
    }

    .game-tip-card {
        background: #19191D;
        border-radius: 4px;
    }

    /* ---- home: Live Withdraw ---- */
    .live-tx-header {
        background: linear-gradient(90deg, #1356C7 0%, #0B3A8F 100%);
        color: #ffffff;
    }

    .live-tx-title,
    .live-tx-subtitle {
        color: #ffffff;
    }

    .live-tx-body {
        background: #19191D;
    }

    /* masked player id is blue in the design, "Player Withdrawal" white */
    .lw-member-name {
        color: #156AEE;
    }

    .lw-member-label {
        color: #ffffff;
    }

    /* ---- wallet card (home after login, deposit, withdraw…) ---- */
    /* Home after login: the wallet block sits on its own #19191D panel (Figma). */
    .wallet-card {
        padding-left: 12px !important;
        padding-right: 12px !important;
        background-color: #19191D;
    }

    /* The wallet pages (Deposit, Withdraw… via _LayoutWallet) keep it on the page colour. */
    .wallet-card-spacing .wallet-card {
        background-color: #0A0D15;
    }


    .wallet-balance-amount {
        color: #ffffff;
    }



    /* Restore Balance keeps its original size (padding-based, not the 40px .btn-app
       height used elsewhere) and only takes the gold colour. */
    .wallet-card .btn-app.btn-gradient.wallet-restore-btn {
        height: auto;
        background: linear-gradient(180deg, #E9C559 0%, #C9A93A 100%);
        color: #1A1400;
        border-radius: 4px;
        font-weight: 700;
    }


    .wallet-card-sub {
        border-bottom: 2px solid #156AEE;
    }

    .wallet-history-link,
    .wallet-history-text {
        color: #156AEE !important;
    }

    .wallet-history-toggle {
        background: #156AEE;
    }

        .wallet-history-toggle img {
            filter: brightness(0) invert(1);
        }

    .wallet-action.selected {
        color: #156AEE !important;
    }
}

/* ── MYK99 mobile: brand marks ───────────────────────────────────────────────
   The views still ship the mycs33 logo. On mobile the top-bar image is swapped
   through `content:` (Chrome/Safari/Firefox honour it on <img>) and the bottom
   nav centre badge uses the MYK99 mark cut from the Figma frame, ring included,
   so the CSS ring is dropped. Both assets are WebP under images/myk99/. */
@media screen {
    .home-topbar .topbar-logo-img {
        content: url('/images/myk99/logo.webp');
        height: 32px;
        width: auto;
    }

    /* Centre badge, measured off the Figma bottom bar: a 64px disc that rises 24px above
       the bar. badge.webp is the whole badge on a transparent ground - the blue-to-gold
       ring, the inner glow and the mark - so there is no CSS ring, and no outer glow
       either: the design has none.

       The first cut of this asset was framed too tightly: the ring ran off three sides of
       the image, so only its bottom arc survived the round clip, and a gold box-shadow was
       standing in for the rest. That is what read as "a gold glow" instead of the ring. */
    .bottom-nav-circle {
        width: 64px;
        height: 64px;
        top: -25px;
        border: 0;
        /* the layout sets the badge image inline, hence the !important */
        background-image: url('/images/myk99/badge.webp') !important;
        background-color: transparent;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: none;
    }
}

/* ── MYK99 mobile: wallet pages — Deposit 79-3722, Withdraw 93-1465, Rebate 96-2328,
   Rebate history 96-2801 ────────────────────────────────────────────────────
   These views carry their own <style> blocks, which come after site.css in the
   document, so every override here is written as `body .x` to outrank them on
   specificity. Tiles sit on #19191D, inputs on #25252B, the selected state is a
   1px #156AEE border with blue text, primary actions are the blue gradient and
   the secondary action is the ghost button. ────────────────────────────── */
@media screen {

    /* page header: back arrow + grey uppercase title on the page background */
    body .page-header-bar {
        min-height: 40px;
        padding: 5px 50px;
        background: #0A0D15;
    }

    body .page-header-back {
        left: 12px;
    }

    body .page-header-title {
        color: #858585;
    }

    body .wallet-card-spacing {
        margin-bottom: 16px;
    }

    /* section labels ("Deposit Options*") */
    body .text-label,
    body .blue-container-label,
    body .input-label {
        color: #ffffff;
        font-weight: 700;
    }

    /* .px-4 is the page gutter on every screen; the design uses 12px throughout.
       The top bar keeps its wider inset (burger sits ~21px in). */
    body .px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body .home-topbar .px-4 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body .game-selection-parent {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

        /* Deposit Options is a 4-up grid in the design; an older mobile rule forces 3. */
        body .game-selection-parent.grid-cols-4 {
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 8px !important;
        }

    /* RM prefix on the amount field */
    body .input-group .input-group-addon {
        display: flex;
        align-items: center;
        padding: 0 12px;
        background-color: #25252B;
        border: 0;
        border-radius: 4px 0 0 4px;
        color: #ffffff;
    }

    /* The prefix and the field are one control, so the field gives up its rounded corners on
       the side it is joined on - they were leaving a notch at the join. !important because
       "body #amount" sets the 4px radius with an ID. (.input-group-spaced, the register
       form, keeps prefix and field apart on purpose and is left alone.) */
    body .input-group:not(.input-group-spaced) > .input-group-addon + .form-control {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    body .input-group:not(.input-group-spaced) > .form-control:not(:last-child) {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Deposit: the "+0 MY TOKEN $ Earned" cell on the right of the amount field. Its 8px
       padding made it 43px tall; the group stretches every cell to the tallest one, so the
       RM prefix grew with it while the input stayed at its fixed 40px - both cells hung 3px
       below the field. Without the vertical padding the 40px input is the tallest thing in
       the row again and the three read as one field, the way the design draws it. */
    body #deposit_form .input-group > .form-control + .input-group-addon {
        margin-top: 0 !important;
        padding: 0 8px !important;
        border-radius: 0 4px 4px 0;
    }

    /* ---- option / method / bank tiles ---- */
    body .payment-selection,
    body .provider-selection,
    body .wallet-provider-selection,
    body .telco-provider-selection,
    body .usdt-provider-selection,
    body .duitnow-provider-selection,
    body .game-selection,
    body .bank-selection {
        background-color: #19191D;
        border: 1px solid transparent;
        border-radius: 4px !important;
    }

    body .payment-selection {
        height: 80px !important;
    }

    body .provider-selection,
    body .wallet-provider-selection,
    body .telco-provider-selection,
    body .usdt-provider-selection,
    body .duitnow-provider-selection {
        height: 50px !important;
    }

    body .payment-selection.selected,
    body .provider-selection.selected,
    body .wallet-provider-selection.selected,
    body .usdt-provider-selection.selected,
    body .duitnow-provider-selection.selected,
    body .telco-provider-selection.selected,
    body .game-selection.selected,
    body .bank-selection.selected {
        background: #0E1A2E;
        border-color: #156AEE;
        color: #156AEE;
    }

    body .payment-selection-label {
        margin-top: 6px;
        color: #858585;
    }

    body .payment-selection.selected .payment-selection-label,
    body .selected .deposit-method-label,
    body .bank-selection.selected .bank-selection-label {
        color: #156AEE;
    }

    /* Option icons are the flat grey/blue pair the view already swaps; just size them. */
    body .payment-selection--labeled .payment-selection-icon {
        max-height: 30px;
    }

    body .deposit-method-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        overflow: hidden;
        background: #ffffff;
    }

        body .deposit-method-icon-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    body .deposit-method-label {
        color: #858585;
    }

    body .bank-selection-icon {
        height: 32px;
        max-width: 32px;
    }


    /* ---- amount input + preset buttons ---- */
    body .form-control,
    body #amount,
    body #amount:focus {
        height: 40px;
        padding: 0 14px;
        background-color: #25252B;
        border: 0;
        border-radius: 4px;
        color: #ffffff;
        box-shadow: none;
    }

    /* A field inside an .input-group was collapsing to its text height (21px against the
       40px every other control uses): the old ".input-group .form-control{height:auto}"
       higher up carries two classes and so outranks "body .form-control". Deposit never
       showed it because "body #amount" wins on an ID; Withdraw > Crypto (RM and USDT) and
       the +60 mobile fields had no such rule. .input-group-spaced is the register form,
       which is styled separately and left alone. */
    body .input-group:not(.input-group-spaced) .form-control {
        height: 40px;
    }

    body select.form-control {
        padding-right: 36px;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
    }

    body .form-control::placeholder {
        color: #8A8A90;
    }

    body textarea.form-control {
        height: auto;
        padding: 10px 14px;
    }

    body .amount-bt-container {
        margin-top: 8px;
        gap: 8px;
        grid-template-columns: repeat(4, 1fr);
    }

        body .amount-bt-container div {
            flex: 1 1 0;
            width: auto;
            height: 40px;
            padding: 0 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: 1px solid transparent;
            background-color: #19191D;
            color: #858585;
        }

            body .amount-bt-container div.selected,
            body .amount-bt-container div:hover {
                background-color: #0E1A2E;
                border-color: #156AEE;
                color: #156AEE;
            }

    /* ---- CLEAR / DEPOSIT and CLEAR / CONFIRM ---- */
    body .btn.btn-black,
    body .btn.btn-black:hover,
    body .btn.btn-black:focus {
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #0A0D15;
        border: 1px solid #858585;
        border-radius: 4px;
        color: #E0B74C;
        font-weight: 700;
        letter-spacing: .04em;
    }

    body .btn.btn-primary,
    body .btn.btn-primary:hover,
    body .btn.btn-primary:focus,
    body .btn.btn-primary:active {
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        border: 0;
        border-radius: 4px;
        color: #ffffff;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    body .w-50.pr-1 {
        padding-right: 4px !important;
    }

    body .w-50.pl-1 {
        padding-left: 4px !important;
    }

    /* bank detail rows (manual transfer) */
    body .bank-detail {
        background-color: #19191D;
        border-radius: 4px;
    }

    body .table-yellow,
    body .primary-bg.table-yellow {
        background-color: #19191D !important;
    }

    /* ---- segmented tabs: Withdraw (Bank Transfer / Crypto), Rebate (Rebate / Sport / History) ---- */
    body .promo-tabs {
        gap: 0;
        margin: 0 12px 16px;
        padding: 4px !important;
        background-color: #19191D;
        border-radius: 6px;
    }

    body .promo-tab {
        height: 40px;
        padding: 0 4px;
        background-color: transparent;
        border-radius: 4px;
        color: #858585;
        font-weight: 400;
    }

        body .promo-tab.selected {
            background-color: #156AEE;
            color: #ffffff;
            font-weight: 700;
        }

    /* withdraw: saved bank tiles */
    body .bank-select-btn {
        min-height: 48px;
        padding: 8px 12px;
        gap: 10px;
        background: #19191D;
        border: 1px solid transparent;
        border-radius: 4px;
        color: #858585;
        font-weight: 400;
    }

        body .bank-select-btn.active {
            background: #0E1A2E;
            border-color: #156AEE;
            color: #156AEE;
        }

        body .bank-select-btn img {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            object-fit: contain;
            background: #ffffff;
        }

    /* ---- rebate summary card ---- */
    body .rebate-card {
        margin: 0 12px 16px;
        padding: 14px 12px;
        border: 1px solid #E9C559;
        border-radius: 6px;
        background: linear-gradient(180deg, #2A2410 0%, #19191D 100%);
        box-shadow: 0 0 14px rgba(233, 197, 89, .35);
    }


    body .rebate-amount {
        color: #E0B74C;
    }



    /* ---- history filters ---- */
    body .history-tab {
        height: 40px;
        background-color: #19191D;
        border-radius: 4px;
        color: #858585;
    }

        body .history-tab.selected {
            background-color: #0E1A2E;
            border-color: #156AEE;
            color: #156AEE;
        }

    body .history-search-btn {
        margin-top: 16px !important;
        margin-bottom: 16px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

/* ── MYK99 mobile: Referral (97-2163 / 138-3173), VIP (131-4890), Daily Check-In
   (2690-14493) and the shared modal chrome ─────────────────────────────────
   Referral and VIP artwork is brand-specific, so the blue MYK99 versions were cut
   from the Figma frames into images/myk99/ and are swapped in through `content:`
   on mobile only; the desktop keeps the gold originals. The VIP privilege table
   stays gold by design. ──────────────────────────────────────────────────── */
@media screen {

    /* ---- modals ---- */
    /* Figma Add Bank modal (145-5445): flat #19191D sheet, 20px in from the edges,
       centred white title, no border. */
    body .modal-dialog {
        margin: 20px auto;
    }

    .modal-content {
        border-radius: 8px;
        border: 0;
        background: #19191D;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    }

    .modal-header {
        padding: 16px;
        background-color: #19191D;
        color: #ffffff !important;
    }

        .modal-header .close {
            color: #ffffff;
            opacity: .9;
            text-shadow: none;
        }

    .modal-body {
        padding: 4px 16px 16px;
        background-color: #19191D;
        color: #ffffff;
    }

    /* ---- Referral / Commission (Home/Referral) ---- */
    body .referral-tabs {
        gap: 0;
        margin: 0 12px 16px;
        padding: 4px;
        background-color: #19191D;
        border-radius: 6px;
    }

    body .referral-tab {
        height: 40px;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border-radius: 4px;
        color: #858585;
        font-weight: 400;
    }

        body .referral-tab.selected {
            background-color: #156AEE;
            color: #ffffff;
            font-weight: 700;
        }

    body .invite-share-card {
        padding: 16px 12px;
        border: 1px solid #E9C559;
        border-radius: 6px;
        background: #19191D;
        box-shadow: 0 0 14px rgba(233, 197, 89, .35);
    }

    body .invite-share-title {
        color: #ffffff;
    }

    body .invite-qr-download {
        border-color: #E9C559;
        background-color: #0A0D15;
        color: #E0B74C !important;
    }

    body .btn-copy-ref,
    body .btn.btn-copy {
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        border: 0;
        border-radius: 4px;
        color: #ffffff;
        font-weight: 700;
    }

    body .ref-field-label {
        color: #ffffff;
        font-weight: 700;
    }

    body .ref-field-value {
        background-color: #25252B;
        border-radius: 4px;
        color: #ffffff;
    }

    /* ---- Referral: How It Work / Calculator / Join Now (Home/CommissionDetails) ---- */
    /* 5x Figma export (1875x610) - it runs the full content width on desktop. */
    .page-hero img[src$="referral/hero-image-blank.webp"] {
        content: url('/images/myk99/referral-hero-5x.webp');
    }

    /* 4x Figma export (1500x488) - the 2x one blurred at desktop widths. */
    .page-hero img[src$="vip.webp"] {
        content: url('/images/myk99/vip-hero-4x.webp');
    }

    /* The MYK99 heroes carry their own title and pill, so the overlay text goes. */
    .page-hero .page-hero-text {
        display: none;
    }

    #referral_how img[src$="1_explain.webp"] {
        content: url('/images/myk99/referral-1-explain.webp');
    }

    #referral_how img[src$="2_story.webp"] {
        content: url('/images/myk99/referral-2-story.webp');
    }

    #referral_how img[src$="3_steps.webp"] {
        content: url('/images/myk99/referral-3-steps.webp');
    }

    #referral_how img {
        display: block;
        width: 100%;
    }

    #referral_how .px-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body .btn-primary.w-100 {
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        border: 0;
        border-radius: 4px;
        color: #ffffff;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* ---- VIP ---- */
    body .vipcard-title {
        color: #ffffff;
    }

    body .vipcard-arrow {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        background: #156AEE;
        color: #ffffff;
    }

    body .vip-compare-heading-main {
        color: #E0B74C;
    }

    body .vip-compare-heading-sub,
    body .vip-level-caption {
        color: #858585;
    }

    body .vip-level-badge {
        background: #19191D;
        border-radius: 4px;
    }

    body .vip-level-badge--compare {
        background: #19191D;
        border: 0;
        color: #E0B74C;
    }

    body .vip-compare-table {
        background: linear-gradient(#0E1119) padding-box, linear-gradient(180deg, #E9C559 0%, #B8962E 100%) border-box;
        border-radius: 6px;
        box-shadow: 0 0 14px rgba(233, 197, 89, .25);
    }

    body .vip-section {
        color: #E0B74C;
    }

    /* the Signature Club artwork under the table */
    img[src$="vip_2/royal_vip_club.webp"] {
        content: url('/images/myk99/vip-club.webp');
        max-width: 100% !important;
    }
}

/* ── MYK99 mobile: Profile 131-5207, Promotion 164-10107, Partnership 2608-8084,
   Contact Us 2608-8973, home 4D panel 2654-8694 ────────────────────────────
   Same rules as the earlier blocks: `body .x` to outrank the views' own <style>
   blocks, !important only where the markup pins a value inline, brand artwork
   swapped through `content:` from images/myk99/. ─────────────────────────── */
@media screen {

    /* ---- Profile ---- */
    body .wallet-card.profile-card {
        padding: 12px !important;
        border-radius: 6px !important;
        background: linear-gradient(135deg, #15303E 0%, #0C1C31 100%);
    }

    body .profile-card .wallet-balance-right {
        border-left-color: #033083;
    }

    body .profile-card .membership-avatar {
        background: linear-gradient(135deg, #0F86ED 0%, #06286C 100%);
    }


    /* the tier name is painted white inline; the design shows it gold */
    body .profile-card .profile-member-tier-name {
        color: #E0B74C !important;
    }

    body .profile-card .wallet-card-sub {
        border-bottom: 2px solid #156AEE;
    }

    body .profile-card .wallet-action.selected {
        color: #156AEE !important;
    }

    body .profile-title {
        color: #858585;
        padding-bottom: 4px;
    }

    /* value + action live in one 40px row */
    body .profile-field-row {
        gap: 8px;
        padding: 0 8px 0 0;
        border-radius: 4px;
        background-color: #25252B;
    }

        body .profile-field-row .form-control {
            background-color: transparent;
        }

    body .profile-field-btn {
        height: 26px;
        min-width: 70px;
        padding: 0 12px;
        border-radius: 4px;
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        color: #ffffff;
    }

    /* "Connected Account" box carries a gold gradient border inline */
    body .px-4 > div[style*="F4E5AE"] {
        background: #19191D !important;
        border: 0 !important;
        border-radius: 4px !important;
        padding: 12px !important;
    }

        body .px-4 > div[style*="F4E5AE"] > .d-flex {
            color: #ffffff !important;
        }

    body .referral-code-section {
        padding: 12px;
        border: 1px solid #F2D668;
        border-radius: 6px;
        background: linear-gradient(180deg, #241600 0%, #16130E 100%);
        box-shadow: inset 0 0 22px rgba(242, 214, 104, .35);
    }

        body .referral-code-section input.form-control {
            height: 40px;
            padding: 0 96px 0 14px;
            background: #19191D;
            border: 0;
        }

        /* Share stays gold on this card, as drawn */
        body .referral-code-section .referral-share-btn {
            background: linear-gradient(180deg, #E9C559 0%, #C9A93A 100%);
            color: #1A1400;
            border-radius: 4px;
            font-weight: 700;
        }



    /* ---- Promotion ---- */
    body .promo-category-tabs {
        gap: 8px;
        padding: 0 12px 16px;
        scrollbar-width: none;
    }

        body .promo-category-tabs::-webkit-scrollbar {
            display: none;
        }

    body .promo-category-tab {
        height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0 16px;
        border-radius: 4px;
        background-color: #19191D;
        color: #858585;
        font-weight: 400;
    }

        body .promo-category-tab.selected {
            background-color: #0E1A2E;
            border-color: #156AEE;
            color: #156AEE;
        }

    /* Each card sits in a bootstrap col (15px pad) inside a .row.px-1 (3.5px pad),
       i.e. 19px in from the edge; -7px lands it on the 12px gutter. */
    body .promo-event-card {
        margin: 0 -7px 16px;
        padding: 16px;
        border-radius: 6px;
        background-color: #19191D;
    }

    body .promo-event-img {
        border-radius: 4px;
    }

    body .promo-event-body {
        padding: 12px 0 0;
    }

    body .promo-event-tag {
        padding: 4px 12px;
        border: 1px solid #1B3A5C;
        border-radius: 6px;
        background-color: #0E1A2E;
        color: #4FB3F0;
    }

        body .promo-event-tag:first-child {
            border-color: #B8962E;
            background-color: #3A2C0C;
            color: #E9C559;
        }

    body .promo-event-title {
        color: #ffffff;
    }

    body .promo-event-desc {
        color: #ffffff;
    }

    body .promo-event-actions {
        gap: 8px;
    }

    /* ---- Partnership ---- */
    body .partnership-hero[src$="partnership.webp"] {
        content: url('/images/myk99/partnership-hero.webp');
        box-shadow: none;
    }

    body .partnership-title {
        color: #ffffff;
    }

    /* ---- Contact Us ---- */
    img[src$="contact us.webp"] {
        content: url('/images/myk99/contact-hero.webp');
    }

    body .contact-section-title,
    body .contact-help-box .contact-section-title,
    body .contact-why-section .contact-section-title {
        color: #156AEE;
        text-transform: uppercase;
    }

        body .contact-help-box .contact-section-title,
        body .contact-why-section .contact-section-title {
            text-transform: none;
        }


    body .contact-agent-card {
        border-radius: 6px;
        box-shadow: 0 0 14px rgba(233, 197, 89, .35);
    }

    body .contact-agent-bottom {
        border-radius: 4px;
        background: linear-gradient(#0A0D15, #0A0D15) padding-box, linear-gradient(90deg, #1B3A6B, #156AEE) border-box;
    }

    body .contact-agent-stat-value {
        color: #156AEE;
    }

    body .contact-agent-name {
        color: #E0B74C;
        text-transform: uppercase;
    }

    body .contact-social-card {
        border-radius: 6px;
    }

    body .contact-social-follow {
        color: #E0B74C;
        border-radius: 4px;
    }

    body .contact-help-box {
        border: 0;
        border-radius: 6px;
        background: #19191D;
    }

    body .contact-help-card {
        background: #0A0D15 !important;
        border: 1px solid #156AEE !important;
        border-radius: 4px;
    }

    body .contact-why-card {
        border: 1px solid #156AEE;
        border-radius: 4px;
        background: #0A0D15;
    }

    body .contact-why-title {
        color: #156AEE;
    }

    /* ---- home: 4D panel ---- */
    body .lottery-hub {
        color: #ffffff;
    }

    body .lottery-lucky-card {
        border-radius: 6px;
        background: #19191D;
    }

    body .lottery-lucky-image[src$="4d-logo-v3.webp"] {
        content: url('/images/myk99/4d-lucky.webp');
        border-radius: 4px;
    }

    /* payout table corner cell: the brand logo, not the mycs33 one */
    body .payout-brand-header img[src$="/images/myk99/logo.webp"] {
        content: url('/images/myk99/logo.webp');
    }

    /* Special tab: the MYK99 2026 Special Draw poster (Figma 4D - Special, 2654-9358) */
    body .lottery-special-image[src$="4d-special-2.webp"] {
        content: url('/images/myk99/4d-special.webp');
        border: 1px solid #0F86ED;
        border-radius: 4px;
    }

    /* How to Bet tab: the portrait MYK99 "How to Bet 4D" poster replaces the mobile image
       only. On desktop it left a 500px poster in a full-width panel, so the desktop is back
       on its original landscape image (how to bet desktop.webp, untouched markup). */
    /* Desktop keeps its original landscape artwork; only the MYCS33 wordmark in the
       "PLAY SAFELY, PLAY" footer line was swapped for the MYK99 one. */
    body #lottery_tab_how_to_bet img[src$="how to bet desktop.webp"] {
        content: url('/images/myk99/how-to-bet-desktop.webp');
    }

    body #lottery_tab_how_to_bet img[src$="how to bet mobile.webp"] {
        content: url('/images/myk99/how-to-bet.webp');
        display: block;
        max-width: 500px;
        height: auto;
        margin: 10px auto 0;
        border: 1px solid #0F86ED;
        border-radius: 4px;
    }

    body .lottery-generator-title {
        color: #E0B74C;
    }

    body .lucky-digit {
        border: 1px solid #156AEE;
        border-radius: 4px;
        background: #0E1A2E;
        color: #ffffff;
    }

        body .lucky-digit.is-placeholder {
            color: #156AEE;
        }

        body .lucky-digit.is-rolling,
        body .lucky-digit.is-settled {
            border-color: #4FB3F0;
            background: #0E1A2E;
            color: #ffffff;
        }

    body .lucky-number-digits::after {
        background: linear-gradient(110deg, transparent 30%, rgba(79, 179, 240, .6) 50%, transparent 70%);
        background-size: 210% 100%;
    }

    body .lucky-number-button {
        height: 40px;
        border: 0;
        border-radius: 4px;
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        color: #ffffff;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    body .lucky-number-help {
        color: #858585;
    }

    body .lottery-tabs {
        padding: 4px;
        border-radius: 6px;
        background: #19191D;
    }

    body .lottery-tab {
        height: 32px;
        border-radius: 4px;
        color: #858585;
    }

        body .lottery-tab.is-active {
            background: #156AEE !important;
            color: #ffffff;
            font-weight: 700;
        }

    body .lottery-provider {
        border: 1px solid transparent;
        border-radius: 4px;
        background: #19191D;
    }

        body .lottery-provider.is-active {
            border-color: #156AEE;
            background: #0E1A2E;
        }

    body .lottery-payout-card,
    body .lottery-result-card {
        border: 0;
        border-radius: 6px;
        background: #19191D;
    }

    body .lottery-result-title {
        color: #ffffff;
    }

    body .lottery-result-date {
        color: #858585;
    }

    /* The design draws one blue box around prizes + Special + Consolation, but the
       card has no wrapper for them (the JS renders siblings), so the box is built
       from border segments: top on the prize row, sides on every block, bottom on
       the last number grid. The section bars inset via a content-box background. */
    body .lottery-result-card {
        box-shadow: none;
        padding: 12px;
    }

    body .lottery-result-prizes {
        gap: 0;
        margin: 4px 0 0;
        padding: 10px 6px 6px;
        border: 1px solid #156AEE;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
        background: #0A0D15;
    }

    body .lottery-result-section-label {
        margin: 0;
        padding: 8px 12px;
        border-left: 1px solid #156AEE;
        border-right: 1px solid #156AEE;
        border-radius: 0;
        background: linear-gradient(#06286C, #06286C) content-box, #0A0D15 padding-box;
        color: #ffffff;
        line-height: 24px;
    }

    body .lottery-result-numbers {
        gap: 4px;
        padding: 8px 12px;
        border-left: 1px solid #156AEE;
        border-right: 1px solid #156AEE;
        background: #0A0D15;
    }

        body .lottery-result-numbers:last-child {
            padding-bottom: 12px;
            border-bottom: 1px solid #156AEE;
            border-radius: 0 0 4px 4px;
        }

    body .lottery-result-prize-box {
        border: 0;
        background: transparent;
    }

    body .lottery-result-prize-label {
        color: #ffffff;
        font-weight: 700;
    }

    body .lottery-result-prize-value {
        color: #E0B74C;
    }

    body .lottery-payout-table th {
        background: #06286C;
        color: #ffffff;
        font-weight: 700;
    }

    body .lottery-result-numbers div,
    body .lottery-payout-table td:not(:first-child) {
        border: 0;
        background: transparent;
        color: #ffffff;
        font-weight: 700;
    }

    body .lottery-payout-table th:first-child,
    body .lottery-payout-table th.payout-brand-header {
        border: 1px solid #156AEE;
        background: #0A0D15;
        color: #ffffff;
    }

    body .lottery-payout-table .payout-option-dark {
        background: #0E1A2E;
    }
}

/* ── MYK99 mobile: small follow-ups to the Profile screen ── */
@media screen {
    /* five tabs in the profile card need a slightly smaller label to sit on one line */

    /* the "contact Support" note paints its link gold inline */
    body div[style*="a0a0a0"] > a[style] {
        color: #156AEE !important;
    }
}

/* ── MYK99 mobile: page background — found on the live site ─────────────────
   The visible page colour is painted by the layout wrappers (.main-bg with
   !important, .body-container, .footer-container), not by <body>; the harness
   pages had no wrappers so these were missed. ───────────────────────────── */
@media screen {
    .main-bg,
    .body-container,
    .main-bottom-container,
    .desktop-right {
        background-color: #0A0D15 !important;
    }

    body .footer-container {
        background-color: #0A0D15;
    }
}

/* ── MYK99 mobile: leftover brand marks found on the live site ───────────────
   The side-menu token icon and the floating check-in bubble were still the
   gold mycs33 art; both come from the Figma frames as WebP (the bubble as the
   "calendar" group export, disc and red dot included). ─────────────────── */
@media screen {
    .sidenav .membership-card .membership-token-icon[src$="my-token.webp"] {
        content: url('/images/myk99/badge.webp');
        border-radius: 50%;
    }

    /* Figma "calendar" group, exported at 4x with its own disc and red dot; the "no
       notification" state gets the same calendar without the dot. Kept at the layout's
       50px .bubble2 box, the size mycs33 shows its calendar at. */
    body .bubble2[src$="/images/calender2.webp"] {
        content: url('/images/myk99/checkin-bubble.webp');
        width: 50px;
        height: 50px;
    }

    body .bubble2[src$="/images/calendar-calender.png"] {
        content: url('/images/myk99/checkin-bubble-plain.webp');
        width: 50px;
        height: 50px;
    }

    /* Spin & Win floating wheel: TerusKaya777's blue wheel (bluespin1.gif, re-encoded
       as animated WebP) in place of the gold one. */
    body .spin-bubble[src$="lucky spin/spin.gif"] {
        content: url('/images/myk99/spin-bubble.webp');
    }
}

/* ── MYK99 mobile: deposit page token notes ─────────────────────────────────
   "MYR 100 = 10 MY TOKEN $ Earned" and the "+0 MY TOKEN $ Earned" badge are
   coloured inline in the view (gold #f4e5ae, green #2c9634); on mobile both
   follow the blue theme. ─────────────────────────────────────────────────── */
@media screen {
    body #deposit_form span[style*="f4e5ae"],
    body #deposit_form span[style*="F4E5AE"] {
        color: #156AEE !important;
    }

    body #token_earned {
        color: #4FB3F0 !important;
        background-color: #0E1A2E !important;
        border-color: #156AEE !important;
        border-radius: 4px !important;
    }
}

/* ── MYK99 mobile: wallet action icons ──────────────────────────────────────
   Deposit / Withdraw / Rebate / Profile exported from the Figma wallet card at
   4x (white glyph, blue accent, transparent); Referral is the "referral" glyph
   from the Figma Icons page. ────────────────────────────────────────────── */
@media screen {
    .wallet-actions img[src$="iconv3/deposit.webp"]  { content: url('/images/myk99/wallet-deposit.webp'); }
    .wallet-actions img[src$="iconv3/withdraw.webp"] { content: url('/images/myk99/wallet-withdraw.webp'); }
    .wallet-actions img[src$="iconv3/rebate.webp"]   { content: url('/images/myk99/wallet-rebate.webp'); }
    .wallet-actions img[src$="iconv3/profile.webp"]  { content: url('/images/myk99/wallet-profile.webp'); }
    .wallet-actions img[src$="iconv3/referral.webp"] { content: url('/images/myk99/wallet-referral.webp'); }
}

/* ── MYK99 mobile: icon set from the Figma frames ────────────────────────────
   Bottom nav, top bar, category column and profile tabs. Cut from the 2x frame
   exports (password/bank exported at 4x), dark backgrounds keyed to alpha, all
   WebP under images/myk99/icon-*.webp. The category column shows the white
   static icon in every state; the selected one is tinted blue with a filter
   instead of switching to the gold gif. ───────────────────────────────────── */
@media screen {
    /* bottom nav */
    .bottom-nav-icon[src$="iconv3/home.webp"]    { content: url('/images/myk99/icon-nav-home.webp'); }
    .bottom-nav-icon[src$="iconv3/funds.webp"]   { content: url('/images/myk99/icon-nav-funds.webp'); }
    .bottom-nav-icon[src$="iconv3/history.webp"] { content: url('/images/myk99/icon-nav-history.webp'); }
    .bottom-nav-icon[src$="iconv3/support.webp"] { content: url('/images/myk99/icon-nav-support.webp'); }

    /* These four are cut on a 64px canvas with 8px of clear space round each glyph, where
       the iconv3 set mycs33 shows fills a 48px canvas edge to edge. At the shared 28px height
       that drew every MYK99 glyph a quarter smaller; scaling by 64/48 makes them the same
       size again, and a transform leaves the labels exactly where they were. */
    .bottom-nav-icon[src$="iconv3/home.webp"],
    .bottom-nav-icon[src$="iconv3/funds.webp"],
    .bottom-nav-icon[src$="iconv3/history.webp"],
    .bottom-nav-icon[src$="iconv3/support.webp"] {
        transform: scale(1.3333);
    }

    /* top bar */
    .home-topbar .topbar-burger[src$="burger-menu.webp"] { content: url('/images/myk99/icon-top-burger.webp'); height: 34px; }
    .home-topbar .topbar-burger-btn { border: 0; }
    .home-topbar .topbar-support[src$="iconv3/support.webp"]      { content: url('/images/myk99/icon-top-support.webp'); }
    .home-topbar .topbar-support[src$="iconv3/notification.webp"] { content: url('/images/myk99/icon-top-bell.webp'); }

    /* category column */
    .game-tab-icon-static[src$="slot (1).webp"]      { content: url('/images/myk99/icon-cat-slots.webp'); }
    .game-tab-icon-static[src$="live (1).webp"]      { content: url('/images/myk99/icon-cat-live.webp'); }
    .game-tab-icon-static[src$="fishing (1).webp"]   { content: url('/images/myk99/icon-cat-fishing.webp'); }
    .game-tab-icon-static[src$="sport.webp"]         { content: url('/images/myk99/icon-cat-sports.webp'); }
    .game-tab-icon-static[src$="fast-game (1).webp"] { content: url('/images/myk99/icon-cat-fastgame.webp'); }
    /* Figma only has the blue "free" icon; this is a white copy of it for the idle state */
    .game-tab-icon-static[src$="free.gif"]           { content: url('/images/myk99/icon-cat-free.webp'); }
    /* the only 4D cut available is the selected (blue) one; brightness(0) invert(1)
       makes it white for the idle state */
    .game-tab-icon-static[src$="4d (7).webp"]        { content: url('/images/myk99/icon-cat-4d.webp'); filter: brightness(0) invert(1); }

    /* selected: the animated blue icon (images/icon/*.webp) replaces the static one */
    .game-tabs .mobile-game-selection.selected .game-tab-icon-static { display: none; }
    .game-tabs .mobile-game-selection.selected .game-tab-icon-active { display: block; }

    /* profile card tabs */
    .wallet-actions img[src$="iconv3/password.webp"]   { content: url('/images/myk99/icon-tab-password.webp'); }
    .wallet-actions img[src$="iconv3/message.webp"]    { content: url('/images/myk99/icon-tab-message.webp'); }
    .wallet-actions img[src$="iconv3/bank.webp"]       { content: url('/images/myk99/icon-tab-bank.webp'); }
    .wallet-actions img[src$="iconv3/promo-code.webp"] { content: url('/images/myk99/icon-tab-promo.webp'); }
}

/* ── MYK99 mobile: VIP member cards ─────────────────────────────────────────
   The six tier cards used by the VIP carousel, taken from the Figma fills. */
@media screen {
    .vipcard-item img[src*="membership-tier-normal."]   { content: url('/images/myk99/vip-card-normal.webp'); }
    .vipcard-item img[src*="membership-tier-bronze."]   { content: url('/images/myk99/vip-card-bronze.webp'); }
    .vipcard-item img[src*="membership-tier-silver."]   { content: url('/images/myk99/vip-card-silver.webp'); }
    .vipcard-item img[src*="membership-tier-gold."]     { content: url('/images/myk99/vip-card-gold.webp'); }
    .vipcard-item img[src*="membership-tier-platinum."] { content: url('/images/myk99/vip-card-platinum.webp'); }
    .vipcard-item img[src*="membership-tier-diamond."]  { content: url('/images/myk99/vip-card-diamond.webp'); }
}

/* ── MYK99 mobile: Referral Calculator 123-3380 / Join Now 130-3823, Messaging
   139-4115, Bank Details 145-5445 / 148-5769, Promo Code 150-6610 / 156-7256,
   Promotion "My Bonus" 165-10500 ─────────────────────────────────────────────
   Same conventions as the earlier blocks: `body .x` outranks the views' own
   <style> blocks, !important only where the markup pins a value inline, brand
   artwork swapped in from images/myk99/ through `content:`. Colours and sizes
   are sampled from the 2x frame exports. ───────────────────────────────────── */
@media screen {

    /* ---- Referral: How It Work / Calculator / Join Now strip ----
       One #19191D track with the active tab filled, 12px in from the edges. */
    .page-hero + .auth-tabs {
        gap: 0;
        margin: 16px 12px;
        padding: 4px;
        background-color: #19191D;
        border-radius: 6px;
    }

    /* ---- Calculator ---- */
    body .calc-card,
    body .incentive-card {
        margin-top: 0;
        padding: 16px 12px;
        border: 1px solid #234479;
        border-radius: 6px;
        background: linear-gradient(180deg, #020F1E 0%, #111212 100%);
    }

    body .incentive-card {
        margin-top: 16px;
    }

    body .calc-title {
        color: #156AEE;
    }

    body .calc-subtitle {
        margin: 8px 0 24px;
        color: #ffffff;
    }

    body .calc-row {
        gap: 12px;
        margin-bottom: 16px;
    }

    body .calc-row-label {
        color: #ffffff;
    }

    body .calc-highlight {
        color: #156AEE;
    }

    /* gold-framed value boxes with the glow on the inside */
    body .calc-input.form-control {
        width: 128px;
        height: 36px;
        padding: 0 12px;
        color: #ffffff;
        border: 1px solid #B8962E;
        border-radius: 4px;
        background: #16130E;
        box-shadow: inset 0 0 12px rgba(233, 197, 89, .4);
    }

    body .calc-btn,
    body .calc-btn:hover,
    body .calc-btn:focus {
        height: 40px;
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        background: linear-gradient(90deg, #0F86ED 0%, #06286C 100%);
        color: #ffffff;
        border-radius: 4px;
    }

    body .calc-result {
        margin-top: 16px;
    }

    body .incentive-title {
        margin-bottom: 12px;
        color: #ffffff;
    }

    /* donut: 1st gen bright blue, 2nd gen deep blue, white hole, white labels */
    body #chart_seg1 {
        stroke: #0853D7;
    }

    body #chart_seg2 {
        stroke: #033083;
    }

    body .chart-pct {
        color: #ffffff;
    }

    /* the hole meets the ring instead of leaving a dark gap between them */
    body .chart-hole {
        r: 64px;
    }

    body .incentive-legend {
        gap: 20px;
    }

    body .incentive-legend-item {
        gap: 8px;
        color: #ffffff;
    }

        body .incentive-legend-item img,
        body .incentive-footer-label img {
            content: url('/images/myk99/icon-people.webp');
        }

        body .incentive-legend-item img {
            width: 32px;
            height: 32px;
        }

    body .incentive-footer {
        margin-top: 16px;
        padding: 12px;
        border: 1px solid #E4BD51;
        border-radius: 6px;
        background: #14120F;
        box-shadow: inset 0 0 22px rgba(228, 189, 81, .4);
    }

    body .incentive-footer-label {
        gap: 8px;
        margin-bottom: 8px;
        color: #ffffff;
    }

        body .incentive-footer-label img {
            width: 24px;
            height: 24px;
        }

    body .incentive-footer-amount {
        color: #ffffff;
    }

    body .incentive-footer-divider {
        margin: 0 8px;
        background: rgba(255, 255, 255, .6);
    }

    /* ---- Join Now ---- */
    body .refer-earn {
        padding: 16px 0 0;
        background: transparent;
    }

        body .refer-earn h2 {
            margin-bottom: 12px;
            color: #156AEE;
        }

        body .refer-earn .subtitle {
            margin-bottom: 20px;
            color: #ffffff;
        }

        body .refer-earn .card {
            gap: 12px;
            margin-bottom: 10px;
            padding: 12px 14px;
            border: 1px solid #234479;
            border-radius: 6px;
            background: linear-gradient(180deg, #020F1E 0%, #111212 100%);
        }

            body .refer-earn .card img {
                width: 40px;
                height: 40px;
            }

            body .refer-earn .card img[src$="/images/income.webp"] {
                content: url('/images/myk99/icon-income.webp');
            }

            body .refer-earn .card img[src$="/images/trusted.webp"] {
                content: url('/images/myk99/icon-trusted.webp');
            }

            body .refer-earn .card img[src$="/images/asia.webp"] {
                content: url('/images/myk99/icon-asia.webp');
            }

            body .refer-earn .card h3 {
                margin-bottom: 4px;
                color: #156AEE;
            }

            body .refer-earn .card p {
                color: #ffffff;
            }

    #referral_join > .px-4 + .px-4 {
        margin-top: 18px;
    }

    body .referral-code-section input.form-control {
        color: #ACACAC !important;
    }

    /* ---- Messaging ---- */
    body .msg-tabs {
        gap: 0;
        padding: 4px;
        background-color: #19191D;
        border-radius: 6px;
    }

    body .msg-tab {
        height: 40px;
        padding: 0 4px;
        background-color: transparent;
        border-radius: 4px;
        color: #858585;
        font-weight: 400;
    }

        body .msg-tab.selected {
            background-color: #156AEE;
            color: #ffffff;
            font-weight: 700;
        }

    body .msg-tab-count,
    body .msg-tab.selected .msg-tab-count {
        color: #ED1919;
    }

    body .msg-list-head {
        padding: 10px 12px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background-color: #25252B;
    }

    body .msg-mark-read,
    body .msg-mark-read:hover {
        color: #156AEE !important;
    }

    body .msg-list-container {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: #19191D;
    }

    body .msg-row {
        padding: 16px 40px 16px 12px;
    }

    body .msg-row-divider {
        margin: 0 8px;
        border-top-color: #454545;
    }

    body .msg-unread-dot {
        right: 12px;
    }

    body .msg-item {
        padding: 16px 12px;
        border-radius: 6px;
        background-color: #19191D;
    }

    body .msg-item-title {
        color: #156AEE;
    }

    /* ---- Bank Details ---- */
    /* saved bank / crypto tiles: 3 across, 8px apart, the active one outlined blue */
    body .grid-cols-3 {
        gap: 8px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body .crypto-btn {
        min-height: 48px;
        justify-content: center;
        gap: 8px;
        padding: 8px 4px;
        border: 1px solid transparent;
        border-radius: 4px;
        background: #19191D;
        color: #858585;
        font-weight: 400;
    }

        body .crypto-btn.active {
            border-color: #156AEE;
            background: #25252B;
            color: #156AEE;
        }

    /* the saved values are painted gold inline; the design shows them white */
    body .bank-account .form-control,
    body .crypto .form-control {
        color: #ffffff !important;
    }

    body .bank-account .blue-container-label,
    body .crypto .blue-container-label {
        padding-top: 16px;
        margin-bottom: 8px;
    }

    body .bank-account .d-flex.mt-3,
    body .crypto .d-flex.mt-3 {
        gap: 8px !important;
        margin-top: 24px !important;
    }

    body .btn-app.btn-danger,
    body .btn-app.btn-danger:hover,
    body .btn-app.btn-danger:focus {
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        background: #0A0D15;
        border: 1px solid #858585;
        border-radius: 4px;
        color: #ED1919;
        text-decoration: none;
    }

    #promotion_page .btn-app.btn-gradient,
    #event_page .btn-app.btn-gradient,
    body .modal-body .btn-app.btn-gradient {
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    /* ---- Add Bank / Add Crypto modals ---- */
    body .modal-header .modal-title {
        flex: 1;
        padding-left: 24px;
        text-align: center;
    }

    body .modal-body .input-label {
        margin: 18px 0 8px;
        color: #ffffff;
        font-weight: 700 !important;
    }

        /* every field in these two forms is required */
        #add_bank_account_modal .modal-body .input-label::after,
        #usdt_modal .modal-body .input-label::after {
            content: '*';
            color: #ED1919;
        }

    body .modal-body .form-control {
        border: 0;
    }

    body .modal-body select.form-control {
        border: 1px solid #858585;
    }

    body .modal-body .input-label ~ div {
        margin-bottom: 0;
    }

    body .modal-body .mt-3 {
        margin-top: 24px !important;
    }

        body .modal-body .mt-3 + div {
            margin-top: 12px;
        }

    /* ---- Promo Code ---- */
    body .promo-subtitle {
        margin-bottom: 16px;
        color: #ffffff;
    }

    body .promo-card {
        margin-bottom: 12px;
        border: 1px solid #F2D668;
        border-radius: 6px;
        background: linear-gradient(180deg, #241600 0%, #16130E 100%);
        box-shadow: inset 0 0 22px rgba(242, 214, 104, .35);
    }

    body .promo-card-head {
        align-items: flex-start;
        padding: 12px;
    }

    body .promo-card-title {
        margin-top: 4px;
        color: #E0B74C;
    }

    body .promo-countdown {
        color: #ffffff;
    }

    body .promo-card-icons {
        gap: 10px;
        margin-top: 20px;
    }

    body .promo-card-arrow {
        margin-top: 2px;
        width: 22px;
        height: 22px;
        border-radius: 4px;
        background-color: #156AEE;
    }

        body .promo-card-arrow img {
            width: 12px;
            filter: none;
        }

    body .promo-card-body {
        padding: 0 12px 12px;
    }

    body .promo-divider {
        margin-bottom: 16px;
        border-top-color: #454545;
    }

    body .promo-req {
        margin-bottom: 8px;
    }

    body .promo-req-label,
    body .promo-req-value {
        color: #ffffff;
    }

    body .promo-req-value {
        font-weight: 400;
    }

    body .promo-card-body .btn-app.btn-gradient {
        height: 40px;
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
    }

    /* the segmented strip already sits inside the 12px gutter on the Account pages */
    body .px-4 .promo-tabs {
        margin-left: 0;
        margin-right: 0;
    }

    /* ---- Promotion: My Bonus ---- */
    .pb-3 > .promo-tabs:first-child {
        margin-top: 12px;
    }

    /* row.px-1 (4px) + col (15px) put everything 19px in; 8px on the col lands the
       title bar on the 12px gutter, and the inner row pulls the cards back onto it
       with 8px between them. */
    #promotion_page > .col-12 {
        padding: 6px 8px 0 !important;
        margin-bottom: 30px !important;
    }

    #promotion_page .row.desktop-50 {
        margin-left: -4px !important;
        margin-right: -4px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        #promotion_page .row.desktop-50 > .col-4 {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }

    /* blue gradient title bar, 40px, with the slot-machine art riding its right end */
    body .promo-title-bar {
        min-height: 40px;
        margin-bottom: 12px !important;
        padding: 0 90px 0 12px;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 4px;
        background: linear-gradient(90deg, #0F86ED 0%, #07286C 100%);
    }

    body .promo-title-text {
        width: auto;
        color: #ffffff;
        text-transform: none;
    }

    body .promo-title-wheel[src$="/images/title-wheel-bg.webp"] {
        content: url('/images/myk99/promo-title-slot.webp');
        width: 77px;
        height: 46px;
        right: 0;
        bottom: 0;
    }

    /* mission cards: the MYK99 blue gift art replaces the gold one, the amount
       overlay stays gold (the .primary-text primitive would paint it blue) */
    #promotion_page img[src$="/images/mission.webp"] {
        content: url('/images/myk99/mission-card.webp');
    }

    body .promotion-amount {
        color: #E0B74C !important;
    }
}

/* ── MYK99 desktop adjustments ──────────────────────────────────────────────
   From 992px the sidebar is pinned open (see the original block above at
   "min-width: 992px"). The theme keeps the Figma 300px drawer, so the content
   and bottom bar start at 300px instead of 350px, and the few things that only
   have room on a phone-width column get a wider basis here. ──────────────── */
@media only screen and (min-width: 992px) {
    .body-container {
        padding-left: 300px;
    }

    .main-bottom-container > .navigation-bar {
        left: 300px !important;
    }
}

/* Tablet and up: the login / register forms were 80% wide before the theme;
   keep them from stretching across the whole column. */
@media only screen and (min-width: 768px) {
    .auth-page .auth-tabs,
    .auth-page .form-signin,
    .auth-page .auth-card {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── MYK99: home video, testimonials and footer — colours only ──────────────
   Figma home frame, bottom part: blue section titles (#156AEE), #19191D cards
   and separators, white body text, gold stars, blue video rim. Sizes are the
   originals. `body .x` beats the layout's own <style> block, and the brand
   heading in the footer pins its gold colour inline. ───────────────────────── */
@media screen {
    body .youtube-embed-wrapper {
        border-color: #0E85EC;
    }

    body .testimonial-card {
        position: relative;
        background-color: #19191D;
    }

        /* the short gold rule on the card's top-left corner */
        body .testimonial-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 16px;
            width: 33px;
            height: 2px;
            background: #B59958;
        }

    body .testimonial-card-title {
        color: #156AEE;
    }

    body .testimonial-card-text {
        color: #ffffff;
    }

    body .testimonial-stars {
        color: #D3A137;
    }

    body .footer-section-title {
        color: #156AEE;
    }

    body .footer-section {
        border-bottom-color: #19191D;
    }

    body .footer-container .py-4.text-center > div[style*="176, 154, 81"] {
        color: #156AEE !important;
    }
}

/* NEXTSPIN ships a black wordmark on a transparent ground, which disappears on every
   dark tile this theme has (RTP provider strip, game pickers). Same logo with the black
   turned white; the orange X is untouched. Matched by the CDN file id so it follows the
   logo wherever Games.Logo is rendered. */
@media screen {
    img[src*="5a1f2196-18af-47ba-9ef2-f05c49459faf"] {
        content: url('/images/myk99/nextspin-logo.webp');
    }
}