/********** Template CSS **********/
:root {
    --primary: #ffffff;
    --light: #191c24;
    --dark: #f7f7f7d7;
}
*{
    /* font-family: "Poppins", sans-serif; */
}
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}
.text-warp-style{
    white-space: nowrap;
}
@media (max-width: 720px) {
    .setfsize { font-size: 70%; }
}

/* This is my favourite becoz it changes font size of maximum html tags */

html{ font-size: 82%; }

@media (max-width: 320px) {
    html{ font-size: 70%; }
}
@media (max-width: 720px) {
    html{ font-size: 75%; }
}
@media (max-width: 1024px) {
    html{ font-size: 80%; }
}


.sticky-bottom{
    position: relative;
    bottom :0px;
}
.bg-back{
    background-color: #9dbef4 !important;
}
.bg-success-style{
    background-color: #2874f0 !important;
}
.bg-dark-style{
    background-color: #02122d !important;
}
.bg-success-faded{
    background-color: #44ac60 !important;
}
.bg-sidebar-edit{
    background-color: #02122d !important;
}
.text-success-color{
    color: #e5e8ed !important;
}
.text-blue-color{
    color: #2874f0 !important;
}

.bg-picture{
    width: 100%;
    /* background-image: url('../img/ipl-3.jpg');
    background-color: #000000fe; */
    /* opacity: .6; */
    
    /* background: linear-gradient(0deg, rgb(29 30 29 / 73%), rgb(18 18 18 / 80%)), url('../img/ipl-2.webp'); */
    /* background: linear-gradient(0deg, rgb(29 30 29 / 35%), rgb(18 18 18 / 20%)), url('../img/login_bg4.jpg'); */
    background: linear-gradient(0deg, rgb(29 30 29 / 35%), rgb(18 18 18 / 20%)), url('../img/boast_login2.avif');
    background-size: cover;
    /* height: 100%; */
    /* overflow: hidden; */
}

.carousel-inner,.carousel-item img{
    border-radius: 15px;
}

.bg-grey{
    background-color: #18181891;
}

.bg-fade{
    opacity: .8;
    
    background-color: #393939ec;

}

/* Hide scrollbars ..This also remove scroll property i.e. page never scrolls  */
/* body {
  overflow: hidden; 
} */
body {
    background: linear-gradient(0deg, rgb(29 30 29 / 35%), rgb(18 18 18 / 20%)), url('../img/boast_login2.avif');
    background-size: cover;
}

/* Hide scrollbar for Chrome, Safari and Opera */
/* hide the scrollbars, but still be able to keep scrolling */

body::-webkit-scrollbar {
    display: none;
}
/* DOnt uncomment this bcoz upper one will not work*/
/* body{
    -ms-overflow-style: none;  
    scrollbar-width: none;  
} */
.sidebar::-webkit-scrollbar {
    display: none;
}
.sidebar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .2s;
}

.btn.btn-primary {
    color: #ffffff;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 40px;
    height: 40px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}

/* ONLY SIDEBAR WIDTH DECREASED FROM 250 TO 220
content margin-left: 200px; pehle 250 tha */
/*** Layout ***/
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 100vh;
    overflow-y: auto;
    background: var(--light);
    transition: 0.5s;
    z-index: 999;
}

.content {
    margin-left: 200px;
    /* width: 100% !important; */
    min-height: 100vh;
    background: #2e322c;
    transition: 0.5s;
}

@media (min-width: 992px) {
    .sidebar {
        margin-left: 0;
    }

    .sidebar.open {
        margin-left: -200px;
    }

    .content {
        width: calc(100% - 200px);
    }

    .content.open {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        margin-left: -200px;
    }

    .sidebar.open {
        margin-left: 0;
    }

    .content {
        width: 100%;
        margin-left: 0;
    }
}


/*** Navbar ***/
.sidebar .navbar .navbar-nav .nav-link {
    padding: 4px 20px;
    color: var(--dark);
    font-weight: 500;
    border-left: 3px solid var(--light);
    border-radius: 0 30px 30px 0;
    outline: none;
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active {
    color: var(--primary);
    background: #000000;
    border-color: var(--primary);
}

.sidebar .navbar .navbar-nav .nav-link i {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #172a49;
    border-radius: 37px;
    color: #ebebeb;
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i {
    background: var(--light);
}

.sidebar .navbar .dropdown-toggle::after {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

.sidebar .navbar .dropdown-item {
    padding-left: 25px;
    border-radius: 0 30px 30px 0;
}

.content .navbar .navbar-nav .nav-link {
    margin-left: 25px;
    padding: 12px 0;
    color: var(--dark);
    outline: none;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    border-radius: 37px;
}

.content .navbar .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.content .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

@media (max-width: 575.98px) {
    .content .navbar .navbar-nav .nav-link {
        margin-left: 15px;
    }
}


/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
    width: 0px;
    transition: 2s;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 5px solid var(--primary);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--dark);
    border-color: var(--primary);
}

.bg-style-file{
    background-color: #ffffff;
}

.undercss h6 {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 15px;
    position: relative;
}

.undercss h6:after {
    content: "";
    position: absolute;
    width: 30%;
    height: 1px;
    bottom: 0;
    left: 2%;
    border-bottom: 2px solid #c9931c;
}

.slip-head {
    width: 100%;
    display: flex;
    padding: 0 0 0 18px;
    margin-bottom: 15px;
    margin-top: 30px;
}

span.gamename {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #a9aaaa;
    text-transform: uppercase;
    width: 25%;
    letter-spacing: 0.5px;
}

span.matchbtw {
    width: 25%;
    color: #fff !important;
}

.betval {
    width: 50%;
}

.slip-head ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* max-width: 260px; */
    text-align: center;
    margin-right: 32px;
}

.slip-head ul li {
    width: 33.33%;
    color: #a9aaaa;
    font-size: 12px;
}

span.pin {
    width: 4%;
    text-align: center;
    color: #a9aaaa;
    cursor: pointer;
}
.matchlist .game-list-col{
    border-top: #636363 solid 1px;
}

/* this was commented on 29 August for adding transition animation on hover in events tab */
/* .matchlist .game-list-col:nth-child(even) {
    background: #e8e3c8 !important;
} */

.game-list-col a.matchlink {
    width: 100%;
    display: flex;
    text-decoration: none;
    color: #fff;
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding-right: 0px;
}

#center-div {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 15px;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
}


.game-list-col a.matchlink span {
    font-size: 16px;
    color: #799fda;
    line-height: 17px;
}

span.gametime {
    width: 15%;
}
.game-list-col a.matchlink span label {
    margin: 0px;
    color: #fff;
    font-size: 16px;
}

.game-list-col a.matchlink span {
    font-size: 16px;
    color: #799fda;
    line-height: 17px;
}

span.matchbtw {
    width: 25%;
    color: #fff !important;
}


dl.game-list-col .betconditions {
    /*width: 51%;*/
    display: flex;
}
@media screen and (min-width: 576px){
    dl.game-list-col .betconditions {
        width: 51%;
        display: flex;
    }
}

dl.game-list-col ul {
    margin: 0px;
    /* margin-right: 10px;
    padding: 4px; */
    list-style: none;
    display: flex;
    width: 33.33%;
    /* background-color: #efe4b0;
    border-radius: 2px; */
    /* max-width: 260px; */
    text-align: center;
}
dl.game-list-col ul li {
    border: 1px solid rgb( 44, 47, 47);
    border-radius: 2px;
    background-color: #97c9dc;
    color: #363636;
    font-size: 14px;
    width: 50%;
    line-height: 30px;
    font-weight: 700;
    margin: 0 5px;
}
/* dl.game-list-col ul li {
    border: 1.5px solid rgb( 44, 47, 47);
    border-radius: 6px;
    background-color: rgb( 44, 47, 47);
    color: #ffffff;
    font-size: 14px;
    width: 50%;
    line-height: 30px;
    font-weight: 500;
    margin: 0 5px;
} */

dl.game-list-col ul li.up {
    /* border: 1.5px solid #13bb5e; */
    /* color: #13bb5e; */
    /* background: linear-gradient(180deg, rgb(19 187 94) -80%, rgb(44 47 47) 100%); */
    /* color: #fff; */
}

@media screen and (min-width: 100px) and (max-width: 700px){
    dl.game-list-col ul li {
        margin: 0px;
        width:200% !important;
    }
    dl.game-list-col ul li.up {
        margin-right: 2px;
    }
}
@media screen and (min-width: 100px) and (max-width: 576px){
    dl.game-list-col ul {
        /* margin: 0px; */
        width: 70px !important;
        padding-left: 0;
    }
}
.bubble {
    display: block;
    position: absolute;
    cursor: pointer;
}
.bubble:after {
    content: "";
    background-color: #13bb5e;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
}
.bubble_inactive {
    display: block;
    position: absolute;
    cursor: pointer;
}
.bubble_inactive:after {
    content: "";
    background-color: #464947;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
}


.bubble .bubble-inner-dot:after {
    content: " ";
    display: block;
    text-align: center;
    opacity: 0;
    background-color: rgb(19 187 94 / 42%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bubble-pulse 1.5s linear infinite;
}
@keyframes bubble-pulse {
    0% {
        transform: scale(1);
        opacity: .75;
    }
    25% {
        transform: scale(1);
        opacity: .75;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }   
}
/* .bodyss{
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: bodys-animation 15s ease infinite;

}
@keyframes bodys-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }   
} */
/* .inplayss{
    
    animation: inplay-animation 4s alternate infinite;

}
@keyframes inplay-animation {
    0% {
        transform: scale(1);
        background-color: #9c8997;
        color:purple 
        opacity: 1.00;
    }
    25% {
        transform: scale(1);
        opacity: 1.00;
    }
    100% {
        transform: scale(1.01);
        opacity: 0.95;
    }   
} */
/* @keyframes inplay-animation {
    0% {
        transform: scale(1);
        opacity: 1.00;
    }
    25% {
        transform: scale(1);
        opacity: 1.00;
    }
    100% {
        transform: scale(-1.2, 0.6) rotate(183deg);
        opacity: 0.95;
    }   
} */
.bubble .bubble-outer-dot {
    margin: 1px;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgb(19 187 94 / 42%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -webkit-animation: bubble-pulse 1.5s linear infinite;
    -moz-animation: bubble-pulse 1.5s linear infinite;
    -o-animation: bubble-pulse 1.5s linear infinite;
    animation: bubble-pulse 1.5s linear infinite;
}

dl.game-list-col ul li.down {
    /* border: 1.5px solid #ff2b87; */
    /* color: #ff2b87; */
    /* background: linear-gradient(180deg, rgb(241 43 135) -80%, rgb(44 47 47) 100%); */
    background: rgb(251, 201, 220);
    color: #363636;
}

#exTab1 .tab-content {
    color: white;
    background-color: #428bca;
    padding: 5px 15px;
}

#exTab2 h3 {
    color: white;
    background-color: #428bca;
    padding: 5px 15px;
}

/* remove border radius for the tab */

#exTab1 .nav-pills>li>a {
    border-radius: 0;
}

/* change border radius for the tab , apply corners on top*/

#exTab3 .nav-pills>li>a {
    border-radius: 4px 4px 0 0;
}
#exTab3{
    
    /* box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

#exTab3 .tab-content {
    color: white;
    background-color: #c8c8c8 !important;
    padding: 5px 15px;
    box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


.gameinfo-date {
    color: #ffffff;
    background: #4caf50;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 18px;
}
.gamefancy-info {
    color: #ffffff;
    background: rgb(34 35 36);
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 18px;
    margin: 0 10px;
}
/* .resultsprobability{
   box-shadow: 0px 5px 10px #000000;
} */
.resultsnumber {
    color: #a9aaaa;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 12px;
}
.resultsin:nth-child(even) {
    background: #4b4f4f;
}
.resultsin {
    display: flex;
    align-items: center;
    background: #404343;
    /* border-bottom: 1px solid rgb(255 255 255 / 45%); */
    color: #fff;
    padding: 4px 12px;
}
.resultsin ul li span {
    width: 100%;
    display: inline-block;
    font-weight: 700;
}
.resultsin ul li:nth-child(1) {
    /* background: rgb(255 200 0 / 51%); */
}
.resultsin ul li {
    padding: 2px 10px;
    min-width: 16.3%;
    text-align: center;
    line-height: 15px;
    min-height: 26px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    margin: 0 1px;
    border-radius: 2px;
    /* background-color: rgb(99 177 185); */
    background-color: #97c9dc;
    border: 0.5px solid #616161;
    /* background: linear-gradient(180deg, rgb(19 187 94) -80%, rgb(44 47 47) 100%); */
    color: #363636;
}
/* .resultsin ul li {
    padding: 2px 10px;
    min-width: 16.3%;
    text-align: center;
    line-height: 15px;
    min-height: 26px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    margin: 0 1px;
    border-radius: 6px;
    background-color: rgb(44, 47, 47);
    border: 1.5px solid #13bb5e;
    background: linear-gradient(180deg, rgb(19 187 94) -80%, rgb(44 47 47) 100%);
    color: #fff;
} */
.resultinfo {
    font-weight: 500;
    font-size: 14px;
    min-width: 40%;
    color: #fff;
}
.headsection {
    background: #222324;
    padding: 9px 12px;
    margin-top: 0px;
}
.scenario-list {
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid rgb(255 255 255 / 45%); */
    color: #fff;
    padding: 4px 12px;
    background: #4b4f4f;
}
.scenario-list ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    min-width: 45%;
}
.scenario {
    font-weight: 500;
    font-size: 13px;
    min-width: 55%;
}
a.add-pin {
    color: #a9aaaa;
    font-size: 11px;
}
.headsectionleft {
    display: flex;
    align-items: center;
}
.scenario-list ul li span {
    font-weight: 400;
    font-size: 12px;
}
.scenario-list ul li.bgyellow {
    /* border: 1px solid rgba(0, 0, 0, 0.87) !important; */
    /* background: linear-gradient(180deg, rgb(255 200 0 / 87%) -80%, rgb(44 47 47) 100%); */
}
.scenario-list ul li {
    padding: 2px 10px;
    min-width: 16.3% !important;
    text-align: center;
    line-height: 15px;
    min-height: 26px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    margin: 0 1px;
    border-radius: 4px;
    background-color: #97c9dc;
    border: 0.5px solid #616161 !important;
    color: #363636 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
.scenario-list ul li.bggreen {
    /* border: 1px solid #4fe4e4 !important; */
    /* background: linear-gradient(180deg, rgb(19 187 94) -80%, rgb(44 47 47) 100%); */
    background: rgb(251, 201, 220);
    color: #363636;
}
.resultsin ul li.layall {
    /* border: 1px solid #f15b9c; */
    /* background: linear-gradient(180deg, rgb(241 43 135) -80%, rgb(44 47 47) 100%); */
    background: rgb(251, 201, 220);
    color: #363636;
}

.classWrap.quick_bet-wrap {
    padding: 6px 10px;
    background: #4b4f4f;
    /* display: none; */
}
.modal-footer > :not(:last-child) {
    margin-right: 0.25rem;
}
.bookMakerBetHeader {
    display: flex;
    color: #fff;
    align-items: center;
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 5px;
}
.col-stake {
    width: 100%;
    max-width: 50%;
}
.col-stake input#model_stake {
    width: 100%;
    min-height: 30px;
    padding: 4px;
    border-radius: 3px;
    border: none;
    background: #707272;
    color: #fff;
}
.bookMakerBetHeader .btn {
    font-size: 12px;
    padding: 7px 5px;
    cursor: pointer;
    min-width: 85px;
    border-radius: 3px;
    margin-left: 8px;
    background: #000000;
    border: none;
    border: 1px solid #13bb5e;
}
.bookMakerBetHeader .col-stake .btn.btn-success {
    color: #13bb5e !important;
    border: 1px solid #13bb5e;
}
.bookMakerBetHeader .col-stake .btn.btn-liable {
    color: #ff2b87 !important;
    border: 1px solid #ff2b87;
}

.quick-bet-confirm {
    width: 100%;
    max-width: 20%;
    height: 30px;
    border-radius: 3px;
    background-color: transparent;
    flex-direction: column;
    justify-content: center;
    margin: 0 7px;
    padding: 0;
    /* text-align: right; */
    list-style: none;
    border: 1px solid #8a8d8d;
}
#model_runner_name span {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffd50c !important;
}
.quick-bet-confirm li {
    list-style: none;
    line-height: 30px;
    color: #fff;
    padding: 0 5px;
}
.col-stake_list {
    border-top: 1px solid #666969;
    margin-top: 6px;
    padding-top: 6px;
}
.col-stake_list ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    justify-content: center;
}
.col-stake_list ul li {
    margin: 0 2px;
    min-width: 10%;
}
a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}
.col-stake_list ul li a {
    padding: 3px 5px;
    background: transparent;
    border-radius: 2px;
    color: #fff !important;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid #666969;
    letter-spacing: 0px;
}
/* @media (min-width: 576px){
    .col-stake_list ul li a {
    padding: 3px 5px;
    background: transparent;
    border-radius: 2px;
    color: #fff !important;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid #666969;
    letter-spacing: 0px;}
} */
/* button#placeBet {
    background-image: -moz-linear-gradient(148deg, rgb(190 33 85) 0%, rgb(254 194 8) 100%);
    background-image: -webkit-linear-gradient(148deg, rgb(190 33 85) 0%, rgb(254 194 8) 100%);
    background-image: -ms-linear-gradient(148deg, rgb(190 33 85) 0%, rgb(254 194 8) 100%);
} */
button#close_btn {
    background: #585858 !important;
    border: 0 !important;
}

/* This will be needed for some popup that was not on frontend yet but it'll be very soon */

    .overlay2 {

        position: fixed;
        /* Positioning and size */

        top: 0;

        left: 0;

        width: 100vw;

        height: 100vh;

        background: #191717;

        display: none;
        /* making it hidden by default */

    }



    .modal2 {

        position: fixed;
        /* positioning in center of page */

        top: 50vh;

        left: 50vw;

        transform: translate(-50%, -50%);

        height: 100px;
        /* size */

        width: 1100px;

        background-color: red;
        /* background color */

        border: solid 3px white;

        border-radius: 10px;

        font-size: 25px;

        color: white;

        padding: 3px;

    }

    .overlay {

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background: rgba(0, 0, 0, 0.5);

        transition: opacity 200ms;

        visibility: hidden;

        opacity: 0;

    }

    .overlay.light {

        background: rgba(255, 255, 255, 0.5);

    }

    .overlay .cancel {

        position: absolute;

        width: 100%;

        height: 100%;

        cursor: default;

    }

    .overlay.target {

        visibility: visible;

        opacity: 1;

    }



    .popup {

        height: 100%;

        width: 100%;

    }

    .light .popup {

        border-color: #aaa;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);

    }

    .popup h2 {

        margin-top: 0;

        color: #666;

        font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;

    }

    .popup .close {

        position: absolute;

        width: 20px;

        height: 20px;

        top: 20px;

        right: 20px;

        opacity: 0.8;

        transition: all 200ms;

        font-size: 24px;

        font-weight: bold;

        text-decoration: none;

        color: #666;

    }

    .popup .close:hover {

        opacity: 1;

    }

    .popup .content {

        max-height: 400px;

        overflow: auto;

    }

    .popup p {

        margin: 0 0 1em;

    }

    .popup p:last-child {

        margin: 0;

    }

    @font-face {

        font-family: 'Sigmar One';

        font-style: normal;

        font-weight: 400;

        src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');

    }

    #popup2,
    #popup3 {

        background: #000000f0;

        color: #fff;

        overflow: hidden;

        z-index: 1000;

    }

    .congrats {

        position: absolute;

        top: 50px;

        max-width: 650px;

        height: 100px;

        padding: 0px 10px;

        text-align: center;

        margin: 0 auto;

        left: 0;

        right: 0;

    }

    .blob {

        height: 50px;

        width: 50px;

        color: #ffcc00;

        position: absolute;

        top: 45%;

        left: 45%;

        z-index: 1;

        font-size: 30px;

        display: none;

    }

    .congrats>h1 {

        transform-origin: 50% 50%;

        font-size: 50px;

        cursor: pointer;

        z-index: 2;

        text-align: center;

        width: 100%;

        color: #fff;

        font-weight: bold;

    }

    .congrats>h3 {

        transform-origin: 50% 50%;

        font-size: 25px;

        cursor: pointer;

        z-index: 2;

        text-align: center;

        width: 100%;

        color: #fff;

        font-weight: bold;

    }

/*  */

@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}

@media (prefers-reduced-motion: no-preference) {
    .square_animation {
      animation: wipe-enter 1.5s 1;
      /* animation-timeline: scroll();  ONLY FOR LEARNING PURPOSE this will create display on scroll DONT uncomment This*/
      /* animation: wipe-enter 1s infinite; */
    }
    .square_animation2 {
      animation: wipe-enter 2.5s 1;
    }
    .square_animation3 {
      animation: wipe-enter 3s 1;
    }
    .square_animation4 {
      animation: wipe-enter 3.5s 1;
    }
    .square_animation5 {
      animation: wipe-enter 4s 1;
    }
}

/* Button tick */

@keyframes extend {
0% {
    
    border-radius: 100px;
    } 10% {
    
    background: #fff;
    margin-left: - 5px;
    margin-top: - 5px;
    } 20% {
    margin-left: 0px;
    margin-top: 0px;
    } 100% {
    border-radius: 100px;
    background: #6fb07f;
    }
}


@keyframes disappear {
    0% {
        opacity: 1;
        } 20% {
        color: #fff;
        } 100% {
        opacity: 0;
        }
    }
@keyframes appear {
    0% {
        opacity: 0;
        } 70% {
        opacity: 0;
        } 100% {
        opacity: 1;
        }
    }

button .ani{
    border-width: 1px;
   
    /*border-radius*/
    border-radius: 100px;
    background: #fff;
    position: absolute;
    border: 5px solid #6fb07f
    }


img .ani{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0
    }

button:focus .ani{
    /*animation*/
    -webkit-animation: extend 1s ease-in-out;
    -ms-animation: extend 1s ease-in-out;
    animation: extend 1s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards
    }

button:focus > span .ani{
    /*animation*/
    -webkit-animation: disappear 1s ease-in-out;
    -ms-animation: disappear 1s ease-in-out;
    animation: disappear 1s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards
    }

button:focus > img .ani{
    /*animation*/
    -webkit-animation: appear 1s ease-in-out;
    -ms-animation: appear 1s ease-in-out;
    animation: appear 1s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards
    }


/* CSS for Betslip Bets Show on The Right Side  */
.col-in-sec {
    min-height: 100%;
}
.bg-blue {
    /* padding: 2px; */
    /* background: #272928; */
    border-left : 1px solid #343a40;
    border-right : 1px solid #343a40;
}
.darkblue-bg {
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #222324;
}
.openCloseBet select {
    background: #222324;
    color: #fff;
    width: 100%;
    padding: 10px 8px;
    border: 0;
    margin-bottom: 10px;
}
.checkmark {
    width: 100%;
    display: block;
    font-size: 15px;
    padding: 6px 0;
    cursor: pointer;
    border: 1px solid #cecece;
    background-color: #fff;
}
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}
.openCloseBet {
    padding: 10px;
}
.openCloseBet .selectBetTable {
    background: #3f4342;
    overflow-y: auto;
}
.openCloseBet .table-responsive {
    display: inline-table;
}
.openCloseBet .selectBetTable #back_tbody tr {
    background: rgb(19 187 94 / 10%) !important;
    border-bottom: none !important;
}
.openCloseBet .selectBetTable #lay_tbody tr {
    background: rgb(255 43 135 / 10%) !important;
    border-bottom: none !important;
}
.openCloseBet .selectBetTable #lay_tbody tr:nth-child(even) {
    background: rgb(255 43 135 / 30%) !important;
}
.openCloseBet .selectBetTable td {
    color: #fff;
    text-transform: initial;
    font-weight: normal;
    padding: 2px 5px;
}
span.backTitle, span.layTitle {
    background: rgb(255 255 255 / 25%);
    margin: 0 8px 0 0;
    padding: 2px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 10px;
}
.openCloseBet .selectBetTable tr {
    color: #a9aaaa;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
}
.openCloseBet .selectBetTable #back_tbody tr:nth-child(even) {
    background: rgb(19 187 94 / 30%) !important;
}
.openCloseBet .selectBetTable tr th {
    padding: 2px 5px;
    color: #fff;
    font-weight: 600;
    font-size: 10px;
}
@media (min-width: 992px){
    .col-lg-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* 
.square_box {
    position: absolute;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top-left-radius: 45px;
    opacity: 0.302;
}

.square_box.box_three {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: -80px;
    top: -60px;
    width: 500px;
    height: 500px;
    border-radius: 45px;
}

.square_box.box_four {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: 50px;
    top: 200px;
    width: 450px;
    height: 450px;
    border-radius: 45px;
} */


/* / */
.bg-dark{
    /* background-color: #141414ee !important; */
    /* background-color: #220247e4 !important; */
    /* background-color: #00133de4 !important; */
}

.game-slider {
    padding: 0;
    /* background-color: #353535; */
    border-radius: 15px;
}
/* 
.game-slider .d-flex {
    gap: 8px;
}
.game-item a{
    color: #888;
}
.thumb img {
    vertical-align: middle;
    border-style: none;
}

.game-slider .game-item .thumb {
    margin-bottom: -5px;
}
.game-slider .game-item .thumb img.responsive-img {
    max-width: 100%;
    height: auto;
}*/
.game-slider .game-item .thumb img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.game-slider .game-item .game-thumb-home-info {
    transition: all 0.3s ease;
}
.game-slider .game-item:hover::before {
    opacity: .8;
    background-color: #fff;
    background-image: linear-gradient(#3f3f4f 10%, #000 100%);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
}
.game-slider .game-item .play-btn {
    -webkit-transition: .7s;
    transition: .7s;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%) scale(1);
    z-index: 14;
    height: 16px;
    line-height: 1.1;
    opacity: 0;
    color: #ffffff;
}
.game-slider .game-item:hover .play-btn {
    /*transform: translateY(10px);*/
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
    width: auto;
    height: auto;
}
.game-slider .game-item:hover .play-btn {
    /*transform: translateY(10px);*/
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
    width: auto;
    height: auto;
}
.game-slider .game-item .play-btn a {
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    font-size: 12px;
    font-weight: 600;
    position: relative;
    z-index: 2;
    letter-spacing: .2px;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 1px 2px 3px rgb(0 0 0 / 50%);
    color: #ff8a0c;
}
.game-slider .game-item:hover .game-thumb-home-info {
    opacity: 0;
}

.game-slider .game-item {
    height: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    float: left;
    border-radius: 10px;
    margin: 2px;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
    z-index: 1;
    border: 1px solid transparent;
    flex: 175px;
}

/* Tabs ICON */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
    background:#4a4949 !important;
    border-color:transparent!important;
}
.active .img-main-block {
    /* background-color: #ff8a0c; */
    background-color: #09542f;
}
.active .text-white{
    color: #0ba735 !important;
    font-weight: bolder;
}
.img-main-block {
    width: 35px;
    height: 35px;
    margin: auto;
    padding: 3px;
    /* padding-left: 3px; */
    background-color: #4A4A4A;
    border-radius: 50%;
}
.img-main-block img{
    vertical-align: middle;
    border-style: none;
    width: 70% !important;
    margin: 0 auto;
    margin-top: 5px;
    filter: drop-shadow(0px 0px 4px #FFF) invert(1);
}
.nav-tabs{
    /* gap: 10px;  */
   
}

.blink_icon {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.match-count {
    position: relative;
    top: -60px;
    right: -45px;
    width: 15px;
    height: 12px;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 12px;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 50%);
    display: block;
    background-color: #FFF;
}
.no-match-count {
    position: relative;
    top: -60px;
    right: -45px;
    width: 15px;
    height: 12px;
    color: #fff;
    text-align: center;
    font-size: 10px;
    line-height: 12px;
    display: block;
}
.match-count strong {
    color: #030303;
}

.animate-right{
    position: relative;
    animation: MyDiv;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-direction: reverse;
}

@keyframes MyDiv {
  0%   {left: 0px; top: 0px;}
  100%  {left: 100px; top: 0px;}

}

/* upper nav bar CSS*/

.navbar .sidebar-toggler, .navbar .navbar-nav .nav-link i {
    width: 37px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    border-radius: 37px;
}

@media screen and (min-width: 971px){
    .margin-media{
        margin-right: 300px;
        gap:  20px;
    }
    .text-size-style{
        font-size:15px;
    }
}
@media screen and (min-width: 780px) and (max-width: 970px){
    .margin-media{
        margin-right: 150px;
        gap:  20px;
    }
    .text-size-style{
        font-size:15px;
    }
}
@media screen and (min-width: 480px) and (max-width: 780px){
    .margin-media{
        /* margin-right: 50px; */
        /* gap:  15px; */
    }
    .text-size-style{
        font-size:14px;
    }
}
@media screen and (min-width: 320px) and (max-width: 480px){
    /* Icon Sizing */
    .size-style{
        width: 100px;
    }
    /* Balances margin Sizing */
    .margin-media{
        /* margin-right: 50px; */
        gap:  0px;
    }
    /* Balances font Sizing */
    .text-size-style{
        font-size:12px;
    }
}

.text-size-style{
    font-weight:100;
}
.border-hover{
    border: #000000 solid thin;
}
/* .border-hover:hover{
    border: #000000 solid thin;
} */
.bg-hover:hover{
    background-color: #e1e0e0f6 !important;
}

/* Footer CSS */

footer {
    /* background-color: #222324; */
}
.footer-menu {
    padding: 0;
    margin: 0px 0 0;
}
.footer-menu li {
    list-style-type: none;
    display: inline-block;
    position: relative;
    padding: 0 27px 0 20px;
}
.footer-menu li a {
    color: #a9aaaa;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
}
p.footercontent {
    color: #a9aaaa;
    font-size: 12px;
    font-weight: 300;
    padding-left: 20px;
}

/* NAVbar Slider Try Start*/

.scroll-css{
    /* display: flex; */
    overflow:scroll !important;
    flex-wrap: nowrap !important;
}
.scroll-css::-webkit-scrollbar{
    display: none;
}
.oflow-hidden{
    overflow: hidden;
}

/* NAVbar Slider Try Ends */

@media screen and (max-width: 590px) {
    .mobile-style{
        width: 45px;
    }
    .game-list-col a.matchlink {
        /* display: inline-block; */
        padding: 15px;
    }
}
.game-list-col a.matchlink {
    width: 100%;
    display: flex;
    text-decoration: none;
    color: #fff;
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding-right: 0px;
}
@media screen and (max-width: 767px) {
    dl.game-list-col a {
        padding: 2px 5px 2px 10px;
    }
}
dl.game-list-col a {
    padding: 2px 10px 2px 20px;
}

.fw-style{
    font-weight: 500;
}

table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    box-shadow: none !important;
}

.hover-gstyle:hover {
    background-color: green;
}

/* Navbar BIGARINA LOGO Split Text Animation Start */
.text-part {
    display: inline-block;
    position: relative;
    transform: translateX(0);
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.text-part.left {
    transform: translateX(-200%);
    animation-name: slide-in-left;
}

.text-part.right {
    transform: translateX(200%);
    animation-name: slide-in-right;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}
/* Navbar BIGARINA LOGO Split Text Animation Ends */