@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Tiro+Bangla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@500&display=swap');

:root {
  --main: #59fda2;
  --dark-gray: #1f1d1d;
  --bg :#1e2022;
  --sidebarc: #2a3f54
}


body{
    background: #0f0218;
    font-family: 'Roboto', 'Tiro Bangla', sans-serif;
    
}
.header{
    min-height: 60px;
}
#user_nav{
    background:#1d1d1b;
  
    z-index: 100;display: none;top:67px;
    box-shadow: -6px 11px 24px -5px #99f9f5;
}
#user_nav li{
    list-style: none;
    margin-left: 15px;
    line-height: 36px;
}
.wave {
    -webkit-animation: color_change 1s infinite alternate;
    -moz-animation: color_change 1s infinite alternate;
    -ms-animation: color_change 1s infinite alternate;
    -o-animation: color_change 1s infinite alternate;
    animation: color_change 1s infinite alternate;
}
@-webkit-keyframes color_change {
    from { background-color: #73e5f5; }
    to { background-color: #327a85; }
}
@-moz-keyframes color_change {
    from { background-color: #73e5f5; }
    to { background-color: #327a85; }
}
@-ms-keyframes color_change {
    from { background-color: #73e5f5; }
    to { background-color: #327a85; }
}
@-o-keyframes color_change {
    from { background-color: #73e5f5; }
    to { background-color: #327a85; }
}
@keyframes color_change {
    from { background-color: #73e5f5; }
    to { background-color: #327a85; }
}
#user_nav li a{
    color: #fff;
}
.inplay{
        width: 140px;
    margin: 0 auto;
    background: #34D934;
    padding: 1px 34px;
    border-radius: 16px;
    color: #fff;
}
.inplay p{
    font-weight: bold;
    margin-top: 5px;
}
.match-title{
    margin-top: 7px;
    margin-bottom: 3px;
}
.flag{
    width: 33px;height: 33px;
}
.match-icon{
    width: 33px;margin:0 auto;
}
.match-icon p{
    text-align: center;
}

.vs{
    padding: 3px 1px;
    font-weight: bold;
    color: #fff;
    border-radius: 100px;
    float: left;
    width:10%;
}
.a_team{
    width:45%;
    float: left;
    padding: 7px 0px;

}
.a_team img{
    margin-right: 5px;
}
.b_team{
    width:45%;
    float: right;
    padding: 7px 0px;
    text-align: right;

}
.b_team img{
    margin-left: 5px;
}
.livescore{
    text-align: center;
    font-weight: bold;
    color: #0D6EFD;
	    font-style: italic;
 margin-left: 0px;
 margin-right: 0px;
}
.front-option{
    background: #FFAB61;
    padding: 5px 36px;
    font-weight: bold;
    color: #000;
    border-radius: 22px;
    width: 92px;
    margin: 0 auto;
   
}
.front-option2{
    background: #F38EFB;
    padding: 5px 36px;
    font-weight: bold;
    color: #000;
    border-radius: 22px;
    width: 92px;
    margin: 0 auto;
   
}
.footer{
    background-color: #126e51 ;
    color: #ffffff;
    text-align: center;
    
}
.ulf{
    list-style-type: none;
}
.qtitle{
    background: #c4c4c4;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    padding: 10px 20px;
}
.ratePanel{
    background-color: #555;
	padding: 3px 3px 6px 3px;
}
.ans{
    background: #5b5b5b;
    text-align: center;
    color: #686464;
    padding: 8px 0px 8px 0px;
    margin-top: 3px;
    border: 1px solid #9797974d;
    box-shadow: 3px 3px #00000040;
    font-size: 14px;
    border-radius: 5px;
}

.odds-info{
    padding:10px;
    border-bottom: 1px solid #707070;
}
.bet-option{
    padding-left:10px;
    padding-right:10px;
}
.bet-option input{
    float: right;
    background: #033d46;
    color: #fff;
    border-radius: 18px;
}

.bet-option input:focus{
    outline: none;
}
.bet-button{
    background: #3EA6D5;
    border-color: #707070;
    text-align: center;
    border-radius: 15px;
    padding: 6px 135px 6px 139px;
}
.date-text{
        text-align: center;
    background: #0d9c61;
    padding: 10px;
    color: #fff;
    margin: 0px;
   
}
.alertmsg{
    max-width: 200px;

    background: #4d6512;
    margin: 0 auto;
    position: fixed;
    top: 82px;
    left: 100px;
    box-shadow: 0px 0px 22px 6px #a4adb5;
    border-radius: 15px;

}
@media (min-width: 320px) and (max-width: 480px) {
    .odds{
    min-height: 200px;
    position: fixed;
    bottom: 0px;
    background: #626262;
    width: 100%;
    display: none;
    box-shadow: 1px -1px 14px 1px #72f9f7;
}
}
@media (min-width: 481px) and (max-width: 767px) {
    .odds{
    min-height: 200px;
    position: fixed;
    bottom: 0px;
    background: #626262;
    width: 100%;
    display: none;
    box-shadow: 1px -1px 14px 1px #72f9f7;
    
}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .odds{
    min-height: 200px;
    position: fixed;
    bottom: 0px;
    background: #626262;
    width: 100%;
    display: none;
    max-width: 400px;
    box-shadow: 1px -1px 14px 1px #72f9f7;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
    .odds{
    min-height: 200px;
    position: fixed;
    bottom: 0px;
    background: #626262;
    width: 100%;
    display: none;
    max-width: 400px;
    box-shadow: 1px -1px 14px 1px #72f9f7;
}
}    
@media (min-width: 1025px) and (max-width: 1280px) {
    .odds{
    min-height: 200px;
    position: fixed;
    bottom: 0px;
    background: #626262;
    width: 100%;
    display: none;
    max-width: 400px;
    box-shadow: 1px -1px 14px 1px #72f9f7;

}
}    
@media (min-width: 1281px) {
    .odds{
    min-height: 200px;
    position: fixed;
    bottom: 0px;
    background: #626262;
    width: 100%;
    display: none;
    max-width: 400px;
    box-shadow: 1px -1px 14px 1px #72f9f7;
}
}    

 
 
.modal-header{
    background: #321447;
}
.modal-header h4{
    font-weight: bold;
}
.modal-body{
    padding: 2% !important;
    background: #0f0218;
    color: #000;
}
.modal-button {
    background: #0D8284;
    border-radius: 0px;
    color: #fff;
    box-shadow: 1px 2px 14px 1px #3c7877;
}
.modal-button:focus{
outline: none;
}
.modal-button:select{
outline: none;
}
.modal-content{
    border:none;
}

.modal-header {
    padding: 10px;
    border-bottom: 1px solid #230023a1;
}


.n-header{
  width: 100%;
  padding-top: 20px;
	padding-bottom: 20px;
  background: #0f0218;
}


.joinnow{
    display: flex;
    text-decoration: none;
    color: white;
    text-align: center;
    margin-top: 6px;
    font-size: 11px;
}
 
.div-50{

  width:50%;
  padding-left: 16px;
  display: flex;
}

.div-30{
  width:37%;
}

#time{
    color: #fff;
    padding: 6px;
    padding-right: 5px;
    padding-left: 12px;
    border-radius: 0px;
    font-size: 20px;
    font-weight:bold;
}

.join{
    color: var(--main);
    padding: 6px;
    padding-right: 12px;
    padding-left: 12px;
    background: transparent;
    border-radius: 0px;
    font-size: 11px;
    background-color: #3e3838;
}
.margin{
    margin-top: 7px;
}
.s-n-header{
  
    display: inline-flex;
    width: 100%;
    height: 46px;
    line-height: 10px;
    padding-top: 15px;
    
}

.div-33{

  width:33.33%;
     color: var(--main);
    padding: 6px;
    padding-right: 12px;
    padding-left: 12px;
    border-radius: 2px;
    font-size: 14px;
    border: 1px solid #5CB85C;
  
}

.div-l-50{
    width: 100%;
  
}
.user-block{
    padding-left: 29px;
    position: relative;
}

.u-icon{
    position: absolute;
    left: 8px;
    top: 12px;
}
.u-name{
    padding: 2.5px;
    overflow:hidden;
    width: fit-content;
    text-align: center;
}

.blance{
    color: #000;
    font-weight: bolder;
    font-size: 12px;
    border-radius: 3px;
    text-align: right;
    width: fit-content;
}

.deposit{

    color: #ffffff;
    padding: 2.5px;
    border-radius: 0px;
    font-weight: 700;
    text-align: center;
    width: fit-content;
    font-size: 12px;
}

.deposit a{

    color: var(--main);
    text-decoration: none;
}

.sidebar{

    position: fixed;
    z-index: 100000;
    height: 100%;
    width: 200px;
    background: #0f0218;
    left: -200px; 
    top: 102px;


}


.backdrop{

position: fixed;
z-index: 10000;
height: 100%;
width: 100%;
left: 0;
right: 0;
bottom: 0;
background:;
top: 102px;
display: none;
 
 

}
.div-title{

   display: flex;
   width: 100%; 
}

.title-tit{
    font-size: 13px;
    font-weight: 600;
    padding: 1px;
}

.title-img{

    padding: 5px;
}

.match-div {
    background: #DBFAF2;
    color: #000;
    border: 1px solid #DBFAF2;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 8px;
    line-height: 14px;
}
.body{
    width: 100%;
}

.collapse .in {
    
    background: #2a3f54;
}



 .c-button{
    width: 95%;
 }

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #DBFAF2;
    color: #000;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 4px 6px;
    
    text-align: center;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #fff;
    cursor: default;
    background-color: purple;
    border: 1px solid #0D8284;
    border-bottom-color: transparent;
}

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-tabs {
    border-bottom: 1px solid #ddd0;
    padding-top: 13px;
    padding-bottom: 12px;
    background: #0D8284;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 10px;
    padding-left: 12px;
    padding-right: 12px;
}

.nav-tabs>li {
    float: left;
    flex: 1 1 auto;
    margin: 4px;
}
.tab-content {
    display: block;
    background: #fff;
    padding: 12px;
    border-radius: 3px;
}

.d-warning{
    text-align: center;
    background: #5CB85C;
    color: #fff;
    padding: 10px;
    margin-bottom: 12px;
    margin-top: 12px;
    border-radius: 10px;
}


.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 6px 25px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #000000;
    background-color: white;
    background-image: none;
    border: 1px solid white;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

.modal-button {
	background: #321447;
    border: unset;
    color: #fff;
    box-shadow: 1px 2px 5px 1px #3d1a6b;
    width: 100%;
    height: 40px;
    font-size: 16px;
}

.bhoechie-tab-menu.nav-tabs {
    border-bottom: 1px solid #ddd0;
    padding-top: 4px;
    padding-bottom: 12px;
    background: #383535;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 10px;
    padding-left: 12px;
    padding-right: 12px;
}
.bhoechie-tab-menu .btn-primary {
    color: #fff;
    background-color: #000000;
    border-color: #2e6da400;
}
  .btn-primary.active{
    background-color: #13a551;
    color: #ffffff;
}
.tile{
    background: #fff;
    padding: 10px;
    color: #000;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    margin-left: 15px;
    color: #fff;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #0D8284;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 600;
    line-height: 1.42857143;
    color: #ffffff;
    white-space: nowrap;
}

.profilepage{
    margin-bottom: 12px;
    margin-top: 12px;
    border-radius: 10px;
   padding: 8px
}

.ul-my {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
        margin: 0px;
    padding: 0px;
}

.ul-my li{
    flex: 1 1 auto;
    float: left;
    flex: 1 1 auto;
    margin: 4px;
}

.ul-my li {
    background: #000;
    
    padding: 6px;
    margin: 4px;
    text-align: center;
}
.placebetbutton{
    background: #0D8284;
    border: unset;
    padding: 2px 6px;
    color: #fff;
    border-radius: 3px;
    margin: 2px;
}
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #cb0303;
    border-radius: 10px;
}
.m-text{

    margin-left: 8px;
  }
  .ul{
    padding: 16px;
    list-style: none;
  }
  .ul li{
    padding: 10px;
  }

  .ul li a{
    color: #fff;
    font-weight: 700
  }

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
.ul li a.li-active{
    color: var(--main);
    font-weight: 700;
}