@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css");
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
@import url('color.css');
@import url('fonts.css');
@import url('style.css');
@import url('variable.css');


/*form page css here*/

.form-bg{background: var(--black-white); border-radius: 30px; overflow: hidden;}
.form-image-box img{aspect-ratio: 8/10; object-fit: cover;}
.form-box-inner{max-width: 434px; width: 100%;}
.from-box{height: calc(100vh - 65px); overflow: auto; padding: 15px;}
.form-control,.form-control:focus{background: var(--ligt-gray); color: var(--white-white); border-radius: 8px; border: none; outline: none; box-shadow: none; height: 46px; padding-left: 10px !important; padding-right: 10px !important; padding-top: 0.5rem;
    padding-bottom: 0.5rem;}
.form-control::placeholder{color: var(--black-scale-400);}
.form-check-input{background-color: var(--black-scale-800); outline: none !important; border: none !important; box-shadow: none !important; width: 24px !important; height: 24px !important; position: relative;}
.form-check-input:checked{background-color: var(--primary-primary-pink);}
.forgot-box a{color: var(--primary-primary-pink); text-transform: capitalize; font-weight: medium;}
textarea.form-control,textarea.form-control:focus{height: 120px; resize: none;}

.react-tel-input .form-control{background: var(--ligt-gray) !important; color: var(--white-white) !important; border-radius: 8px; border: none !important; outline: none; box-shadow: none; height: 46px !important; padding: 10px; width: 100% !important;}
.react-tel-input .form-control::placeholder{color: var(--black-scale-400) !important;}

.react-tel-input .flag-dropdown,.react-tel-input .flag-dropdown:hover{background: var(--ligt-gray) !important; border: none !important; color: var(--white-white) !important;}
.react-tel-input .flag-dropdown .selected-flag{background: transparent !important;}
.react-tel-input .country-list{background: var(--ligt-gray) !important; color: var(--white-white) !important; box-shadow: none !important;}
.react-tel-input .country-list .search{background: var(--black-scale-800) !important;}
.react-tel-input .country-list .search{display: flex; padding: 10px 10px 6px 10px !important;}
.react-tel-input .country-list .search-box{background: var(--ligt-gray) !important; color: var(--white-white) !important; border-radius: 8px; border: none !important; outline: none; box-shadow: none; flex: 1;}

.react-tel-input .country-list .country:hover,.react-tel-input .country-list .country.highlight{background: var(--black-scale-700) !important; color: var(--white-white) !important;}
.react-tel-input .country-list .country:hover .dial-code,.react-tel-input .country-list .country.highlight .dial-code{color: var(--white-white) !important;}






.custom-radio-checkbox{border: solid 1px var(--black-scale-800); background: var(--ligt-gray); border-radius: 50px;}
.custom-radio-checkbox:checked{background-color: var(--primary-primary-pink);}


.back-btn{top: 15px; left: 15px;}
.back-btn a i{font-size: 38px; color: var(--white-white)}
.form-check-input{@apply bg-[var(--black-scale-800)] !outline-none !border-0 !shadow-none !w-6 !h-6 relative; -webkit-appearance: none; appearance: none; border-radius: 4px;}
.form-check-input:checked{@apply bg-[var(--primary-primary-pink)];}
.form-check-input:checked::after{content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 5px; height: 10px; border: solid var(--white-white); border-width: 0 2px 2px 0;}

.form-foot p a{color:var(--primary-primary-purple);}
.upload-box-inner{border: dashed 2px var(--black-scale-800); padding: 8px; border-radius: 100px;}
.upload-box-inner figure{width: 95px; height: 95px; border-radius: 50px; background: var(--ligt-gray);}
.upload-box-inner figure i{font-size: 28px; color: var(--primary-primary-pink);}
.upload-input{width: 100%; height: 100%; opacity: 0; z-index: 1; top: 0; left: 0; cursor: pointer;}


/*header css here*/

header{padding-left: 260px; transition: all 0.3s ease-in-out; background: var(--black-scale-900); z-index: 99;}
.header-inner{padding: 15px 30px;}
.notifuction-head-box a span{background: var(--primary-primary-pink);}
.user-head-box{background: var(--ligt-gray);}
.user-head-box img{width: 36px; height: 36px; object-fit: cover; border-radius: 12px;}
.dropdown-show{background: var(--black-scale-800);}
.menu-toggel{transition: all 0.3s ease-in-out;}

/*sidebar css here*/

.sidebar-bg{width: 260px; flex:0 0 260px; max-width: 260px; background: var(--black-white); transition: all 0.3s ease-in-out; z-index: 101;}
.sidebar-logo{padding: 15px; border-bottom: solid 1px var(--black-scale-900);}
.sidebar-menu-box ul li a{padding: 10px 15px; border-radius: 8px; display: flex; gap: 10px; align-items: center;}
.sidebar-menu-box ul li a i{font-size: 26px;}
.sidebar-menu-box ul li a:hover{background: var(--black-scale-900);}
.sidebar-menu-box ul li.active a{background: var(--primary-primary-pink); color: var(--white-white);}

/*Dashborad page css here*/

.page-warper{padding-left: 260px; padding-right: 0px; padding-bottom: 30px; padding-top: 82px;}
.hide-sidebar .page-warper{padding: 82px 30px 30px 30px;}
.hide-sidebar .sidebar-bg{left: -100%;}
.hide-sidebar header{padding-left: 0px;}
.page-content{padding:15px 30px 30px 30px;}
.hide-sidebar .page-content{padding:15px 0 0 0;}
.total-view-box{background: var(--ligt-gray); padding: 30px; border-radius: 16px;}
.total-view-des .body-1{color: var(--black-scale-400);}
.total-view-box figure{flex:0 0 60px; max-width: 60px;}
.card{background:var(--black-white); padding:clamp( 15px, 4vw, 20px); border-radius: 16px; gap: 15px; display: flex; flex-direction: column;}
thead th{padding: 13px; text-align: left; background: var(--black-scale-900);}
thead th:first-child{border-radius: 8px 0px 0px 8px;}
thead th:last-child{border-radius: 0px 8px 8px 0px;}
tbody td{padding: 13px; text-align: left; background: var(--ligt-gray); border-top: solid 2px var(--black-white);}
tbody .body-2{color: var(--white-white) !important;}
.video-box figure{width: 74px; height: 44px; flex:0 0 74px; border-radius: 10px; overflow: hidden;}
.video-box figure img{width: 100%; height: 100%; object-fit: cover;}
.live-stream-box figure img{aspect-ratio: 5 / 3; width: 100%; object-fit: cover; border-radius: 10px;}

/*Upload video page css here*/

.upload-box-inner-content{background: var(--ligt-gray); padding: 30px; border-radius: 8px;}
.tag-list .btn{background: var(--primary-primary-pink);}
.upload-btn{color: var(--black-scale-400);}
.add-more-btn a{color:var(--primary-primary-pink);}

/*faq page css here*/

.accordion-item{background: var(--black-scale-900); border: solid 1px var(--ligt-gray);}
.accordion-item .subtitle-2{color: var(--black-scale-400);}
.accordion-item.active button .subtitle-2{color: var(--primary-primary-pink);}
.accordion-item.active button svg{stroke:var(--primary-primary-pink)}

/*notifications page css here*/

.notifications-list-bg ul li{background: var(--black-scale-900);}

/*wallet page css here*/

.withdraw-money-box{background: var(--primary-primary-pink);}
.modal-bg{background:rgba(0,0,0,0.1); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); padding: 15px;}
.modal-content{background: var(--black-white); padding:clamp(15px, 4vw, 45px);}
.select-account-box{background: var(--ligt-gray); padding: 12px; border-radius: 16px;}

/*account setting page css here*/

.tab-head{padding-bottom: 15px; border-bottom: solid 1px var(--ligt-gray); padding-bottom: 15px;}
.tab-head button{background: var(--ligt-gray); padding: 10px 15px; border-radius: 5px;}
.tab-head button.active{background: var(--primary-primary-pink);}
.upload-image-box figure{border-color: var(--black-scale-800);}
.enable-notifications-box{background: var(--black-scale-900);}
.enable-notifications-box p{color: var(--black-scale-400);}

/*payment-&-withdrawals-page-css-here*/

.card-box{background: var(--black-scale-900);}

/*live-streaming-page-css-here*/


.user-box img{aspect-ratio: 4/5; object-fit: cover; width: 100%;}
.central-intelligence-list ul li{background: var(--black-scale-900);}
.user-doller-box{background: var(--primary-primary-purple);}
.live-comments-bg{background: var(--black-scale-900);}
.bg-black-scale-800{background: var(--black-scale-800);}
.black-scale-700{background: var(--black-scale-700);}

.react-select__control,.react-select__control:focus{background: var(--ligt-gray) !important; color: var(--white-white) !important; border-radius: 8px !important; border: none !important; outline: none !important; box-shadow: none !important; min-height: 46px !important; padding-left: 10px !important; padding-right: 10px !important;}
.react-select__control .react-select__multi-value__remove svg path{fill:#000;}

.thumbnail-box video{background: var(--ligt-gray); border-radius: 8px;}