@font-face {
    font-family: 'Century Gothic';
    src: url('../lib/font/CenturyGothic.ttf');
}

/*----Remove autocomplete backgorund color-------*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999999s;
    transition-delay: 9999999s;
}
/*----Remove autocomplete backgorund color-------*/

:root {
    --site-primary: #8a7dff;
    --site-primary-shadow: #8a7dff4d;
    --site-secondary: #1820a4;
}

html {
    background: rgb(250,236,0);
    background: -moz-linear-gradient(0deg, var(--site-secondary) 0%, var(--site-secondary) 1%, rgba(0,0,0,1) 50%);
    background: -webkit-linear-gradient(0deg, var(--site-secondary) 0%, var(--site-secondary) 1%, rgba(0,0,0,1) 50%);
    background: linear-gradient(0deg, var(--site-secondary) 0%, var(--site-secondary) 1%, rgba(0,0,0,1) 50%);
    min-height: 100%;
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#faec00",endColorstr="#000000",GradientType=1);
}

body {
    font-family: 'Century Gothic';
    color: white;
    letter-spacing: 1px;
    font-size: .8rem;
    background-color: transparent;
}

select {
    -webkit-appearance: none !important;
}

.border-bottom-primary {
    border-bottom: 1px solid var(--site-primary) !important;
}

.bg-black {
    background-color: #060606 !important;
}

.bg-darkgray {
    background-color: #101010 !important;
}

.bg-maroon {
    background-color: #331010 !important;
}

.bg-dark-yellow {
    background-color: #624100 !important;
}

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

.bg-maroon-border {
    background-color: #331010 !important;
    border: 1px solid #f20000;
}

.bg-round-gray {
    padding: 10px;
    border-radius: 5px;
    background-color: #404040;
}

.bg-round-darkred {
    padding: 10px;
    border-radius: 5px;
    background-color: #81030E;
}

.bg-round-yellow {
    padding: 10px;
    border-radius: 5px;
    background-color: var(--site-primary);
}

.bg-round-yellow {
    padding: 10px;
    border-radius: 5px;
    background-color: var(--site-primary);
}


.bg-sport {
    background: url('../images/bg/sport-bg.jpg') no-repeat center top;
    background-size: cover;
}

.bg-live {
    background: url('../images/bg/live-bg.jpg') no-repeat center center;
    background-size: cover;
}

.bg-slot {
    background: url('../images/bg/slot-bg.jpg') no-repeat center center;
    background-size: cover;
}

.bg-empty {
    background-position: 0% 0%;
    background-color: none !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

.bg-empty-border-radius {
    background-position: 0% 0%;
    background-color: none !important;
    border: 2px solid var(--site-primary);
    border-radius: 15px;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

.bg-gradient-red {
    background: #7D0000;
    background: -webkit-linear-gradient(top left, #7D0000, #C10000);
    background: -moz-linear-gradient(top left, #7D0000, #C10000);
    background: linear-gradient(to bottom right, #7D0000, #C10000);
}

.bg-gradient-yellow {
    background: #d88f00;
    background: -webkit-linear-gradient(top left, #d88f00, var(--site-primary));
    background: -moz-linear-gradient(top left, #d88f00, var(--site-primary));
    background: linear-gradient(to bottom right, #d88f00, var(--site-primary));
    color: #000;
}

.bg-gradient-primary {
    background: #d88f00;
    background: -webkit-linear-gradient(top left, var(--site-primary), var(--site-primary-shadow));
    background: -moz-linear-gradient(top left, var(--site-primary), var(--site-primary-shadow));
    background: linear-gradient(to bottom right, var(--site-primary), var(--site-primary-shadow));
    color: #fff;
}

.bg-bank {
    background: url('../images/bg/bank-bg.jpg') no-repeat center center;
    background-size: cover;
}

.hr-vertical {
    border-left: 1px solid var(--site-primary-shadow);
}

hr {
    background-color: var(--site-primary-shadow);
    opacity: 1;
}

.hr-yellow {
    background: rgb(255,255,255);
    background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--site-primary) 40%, var(--site-primary) 60%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--site-primary) 40%, var(--site-primary) 60%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--site-primary) 40%, var(--site-primary) 60%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
    height: 2px !important;
    margin: 0;
}

.tbl-collapsed {
    border-collapse: collapse !important;
}

.c-white {
    color: white !important;
}

.c-gray {
    color: #8f8f8f !important;
}

.c-red {
    color: #f20000 !important;
}

.c-yellow {
    color: var(--site-primary) !important;
}

.red-title {
    color: #f20000 !important;
    font-weight: bold !important;
}

.red-label {
    color: #f20000 !important;
    font-weight: bold !important;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.yellow-title {
    color: var(--site-primary) !important;
    font-weight: bold !important;
}

.yellow-label {
    color: var(--site-primary) !important;
    font-weight: bold !important;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.white-label {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 1.1rem;
}


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

a:visited {
    color: var(--site-primary);
}

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

a:active {
    color: #f20000;
}

a.a-white:link {
    color: white !important;
    text-decoration: none;
}

a.a-white:visited {
    color: white !important;
}

a.a-white:hover {
    color: var(--site-primary) !important;
    text-decoration: underline;
}

a.a-white:active {
    color: white !important;
}

a.a-gray:link {
    color: #8f8f8f !important;
    text-decoration: none;
}

a.a-gray:visited {
    color: #8f8f8f !important;
}

a.a-gray:hover {
    color: var(--site-primary) !important;
    text-decoration: underline;
}

a.a-gray:active {
    color: #8f8f8f !important;
}

a.a-primary:link {
    color: var(--site-primary) !important;
    text-decoration: none;
}

a.a-primary:visited {
    color: var(--site-primary) !important;
}

a.a-primary:hover {
    color: var(--site-primary) !important;
    text-decoration: underline;
}

a.a-primary:active {
    color: var(--site-primary) !important;
}

.v-mid {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column
}

.header {
    background-color: black;
}

    .header .site-logo img {
        max-width: 200px;
    }

.fileinput {
    pointer-events: auto;
    display: inline-block;
    width: 30%;
    background-color: var(--site-primary);
    color: white;
    font-size: .8rem;
    text-align: center;
    padding: 10px;
}

    .fileinput:hover {
        cursor: pointer;
        background-color: #400006;
    }

.filename {
    display: inline-block;
    width: 62%;
    text-align: right;
}

input.style--one:not(.btn), select.style--one, .input.style--one:not(.btn) {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--site-primary);
    color: white;
    font-weight: bold;
    font-size: .7rem;
    padding: 5px 12px;
    width: 170px;
}

input.style--two:not(.btn), select.style--two, .input.style--two:not(.btn) {
    padding: 10px;
    background-color: #4444449e;
    border: none;
    color: white;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
}

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

    .input-float-link .float-link {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 70%;
        height: 100%;
    }

input:disabled {
    opacity: 0.7;
}

.btn {
    background: #F20000;
    background: -webkit-linear-gradient(top, #F20000 0%, #ff8c8c 100%);
    background: -moz-linear-gradient(top, #F20000 0%, #ff8c8c 100%);
    background: linear-gradient(to bottom, #F20000 0%, #ff8c8c 100%);
    background-repeat: no-repeat;
    border: none;
    color: inherit;
    font-weight: bold;
    font-size: .7rem;
    height: 100%;
    min-width: 80px;
}

    .btn:hover {
        background: #ffffff40 !important;
        color: white !important;
    }

    .btn.style--one {
        border-radius: 30px;
        padding: 5px;
    }

        .btn.style--one.nobg {
            background: transparent;
            border: 1px solid #F20000;
            color: #F20000;
        }

        .btn.style--one.whitebg {
            background: rgb(255,255,255);
            background: -moz-linear-gradient(0deg, rgba(255,255,255,0.5466561624649859) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5522584033613445) 100%);
            background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.5466561624649859) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5522584033613445) 100%);
            background: linear-gradient(0deg, rgba(255,255,255,0.5466561624649859) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5522584033613445) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
            text-decoration: none;
            border: 2px solid #fff;
        }

        .btn.style--one.whitebg {
            background: transparent;
        }

        .btn.style--one.primarybg {
            background: transparent;
            border: 2px solid var(--site-primary);
            color: var(--site-primary);
        }

            .btn.style--one.primarybg:hover {
                background: var(--site-primary-shadow) !important;
                color: var(--site-primary) !important;
            }

        .btn.style--one.blackbg {
            background: transparent;
            border: 2px solid #000;
            color: #000;
            font-size: 1rem;
            padding: 5px 15px;
        }

    .btn.style--two {
        border-radius: 2rem;
        padding: 7px 10px;
        min-width: 120px;
        font-size: 1rem;
        text-transform: uppercase;
    }

        .btn.style--two.nobg {
            background: transparent;
            border: none;
            color: var(--site-primary);
        }

        .btn.style--two.primarybg {
            color: #fff;
            background: var(--site-primary);
        }

    .btn:disabled {
        background: gray;
    }

    .btn.style--three {
        color: var(--site-secondary);
        border-radius: 30px;
        padding: 1% 5%;
        background: #fff;
        font-size: 1.2rem;
    }

marquee {
    font-size: .8rem;
    background-color: #8080804d;
    padding: 5px;
    border-radius: 2px;
    width: 85%;
    color: lightgray;
}

.menu {
    background: #ffffff1a;
    color: var(--site-primary);
}

    .menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .menu ul li {
            flex-grow: 1;
            font-weight: bold;
            text-transform: uppercase;
            font-size: .8rem;
            padding: 20px 10px;
        }

            .menu ul li .icon {
                display: block;
                font-size: 1.7rem;
                margin-bottom: 5px;
            }

            .menu ul li:hover, .menu ul li.active {
                background-color: var(--site-primary-shadow);
                cursor: pointer;
            }

    .menu.menu-profile {
        background: none;
    }

        .menu.menu-profile ul li {
            border: 2px solid var(--site-primary);
            margin: 0 10px;
            border-bottom: 0;
            border-radius: 15px 15px 0 0;
            padding: 15px 10px;
        }

            .menu.menu-profile ul li:last-child {
                border: 2px solid transparent;
            }

            .menu.menu-profile ul li:hover, .menu.menu-profile ul li.active {
                background-color: var(--site-primary);
                color: #fff;
                /*color: #414141;*/
                cursor: pointer;
            }

    .menu.menu-profile--sub {
        background: none;
    }

        .menu.menu-profile--sub ul li {
            border-bottom: 3px solid transparent;
        }

            .menu.menu-profile--sub ul li:hover, .menu.menu-profile--sub ul li.active {
                background-color: transparent;
                border-color: var(--site-primary);
            }

    .menu.menu-vertical {
        background: #161616;
        height: 100%;
        border-right: 2px solid var(--site-primary);
    }

        .menu.menu-vertical ul li {
            padding: 25px 10px;
            color: #fff;
            font-size: 1rem;
        }

            .menu.menu-vertical ul li:hover, .menu.menu-vertical ul li.active {
                background-color: var(--site-primary);
                color: #000;
                cursor: pointer;
            }

    .menu.sub-menu li span {
        border: 1px solid var(--site-primary);
        display: block;
        border-radius: 9px;
        padding: 5%;
        font-weight: bold;
    }

        .menu.sub-menu li span:hover, .menu.sub-menu li span.active {
            color: #000;
            background-color: var(--site-primary);
        }

    .menu.sub-menu ul li:hover, .menu.sub-menu ul li.active {
        background-color: transparent;
    }

.footer {
    background: #000000;
}

    .footer .footer--column {
        font-size: .8rem;
        color: #8f8f8f;
    }

        .footer .footer--column .title {
            font-weight: bold;
            text-transform: uppercase;
            color: white;
        }

.form-set {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.gmprod {
    background: url('../images/product/product-bg.png');
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

    .gmprod .gmprod--info {
        background: #270000;
        height: 100%;
    }

        .gmprod .gmprod--info .gmprod--info--link > img, .gmprod--info--link img {
            width: 20%;
            max-width: 50px;
        }

.gmprod--info--link img {
    width: 100%;
}

.cm-prod {
    position: relative;
    /*text-align: right;*/
    color: black;
}

    .cm-prod.left {
        text-align: left;
    }

    .cm-prod.right {
        text-align: right;
    }

    .cm-prod .cm-weblink {
        position: absolute;
        right: 0;
        top: 0;
        padding-top: 10%;
        padding-right: 8%;
        padding-left: 6%;
        width: 100%;
    }

        .cm-prod .cm-weblink img {
            width: 7%;
        }

    .cm-prod .cm-acc {
        position: absolute;
        right: 0;
        bottom: 0;
        padding-bottom: 3%;
        padding-right: 9%;
        padding-left: 7%;
        width: 100%;
    }

        .cm-prod .cm-acc .cm-acc--user {
            width: 60%;
            font-size: 1.2rem;
            color: #fff;
        }

            .cm-prod .cm-acc .cm-acc--user label {
                font-size: .9rem;
            }

    .cm-prod.right .cm-acc .cm-acc--user {
        margin-left: auto;
    }

.input-icon-wrapper {
    position: relative;
}

    .input-icon-wrapper i {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        right: 0;
        height: 100%;
        padding-right: 2%;
    }

        .input-icon-wrapper i::before {
            font-size: 200%;
        }

.sport-container {
    padding-top: 22%;
    padding-bottom: 15%;
}

.img-icon img {
    width: 70%;
}

.tbl {
    width: 100%;
    font-size: 1rem;
}

    .tbl th, .tbl td {
        padding: 10px;
    }

    .tbl.style--one {
        border-radius: 15px;
    }

        .tbl.style--one, .tbl.style--one th, .tbl.style--one td {
            border: 2px solid #ff0000;
            border-collapse: collapse;
        }

            .tbl.style--one th {
                background-color: #750000;
            }

            .tbl.style--one td {
                background-color: #331010;
            }

    .tbl.style--two {
        width: 100%;
        border-collapse: separate;
        background-color: var(--site-primary);
        border-radius: 10px;
    }

        .tbl.style--two, .tbl.style--two th, .tbl.style--two td {
            border: 0px solid var(--site-primary);
            border-spacing: 2px;
            overflow: hidden;
        }

            .tbl.style--two th {
                background-color: var(--site-primary);
                color: #000; /*#000;*/
                padding: 15px;
                font-size: 15px;
            }

            .tbl.style--two td {
                color: #fefefe;
                padding: 15px;
                font-size: 14px;
            }

            .tbl.style--two tr {
                /*background-image: url("/images/diamond-bg.png");*/
                background-color: #000;
            }

            .tbl.style--two th:first-child {
                border-radius: 10px 0 0 0;
            }

            .tbl.style--two th:last-child {
                border-radius: 0 10px 0 0;
            }

            .tbl.style--two tr:last-child > td:first-child {
                border-radius: 0 0 0 10px;
            }

            .tbl.style--two tr:last-child > td:last-child {
                border-radius: 0 0 10px 0;
            }

            .tbl.style--two.variant-1 {
                border-collapse: collapse;
                background-color: transparent;
            }

                .tbl.style--two.variant-1 th {
                    background-color: var(--site-primary);
                    color: #000; /*#000;*/
                    padding: 15px;
                    font-size: 15px;
                }

                .tbl.style--two.variant-1 td {
                    color: #fefefe;
                    padding: 15px;
                    font-size: 14px;
                    background-color: #000;
                    border-bottom: 2px solid var(--site-primary);
                }

                    .tbl.style--two.variant-1 td:nth-child(2) {
                        border-left: 2px solid var(--site-primary);
                    }

                    .tbl.style--two.variant-1 td:last-child {
                        border-right: 2px solid var(--site-primary);
                    }

                .tbl.style--two.variant-1 tr {
                    background-color: transparent;
                }

                .tbl.style--two.variant-1 thead tr:first-child td {
                    background-color: transparent;
                    border: 0;
                }

                .tbl.style--two.variant-1 tr > :first-child {
                    background-color: transparent;
                    color: var(--site-primary);
                }

                .tbl.style--two.variant-1 th:nth-child(2) {
                    border-radius: 10px 0 0 0;
                }

                .tbl.style--two.variant-1 tr:last-child > td:nth-child(2) {
                    border-radius: 0 0 0 10px;
                }

#vip > input[type="image"] {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
}

    #vip > input[type="image"].active {
        filter: none;
        -webkit-filter: drop-shadow(rgba(255,255,255,0.7) 0px 4px 12px);
        filter: drop-shadow(rgba(255,255,255,0.7) 0px 4px 12px);
    }

.accordion-button {
    background-color: var(--site-primary);
    color: #212529;
}

    .accordion-button:not(.collapsed) {
        color: var(--site-primary);
        background-color: #171717;
    }

        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a7dff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transform: rotate( 180deg );
        }

.preloader {
    text-align: center;
}

    .preloader img {
        width: 80px;
    }

@media (min-width: 1200px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1024px;
    }
}

@media (max-width: 768px) {
    html {
        /*background: #000000;*/
        /*background: linear-gradient( 0deg, rgba(250,236,0,1) 0%, rgba(255,168,0,1) 8%,rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);*/
    }

    body {
        padding-bottom: 25%;
    }

    .gmprod--info {
        font-size: 0.6rem;
    }

        .gmprod--info .white-label {
            font-size: 0.8rem;
        }

        .gmprod--info .gmprod--info--link {
            text-align: center;
        }

            .gmprod--info .gmprod--info--link img {
                width: 90%;
                max-width: 50px;
            }

    .cm-prod {
        font-size: 0.5rem;
    }

        .cm-prod .cm-acc .cm-acc--user {
            font-size: 2vw;
        }

            .cm-prod .cm-acc .cm-acc--user label {
                font-size: 1.2vw;
            }

        .cm-prod .cm-acc > label {
            font-size: 1vw;
        }

    .btn.style--two {
        font-size: 0.6rem;
        min-width: unset;
    }

    .btn.style--one.blackbg {
        font-size: .5rem;
        padding: 2px 5px;
    }

    .bg-sport {
        background: url('../images/bg/sport-bg-mobile.jpg') no-repeat center top;
        background-size: 100%;
        background-color: black;
    }

    .sport-container {
        padding-top: 73%;
        padding-bottom: 0;
    }

    .footer {
        background-color: transparent;
        color: black;
    }


    .menu ul li {
        flex-basis: 0;
        font-weight: normal;
        padding: 10px;
    }

        .menu ul li img {
            max-width: 20px;
        }

    .bottom-menu {
        position: fixed;
        bottom: 0;
        z-index: 9;
        background: #c60008;
    }

        .bottom-menu ul li {
            width: 20%;
            padding: 5px;
            font-size: .55rem;
            font-weight: 400;
        }

    .bg-mobile-empty {
        border-style: none;
        border-color: inherit;
        border-width: 0;
        background-position: 0% 0%;
        background-color: none !important;
        background-image: none !important;
        background-repeat: repeat !important;
        background-attachment: scroll !important;
    }

    .side-menu {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: -100%;
        background-color: #000000b3;
        z-index: 10;
        overflow: hidden;
        transition: ease-in-out .5s;
    }

        .side-menu ul {
            background: #000;
            width: 300px;
            max-width: 100%;
            height: 100%;
            padding: 0;
            overflow: scroll;
        }

            .side-menu ul li {
                list-style: none;
                font-size: 1.2rem;
                text-transform: uppercase;
                padding: 15px;
            }

        .side-menu.active {
            left: 0;
        }

    #vip > input[type="image"] {
        flex-grow: 1;
        width: 0;
        margin: 2px;
    }

    .btn.style--three {
        font-size: 2vw;
    }
}