@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

a { text-decoration: none; all: unset; cursor: pointer;}
a{text-decoration: none;}
a:focus {outline: none;}
*:focus {outline: none;}
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important;}
img { display: inline-block; height: auto; max-width: 100%;}
body { overflow-x: hidden !important; color: #EAEAF7; background: #191919; font-family: "Poppins", sans-serif;}
button {border: none;}
p, h1, h2, h3, h4, h5, h6 {margin-bottom: 0 !important;}

/* ================ light dark theme ================ */

/* LIGHT THEME */

body.light-mode, .light-mode .sidebar, .light-mode .header{background:#c5c4c4; color: black;} 
.light-mode .dashcard-box, .light-mode .rewards-datefilter .date-input, .light-mode .modal-content{background:#a2a2a2; color:#000000;}
.light-mode .navbar-nav .nav-link, .light-mode .inbox-mainbox p, .light-mode .dash-profiletext p, .light-mode .reward-totalbonus p{color:#000;}
.light-mode .rewards-datefilter label, .light-mode .rewards-datefilter small{color: #4a3030;}
.light-mode .withdraw-subbtn, .light-mode .addbank-detailbtn, .light-mode .tab-btn.active, .light-mode .date-input, .light-mode .inbox-item.active, .light-mode .withinfo-box {background: #757575;}
.light-mode .withdraw-input , .light-mode .select-wrapper select{background: #8b8b8b;}

/* ================ custom ================ */

.navbar-nav .nav-link, .inbox-mainbox p, .dash-profiletext p, .inbox-item h6, .reward-totalbonus p, .reward-activityround, .rewardacti-viewlink, .withdraw-subbtn{font-family: "Poppins", sans-serif; font-size: 20px; color: #FFFFFF; font-weight: 500;}
.dashcard-box p, .referral-btn, .otp-btn, .withinfo-box p, .withdraw-input, .withdraw-input::placeholder, .select-wrapper select{font-weight: 300; font-size: 20px; font-family: "Poppins", sans-serif; color: #FFFFFF;}

/* ================ login ================ */

.login-container{background: #484848; width: 29%; height: auto; border: 1px solid #CC171D; margin: 70px auto; padding: 40px 30px 30px 30px; border-radius: 20px;}
.logininput{background: #FFFFFF; box-shadow: 1px 4px 6px 0px #0000005A; border: none; padding: 15px;}
.logininput, .logininput::placeholder{font-family: "Poppins", sans-serif; font-weight: 400; font-size: 20px; color: #484848;}
.forgetpass-link{font-family: "Poppins", sans-serif; font-weight: 400; font-size: 16px; color: #FFFFFF; text-decoration: underline;}
.loginbtn-design{background: #CC171D; padding: 20px;}
.register-link a, .loginbtn-design{font-family: "Poppins", sans-serif; font-weight: 400; font-size: 22px; color: #FFFFFF;}

/* ================ register ================ */

.recaptcha-box{ background:#FAFAFA; border-radius:3px; padding: 8px 15px; cursor:pointer;}
.recaptcha-left{ display:flex; align-items:center; gap:12px; font-size:16px; color:#484848; font-weight: 500; font-family: "Poppins", sans-serif;}
#robotCheck{ display:none;}
.custom-check{ width:26px; height:26px; border:2px solid #C1C1C1; background:white; position:relative;}
.custom-check::after{ content:"✔"; color:#00A860; font-size:25px; position:absolute; left:2px; top: -7px; opacity:0; transition:0.2s;}
#robotCheck:checked + .custom-check::after{opacity:1;}
.recaptcha-right p{ color:#A6A6A6; font-family: "Poppins", sans-serif; font-size: 7px;}
.recaptcha-logo{ width: 48px; height: 46px;}

.terms-check{font-family: "Poppins", sans-serif; font-size: 16px; display:flex; align-items:center; gap:8px; color: #FFFFFF; cursor:pointer; font-weight: 300;}
.terms-check input{display:none;}
.custom-box{ width:24px; height:24px; border:1px solid #FFFFFF; display:flex; align-items:center; justify-content:center; background:transparent;}
.custom-box::after{ content:""; width:12px; height:12px; background:white;opacity:0;}
.terms-check input:checked + .custom-box::after{opacity:1;}

/* ================ sidebar header ================ */

.header{ background:#363636; box-shadow: 2px 4px 12px 0px #0000005A; padding: 20px 30px; border: 1px solid #484848;}
.offcanvas-lg.show, .offcanvas-start.show, .offcanvas-lg.offcanvas-start{width: 300px; background:#707070;}
.sidebar{ width:300px; height:100vh; background:#363636; padding: 60px 30px; box-shadow: 2px 4px 12px 0px #0000005A; position:fixed; left:0; top:0;}
.navbar-nav .nav-link.active{color: #CC171D;}

.inbox-roundbtn{width: 40px; height: 40px; background: #484848; box-shadow: 1px 2px 3px 0px #0000005A; border-radius: 50%; display:flex; justify-content:center; align-items:center;}

/* ================ dashboard ================ */

.dash-container{ margin:40px 40px 100px 330px;}
.dashpro-roundbox{background: #707070; width: 100px; height: 100px; border-radius: 50%; color: #FFFFFF; font-family: "Poppins", sans-serif; font-size: 48px; font-weight: 500; display: flex; justify-content: center; align-items: center; overflow:hidden;}
.dashpro-roundbox img{ width:100%; height:100%; object-fit:cover;}


.dashcard-box{background: #363636; box-shadow: 1px 2px 3px 0px #0000005A; padding: 30px 20px;}
.dashcard-box.active{background: #620003;}

.dashcard-box h6{font-weight: 500; font-size: 42px; font-family: "Poppins", sans-serif; color: #FFFFFF;}
.dashcard-box h5{font-weight: 500; font-size: 36px; font-family: "Poppins", sans-serif; color: #FFFFFF;}
.referral-inputbox{background: #484848; width: 480px; border: none; padding: 7px 10px;}
.referral-inputbox, .referral-inputbox::placeholder, .withdraw-label{font-weight: 300; font-size: 16px; font-family: "Poppins", sans-serif; color: #FFFFFF;}
.referral-btn{box-shadow: 1px 2px 3px 0px #0000005A; background: #620003; border-radius: 5px; padding: 5px 10px;}

/*----------- inbox modal ---------------*/
.modal-content { background:#707070; color:#FFFFFF; border-radius:10px; box-shadow: 1px 3px 4px 0px #0000005A;}
.modal-header h5, .reward-activitybox p{font-size:24px; font-weight: 500; font-family: "Poppins", sans-serif; color: #FFFFFF;}

.date-filter label, .date-filter small{font-size:16px; font-weight: 700; font-family: "Poppins", sans-serif;}
.date-input{ background:#484848; padding: 8px 10px; display:flex; align-items:center; justify-content:space-between;}
.date-input input{ background:transparent; border:none; color:white; outline:none;}
.date-input input[type="date"]{ text-transform:uppercase; position: relative; font-size:13px; font-weight: 700; font-family: "Poppins", sans-serif; font-style: bold;}
.date-input input[type="date"]::-webkit-calendar-picker-indicator{ width: 26px; height: 26px; cursor: pointer; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);}
.dateinput-timetext1{margin-left: 48px;}
.dateinput-timetext2{margin-left: 30px;}

.inbox-item{ background:#BABABA; color: #000000; padding: 9px 30px; border-bottom:2px solid rgb(72, 72, 72);}
.inbox-item p{font-size:13px; font-weight: 300; font-family: "Poppins", sans-serif;}
.inbox-item h6{color: black;}
.inbox-item.active{background: #484848; color: #FFFFFF;}
.inbox-item.active h6{color: #FFFFFF;}
.pagination span{font-size:16px; font-weight: 700; font-family: "Poppins", sans-serif; font-style:bold;}

/*----------- language modal ---------------*/
.lang-list{ display:flex; justify-content:center; gap:30px;}
.lang-list a{ text-decoration:none; color:black;}
.lang-list img{ width:60px; height:60px; border-radius:50%; object-fit:cover; cursor:pointer; transition:0.3s;}
.lang-list img:hover{transform:scale(1.1);}
.lang-list p{ margin-top:8px; font-weight:600;}

/* ================ rewards ================ */

.rewards-datefilter label, .rewards-datefilter small{font-size:16px; font-weight: 700; font-family: "Poppins", sans-serif; font-style: bold;}
.rewards-datefilter .date-input{ background:#363636; padding: 8px 10px; display:flex; align-items:center; justify-content:space-between;}
.rewards-datefilter .date-input input{width: 360px;}

.reward-activityround{background: #BABABA; width: 80px; height: 80px; border-radius: 50%; color: #620003; display: flex; justify-content: center; align-items: center;}
.activity-content{ flex:1; align-items:center;}
.reward-activitybox h6{font-size:32px; font-weight: 500; font-family: "Poppins", sans-serif;}
.reward-activitybox small{font-size:16px; font-weight: normal; font-family: "Poppins", sans-serif;}

/* ================ rewards ================ */

.walllink-purchasepack a{font-size:20px; font-weight: 500; font-family: "Poppins", sans-serif;}

/*------ purchase modal ------*/

#purchaseModal.show .modal-dialog {max-width: 1690px;}

#purchaseModal .modal-content{background: #484848;}
.purchase-contentbox{padding: 50px 30px; background: #707070; box-shadow: 1px 3px 8px 0px #0000005A; border-radius: 20px; width: 400px; flex-shrink:0;}
.purchase-contentbox button{border: 2px solid #FFDA2B; background: linear-gradient(90deg, #FFDA2B -20.3%, #535353 120.3%); border-radius: 10px; font-size:20px; font-weight: 500; font-family: "Poppins", sans-serif; text-decoration: underline; padding: 12px 30px;}
.purchase-contentbox h6{font-size:24px; font-weight: 500; font-family: "Poppins", sans-serif;}
.purchase-contentbox h5{font-size:32px; font-weight: 500; font-family: "Poppins", sans-serif;}
.purchase-contentbox p, .placement-btn{font-size:20px; font-weight: 300; font-family: "Poppins", sans-serif;}
.purchase-contentbox span{font-size:20px; font-weight: 500; font-family: "Poppins", sans-serif;}

.purchase-input{background: #FFFFFF; box-shadow: 1px 3px 8px 0px #0000005A; border: none; width: 100%; padding: 18px 25px;}
.purchase-input, .purchase-input::placeholder{font-size:20px; font-weight: 300; font-family: "Poppins", sans-serif; color: #000000;}
.placement-btn{background: #707070; border: 1px solid #620003;}


/*------ withdraw modal ------*/
.withinfo-box{ background:#484848; padding:15px 30px;}
.withinfo-box h6{font-size:42px; font-weight: normal; font-family: "Poppins", sans-serif;}

.withdraw-input{ width:100%; padding:15px 30px; margin-top:10px; border:none; outline:none; background:#ACACAC; box-shadow: inset 0px 4px 8px 0px #0000008C;}
.withdraw-input, .withdraw-input::placeholder{color: #1A1A1A;}
#withdrawModal .withdraw-label{margin: 10px 0px;}
.select-wrapper{position:relative;}

.select-wrapper select{width:100%; outline:none; background:#ACACAC; box-shadow: inset 0px 4px 8px 0px #0000008C; padding:15px 30px; border:none; appearance:none; color: #1A1A1A;}
.select-wrapper::after{ border-left:10px solid transparent; border-right:10px solid transparent; border-top:15px solid #000; content:""; position:absolute; right:21px; top:50%; transform:translateY(-50%);}
.receive-box{background:#484848; padding:6px 30px; box-shadow: inset 0px 4px 8px 0px #0000008C;}
.receive-box span{font-size:12px; font-weight: 300; font-family: "Poppins", sans-serif; }
.receive-box h5{font-size:22px; font-weight: 600; font-family: "Poppins", sans-serif; }

.otp-box{ position: relative; width: 100%;}
.otp-btn{background: #707070; position:absolute; right:15px; top:58%; transform:translateY(-50%); padding:3px 28px; border:1px solid #620003; color:#FFFFFF; cursor:pointer; box-shadow: 1px 3px 4px 0px #0000005A;}
.withdraw-subbtn{ width:100%; padding:15px; background:#484848; border:1px solid #620003; color:#fff; font-weight:500; box-shadow: 1px 3px 4px 0px #0000005A;}

/*------ transfer modal ------*/

.tabs{ display:flex; margin:10px 0;}
.tab-btn{ flex:1; padding:15px; border:none; background:transparent; color:#fff; font-size:24px; cursor:pointer; font-weight: 300; font-family: "Poppins", sans-serif;}
.tab-btn.active{background:#484848; text-decoration: underline;}
.tab-content{ display:none;}
.tab-content.active{display:block;}

/* ================ profile ================ */

.dashcard-box h4{font-size:24px; font-weight: 500; font-family: "Poppins", sans-serif; color:#fff;}
.profile-notverify{font-size:20px; font-weight: 300; font-family: "Poppins", sans-serif; color: #CC171D;}

/*----- addbank-detailbtn ------*/

.addbank-detailbtn{background: #BABABA;}
.addbank-detailbtn p{ font-size:20px; font-weight: 300; font-family: "Poppins", sans-serif; color: #000000;}
#addBank3Modal .withdraw-subbtn, #bankdetailModal .withdraw-subbtn{margin-top: 400px;}



/*================ responsive css style ===================*/

@media only screen and (min-width: 250px) and (max-width: 320px) {


}

@media only screen and (min-width: 320px) and (max-width: 767px) {

  .referral-inputbox, .referral-inputbox::placeholder, .withdraw-label, .inbox-item p, .reward-activityround, .reward-activitybox small, .receive-box span, .profile-notverify {font-size: 9px;}
  .date-filter label, .date-filter small, .pagination span, .reward-totalbonus p, .logininput, .logininput::placeholder, .terms-check{font-size: 12px;}
  .forgetpass-link, .rewardacti-viewlink, .dashcard-box h4{font-size: 10px;}
  .register-link a, .loginbtn-design, .dash-profiletext p, .walllink-purchasepack a, .receive-box h5{ font-size: 16px;}
  .withdraw-input::placeholder, .select-wrapper select, .otp-btn, .withdraw-subbtn, .withdraw-input, .placement-btn, .purchase-input, .purchase-input::placeholder{font-size: 15px;}

  .mobile-logo{width: 165px; height: 36px; display: block !important;}
  .sidebar-menubtn{display: block !important;}
  .sidebar-logo{display: none;}
  .inbox-roundbtn{background: none; box-shadow: none;}
  .inbox-mainbox p{display: none;}
  .inbox-mainbox{margin: 0px !important;}
  .dash-container { margin: 30px 20px 100px 20px;}
  .header {padding: 15px 20px;}

  .login-container { width: 89%; margin: 70px 25px; padding: 30px 20px 20px 20px;}
  .login-logo{width: 270px;}
  .login-container form{margin-top: 25px !important;}
  .logininput {padding: 13px; margin: 5px 0px !important;}

  .loginbtn-design {font-size: 16px; padding: 15px; margin-top: 20px !important;}
  .register-link{padding: 18px 0px !important;}

  .dashpro-roundbox { width: 80px; height: 80px; font-size: 48px;}
.dash-profiletext img{width: 30px; height: 30px;}
.dashcard-box {padding: 15px 9px;}
.dashcard-box p{font-size: 11px;}
.dashcard-box h6{font-size: 20px;}
.dash-container .col-md-3 {padding-top: 17px !important; padding-right: 8px !important;padding-left: 8px !important;}
.dashcard-box h5 {font-size: 20px; padding-bottom: 10px;}
.referral-inputbox {width: 226px;}

.referral-btn {font-size: 9px; padding: 6px 10px;}
.referral-linkimg{width: 26px; height: 26px;}
.sidebar { padding: 30px 30px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-dialog{margin: 20px;}
.modal-header h5{font-size: 17px;}
.date-input input[type="date"], .rewards-datefilter label, .rewards-datefilter small{ font-size: 10px; font-weight: 600;}
.date-input input[type="date"]::-webkit-calendar-picker-indicator{ width: 19px; height: 19px;}
.date-input {padding: 5px 5px !important;}
.date-filter{padding: 0px !important;}
.inbox-item h6{font-size: 14px;}

.rewards-datefilter .date-input input { width: 99px;}
.reward-activityround { width: 38px; height: 38px;}
.activity-content .d-flex{align-items: end;}
.wallet-container .dashcard-box h5{font-size: 16px; padding-bottom: 0px;}
.wallet-container .dashcard-box img{width: 38px; height: 38px;}
.withinfo-box p, .addbank-detailbtn p{font-size: 14px;}
.withinfo-box h6{font-size: 31px;}
.withdraw-input, .select-wrapper select, .purchase-input{ padding: 11px 30px;}
#withdrawModal .withdraw-label {margin: 5px 0px;}
.withdraw-subbtn{padding: 13px;}
.tab-btn { padding: 11px; font-size: 17px;}
#reportModal .tabs {margin: 0px 0;}

.profile-settimg{width: 11px !important; height: 11px !important;}
.profile-container .dashcard-box h5{font-size: 16px; padding-bottom: 0px;}
.profile-container .dashcard-box img{width: 38px; height: 38px;}
.profile-container .dashcard-box{padding: 13px !important;}
#loginpassModal .withdraw-label, #resetpassModal .withdraw-label{font-size: 11px; line-height: 1.5; display: block;}

.select-wrapper::after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #000;}

#purchaseModal .modal-body{display: block !important; gap: 5px;}
.purchase-contentbox{ padding: 30px 10px; width: 350px; margin-bottom: 20px;}


}

/* 175% */
@media only screen and (min-width: 768px) and (max-width: 991px) {


   .login-container {width: 38%; margin: 50px auto; padding: 40px 20px 30px 20px;}
  .login-logo{width: 200px; height: 50px;}
  .login-container form{margin-top: 20px !important;}
  .logininput{padding: 11px;}
  .logininput, .logininput::placeholder, .register-link a, .loginbtn-design{font-size: 13px;}
  .loginbtn-design {padding: 12px;}
  .register-link{padding: 20px 0px !important;}
  .terms-check {font-size: 9px;}

  .referral-inputbox, .referral-inputbox::placeholder, .withdraw-label, .inbox-item p, .reward-activityround, .reward-activitybox small, .receive-box span, .profile-notverify {font-size: 9px;}
  .date-filter label, .date-filter small, .pagination span, .reward-totalbonus p, .logininput, .logininput::placeholder, .terms-check{font-size: 12px;}
  .forgetpass-link, .rewardacti-viewlink, .dashcard-box h4{font-size: 10px;}
  .register-link a, .loginbtn-design, .dash-profiletext p, .walllink-purchasepack a, .receive-box h5{ font-size: 16px;}
  .withdraw-input::placeholder, .select-wrapper select, .otp-btn, .withdraw-subbtn, .withdraw-input{font-size: 15px;}

  .mobile-logo{width: 165px; height: 36px; display: block !important;}
  .sidebar-menubtn{display: block !important;}
  .sidebar-logo{display: none;}
  .inbox-roundbtn{background: none; box-shadow: none;}
  .inbox-mainbox p{display: none;}
  .inbox-mainbox{margin: 0px !important;}
  .dash-container { margin: 30px 20px 100px 20px;}
  .header {padding: 15px 20px;}

  .dashpro-roundbox { width: 80px; height: 80px; font-size: 48px;}
.dash-profiletext img{width: 30px; height: 30px;}
.dashcard-box {padding: 15px 9px;}
.dashcard-box p{font-size: 11px;}
.dashcard-box h6{font-size: 20px;}
.dash-container .col-md-3 {padding-top: 17px !important; padding-right: 8px !important;padding-left: 8px !important;}
.dashcard-box h5 {font-size: 20px; padding-bottom: 10px;}
.referral-inputbox {width: 226px;}

.referral-btn {font-size: 9px; padding: 6px 10px;}
.referral-linkimg{width: 26px; height: 26px;}
.sidebar { padding: 30px 30px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-dialog{margin: 20px;}
.modal-header h5{font-size: 17px;}
.date-input input[type="date"], .rewards-datefilter label, .rewards-datefilter small{ font-size: 10px; font-weight: 600;}
.date-input input[type="date"]::-webkit-calendar-picker-indicator{ width: 19px; height: 19px;}
.date-input {padding: 5px 5px !important;}
.date-filter{padding: 0px !important;}
.inbox-item h6{font-size: 14px;}

.rewards-datefilter .date-input input { width: 99px;}
.reward-activityround { width: 38px; height: 38px;}
.activity-content .d-flex{align-items: end;}
.wallet-container .dashcard-box h5{font-size: 16px; padding-bottom: 0px;}
.wallet-container .dashcard-box img{width: 38px; height: 38px;}
.withinfo-box p, .addbank-detailbtn p{font-size: 14px;}
.withinfo-box h6{font-size: 31px;}
.withdraw-input, .select-wrapper select { padding: 11px 30px;}
#withdrawModal .withdraw-label {margin: 5px 0px;}
.withdraw-subbtn{padding: 13px;}
.tab-btn { padding: 11px; font-size: 17px;}
#reportModal .tabs {margin: 0px 0;}

.profile-settimg{width: 11px !important; height: 11px !important;}
.profile-container .dashcard-box h5{font-size: 16px; padding-bottom: 0px;}
.profile-container .dashcard-box img{width: 38px; height: 38px;}
.profile-container .dashcard-box{padding: 13px !important;}
#loginpassModal .withdraw-label, #resetpassModal .withdraw-label{font-size: 11px; line-height: 1.5; display: block;}

.select-wrapper::after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #000;}

#purchaseModal .modal-body{display: block !important; gap: 5px;}
.purchase-contentbox{ padding: 30px 10px; width: 350px; margin-bottom: 20px;}
#purchaseModal.show .modal-dialog {max-width: 400px;}

}

/* 150% */
@media only screen and (min-width: 992px) and (max-width: 1039px) 
{

   .login-container {width: 37%; margin: 50px auto; padding: 40px 20px 30px 20px;}
  .login-logo{width: 250px; height: 60px;}
  .login-container form{margin-top: 30px !important;}
  .logininput{padding: 11px;}
  .logininput, .logininput::placeholder, .register-link a, .loginbtn-design{font-size: 15px;}
  .loginbtn-design {padding: 12px;}
  .terms-check {font-size: 12px;}

  .sidebar {width: 185px; padding: 30px 15px;}
  .dash-container {margin: 20px 15px 100px 200px;}
  .dashcard-box h6 {font-size: 20px;}
  .dashcard-box{padding: 13px;}
  .dashcard-box p{font-size: 10px;}
  .referral-inputbox {width: 220px;}
  .dashpro-roundbox {width: 60px; height: 60px; font-size: 25px;}
  .navbar-nav .nav-link, .dash-profiletext p{font-size: 14px;}
  .dash-profiletext img{width: 30px; height: 30px;}
  .nav-link img{width: 35px; height: 35px;}
  .inbox-roundbtn { width: 30px; height: 30px;}
  .inbox-roundbtn img{width: 14px; height: 14px;}
  .header {padding: 13px 30px;}
  .navbar-nav{padding-top: 20px !important;}
  .navbar-nav .nav-link{padding: 5px 0px !important;}
  .dashcard-box h5 {font-size: 25px;}
  .referral-inputbox, .referral-inputbox::placeholder{font-size: 11px;}
  .referral-btn{font-size: 13px;}
  .referral-linkimg{width: 31px; height: 31px;}
  .dash-container .col-md-3 {padding-top: 17px !important;}

  .dashcard-box h5 {font-size: 20px;}
  .reward-activityround {width: 50px; height: 50px;}
  .reward-activityround, .rewardacti-viewlink{font-size: 10px;}
  .rewards-datefilter .date-input input { width: 180px;}
  .rewards-datefilter .date-input {padding: 2px 10px;}
  .rewards-datefilter label, .rewards-datefilter small {font-size: 10px;}
  .reward-activitybox small {font-size: 12px;}
  .dateinput-timetext1 {margin-left: 33px;}
  .date-input input[type="date"] {font-size: 10px;}
.date-input input[type="date"]::-webkit-calendar-picker-indicator{ width: 19px; height: 19px;}
.reward-totalbonus p{font-size: 14px;}

  .wallet-container .dashcard-box img, .profile-container .dashcard-box img{width: 38px; height: 38px;}
  .wallet-container .walllink-purchasepack img{width: 38px; height: 38px;}
.walllink-purchasepack a {font-size: 15px;}
.wallet-container .dashcard-box{gap:5px !important}

.dashcard-box h4 {font-size: 10px;}
  .dashcard-box h5 {font-size: 20px;}
  .profile-container .dashcard-box {padding: 13px 5px!important;}
  .profile-settimg{width: 20px !important; height: 20px !important;}
  .profile-notverify {font-size: 13px;}

    #purchaseModal.show .modal-dialog {max-width: 980px;}
  .purchase-contentbox { padding: 30px 10px; width: 225px;}
  .purchase-contentbox h6{font-size:13px;}
  .purchase-contentbox span{font-size:11px;}
  .purchase-contentbox p {font-size: 13px;}
  .purchase-contentbox button { font-size: 15px; padding: 8px 20px;}

}

/* 125% */
@media only screen and (min-width: 1040px) and (max-width: 1279px) {

  .login-container {width: 36%;}
  .login-logo{width: 300px; height: 65px;}
  .logininput {padding: 13px;}
  .logininput, .logininput::placeholder{font-size: 17px;}
  .loginbtn-design {padding: 15px;}
  .terms-check {font-size: 14px;}

    .sidebar {width: 215px; padding: 40px 15px;}
  .dash-container {margin: 20px 15px 100px 230px;}
  .dashcard-box h6 {font-size: 22px;}
  .dashcard-box{padding: 15px;}
  .dashcard-box p{font-size: 12px;}
  .referral-inputbox {width: 250px;}
  .dashpro-roundbox {width: 70px; height: 70px; font-size: 33px;}
  .navbar-nav .nav-link, .dash-profiletext p{font-size: 16px;}
  .dash-profiletext img{width: 35px; height: 35px;}
  .nav-link img{width: 40px; height: 40px;}
  .inbox-roundbtn { width: 35px; height: 35px;}
  .inbox-roundbtn img{width: 18px; height: 18px;}
  .header {padding: 15px 30px;}
  .navbar-nav{padding-top: 20px !important;}
  .navbar-nav .nav-link{padding: 5px 0px !important;}
  .dashcard-box h5 {font-size: 30px;}
  .referral-inputbox, .referral-inputbox::placeholder{font-size: 13px;}
  .referral-btn, .reward-totalbonus p{font-size: 15px;}
  .referral-linkimg{width: 38px; height: 38px;}

  .dashcard-box h5 {font-size: 24px;}
  .reward-activityround {width: 65px; height: 65px;}
  .reward-activityround, .rewardacti-viewlink{font-size: 13px;}
  .rewards-datefilter .date-input input { width: 250px;}
  .rewards-datefilter .date-input {padding: 2px 10px;}
  .rewards-datefilter label, .rewards-datefilter small {font-size: 13px;}
  .reward-activitybox small {font-size: 12px;}

  .wallet-container .dashcard-box img, .profile-container .dashcard-box img{width: 38px; height: 38px;}
  .wallet-container .walllink-purchasepack img{width: 38px; height: 38px;}
  .walllink-purchasepack a {font-size: 15px;}
.wallet-container .dashcard-box{gap:5px !important}

.dashcard-box h4 {font-size: 13px;}
  .dashcard-box h5 {font-size: 25px;}
  .profile-container .dashcard-box {padding: 13px 10px!important;}
  .profile-notverify {font-size: 13px;}
  .profile-settimg{width: 20px !important; height: 20px !important;}

  #purchaseModal.show .modal-dialog {max-width: 1180px;}
  .purchase-contentbox { padding: 30px 15px; width: 274px;}
  .purchase-contentbox h6{font-size:15px;}
  .purchase-contentbox span{font-size:13px;}
  .purchase-contentbox p {font-size: 15px;}

}

/* 110% */
@media only screen and (min-width: 1280px) and (max-width: 1499px) {

  .login-container {width: 35%;}
  .login-logo{width: 320px;}
  .logininput {padding: 13px;}
  .logininput, .logininput::placeholder{font-size: 17px;}
  .loginbtn-design {padding: 15px;}

  .sidebar {width: 240px; padding: 40px 20px;}
  .dash-container {margin: 20px 15px 100px 260px;}
  .dashcard-box h6 {font-size: 30px;}
  .dashcard-box{padding: 15px;}
  .dashcard-box p{font-size: 14px;}
  .referral-inputbox {width: 320px;}
  .dashpro-roundbox {width: 80px; height: 80px; font-size: 35px;}
  .navbar-nav .nav-link, .dash-profiletext p{font-size: 16px;}
  .dash-profiletext img{width: 40px; height: 40px;}
  .header {padding: 15px 30px;}
  .navbar-nav{padding-top: 20px !important;}
  .navbar-nav .nav-link{padding: 5px 0px !important;}
  .dashcard-box h5 {font-size: 30px;}

  .dashcard-box h5 {font-size: 28px;}
  .reward-activityround {width: 70px; height: 70px;}
  .reward-activityround{font-size: 16px;}
  .rewards-datefilter .date-input input { width: 300px;}
  .rewards-datefilter .date-input {padding: 4px 10px;}
  .rewards-datefilter label, .rewards-datefilter small {font-size: 14px;}

  .dashcard-box h4 {font-size: 15px;}
  .dashcard-box h5 {font-size: 28px;}
  .profile-container .dashcard-box {padding: 17px !important;}
  .profile-notverify {font-size: 13px;}

  #purchaseModal.show .modal-dialog {max-width: 1320px;}
  .purchase-contentbox { padding: 30px 15px; width: 310px;}
  .purchase-contentbox h6{font-size:18px;}
  .purchase-contentbox span{font-size:15px;}
  .purchase-contentbox p {font-size: 18px;}

}

/* 100% */
@media only screen and (min-width: 1500px) and (max-width: 1549px) {

  .login-container {width: 35%;}
  .sidebar {width: 265px; padding: 40px 30px;}
  .dash-container {margin: 40px 15px 100px 290px;}
  .dashcard-box h6 {font-size: 30px;}
  .dashcard-box{padding: 15px;}
  .dashcard-box p{font-size: 16px;}
  .referral-inputbox {width: 380px;}
  .dashpro-roundbox {width: 80px; height: 80px; font-size: 38px;}
  .navbar-nav .nav-link, .dash-profiletext p{font-size: 18px;}
  .dash-profiletext img{width: 40px; height: 40px;}

  .dashcard-box h5 {font-size: 32px;}
  .reward-activityround {width: 75px; height: 75px;}
  .reward-activityround{font-size: 18px;}

  .dashcard-box h4 {font-size: 16px;}
.dashcard-box h5 {font-size: 30px;}

#purchaseModal.show .modal-dialog {max-width: 1470px;}
.purchase-contentbox { padding: 50px 20px; width: 347px;}
.purchase-contentbox h6{font-size:20px;}
.purchase-contentbox span{font-size:18px;}

}

/* 90% */
@media only screen and (min-width: 1550px) and (max-width: 1820px) {

  .sidebar {width: 280px; padding: 40px 30px;}
  .dash-container {margin: 40px 40px 100px 300px;}
  .dashcard-box h6 {font-size: 35px;}
  .dashcard-box{padding: 15px;}
  .dashcard-box p{font-size: 18px;}
  .referral-inputbox {width: 440px;}
  .dashpro-roundbox {width: 95px; height: 95px; font-size: 43px;}

.dashcard-box h4 {font-size: 20px;}
.dashcard-box h5 {font-size: 33px;}

#purchaseModal.show .modal-dialog {max-width: 1600px;}
.purchase-contentbox { padding: 50px 20px; width: 380px;}

}

@media only screen and (min-width: 1821px) and (max-width: 1920px) {}