:root {
  --shades-01:#000;
  --shades-02:#fff;
  /* --shades-03:#1d3461; */
  --shades-04:#1f487e;
  --shades-05:#376996;
  --shades-06:#6290c8;
  --shades-07:#829cbc;
  --shades-08:#262626;
  --shades-09:#1d3461;;
  --shades02-rgb:255, 255, 255;
  --shades03-rgb:29, 52, 97, 1;
  --shades09-rgb:80, 70, 228;
}
::-webkit-scrollbar { width: 8px; height: 8px; transition: all 0.3s ease;}
::-webkit-scrollbar-track {border-radius: 100vh; background: rgba(255, 255, 255, 0.2); transition: all 0.3s ease; }
::-webkit-scrollbar-thumb { background: rgb(98, 144, 200, 0.7); border-radius: 100vh; transition: all 0.3s ease; }
::-webkit-scrollbar-thumb:hover {background: rgb(98, 144, 200 , 1);}
body{font-family: "Roboto", sans-serif;padding-top: 0;background-color: rgba(245, 245, 245, 0.3)}
button, input, optgroup, select, textarea{font-family: "Roboto", sans-serif;}
a {color: var(--shades-09); text-decoration: none;}
.modal-header{background-color: #f5f5f5;  align-items: center;}
.modal .btn{padding: .65rem 1.4rem; font-size: 14px;}
.modal .btn-close{background-color: rgb(72, 128, 255, 0.1); border-color: transparent; cursor: pointer; color: #4880ff; width: 40px; height:40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 0;font-size: 12px;}
.modal .btn-close:focus{box-shadow: none!important;}
.modal .modal-content{background-color: transparent;}
.data-content .btn {     background: #4880ff !important; color: #fafafa !important; border-color: transparent !important; box-shadow: none; border-radius: 6px; font-size: 14px; padding: 8px 14px;}
.text-link{color: var(--shades-09);}
.form-control:focus{border-color: var(--shades-09);}
.feeds-item:last-child{border-bottom: 0 none!important;}
.comments-filter .btn-group .btn, .comments-filter .btn-group .open .btn.dropdown-toggle, .comments-filter .btn-group .btn-default.active, .comments-filter .btn-group .btn-default:active, .comments-filter .btn-group .open .btn-default.dropdown-toggle{color: var(--shades-09)!important;}
.btn-voice-start, .btn-voice-stop{background:var(--shades-09);}
.btn_action{border-color: transparent !important; box-shadow: none; border-radius: 6px; font-size: 14px; padding: 8px 14px;}
.theme-container{box-shadow: 0 .15rem .1rem rgba(0, 0, 0, .04); border-radius: 6px; background-color: var(--shades-02);}
.profile-buttons-wrapper button i{color: #5e72e4;}
.entry-title{color: var(--shades-09); font-weight: 600; font-size: 20px; line-height: 1.6; padding: 1rem 1.25rem;  background: rgb(72, 128, 255, 0.1);  border-left: 2px solid #4880ff;}
.publisher-message{margin-top: 30px;}
.main-wrapper{margin-top: 78px;}
.main-wrapper, .top-bar, .main-header{padding-right: 0;}
.main-header .search-input-icon{left: 12px;top: 8px;right: auto;}
.sidebar-open .main-wrapper{overflow-x: hidden;}
.main-header .menu-icon{position: relative;top: 0;border-radius: 8px;}
.main-side-nav a[data-bs-toggle="collapse"]:after{content:"\f053"; margin-top: 4px;font-size: 10px;}
.main-side-nav a[data-bs-toggle="collapse"][aria-expanded="true"]:after{content:"\f078"}
.main-side-nav li small{color: rgba(255,255, 255, 0.5);letter-spacing: 0.5px;font-weight:700}
.custom-header .search-wrapper .form-control{height: 40px;margin-top: 0;margin-bottom: 0;}
.custom-header .search-wrapper{width: 100%;}
.custom-drop-menu{min-width: 280px; border: none; border-radius: 12px; box-shadow: 0 1px 11px rgba(0, 0, 0, 0.15) !important; padding: 0; margin-top: 8px; background: #ffffff;  margin-top: 13px !important;}
.custom-user-box{padding: 10px 20px!important; background: linear-gradient(135deg, #1d3461 0%, #1f487e 100%); border-radius: 12px 12px 0 0; display: flex; align-items: center; gap: 8px;color: var(--shades-02);}
.custom-drop-menu .dropdown-item{padding: 14px 20px; font-size: 14px; color: #495057; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px;transition: all 0.3s ease;border-radius: 12px;}
.custom-user-box span{color: var(--shades-02);}
.custom-drop-menu .main-icon, .custom-drop-menu .main-icon *{color: #495057!important;fill: #495057!important;}
.custom-drop-menu .dropdown-divider{margin: 0; border-top: 1px solid #f0f0f0;}
.custom-drop-menu .dropdown-item:hover{padding-left: 24px;}
.custom-drop-menu::after {content: ""; right: 10px; top: -8px; position: absolute; z-index: 1001; border-bottom: 8px solid var(--shades-09); border-left: 8px solid transparent; border-right: 8px solid transparent;}
.custom-user-box:hover{color: var(--shades-02);}
.custom-sidebar {position: fixed;left: 0;top: 78px;height: calc(100vh - 78px);width: 250px;z-index: 1;overflow: hidden;z-index: 11;transition: all 0.3s ease;padding: 0 0 60px;background-color: #031f39; padding: 12px 0 50px 0;}
.custom-sidebar .main-side-nav-card{overflow: auto;padding: 0; margin: 4 10px 0;}
.custom-sidebar .card{height: 100%;background-color: transparent;margin-bottom: 0;}
.custom-sidebar .card-body{margin: 0 10px;}
.custom-sidebar  .main-icon{color: rgba(var(--shades02-rgb), 0.4) ! important;fill:rgba(var(--shades02-rgb), 0.4) ! important;}
.main-side-nav a, .main-side-nav .static{color: #e2e4e7;font-weight: 400;font-size: 16px;}
.theiaStickySidebar .text-muted{color: var(--shades-02)!important;}
.theiaStickySidebar .main-side-nav>li.active>a{background-color: rgba(var(--shades02-rgb), 0.1);  border-radius: 50px;color: var(--shades-02);}
.main-header .logo-wrapper{display: flex;align-items: center;justify-content: start;height:62px;width: 250px;}
.main-header .logo-wrapper img{width: 100%;height: 100%;}
.logo {line-height: 1!important; padding: 0; text-align: left; font-size: 28px; font-weight:700; border-bottom: 0 !important; position: relative; color: var(--shades-09);padding: 0 25px;}
/* .logo::after{content: ""; width: 100%; height: 3px; background-image: linear-gradient(90deg, #1d346100, #376996, #376a9600); position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);} */
.custom-sidebar .card{border-radius: 0;}
.custom-search .search-wrapper { position: relative; }
.custom-search .search-wrapper .form-control { height: 44px; margin-top: 13px; margin-bottom: 8px; padding-right: 34px; box-shadow: none; background: #f2f2f2; border: 0 none; border-radius: 8px; color: #222; font-size: 16px; }
.custom-search  .search-input-icon { position: absolute; top: 10px; right: 12px; }
.custom-sidebar .theiaStickySidebar{transform:translateY(0)!important}
.main-container{ padding-left: 260px;}
.main-header{background-color: #1d3461; z-index: 10; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);position: fixed;left: 0;right: 0;width: 100%;min-height: 78px;display: flex;align-items: center;z-index: 10;}
.main-container .top-stories{margin-top: 30px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);     border-top: 1px solid #e2e8f0; border-radius: 16px;
}
.custom-sidebar .main-side-nav a{padding: 4px; color: var(--shades-02); font-size: 14px; text-decoration: none; display: flex; align-items: center; border-radius: 4px !important; gap: 4px; transition: all 0.3s ease;position: relative;}
.custom-sidebar .main-side-nav>li.active>a::before{content: ''; position: absolute; left: 0; top: 5px; height: 28px; width: 4px; background: #6290c8; border-radius: 0 5px 5px 0;}
.custom-sidebar .main-side-nav ul a{font-size: 12px;border-left: 1px solid transparent;}
.custom-sidebar .main-side-nav ul>li.active>a{color: var(--shades-02);}
.custom-sidebar .main-side-nav a:hover{background-color: var(--shades-02);color: var(--shades-09);}
.custom-sidebar .main-side-nav a:hover .main-icon, .custom-sidebar .main-side-nav a:hover .main-icon *{color: var(--shades-09)!important;fill: var(--shades-09)!important;}
.custom-sidebar .main-side-nav>li + li{margin-top: 6px;}
.custom-sidebar .main-side-nav>li.active>a{border-radius: 10px;background-color: var(--shades-02); color: var(--shades-09);}
.custom-sidebar .main-side-nav>li.active>a .main-icon *{color: var(--shades-09) ! important; fill: var(--shades-09) ! important;}
.custom-sidebar .card-body.with-nav, .custom-sidebar .card-body.with-list, .card-body.with-form{padding: 0;}
.custom-sidebar .main-icon *{color: #fff !important;fill:#fff !important;padding: 7px; background-color: transparent; border-radius: 11px;}
.custom-sidebar .main-side-nav a[data-bs-toggle="collapse"]:after{color: var(--shades-02);margin-left: auto;}
.custom-sidebar .main-side-nav>li.active>a[data-bs-toggle="collapse"]:after{color: var(--shades-09);} 
.custom-sidebar .main-side-nav .collapse{margin: 10px 0;}
.custom-sidebar .main-side-nav .collapse li + li{margin-top: 4px;}
.main-container .post{box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); border-radius: 16px; border-top: 1px solid #e2e8f0;}
.main-container .post.boosted, body.night-mode .post.boosted{border-top: 2px solid #ffa412;}
.main-container .post-footer{background-color: var(--shades-02);}
.main-container .post-footer .x-form{display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.main-container .post-footer .comment-form textarea{padding-right: 0;flex-shrink: 1;flex-grow: 1;border-radius: 100px; background-color: var(--shades-02); border: 1px solid rgb(226 232 240);max-width: 75%;}
.main-container .post-footer .x-form-tools{position: relative; right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px;}
.main-container .post-footer .x-form-tools>li{padding: 0; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgb(226 232 240); color: #4c5254;font-size: 13px;}
.main-container .post-body .post-stats{font-size: 14px;color: var(--shades-09);}
.main-container .post-footer .reaction-btn .reaction-btn-name{color: var(--shades-09)!important;}
.main-container .alert-post{background-color: #f1f5f9; padding: 10px 20px; border-radius: 10px; border-bottom: transparent;box-shadow: none; }
.main-container .post-footer .comment-avatar{margin-right: 10px;}
.main-container .post-footer .comment-avatar-picture{min-width: 48px;min-height: 48px;border:1px solid var(--shades-09)}
.main-container .stories.sngine.carousel .story>.item-link>.item-preview{background: linear-gradient(90deg,#3B41EC 0%,#F568F0 50%,#F7C506 100%); display: flex; align-items: center; justify-content: center;}
.main-container .stories.carousel .story>.item-link>.item-preview img{width: 104px;height: 104px;border-radius: 50%;background-color: var(--shades-02);}
.main-container .stories.sngine.carousel .story>.item-link>.item-preview{height: 110px;border-radius: 50%;overflow: hidden;}
.main-container  .stories.sngine .story>a>.item-preview>img{border:0 solid var(--shades-02)}
.main-container .stories.carousel .story>.item-link>.info .name{font-weight: 600;}
.main-container .stories.carousel .story>.item-link>.info{color: var(--shades-01);}
.custom-right-sidebar{padding: 0 30px;border-left: 1px solid #e2e8f0;}
.custom-right-sidebar .card{box-shadow: 0 .15rem .1rem rgba(0, 0, 0, .04); border-radius: 6px; background-color: var(--shades-02);box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); border-radius: 16px; border-top: 1px solid #e2e8f0;margin-top: 20px;}
.main-header .search-wrapper .form-control{border-radius: 10px;background-color: rgb(160 160 160 / 10%); border: 1px solid transparent;color: var(--shades-02);}
.main-header .search-wrapper .form-control{padding-left: 40px;padding-right: 24px;font-weight: 400;}
.main-header .search-wrapper .form-control::placeholder{color: rgba(var(--shades02-rgb), 0.4)}

.custom-header .navbar-wrapper>ul{justify-content: flex-end;}
.custom-navbar-wrapper .dropdown-menu{border-radius: 12px;padding: 0;overflow: hidden;}
.custom-navbar-wrapper .dropdown-menu .dropdown-item:first-child{background: linear-gradient(135deg, #1d3461 0%, #1f487e 100%); display: flex; align-items: center; gap: 8px; padding: 10px 20px;}
.custom-navbar-wrapper .dropdown-menu .dropdown-item img{width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;margin-right: 0!important;}
.custom-navbar-wrapper .dropdown-menu .dropdown-item span{margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.85); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

.custom-header .navbar-wrapper>ul>li>a{width: 40px; height: 40px; margin-left: 10px; border-radius: 50%; background-color: rgb(160 160 160 / 10%); border: 1px solid transparent; transition: all 0.3s ease; color: #fff; font-size: 16px;display: flex; align-items: center; justify-content: center;padding: 0;line-height: 0;}
.custom-header .navbar-wrapper>ul>li{flex-grow: 0; flex-shrink: 0;margin: 0;}
.custom-header .dropdown-item .profile-image{width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.custom-header .header-icon, .custom-header .header-icon *{color: var(--shades-02) ! important; fill: var(--shades-02) ! important;}
.main-container .post-body .pg_1x img{max-height: 480px;}
.main-container .post-header{border-bottom: 1px solid #e2e8f0;padding: 16px;}
.main-container .pg_wrapper a{background-color: var(--shades-02);}
.main-container .post-body .post-avatar-picture{ min-width: 45px;  min-height: 45px;border-radius: 50%;}
.main-container .post-body .post-author{color: var(--shades-01);font-size: 16px;}
.main-container .mb10{display: inline-block; background: #4880ff; padding: 5px 20px; border-radius: 6px;font-size: 16px!important;color:var(--shades-02)!important}
.main-container .form-table-row{color: var(--shades-01) !important; background: #f3f3f3 !important; border-radius: 16px; padding: 15px 25px;}
.main-container .post-time a{color: var(--shades-09);font-size: 14px;}
.main-container .post-body .post-title{font-size: 16px;}
.main-container .feeds-item{ background: #f1f5f9; border-radius: 8px;}
.main-container .feeds-item + .feeds-item{margin-top: 5px;}
.mt30{margin-top: 30px;}
.custom-right-sidebar .data-content a{font-size: 14px;color: var(--shades-01);}
.custom-right-sidebar .main-icon *{color: var(--shades-02) ! important; fill: var(--shades-02)! important;}
.custom-right-sidebar .card-header{font-size: 16px;font-weight: 700;}
.main-container .posts-filter{background-color: #f1f5f9; padding: 10px 20px; border-radius: 10px;border-bottom: transparent;margin:20px 0}
.main-container .posts-filter .countries-filter{font-size: 16px;}
.main-container .posts-filter .btn-group .btn{font-size: 16px;}
.main-container .post-avatar-picture{border: 1px solid var(--shades-09);}
.main-container .post-avatar .online-dot{top: 0;}
.main-container .add-story .item-preview{width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: linear-gradient(90deg,#3B41EC 0%,#F568F0 50%,#F7C506 100%); display: flex; align-items: center; justify-content: center;}
.main-container .add-story .img{border-radius: 50%; overflow: hidden; background-color: var(--shades-02); border: 2px solid #fff;width: 104px;height: 104px;}
.main-container .add-story{height: 110px;}
.main-container .add-story .add{ background: linear-gradient(90deg,#3B41EC 0%,#F568F0 50%,#F7C506 100%);font-size: 8px;}
.main-container .add .main-icon *{color: #ffffff ! important; fill: #ffffff ! important;}
.main-container .top-stories .card-header{font-size: 18px;padding-bottom: 0;}
.main-container .top-stories .btn-sm.btn-icon{width: 40px;height: 40px;border-radius: 8px;}
.custom-right-sidebar .theiaStickySidebar{height: calc(-70px + 100vh); display: flex; flex-direction: column;}
.custom-right-sidebar .mini-footer{margin-top: auto;margin-bottom: 20px;}
.custom-right-sidebar .mini-footer .copyrights{color: var(--shades-09);font-size: 16px;}
.custom-right-sidebar .mini-footer a{font-size: 14px;}
.custom-tabs {margin-top: 30px; background: #ffffff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-bottom: 20px; overflow: hidden; }
.custom-tabs .tabs-container { padding: 8px; } 
.custom-tabs .tabs-list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } 
.custom-tabs .tab-item { flex: 1; min-width: fit-content; }
.custom-tabs .tab-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 8px; background: transparent; color: #65676b; text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.2s ease; position: relative; white-space: nowrap; } 
.custom-tabs .tab-link:hover { background: #f0f2f5; color: #1c1e21; }
.custom-tabs .tab-item.active .tab-link { background: var(--shades-09); color: #ffffff; box-shadow: 0 2px 6px rgba(94, 53, 177, 0.3); }
.custom-tabs .tab-icon { flex-shrink: 0; } 
.custom-tabs .tab-item.active .tab-icon { stroke: #ffffff; } 
.custom-tabs .tab-text { line-height: 1; }
.custom-tabs .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12px; font-weight: 600; line-height: 1; }
.custom-tabs .badge-primary { background: #ff4081; color: #ffffff; } 
.custom-tabs .tab-item.active .badge-primary { background: #ffffff; color: var(--shades-09); } 
.custom-tabs .badge-secondary { background: #ffa726; color: #ffffff; } 
.custom-tabs .tab-item.active .badge-secondary { background: #ffffff; color: var(--shades-09); }
.main-container .card-title{font-size: 16px;}
.feeds-item .main-icon *{fill: var(--shades-02)!important;color: var(--shades-02)!important;}
.feeds-item a{font-size: 14px;  color: var(--shades-01);}
.custom-side-panel .card-header{background-color: var(--shades-09);color: var(--shades-02);}
.custom-side-panel .btn{background: var(--shades-09); font-size: 16px; padding: 0; height: 50px; color: var(--shades-02);}
.profile-container{background-color: var(--shades-02);margin: 30px 0;border-radius: 16px;overflow: hidden;box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); padding-bottom: 10px; }
.profile-container .profile-cover-wrapper{border-radius: 0;position: relative;}
.profile-container .profile-cover-wrapper .profile-cover-overlay{position: absolute;left: 0;top: 0;background-color: rgb(0,0,0,0.1);width: 100%;height: 100%;z-index: 0;}
.profile-cover-buttons{z-index: 2;}
.profile-tabs-wrapper{margin-bottom: 0;}
.profile-tabs-wrapper a { padding: 10px 15px;border-radius: 8px; flex: 1;display: flex; align-items: center; justify-content: center;}
.profile-tabs-wrapper a.active{background: #4880ff; color: var(--shades-02);}
.profile-tabs-wrapper a.active .main-icon *{color: var(--shades-02) ! important; fill: var(--shades-02) ! important;}
.profile-tabs-wrapper a:hover{background: #f0f2f5; color: #1c1e21;}
.profile-avatar-wrapper{padding: 0;box-shadow: none;width: 140px;aspect-ratio: 2/3;border-radius: 8px;overflow: hidden;}
.my-custom-profile-wrapper{background: linear-gradient(90deg, #3B41EC 0%, #F568F0 50%, #F7C506 100%); display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 50% !important; padding: 4px !important; overflow: visible;}
.my-custom-profile-wrapper img{width: 150px!important; height: 150px!important; border-radius: 50%!important;}
.profile-avatar-wrapper img{width: 140px;height: 210px;border-radius: 0;object-fit: cover;}
.profile-cover-buttons>div{background: var(--shades-09);}
.profile-tabs-wrapper a.active{border-bottom-width: 0;}
.profile-buttons-wrapper .btn{font-size: 16px;}
.ui-box{position: relative; padding: 15px; margin-top: 0; margin-bottom: 20px; text-align: center; border-radius: 16px;box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); border-top: 1px solid #e2e8f0;}
.ui-box .img { position: relative; top: 0; left: 0; transform: translate(0); background: transparent; padding: 0; margin: 0 auto; border-radius: 0; }
.chat-sidebar .btn-chat{background: var(--shades-09);}
.chat-sidebar .btn-chat .main-icon, .chat-sidebar .btn-chat .main-icon *{ color: #ffffff ! important; fill: #ffffff ! important;}
.chat-box {border-radius: 16px 16px 0 0;}
.album-card{overflow: hidden;}
.pg_video{border-radius: 12px;}
/* Reels */
.plyr__control--overlaid{    background: rgb(0 0 0 / 30%)!important; }
.custom-reels{z-index: 2;}
.custom-reels .reel-prev-btn{bottom: 40%; transform: translateY(-50%);}
.custom-reels .reel-next-btn {bottom: 50%; transform: translateY(-50%);}
.custom-reels .reel-video-wrapper .reel-video-container{border-radius: 16px; border: 1px solid #313131; overflow: hidden;}
.custom-reels .reel-video-wrapper .reel-video-container .video-controlls { position: absolute; bottom: 40px; right: 12px; border-radius: 16px; background: rgb(255 255 255 / 20%); padding: 8px; backdrop-filter: blur(10px);}
.custom-reels .post-text{color: #ffffff; font-size: 14px; font-weight: 400;}
.custom-reels .reel-video-wrapper .reel-video-container .video-caption{padding: 20px 70px 10px 10px;    background: rgb(0,0,0,0.05);}
.custom-reels .post-text-translation{border-left: 2px solid transparent;font-size: 14px;}
.custom-reels .plyr__control--overlaid{width: 80px; height: 80px; display: flex!important; align-items: center; justify-content: center; background: rgb(0 0 0 / 30%);}
.custom-reels .post-text a{color: #ff6b00; font-weight: 600;}
.custom-reels  .reel-actions .post-avatar .online-dot{border-color: transparent!important;}
.custom-reels .plyr__control--overlaid svg{width: 40px;height: 30px;}
.custom-reels .plyr__video-wrapper--fixed-ratio{width: 100%; aspect-ratio: 1 / 1!important;}
.custom-reels .plyr__video-wrapper--fixed-ratio video{object-fit: cover;}
.custom-reels .post-avatar .online-dot{top: 0;}
.custom-reels .reel-comments-wrapper{background: #f3f3f3; border-radius: 20px;}
/* Custom Chat Box - Professional Styling */
.chat-sidebar{top: auto;}
.custom-chat-box { border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); overflow: hidden; background: #ffffff; max-width: 400px; border: 1px solid #e5e7eb; } 
.custom-chat-box .chat-widget-head { background: #1d3461; padding: 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.custom-chat-box .chat-head-label { position: absolute; top: 12px; right: 60px; } 
.custom-chat-box .chat-head-label .badge { font-size: 11px; padding: 4px 8px; font-weight: 600; }
.custom-chat-box .chat-user-card { display: flex; align-items: center; text-decoration: none; color: #ffffff; flex: 1; min-width: 0; }
.chat-user-card .name{color: var(--shades-02);}
.custom-chat-box .chat-user-card:hover { opacity: 0.9; }
.custom-chat-box .chat-user-card .avatar { position: relative; flex-shrink: 0; } 
.custom-chat-box .chat-user-card .avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); }
.custom-chat-box .chat-user-card .online-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--shades-09); background: #10b981; }
.custom-chat-box .chat-user-card .online-status.offline { background: #6b7280; } 
.custom-chat-box .chat-user-card .name { flex: 1; min-width: 0; }
.custom-chat-box .chat-user-card .name span { font-size: 16px; font-weight: 600; color: #ffffff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-chat-box .chat-head-btns { display: flex; align-items: center; gap: 8px; }
.custom-chat-box .chat-head-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.15); cursor: pointer; transition: all 0.3s ease; } 
.custom-chat-box .chat-head-btn:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); } 
.custom-chat-box .chat-head-btn svg { filter: brightness(0) invert(1); }
.custom-chat-box .chat-widget-content { background: #f9fafb; display: flex; flex-direction: column; height: 500px; } 
.custom-chat-box .chat-conversations { flex: 1; overflow-y: auto; padding: 20px; background: #ffffff; } 
.custom-chat-box .chat-conversations ul { list-style: none; padding: 0; margin: 0; }
.custom-chat-box .chat-conversations::-webkit-scrollbar { width: 6px; } 
.custom-chat-box .chat-conversations::-webkit-scrollbar-track { background: #f1f1f1; } 
.custom-chat-box .chat-conversations::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.custom-chat-box .chat-conversations::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.custom-chat-box .chat-typing { padding: 12px 20px; background: #ffffff; border-top: 1px solid #e5e7eb; font-size: 13px; color: #6b7280; display: none; } 
.custom-chat-box .chat-typing i { color: var(--shades-09); }
.custom-chat-box .chat-voice-notes { padding: 12px 20px; background: #f3f4f6; border-top: 1px solid #e5e7eb; } 
.custom-chat-box .voice-recording-wrapper { background: #ffffff; border-radius: 12px; padding: 12px 16px; border: 1px solid #e5e7eb; }
.custom-chat-box .btn-voice-start, .custom-chat-box .btn-voice-stop { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease; } 
.custom-chat-box .btn-voice-start { background: var(--shades-09); color: #ffffff; }
.custom-chat-box .btn-voice-start:hover { background: var(--shades-09); } .custom-chat-box .btn-voice-stop { background: #ef4444; color: #ffffff; }
.custom-chat-box .chat-attachments { padding: 12px 20px; background: #ffffff; border-top: 1px solid #e5e7eb; } 
.custom-chat-box .chat-attachments ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.custom-chat-box .chat-form { padding: 16px 20px; background: #ffffff; border-top: 1px solid #e5e7eb; }
.custom-chat-box .chat-form-message { background: #f3f4f6; border-radius: 24px; padding: 10px 16px; margin-bottom: 12px; border: 1px solid #e5e7eb; transition: all 0.3s ease; } 
.custom-chat-box .chat-form-message:focus-within { background: #ffffff; border-color: var(--shades-09); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.custom-chat-box .chat-form-message textarea { width: 100%; border: none; outline: none; background: transparent; resize: none; font-size: 14px; color: #1f2937; font-family: inherit; line-height: 1.5; } 
.custom-chat-box .chat-form-message textarea::placeholder { color: #9ca3af; }
.custom-chat-box .x-form-tools { display: flex; align-items: center; gap: 16px; list-style: none; padding: 0; margin: 0; }
.custom-chat-box .x-form-tools li { cursor: pointer; color: #6b7280; transition: all 0.3s ease; }
.custom-chat-box .emoji-menu .nav-tabs{padding: 0 10px;}
.custom-chat-box .x-form-tools li:hover { color: var(--shades-09); background: #f3f4f6; }
.custom-chat-box .x-form-tools i { font-size: 18px; }
.custom-chat-box .x-form-tools-colors i { color: var(--shades-09); } 
.custom-chat-box .x-hidden { display: none !important; } 
.custom-chat-box .x-progress { height: 4px; border-radius: 2px; background: #e5e7eb; overflow: hidden; }
.custom-chat-box .x-progress .progress-bar { background: linear-gradient(90deg, var(--shades-09) 0%, #764ba2 100%); transition: width 0.3s ease; }
.custom-chat-box.opened {animation: slideUp 0.3s ease-out;}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.custom-chat-box .loading-dots::after { content: ''; animation: loadingDots 1.5s infinite; }
@keyframes loadingDots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}
.custom-page-header { background: linear-gradient(135deg, #5046e4 0%, #3d35c4 100%); position: relative; overflow: hidden; padding: 80px 0 100px; box-shadow: 0 4px 20px rgba(80, 70, 228, 0.15); }
.custom-page-header::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%), url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%23ffffff" fill-opacity="0.05" fill-rule="evenodd"/%3E%3C/svg%3E'); pointer-events: none;
}
.custom-page-header::after { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); border-radius: 50%; top: -250px; right: -100px; pointer-events: none; } 
.custom-page-header h2 { color: #ffffff; font-weight: 700; font-size: 3rem; margin-bottom: 16px; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; }
.custom-page-header p { color: rgba(255, 255, 255, 0.95); font-size: 1.15rem; font-weight: 400; max-width: 700px; margin: 0 auto 35px; line-height: 1.6; position: relative; z-index: 1; }
.custom-page-header .input-group { max-width: 650px; margin: 0 auto; position: relative; z-index: 1; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); border-radius: 12px; overflow: hidden; }
.custom-page-header .form-control { border-radius: 12px 0 0 12px; border: none; padding: 18px 28px; font-size: 1rem; background: #ffffff; transition: all 0.3s ease; height: 60px; color: #1a1a1a; font-weight: 500; }
.custom-page-header .form-control:focus { background: #ffffff; box-shadow: none; outline: none; } 
.custom-page-header .form-control::placeholder { color: #adb5bd; font-weight: 400; }
.custom-page-header .btn-light { border-radius: 0 12px 12px 0; padding: 18px 40px; font-weight: 600; border: none; background: var(--shades-09); color: #ffffff; transition: all 0.3s ease; height: 60px; font-size: 1rem; letter-spacing: 0.3px; }
.custom-content-tabs { background: #ffffff; border-radius: 12px; padding: 12px; margin-bottom: 32px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid #e8e8e8; position: relative; z-index: 10; margin-top: -50px; display: flex; } 
.custom-content-tabs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; margin-right: auto; }
.custom-content-tabs ul li { flex: 1; min-width: 130px; }
.custom-content-tabs ul li a { display: flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 0.9rem; color: #6c757d; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; border: 2px solid transparent; position: relative; overflow: hidden; white-space: nowrap; } 
.custom-content-tabs ul li a::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(80, 70, 228, 0.1), transparent); transition: left 0.5s ease; } 
.custom-content-tabs ul li a:hover::before { left: 100%; }
.custom-content-tabs ul li a:hover { background: #f8f9fa; color: #5046e4; border-color: #e8e8e8; transform: translateY(-2px); } 
.custom-content-tabs ul li.active a { background: #5046e4; color: #ffffff; border-color: #5046e4; box-shadow: 0 4px 12px rgba(80, 70, 228, 0.3); transform: translateY(-2px); }
.custom-content-tabs ul li.active a::before { display: none;}
.custom-category-sidbar .card { border-radius: 12px; border: 1px solid #e8e8e8; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); overflow: hidden; background: #ffffff; transition: all 0.3s ease; } 
.custom-category-sidbar .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } 
.custom-category-sidbar .card-body { padding: 0; }
.custom-category-sidbar .side-nav { margin: 0; padding: 0; list-style: none; }
.custom-category-sidbar .side-nav li { border-bottom: 1px solid #f5f5f5; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.custom-category-sidbar .side-nav li:last-child { border-bottom: none; }
.custom-category-sidbar .side-nav li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #5046e4; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.custom-category-sidbar .side-nav li a { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; color: #495057; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; background: transparent; box-shadow: none; outline: none; }
.custom-category-sidbar .side-nav li a i { transition: all 0.3s ease; } 
.custom-category-sidbar .side-nav li:hover::before { width: 4px; } 
.custom-category-sidbar .side-nav li:hover { background: linear-gradient(90deg, rgba(80, 70, 228, 0.05) 0%, transparent 100%); }
.custom-category-sidbar .side-nav li:hover a { color: #5046e4; padding-left: 28px; font-weight: 600; } 
.custom-category-sidbar .side-nav li:hover a i { transform: translateX(4px); } 
.custom-category-sidbar .side-nav li.active::before { width: 4px; }
.custom-category-sidbar .side-nav li.active { background: linear-gradient(90deg, rgba(80, 70, 228, 0.08) 0%, transparent 100%); } 
.custom-category-sidbar .side-nav li.active a { color: #5046e4; font-weight: 700; padding-left: 28px; } 
.custom-category-sidbar .side-nav li.active a i { color: #5046e4; }
.custom-category-sidbar .side-nav li a .float-end { color: #adb5bd; transition: all 0.3s ease; } 
.custom-category-sidbar .side-nav li:hover a .float-end, .custom-category-sidbar .side-nav li.active a .float-end { color: #5046e4; transform: translateX(4px); }
.countries-dropdown { border-radius: 12px; border: 1px solid #e8e8e8; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 10px; margin-top: 10px; min-width: 240px; background: #ffffff; backdrop-filter: blur(10px); } 
.countries-dropdown::before { content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: #ffffff; border-left: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; transform: rotate(45deg); }
.countries-dropdown .dropdown-item { border-radius: 8px; padding: 12px 16px; margin-bottom: 3px; font-weight: 500; font-size: 0.9rem; color: #495057; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } 
.countries-dropdown .dropdown-item::before { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(80, 70, 228, 0.1), transparent); transition: left 0.5s ease; }
.countries-dropdown .dropdown-item:hover::before { left: 100%; } 
.countries-dropdown .dropdown-item:hover { background: linear-gradient(135deg, rgba(80, 70, 228, 0.08) 0%, rgba(80, 70, 228, 0.03) 100%); color: #5046e4; padding-left: 20px; font-weight: 600; }
.countries-dropdown .dropdown-item:active { background: #5046e4; color: #ffffff; } 
.countries-dropdown .js_scroller { max-height: 320px; overflow-y: auto; padding-right: 8px; }
.countries-dropdown .js_scroller::-webkit-scrollbar { width: 6px; } 
.countries-dropdown .js_scroller::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 10px; } 
.countries-dropdown .js_scroller::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5046e4 0%, #3d35c4 100%); border-radius: 10px; transition: all 0.3s ease; } 
.countries-dropdown .js_scroller::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #3d35c4 0%, #5046e4 100%); }
.see-more::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease; } 
.see-more span { font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; position: relative; z-index: 1; }
.custom-content-tabs .btn-primary { background: linear-gradient(135deg, #5046e4 0%, #3d35c4 100%); border: none; border-radius: 10px; padding: 12px 28px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.3px; box-shadow: none; outline: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } 
.custom-content-tabs .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease; }
.custom-content-tabs .btn-primary:hover::before { left: 100%; } 
.custom-content-tabs .btn-primary:hover { box-shadow: 0 6px 20px rgba(80, 70, 228, 0.4); transform: translateY(-2px); } 
.custom-content-tabs .btn-primary:active { transform: translateY(0); } 
.custom-content-tabs .btn-primary i { margin-right: 8px; transition: transform 0.3s ease; } 
.custom-content-tabs .btn-primary:hover i { transform: rotate(90deg); }
.custom-content-tabs .btn-success { background: linear-gradient(135deg, #5046e4 0%, #3d35c4 100%); border: none; border-radius: 10px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(80, 70, 228, 0.3); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } 
.custom-content-tabs .btn-success::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease; }
.custom-content-tabs .btn-success:hover::before { left: 100%; }
.custom-content-tabs .btn-success:hover { box-shadow: 0 6px 20px rgba(80, 70, 228, 0.4); transform: translateY(-2px); } 
.custom-content-tabs .btn-success:active { transform: translateY(0); } 
.custom-content-tabs .btn-success i { transition: transform 0.3s ease; position: relative; z-index: 1; } 
.custom-content-tabs .btn-success:hover i { transform: rotate(90deg); }


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sg-offcanvas-mainbar > div > ul.row > li { animation: fadeInUp 0.5s ease forwards; } 
.custom-category-sidbar { animation: slideInLeft 0.6s ease; } 
.custom-content-tabs { animation: fadeInUp 0.4s ease; }
.custom-page-header .floating-img { animation: floatImage 6s ease-in-out infinite; opacity: 0.95; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15)); }


@keyframes floatImage {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(2deg);
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-2deg);
  }
}

.custom-page-header .circle-2, .custom-page-header .circle-3 { border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); animation: pulseCircle 8s ease-in-out infinite; } 
.custom-page-header .circle-2 { animation-delay: 1s; } 
.custom-page-header .circle-3 { animation-delay: 2s; }

@keyframes pulseCircle {
  0%, 100% {
    transform: scale(1) translateZ(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15) translateZ(0);
    opacity: 0.3;
  }
}

.badge { background: linear-gradient(135deg, #5046e4 0%, #3d35c4 100%); color: #ffffff; padding: 5px 12px; border-radius: 6px; font-weight: 600; font-size: 0.8rem; box-shadow: 0 2px 8px rgba(80, 70, 228, 0.3); }

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 1000px 100%; animation: shimmer 2s infinite; } 
.shadow-premium { box-shadow: 0 8px 24px rgba(80, 70, 228, 0.15); } 
.shadow-premium-hover:hover { box-shadow: 0 12px 32px rgba(80, 70, 228, 0.25); } 
.border-premium { border: 2px solid #5046e4 !important; } 
.border-premium-light { border: 1px solid rgba(80, 70, 228, 0.3) !important; }
.custom-mobile-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-radius: 24px 24px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1); z-index: 999; padding: 0; transition: transform 0.3s ease; display: none;} 
.custom-mobile-footer.x-hidden { transform: translateY(100%); }
.custom-mobile-footer .container { max-width: 100%; padding: 0; margin: 0; position: relative; }
.custom-mobile-footer .container::before { content: ''; position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: 80px; height: 40px; background: #ffffff; border-radius: 40px 40px 0 0; } 
.custom-mobile-footer .footer-bottom-bar-links { display: flex; align-items: center; justify-content: space-around; padding: 12px 20px 16px; position: relative; height: 70px; }
.custom-mobile-footer .footer-bottom-bar-links::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: #333333; border-radius: 2px; }
.custom-mobile-footer .footer-bottom-bar-links .link { flex: 1; display: flex; justify-content: center; align-items: center; } 
.custom-mobile-footer .footer-bottom-bar-links .link a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #9e9e9e; transition: all 0.3s ease; padding: 8px; border-radius: 50%; position: relative; min-width: 48px; min-height: 48px; }
.custom-mobile-footer .footer-bottom-bar-links .header-icon { width: 26px; height: 26px; opacity: 1; transition: all 0.3s ease; } 
.custom-mobile-footer .footer-bottom-bar-links .link.active .header-icon, .custom-mobile-footer .footer-bottom-bar-links .link a:hover .header-icon { transform: scale(1.1); }
.custom-mobile-footer .footer-bottom-bar-links .title {display: none;}
.custom-add .header-icon *{fill: var(--shades-02)!important;color: var(--shades-02)!important;}
.user-menu>img{width: 100%;height: 100%;}
.user-menu.dropdown-toggle::after{display: none;}
.custom-add .dropdown-menu{border-radius: 20px 20px 0 0; border-top: 2px solid var(--shades-09);  transform: translateY(-40px)!important;z-index: -1;}
.custom-mobile-footer .footer-bottom-bar-links .custom-add > a { width: 60px; height: 60px; background: linear-gradient(135deg, #5b7cfa 0%, #4f6ef7 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; bottom: 28px; border: 5px solid #ffffff; padding: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.footer-bottom-bar-links .dropdown-widget{border-radius: 20px 20px 0 0; border-top: 2px solid var(--shades-09); transform: translateY(-45px) !important; z-index: -1; height: 400px; padding: 20px;}
.custom-chat-area{padding: 10px; background-color: #f6f6f6;border-radius: 10px;overflow: hidden;}
.custom-chat-list { height: calc(100vh - 100px); position: sticky; top: 20px; }
.custom-chat-list .card { border: none; box-shadow: none; height: 100%; border-radius: 10px; overflow: hidden; background: #ffffff; }
.custom-chat-list .card-header { background: #ffffff; color: #050505; border: none; border-bottom: 1px solid #e4e6eb; padding: 10px; font-weight: 700; font-size: 24px; }
.custom-chat-list .data-avatar img{width: 45px;height: 45px;}
.custom-chat-list  .data-content{padding-left: 56px;}
.custom-chat-list .data-content .name{font-weight: 700;color: var(--shades-01);}
.custom-chat-list .favorites-section { padding: 16px 20px; border-bottom: 1px solid #e4e6eb; }
.custom-chat-list .favorites-title { font-size: 12px; font-weight: 600; color: #65676b; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px; } 
.custom-chat-list .favorites-avatars { display: flex; gap: 8px; margin-bottom: 16px; } 
.custom-chat-list .favorites-avatars img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #ffffff; cursor: pointer; transition: transform 0.2s ease; }
.custom-chat-list .favorites-avatars img:hover { transform: scale(1.1); } 
.custom-chat-list ul { list-style: none; padding: 0; margin: 0; } 
.custom-chat-list ul li { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.2s ease; border-bottom: none; position: relative; }
.custom-chat-list ul li .avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; position: relative; } 
.custom-chat-list ul li .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.custom-chat-list ul li .avatar::after { content: ''; position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; background: #31a24c; border: 2px solid #ffffff; border-radius: 50%; } 
.custom-chat-list ul li.offline .avatar::after { background: #bcc0c4; } 
.custom-chat-list ul li .conversation-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.custom-chat-list ul li .conversation-name { font-size: 15px; font-weight: 600; color: #050505; display: flex; align-items: center; justify-content: space-between; } 
.custom-chat-list ul li .conversation-time { font-size: 13px; color: #65676b; white-space: nowrap; }
.custom-chat-list ul li .conversation-message { font-size: 13px; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.custom-chat-list ul li.unread .conversation-message { color: #050505; font-weight: 600; } 
.custom-chat-list ul li .unread-badge { width: 8px; height: 8px; background: #0084ff; border-radius: 50%; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.custom-chat-list .see-more { margin: 16px; background: transparent; border: none; text-align: center; cursor: pointer; color: #0084ff; font-weight: 600; padding: 8px; border-radius: 6px; }
.custom-chat-list .see-more:hover {background: #f2f3f5;}
.custom-chat-details { background: #ffffff; height: calc(100vh - 100px); position: sticky; top: 20px; padding: 0; border-radius: 10px; overflow: hidden; } 
.footer .dropdown{margin-bottom: 15px;}
.custom-chat-details .conversation.right .conversation-body .text{max-width: 400px; width: 100%;}
.custom-chat-details .conversation .img-fluid{max-width: 400px;width: 100%;display: block;}
.custom-chat-details .chat-colors-menu{width: auto;left: -20px;}
.custom-chat-details .chat-form .emoji-menu{right: 0; left: -252px;}
.custom-chat-details .card { border: none; border-radius: 0; height: 100%; display: flex; flex-direction: column; box-shadow: none; }
.custom-chat-details .card-header { background: #5e72e4; border-bottom: 1px solid #e4e6eb; padding: 12px 20px; font-weight: 600; font-size: 15px; color: #050505; }
.custom-chat-details .card-header .js_user-popover a{color: var(--shades-02);font-size: 17px;}
.custom-chat-details .card-header .user-info { display: flex; align-items: center; gap: 12px; } 
.custom-chat-details .card-header .user-avatar { width: 32px; height: 32px; border-radius: 50%; } 
.custom-chat-details .card-header .user-name { font-weight: 600; font-size: 15px; color: #050505; }
.custom-chat-details .card-header .user-status { font-size: 12px; color: #65676b; font-weight: 400; } 
.custom-chat-details .card-body { flex: 1; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #ffffff; }
.custom-chat-details .chat-conversations { flex: 1; padding: 20px; background: #ffffff; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .custom-chat-details .message { display: flex; gap: 8px; max-width: 65%; margin-bottom: 4px; } 
.custom-chat-details .message.received { align-self: flex-start; } 
.custom-chat-details .message.sent { align-self: flex-end; flex-direction: row-reverse; }
.custom-chat-details .message .message-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; align-self: flex-end; } 
.custom-chat-details .message .message-content { display: flex; flex-direction: column; gap: 4px; } 
.custom-chat-details .message.received .message-bubble { background: #e4e6eb; color: #050505; padding: 8px 12px; border-radius: 18px; font-size: 15px; line-height: 1.4; word-wrap: break-word; }
.custom-chat-details .message.sent .message-bubble { background: #0084ff; color: #ffffff; padding: 8px 12px; border-radius: 18px; font-size: 15px; line-height: 1.4; word-wrap: break-word; } 
.custom-chat-details .message .message-time { font-size: 11px; color: #65676b; padding: 0 12px; display: flex; align-items: center; gap: 4px; } 
.custom-chat-details .message.sent .message-time { justify-content: flex-end; }
.custom-chat-details .message .message-status { width: 12px; height: 12px; border-radius: 50%; } 
.custom-chat-details .chat-to { background: #ffffff; padding: 12px 20px; border-bottom: 1px solid #e4e6eb; display: flex; align-items: center; gap: 8px; } 
.custom-chat-details .chat-to .to { font-weight: 400; color: #65676b; font-size: 15px; }
.custom-chat-details .chat-to .tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; flex: 1; } 
.custom-chat-details .chat-to .tags li { background: #e7f3ff; color: #0084ff; padding: 4px 10px; border-radius: 16px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; } 
.custom-chat-details .chat-to .tags .btn-close { opacity: 0.6; width: 14px; height: 14px; background-size: 14px; } 
.custom-chat-details .chat-to .tags .btn-close:hover { opacity: 1; }
.custom-chat-details .chat-to .typeahead input { border: none; outline: none; padding: 4px 8px; font-size: 15px; min-width: 200px; background: transparent; color: #050505; } 
.custom-chat-details .chat-voice-notes { padding: 12px 20px; background: #f3f4f6; border-top: 1px solid #e5e7eb; } 
.custom-chat-details .voice-recording-wrapper { background: #ffffff; border-radius: 12px; padding: 12px 16px; border: 1px solid #e5e7eb; } 
.custom-chat-details .btn-voice-start, .custom-chat-details .btn-voice-stop { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease; }
.custom-chat-details .btn-voice-start{background: var(--shades-09);color: #ffffff;}
.custom-chat-details .chat-attachments { background: #ffffff; padding: 12px 20px; border-bottom: 1px solid #e4e6eb; } 
.custom-chat-details .chat-attachments ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; } 
.custom-chat-details .chat-attachments .x-progress { width: 200px; height: 4px; border-radius: 2px; background: #e4e6eb; }
.custom-chat-details .chat-attachments .progress-bar { background: #0084ff; border-radius: 2px; }
.custom-chat-details .x-form.chat-form { background: #ffffff; border-top: 1px solid #e4e6eb; padding: 12px 20px; display: flex; align-items: center; gap: 8px; } 
.custom-chat-details .chat-form-message { flex: 1; margin: 0; }
.custom-chat-list a.data-container:hover, .custom-chat-list .data-container.clickable:hover{background: rgba(29, 52, 97, 0.1);}
.custom-chat-details .x-form-tools { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; align-items: center; position: relative; }
.custom-chat-details .x-form-tools li { cursor: pointer; color: #6b7280; transition: all 0.3s ease; } 
.custom-chat-details .x-form-tools li:hover { color: var(--shades-09); background: #f3f4f6; }
.custom-chat-box .emoji-menu .nav-tabs{padding: 0 10px;}
.custom-chat-details .x-form-tools li i { font-size: 20px; }
.custom-chat-details .x-form-tools-post { background: #0084ff; color: #ffffff !important; width: 36px; height: 36px; } 
.custom-chat-details .x-form-tools-post:hover { background: #0073e6; transform: scale(1.05); }
.custom-chat-details .card-messages { display: flex; align-items: center; justify-content: center; height: 100%; border: none; background: #ffffff; } 
.custom-chat-details .card-messages .card-body { background: transparent; } 
.custom-chat-details .text-muted { color: #65676b !important; font-size: 17px; }
.custom-chat-details .btn-primary { background: #0084ff; border: none; padding: 10px 24px; font-weight: 600; transition: all 0.2s ease; font-size: 15px; } 
.custom-chat-details .btn-primary:hover { background: #0073e6; transform: translateY(-1px); }
.custom-chat-list .js_scroller::-webkit-scrollbar, .custom-chat-details .chat-conversations::-webkit-scrollbar { width: 8px;}

.custom-chat-list .js_scroller::-webkit-scrollbar-track, .custom-chat-details .chat-conversations::-webkit-scrollbar-track {background: transparent;}
.custom-chat-list .js_scroller::-webkit-scrollbar-thumb, .custom-chat-details .chat-conversations::-webkit-scrollbar-thumb { background: #bcc0c4; border-radius: 4px; }
.custom-chat-list .js_scroller::-webkit-scrollbar-thumb:hover, .custom-chat-details .chat-conversations::-webkit-scrollbar-thumb:hover { background: #8a8d91; }
.loading-dots::after { content: '...'; display: inline-block; animation: dots 1.5s steps(4, end) infinite; }

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}


/* Main Sidebar Container */
.sidebar-wrapper { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; border: 1px solid rgba(0, 0, 0, 0.06); }
.sidebar-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #4a90e2 0%, #357abd 50%, #2c5f9e 100%); }
.sidebar-wrapper .card { background: transparent; border: none; box-shadow: none; margin-bottom: 0;} 
.sidebar-wrapper .card-body { padding: 24px 0; }
.sidebar-wrapper .side-nav { list-style: none; padding: 0; margin: 0; } 
.sidebar-wrapper .side-nav > li { margin-bottom: 4px; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sidebar-wrapper .side-nav > li > a { display: flex; align-items: center; padding: 14px 16px; color: #4a5568; text-decoration: none; border-radius: 10px; font-size: 15px; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.sidebar-wrapper .side-nav > li > a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #4a90e2, #357abd); transform: scaleY(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sidebar-wrapper .side-nav > li:has(a[href*="delete"]) > a::before{background: #ff6b6b;}
.sidebar-wrapper .side-nav > li > a:hover { background: rgba(74, 144, 226, 0.08); color: #1a202c; transform: translateX(4px); box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1); } 
.sidebar-wrapper .side-nav > li > a:hover::before { transform: scaleY(1); }
.sidebar-wrapper .side-nav > li.active > a { background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, rgba(53, 122, 189, 0.1) 100%); color: #2c5f9e; font-weight: 600; box-shadow: 0 3px 10px rgba(74, 144, 226, 0.12); } 
.sidebar-wrapper .side-nav > li.active > a::before { transform: scaleY(1); }
.sidebar-wrapper .side-nav > li.active > a::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #4a90e2; border-radius: 50%; box-shadow: 0 0 8px rgba(74, 144, 226, 0.5); }
.sidebar-wrapper .side-nav .main-icon { margin-right: 12px; opacity: 0.85; transition: all 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }
.sidebar-wrapper .side-nav > li > a:hover .main-icon, .sidebar-wrapper .side-nav > li.active > a .main-icon { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 4px 8px rgba(74, 144, 226, 0.4)); }
.sidebar-wrapper .divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.2) 50%, transparent 100%); margin: 16px 12px; border: none; }
.sidebar-wrapper .side-nav .collapse { background: rgba(74, 144, 226, 0.04); border-radius: 8px; margin: 4px 0 8px 0; padding: 8px 0; border-left: 2px solid rgba(74, 144, 226, 0.25); } 
.sidebar-wrapper .side-nav .collapse ul { list-style: none; padding: 0; margin: 0; }
.sidebar-wrapper .side-nav .collapse ul li { margin: 2px 0; }
.sidebar-wrapper .side-nav .collapse ul li + li{margin-top: 3px;}
.sidebar-wrapper .side-nav .collapse ul li a { display: block; padding: 10px 20px 10px 40px; color: #5a6c7d; text-decoration: none; font-size: 14px; font-weight: 400; border-radius: 6px; margin: 0 8px; transition: all 0.3s ease; position: relative; border-color: transparent;}
.sidebar-wrapper .side-nav .collapse ul li a::before { content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(74, 144, 226, 0.3); transition: all 0.3s ease; } 
.sidebar-wrapper .side-nav .collapse ul li a:hover { background: rgba(74, 144, 226, 0.08); color: #1a202c; padding-left: 44px; }
.sidebar-wrapper .side-nav .collapse ul li a:hover::before { background: #4a90e2; transform: translateY(-50%) scale(1.3); box-shadow: 0 0 8px rgba(74, 144, 226, 0.4); }
.sidebar-wrapper .side-nav .collapse ul li.active a { background: rgba(74, 144, 226, 0.12); color: #2c5f9e; font-weight: 500; border-left: 3px solid #4a90e2; padding-left: 37px; }
.sidebar-wrapper .side-nav .collapse ul li.active a::before { background: #4a90e2; box-shadow: 0 0 10px rgba(74, 144, 226, 0.6); }
.sidebar-wrapper .side-nav > li > a[data-bs-toggle="collapse"]::after { content: '\276F'; position: absolute; right: 16px; font-size: 12px; transition: transform 0.3s ease; color: rgba(74, 90, 104, 0.5); }
.sidebar-wrapper .side-nav > li > a[data-bs-toggle="collapse"][aria-expanded="true"]::after { transform: rotate(90deg); color: #4a90e2; }
.sidebar-wrapper .side-nav > li > a[data-bs-toggle="collapse"]:hover::after {color: #4a90e2;}
.sidebar-wrapper .side-nav > li:has(a[href*="delete"]) > a { color: #ff6b6b; }
.sidebar-wrapper .side-nav > li:has(a[href*="delete"]) > a .main-icon *{color: #ff6b6b!important;fill:#ff6b6b!important}
.sidebar-wrapper .side-nav > li:has(a[href*="delete"]) > a:hover {background: rgba(255, 107, 107, 0.1); color: #ff8787;}
.sidebar-wrapper .side-nav > li:has(a[href*="delete"]).active > a::before { background: linear-gradient(180deg, #ff6b6b, #ff4757);}
.sidebar-wrapper::-webkit-scrollbar { width: 6px;}
.sidebar-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); border-radius: 10px; } 
.sidebar-wrapper::-webkit-scrollbar-thumb { background: rgba(74, 144, 226, 0.25); border-radius: 10px; transition: background 0.3s ease; }
.sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(74, 144, 226, 0.4); }

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sidebar-wrapper .side-nav > li { animation: slideInLeft 0.4s ease forwards;opacity: 0;}

.sidebar-wrapper .side-nav > li:nth-child(1) { animation-delay: 0.05s; }
.sidebar-wrapper .side-nav > li:nth-child(2) { animation-delay: 0.1s; }
.sidebar-wrapper .side-nav > li:nth-child(3) { animation-delay: 0.15s; }
.sidebar-wrapper .side-nav > li:nth-child(4) { animation-delay: 0.2s; }
.sidebar-wrapper .side-nav > li:nth-child(5) { animation-delay: 0.25s; }
.sidebar-wrapper .side-nav > li:nth-child(6) { animation-delay: 0.3s; }
.sidebar-wrapper .side-nav > li:nth-child(7) { animation-delay: 0.35s; }
.sidebar-wrapper .side-nav > li:nth-child(8) { animation-delay: 0.4s; }
.sidebar-wrapper .side-nav > li:nth-child(9) { animation-delay: 0.45s; }
.sidebar-wrapper .side-nav > li:nth-child(10) { animation-delay: 0.5s; }
.sidebar-wrapper .side-nav > li:nth-child(n+11) { animation-delay: 0.55s; }
.sidebar-wrapper.glass-effect { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px); border: 1px solid rgba(74, 144, 226, 0.15); } 
.sidebar-wrapper.glass-effect::before { opacity: 0.9; }
.sidebar-wrapper .side-nav > li.premium-feature > a::after { content: 'PRO'; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); font-size: 9px; font-weight: 700; padding: 2px 6px; background: linear-gradient(135deg, #ffd700, #ffed4e); color: #2c3e50; border-radius: 4px; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3); }




/* ============================================
   Settings Custom Content Section Styling
   ============================================ */

/* Main Container */
.custom-content {
  background: #fff;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Mobile Back Button */
.custom-content .mb10.pb10.border-bottom {
  background: #f8f9fa;
  padding: 15px 20px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #e9ecef !important;
  border-radius: 8px 8px 0 0;
}

.custom-content .text-link {
  color: #5e72e4;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.custom-content .text-link:hover {
  color: #324cdd;
  text-decoration: none;
}

/* Card Container */
.custom-content .card {
  border: none;
  box-shadow: none;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

/* Settings Header */
.custom-content .card-header {
  background: var(--shades-09);
  color: #fff;
  padding: 20px 25px;
  border-radius: 0;
  border: none;
}

.custom-content .card-header h6,
.custom-content .card-header .h6 {
  color: #fff;
  font-weight: 600;
  margin: 0;
  font-size: 16px;
}

/* Settings Body */
.custom-content .card-body {
  padding: 25px;
}

/* Form Groups */
.custom-content .form-group {
  margin-bottom: 25px;
}

.custom-content .form-group label {
  font-weight: 600;
  color: #32325d;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: block;
}

/* Input Fields */
.custom-content .form-control, .custom-content .form-select {
    height: 45px;
    background-color: #fff;
    border-radius: 10px;
    color: #000;
    border: 1px solid #d4d4d4;
}
.custom-content .input-group .form-select{border-left-color: transparent;}
textarea.form-control {
    height: 120px!important;
    resize: none;
}
.custom-content .form-control:focus, .custom-content .form-select:focus {
  border-color: #5e72e4;
  box-shadow: none;
  outline: none;
}


/* Input Groups */
.custom-content .input-group {
  border-radius: 6px;
  overflow: hidden;
}

.custom-content .input-group-text {
  background-color: #f3f3f3!important;
  border-right: none;
  color: var(--shades-01);
  padding: 12px 15px;
}

.custom-content .input-group .form-control {
  border-left: none;
}

/* Alert Boxes */
.custom-content .alert {
  border-radius: 6px;
  padding: 15px 20px;
  margin-bottom: 25px;
  border: none;
  align-items: center;
  gap: 12px;
}

.custom-content .alert-warning {
  background: linear-gradient(135deg, #ff9f43 0%, #ff7730 100%);
  color: #fff;
}

.custom-content .alert-info {
  background: linear-gradient(135deg, #00cfe8 0%, #00a3ff 100%);
  color: #fff;
}

.custom-content .alert-success {
  background: linear-gradient(135deg, #28c76f 0%, #1fa35a 100%);
  color: #fff;
}

.custom-content .alert-danger {
  background: linear-gradient(135deg, #ea5455 0%, #d63031 100%);
  color: #fff;
}

.custom-content .alert i {
  font-size: 20px;
}

/* Buttons */
.custom-content .btn {
  padding: 12px 25px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.custom-content .btn-primary {
  background: #4880ff;
  color: #fff;
}



.custom-content .btn-secondary {
  background: #e9ecef;
  color: #32325d;
}

.custom-content .btn-secondary:hover {
  background: #d3d7db;
}

.custom-content .btn-success {
  background: linear-gradient(135deg, #28c76f 0%, #1fa35a 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(40, 199, 111, 0.3);
}

.custom-content .btn-danger {
  background: linear-gradient(135deg, #ea5455 0%, #d63031 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(234, 84, 85, 0.3);
}

/* Help Text */
.custom-content .form-text,
.custom-content small.text-muted {
  color: var(--shades-09);
  font-size: 12px;
  margin-top: 8px;
  display: block;
}

/* Dividers */
.custom-content hr {
  border-top: 1px solid #e9ecef;
  margin: 30px 0;
}

/* Section Headers */
.custom-content .settings-section-header {
  font-size: 18px;
  font-weight: 700;
  color: #32325d;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #5e72e4;
}

/* Toggle Switches */
.custom-content .custom-switch {
  padding-left: 2.5rem;
}

.custom-content .custom-switch .custom-control-label::before {
  border-radius: 50px;
  background-color: #e9ecef;
  border: none;
}

.custom-content .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #5e72e4;
}

/* List Groups */
.custom-content .list-group-item {
  border: 1px solid #e9ecef;
  padding: 15px 20px;
  transition: all 0.2s ease;
}

.custom-content .list-group-item:hover {
  background-color: #f8f9fa;
  border-color: #5e72e4;
}

.custom-content .list-group-item:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.custom-content .list-group-item:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* File Upload */
.custom-content .custom-file-label {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px 15px;
}

.custom-content .custom-file-label::after {
  background: #5e72e4;
  color: #fff;
  border-radius: 0 6px 6px 0;
}

/* Username Preview */
.custom-content .username-preview {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8f9fa;
  padding: 12px 15px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #e9ecef;
  border-right: none;
  color: #8898aa;
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 767px) {
  .custom-content {
    border-radius: 0;
  }
  
  .custom-content .card-body {
    padding: 20px 15px;
  }
  
  .custom-content .mb10.pb10.border-bottom {
    border-radius: 0;
  }
  
  .custom-content .btn {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-content .card {
  animation: fadeIn 0.3s ease;
}

/* Verification Badge */
.custom-content .verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #28c76f 0%, #1fa35a 100%);
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.custom-content .verification-badge i {
  font-size: 14px;
}

/* Table Styling */
.custom-content .table {
  margin-bottom: 0;
}

.custom-content .table th {
  font-weight: 600;
  color: #32325d;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-top: none;
  border-bottom: 2px solid #e9ecef;
  padding: 15px;
}

.custom-content .table td {
  padding: 15px;
  vertical-align: middle;
  color: #525f7f;
  font-size: 14px;
}

.custom-content .table-striped tbody tr:nth-of-type(odd) {
  background-color: #f8f9fa;
}

/* Empty State */
.custom-content .empty-state {
  text-align: center;
  padding: 60px 20px;
}

.custom-content .empty-state i {
  font-size: 64px;
  color: #e9ecef;
  margin-bottom: 20px;
}

.custom-content .empty-state h5 {
  color: #8898aa;
  font-weight: 600;
  margin-bottom: 10px;
}

.custom-content .empty-state p {
  color: #adb5bd;
  font-size: 14px;
}

/* Loading State */
.custom-content .loading-spinner {
  text-align: center;
  padding: 40px 20px;
}

.custom-content .spinner-border {
  color: #5e72e4;
  width: 3rem;
  height: 3rem;
}

.custom-content .card-footer{border-radius: 0!important;}
.custom-content  .card-header .main-icon, .custom-content .card-header .main-icon *{fill: #fff!important;color: #fff!important;}
.custom-content .form-table-row .main-icon, .custom-content .form-table-row .main-icon *{fill: #5e72e4!important;color: #5e72e4!important;}
.custom-content .custom-x-image{height: 150px;width: 100%;    border: 2px dashed #5e72e4;}
.custom-content .button-label .main-icon, .custom-content .button-label .main-icon *{fill: #fff!important;color: #fff!important;}
.custom-content .custom-x-image .x-uploader .fa{font-size: 50px; color: #5e72e4;}
.custom-content .button-label .icon{background: #5e72e4;opacity: 1; filter: grayscale(0);}
@media (max-width: 1024px) {
  .main-header{padding-left: 0;}
  .main-container{padding-left: 0;}
  .settings-container{padding-left: 16px!important;}
  .custom-sidebar{left: -250px;}
  .main-container .add-story .item-preview{width: 84px;height: 84px;}
  .main-container .add-story{width: 84px;height: 84px;}
  .main-container .add-story .img{width: 80px;height: 80px;}
  .custom-sidebar{top: 0;height: 100vh;border-radius: 0;}
}

@media (max-width: 768px) {
  .custom-chat-list, .custom-chat-details {height: auto;  position: relative; }
  .custom-chat-list .card, .custom-chat-details .card {  height: auto;  min-height: 500px;}
  .custom-chat-details .message {max-width: 85%;}
  .custom-tabs .tabs-list { flex-direction: column; gap: 4px; } 
  .custom-tabs .tab-item { width: 100%; } 
  .custom-tabs .tab-link { justify-content: flex-start; padding: 14px 16px; }
  .custom-chat-box { max-width: 100%;border-radius: 0;height: 100vh;}
  .custom-chat-box .chat-widget-content {height: calc(100vh - 72px);}
  .sidebar-wrapper .card-body { padding: 16px 12px;}
  .sidebar-wrapper .side-nav > li > a { padding: 12px 14px; font-size: 14px;}
  .sidebar-wrapper .side-nav .collapse ul li a { padding: 8px 16px 8px 36px; font-size: 13px;}
}

@media (max-width: 480px) {
  .settings-container {padding-left: 0 !important;}
  body{padding-bottom: 120px;}
  .main-side-nav{padding-bottom: 150px;}
  .main-header .logo img { max-height: 36px; }
  /* .main-header{padding-left: 250px;} */
  .main-header .logo-wrapper{padding-left: 0;}
  .logo{padding: 0;}
  .custom-tabs .tab-text {font-size: 13px;}
  .custom-tabs .tab-icon {width: 16px; height: 16px;}
  .custom-content-tabs{flex-direction: column;}
  .custom-content-tabs ul{width: 100%;}
  .custom-content-tabs .btn-primary{width: 100%;}
  .main-container{padding-bottom: 100px;}
  .settings-container{padding-bottom: 0;}
  .main-container .mb10{display: inline-block;}
  .main-container .posts-filter{display: flex;flex-direction: column;gap: 5px;position: relative;}
  .main-container .js_posts-filter{width: 100%;}
  .main-container .posts-filter .countries-filter{width: 100%;display: block;}
  .main-container .posts-filter .mr10{margin-right: 0!important;}
  .main-container .posts-filter .btn-group .btn{text-align: left;padding: 12px 10px!important;}
  .album-details{padding: 8px;}
  .ui-box img{width: 60px;height: 60px;}
  .profile-name-wrapper{margin-top: 60px;}
  
  .profile-buttons-wrapper .btn{padding: 12px 16px; margin-top: 16px;}
  .custom-chat-details{padding: 10px;}
  .custom-chat-details .x-form.chat-form{flex-direction: column;padding: 0;}
  .custom-chat-details .chat-form-message{width: 100%;}
  .custom-chat-details .x-form-tools{width: 100%;}
  .custom-chat-details .chat-conversations{padding: 10px;}
  .footer-bottom-bar-links .dropdown-widget .dropdown-item{color: #000 !important; background: #f7f7f7 !important; padding: 12px!important; border-radius: 12px !important; font-size: 13px;margin-bottom: 8px;}
  .footer-bottom-bar-links .dropdown-widget .dropdown-item img{width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2); margin-right: 0 !important;}
  .footer-bottom-bar-links .dropdown-widget .dropdown-item .svg-container{margin-right: 0!important;margin-bottom: 8px;}
  .custom-drop-menu .dropdown-item{justify-content: center;}
  .custom-drop-menu{overflow: hidden;box-shadow: none!important;}
  .custom-mobile-footer {display: block;}
  .custom-reels .reel-video-wrapper .reel-video-container .video-controlls{bottom: 60px;}
  .reel-container{padding-top: 0;}
}

@media (max-width: 360px) {
  .custom-mobile-footer .footer-bottom-bar-links { padding: 10px 12px 14px;height: 65px;}
  .custom-mobile-footer .footer-bottom-bar-links .link a { padding: 6px; min-width: 44px; min-height: 44px; } 
  .custom-mobile-footer .footer-bottom-bar-links .header-icon { width: 24px; height: 24px; } 
  .custom-mobile-footer .footer-bottom-bar-links .custom-add > a { width: 54px; height: 54px; bottom: 24px; } 
  .custom-mobile-footer .footer-bottom-bar-links .custom-add .header-icon { width: 26px; height: 26px; } 
  .custom-mobile-footer .container::before { width: 74px; height: 36px; }
  
}
/* .custom-notification-dropdown .dropdown-widget-header{background-color: rgba(74, 144, 226, 0.12);color: #2c5f9e;  font-weight: 500;  border-left: 3px solid #4a90e2;}
.custom-notification-dropdown .dropdown-widget-header .title{font-size: 18px;}
.custom-notification-dropdown .switch.sm{width: 30px; height: 17px;} */