*{outline:none;}
body{font-family:'Poppins', sans-serif !important; background:url("../images/bg.png") no-repeat center bottom fixed #000; background-size: cover; color: #fff;}
a{text-decoration:none; transition:300ms}
a:hover{text-decoration:underline;}
 .btn-primary{color: #fff}


input, select, textarea{box-shadow:none !important; color: #fff !important}
.form-control::placeholder{color:rgba(255,255,255,0.5)}

.fs-12{font-size:12px !important;}
.fs-14{font-size:14px !important ;}

.bootstrap-select > .dropdown-toggle{background:transparent !important; color: #fff !important; border-color:rgba(237,31,39,0.1)}
.bootstrap-select .dropdown-menu{background:rgba(237,31,39,0.8); border:unset; border-radius: 0 0 4px 4px; margin-top:-2px !important; padding:5px; backdrop-filter: blur(10px);}
.bootstrap-select .dropdown-menu.inner{background:unset !important; backdrop-filter:unset }

.bootstrap-select a{color: #fff !important; border-radius: 50px;}
.bootstrap-select li a:hover{background:rgba(237,31,39,0.1);}

.shadow-sm{box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.075) !important;}
.alert{backdrop-filter:blur(10px);}

.box{display:none;}

.btn-circle{width:40px; line-height: 40px; text-align: center; border-radius: 50%; display: inline-block}
.btn-circle:hover{--bs-bg-opacity: 0.2;}

.card{border-radius:30px; border: 1px solid rgba(255,255,255,0.1)}

.modal .modal-content {background:url("../images/red-top-bg.png") center top no-repeat; background-size:100% auto;border-radius:30px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);}

.form-control{background:rgba(237,31,39,0.1) !important; border-color:rgba(237,31,39,0.2) !important; }

.apexcharts-tooltip{color:#000;}
.table > :not(caption) > * > *{background: unset; color: #fff}

.white{filter: brightness(0) invert(1);}


#loginBg{background:url(../images/login-bg-dark.jpg) center fixed no-repeat; background-size: cover}
#loginBg .card{background: url("../images/login-card.jpg") center top no-repeat; background-size: cover !important; }
#loginBg #dark-ligh-btn{position: fixed; top: 30px; right: 30px; z-index: 5; background: rgba(237,31,39,0.8); color: #fff; line-height: 40px; border-radius: 40px; display: block; padding: 0; width: 40px; text-align: center;}

#header input{background:transparent !important; }
.tabNav{border: 1px solid rgba(255,255,255,0.1); border-radius: 50px; overflow: hidden;}
.tabNav a{padding: 10px 15px; display: block; color: #fff}
.tabNav a.active{background: rgba(var(--bs-primary-rgb)); color: #fff !important; border-radius: 50px; }

#navbarNav{background:url("../images/side-bg.png") no-repeat rgba(237,31,39,0.1) !important; background-size: 100% !important;}
#navbarNav .nav.flex-column li a{display:block; padding:16px 26px; border-radius:30px;}
#navbarNav .nav.flex-column li a.active{background:url("../images/left-menu-hover.png") right top no-repeat rgba(var(--bs-primary-rgb)) !important; background-blend-mode: screen;}
#navbarNav .nav.flex-column li a:hover{background:rgba(237,31,39,0.1);}
#navbarNav .nav.flex-column li a.dropdown-toggle.show{border-radius:30px 30px 0 0; background:rgba(237,31,39,0.1); transition:unset}
#navbarNav .nav .dropdown-menu{position: unset !important; transform: unset !important; background:rgba(237,31,39,0.1); border-radius:0 0 30px 30px; border:unset; padding:0 15px 15px 15px;}
#navbarNav .nav .dropdown-menu .dropdown-item{padding:0.5rem 15px; color: #fff; font-size: 14px; }


#topmenu .nav-link,
#topmenu .dropdown-toggle{background:rgba(237,31,39,0.1); color: #fff; line-height:40px; border-radius:40px; display:block; position:relative;
    padding:0; width: 40px; text-align: center;}
#topmenu .dropdown-toggle::after{content:unset;}
#topmenu .nav-link span,
#topmenu .dropdown-toggle span{background:rgba(var(--bs-primary-rgb)) !important; color:#fff; font-size:11px; font-weight:normal; width:20px; border-radius:20px; line-height:20px; text-align:center; position:absolute; right:-5px; top:-5px;}

#topmenu .dropdown-toggle.show{border-radius:30px 30px 0 0 !important; transition:unset}
#topmenu .dropdown-menu{background:rgba(237,31,39,0.1); border-radius:30px 0 30px 30px; border:unset; margin-top:-2px !important; padding:15px; backdrop-filter: blur(10px);}
#topmenu .dropdown-menu .flex-column li{border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom:10px; margin-bottom:10px;}
#topmenu .dropdown-menu .flex-column li:last-child{border-bottom:unset; padding-bottom:unset; margin-bottom:unset;}


.navbar-toggler .icon-bar{background-color:#fff; transform:rotate(0deg) translate(0px, 0px); transition:300ms;}
.navbar-toggler .icon-bar{display:block; width:22px; height:2px; border-radius:1px;}
.navbar-toggler .icon-bar+.icon-bar{margin-top:4px;}
.navbar-toggler .icon-bar:nth-child(2){width:16px; transition:300ms;}
.navbar-toggler:hover>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:active>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1){transform:rotate(45deg) translate(5px, 4px); transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2){opacity:0; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3){transform:rotate(-45deg) translate(4px, -4px); transition:300ms;}


#walletBonus{background:url("../images/black-top-bg.png") center top no-repeat; background-size:100% auto; }
#ibBonus{background:url("../images/red-top-bg.png") center top no-repeat; background-size:100% auto;  }
#temProfit{background:url("../images/blue-top-bg.png") center top no-repeat; background-size:100% auto; }
#ibcommission{background:url("../images/white-top-bg.png") center top no-repeat; background-size:100% auto;  }
#sales{background:url("../images/green-top-bg.png") center top no-repeat; background-size:100% auto;  }

#ibTeam .card-body .d-flex{}
#ibTeam .card-body .d-flex{margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1)}
#ibTeam .card-body .d-flex:last-child{margin-bottom:0; padding-bottom:0; border-bottom:unset}

#mt-5{background:url("../images/bg-red.jpg") center bottom no-repeat; background-size:cover; background-blend-mode: screen; }


.profile-pic{color:transparent; transition:300ms;}
.profile-pic img{position:absolute; object-fit:cover; width:120px; height:120px; box-shadow:0 0 10px 0 rgba(23, 23, 23, 0.35); border-radius:100px; z-index:0;}
.profile-pic .-label{cursor:pointer; height:120px; width:120px;}
.profile-pic:hover .-label{display:flex; justify-content:center; align-items:center; background-color:rgba(0, 0, 0, 0.8); z-index:10000; color:#fff; transition:300ms; border-radius:100px; margin-bottom:0; font-size: 12px}
.profile-pic span{display:inline-flex; padding:0.2em; height:2em;}



.li-border li{position:relative; }
.li-border li:before{content:''; position:absolute; left: 0; right: 0; top:calc(50% - 1px); height:1px; background:#dee2e6; z-index:1}
.li-border li span{position: relative; z-index:2}

.nav-pills .nav-link{background:var(--bs-light);}


.file-drop-area{position:relative; background: rgba(237, 31, 39, 0.1); display:flex; flex-direction:column; align-items:center; padding:30px 10px; transition:300ms; height: 170px; justify-content: center; border: 1px solid rgba(237, 31, 39, 0.5);}
.file-msg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.file-input{position:absolute; left:0; top:0; height:100%; width:100%; cursor:pointer; opacity:0;}





body.light-mode{background: #fff; color: #000}
body.light-mode#loginBg{background:url(../images/login-bg-light.jpg) center fixed no-repeat !important; background-size: cover !important}
body.light-mode#loginBg .card{background: url("../images/login-card-light.png") center bottom no-repeat rgba(255,255,255,0.8) !important; background-size: 100% auto !important; }
body.light-mode#loginBg #dark-ligh-btn{color: #000;}
body.light-mode .white{filter: unset}
body.light-mode #navbarNav{background:unset !important;}
body.light-mode #navbarNav.border-black{border-color: rgba(0,0,0,0.1) !important}
body.light-mode #navbarNav .card a, body.light-mode #navbarNav .card p{color: #000 !important}
body.light-mode #navbarNav .nav li a{color: #000 !important}
body.light-mode #navbarNav .nav li a.active{color: #fff !important}

body.light-mode input, body.light-mode select, body.light-mode textarea{color: #000 !important}

body.light-mode .bootstrap-select > .dropdown-toggle{color: #000 !important;}
body.light-mode .bootstrap-select a{color: #000 !important;}


body.light-mode .modal .modal-content.text-white,
body.light-mode .modal .modal-content a.text-white{color: #000 !important}
body.light-mode .modal .btn-close-white{--bs-btn-close-filter:unset}
body.light-mode .modal .modal-content {background:url("../images/red-top-bg-light.png") center top repeat-x #fff !important; background-size:100% auto;border-radius:30px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);}


body.light-mode .form-control::placeholder{color:rgba(0,0,0,0.5)}
body.light-mode #header{background:unset !important}
body.light-mode #header a{color: #000}
body.light-mode #header .input-group{background:unset !important; border:1px solid rgba(0,0,0,0.1);}
body.light-mode #header .btn{color: #000 !important}

body.light-mode #topmenu .dropdown-menu .flex-column li{border-color:rgba(0,0,0,0.1);}
body.light-mode #topmenu .dropdown-menu .flex-column li a{color: #000 !important;}
body.light-mode #topmenu .dropdown-menu .flex-column li{color: #000 !important;}

body.light-mode .navbar-toggler .icon-bar{background-color:#000;}

body.light-mode .card{ border-color: rgba(0,0,0,0.1) !important;}
body.light-mode .card.text-white{color: #000 !important;}

body.light-mode .tabNav{border:1px solid rgba(0,0,0,0.1);}
body.light-mode .tabNav a{color: #000}

body.light-mode .table > :not(caption) > * > *{color: #000}

body.light-mode #ibTeam .card-body .d-flex {border-color:rgba(0,0,0,0.1) ;}

body.light-mode #walletBonus{background:url("../images/black-top-bg-light.png") center top no-repeat; background-size:100% auto; }
body.light-mode #ibBonus{background:url("../images/red-top-bg-light.png") center top no-repeat; background-size:100% auto;  }
body.light-mode #temProfit{background:url("../images/blue-top-bg-light.png") center top no-repeat; background-size:100% auto; }
body.light-mode #ibcommission{background:url("../images/white-top-bg-light.png") center top no-repeat; background-size:100% auto;  }
body.light-mode #sales{background:url("../images/green-top-bg-light.png") center top no-repeat; background-size:100% auto;  }
body.light-mode #mt-5{background:url("../images/bg-red-light.jpg") center bottom no-repeat; background-size:cover;  }

@media (max-width:1400px){
    #navbarNav{backdrop-filter: blur(10px);}
}
@media (min-width:1200px) and (max-width:1399px){}
@media (min-width:992px) and (max-width:1199px){}
@media (min-width:768px) and (max-width:991px){}
@media (min-width:576px) and (max-width:767px){}

@media (min-width:0px) and (max-height:765px){#signup{height:unset !important}}
@media (min-width:0px) and (max-height:515px){#login{height:unset !important}}



/* CUSTOM ADDED FOR COLLAPSE DATATABLE ON RESPONSIVE SCREENS */
/* BASE (DARK DEFAULT) */
.dt-child-wrapper {
  width: 100%;
}

.dt-row {
  display: flex;
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
}

.dt-label,
.dt-value {
  flex: 0 0 50%;
  font-weight: bold;
  color: #fff;
}

.dt-value {
  flex: 0 0 50%;
  font-weight: normal;
}

/* =========================
  LIGHT MODE OVERRIDES
========================= */

body.light-mode .dt-row {
  border-bottom: 1px solid #eee;
}

body.light-mode .dt-label,
body.light-mode .dt-value {
  color: #000;
}


/* FORCE REMOVE DEFAULT ICON */
table.dataTable td.dtr-control:before {
  content: "\f282" !important;
  font-family: "bootstrap-icons" !important;
  font-weight: bolder !important;
  color: #fff !important;
}

/* OPEN STATE */
table.dataTable tr.parent td.dtr-control:before {
  content: "\f286" !important;
}

/* LIGHT MODE */
body.light-mode table.dataTable td.dtr-control:before {
  color: #000 !important;
}


@media (max-width: 576px) {
  .status_badge {
    font-size: 12px;
  }
}




/* DARK MODE DEFAULT */

.packageAccounts .dropdown button {
    color: #ffffff !important;
}

/* Dropdown box */
.packageAccounts .dropdown-menu {
    background: rgba(237,31,39,0.7) !important; /* opacity 0.7 */
    border-radius: 30px !important;
    border: unset !important;
    padding: 10px 15px 15px 15px;
    backdrop-filter: blur(6px);
    overflow: hidden;
    transform: translate(0px, 25px) !important; /* move upward */
}

/* Active/open dropdown */
.packageAccounts .dropdown-toggle.show {
    border-radius: 30px !important;
    background: rgba(237,31,39,0.1) !important;
    transition: unset;
}

/* Links */
.packageAccounts .dropdown-menu .dropdown-item {
    padding: 0.7rem 15px;
    color: #fff !important;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    transition: 0.2s ease;
}

/* Remove default underline */
.packageAccounts .dropdown-menu .dropdown-item,
.packageAccounts .dropdown-menu .dropdown-item:hover {
    text-decoration: none !important;
}

/* Hover pill effect */
.packageAccounts .dropdown-menu .dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff !important;
}

/* LIGHT MODE */
body.light-mode .packageAccounts .dropdown button {
    color: #000 !important;
}

body.light-mode .packageAccounts .dropdown-menu {
    background: rgba(237,31,39,0.5) !important;
}

body.light-mode .packageAccounts .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    /* border-bottom: 1px solid rgba(0,0,0,0.08); */
    border-radius: 30px;
}

body.light-mode .packageAccounts .dropdown-menu .dropdown-item:hover, body.light-mode .packageAccounts .dropdown-menu .dropdown-item:focus {
    background: rgba(206, 86, 90, 0.329) !important;
    color: #000 !important;
}