/* Global Css Start*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); .poppins-thin { font-family: "Poppins", serif; font-weight: 100; font-style: normal; } .poppins-extralight { font-family: "Poppins", serif; font-weight: 200; font-style: normal; } .poppins-light { font-family: "Poppins", serif; font-weight: 300; font-style: normal; } .poppins-regular { font-family: "Poppins", serif; font-weight: 400; font-style: normal; } .poppins-medium { font-family: "Poppins", serif; font-weight: 500; font-style: normal; } .poppins-semibold { font-family: "Poppins", serif; font-weight: 600; font-style: normal; } .poppins-bold { font-family: "Poppins", serif; font-weight: 700; font-style: normal; } .poppins-extrabold { font-family: "Poppins", serif; font-weight: 800; font-style: normal; } .poppins-black { font-family: "Poppins", serif; font-weight: 900; font-style: normal; }

:root{
    --lgrey: #9D9D9D;
    --grey:#8A8A8A;
    --dgrey:#525252;
    --black:#000;
    --card-bg: #1A1A1A;
    --white:#fff;
    --lwhite:#ffffffa9;
    --link:#2690FC;
    --primary-bg:#2690FC;
    --purple:#B143FA;
}
.bg-primary{background-color: var(--primary-bg);}
.bg-purple{background-color: var(--purple);}
.bg-green{background-color: #4AD253;}
.bg-red{background-color: #DF1717;}
.purple{color: var(--purple);}
body .lgrey{color: var(--lgrey);}
body .grey{color: var(--grey);}
body .black{color: var(--black);}
body .white{color: var(--white);}
body .lwhite{color: var(--lwhite);}
body .dgrey{color: var(--dgrey);}
body .bg1A1A1A{background-color: #1A1A1A !important;}
body .bg303030{background-color: #303030 !important;}
body .bc424242{border-color: #424242 !important;}

.rounded-sm{border-radius: 10px;}
.rounded-lg{border-radius: 16px;}
.h_white:hover{color: #fff;}
.h_text_underline:hover{text-decoration: underline;}
.transition{transition: all 0.3s ease-in-out;}

body{font-size: 1rem;font-family: "Poppins", serif; font-weight: 400; font-style: normal;line-height: 1.6;color: var(--grey);}
p{font-weight: 400;}
a{color: var(--link);}
body .fw-500{font-weight: 500;}
.rounded{border-radius: 6px !important;}
h1, h2, h3, h4, h5, h6{color:var(--black);}
h3{font-size: 26px;font-weight: 600;line-height: 2.4rem;}
.border-color-303030{border-color: #303030 !important;}
.fs-7{font-size: 14px;line-height: normal;}
.fs-8{font-size: 12px;line-height: normal;}
.fs-9{font-size: 10px;line-height: normal;}


/* Buttons */
.btn{padding: .9rem .75rem;border-radius: 10px;font-weight: 300;transition: all 0.5s ease-in-out !important;text-transform: capitalize;}
.btn:hover, .btn:focus{box-shadow: none;color: #fff;outline: none;}
.btn-simple{border: none;background-color: transparent;}
.btn-simple:hover{border: none;background-color: transparent;box-shadow: none !important;}
.btn-border{background-color: transparent;border: 1px solid #0B1447;}
.btn-border:hover{color: #000;}
.btn-border-white, .btn-border-white:hover{background-color: transparent;border: 1px solid #fff;color: #fff;}
.btn-grey{background-color: #1A1A1A;border: 1px solid #393939;color: #fff;}
.modal-footer .btn-grey{background-color: #272727;}
.btn-grey:hover{background-color: transparent;border: 1px solid #fff;color: #fff;}
.btn-lgrey{background-color: #333;border: 1px solid #333;color: #fff;}
.btn-lgrey:hover{background-color: transparent;border: 1px solid #fff;color: #fff;}
.btn-red{background-color: #ff00005b;border: none;color: #FF0000;}
.btn-red:hover{background-color: #ff0000;color: #fff;}

.h_alt_black:hover{color: #000;text-decoration: underline;}
.h_alt_white:hover{color: #fff;text-decoration: underline;}

.btn-gradiant {background: linear-gradient(90deg, #B143FA 0%, #2690FC 50%, #B143FA 100%);background-size: 200% 200%;color: #fff;border: none;}
.btn-gradiant:hover {background-position: right center;color: #fff;}

.bg-gradiant{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);}

/* Drop Down */
.dropdown-menu { background-color: #303030; color: #fff; padding-top: 0; padding-bottom: 0; border-radius: 6px;}
.dropdown-item{border-radius: 6px;padding: 0;}
.dropdown-item:hover{background-color: transparent;}
.post_option .dropdown-item>*{border-radius: 6px;padding: 0.6rem 0.5rem 0.6rem 0.6rem;display: flex;width: 100%;text-align: left;font-size: 12px;}
.post_option .dropdown-item>*>img{width: 18px;height: 18px;vertical-align: sub;}
.post_option .dropdown-item>*:hover, .post_option .dropdown-item>*.active{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);}

.sort_dropdown{display: inline;}
.sort_option .dropdown-item>a{border-radius: 6px;padding: 0.6rem 0.5rem 0.6rem 0.6rem;display: flex;width: 100%;text-align: left;font-size: 12px;}
.sort_option .dropdown-item>a:hover, .sort_option .dropdown-item>a.active{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);}

/* Modals */
.modal-content { background-color: #1A1A1A; color: #fff; border-radius: 10px; }
.modal-header{position: relative;justify-content: center;}
.modal-content button.btn-close { filter: invert(1); position: absolute; top: 20px; right: 20px; }
.modal-title{font-size: 24px;font-weight: 500;text-transform: capitalize;}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {width: 6px;}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {background-color: darkgrey;outline: 1px solid slategrey;}

/* Placeholder */
.form-control::placeholder { color: var(--grey); text-transform: capitalize; opacity: 1; }
.form-control::-webkit-input-placeholder { color: var(--grey); text-transform: capitalize; }
.form-control::-moz-placeholder { color: var(--grey); text-transform: capitalize; }
.form-control:-ms-input-placeholder { color: var(--grey); text-transform: capitalize; }
.form-control:-moz-placeholder { color: var(--grey); text-transform: capitalize; }


/* Form Control */
form{color: var(--dgrey);}
.form-select:disabled {background-color: #303030;opacity: 0.5;cursor: not-allowed;}
.bg-form-control{background-color: #F3F5F7;border-radius: 10px;padding: 0.9rem 1rem;}
.form-control, .form-select{border-radius: 10px;padding: 0.8rem 1rem;border: 1px solid #303030;color: #fff;background-color: #303030;}
.form-control:focus, .form-select:focus{box-shadow: none;color: #fff;background-color: #303030;border-color: var(--grey);}
.input-group-text{border: 1px solid transparent !important;color: #fff;background-color: #303030;}
.form-simple{background-color: transparent !important;border: none;padding: 0;border-radius: 0;}
.upload{border: 1px solid transparent;
    border-radius: 10px;
    background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(to right, #B143FA, #2690FC);
    background-origin: border-box;
    background-clip: content-box, border-box;
    text-align: center;width: 144px;height: 42px;text-align: center;display: flex;align-items: center;justify-content: center;cursor: pointer;}

.user_container .form-control, .user_container .form-select{color: var(--black);background-color: #F3F5F7;border-color: #F3F5F7;}
.user_container .form-control:focus, .user_container .form-select:focus{color: var(--black);background-color: #F3F5F7;border-color: var(--grey);}
.user_container .form-control::placeholder { color: var(--grey); text-transform: capitalize; opacity: 1; }
.user_container .form-control::-webkit-input-placeholder { color: var(--grey); text-transform: capitalize; }
.user_container .form-control::-moz-placeholder { color: var(--grey); text-transform: capitalize; }
.user_container .form-control:-ms-input-placeholder { color: var(--grey); text-transform: capitalize; }
.user_container .form-control:-moz-placeholder { color: var(--grey); text-transform: capitalize; }
.user_container .input-group-text{background-color: #F3F5F7;border: 1px solid transparent !important;color: var(--dgrey);}

.profile_form .input-group-text{border-top-left-radius: 50rem!important;border-bottom-left-radius: 50rem!important;}
.profile_form .form-control{border-top-right-radius: 50rem!important;border-bottom-right-radius: 50rem!important;}

.search-form .input-group-text{border-top-left-radius: 16px!important;border-bottom-left-radius: 16px!important;font-size: 20px;}
.search-form .form-control{border-top-right-radius: 16px!important;border-bottom-right-radius: 16px!important;}

.search-story .input-group-text{padding: 0.3rem 0.5rem;border-top-left-radius: 6px!important;border-bottom-left-radius: 6px!important;}
.search-story .form-control{padding: 0.65rem;font-size: 12px;border-top-right-radius: 6px!important;border-bottom-right-radius: 6px!important;}

.user_container .input-group-text{border-top-right-radius: 16px!important;border-bottom-right-radius: 16px!important;}


/* Phone [type="tel"] */
.iti {display: flex !important;}

/* Checkbox */
.form-check-input[type=checkbox]{border: 2px solid var(--dgrey);width: 1.1em;height: 1.1em;border-radius: 2px !important;}
.form-check-input[type=checkbox]:focus{box-shadow: none;background-color: var(--link);border-color: var(--link);}

/* Radio */
.form-check-input[type="radio"]:checked,
.form-check-input[type="radio"]:not(:checked) {position: absolute;left: -9999px;}
.form-check-input[type="radio"]:checked + label,
.form-check-input[type="radio"]:not(:checked) + label {position: relative;padding-left: 28px;cursor: pointer;display: inline-block;color: var(--dgrey);}
.form-check-input[type="radio"]:checked + label:before,
.form-check-input[type="radio"]:not(:checked) + label:before {content: "";position: absolute;left: 0;top: 2px;width: 20px;height: 20px;border: 1px solid #212121;border-radius: 100%;background: transparent;}
.form-check-input[type="radio"]:checked + label:before{border-color: var(--link);}
.form-check-input[type="radio"]:checked + label:after,
.form-check-input[type="radio"]:not(:checked) + label:after {content: "";width: 12px;height: 12px;background: var(--link);position: absolute;top: 6px;left: 4px;border-radius: 100%;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.form-check-input[type="radio"]:not(:checked) + label:after {opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
.form-check-input[type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}

/* Checkbox look like Radio */
.checkbox_as_radio .form-check-input[type="checkbox"]:checked,
.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) {position: absolute;left: -9999px;}
.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label,
.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label {position: relative;}
.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:before,
.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label:before {content: "";position: absolute;left: 0;top: 2px;width: 20px;height: 20px;border: 1px solid #212121;border-radius: 100%;background: transparent;}
.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:before{border-color: var(--link);}
.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:after,
.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label:after {content: "";width: 12px;height: 12px;background: var(--link);position: absolute;top: 6px;left: 4px;border-radius: 100%;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label:after {opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}

/* List Checkbox */
.list_checkbox .form-check-input[type="checkbox"]:checked, .list_checkbox .form-check-input[type="checkbox"]:not(:checked){position: absolute;left: -9999px;}
.list_checkbox .form-check-input[type="checkbox"] + label{position: relative;padding: 0.6rem 1.5rem;display: inline-block;vertical-align: middle;border-radius: 50rem !important;cursor: pointer;background-color: #303030;display: flex;align-items: center;font-weight: 300;}
.list_checkbox .form-check-input[type="checkbox"]:checked + label{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);padding-left: 24px;}
.list_checkbox .form-check-input[type="checkbox"] + label::before {display: inline-block;margin-right: 10px;font-size: 24px;line-height: 24px;color: #fff;}
.list_checkbox .form-check-input[type="checkbox"]:checked + label:before{font-family: bootstrap-icons !important;content: "\F633";}

/* reverse Radio */
.reverse .form-check-input[type="radio"]:checked + label, .reverse .form-check-input[type="radio"]:not(:checked) + label { padding-left: 0 !important; padding-right: 28px;}
.reverse .form-check-input[type="radio"]:checked + label:before, .reverse .form-check-input[type="radio"]:not(:checked) + label:before{left: auto;right: 0;}
.reverse .form-check-input[type="radio"]:checked + label:after, .reverse .form-check-input[type="radio"]:not(:checked) + label:after{left: auto;right: 4px;}

.reverse.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label, .checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label { padding-left: 0 !important; padding-right: 28px;}
.reverse.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:before, .checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label:before{left: auto;right: 0;}
.reverse.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:after, .checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label:after{left: auto;right: 4px;}

/* Folders Checkbox */
.folders .form-check{padding: 0;}
.folders .form-check-input[type="checkbox"]:checked, .folders .form-check-input[type="checkbox"]:not(:checked){position: absolute;left: -9999px;}
.folders .form-check-input[type="checkbox"] + label{position: relative;display: inline-block;vertical-align: middle;cursor: pointer;display: flex;align-items: center;font-weight: 600;padding: 1rem 1.1rem;}
.folders .form-check-input[type="checkbox"] + label::before {display: inline-block;margin-right: 10px;font-size: 24px;line-height: 24px;color: #fff;}
.folders .form-check-input[type="checkbox"] + label:after{content: url(../img/folder_check.svg);position: absolute;top: 0;right: 5px;opacity: 0;font-size: 24px;}
.folders .form-check-input[type="checkbox"]:checked + label:after{opacity: 1;}

/* Reasons */
.alt_radio .form-check{padding: 0;margin-bottom: 1.5rem;}
.alt_radio .form-check-input[type="radio"]:checked + label,
.alt_radio .form-check-input[type="radio"]:not(:checked) + label {display: block;color: #fff;}
.alt_radio .form-check-input[type="radio"]:checked + label:before,
.alt_radio .form-check-input[type="radio"]:not(:checked) + label:before{border-color: var(--grey);}
.alt_radio .form-check-input[type="radio"]:checked + label:after, .alt_radio .form-check-input[type="radio"]:not(:checked) + label:after{background-color: #B143FA;}
.alt_radio .form-check-input[type="radio"]:checked + label:before{border-color: #B143FA;}

.alt_radio.checkbox_as_radio .form-check{padding: 0;margin-bottom: 1.5rem;}
.alt_radio.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label,
.alt_radio.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label {display: block;color: #fff;}
.alt_radio.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:before,
.alt_radio.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label:before{border-color: var(--grey);}
.alt_radio.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:after, .alt_radio.checkbox_as_radio .form-check-input[type="checkbox"]:not(:checked) + label:after{background-color: #B143FA;}
.alt_radio.checkbox_as_radio .form-check-input[type="checkbox"]:checked + label:before{border-color: #B143FA;}

/* Custom checkbox (terms) */
.custom-checkbox { display: flex; align-items: center; cursor: pointer; }
.custom-checkbox input { display: none; }
.custom-checkbox .checkmark { width: 28px; height: 28px; border: 1px solid #3F3F3F; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-right: 10px; transition: all 0.3s ease-in-out; background-color: #000;}
.custom-checkbox input:checked + .checkmark { background-color: white; border-color: white; }
.custom-checkbox input:checked + .checkmark::after { content: "✔"; font-size: 16px; color: black; font-weight: bold; }

/* Range Slider */
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: all; width: 16px; height: 16px; background-color: #B143FA; border-radius: 50%; box-shadow: 0 0 0 1px #B143FA; cursor: pointer;}
input[type=range]::-moz-range-thumb { -webkit-appearance: none; pointer-events: all; width: 16px; height: 16px; background-color: #B143FA; border-radius: 50%; box-shadow: 0 0 0 1px #B143FA; cursor: pointer;}
input[type=range]::-webkit-slider-thumb:hover {background: #f7f7f7;}
input[type=range]::-webkit-slider-thumb:active {box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0  #387bbe;}
input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; width: 100%; background-color: #585858; pointer-events: none;}

/* Switch checkbox */
.switch { position: relative; display: inline-block; width: 3.2em; height: 1.75em; border-radius: 1.75em; background:var(--dgrey); vertical-align: middle; margin: 0 0.5rem; }
.switch > input { -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0; width: 100% !important; height: 100%; position: absolute !important; }
.switch > label { display: block !important; width: 100% !important; height: 100%; border-radius: 1.75em; -webkit-transition: background 0.125s; transition: background 0.125s; }

.switch > label::before,
.switch > label::after { position: absolute; content: ""; top: 0; left: 0; height: 1.75em; border-radius: inherit; -webkit-transition: all 0.2s; transition: all 0.2s; }
.switch > label::before { background: #333; width: 100%; }
.switch > label::after {right: 1.5em;background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%); height: 24px;width: 24px;top: 2px;left: 3px;}
.switch > input:checked + label { background: white; }
.switch > input:checked + label::after { right: 0; left: 1.5em; }
.switch > input:active + label::after { right: 1.3em; left: 0; }
.switch > input:active + label::before, .switch > input:checked + label::before {width: 60%;left: 20%;top: 30%;height: 40%;opacity: 0;}


/* Global Css End*/

/* User Screen Login, Sign, Forget Password, OTP etc */
.logo-wrap { padding: 20px;min-width: 275px;} .user_container { display: flex; height: 100vh; overflow: hidden; } .left-side { flex: 1; background: url('../img/half-bg.png') center/cover no-repeat; color: white; } .right-side { flex: 1; background: white; display: flex; flex-direction: column; justify-content: center; padding: 30px; overflow-y: auto; } .form-container { max-width: 600px; width: 100%; padding: 2rem; margin: 0 auto; background: white; } .right-side::-webkit-scrollbar { width: 5px; } .right-side::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; } .bg-left {background: url('../img/half-bg.png') no-repeat center center;background-size: cover;min-height: 100%;}

/* OTP Input */
.otp-container {display: flex;justify-content: flex-start;}
.otp-input { width: 52px; height: 52px; font-size: 16px; text-align: center; border: 1px solid #212121; background-color: transparent; border-radius: 10px;}
.otp-input:focus {border-color: var(--grey);outline: none;}

/* =========== HeadBar =========== */
.headbar {background: #1A1A1A;padding: 10px 20px;height: 92px;display: flex;align-items: center;position: sticky;top: 0;z-index: 10;}
.headbar .logo-wrap{padding: 0;}



/* Notification */
.notification > .btn{width: 42px;height: 42px;padding: 0;display: flex;align-items: center;justify-content: center;font-size: 22px;}
.notification > .btn:hover{box-shadow: none;}
.notification > .btn .ring{background-color: #14ff14; color: #000; width: 10px; height: 10px; top: 5px; right: -5px;}
.notification .dropdown-menu,
.user_dropdown .dropdown-menu{min-width: 380px;position: relative;background-color: transparent;padding: 15px 0 0 0;border: none;}
.notification .dropdown-menu:before{content: "";border-bottom: 10px solid #484848b8;border-left: 10px solid transparent;border-right: 10px solid transparent;position: absolute;top: 5px;right: 10px;}
.notification .dropdown-head .dropdown-header{font-size: 16px;color: #fff;padding: 0;}
.notification .dropdown-item{display: flex;align-items: center;padding: 15px 1rem;border-bottom: 1px solid #ffffff28;}

/* Blur BG or some small widget in dropdown */
.blur-bg{background-color: transparent;border-radius: 10px;overflow: hidden;border: 1px solid #484848;position: relative;right: -40px;}
.blur-bg:before{content: "";width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(43, 42, 42, 0.8);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);z-index: -1;}
.dropdown-head{display: flex;align-items: center;padding: 1rem;justify-content: space-between;}
.noti_date{background-color: #282828b0; border-radius: 10px 10px 0 0; padding: 8px 1rem; color: #fff; font-size: 12px; font-weight: 300;margin: 0;}
.noti_text{max-width: 260px;font-size: 13px;color: var(--white);font-weight: 500;margin: 0;text-wrap: auto;padding-left: 10px;}
.noti_time{font-size: 13px;font-weight: 400;color: #fff;margin-left: auto;align-self: flex-start;}
.mark-read{color: var(--link);font-size: 13px !important;}
.mark-read:hover{color: var(--white);text-decoration: underline;}

/* User Drop down */
.user_dropdown .blur-bg{right: auto;}
.user_dropdown .dropdown-head{justify-content: flex-start;}
.user_name{color: #fff;padding-left: 10px;margin: 0;}
.user_loc{font-size: 12px;color: #8A8A8A;display: block;}
.gen{font-size: 12px;color: #B143FA;text-decoration: none;}
.user_dropdown .btn-border-white:hover{background-color: #000;box-shadow: 3px 3px 15px 0 var(--black);}
.user_dropdown li a{color: #fff;text-decoration: none;padding: 8px 1rem;display: block;}
.notification .dropdown-item-list a,
.user_dropdown ul li a{transition: all 0.3s ease-in-out;}
.notification .dropdown-item-list a:hover,
.user_dropdown ul li a:hover{background-color: #282828;}

/* =========== Sidebar =========== */
.sidebar { width: 275px;  position: fixed; background: #1A1A1A; color: white; padding-top: 1rem;padding-bottom: 1rem; transition: 0.3s; display: flex;flex-direction: column;overflow: auto;bottom: 0;top: 92px;}
.sidebar::-webkit-scrollbar, .dropdown-item-list::-webkit-scrollbar {width: 0.3em;}
.sidebar::-webkit-scrollbar-track, .dropdown-item-list::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
.sidebar::-webkit-scrollbar-thumb, .dropdown-item-list::-webkit-scrollbar-thumb {background-color: var(--grey);}
/* Side Menu */
.side_menu a, .my_contact a, .recent_chats a {padding: 15px; display: flex;color: white; text-decoration: none; border-radius: 10px; transition: background 0.3s ease-in-out; position: relative; margin-bottom: 10px; align-items: center;}
.side_menu a *{z-index: 10;position: relative;}
.side_menu a span{padding-left: 10px;}
.side_menu a:before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%); opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 0; border-radius: 10px; }
.side_menu a:hover:before, .side_menu a:active:before, .side_menu a:focus:before, .side_menu a.active:before { opacity: 1; }

/* Radio Tabs */
.radio-tabs {margin-bottom: 15px;}
.radio-tabs label {cursor: pointer;padding: 5px 10px;border-radius: 5px;}
.tab-panel {display: none;padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
.tab-panel.active {display: block;}

/* Live Stream Sidebar */
.live_sidebar{width: 400px;}
.live_img{position: relative;}
.live_img .btn{z-index: 2;}
.live_chat{background-color: #1A1A1A;padding: 1.5rem;border-radius: 16px;top: 120px !important;}
.circle{width: 10px;height: 10px;display: inline-block;border-radius: 50rem;}
/* My Contact Bottom */
.my_contact{border-top: 1px solid #303030;padding-top: 40px;color: #fff;}
.my_contact h5{color: #fff;font-size: 18px;padding: 0 15px;}
.my_contact a{margin-bottom: 0;}
.my_contact a .user_name{line-height: 1rem;}
.my_contact a:hover{background-color: #282828b0;}
.my_c_img{width: 36px;height: 36px;object-fit: cover;border-radius: 50rem;overflow: hidden;}

/* add_slider */
.add_slider{width: 100%;}
.add_slider .list{display: flex;}
.add_slider .add_story{flex: 0 0 auto;width: auto;min-width: 48px;}
.add_slider .story_slider{display: inline-block;flex: 1 0 0%;}
.add_slider .list::-webkit-scrollbar {width: 0.3em;height: 0.3em;}
.add_slider .list::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
.add_slider .list::-webkit-scrollbar-thumb {background-color: var(--grey);}
.search-story{flex: 1 0 100%;}
.add_slider .list .item{font-size: 12px;color: #fff;text-decoration: none;text-align: center;position: relative;display: flex;flex-direction: column;padding:0 0.5rem;}
.add_slider .list .item img{margin-bottom: 8px;max-width: 100%;width: auto;margin-left: auto;margin-right: auto;border: 2px inset #9c4ffa;border-radius: 50rem;display: block;}
.plus{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -10%);cursor: pointer;}
.add_story label{cursor: pointer !important;}
.add_story img{border: 2px inset black !important;}
.add_story .plus img{margin-bottom: 0 !important;border: none !important;}
.story_circle{width: 40px;height: 40px;border-radius: 50rem;overflow: hidden;display: block;margin-bottom: 5px;}

/* Recent Chats */
.recent_chats h5{color: #fff;font-size: 18px;}
.recent_chats a{padding: 15px;border-radius: 0;margin: 0 -15px 0;}
.recent_chats a .user_name{line-height: 1rem;margin-right: auto;}
/* .recent_chats a:hover{background-color: #282828b0;} */


/* =========== Content =========== */

.content-wrapper {transition: 0.3s;min-height: calc(100vh - 92px);background-color: black;}
.content-wrapper .btn:hover{box-shadow: 3px 3px 15px 0 var(--black);}
.content{padding: 1.5rem;flex: 1 0 0%;margin-left: 275px;margin-right: 275px;}
.content.no-sidbar{margin-left: 0;margin-right: 0;}
.light-text{color: var(--grey);}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6{color: #fff;}
.card {padding: 1.5rem ;border-radius: 16px;color: var(--white);background-color: var(--card-bg);}
.post_view{border-radius: 10px;}
.view_list li {margin-left: -10px;position: relative;}
.view_list {padding-left: 10px;}
.view_list .view_count {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 12px;font-weight: 300;}
.post_comment .user_avatar{height: 42px;max-width: 42px;flex: 1 0 auto;}
.post_comment .form-control{font-size: 14px;padding: 0.65rem 1rem;}
.post_comment .btn{padding: 0.55rem 0.55rem;height: 42px;min-width: 42px;}

.tag {background-color: #B143FA; font-size: 8px; padding: 3px 10px; border-top-left-radius: 10px;}
.video_btn{transform: translate(-50%, -50%);}
.video_btn_wrap{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.4);}
.topic_wrapper{position: relative;}
.view_all{background-color: #000;display: block;padding: 20px 0;z-index: 2;}
.three_dots:focus{box-shadow: none;outline: none;}

/* Chat Widget */
.chat-container { height: calc(100vh - 142px); display: flex; flex-direction: column;}
/* Chat Header */
.chat-header { background: var(--card-bg); border-radius: 16px; color: white; padding: 1.5rem; display: flex; align-items: center;}
/* Chat Body */
.chat-body { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px;}
/* Date Separator */
.chat-date { text-align: center; font-size: 14px; background: #2B2A2A; padding: 5px 10px; border-radius: 33px; width: fit-content; align-self: center; margin: 10px 0; border: 1px solid #484848; color: #fff;}
/* Message Container */
.message-container { display: flex; align-items: flex-start; gap: 10px; max-width: 70%;}
.message-container.sent {align-self: flex-end;flex-direction: row-reverse;}
/* User Avatar */
.avatar { width: 42px; height: 42px; border-radius: 50%; background: #000;}
/* Message Bubbles */
.chat-message { padding: 9px 15px; word-wrap: break-word; position: relative; border: 1px solid #484848; color: #fff; border-radius: 12px; font-size: 14px;}
.received .chat-message {background: #2B2A2A;border-bottom-left-radius: 0;}
.sent .chat-message { background: #B143FA; background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%); color: #fff; text-align: right; border-bottom-right-radius: 0;}
/* Message Timestamp */
.message-time { font-size: 10px; color: #fff; margin-top: 5px; display: block; text-align: left;}
.sent .message-time{text-align: right;}
/* Chat Footer */
.chat-footer { background: #1a1a1a; padding: 1.8rem 1.5rem; margin: -1.5rem; margin-top: 0; display: flex; align-items: center;}
.chat-footer input { flex: 1; padding: 10px 10px 10px 20px; border: none; border-radius: 20px; outline: none; background-color: transparent; color: #fff; font-size: 16px; line-height: 2rem;}
.chat-footer input:focus, .chat-footer input:focus-visible{border: none;}
.chat-footer button { color: white; border: none; cursor: pointer;}
.chat-footer .bg-color{background-color: #333;border-radius: 16px;display: flex;align-items: center;flex: 1;}
/* Attachment Icon */
.attachment-icon {cursor: pointer;}
/* Hide file input */
#fileInput {display: none;}
/* File Name Display */
.file-name {font-size: 14px;color: #fff;max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/* Scrollbar Styling */
.chat-body::-webkit-scrollbar {width: 5px;}
.chat-body::-webkit-scrollbar-thumb {background: #888;border-radius: 5px;}
.chat-body::-webkit-scrollbar-thumb:hover {background: #555;}

/* Tabs */
.nav-tabs{border: none;}
.nav-tabs .nav-item{background-color: #484848;color: #fff;overflow: hidden;}
.nav-tabs .nav-item .nav-link{color: #fff;border:none;margin: 0;font-size: 14px;padding: 0.6rem 1.9rem;}
.nav-tabs .nav-item .nav-link.active{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);color: #fff;border:none;}

.bot_line_style .nav-item{background-color: transparent;}
.bot_line_style .nav-item .nav-link{font-size: 18px;font-weight: 600;color: #484848;text-transform: capitalize;}
.bot_line_style .nav-item .nav-link:after{ content: ""; width: 100%; height: 2px; margin-top: 10px; display: block; background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%); opacity: 0;}
.bot_line_style .nav-item .nav-link.active{background: transparent;}
.bot_line_style .nav-item .nav-link.active:after{opacity: 1;}

/* Filter */
.filters .nav-link:after{content: "";width: 100%;height: 2px;display: block;}
.filters .nav-link.active:after{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);color: #fff;border:none;}

/* Profile Page */
.profile_banner{position: relative;}
.profile_img_wrapper{margin-top: -110px;margin-left: 1rem;position: relative;width: 161px;height: 161px;}
.profile_img {margin-top: -110px;width: 100%;height: 100%;border-radius: 50rem;border: 1px solid #fff;background-color: #1A1A1A;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;overflow: hidden;}
.profile_img_wrapper > .profile_img {margin-top: 0;}
.profile_img_wrapper label{position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);}
.profile_img img.dp, .profile_cover .cover{object-fit: cover;height: 100%;width: 100%;max-width: 100%;}
.profile_tabs .nav-tabs .nav-item:first-child{border-radius: 10px 0 0 10px;}
.profile_tabs .nav-tabs .nav-item:last-child{border-radius: 0 10px 10px 0;}
.profile_tabs .tab-content {min-height: 300px;}
.profile_top{}
.profile_top .btn{padding-top: 0.65rem !important;padding-bottom: 0.65rem !important;}
.profile_cover{position: relative;border-radius: 16px;overflow: hidden;border: 1px solid transparent;background-image: linear-gradient(#000, #000), linear-gradient(to bottom, #B143FA, #2690FC);background-origin: border-box;background-clip: content-box, border-box;text-align: center;width: 100%;height: 271px;text-align: center;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.profile_cover label{position: absolute;bottom: 0;right: 0;padding: 0.5rem 1.5rem;background-color: rgba(255, 255, 255, 0.40);color: #fff;cursor: pointer;font-size: 12px;}

/* Folowing list */
.folowing_list{background-color: #1a1a1a;padding: 1.5rem;border-radius: 16px;}
.folowing_list_item{border-bottom: 1px solid #303030;padding-bottom: 1.5rem;margin-bottom: 1.5rem;}
.folowing_list_item:last-child{margin-bottom: 0;border-bottom: none;padding-bottom: 0;}

/* Chat List */

.chat_list{position: relative;display: flex;flex-direction: column;}
.recent_chats .chat_list_item{padding-bottom: 0;margin-bottom: 0;}

.pinned {order: -1;}
.chat_list_item{padding-bottom: 0.5rem;margin-bottom: 0.5rem;transition: all 0.3s ease-in-out;order: 2;}
.chat_list_item .ring {
    background: linear-gradient(180deg,  #2690FC 0%, #B143FA 100%);
    color: #000;
    width: 10px;
    height: 10px;
    display: inline-block;
}
.favourite{border: 1px solid transparent;
    border-radius: 10px;
    background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(to right, #B143FA, #2690FC);
    background-origin: border-box;
    background-clip: content-box, border-box;
    text-align: center;width: 155px;height: 32px;text-align: center;display: flex;align-items: center;justify-content: center;cursor: pointer;}

/* Upload Story */
.upload_story{
    border: 1px solid transparent;
    border-radius: 16px;
    background-image: linear-gradient(#000, #000), linear-gradient(to bottom, #B143FA, #2690FC);
    background-origin: border-box;
    background-clip: content-box, border-box;
    text-align: center;width: 100%;height: calc(100vh - 142px);text-align: center;display: flex;align-items: center;justify-content: center;cursor: pointer;
}
.story_actions{z-index: 3;}
.upload_story_label{border: 1px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(to right, #B143FA, #2690FC);
    background-origin: border-box;
    background-clip: content-box, border-box;
    text-align: center;width: 260px;height: 260px;text-align: center;display: flex;align-items: center;justify-content: center;cursor: pointer;flex-direction: column;color: var(--white);position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;}
/* .close_btn{width: 38px;height: 38px;border-radius: 50%;background-color: #000;} */
.story_editing{width: 100%;height: 100%;z-index: 2;position: relative;border-radius: 16px;overflow: hidden;}
.story_editing img{height: 100%;width: 100%;object-fit: contain;}
.story_view{position: relative;padding: 0;border-radius: 16px;overflow: hidden;}
.story_top{position: absolute;top: 0;z-index: 2;padding: 1.5rem;width: 100%;}
.overlay{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;background: linear-gradient(180deg,  #00000070 0%, #0A0A0A00 100%)}
.story_view_slider{max-width: 800px;margin: 0 auto;width: auto;height: calc(100vh - 142px);}
.story_view_slider .slick-prev{left:auto;top:35%;right: -100px;transform: rotate(90deg);}
.story_view_slider .slick-next{bottom:35%;right: -100px;transform: rotate(90deg) ;}
.story_img{max-height: max-content;}
.story_img img{    width: auto;
    height: 100%;
    max-height: calc(100vh - 142px);
    object-fit: contain;margin: 0 auto;}

/* Find Friends */
.find_friends{background-color: #1A1A1A;padding: 1.5rem;border-radius: 16px;}
.find_friends .card, .suggestions .card{background-color: #303030;}
.explore .card{background-color: #1A1A1A;height: 100%;}
.explore_mid{min-height: calc(100% - 150px);border-radius: 10px;overflow: hidden;}
.explore_mid img {min-height: 100%;object-fit: cover;}
.find_style .nav-tabs{gap: 1rem;}
.find_style .nav-tabs .nav-item{border-radius: 10px;background-color: #303030;}

/* Saved */
.saved_list{background-color: #1A1A1A;padding: 1.5rem;border-radius: 16px;}
.saved_slider{max-width: 800px;margin: 0 auto;width: 90%;}
.saved_slider .slick-arrow, .story_view_slider .slick-arrow{width: 52px;height: 52px;border-radius: 50rem;display: flex;align-items: center;justify-content: center;transition: all 0.5s ease-in-out !important;background: linear-gradient(90deg, #B143FA 0%, #2690FC 50%, #B143FA 100%);background-size: 200% 200%;color: #fff;border: none;}
.saved_slider .slick-arrow.slick-disabled, .story_view_slider .slick-arrow.slick-disabled{background: transparent !important;background-color: var(--card-bg) !important;}
.saved_slider .slick-prev{left: -180px;}
.saved_slider .slick-next{right: -180px;}
.slick-arrow:hover{background-position: right center;}
.saved_slider .slick-prev:before, .story_view_slider .slick-prev:before {content: url(../img/arrow-right.svg) !important;transform: rotate(180deg);transform-origin: center;padding-top: 5px;}
.saved_slider .slick-prev:before{transform: rotate(180deg);}
.saved_slider .slick-next:before, .story_view_slider .slick-next:before {content: url(../img/arrow-right.svg) !important;}

/* Settings */
.setting_col{background-color: #1A1A1A;padding: 1.5rem;border-radius: 16px;height: 100%;}
.setting_list .nav-link{color: white;}
.setting_list .nav-link:hover, .setting_list .nav-link.active,
.responsive_list .nav-link:hover, .responsive_list .nav-link.active{background-color: black;}

/* Comment */
.comment .text_wrap{background-color: #303030;padding: 1rem ;border-radius: 10px;}
.comment .user_avatar { height: 42px; max-width: 42px; flex: 1 0 auto; }
.positive .text_wrap{background-color: #22382B;}
.negative .text_wrap{background-color: #382222;}

/* Boost Post */
.boost_post{background-color: #1A1A1A;padding: 1.5rem;border-radius: 16px;}
.add_payment{color: #B143FA;font-weight: 600;text-decoration: none;transition: all 0.3s ease-in-out;}

.budget{background-color: #2D2C2C;padding: 1.5rem; border-radius: 10px;}
.value-input, .value-input:focus {width: auto;background-color: transparent;border: none;color: var(--grey);box-shadow: none;outline: none;}

/* Table */
table.pad_bottom tr td, table.pad_bottom tr th{padding-bottom: 5px;text-transform: capitalize;}
table.default_style tr td, table.default_style tr th{text-transform: capitalize;}
table.default_style tr td:last-child, table.default_style tr th:last-child{text-align: right;}
.default_style tr th{font-weight: 500;}
.default_style tr th:first-child{border-radius: 10px 0 0 10px;}
.default_style tr th:last-child{border-radius: 0 10px 10px 0;}

.border-bottom-td td{border-bottom: 1px solid #343434;}
.border-bottom-td tr:last-child td{border-bottom: none;}

.border-bottom-th th{border-bottom: 1px solid #343434;}
.border-bottom-th tr:last-child th{border-bottom: none;}
.video{max-width: 112px;}
.mw-960{min-width: 960px;}
.mw-1060{min-width: 1060px;}

/* Boost View */
.boost_view{background-color: #1A1A1A;padding: 1.5rem;border-radius: 16px;}
.progress-container { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.progress { flex: 1; height: 7px; background-color: #333; }
.progress-label { min-width: fit-content; text-align: right; }

/* Subscriptions */
.subscriptions{background-color: #1A1A1A;padding: 1.5rem;border-radius: 16px;height: 100%;}
.package{background-color: #303030;padding: 1.5rem;border-radius: 10px;max-width: 346px;}
.package p, .package .btn{font-weight: 600;}
.package .price{line-height: normal;}
.tick_style{padding-left: 35px;}
.tick_style li{margin-bottom: 15px;position: relative;font-size: 14px;color: #ffffffb0;}
.tick_style li:before{content: url(../img/tick.svg);position: absolute;left: -34px;}

/* Dashboard */
.dashboard{background-color: #0D0D0D;padding: 1.5rem;border-radius: 16px;}
.overview_cards{width: 275px;max-width: 100%;}
.pro_label{min-width: 120px;}

/* Analytics */
canvas {
    max-height: 200px;
}


/* Responsive */
@media (max-width: 1440px) {
    .sidebar {width: 19vw;}
    .content{margin-left: 19vw;margin-right: 19vw;}
    .nav-tabs .nav-item .nav-link{padding: 0.5rem 1rem;font-size: 14px;}
    .left-side{max-width: 40%;}
    .saved_slider .slick-prev{left: -60px;}
    .saved_slider .slick-next{right: -60px;}
    .recent_chats a .user_name{font-size: 14px;}
    .fs-6{font-size: 14px !important;}
    body, .btn{font-size: 14px;}


}
@media (min-width: 1200px) {.tablet-asset{display: none !important;}}
.advanced_header h1{flex: 1 0 100%;}
.advanced_header{flex-wrap: wrap;}
@media (max-width: 1199px) {
    .topic_wrapper .topic_slider_mobile{display: flex;flex-wrap: wrap;gap: 20px;}
    .topic_wrapper .card{width: calc(50% - 20px) !important;}

    .story_view_slider .slick-arrow{right: -60px;}
    .view_all{position: relative !important;margin: 0 auto;display: flex !important;width: 50%;}
    .view_all .btn{border-radius: 10px !important;margin-bottom: 0 !important;}


    /* .add_slider .list .item a{flex-direction: column;display: flex;} */
    .add_slider .story_slider{width: calc(100% - 80px) !important;}
    body{font-size: 14px;}
    .side_menu a, .my_contact a, .recent_chats a{padding: 10px;}
    .btn{font-size: 14px;}
    .left-side{max-width: 30%;}
    .sidebar {width: 18vw;}
    .content{margin-left: 18vw;margin-right: 0;}
    .logo-wrap{min-width: auto;}
    .side_menu img, .my_contact img, .recent_chats img{max-width: 20px;}
    .side_menu button img, .side_menu a img,  .my_contact button img, .my_contact a img,  .recent_chats button img, .recent_chats a img{ max-width: 18px;}
    .chat_list_item .user_loc{font-size: 10px;}
    .recent_chats a .user_name{font-size: 14px;}
    .my_contact, #sidebar-right{display: none;}
    .blur-bg{position: relative;right: 0;background-color: #1A1A1A;border-radius: 0;border: none;}
    .saved_folder_div > li{flex-wrap: wrap;}
    .saved_folder_div > li >img{flex: 0 1 20%;width: 20%;}
    .folder_details{padding: 1rem !important;flex: 0 0 80%;}
    .saved_folder_div .btn-group{position: relative !important;flex: 1 0 100%;padding: 10px !important;}
    .advanced_header h1{order: 1;flex: 0 0 auto;}
    .advanced_header .calendar{order: 2;flex: 0 0 auto;}
    .advanced_header #analyticsTab{order: 3;flex: 1 0 100%;margin-top: 20px;}
    .revenue_header{flex-wrap: wrap;}
    .overview_cards{max-width: 100%;margin-bottom: 20px;}
    .overview_cards p.fs-6{text-align: right;}
    .revenue_header h1{flex: 1 0 100%;}
}




@media (min-width: 992px) {
    .mobile-asset{display: none !important;}
    .sidebar.custom-offcanvas {visibility: visible !important;}
    .notification .dropdown-item-list {height: 320px;overflow: auto;}

}

@media (max-width: 991px) {
    .today_topic .fs-7 + .fs-7{font-size: 10px !important;}
    .today_topic .btn{padding-bottom: 0 !important;font-size: 10px !important;padding-top: 0 !important;width: 100%;}
    .topic_wrapper .card{padding: 8px !important;border-radius: 8px;width: 210px !important;height: 250px;margin: 5px !important;}
    .topic_wrapper .topics .topic_mid{height: 179px;margin-bottom: 0 !important;border-radius: 5px;overflow: hidden;display: block;}
    .topic_wrapper .topics .topic_mid > img{height: 100%;object-fit: cover;}
    .topic_wrapper .topics .topic_bottom{display: none !important;}
    .table-responsive {
        margin-left: -10px;
        margin-right: -10px;
        border-radius: 0px;
    }
    .topic_top .user_name{font-size: 12px !important;}
    .sort_option .dropdown-item>a{font-size: 10px;}
    .mw-1060{min-width: 500px;}
    .default_style tr th{font-size: 10px;padding: 10px 5px !important;}
    .default_style tr td{padding: 10px 5px !important;font-size: 10px;}
    .default_style tr td .video{max-width: 50px;}
    .overview_cards{width: 100%;}
    .setting_col.details, .saved_data{display: none;}
    #resposiveOffcanvas{background-color: #000;width: 100%;}
    #resposiveOffcanvas *{color: #fff;}
    .side_menu_head{padding: 1rem;background-color: #1A1A1A;}
.side_menu_head .btn{font-size: 16px !important;}

    .notification > .btn{width: 36px;height: 36px;padding: 15px;}

    #offcanvasContent .fs-4{display: none;}


    .upload_story_label{width: 120px;height: 120px;}
    .profile_banner .profile_top .btn{padding: 0.45rem 0.65rem !important;}
    .profile_banner .profile_top .three_dots{padding: 0.45rem 0.15rem !important;}
    .search-modal{ top: 0; right: 0; left: 0; height: 30vh; max-height: 100%; border-bottom: 1px solid rgba(0, 0, 0, .2); transform: translateY(-100%);}
    .profile_img_wrapper{width: 130px;height: 130px;margin-top: -90px;margin-left: 10px;}
    .find_friends .card{flex-direction: row;align-items: center;justify-content: space-between;}
    .find_friends .card .find_friends_top .tag{border-radius: 0;margin-left: 45px;font-size: 6px !important;top: -15px !important;}
    .find_friends .card .btn-group{gap: 1rem !important;}
    .find_friends .card .btn-group .btn{padding: 0.5rem 0.65rem;}
    .comments_inner .comment .btn{padding: 0.3rem 0.5rem;}
    .comments_inner .comment .btn img{max-width: 20px;}
    .comment .text_wrap{padding: 0.5rem 0.8rem;}
    .chat_list_item .pin-btn, .chat_list_item .chat_open, .favourite{font-size: 0 !important;width: 32px;height: 32px;border-radius: 50rem;display: flex;align-items: center;justify-content: center;}
    .chat_list_item .pin-btn{background-color: #000;}
    .chat_list_item .chat_open{padding: 5px !important;}
    .chat_list_item .ring{width: 6px;height: 6px;}
.fs-8, .user_loc{font-size: 10px;}
.btn{font-size: 12px !important;}
.fs-7{font-size: 12px;}

.add_slider .story_slider{width: calc(100% - 50px) !important;}

.form-container{padding: 2rem 0;}
.user_container{flex-direction: column;overflow: auto;height: auto;}
.right-side{overflow: hidden;}
.left-side{height: 200px;border-radius: 0 0 16px 16px;display: flex;align-items: center;justify-content: center;max-width: 100%;flex: 1 0 auto;}

.custom-offcanvas{position: fixed;bottom: 0;z-index: 1050;display: flex; flex-direction: column; max-width: 100%; visibility: hidden; background-clip: padding-box; outline: 0; transition: transform .3s ease-in-out;}
.custom-offcanvas.show {transform: none;}
.sidebar {top:0;left: 0;width: 322px;transform: translateX(-100%);padding: 0 !important;background-color: #000;}
.content{margin-left: 0;margin-right: 0;}



.side_menu{padding: 1rem;}

.profile_btn {margin: 1rem;background-color: #1A1A1A;padding: 0.8rem;border-radius: 6px;}
.profile_btn .blur-bg{display: flex;align-items: center;justify-content: space-between;}
.profile_btn .dropdown-head {padding: 0;display: flex; }
.profile_btn .d-inline a{border: none;font-size: 12px;padding: 0;}
.profile_btn .user_name{font-size: 14px;}
.side_menu a{font-size: 16px;}
.user_ava{width: 36px;height: 36px;border-radius: 50rem;overflow: hidden;display: inline-block;}
.user_ava img{object-fit: cover;max-width: 100%;}
.post_comment .user_avatar{height: 36px;max-width: 36px;}
.post_comment .form-control{padding: 0.4rem 0.7rem;border-radius: 5px;}
.post_comment .btn{height: 36px;min-width: 36px;padding: 0.45rem;}

.content-wrapper{position: relative;}

.comment .user_avatar, .topic_top > img{width: 36px;height: 36px;}

.headbar{height: 76px;}
.head-modal{width: 100%;height: auto;padding: 10px 20px;height: 76px;background-color: #1A1A1A;top: 0;right: 0;left: 0;}
.search-modal{display: flex;gap: 10px;align-items: center;flex-direction: row;}
.backbtn, .search-modal .btn{width: 36px;height: 36px;padding: 5px;display: flex;align-items: center;justify-content: center;min-width: 36px;}
.headbar .btn:active, .headbar .btn:hover{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);}
.backbtn img, .search-modal .btn img{max-width: 24px;}
.search-modal .search-form .form-control{padding: 0.5rem 0.8rem;border-radius: 5px !important;}
body, .form-control{font-size: 12px;line-height: normal;}
.form-control, .form-select{padding: 0.5rem 0.8rem;} .search-trigger, .menu-trigger{flex: 0 0 36px;width: 36px;height: 36px;padding: 0;}
.mobile-icon-menu{background-color: #1A1A1A;}
.mobile-icon-menu > ul{list-style: none;padding: 0;margin: 0;display: flex;justify-content: space-between;padding: 10px 20px ;}
body .icon-menu-item{width: 42px;height: 42px;padding: 10px;display: flex;align-items: center;justify-content: center;}
body .icon-menu-item.active, body .icon-menu-item:active, body .icon-menu-item:hover{background: linear-gradient(90deg, #B143FA 0%, #2690FC 100%);}
body .icon-menu-item img{max-width: 22px;}
.notification .dropdown-menu{min-width: 100vw;}
.nav-tabs .nav-item .nav-link{font-size: 12px;}

.notification .dropdown-menu:before{right: 30px;}
#notification-mobile .dropdown-menu{position: relative;display: block;min-width: 100%;padding: 0;border-radius: 10px;overflow: hidden;z-index: 1;}
#user-mobile .dropdown-menu{position: relative;display: block;min-width: 100%;padding: 0;border-radius: 10px;overflow: hidden;z-index: 1;}
#user-mobile > .blur-bg > ul{display: none;}

}
.folder_details a{text-decoration: none;}
@media (max-width: 767px) {
    .saved_folder_div > li >img{flex: 0 1 40%;width: 40%;}
    .saved_list{padding: 1rem;}
    .folder_details h2{font-size: 16px !important;margin-bottom: 10px !important;}


    .folder_details{padding: 1rem !important;flex: 0 0 60%;}
    .find_friends{padding: 1rem;}
    .fs-4{font-size: 18px !important;}
    .find_friends .card, .suggestions .card{padding: 0;background-color: transparent;}
    .find_friends .card .btn-group .btn, .suggestions .card .btn-group .btn{padding: 0.5rem 0.75rem;}
    .saved_slider .slick-arrow, .story_view_slider .slick-arrow{display: none !important;}
    .profile_cover{height: 200px;}
    .switch{min-width: 40px;}
    .switch > label::after{width: 18px;height: 18px;top: 1px;}
}
@media (max-width: 575px) {


    .view_all{width: 100%;}
    #explore_postTab, #explore_videoTab, #exploreTab {width: 100%;}
    #explore_postTab li, #explore_videoTab li, #exploreTab li {flex: 1 0 48%;text-align: center;}
    #explore_postTab li button, #explore_videoTab li button, #exploreTab li button {width: 100%;}
    .post_actions{order: 2;flex: 1 0 100%;width: 100%;}
    .profile_img_wrapper label img{max-width: 20px;}
    .tag{padding: 2px 5px;font-size: 6px;}
    .profile_cover{height: 180px;}
    .card{padding: 1rem;}
    .fs-4{font-size: 18px !important;}
    .profile_img_wrapper{width: 90px;
        height: 90px;
        margin-top: -50px;margin-left: 0px;}
    .profile_btn .d-inline a, .profile_btn .user_name{font-size: 12px;}
    .setting_list .nav-link{font-size: 14px;}
    .fs-6{font-size: 0.8rem !important;}
    .btn{font-size: 12px;}
    .btn img{max-width: 80%;}
    .content{padding-left: 10px;padding-right: 10px;}
    .nav-tabs .nav-item .nav-link{font-size: 10px;}
    .comment .user_avatar, .topic_top > img{width: 24px;height: 24px;}
    h3{font-size: 18px;}
.headbar{height: 60px;}
.head-modal{height: 60px;}
.backbtn, .search-modal .btn{width: 28px;height: 28px;min-width: 28px;}
.backbtn img, .search-modal .btn img{max-width: 20px;}
.search-modal .search-form .form-control{padding: 0.3rem 0.8rem;}
body, .form-control{font-size: 12px;line-height: normal;}
.form-control, .form-select{padding: 0.5rem 0.8rem;}
.headbar .search-trigger, .headbar .menu-trigger{flex: 0 0 28px;width: 28px;height: 28px;}
.icon-menu-item{width: 32px;height: 32px;padding: 5px;}
}