/* rajdhani-regular - latin */

@font-face {
    font-family: 'Rajdhani';
    src: url('Rajdhani/Rajdhani-Regular.eot');
    src: url('Rajdhani/Rajdhani-Regular.eot?#iefix') format('embedded-opentype'), url('Rajdhani/Rajdhani-Regular.woff') format('woff'), url('Rajdhani/Rajdhani-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani-Light';
    src: url('Rajdhani/Rajdhani-Light.eot');
    src: url('Rajdhani/Rajdhani-Light.eot?#iefix') format('embedded-opentype'), url('Rajdhani/Rajdhani-Light.woff') format('woff'), url('Rajdhani/Rajdhani-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani-Bold';
    src: url('Rajdhani/Rajdhani-Bold.eot');
    src: url('Rajdhani/Rajdhani-Bold.eot?#iefix') format('embedded-opentype'), url('Rajdhani/Rajdhani-Bold.woff') format('woff'), url('Rajdhani/Rajdhani-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani-Medium';
    src: url('Rajdhani/Rajdhani-Medium.eot');
    src: url('Rajdhani/Rajdhani-Medium.eot?#iefix') format('embedded-opentype'), url('Rajdhani/Rajdhani-Medium.woff') format('woff'), url('Rajdhani/Rajdhani-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani-SemiBold';
    src: url('Rajdhani/Rajdhani-SemiBold.eot');
    src: url('Rajdhani/Rajdhani-SemiBold.eot?#iefix') format('embedded-opentype'), url('Rajdhani/Rajdhani-SemiBold.woff') format('woff'), url('Rajdhani/Rajdhani-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Rajdhani', sans-serif !important;
    background: url(img/bgimg.png) repeat !important;
}

.boldText {
    font-family: 'Rajdhani-Bold';
}

.btnYellow {
    text-align: right;
}

    .btnYellow a {
        background-image: url(/Client/img/cikis-btn-bg.svg);
        background-repeat: no-repeat;
        color: #1d0839;
        width: 76px;
        height: 38px;
        display: inline-block;
        line-height: 38px;
        text-align: center;
        text-decoration: none;
        background-size: 100%;
        font-family: 'Rajdhani-Bold';
        font-size: 13px;
    }

        .btnYellow a:hover {
            color: #f5f5f5;
            text-decoration: none;
        }

.sayacTickBox {
    background-color: #320f60;
    width: 114px;
    height: 114px;
    border-radius: 114px;
    z-index: 0;
    padding: 5px;
    border: 5px solid #fff;
}

.sayacTick {
    background-image: url(../Client/img/time-tiks.svg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1;
    position: relative;
}

.loader {
    position: absolute;
    user-select: none;
    box-sizing: border-box;
    width: 108px !important;
    height: 108px !important;
    top: -7px;
    left: -7px;
}

.loader-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-spinner {
    width: 200%;
    height: 200%;
    border-radius: 50%;
    border: 10px solid #fecc04;
    box-sizing: border-box;
}

.zamanUyari {
    border: 21px solid #e00801 !important;
}

.text {
    font-weight: bold;
    font-size: 40px;
    color: rgb(29, 8, 57);
    background-color: #fff;
    width: 72px;
    line-height: 72px;
    border-radius: 72px;
    z-index: 1;
}

.header-logo {
    width: 204px;
    height: auto;
}

.formBackBox {
    background-image: url(../Client/img/login-bg.svg);
    background-repeat: no-repeat;
    max-width: 407px;
    margin: auto;
    margin-top: 56px;
    text-align: center;
    padding: 40px;
    position: relative;
    background-size: cover;
}

.formHeadText {
    display: block;
    font-size: 31px;
    margin-bottom: 26px;
    margin-top: 10px;
    color: #222;
}

.formDescText {
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #444;
}

.formTextLink {
    color: #333;
    font-size: 18px;
    font-family: 'Rajdhani-Bold';
}

a.formTextLink:hover {
    color: #333;
    text-decoration: underline !important;
}

.formBottomLink {
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 80px;
}

    .formBottomLink span {
        font-size: 17px;
        font-weight: bold;
        color: #333;
        display: inline-block;
    }

input {
    width: 100% !important;
    padding-left: 18px !important;
    padding-top: 26px !important;
    padding-right: 18px !important;
    padding-bottom: 26px !important;
    border-radius: 14px !important;
    border: 0px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #8f859d !important;
    outline: none !important;
    font-family: 'Rajdhani-Bold';
}

.formError {
    color: #ff0000;
    font-size: 17px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 15px;
    min-height: 52px;
}

.formBtnBox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    margin: auto;
}

button:focus {
    outline: none;
    box-shadow: none;
}

.formBtn {
    background-image: url(../Client/img/rectangle.svg);
    background-repeat: no-repeat;
    max-width: 100%;
    height: auto;
    background-size: cover;
    text-align: center;
    width: 162px !important;
    margin: auto;
    line-height: 82px;
    font-size: 27px !important;
    font-family: 'Rajdhani-Bold';
    color: #fff !important;
    display: block;
    border: none !important;
    background-color: transparent !important;
    padding: 0px !important;
}


    .formBtn:hover {
        color: #eddfff !important;
    }

.link-form-out {
    width: 92px !important;
    line-height: 48px !important;
    height: 50px !important;
    font-size: 17px !important;
    font-family: 'Rajdhani-Bold';
}

#multiChoiceQuestionDiv a {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

ul.footerMenu {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

    ul.footerMenu li {
        display: table-cell;
    }

        ul.footerMenu li a {
            display: inline-block;
            color: #1d0839;
            font-size: 17px;
            font-weight: bold;
            align-items: center;
            height: 100%;
            padding-left: 18px;
            padding-top: 12px;
            padding-right: 18px;
            padding-bottom: 12px;
            font-family: Rajdhani-Bold;
        }

            ul.footerMenu li a:hover {
                background-color: #320f60 !important;
                text-decoration: none;
            }

                ul.footerMenu li a:hover span {
                    color: #fecc04 !important;
                    text-decoration: none;
                }

                ul.footerMenu li a:hover img {
                    filter: invert(83%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%);
                }


li.current a img {
    filter: invert(83%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%);
}

li.current a span {
    color: #fecc04 !important;
}

li.footerMenuMain a img {
    filter: invert(73%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%);
}

li.home a:hover img {
    filter: invert(73%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%) !important;
}


.col-game-list-box {
    width: 46%;
    display: inline-block;
    background-color: #fff;
    min-height: 80px;
    margin-bottom: 50px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 10px 15px 0px rgb(9 9 9 / 6%);
    box-shadow: 0px 10px 15px 0px rgb(9 9 9 / 6%);
}

.col-game-list-text {
    font-size: 21px;
    display: inline-block;
    width: 60%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Rajdhani-Bold';
    color: #1d0839;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.link-game-box {
    display: inline-block;
    float: right;
    background-color: #ddd;
    text-align: center;
    width: 120px;
}

    .link-game-box a {
        display: inline-block;
        background-color: #320f60;
        color: #fecc04;
        width: 100%;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        float: right;
        text-align: center;
        padding: 18px;
        text-decoration: none;
    }

        .link-game-box a span {
            font-size: 19px;
            display: block;
            width: 100%;
            font-family: 'Rajdhani-Bold';
        }

        .link-game-box a i {
            font-size: 18px;
            display: block;
            width: 100%;
            color: #fecc04;
        }

        .link-game-box a:hover {
            color: #fff;
            text-decoration: none;
        }

            .link-game-box a:hover i {
                color: #fff;
                text-decoration: none;
            }

.col-game-list-mr:nth-child(odd) {
    margin-right: 7%;
}


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

    .col-game-list-box {
        width: 100%;
        display: block;
        margin-right: 4px;
        margin-bottom: 28px;
    }

        .col-game-list-box:nth-last-child(-n+2) {
            margin-bottom: 28px;
        }

        .col-game-list-box:last-child{
            margin-bottom:0px;
        }

    .col-game-list-mr:nth-child(odd) {
        margin-right: 0%;
    }
}

.takimOyna {
    position: absolute;
    right: 0px;
    background-color: #fecc04;
    display: inline-block;
    width: 48px;
    line-height: 30px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 17px;
    text-align: center;
    float: right;
    margin-top: 8px;
}

    .takimOyna i {
        color: #320f60;
    }

.takimBilgi span {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.clear {
    display: block;
    clear: both;
}


.listYellowText17 {
    font-family: Rajdhani-Bold;
    color: #320f60;
    font-size: 17px;
    display: block;
    line-height: 14px;
}

.listYellowText12 {
    font-size: 12px;
    font-weight: bold;
    padding-top: 0px !important;
    margin-top: -2px !important;
    display: block;
}

.listYellowText14 {
    font-size: 14px;
    font-weight: bold;
    padding-top: 0px !important;
    margin-top: -2px !important;
    display: block;
}

.listCircleWhite {
    text-align: center;
    float: right;
    margin-top: 13px !important;
    display: inline-block;
    background-color: #ffffff;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: ##1d0839;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50%;
}

.listCircleDark {
    text-align: center;
    float: right;
    margin-top: 13px !important;
    display: inline-block;
    background-color: #320f60;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50%;
}


.btnDyBox {
    width: 100%;
}

    .btnDyBox a {
        display: inline-block;
        width: 49%;
        margin: 0px !important;
        padding: 0px !important;
    }

        .btnDyBox a img {
            width: 120px;
        }

.roketliPanda {
    position: relative;
    width: 300px;
    margin: auto;
}

.roketDash {
    position: absolute;
    top: 142px;
    height: 150px;
    width: 300px;
    position: absolute;
    bottom: 0;
    left: 68%;
    z-index: 1;
    margin-left: -150px;
}

.roketKonfeti {
    top: -42px;
    left: -28%;
    height: 150px;
    width: 300px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -150px;
}

a.link-duello-oyna {
    width: 36px;
    height: 36px;
    display: inline-block;
    text-align: center;
    color: #320f60;
}

    a.link-duello-oyna i {
        font-size: 16px;
    }

    a.link-duello-oyna:hover {
        color: #fff;
        text-decoration: none;
    }

    a.link-duello-oyna:focus {
        color: #fff;
        text-decoration: none;
    }


@media only screen and (min-width: 780px) {

    .row-main {
        margin-right: 0px !important;
        margin-left: 0px !important;
        margin-top: 40px !important;
    }

    ul.footerMenu li a img {
        padding: 8px;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    ul.footerMenu li a .notifyNumber {
        width: 27px;
        height: 27px;
        display: block;
        border-radius: 16px;
        background-color: #fecc04;
        position: absolute;
        top: 16px;
        right: 34px;
        padding: 4px;
        font-size: 13px;
        border: 1px solid #000;
    }

    ul.footerMenu li a:hover .notifyNumber {
        width: 27px;
        border-radius: 16px;
        background-color: #320f60;
        position: absolute;
        top: 16px;
        right: 34px;
        padding: 4px;
        font-size: 13px;
        border: 1px solid #fecc04;
    }

    li.current {
        background-color: #320f60 !important;
    }

    .currentNotifyNumber {
        background-color: #320f60 !important;
        border: 1px solid #fecc04 !important;
    }

    .liderBox {
        margin-top: 0px;
        display: grid;
    }

    .ozelSoruBar {
        margin: 16px;
        padding: 12px;
        background-color: #fff;
        border-radius: 20px;
        width: 100%;
    }

        .ozelSoruBar img {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
            float: left;
        }

        .ozelSoruBar span {
            color: #b18fcf;
            font-size: 22px;
            font-weight: bold;
            display: inline-block;
            line-height: 36px;
            text-overflow: ellipsis;
            width: 93%;
            white-space: nowrap;
            overflow: hidden !important;
            margin-top: 4px;
        }

    .grupIkon {
        background-color: #1c0738;
        border-radius: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        margin-right: 16px;
        vertical-align: bottom;
    }

    .takimBilgi {
        display: inline-block;
        width: 65%;
    }


    .liderRowDark {
        border-bottom: 1px solid #ebc220;
        overflow: hidden;
        justify-content: left;
        display: flex;
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 10px !important;
        padding-top: 0px !important;
        margin-top: 10px !important;
    }

        .liderRowDark:last-child {
            border-bottom: none;
        }

    .rounded-circleDark {
        margin-top: -10px;
        margin-left: -5px;
        background-color: #320f60;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff;
        vertical-align: middle;
        padding-top: 6px;
        font-weight: bold;
        font-family: Rajdhani-Bold;
        border-radius: 30px;
    }

    .liderPuanDark {
        font-size: 20px;
        color: #320f60;
        text-align: right;
        padding-left: 0px !important;
        padding-right: 20px !important;
        font-weight: bold;
        font-family: Rajdhani-Bold;
    }

    .duelloBekleyenBox {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .duelloSonucBox {
        padding-right: 0px !important;
        display: grid;
    }

    .duelloBoxScroll {
        padding-bottom: 18px;
        height: 572px;
        width: 100%;
        overflow-y: auto;
    }

    .btnOval {
        padding: 18px 30px;
        background-color: #6420a0;
        border-radius: 45px;
        margin: 0px 7px 0 9px;
    }

        .btnOval a {
            background-color: #fff;
            width: 100%;
            display: block;
            border-radius: 33px;
            padding: 5px;
            width: 78%;
            margin: auto;
        }

            .btnOval a:hover {
                text-decoration: none;
            }

        .btnOval span {
            font-size: 21px;
            font-weight: bold;
            display: inline-block;
            color: #333;
            line-height: 40px;
        }

    .btnWhiteBox {
        margin-bottom: 0px;
    }

    .duelloVsBox {
        position: relative;
        width: 58%;
        margin: auto;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .duelloVsTextBox {
        position: relative;
        background-color: #fff;
        border-radius: 10px;
        width: 40%;
        display: inline-block;
        margin-right: 10px;
    }

    .duelloVsAvatarBox {
        position: absolute;
        top: -36px;
    }

        .duelloVsAvatarBox img {
            border-radius: 50px;
            border: 3px solid white;
        }

    .duelloVsAvatarBoxLeft {
        left: 12px !important;
    }

    .duelloVsAvatarBoxRight {
        right: 12px !important;
    }

    .duelloVsText {
        font-size: 17px;
        font-weight: bold;
        display: block;
        color: var(--dark-indigo);
    }

    .duelloVsPuanBox {
        display: inline-block;
        text-align: right;
        width: 20%;
        margin-left: 0px;
    }

        .duelloVsPuanBox span {
            font-size: 50px;
            color: #8d839c;
            font-weight: bold;
        }

    .duelloVs {
        display: inline-block;
        background-color: #fecc04;
        border-radius: 30px;
        border: 3px solid #320000;
        font-weight: bold;
        font-size: 15px;
        color: #fff;
        position: absolute;
        top: 30px;
        left: 46%;
        z-index: 1;
        width: 42px;
        height: 42px;
        line-height: 38px;
        text-align: center;
    }

    .duelloVsTextLeft {
        display: inline-block;
        width: 60%;
        text-align: left;
    }

    .slotBox {
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px 15px 150px 150px;
        padding: 12px;
        position: relative;
    }

    .btnSlotBox {
        z-index: 1;
        padding: 30px;
    }
}


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

    .row-main {
        margin-right: 0px !important;
        margin-left: 0px !important;
        margin-top: 16px !important;
    }

    .header-logo-sm {
        width: 150px !important;
        height: auto;
    }

    ul.footerMenu {
        margin-top: 9px;
        margin-bottom: 4px;
        padding: 0px;
        list-style-type: none;
    }

        ul.footerMenu li {
            display: table-cell;
            margin: 5px;
        }

            ul.footerMenu li a {
                display: inline-block;
                color: #1d0839;
                font-size: 17px;
                font-weight: bold;
                align-items: center;
                border-radius: 48px;
                width: 48px;
                height: 48px;
                padding-top: 9px !important;
                padding-left: 0px !important;
                padding-right: 0px !important;
                padding-bottom: 0px !important;
                margin-left: 9px;
                margin-right: 9px;
            }

                ul.footerMenu li a:hover {
                    background-color: #320f60 !important;
                    text-decoration: none;
                }

                    ul.footerMenu li a:hover .notifyNumber {
                        background-color: #320f60 !important;
                        border: 1px solid #fecc04 !important;
                        text-decoration: none;
                    }

                ul.footerMenu li a img {
                    display: block;
                    margin: 0 auto;
                    text-align: center;
                    width: 30px;
                }

    .img-align {
        height: 28px;
        width: auto !important;
    }


    .footerMenuText {
        display: none;
    }

    ul.footerMenu li a:hover img {
        filter: invert(83%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%);
    }

    .notifyNumber {
        width: 27px;
        height: 27px;
        display: block;
        border-radius: 16px;
        background-color: #fecc04;
        position: absolute;
        top: 8px;
        right: 6px;
        padding: 4px;
        font-size: 13px;
        border: 1px solid #320f60;
    }

    .currentNotifyNumber {
        background-color: #320f60 !important;
        border: 1px solid #fecc04 !important;
    }

    li.current a {
        background-color: #320f60 !important;
    }

        li.current a img {
            filter: invert(83%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%);
        }


    li.footerMenuMain a img {
        filter: invert(73%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%);
    }

    li.footerMenuMain a:hover img {
        filter: invert(73%) sepia(49%) saturate(2153%) hue-rotate(352deg) brightness(102%) contrast(105%) !important;
    }

    .liderBox {
        margin-top: 0px;
        display: grid;
    }

    .ozelSoruBar {
        background-color: #fff;
        border-radius: 25px;
        width: 88%;
        margin: 10px 22px;
        padding-top: 4px;
    }

        .ozelSoruBar img {
            display: inline-block;
            vertical-align: middle;
            float: left;
            width: 25px;
            margin: 5px 10px;
        }

        .ozelSoruBar span {
            color: #b18fcf;
            font-size: 15px;
            font-weight: bold;
            display: inline-block;
            line-height: 36px;
            text-overflow: ellipsis;
            width: 76%;
            white-space: nowrap;
            overflow: hidden !important;
            font-family: 'Rajdhani-Bold';
        }

    .grupIkon {
        background-color: #1c0738;
        border-radius: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        margin-right: 6px;
        vertical-align: bottom;
    }

    .takimBilgi {
        display: inline-block;
        width: 55%;
    }

    .duelloBoxScroll {
        height: 230px !important;
        width: 100%;
        overflow-y: auto;
    }

    .liderRowDark {
        border-bottom: 1px solid #ebc220;
        overflow: hidden;
        justify-content: left;
        display: flex;
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 4px !important;
    }

        .liderRowDark:last-child {
            border-bottom: none;
        }

    .rounded-circleDark {
        margin-top: -10px;
        margin-left: -5px;
        background-color: #320f60;
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff;
        vertical-align: middle;
        padding-top: 6px;
        font-weight: bold;
        border-radius: 30px;
    }

    .liderPuanDark {
        font-size: 20px;
        color: #320f60;
        text-align: right;
        padding-left: 0px !important;
        padding-right: 6px !important;
        font-weight: bold;
        font-family: Rajdhani-Bold;
    }

    .duelloBekleyenBox {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-bottom: 25px !important;
    }

    .duelloSonucBox {
        padding-left: 0px !important;
        padding-right: 0px !important;
        display: grid;
    }

    .btnOval {
        background-color: #6420a0;
        border-top-left-radius: 45px;
        border-top-right-radius: 45px;
        padding-top: 20px;
        padding-bottom: 45px;
    }

        .btnOval a {
            background-color: #fff;
            width: 100%;
            display: block;
            border-radius: 33px;
            padding: 5px;
            width: 96%;
            margin: auto;
        }

            .btnOval a:hover {
                text-decoration: none;
            }

        .btnOval span {
            font-size: 21px;
            font-weight: bold;
            display: inline-block;
            color: #333;
            line-height: 40px;
        }

    .btnWhiteBox {
        margin-bottom: -106px;
    }

    .duelloVsBox {
        position: relative;
        width: 100%;
        margin: auto;
        margin-bottom: 30px;
    }

    .duelloVsTextBox {
        position: relative;
        background-color: #fff;
        border-radius: 10px;
        width: 46%;
        display: inline-block;
        margin-right: 10px;
    }

    .duelloVsAvatarBox {
        position: absolute;
        top: -20px;
        width: 20px;
    }

    .duelloVsAvatarBoxLeft {
        left: 46px !important;
    }

    .duelloVsAvatarBoxRight {
        right: 0px !important;
    }

    .duelloVsAvatarBox img {
        border-radius: 50px;
        border: 3px solid white;
        width: 44px;
    }

    .duelloVsText {
        font-size: 12px;
        font-weight: bold;
        display: block;
        height: 20px;
        width: 96%;
    }


    .duelloVsTextLeft {
        display: inline-block;
        width: 60%;
    }

    .duelloVsPuanBox {
        position: absolute;
        top: 30px;
        display: inline-table;
        color: #8d839c;
    }

        .duelloVsPuanBox span {
            font-size: 28px;
            font-weight: bold;
        }

    .duelloVs {
        display: inline-block;
        background-color: #fecc04;
        border-radius: 30px;
        border: 3px solid #320000;
        font-weight: bold;
        font-size: 15px;
        color: #fff;
        position: absolute;
        top: 20px;
        left: 42%;
        z-index: 1;
        width: 42px;
        height: 42px;
        line-height: 38px;
        text-align: center;
    }

    .slotBox {
        /*height: 300px;*/
        padding: 10px;
        /*max-width: 280px;*/
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
        padding: 12px;
        position: relative;
    }

    .btnSlotBox {
        position: absolute;
        top: 250px;
        left: 94px;
        z-index: 1;
    }
}

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

    .liderBox {
        margin-top: 30px;
    }
}

.liderRow {
    border-bottom: solid 0.3px rgba(255, 255, 255, 0.12);
    overflow: hidden;
    justify-content: left;
    display: flex;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 9px !important;
    padding-top: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 9px !important;
}

    .liderRow:last-child {
        border-bottom: none;
    }

.liderAd {
    color: #fff;
    font-family: 'Rajdhani-Bold';
    font-size: 16px;
}

.liderPuan {
    font-size: 16px;
    color: #fff;
    text-align: right;
    padding-right: 0px !important;
    padding-left: 0px !important;
    font-family: 'Rajdhani-Bold';
}

.rounded-circle {
    margin-top: -10px;
    margin-left: -5px;
    background-color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #320f60;
    vertical-align: middle;
    font-weight: bold;
}

.bar-sub-menu {
    min-height: 64px;
    padding: 6px;
    -webkit-box-shadow: 1px 10px 23px 1px rgb(0 0 0 / 42%);
    box-shadow: 1px 10px 23px 1px rgb(0 0 0 / 8%);
    border-radius: 10px;
}

ul.menuYellow {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

    ul.menuYellow li {
        display: inline;
        margin: 18px;
    }

        ul.menuYellow li a {
            padding: 2px 16px;
            border-radius: 6px;
            display: inline-block;
            font-size: 17px;
            text-decoration: none;
            font-family: Rajdhani-Bold;
            color: #b0a9ba;
        }

            ul.menuYellow li a:hover {
                padding: 2px 16px;
                border-radius: 6px;
                display: inline-block;
                font-size: 17px;
                text-decoration: none;
                font-family: Rajdhani-Bold;
                background-color: #ffc107 !important;
                color: #333 !important;
            }

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

    .bar-sub-menu {
        min-height: 50px;
        padding: 6px;
        -webkit-box-shadow: 1px 10px 23px 1px rgb(0 0 0 / 42%);
        box-shadow: 1px 10px 23px 1px rgb(0 0 0 / 8%);
        border-radius: 10px;
    }

    ul.menuYellow li {
        display: inline;
        margin: 0px;
    }

        ul.menuYellow li a {
            padding: 6px 12px;
            border-radius: 6px;
            display: inline-block;
            font-size: 12px;
            text-decoration: none;
            font-family: Rajdhani-Bold;
            color: #b0a9ba;
        }

            ul.menuYellow li a:hover {
                padding: 6px 12px;
                border-radius: 6px;
                display: inline-block;
                font-size: 12px;
                text-decoration: none;
                font-family: Rajdhani-Bold;
                background-color: #ffc107 !important;
                color: #333 !important;
            }

    .profilDetailhedear {
        height: 28px;
    }
}


#register-link {
    padding: 0px 30px;
}

    #register-link input {
        height: 50px;
    }

.login-container {
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}

#login-box h2 {
    margin: 25px 0px 20px 0px;
    font-size: 20px;
}

#login {
    min-width: 300px !important;
    max-width: 300px !important;
}

#login-row {
    background-image: url('img/login-bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 10px;
}

#btnGiris {
    background-color: transparent !important;
    background-image: url('img/giris-btn-bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 40px;
}

.headerRightBox {
    position: absolute;
    top: 0;
    right: -3px;
    width: 30%;
    height: 100%;
    background: #320f60;
    border-top-left-radius: 20px;
    display: flex;
}


    .headerRightBox .levelWrap {
        width: 70%;
        border-right: 3px solid #fecc04;
    }

    .headerRightBox .point {
        width: 30%;
        border-right: 3px solid #fecc04;
    }

    .headerRightBox .levelWrap, .headerRightBox .point {
        padding: 20px 30px;
    }

        .headerRightBox .levelWrap .progress {
            height: 9px;
            background-color: rgb(255 255 255 / 19%);
            margin-bottom: 4px;
            width: 100%;
        }

            .headerRightBox .levelWrap .progress .progress-bar {
                background: #fff;
                height: 5px;
                margin: 2px;
                border-radius: 10px;
            }

        .headerRightBox .levelWrap .level {
            color: #fecc04;
            font-size: 14px;
            margin-bottom: 4px;
        }

            .headerRightBox .levelWrap .level span {
                font-size: 18px;
                font-weight: 600;
            }

        .headerRightBox .levelWrap .count {
            color: #fff;
            font-size: 11px;
        }

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

        .headerRightBox .point .value {
            font-size: 20px;
            font-weight: 600;
            padding-top: 40px;
            color: #fecc04;
            background: url(img/coins.png) no-repeat 50%;
        }



.footer {
    display: flex;
    align-items: center;
    font-style: normal;
    line-height: normal;
    text-align: center;
    background-color: #fecc04;
    border-radius: 38px;
    overflow: hidden;
    justify-content: center;
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-top: 54px;
    margin-bottom: 20px;
}

.list-group-item:hover, .list-group-item:focus {
    background: #320f60 !important;
    color: #fff !important;
    text-decoration: none !important;
    -webkit-filter: invert(0%);
}

.list-group-item a.button {
    text-decoration: none !important;
    background-color: #320f60;
    color: #320f60;
}

    .list-group-item a.button:hover, .list-group-item a.button:focus {
        text-decoration: none !important;
        background: #320f60 !important;
        color: #320f60 !important;
    }



.footerSpan {
    vertical-align: baseline;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    justify-content: center;
    margin-top: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1d0839;
}

    .footerSpan:hover {
        vertical-align: baseline;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        justify-content: center;
        margin-top: 15px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #fecc04;
    }

.teamHedear {
    font-size: 25px;
    color: #320f60;
    font-family: 'Rajdhani-Bold';
    margin-top: 30px;
}

.teamFooter {
    font-size: 16px;
    color: #320f60;
    margin-bottom: 30px;
    font-family: 'Rajdhani-Bold';
}

.teamLogo {
    filter: invert(100%);
    width: 50%;
    height: 50%;
    margin-top: 15%;
}

.teamDivOne {
    background-color: white;
    float: left;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    left: 0px;
    min-height: 120px !important;
    margin-right: 42px !important;
    margin-bottom: 38px;
}

.teamDivTwo {
    flex-wrap: wrap;
    background-color: #320f60;
    /*float: right !important;*/
    border-radius: 15px;
    color: #fff;
    align-items: center;
    justify-content: center;
    display: flex;
    min-height: 120px !important;
}

.questionMultiQuestion {
    flex-wrap: wrap;
    background-color: #320f60;
    border-radius: 15px;
    color: #fff;
    align-items: center !important;
    justify-content: center !important;
    display: flex;
    min-height: 85px !important;
    font-weight: bold;
}

.trueFalsecountdown {
    flex-wrap: wrap;
    /*    background-color: #320f60;
*/ border-radius: 15px;
    color: #fff;
    align-items: center !important;
    justify-content: center !important;
    display: flex;
    min-height: 85px !important;
    font-weight: bold;
}


.questionMultiBonusDescription {
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 15px;
    color: #320f60;
    align-items: center !important;
    justify-content: center !important;
    display: flex;
    min-height: 45px !important;
    font-weight: bold;
    font-stretch: normal;
    padding: 4px 0px 0px 0px;
}

.questionText {
    margin-top: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #320f60;
    text-align: center !important;
    color: white;
    font-size: 25px;
    font-weight: bold;
    border-radius: 15px;
    padding: 45px !important;
    font-family: 'Rajdhani-Bold';
}

.jokerChoiceBack {
    width: 400.5px;
    margin: 0 0 7.5px;
    padding: 0 6px 0 0;
    border-radius: 24px;
    height: 50px !important; 
    border-radius: 24px !important; 
    background-color: rgba(29, 8, 57, 0.5)
}

    .jokerChoiceBack:hover {
        background-color: #320f60
    }

        .jokerChoiceBack:hover .jokerChoiceCircle {
            background-color: #6420a0;
        }

    .jokerChoiceCircle {
        width: 50px;
        height: 50px;
        background-color: #666;
        border-radius: 50px;
        display: inline-block;
        float: left;
    }

.jokerChoiceCircle:hover {
    background-color: #6420a0;
}

.jokerChoiceBack2  {
    width: 400.5px;
    margin: 7.5px 0;
    padding: 0 3.5px 0 0;
    border-radius: 24px;
    background-color: rgba(29, 8, 57, 0.5)
}

    .jokerChoiceBack2:hover  {
        background-color: #320f60
    }

.jokerChoiceBack2:hover .jokerChoiceCircle {
    background-color: #6420a0;
}

.jokerChoiceTextDiv {
    display: inline-block;
    float: left;
    line-height: 15px;
    width: 70%;
}

.jokerChoiceHeadText {
    display: block;
    font-size: 14px;
    font-family: 'Rajdhani-Bold';
    color: #ffffff;
    width: 100% !important;    
    padding-top: 8px;
    padding-bottom: 4px;
}

.jokerChoiceText {
    font-size: 10px;
    font-family: 'Rajdhani-Light';
    line-height: 10px;
    letter-spacing: -0.1px;
    color: #ffffff;
}

.jokerChoicePoint {
    display: inline-block;
    float: right;
    padding-top: 7px;
}

.jokerChoiceCircle img {
    margin-top: 12px;
}

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

    .jokerChoiceTextDiv {
        width: 50%;
        text-align: left;
        margin-left: 5px;
    }

    .jokerChoiceHeadText {
        width: 100% !important;
        display: block;
        font-size: 12px;
        font-family: 'Rajdhani-Bold';
        color: #ffffff;
        padding-top: 3px;
        padding-bottom: 2px;
    }

    .jokerChoiceText {
        font-size: 7px;
        font-family: Rajdhani-Light;
        letter-spacing: -0.1px;
        color: #ffffff;
    }

    .jokerCoin{
        height: 110%;
    }
}



.jokerChoiceBack3  {
    width: 400.5px;
    height: 50px;
    margin: 7.5px 0;
    padding: 0 3.5px 0 0;
    border-radius: 24px;
    background-color: rgba(29, 8, 57, 0.5)
}
    .jokerChoiceBack3:hover {
        background-color: #320f60
    }

.jokerChoiceBack3:hover .jokerChoiceCircle {
    background-color: #6420a0;
}

.jokerCoin {
    font-family: Rajdhani-Bold;
    margin: 0.5px 0 0 0.5px;
    text-align: center;
}
.teamLeaderImg {
    width: 10px;
    height: 10.5px;
    padding: 5.5px 0.5px 2.5px 7px;
    object-fit: contain;
}

.questionTextJoker {
    margin-top: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #320f60;
    text-align: center !important;
    color: white;
    font-size: 25px;
    font-weight: bold;
    border-radius: 15px;
    padding: 45px !important;
    font-family: 'Rajdhani-Bold';
    background-color: #18ca33;
}

.jokerButton {
    position: absolute;
    right: 0;
    top: 132px;
    background-color: #000;
    background-color: #18ca33;
    border-bottom-left-radius: 18px;
    border-top-left-radius: 18px;
    }

.jokerButtonTransparent {
    position: absolute;
    right: 0;
    top: 132px;
    background-color: #000;
    background-color: #18ca33;
    border-bottom-left-radius: 18px;
    border-top-left-radius: 18px;
}

.jokerButtonText {
    color: #ffffff;
    font-family: Rajdhani-Bold;
    font-size: 20px;
}

a.link-joker-btn {
    font-size: 16px;
    font-family: Rajdhani-Bold;
    color: #fff;
    text-decoration: none;
    text-orientation: mixed;
    writing-mode: vertical-lr;
    display: block;
    padding-right: 14px;
    padding-left: 14px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:24px;
}

a.link-joker-btn :hover {
    text-decoration:none;
}

.choicetext {
    color: #6420a0;
    margin: 0px 0px 0px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 48px;
    font-family: 'Rajdhani-Bold';
}

.choicetextTrue {
    color: #fff !important;
    margin: 0px 0px 0px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Rajdhani-Bold';
}

.choicetextFalse {
    color: #fff !important;
    margin: 0px 0px 0px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Rajdhani-Bold';
}

.questionMultiAnswer {
    flex-wrap: wrap;
    color: #320f60;
    background-color: #fff;
    border-radius: 35px;
    border: 1px solid #6420a0;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold;
    line-height: 52px;
    text-decoration: none !important;
    padding-left: 0px !important;
}

.questionMultiAnswerTrue {
    flex-wrap: wrap;
    color: #fff;
    background-color: #18ca33;
    border-radius: 35px;
    border: 1px solid #18ca33;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold;
    line-height: 52px;
    text-decoration: none !important;
    padding-left: 0px !important;
}

.questionMultiAnswerFalse {
    flex-wrap: wrap;
    color: #fff;
    background-color: #ca1818;
    border-radius: 35px;
    border: 1px solid #ca1818;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold;
    line-height: 52px;
    text-decoration: none !important;
    padding-left: 0px !important;
}

.questionMultiAnswerDisabled {
    opacity: 0.2;
    flex-wrap: wrap;
    color: #320f60;
    background-color: #fff;
    border-radius: 35px;
    border: 1px solid #320f60;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold;
    line-height: 52px;
    text-decoration: none !important;
    padding-left: 0px !important;
    font-family: 'Rajdhani-Bold';
}

.profilDetailBox {
    background-color: #f7f8fa;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.profilDetailhedear {
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: black;
    font-weight: bold;
    padding-bottom: 0px !important;
    margin-bottom: 0px;
}

.profilDetailtext {
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 32px;
    color: #320f60;
    line-height: 26px;
    font-family: 'Rajdhani-Bold';
}

.homePageLeftMenuText {
    font-size: 30px !important;
    font-weight: bold;
    color: #320f60;
    padding: 37px;
}


.timeLeft {
    margin-top: -45px;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    padding: 5px;
    background: #fff;
    border: 3px solid #fff;
    color: #320f60;
    text-align: center !important;
    font: 30px Arial, sans-serif;
    font-weight: bold;
    box-shadow: 0px 0px 0px 15px #320f60, 0px 0px 0px 20px #fff !important;
}

.timeLeftQuater {
    margin-top: -45px;
    border-radius: 0% 0% 0% 100%;
    width: 50px;
    height: 50px;
    padding: 5px;
    background: #fff;
    border: 1px solid yellow;
    color: yellow;
    text-align: center !important;
    font: 30px Arial, sans-serif;
    font-weight: bold;
    box-shadow: 0px 0px 0px 15px yellow, 0px 0px 0px 20px #fff !important;
}

.inner-image {
    position: absolute;
    top: -54px;
    right: 0px;
    left: -9px;
    width: 135%
}

.duelTimeHedear {
    font-size: 22px !important;
    font-weight: bold !important;
    margin-top: 10px !important;
}

.duelTimeSpan {
    font-size: 15px;
    font-weight: 700;
    background-color: #fff;
    width: 30px;
    height: 30px;
    margin-top: 20px !important;
    color: #320f60;
    padding-top: 5px;
}

.duelTimeEndSpan {
    background-color: #320f60;
    color: #fff;
    width: 26px;
    margin-bottom: 5px;
}

.duelTimeName {
    font-weight: bold;
    color: #18ca33;
    width: 100%;
    font-size: 15px !important;
    text-align: center !important;
}

.duelTimeCountSpan {
    font-weight: bold;
    color: #18ca33;
    float: right;
    /*width: 100%;*/
    font-size: 15px !important;
    text-align: center !important;
}

.newGamesDiv {
    padding-top: 15px;
    /*text-align: center !important;*/
    background-color: #6420a0;
    border-radius: 45px !important;
}

.hedearPartialDiv {
    padding-top: 30px !important;
    white-space: nowrap;
    font-size: 18px;
    font-weight: bold;
    opacity: 0.6;
    color: #1d0839;
}

.hedearPartialTitleDiv {
    padding-top: 32px !important;
    white-space: nowrap;
    font-size: 27px;
    font-weight: bold;
    color: #1d0839;
}

.hedearPartialUserDiv {
    padding-top: 30px !important;
    white-space: nowrap;
    font-size: 18px;
    font-weight: bold;
    color: #1d0839;
}

.duelloAvatarImg {
    width: 75px;
    margin-left: 0px;
}

.duelloHedear {
    font-weight: bold;
    font-size: 16px;
    color: #1d0839;
    text-align: left;
    padding: 15px;
    margin-left: -15px;
    white-space: nowrap !important;
}

.duelloHedearSpan {
    font-size: 12px;
    color: rgba(29, 8, 57, 0.5);
    white-space: nowrap !important;
}

.duelloHedearLevelSpan {
    font-size: 40px;
    color: rgba(29, 8, 57, 0.5);
    font-weight: bold;
    position: relative;
    white-space: nowrap !important;
}

.duelloHedearSpanRight {
    font-size: 12px;
    position: relative;
    float: right;
    color: rgba(29, 8, 57, 0.5);
    white-space: nowrap !important;
}

.notificationCount {
    position: absolute;
    margin-left: -1em;
    font-size: 18px;
    margin-top: 2px;
    color: #320f60;
}

.duelloHedearRight {
    font-weight: bold;
    font-size: 16px;
    position: relative;
    color: #1d0839;
    text-align: center;
    padding: 15px;
    white-space: nowrap !important;
}

.duelloHedearLevelSpanRight {
    font-size: 40px;
    color: rgba(29, 8, 57, 0.5);
    font-weight: bold;
    text-align: center;
    white-space: nowrap !important;
}

.duelloHedearImgRight {
    width: 75px;
    margin-left: -10px;
}

.leadershipLeftDiv {
    margin-top: 15px;
    margin-right: -15px;
    background-color: #320f60;
    border-radius: 15px 15px 15px 15px;
    display: inline-table;
    padding-bottom: 22px;
    min-height: 380px;
    min-width: 100%;
}

.gameIndexHome {
    background-color: #fff;
    border-radius: 15px;
    margin-top: 15px;
}

.HomeIndex {
}

.homePageLeftMenuImg {
    margin-top: 10px;
    position: relative;
}

.homeLeftMenuDiv {
    background-color: #320f60 !important;
    border-radius: 0px 15px 15px 0px;
    text-align: center;
    word-wrap: break-word;
    padding: 0px !important;
    color: #fecc04;
}

.homeLeftMenuDivAHref {
    text-align: center !important;
    font-size: 20px;
    font-weight: bold;
    color: #fecc04;
    word-wrap: break-word !important;
    padding: 30px;
    display: block;
    font-family: 'Rajdhani-Bold';
}

    .homeLeftMenuDivAHref:hover {
        text-decoration: none;
        color: #f5f5f5;
    }

    .homeLeftMenuDivAHref:focus {
        text-decoration: none;
        color: #f5f5f5;
    }


/*  responsive*/

.badgeDiv {
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    justify-content: center;
    display: flex;
}

.hedearPartialTitleDiv {
    padding-top: 32px !important;
    white-space: nowrap;
    font-size: 27px;
    font-weight: bold;
    color: #1d0839;
}

.questionAnswerImg {
    margin-left: 4px;
    width: 45px;
    webkit-box-shadow: 0px 15px 19px 0px rgb(0 0 0 / 14%);
    box-shadow: 0px 15px 19px 0px rgb(0 0 0 / 14%);
    border-radius: 46px;
}

.profilbtn {
    font-weight: bold;
    text-align: center;
    font-size: 17px;
    color: #1d0839;
    opacity: 0.35;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

.questionDiv {
    border-radius: 10px;
    justify-content: center !important;
    padding: 0px 25px 60px;
    display: block;
    background-color: white;
}

.slotMobil {
    word-wrap: break-word !important;
    border-radius: 15px;
    font-size: 20px;
    font-weight: bold;
    color: black;
    justify-content: center !important;
    text-align: center;
    min-height: 85px;
    line-height: 25px;
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
}

.categorySlotmachineCss {
    background-image: url('img/spin-bg.svg');
    background-size: 260px;
    background-repeat: no-repeat;
    border-radius: 20px;
    height: 266px;
    width: 260px;
    position: relative !important;
    z-index: 1
}

.row-badge {
    justify-content: center;
    text-align: center;
    z-index: 0;
    padding-bottom: 50px;
}

.col-badge {
    max-width: 114px !important;
}

    .col-badge a {
        height: 90px;
        display: block;
    }


        .col-badge a .list-text {
            width: 100px !important;
            -webkit-box-shadow: 0px 8px 12px -1px rgba(0,0,0,0.30);
            box-shadow: 0px 8px 12px -1px rgba(0,0,0,0.30);
            font-size: 14px;
            padding-left: 7px;
            padding-right: 6px;
            line-height: 15px;
            padding-top: 45px;
            text-transform: uppercase;
        }

        .col-badge a .list-circle {
            -webkit-box-shadow: 0px 8px 12px -1px rgba(0,0,0,0.30);
            box-shadow: 0px 8px 12px -1px rgba(0,0,0,0.30);
        }

    .col-badge img {
        max-width: 86px;
        max-height: 106px;
    }

.badge-disable {
    max-height: 106px;
    opacity: 0.5;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.question-row {
    justify-content: center;
    margin-top: 16px;
    padding: 26px;
}

.btn-dy-box {
    margin: auto;
    text-align: center;
}


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

    .mobil-menu-space {
        display: none;
    }

    .web-logout {
        display: block;
    }

    .col-badge {
        max-width: 110px !important;
        margin: 38px;
    }
}


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

    body {
        padding-left: 0px;
        padding-bottom: 15px;
    }

    .con-head {
        margin-left: 0px !important;
        padding-left: 0px !important;
        max-width: 100% !important;
    }

    .con-game {
        padding-left: 15px !important;
    }

    .col-badge {
        margin-left: 6px;
        margin-right: 0px;
        margin-bottom: 59px;
        margin-top: 0px;
    }

    .row-badge {
        margin-left: 10px;
    }

    .row.footer {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    .categorySlotmachineCss {
        background-image: url('img/spin-bg.svg');
        background-size: 260px;
        background-repeat: no-repeat;
        border-radius: 20px;
        height: 266px;
        width: 260px;
        position: relative !important;
        z-index: 1
    }

    .slotMobil {
        word-wrap: break-word !important;
        border-radius: 15px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        justify-content: center !important;
        text-align: center;
        min-height: 82px;
        line-height: 20px;
        width: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .question-row {
        justify-content: center;
        margin-top: 16px;
        padding: 2px 26px;
    }

    .questionDiv {
        border-radius: 10px;
        justify-content: center !important;
        margin-bottom: 40px !important;
        padding: 0px;
    }

    .questionText {
        font-size: 16px !important;
        line-height: 16px !important;
        padding-top: 26px !important;
        padding-bottom: 20px !important;
    }

    ul.listAnswer li a span {
        font-size: 14px !important;
        line-height: 18px !important;
    }
    .questionMultiAnswer {
        line-height: 48px !important;
    }
        .questionMultiAnswerDisabled {
        line-height:48px !important;
    }

    .jokerButton {
        top: 17%;
    }    

    .btn-dy img {
        width: 100px;
    }

    .profilbtn {
        font-weight: bold;
        text-align: center;
        font-size: 10px;
        color: #1d0839;
        opacity: 0.35;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
    }

    .choicetextTrue {
        color: #fff;
    }

    .questionAnswerImg {
    }

    .hedearPartialTitleDiv {
        padding-top: 30px !important;
        white-space: nowrap;
        font-size: 18px;
        font-weight: bold;
        color: #1d0839;
    }

    .avatarHeaderLogoMobile {
        width: 60%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .hedearPartialTitleDiv {
        padding-top: 30px !important;
        white-space: nowrap;
        font-size: 18px;
        font-weight: bold;
        color: #1d0839;
    }

    .avatarHeaderLogoMobile {
        width: 60%;
        margin-top: 5px;
        margin-bottom: 5px;
    }


    .gameIndexHome {
        height: 80px;
        margin-top: 25px;
        background-color: #fff;
        border-radius: 50px;
    }

    .homePageLeftMenuImg {
        margin-left: -15px;
        margin-top: -10%;
        position: relative;
    }

    .homePageLeftMenuText {
        font-size: 22px !important;
        font-weight: bold;
        color: #320f60;
        text-align: center;
        font-family: 'Rajdhani-Bold';
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 25px;
        padding-bottom: 0px;
    }

    .homeLeftMenuDivAHref {
        font-size: 13px !important;
        font-weight: bold;
        color: #fecc04;
        text-align: center !important;
        padding: 22px !important;
        font-family: 'Rajdhani-Bold';
    }

        .homeLeftMenuDivAHref:hover {
            text-decoration: none;
        }

    .homeLeftMenuDiv {
        background-color: #320f60 !important;
        border-radius: 0px 15px 15px 0px;
        text-align: center !important;
        height: 80px;
        padding-top: 15px;
    }

    .badgeDiv {
        background-color: transparent;
        border-radius: 15px;
        overflow: hidden;
        justify-content: center;
        display: flex;
        text-align: center !important;
        margin-left: -10%;
    }

    .HomeIndex {
        margin-bottom: 30px;
    }

    .leadershipLeftDiv {
        margin-left: -15px;
        margin-top: 15px;
        background-color: #320f60;
        border-radius: 15px 15px 15px 15px;
    }

    .duelloHedearImgRight {
        width: 75px;
        margin-left: -10px;
    }

    .duelloHedearSpanRight {
        font-size: 9px;
        position: relative;
        text-align: right;
        float: right;
        color: rgba(29, 8, 57, 0.5);
        white-space: nowrap !important;
    }

    .duelloHedearLevelSpanRight {
        font-size: 35px;
        color: rgba(29, 8, 57, 0.5);
        font-weight: bold;
        text-align: center;
        float: left;
        white-space: nowrap !important;
    }

    .duelloHedearRight {
        padding: 10px;
        font-weight: bold;
        font-size: 15px;
        position: relative;
        color: #1d0839;
        text-align: center;
        white-space: nowrap !important;
    }

    .notificationCount {
        position: absolute;
        margin-left: -1.075em;
        font-size: 18px;
        margin-top: 3px;
        color: #320f60;
    }

    .duelloHedearLevelSpan {
        font-size: 35px;
        color: rgba(29, 8, 57, 0.5);
        font-weight: bold;
        float: right;
        white-space: nowrap !important;
    }

    .duelloHedearSpan {
        font-size: 9px;
        position: relative;
        text-align: left;
        float: left;
        color: rgba(29, 8, 57, 0.5);
        white-space: nowrap !important;
    }

    .duelloHedear {
        padding: 10px;
        margin-left: -15px;
        font-weight: bold;
        font-size: 15px;
        position: relative;
        color: #1d0839;
        text-align: center;
        white-space: nowrap !important;
    }

    .duelloAvatarImg {
        width: 75px;
        margin-left: -35px;
    }

    .duelTimeCountSpan {
        font-weight: bold;
        color: #18ca33;
        float: right;
        font-size: 12px !important;
        text-align: center !important;
    }

    .hedearPartialDiv {
        position: relative;
        font-weight: bold;
        margin-top: -20px;
        min-height: 100px;
        white-space: nowrap !important;
        font-size: 18px;
        color: #320f60;
        margin-bottom: 15px;
    }

    .hedearPartialUserDiv {
        padding-top: 15px !important;
        white-space: nowrap;
        font-size: 15px;
        font-weight: bold;
        color: #1d0839;
    }

    .newGamesDiv {
        padding: 15px;
        background-color: #6420a0;
        border-radius: 45px !important;
    }

    .duelTimeName {
        font-weight: bold;
        color: #18ca33;
        font-size: 13px !important;
        white-space: nowrap;
    }

    .duelTimeEndSpan {
        width: 26px;
        background-color: #320f60;
        color: #fff;
    }

    .duelTimeSpan {
        background-color: #fff;
        width: 26px;
        color: #320f60;
    }

    .duelTimeHedear {
        font-size: 20px !important;
        margin-top: 10px !important;
        font-weight: bold !important;
        font-family: 'Rajdhani-Bold';
    }

    .profilbtn {
        font-weight: bold;
        text-align: center;
        font-size: 10px;
        color: #1d0839;
        opacity: 0.35;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
    }

    .profilDivbtn {
        margin-left: -59px !important;
    }

    .profilDetailhedear {
        text-align: center;
        font-size: 9px;
        color: black;
    }

    .profilDetailtext {
        font-weight: bold;
        text-align: center;
        font-size: 27px;
        color: #320f60;
    }

    .teamDivOne {
        background-color: white;
        float: left !important;
        border-radius: 15px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        margin-left: 2px !important;
        min-height: 100px !important;
        margin-bottom: 28px;
    }

    .teamDivTwo {
        flex-wrap: wrap;
        background-color: #320f60;
        width: 100%;
        float: left !important;
        border-radius: 15px;
        color: #fff;
        margin-top: 15px;
        margin-left: 2px !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex;
        min-height: 100px !important;
    }

    .teamLogo {
        filter: invert(100%);
        width: 100%;
        height: 100%;
        margin-top: 10%;
    }

    .teamHedear {
        font-size: 25px;
        color: #320f60;
        font-family: 'Rajdhani-Bold';
        margin-top: 30px;
    }

    .teamFooter {
        font-size: 16px;
        color: #320f60;
        margin-bottom: 30px;
        font-family: 'Rajdhani-Bold';
    }


    .list-group-item a img {
        width: 100%;
    }

    .footerSpan {
        vertical-align: baseline;
        font-size: 8px;
        font-weight: bold;
        text-decoration: none;
        justify-content: center;
        margin-top: 15px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #1d0839;
    }

        .footerSpan:hover {
            vertical-align: baseline;
            font-size: 8px;
            font-weight: bold;
            text-decoration: none;
            justify-content: center;
            margin-top: 15px;
            display: flex;
            align-items: center;
            text-align: center;
            color: #fecc04;
        }

    .list-group-item a {
        /* margin-top: 10px;*/
    }

    .headerRightBox {
        bottom: 0;
        height: 46%;
        width: 100%;
        top: auto;
    }

        .headerRightBox .levelWrap, .headerRightBox .point {
            padding: 0px 12px;
        }

        .headerRightBox .point {
            padding-top: 18px;
        }

        .headerRightBox .levelWrap .count {
            font-size: 9px;
        }

        .headerRightBox .levelWrap .level {
            margin-top: 8px;
            font-size: 12px;
        }

            .headerRightBox .levelWrap .level span {
                margin-top: 8px;
                font-size: 12px;
            }

        .headerRightBox .levelWrap .progressArea {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .headerRightBox .levelWrap .progress {
            margin-bottom: 0;
            margin-right: 5px;
            height: 8px;
        }

            .headerRightBox .levelWrap .progress .progress-bar {
                height: 4px;
            }

        .headerRightBox .point .value {
            font-size: 15px;
        }

    .mobil-menu-space {
        height: 118px;
    }

    .menu-ver {
        display: inline !important;
    }

    .web-logout {
        display: none;
    }
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
    border-radius: 0px 10px 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}

.dark-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #130024;
    opacity: 0.85;
    z-index: -999;
}

.modal-backdrop {
    backdrop-filter: blur(5px);
    background-color: #2A0D5D;
}

    .modal-backdrop.in {
        opacity: 0.8 !important;
    }

.closeModal {
    border-radius: 50% !important;
    background-color: #fecc04;
    color: black !important;
    margin-right: 35%;
    text-align: center !important;
    margin-bottom: -53px !important;
    font-family: 'Rajdhani-Bold';
    font-size: 21px;
    padding: 22px 10px;
}

.modal {
    text-align: center !important;
    padding: 0 !important;
}

.modal-dialog {
    display: inline-block !important;
    text-align: left !important;
    vertical-align: middle !important;
}

ul.listAnswer {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    margin: auto;
    width: 70%;
}

    ul.listAnswer li {
    }

        ul.listAnswer li a {
            text-decoration: none;
            display: block;
            position: relative;
            margin: 20px;
        }

            ul.listAnswer li a img {
                display: inline-block;
                position: absolute;
                left: 3px;
                top: 3px;
            }

            ul.listAnswer li a span {
                color: #6420a0;
                text-align: center;
                display: inline-block;
                width: 100%;
                line-height: 30px;
                padding-top: 15px;
                padding-left: 40px;
                padding-right: 40px;
                font-size:21px;
            }


@media screen and (max-width: 1200px) {
    ul.listAnswer {
        width: 100% !important;
    }
}

ul.menu-ver {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: 100%;
}

    ul.menu-ver li {
        margin-bottom:6px;
    }

        ul.menu-ver li a {
            background-color: #fff;
            display: block;
            border-radius: 14px;
            line-height: 26px;
            padding: 14px;
            font-family: Rajdhani-Bold;
            font-size: 18px;
            color: #555;
        }

            ul.menu-ver li a i {
                display: inline-block;
                vertical-align: middle;
                font-size: 21px;
            }

            ul.menu-ver li a span {
                display: inline-block;
                margin-left: 12px;
            }

            ul.menu-ver li a:hover span {
                text-decoration: underline;
                color: #333;
            }

            ul.menu-ver li a:focus span {
                text-decoration: underline;
                color: #333;
            }

            ul.menu-ver li a:hover i {
                color: #333;
            }

            ul.menu-ver li a:focus i {
                color: #333;
            }

.con-out {
    margin-top: 70px;
}

.con-in {
    margin-left: 0px !important;
    padding-left: 0px !important;
    margin-right: 0px !important;
    padding-right: 0px !important;
    height: auto;
}

.form-wide-bg {
    background-size: cover !important;
    padding-top: 30px !important;
    padding-bottom: 20px !important;
    max-width: 458px !important;
}

.login-head {
    margin-bottom: 32px;
}

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

    body {
        margin-left: 0px !important;
        padding-left: 0px !important;
    }

    .con-out {
        margin-left: 0px !important;
        padding-left: 0px !important;
        margin-top: 10px !important;
    }

        .con-out h3 {
            padding-top: 1.25rem !important;
            margin-bottom: -32px !important;
        }

    .formBackBox {
        background-image: url(../Client/img/login-mobil-bg.svg);
        margin-left: 0px;
        background-position: right;
    }


    .formHeadText {
        margin-top: 3px;
        margin-bottom: 50px;
    }

    .formError {
        margin-top: 40px;
        margin-bottom: 40px;
        min-height: 52px;
    }

    .formBtnBox {
        margin-bottom: 5px !important;
    }

    .formBottomLink {
        margin-top: 60px !important;
        margin-bottom: 18px !important;
    }
}

.text-modal-desc {
    color: #fff;
    font-size: 30px;
    text-align: center;
    font-family: 'Rajdhani-Bold';
    margin-top: 26px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100%;
}


.modal-badge {
    z-index: 19999;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(29, 8, 57, 0.83);
}

    .modal-badge h5 {
        color: #fecc04;
        font-weight: bold;
        font-size: 35px;
        text-align: center;
        margin-top: 140px;
        margin-bottom: 80px;
        position: relative;
        z-index: 9999;
    }

.modal-badge-text {
    background-color: #6420a0;
    height: 80px;
    display: block;
    position: absolute;
    width: 216px;
    top: 64px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    border-radius: 20px;
    z-index: -2;
    color: #fff;
    font-family: 'Rajdhani-Bold';
    font-size: 19px;
    text-align: center;
    padding-top: 52px;
    text-transform: uppercase;
}

.modal-badge-white-circle {
    background-color: #fff;
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    border-radius: 100px;
    z-index: -1;
}

.modal-badge h5 img {
    width: 86px;
    height: auto;
}