.cp {
    cursor: pointer;
}

table.tdFirstCenter tbody tr td:first-child {
    text-align: center;
}

tr.clickable {
    cursor: pointer;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* non-prefixed version, currently */
}

tr.selectedRow {
    background-color: #f7f9fb;
    font-style: italic;
    font-weight: bold;
}


/* login custom style */

.body-auth {
    overflow: hidden;
}

.mt-form-login {
    margin-top: 20%;
}

.link {
    display: inline-block;
    position: relative;
}

.link:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #1031a6;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.button-login {
    font-size: medium;
    font-weight: 400;
    border: none;
    border-radius: 8px;
    color: white;
    background-color: #002060;
    display: flex;
    height: 48px;
    padding: 15px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.button-login:hover {
    background-color: #1031a6;
}

.bg-auth-style {
    background-color: rgba(255, 247, 222, 1);
}

.bg-left-side {
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
}

/* end login custom style */

/* bayu */
.object-fit-cover {
    object-fit: cover;
}

.not-rounded-end {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.not-rounded-start {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* bayu */

/*slot machine - saiqul*/

:root {
    --main-bg: #e8bc6b;
    --transparant: rgba(255, 255, 255, 0);
    --dim-light: rgba(255, 255, 255, 0.6);
    --white-light: rgba(255, 255, 255, 1);

    --current-light: var(--white-light);
}

.custom-component {
    position: absolute;
    z-index: 99;
    display: flex;
    transform-origin: top left;
}

.custom-component .lever .lever-head {
    bottom: 87%;
    height: 18%;
    left: 103.5%;
    position: absolute;
    transition: all 0.6s ease;
    z-index: 3;
    transform: translateX(40%);
}

.custom-component .lever .lever-neck {
    bottom: 30.5%;
    height: 62%;
    left: 100.6%;
    position: absolute;
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    transition: all 0.5s ease;
    z-index: 1;
}

.custom-component .lever .lever-body {
    bottom: 13%;
    height: 20%;
    left: 100%;
    position: absolute;
}

.custom-component .lever.on .lever-head {
    -webkit-transform: translate(20%, 210%) scale(1.6);
    transform: translate(20%, 210%) scale(1.6);
    transition: all 0.3s ease;
}

.custom-component .lever.on .lever-neck {
    bottom: 29%;
    -webkit-transform: rotate(10deg) scale3d(1.2, 0.5, 1);
    transform: rotate(10deg) scale3d(1.2, 0.5, 1);
    transition: all 0.35s ease;
    z-index: 1;
}

.slots {
    position: relative;
    width: 1050.5px;
    height: 100%;
    background: var(--main-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    overflow: hidden;
}

.dots-horizon {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--current-light) 24.8%,
            transparent 24.8%),
        radial-gradient(var(--current-light) 24.8%, transparent 24.8%);
    background-position: 5px 0px, 5px 100%;
    background-size: 22px 22px;
    background-repeat: repeat-x;
    animation: light-interval 1s infinite;
}

.dots-ver {
    position: absolute;
    width: 100%;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    background-image: radial-gradient(var(--current-light) 24.8%,
            transparent 24.8%),
        radial-gradient(var(--current-light) 24.8%, transparent 24.8%);
    background-position: 2px 5px, 100% 5px;
    background-size: 22px 22px;
    background-repeat: repeat-y;
    animation: light-interval 1s infinite;
}

.slot-container {
    padding: 22.12px;
    display: flex;
    justify-content: space-between;
}

@keyframes win1 {
    0% {
        --main-bg: yellow;
        background: linear-gradient(45deg, orange 0%, yellow 100%);
        box-shadow: 0 0 80px orange;
    }

    100% {
        --main-bg: lightgrey;
        background: linear-gradient(45deg, grey 0%, lightgrey 100%);
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
    }
}

@keyframes win2 {
    0% {
        background: linear-gradient(45deg, lightblue 0%, lightgreen 100%);
        box-shadow: 0 0 80px lightgreen;
    }

    100% {
        background: linear-gradient(45deg, grey 0%, lightgrey 100%);
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
    }
}

@keyframes light-interval {
    0% {
        --current-light: var(--white-light);
    }

    50% {
        --current-light: var(--dim-light);
    }

    100% {
        --current-light: var(--white-light);
    }
}

.slots.win1 {
    animation: win1 200ms steps(2, end) infinite;
}

.slots.win2 {
    animation: win2 200ms steps(2, end) infinite;
}

.slots .reel {
    position: relative;
    width: 85px;
    height: 150px;
    /* border: 1px solid rgba(0, 0, 0, 0.3); */
    border-radius: 3px;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.4) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.4) 100%),
        url(../img/angka_slot.png);
    background-position: 0 0;
    background-repeat: repeat-y;
    box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3);
}

/*slot machine*/

.aside .aside-menu .menu>.menu-item.here>.menu-link .menu-icon,
.aside .aside-menu .menu>.menu-item>.menu-link.active .menu-icon {
    background: var(--fks-3-dary, #4A4A4A);
    box-shadow: 0px 12px 22px 0px rgba(194, 129, 31, 0.12),
        0px 4px 16px 0px rgba(194, 129, 31, 0.04);
}

.aside .aside-menu .menu>.menu-item.here>.menu-link .menu-icon,
.aside .aside-menu .menu>.menu-item>.menu-link.active .menu-icon>i {
    color: #F7D00E !important;
}

.menu-state-bg .menu-item .menu-link.active {
    color: #F7D00E !important;

}

.menu-state-primary .menu-item .menu-link.active {
    color: #F7D00E !important;
}

.menu-state-primary .menu-item .menu-link.active .menu-title {
    color: #F7D00E !important;
}

.menu-state-bullet-primary .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: #F7D00E !important;
}

.winner-title-component {}

.counter-list-item .counter-list-winner-2 {
    border-radius: 8px 0px 0px 8px;
    font-size: 24px !important;
    /* padding-right: 3.75rem !important;
    padding-left: 3.75rem !important; */
    flex: 1 0 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.counter-list-item.list-10-item .counter-list-winner-2 {
    font-size: 2vw !important;
    flex: 1 0 20%;
}

.counter-list-item.list-5-item .counter-list-winner-2 {
    font-size: 2vw !important;
    flex: 1 0 20%;
}

.counter-list-item .subtitle-list-winner {
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
}

.counter-list-item.list-10-item .subtitle-list-winner {
    font-size: 1vw !important;
}

.counter-list-item.list-5-item .subtitle-list-winner {
    font-size: 1.2vw !important;
}

.counter-list-winner,
.counter-list-winner-2 {
    border-radius: 8px 0px 0px 8px;
    /* background: linear-gradient(
        157deg,
        #ebb858 0%,
        #fad790 51.67%,
        #daa74f 97.36%
    ); */
    flex: 1 0 80%;
    background: linear-gradient(180deg, #ebb858 0%, #fad790 44%, #daa74f 100%);
    color: #4a4a4a;
    text-align: center;
    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.87);
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.title-list-winner {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.container-title-list-winner,
.container-title-list-winner-2 {
    border-radius: 0px 8px 8px 0px;
    background: linear-gradient(147deg, #fff 46.41%, #dcd9d9 102.16%);
    width: 182px;
    padding: 16px;
}

.container-title-list-winner-2 {
    border-radius: 8px;
    width: 100%;
}

.count-paging-list-winner {
    color: #fff;
    border-radius: 100px;
    background: #e8792c;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    padding: 0.4rem 1.2rem;
}

.text-limit-1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
}

.grand-price-text-prize {
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* letter-spacing: 8px; */
    color: #8b6844;
    padding-right: 5rem !important;
    padding-left: 5rem !important;
}

.grand-prize-number {
    background: var(--FKS-linear-2,
            linear-gradient(136deg, #daa916 2.95%, #ffd147 104.89%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2.4px;
}

/* .grand-prize-text-wrapper p.show {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}
.grand-prize-text-wrapper p {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    transition: opacity 1s ease, transform 1s ease;
} */

.grand-prize-text {
    color: #595959;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.grand-prize-name {
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* letter-spacing: 8px; */
    color: #8b6844;
    /* padding-right: 15rem !important;
    padding-left: 15rem !important; */
}

.jconfirm .jconfirm-box.jconfirm-type-blue {
    border-top: solid 7px #1031a6;
    -webkit-animation-name: none !important;
    animation-name: none !important;
}