/*[ WEB CSS ]
///////////////////////////////////////////////////////////
*/

@font-face {
font-family: "mulish";
src: url("../fonts/mulish.woff2") format("woff2");
}


.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
font-size: 20px;
color: #fff;
line-height: 140%;
}


.ossn-page-loading-annimation {
background: #fff;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 996;
}

.ossn-page-loading-annimation .loader {
position: relative;
top: 30%;
text-align: center;
}

.ossn-page-loading-annimation .loader .wait-msg {
font-weight: 1000;
font-size: 20px;
margin-top: 15px;
color: #5272fd;
text-align: -webkit-center;
}
.ossn-page-loading-annimation .loader img {
width: 205px;
height: 205px;
border-radius: 100%;
border: 2px outset #89c2eb;
padding: 5px;
}

#navbar {
display:none;
box-shadow: 0 7px 14px #adadad, 0 5px 5px #ffffff38;
background: gray;
z-index: 997;
padding-top: 6px;
position: fixed;
}
.shadow, .title {
text-shadow: 1px 1px 1px rgb(0 0 0 / 40%), 1px 1px 1px rgb(0 0 0 / 60%), 1px 1px 2px rgb(0 0 0 / 10%);
font-weight: 350;
letter-spacing: 2px;
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}

.navbar-fixed-bottom, .navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}

#navbar .leftlimg img.tlimg {
height: 40px;
float: left;
}

#navbar .leftlimg {

float: left;
padding: 10px;
margin-left: -10px;

}

#navbar .buttons {
float: right;
width: 75%;
padding: 10px;
height: 50px;
margin-top: -2px;
padding-right: 0px;
}

#navbar .buttons .loginb button.login {
background: linear-gradient(90deg, blue, #7b7bff);
color: #ffffff;
width: 65px;
padding: 5px;
font-weight: 600;
border-radius: 20px;
float: right;
border: 2px solid blue;
text-align: center;
border-radius: 5px;
display: inline-block;
line-height: 20px;
text-decoration: none;
color: #fff;
margin: 5px;
box-shadow: 0px 0px 3px 0px blue;
font-family: ROBOTO;
font-size: 14px;
}

#navbar .buttons .signubp button.signup {
background: linear-gradient(90deg, deeppink, #f950ac);
color: #ffffff;
width: 150px;
padding: 5px;
font-weight: 600;
border-radius: 20px;
float: right;
border: 2px solid deeppink;
text-align: center;
border-radius: 5px;
display: inline-block;
line-height: 20px;
text-decoration: none;
margin: 5px;
box-shadow: 0px 0px 3px 0px deeppink;
font-family: ROBOTO;
font-size: 14px;
}

.outlinfo {
padding: 8px;
background: #ffffff;
border-radius: 10px;
border: 1px solid #000000;
margin-top: -50px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
margin-bottom: 47px;
}

.outlinfo .welcomemsg {
color: #fff;
display: block;
text-align: center;
font-weight: bold;
margin-bottom: 8px;
font-size: 22px;
word-break: normal;
background-color: #fff;
color: #000000 !important;
border: 2px solid #eee;
border-radius: 5px;
box-shadow: inset 0px 0px 5px 0px #eee;
}

.outlinfo .msggg {
color: #000;
font-weight: bolder;
text-align: center!important;
}

.text-center {
text-align: center;
}
.btn-group-justified {
white-space: wrap !important;
text-overflow: clip !important;
overflow: hidden !important;
word-break: break-word;
word-wrap: break-word;
}
.btn-group-justified i {
color: #fff;
font-size: 20px;
}
.btn-group-justified span.badger {
background: #9d00ff;
border-radius: 100px;
height: 20px;
width: 22px;
position: absolute;
color: #fff;
font-size: 13px;
line-height: 20px;
display: inline-block;
font-family: sans-serif;
padding: 0px 1px 5px 2px;
margin-top: -7px;
margin-left: -12px;
z-index: 1;
}
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.btn-group>.btn:first-child {
margin-left: 0;
}
.btn-group-justified>.btn, .btn-group-justified>.btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-vertical>.btn, .btn-group>.btn {
position: relative;
}
.btn, .btn-default, .btn-success, .active {
white-space: wrap !important;
text-overflow: clip !important;
overflow: hidden !important;
}
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link {
font-weight: 400;
color: #337ab7;
border-radius: 0;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.nfeatures {
color: white;
padding: 15px;
background: #0089ff;
font-size: 13px;
display: flex;
}

.nfeatures .toparia {
float: left;
background: #fff;
color: blue;
padding: 5px;
font-weight: 600;
}

.nfeatures .type {
background: #fff;
color: #000;
padding: 5px;
font-weight: 600;
}

.toparia:after {
content: ":";
margin-left: 5px;
}
#topbar .badge {
background-color: #FF0000 !important;
top: -15px;
right: 10px;
height: 16px;
padding: 2px 4px;
font-family: Arial, sans-serif;
color: white;
text-shadow: 0 1px rgb(0 0 0 / 25%);
border-radius: 10px;
-webkit-box-shadow: inset 0 1px rgb(255 255 255 / 30%), 0 1px 1px rgb(0 0 0 / 8%);
box-shadow: inset 0 1px rgb(255 255 255 / 30%), 0 1px 1px rgb(0 0 0 / 8%);
}
html, body{
background-color: #f1f1f1;
font-family:mulish;

}
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
#partrefresh {
text-align: center;
margin: 5px;
margin-bottom: 20px;
border-bottom: 2px solid deeppink;
overflow: hidden;
border-radius: 5px;
padding-bottom: 20px;
padding-top: 10px;
border-left: 0px;
border-right: 0px;
}

.titlenew a.apartlinks {
padding: 7px;
color: #000;
height: 35px;
width: 30%;
background: #e60073;
border-radius: 5px;
margin-right: 5%;
float: left;
border: 2px solid deeppink;
box-shadow: inset 0 0px 5px 0px rgb(0 0 0 / 13%);
color: #fff;
font-weight: 600;
}

.titlenew a.partlinks {
padding: 6px;
color: #000;
width: 30%;
background: #fff;
border-radius: 5px;
float: left;
height: 35px;
margin-right: 5%;
border: 2px solid deeppink;
font-weight: 600;
}

.titlenew a.lpartlinks {
padding: 6px;
color: #000;
width: 30%;
float: left;
height: 35px;
background: #fff;
border-radius: 5px;
border: 2px solid deeppink;
font-weight: 600;
}

.stories .story .mstory img {
height: 60px;
width: 60px;
border-radius: 50px;
border: 2.5px solid #ffffff;
background: #000;
margin: 1px;
}

.stories .story .ustory img {
width: 60px;
height: 60px;
border-radius: 50%;       /* makes perfect circle */
border: 2.5px solid #fff;
background: #000;
margin: 1px;
object-fit: cover;        /* preserves aspect ratio, crops if necessary */
}

.stories .story .mstory font.stext {
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
font-weight: 500;
font-size: 13px;
color: #000000;
text-align: center;
display: block;
margin-top: 5px;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.stories .story .ustory font.stext {
width: 60px;
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
font-weight: 500;
font-size: 13px;
color: #000000;
text-align: center;
margin-top: 5px;
letter-spacing: 0.3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
white-space: normal;
}

.stories .story {
padding: 2px;
width: 100%;
overflow: auto;
white-space: nowrap;
display: flex !important;
flex-direction: row !important;
margin-top: 15px;
}

.stories {
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}
.stories font.divstoryname {
padding: 10px;
font-weight: 600;
font-family: system-ui;
border-bottom: 1px solid;
position: relative;
top: -10px;
}
.stories .story a.mstory {
padding: 5px;
margin-right: 10px;
}

.stories .story a.ustory {
padding: 5px;
margin-right: 10px;
}

.stories .story .msimage {
padding: 1px;
border-radius: 50px;
max-width: 66px;
max-height: 66px;
background: #673ab7;
}

.stories .story .usimage {
padding: 1px;
border-radius: 50px;
max-width: 66px;
max-height: 66px;
position: relative;
overflow: hidden;
}


.stories .story .ustory .usimage-text {
position: absolute;
top: 3px;
left: 3px;
width: 90%;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 10px;
font-weight: 600;
text-align: center;
background: rgb(0 0 0 / 21%); /* full-circle overlay */
border-radius: 50%;
padding: 5px;
box-sizing: border-box;
}

.stories .story .mstory .newicon {
width: 21px;
height: 20px;
margin-top: -11.5px;
margin-bottom: 8px;
left: 22.5px;
position: relative;
border-radius: 50px;
background: #673ab7;
text-align: center;
}

.stories .story .mstory .storyc {
text-align: -webkit-center;
color: black;
}

.stories .story .ustory .ustoryc {
text-align: -webkit-center;
margin-top: 5px;
} 
.ossn-wall-container {
border-radius: 2px;
margin-top: -5px;
margin-bottom: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) / -2);
margin-left: calc(var(--bs-gutter-x) / -2);
}

input, button, select, optgroup, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}

.ossn-wall-container .wall-tabs {
border-bottom: 1px solid #E5E5E5;
background-color: #F6F7F8;
border: 1px solid #E9EAED;
margin-top: 5px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

li.item.ossn-wall-container-menu-post {
padding: 10px;
display: inline-flex;
cursor: pointer;
border-bottom: 1px solid #eee;
font-weight: 700;
font-size: 13px;
}

.wall-tabs .item span {
padding-left: 5px;
font-weight: 700;
font-family: revert;
font-weight: 700;
font-size: 13px;
bottom: 0;
}

.item ossn-wall-container-menu-post i.fa.fa-bullhorn {
color: #000;
}

.ossn-wall-container-data {
background: #fff;
padding: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #E5E5E5;
border-bottom-color: #ccc;
border-width: 0 1px 2px 1px;
}
@media (max-width: 480px)
.ossn-wall-container textarea {
margin-left: 0;
width: 100%;
}
.ossn-wall-container textarea {
padding: 10px;
width: 100%;
border: 1px solid;
border: 0;
border-top: 0;
resize: none;
outline: none;
background: #fff;
border-radius: 0;
font-size: 15px;
resize: vertical;
margin-left: 0;
}
#ossn-wall-postbg {
border: 1px solid #E5E6E9;
background: #fff;
padding: 10px;
height: 45px;
margin-top: 10px;
border-radius: 10px;
overflow: auto;
white-space: nowrap;
flex-direction: row !important;
}
#ossn-wall-postbg span {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
border-radius: 5px;
cursor: pointer;
}
ul.token-input-list {
overflow: hidden;
height: auto!important;
width: 100%;
cursor: text;
font-size: 12px;
font-family: Verdana;
min-height: 1px;
margin: 0;
z-index: 999;
background-color: #fff;
list-style-type: none;
clear: left;
color: #2B5470;
border-top: 1px dashed #EEE;
border-right: 1px solid #EEE;
border-left: 1px solid #EEE;
border-bottom: 1px solid #eee;
padding: 5px 0 0;
border-radius: 10px;
}
.ossn-wall-container input[type="file"], .ossn-wall-container input[type="text"] {
width: 100%;
border-top: 1px dashed #E9EAED;
padding: 5px;
margin-bottom: 5px;
margin-top: -5px;
outline: none;
}
.algolia-places {
width: 100%;
}
#ossn-wall-location-input {
background: #fff;
border: 1px solid #E9EAED;
border-radius: 10px;
}
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
font-size: .875em;
}
.ap-dropdown-menu {
width: 100%;
background: #ffffff;
box-shadow: 0 1px 10px rgb(0 0 0 / 20%), 0 2px 4px 0 rgb(0 0 0 / 10%);
border-radius: 3px;
margin-top: 3px;
overflow: hidden;
}
button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
cursor: pointer;
}
button, [type=button], [type=reset], [type=submit] {
-webkit-appearance: button;
}
.ap-input-icon {
border: 0;
background: transparent;
position: absolute;
top: 0;
bottom: 0;
right: 16px;
outline: none;
}
button, select {
text-transform: none;
}
input, button, select, optgroup, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
#ossn-wall-photo {
margin-top: 10px;
}
.ossn-wall-container input[type="file"] {
border: 1px solid #E9EAED;
border-radius: 10px;
background: #fff;
}
@media (max-width: 480px)
.ossn-wall-container .controls {
height: auto;
}
.ossn-wall-container .controls {
background-color: #F6F7F8;
margin-top: 5px;
border: 1px solid #E9EAED;
padding: 5px 10px;
margin-left: -10px;
margin-right: -10px;
border-left: 0;
border-right: 0;
}
.ossn-wall-container .controls .ossn-wall-friend, .ossn-wall-container .controls .ossn-wall-location, .ossn-wall-container .controls .ossn-wall-photo, .ossn-wall-container-control-menu-emojii-selector {
color: #5d5d5d;
}
.ossn-wall-container .controls li {
padding: 7px;
background: #e5e5e5e0;
display: inline-block;
border-radius: 50%;
cursor: pointer;
width: 35px;
height: 35px;
text-align: center;
}
.ossn-wall-post-button-container {
display: inline-table;
float: right;
}
#ossn-wall-form .ossn-loading {
margin: 7px;
}
.ossn-loading:not(:required) {
-moz-animation: three-quarters-loader 1250ms infinite linear;
-webkit-animation: three-quarters-loader 1250ms infinite linear;
animation: three-quarters-loader 1250ms infinite linear;
border: 8px solid #38e;
border-right-color: transparent;
border-radius: 16px;
box-sizing: border-box;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 24px;
height: 24px;
}
.ossn-hidden {
display: none;
}
.ossn-wall-container input[type='submit'] {
padding: 3px 20px;
margin-top: 6px;
margin: 10px auto;
border-radius: 5px;
}


.ossn-wall-container .opt .photos {
padding: 2px;
border: 1px solid #eee;
width: 25%;
margin-right: 1%;
padding-left: 3%;
float: left;
}

.ossn-wall-container .opt .videos {
padding: 2px;
border: 1px solid #eee;
width: 17%;
float: left;
margin-right: 1%;
padding-left: 3%;
}

.ossn-wall-container .opt .files {
padding: 2px;
width: 25%;
float: left;
border: 1px solid #eee;
padding-left: 4%;

}

.ossn-wall-container .opt {
border-top: 1px solid #eee;
padding: 10px 0px;
margin-top: 10px;
min-height:40px;
}

.ossn-wall-container .opt i {
margin-right: 5px!important;
}

@media (max-width: 480px)
.ossn-wall-privacy-dummy, .ossn-wall-privacy {
float: none;
margin-right: 0;
}
.ossn-wall-privacy-dummy, .ossn-wall-privacy {
margin-right: 5px;
padding: 5px 10px;
background: #e5e5e5e0;
border-radius: 10px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
}
.ossn-wall-container i {
font-size: 15px;
margin-right: 0;
color : black;
}
.ossn-wall-privacy-dummy span>span, .ossn-wall-privacy span>span {
margin-left: 5px;
float: right;
}
#ossn-wall-location-input {
background: #fff;
border: 1px solid #E9EAED;
border-radius: 10px;
}
.ossn-wall-container input[type="file"], .ossn-wall-container input[type="text"] {
width: 100%;
border-top: 1px dashed #E9EAED;
padding: 5px;
margin-bottom: 5px;
margin-top: -5px;
outline: none;
}
.ossn-form input[type='number'], .ossn-form input[type='email'], .ossn-form input[type='password'], .ossn-form text, .ossn-form select, .ossn-form textarea, .ossn-form input[type='text'] {
width: 100%;
background-color: #f9f9f9;
border: 1px solid #ccd0d5;
padding: 8px;
margin-bottom: 5px;
outline: none;
display: block;
resize: vertical;
border-radius: 5px;
border-radius: 5px;
box-shadow: none;
-webkit-box-shadow: none;
}
.ap-input, .ap-hint {
width: 100%;
padding-right: 35px;
padding-left: 16px;
line-height: 40px;
height: 40px;
border: 1px solid #CCC;
border-radius: 3px;
outline: none;
font: inherit;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
}
.spinner {
/* Spinner size and color */
width: 20px;
height: 20px;
border-top-color: #444;
border-left-color: #444;

/* Additional spinner styles */
animation: spinner 400ms linear infinite;
border-bottom-color: transparent;
border-right-color: transparent;
border-style: solid;
border-width: 2px;
border-radius: 50%;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
}

.spinner-blue {
margin: 15px;
border-top-color: #09d;
border-left-color: #09d;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ossn-halt {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10000;
background-color: #000;
opacity: .9;
cursor: auto;
height: 100%;
display: none;
}
.ossn-light {
opacity: 0.4!important;
}
@media (max-width: 480px)
.ossn-message-box {
min-width: 300px;
width: 300px;
}
.ossn-message-box {
width: 470px;
min-width: 470px;
min-height: 96px;
background: #fff;
border: 1px solid #999;
position: fixed;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 60000;
margin-top: 100px;
border-radius: 10px;
display: none;
box-shadow: 0 2px 26px rgb(0 0 0 / 30%), 0 0 0 1px rgb(0 0 0 / 10%);
}
.ossn-message-box .title {
background: #F5F6F7;
padding: 11px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom: 1px solid #E5E5E5;
color: #5E5656;
font-size: 14px;
font-weight: 700;
}
.ossn-message-box .close-box {
float: right;
color: #ccc;
cursor: pointer;
}
@media (max-width: 480px)
.ossn-message-box .contents {
height: 280px;
overflow-x: auto;
overflow: overlay;
}
.ossn-message-box .contents {
padding: 10px;
min-height: 150px;
max-height: 420px;
overflow-x: auto;
overflow: overlay;
overflow-x: -moz-hidden-unscrollable;
}
@media (max-width: 480px)
.ossn-box-inner {
width: 280px;
}

.ossn-message-box {
min-width: 300px;
width: 300px;
}
.ossn-message-box .contents label {
color: #666;
font-weight: 700;
margin-right: 13px;
}
.ossn-privacy .radio-block {
margin-bottom: 0;
margin-top: 0;
display: flex;
}
.ossn-form input[type=radio]:checked {
background-color: #0b769c;
color: #fff;
font-weight: 700;
}
.ossn-form input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #ececec;
color: #666;
top: 5px;
height: 20px;
width: 20px;
border: 0;
border-radius: 50px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
input, button, select, optgroup, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.ossn-privacy .radio-block span {
font-weight: 400;
width: 85%;
margin-top: 7px;
}
.radio-block span {
display: inline-block;
margin-right: 10px;
font-size: 15px;
font-weight: 700;
margin-left: 10px;
}
.ossn-form input[type=radio]:checked::before {
position: absolute;
font-size: 15px;
left: 5px;
top: 0px;
content: '\02143';
transform: rotate(42deg);
}
.ossn-message-box .control {
margin-left: 10px;
margin-right: 10px;
height: 45px;
padding: 10px;
border-top: 1px solid #E9EAED;
}
.ossn-message-box .control .controls .btn {
padding: 2px 13px;
}
.btn-default {
color: #333!important;
background-color: #fff;
border-color: #ccc;
}
.btn-primary {
color: #fff!important;
background-color: #0d6efd;
border-color: #0d6efd;
}
.ossn-message-box .control .controls {
float: right;
}
#token-input-ossn-wall-friend-input {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: -5px;
background: #fff;
border: 0;
}
#ossn-wall-location .ap-input-icon svg {
top: 15px;
}
.ap-input-icon svg {
fill: #cfcfcf;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.ap-input-icon {
border: 0;
background: transparent;
position: absolute;
top: 0;
bottom: 0;
right: 16px;
outline: none;
}
.ossn-wall-item:first-child {
margin-top: 0;
}
.ossn-wall-item {
padding: 15px;
padding-top: 10px;
border: 1px solid #c1b8b8;
margin-top: 20px;
background-color: #fff;
padding-bottom: 0;
border-radius: 10px;
}
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) / -2);
margin-left: calc(var(--bs-gutter-x) / -2);
}
.row>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-top: var(--bs-gutter-y);
}
.ossn-wall-item .user-img {
border-radius: 50px;
border: 1px solid #eee;
display: inline-block;
float: left;
margin-right: 10px;
width:40px;
height:40px;
}

.ossn-wall-item .meta .hstar {
position: absolute;
}

.ossn-wall-item .meta .hstar i {
position: absolute;
left: 25px;
background: #fff;
color: red;
border-radius: 50px;
font-size: 10px;
padding: 2px;
top: 23px;
}

img, svg {
vertical-align: middle;
}
.ossn-wall-item .meta .post-menu {
float: right;
}
.ossn-wall-item .meta .user {
margin-top: 3px;
}
.ossn-wall-item .meta .user a {
font-weight: 700;
}
.ossn-wall-post-time {
cursor: pointer;
}
.time-created {
font-size: 14px;
font-style: italic;
color: #999;
}
.ossn-wall-item .post-contents {
margin-top: 15px;
word-break: break-word;
}
.ossn-wall-item .post-contents .shutimg {
box-shadow: 0px 0px 5px 0px #000000;
padding: 5px;
border-radius: 5px;
}
.postbg-text {
display: flex;
justify-content: center;
align-items: center;
}
.postbg-container {
min-height: 320px;
color: #333;
font-size: 30px;
font-weight: 700;
line-height: 1.1em;
padding: 100px 30px!important;
text-align: center!important;
}

.time-created i {
font-size: 15px;
color: #999;
}

.dropdown i {
color: #9d00ff;
font-size: 20px;
}
.post-reactions {
border-top: 1px solid #eee;
margin-top: 10px;
}

button.rbtn {
border: 1px solid #f30051;
box-shadow: 0px 0px 4px 0px #f30051;
background: #fff;
overflow: hidden;
padding: 10px;
margin: 10px;
}

.rbtn i {
float: left;
overflow: hidden;
color: #000;
}

button.rbtn .count {
font-weight: 600;
color: #f30051;
float: right;
margin-right: -8px;
}

.ossn-wall-post-delete {
color: #EC2020!important;
}
.uernotification {
padding: 10px;
margin-bottom: 0px;
background: #fff;
border-radius: 5px;
margin-bottom: 5px;
}

.uernotification .left-side img {
width: 40px;
height: 40px;
border-radius: 10px;
}

.uernotification .ntext {
text-align: start;
width: 85%;
margin-left: 10px;
height: 20%;
margin-right: -100px;
}

.uernotification font.username {
font-weight: 600;
}

.uernotification .left-side {
width: 50px;
float: left;
}

.allnotifs{
padding: 5px;
background: #8b8b8b;
height: 100%;
}
img.shoutbox-image {
box-shadow: inset 0px 0px 5px 0px #c7c7c7;
border: 2px solid #e1e1e1;
border: 3px outset #9d00ff;
padding: 2px;
border-radius: 5px;
width: 100%;
height: 100%;
}
.panel-bottom-comments {
background-color: rgb(221 215 215 / 53%);
box-shadow: 0px 0px 8px 0px rgb(158 160 183 / 32%);
position: fixed;
bottom: 0px;
margin: auto;
max-width: 100%;
padding: 10px 0px 10px 0px;
width: 100%;
z-index: 100;
box-sizing: border-box;
left: -1px;
border-radius: 0px;
}
.panel-bottom-feelings {
background-color: rgb(221 215 215 / 53%);
box-shadow: 0px 0px 8px 0px rgb(158 160 183 / 32%);
position: fixed;
bottom: 0px;
margin: auto;
max-width: 100%;
padding: 10px 0px 10px 0px;
width: 100%;
z-index: 100;
box-sizing: border-box;
left: -1px;
border-radius: 0px;
}
.smiles-show {
position: relative;
height: auto;
border-bottom: 1px #EAEEF5 solid;
}
.smiles-show-title {
background-color: #2f2fa2;
height: 50px;
overflow: hidden;
position: relative;
width: 100;
}
.ssop {
position: absolute;
background: rgb(255 255 255 / 15%);
color: white;
}
.smiles-show-title-ob {
width: 50px;
height: 50px;
display: inline-block;
color: rgba(255,255,255,0.9);
position: relative;
}
.smiles-show-title-ob-op {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
margin-right: 100px;
margin-left: 50px;
position: relative;
}
.smiles-show-title-ob {
width: 50px;
height: 50px;
display: inline-block;
color: rgba(255,255,255,0.9);
position: relative;
}
.smiles_info {
background-color: #00cf62;
padding: 12px;
font-weight: bold;
color: #fff;
}
.smiles_list {
height: 130px;
background: #fff;
padding: 8px;
overflow-x: hidden;
overflow-y: auto;
width: auto;
}
.smile {
border: 1px solid #eee;
padding: 10px;
margin: 5px;
border-radius: 5px;
vertical-align: top;
display: inline-block;
width: 29%;
text-align: center;
height: 45%;
}

span.smile img {
max-width: 100%;
max-height: 100%;
}

.fa-chevron-left:before {
content: "\f053";
color: #fff;
}
.fa-chevron-right:before {
content: "\f054";
color: #fff;
}
.smiles-show-title-ob i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.fa-close:before, .fa-multiply:before, .fa-remove:before, .fa-times:before, .fa-xmark:before {
content: "\f00d";
color: white;
}
span.send-time img {
width: 10px;
}




.conversation-compose {
display: flex;
flex-direction: row;
align-items: flex-end;
overflow: hidden;
height: 50px;
width: 100%;
margin-left: 0px;
z-index: 2;
}

.conversation-compose div,
.conversation-compose input,
.conversation-compose .input-msg  {
background: #fff;
height: 100%;
}



.conversation-compose .emoji {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 5px 0 0 5px;
flex: 0 0 auto;
width: 48px;
border: 0;
}

.conversation-compose .input-msg {
border: 0;
flex: 1 1 auto;
font-size: 16px;
margin: 0;
min-width: 50px;
padding-top: 10px;
border: 0;
}

.conversation-compose .photo {
flex: 0 0 auto;
border-radius: 0 0 5px 0;
text-align: center;
position: relative;
width: 48px;
border: 0;
}

.conversation-compose .photo:after {
border-width: 0px 0 10px 10px;
border-color: transparent transparent transparent #fff;
border-style: solid;
position: absolute;
width: 0;
height: 0;
content: "";
top: 0;
right: -10px;
}

.conversation-compose .photo i {
display: block;
font-size: 24px;
transform: translate(-50%, -50%);
position: relative;
top: 25px;
left: 50%;
}

.conversation-compose .send {
background: transparent;
border: 0;
cursor: pointer;
flex: 0 0 auto;
margin-left: 8px;
margin-right: 8px;
padding: 0;
position: relative;
outline: none;
}

.conversation-compose .send .circle {
background: #008a7c;
border-radius: 50%;
color: #fff;
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}

.sendarea i {
font-size: 21px;
margin-left: 0px;
}


.sendarea {
position: relative;
background: #979797;
margin-top: -25px;
padding: 20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}

.photo i {
color: #7d8488;
}

.emoji i {
margin-right: -5px;
padding-right: 10px;
color: #7d8488;
}

i.fa-solid.fa-paper-plane-top {
color: #fff;
}
.profile .bgimage {
width: 100%;
background: #000000d1;
}

.profile .bgimage img {
width: 100%;
height: 120px;
}

.profile .oriiinfo .lastseen {
margin: 5px;
overflow: hidden;
}

.profile .oriiinfo .lastseen font {
padding: 5px;
border: 1px solid #eee;
font-variant-caps: small-caps;
float: right;
}


.profile .buttonslink {padding: 10px;background: #fff;border-top: 1px solid #eee;border-bottom: 1px solid #eee;padding-top: 40px;}

.profile .buttonslink button {
color: #ffff;
margin-right: 5%;
width: 29%;
padding: 5px;
font-weight: 600;
}

.profile .footshow .uinfo div {
margin-right: 5px;
border: 1px solid #eee;
font-weight: 600;
padding: 10px;
color: #000;
background: #ffffff94;
}

.profile .actionbtn button.follow {
background: #0575ff;
box-shadow: 0px 0px 8px 0px #0575ff;
border: 1px solid #0575ff;
color: #ffff;
margin-right: 5%;
width: 30%;
padding: 5px;
font-weight: 600;
}

.profile .actionbtn {
text-align: -webkit-center;
margin-top: 50px;
padding-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #eee;
}

.profile .actionbtn button.block {
background: #ff0505;
box-shadow: 0px 0px 8px 0px #ff0000;
border: 1px solid #ff0505;
color: #ffff;
margin-right: 5%;
width: 30%;
padding: 5px;
font-weight: 600;
margin: 10px;
}

.profile .actionbtn button.message {
background: #f76697;
box-shadow: 0px 0px 8px 0px #f76697;
border: 1px solid #f76697;
color: #ffff;
margin-right: 5%;
width: 40%;
padding: 5px;
font-weight: 600;
margin: 10px;
}

.profile .buttonslink button.timelime {
box-shadow: 0px 0px 8px 0px #4c56a3;
border: 1px solid #4e51a0;
background: linear-gradient(90deg,#24c6dc ,#514a9d);
}

.profile  button.uposts {
box-shadow: 0px 0px 8px 0px #5abc4b;
border: 1px solid #4bb84a;
background: linear-gradient(90deg,#dce35b ,#45b649);
}

.actionbtn button i {
color: #fff;
font-size: 15px;
}

.profile .buttonslink button.aboutu {
box-shadow: 0px 0px 8px 0px #fa699a;
border: 1px solid #fe246f;
margin-right: 0%!important;
background: linear-gradient(90deg,#fa6d9d ,#ff1e6b);
}

.profile .footshow .timeline {
background: #fff;
padding: 10px;
}

.profile .footshow .timeline .timelinetxt {
padding: 10px;
font-size: 16px;
border-bottom: 1px solid #000;
font-weight: 600;
margin: 5px;
margin-bottom: 10px;
}

.footshow {
margin-top: 20px;
border-radius: 10px;
border-top: 5px solid #f76697;
border-bottom: 5px solid #f76697;
background: #fff;
padding: 15px;
padding-top: 20px;
}

.profile .footshow .timeline  .msgsendarea {display: flex;flex-direction: row;align-items: flex-end;overflow: hidden;height: 50px;width: 100%;margin-left: 0px;}

.profile .footshow .timeline textarea.text {
min-width: 88px;
flex: 1 1 auto;
font-size: 15px;
min-width: 50px;
border: 0;
background: #ededed;
border: 1px solid #4fc1e9;
margin-left: 8px;
font-weight: 600;
}

.profile .footshow .timeline button.send {
background: transparent;
border: 0;
cursor: pointer;
flex: 0 0 auto;
/* margin-left: 8px; */
margin-right: 8px;
padding: 0;
position: relative;
outline: none;
}

.profile .footshow .timeline button.send i.fa-solid.fa-paper-plane {
}

.profile .footshow .timeline button.send .circle {
background: #4fc1e9;
border-radius: 0px;
color: #fff;
position: relative;
width: 48px;
height: 49px;
display: flex;
align-items: center;
justify-content: center;
}

.profile .footshow .timeline .postsarea {
margin-top: 10px;
border-top: 1px solid #000;
padding-top: 17px;
}
.menu {
border: 1px outset #65cfff;
background: #fff;
padding: 5px;
}

.menu .options {
padding: 10px;
border-bottom: 2px solid #eee;
margin-top: 5px;
margin-bottom: 5px;
}

.menu .options:last-child {
border: 0px;
}

.menu .options:hover {
border: 1px solid #eee;
box-shadow: inset 0px 0px 2px 0px #000;
border-radius: 5px;
}

.menu .image {
float: left;
width: 30px;
background: #65cfff;
border-radius: 5px;
margin-top: -5px;
margin-right: 10px;
padding: 5px 5px;
}

.menu i {
color: #fff;
font-size: 15px;
}

.menu .sqtxt {
font-family: CURSIVE;
margin: 10px;
border-bottom: 2px solid blue;
padding-bottom: 10px;
color: blue;
font-weight: 1000;
text-align: center;
}

.menu .otitle {
text-decoration: underline;
}

.menu .myinfo {
border: 1px solid #eee;
margin: 10px;
text-align: center;
padding: 10px;
}

.menu .myinfo .myimage img {
width: 100px;
height: 100px;
border-radius: 50px;
}

.menu .myinfo  .myname {
margin-top: 10px;
font-weight: 600;
color: blue;
}

.menu .myinfo  .level {
margin-top: 5px;
color: darkblue;
font-family: ROBOTO;
}

.menu .myinfo .level span.mylevel {
margin-right: 5px;
}

.menu .myinfo .level span.scores {
margin-left: 2px;
}

.tagfrnd {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}

.tagfrnd input#tag\ friend {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.tagfrnd textarea#posts {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.tagfrnd input#send {
font-weight: 600;
width: 60%;
}
.location {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}

.location input#location {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.location textarea#posts {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.location input#send {
font-weight: 600;
width: 60%;
}
.sphoto {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}

.sphoto input#photo, .sphoto input#ossn_photo {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.sphoto textarea#posts {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.sphoto input#send {
font-weight: 600;
width: 60%;
}
.sbg {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}
.sbg span {
width: 44%;
height: 20px;
display: inline-block;
margin-right: 5px;
border-radius: 5px;
cursor: pointer;
}
.sbg textarea#posts {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.sbg input#send {
font-weight: 600;
width: 60%;
}
.ssmilies {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}
.smilies .emoji {
margin: 5%;
border: 1px solid #eee;
border-radius: 5px;
}

.emoji .image img {
max-width: 100%;
border-radius: 5px;
}

.smilies {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
will-change: transform;
width: 100%;
}
.pmdelete {
background: #fff;
padding: 20px;
border-radius: 25px;
overflow: hidden;
}

.pmdelete .info-icon svg {
width: 30px;
height: 30px;
margin-top: 3px;
}

.pmdelete .info-icon {
float: left;
}

.pmdelete label {
text-align: left;
display: block;
margin-left: 40px;
font-size: 20px;
}

.pmdelete .cmsg {
font-size: 15px;
margin-left: 40px;
color: #000;
}

.pmdelete button.cancel {
color: #979797;
background: #ffffff;
width: 25%;
height: 35px;
border: none;
font-weight: 600;
font-size: 16px;
text-shadow: 0 0 1px #979797;
}

.pmdelete .actions {
margin-top: 20px;
overflow: hidden;
border-top: 1px solid #ededed;
padding-top: 20px;
text-align: -webkit-right;
}

.pmdelete button.yes {
color: #16e;
background: white;
width: 30%;
height: 35px;
border: none;
font-weight: 600;
font-size: 16px;
text-shadow: 0 0 1px #16e;
margin-left: 5px;
}
.editp {
text-align: center;
background: #fff;
padding: 0px;
border-radius: 10px;
}

.editp form {
border: 1px solid #9d00ff;
padding: 10px;
border-radius: 5px;
}

.editp .fhading {
text-align: center;
margin-bottom: 20px;
border-top: 1px solid #9d00ff!important;
border-bottom: 1px solid #9d00ff!important;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 600;
font-family: ROBOTO;
font-size: 20px;
margin: -10px;
}

.editp label {
margin-top: 10px;
}

.editp input, .editp select {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.editp .radio input[type="radio"] {
width: auto!important;
margin-left: 0px!important;
}

.editp .radio {
text-align: left;
}

.editp .radio label {
margin-top: 0px;
}

.editp .radio input[type="text"] {
padding: 7px;
width:100%;
margin-bottom: 5px;
margin-top: 20px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.editp .radio p {
font-weight: 600;
margin-top: 10px;
}

.editp textarea {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.editp button {
margin-top: 20px;
width: 35%;
padding: 5px;
border-radius: 4px;
border: 2px solid #9d00ff;
background: #9d00ff;
color: #fff;
font-weight: 600;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
border-radius: 0px;
padding: 10px;
margin: 0px;
margin-bottom: 10px;
margin-top: 10px;
}
.success-msg i {
display: inline-block;
font-size: inherit;
text-rendering: auto;
color: green;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
border-radius: 0px;
padding: 10px;
margin: 0px;
margin-bottom: 10px;
margin-top: 10px;
}
.error-msg i {
display: inline-block;
font-size: inherit;
text-rendering: auto;
color: red;
}
.frnds .friends {
border-bottom: 2px solid #eee;
padding: 10px;
margin-bottom: 10px;
overflow: hidden;
}

.frnds .friends img {
border-radius: 50px;
margin-top: -8px;
float: left;
width: 50px;
height: 50px;
background: linear-gradient(90deg,#9d00ff,#0575ff,#ff5722,#ff1493) border-box;
padding: 2px;
}

.frnds .friends span.time {
float: right;
margin-top: -40px;
font-size: 10px;
margin-right: -5px;
}

.frnds .friends .name {
margin-left: 5px;
margin-top: -5px;
color: blue;
text-decoration: underline;
font-weight: 600;
}

.frnds .friends .status {
margin-left: 5px;
font-size: 10px;
color: #000;
}
.frnds .ontxt {
margin: 10px 15px;
padding-bottom: 10px;
color: #000;
font-weight: 600;
font-size: 17px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}

.frnds {
overflow: hidden;
background: #fff;
}
.pphoto {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}

.pphoto .ptxt {
margin: 10px;
border-bottom: 2px solid red;
padding-bottom: 10px;
color: #e91e63;
font-weight: 1000;
font-family: ROBOTO;
font-size: 15px;
}

.pphoto input#photo {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.pphoto input#ptitle {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.pphoto input#send {
font-weight: 600;
width: 60%;
}
.pcpass {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}

.pcpass .ptxt {
margin: 10px;
border-bottom: 2px solid red;
padding-bottom: 10px;
color: #e91e63;
font-weight: 1000;
}

.pcpass input[type=password] {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.pcpass input#send {
font-weight: 600;
width: 60%;
}

.login {
width: 100%;
max-width: 600px;
padding: 10px;
margin: 5px auto;
}

.login .toplogo {
height: 200px;
overflow: hidden;
position: relative;
background-position: center;
background-size: cover;
margin: -11px;
margin-bottom: 10px;
border-radius: 5px 5px 0px 0px;
border: 1px solid #eee;
border-bottom: 5px solid #F44336;
}

.login .toplogo .bolder {
bottom: 0;
color: #fff;
font-size: 16px;
font-weight: 200;
line-height: 26px;
padding: 5px 15px;
position: absolute;
margin: 0 15px 20px;
letter-spacing: 2px;
text-transform: uppercase;
background: rgba(0,0,0,.45);
border-radius: 2px;
-webkit-border-radius: 2px;
font-family: ROBOTO;
font-size: 15px;
}


.login .action .social-title {
width: 100%;
line-height: 0;
display: block;
font-size: 12px;
margin: 30px auto;
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid #eee;
font-family: Open sans,sans-serif;
}

.login .action .social-title span {
color: #eee;
padding: 0 10px;
font-size: 11px;
background-color: #333;
}
.login .action input, select {
background: #eee!important;
color: #333!important;
border-radius: 0px 5px 5px 0px!important;
font-size: 15px!important;
}
.login label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: #eee;
font-size: 13px;
margin-top: 12px;
}

.login .action .icon {
float: left;
background-color: #eee;
width: 42px;
height: 42px;
color: #949494;
line-height: 42px;
text-align: center;
border-radius: 5px 0px 0px 5px;
}
.login .action .icon i {
font-size: 18px;
color: #333;
}

.login input[type=text], .login input[type=password], input[type=date],  input[type=email], select {
width: 100%;
margin: 0;
height: 42px;
line-height: 42px;
padding: 0 18px!important;
color: #959697;
font-size: 13px;
box-shadow: none!important;
border-radius: initial;
background: 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: calc(100% - 42px);
border: 1px solid #eee;
border-left: 0px;
}

.login a.forgetp {
display: block;
margin-top: 30px;
text-align: center;
outline: 0;
float: none;
text-decoration: none;
color: #eee;
display: table;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
font-family: Open sans,sans-serif;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}

.login button.login-btn {
padding: 0;
border: none;
font-size: 13px;
font-weight: 600;
box-shadow: none;
text-shadow: none;
text-align: center;
position: relative;
text-transform: uppercase;
overflow: hidden;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #fff;
background-color: crimson;
font-family: Open sans,sans-serif;
line-height: 55px;
width: 100%;
}

.login span.tycchat-membership-button-title {
margin-left: -50px;
}

.login .tycchat-membership-button-icon {
float: left;
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
background-color: rgba(0,0,0,.1);
}

.login a.tycchat-membership-link-button {
color: #fff;
display: inline-block;
text-decoration: none;
background-color: royalblue;
width: 100%;
height: 55px;
line-height: 55px;
padding: 0;
border: none;
font-size: 13px;
font-weight: 600;
box-shadow: none;
text-shadow: none;
text-align: center;
position: relative;
text-transform: uppercase;
margin-top:10px;
}

.login .actions .form-note {
margin: 0;
padding: 0;
color: #eee;
font-size: 13px;
line-height: 24px;
margin-bottom: 30px;
font-family: Open sans,sans-serif;
}

.login .actions {
background: #333;
margin: auto;
border: 1px solid #eee;
border-top: 0px;
margin-bottom: 5px;
padding: 10px;
margin: -10px -11px -35px -11px;
border-radius: 0px 0px 5px 5px;
}

.signup {
width: 100%;
max-width: 600px;
padding: 5px;
margin: 5px auto;
}

.signup .toplogo {
font-weight: bold;
color: #5D6D7E;
text-align: center !important;
padding: 8px;
}

.signup .actions {
background: #ffffff;
border-top: 5px solid #0d6efd!important;
margin: auto;
border: 1px solid #e7e7e7;
margin-bottom: 5px;
}

.signup .action {
padding: 8px;
}

.signup label {
display: block;
color: #444;
margin-top: 10px;
font-weight: bold;
}

.signup input[type=text], .signup input[type=password], .signup input[type=date] , .signup input[type=email] {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #b1b1b1;
}

.signup select {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #b1b1b1;
}

.signup .buttons {
margin-top: 15px;
}

.signup button.signupbtn {
background: #0d6efd;
color: #ffffff !important;
font-weight: bold;
text-align: center;
padding: 1px 6px;
border-radius: 9px;
display: inline-block;
line-height: 30px;
/* text-decoration: none; */
/* text-decoration: none; */
cursor: pointer;
border: none;
width: 50%;
}

.signup .newaccount {
text-align: center !important;
margin-top: 16px;
}

.signup a.new {
background-color: #44bff7;
color: #ffffff;
width: 100%;
padding: 12px;
border: none;
font-weight: bold;
border-radius: 8px;
margin: 5px 0;
display: inline-block;
line-height: 20px;
text-decoration: none;
}

.seedit {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}

.seedit .setxt {
margin: 10px 15px;
padding-bottom: 10px;
font-weight: 600;
font-size: 15px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
text-align: left;
font-family: ROBOTO;
}

.seedit input[type=text] {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.seedit input#update { 
margin-top:10px;
font-weight: 600;
width: 60%;
}
.online .onlines {
border-bottom: 2px solid #eee;
padding: 10px;
margin-bottom: 10px;    
overflow: hidden;
}

.online .onlines img#dp {
border-radius: 50px;
margin-top: -8px;
float: left;
width: 50px;
height: 50px;
background: linear-gradient(90deg,#9d00ff,#0575ff,#ff5722,#ff1493) border-box;
padding: 2px;
}

.online .onlines .name {
margin-left: 5px;
margin-top: -5px;
color: blue;
text-decoration: underline;
font-weight: 600;
}

.online .onlines .status {
margin-left: 5px;
font-size: 10px;
color: #000;
}
.online .onlines img.active {
width: 19px;
margin-top: 10px;
margin-left: -51px;
position: absolute;
border: 3px solid #fff;
border-radius: 50px;
background: #fff;
}
.online .onlines span.time {
float: right;
margin-top: -22px;
font-size: 10px;
margin-right: -5px;
}
.dropdown-menu>li>a>i {
margin-left: -10px;
font-size: 15px;
margin-right: 5px;
}

.dropdown-menu>li>a {
border: 1px solid;
font-weight: 600;
}
.online .ontxt {
margin: 10px 15px;
padding-bottom: 10px;
color: #000;
font-weight: 600;
font-size: 17px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}
.online {
overflow: hidden;
background: #fff;
}
.squote {
text-align: center;
background: #fff;
padding: 10px;
border-radius: 10px;
}

.rankbadge.owner {
background: #9d00ff;
}

.rankbadge.gold {
background: coral;
}

.rankbadge.red {
background: red;
}

.rankbadge {
color: white;
font-family: ROBOTO;
font-weight: 600;
padding: 2px 5px;
border: 1px solid;
border-radius: 5px;
margin-left: 5px;
}

.rankbadge.manager {
background: #0575ff;
}

.rankbadge.supervisor {
background: blue;
}

.rankbadge.member {
background: deeppink;
}

.squote .sqtxt {
margin: 10px;
border-bottom: 2px solid blue;
padding-bottom: 10px;
color: blue;
font-weight: 600;
}

.squote input[type=text], .squote textarea {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.squote input#send { 
background-color: #0d6efd;
border-color: #0d6efd;
margin-top:10px;
font-weight: 600;
width: 60%;
}

.post-contents .quote font.quoteptime {
float: right;
margin-top: -10px;
font-size: 10px;
}

.post-contents .quote {
margin-top: 20px;
padding: 10px;
box-shadow: inset 0px 0px 7px 2px #ddd;
border-radius: 10px;
}

.post-contents .quote .name {
font-weight: 600;
}

.post-contents .quote .qtext {
margin-top: 10px;
}


.utoper {
height:60px;
padding: 10px;
margin-bottom: 0px;
background: #fff;
border-radius: 5px;
margin-bottom: 5px;
}


.alltopers .fortop {
background: #fff;
padding: 12px;
font-weight: 600;
border: 2px solid #00ffd5;
border-bottom: 0px;
text-align: center;
}

.alltopers .left-side img {
width: 40px;
height: 40px;
border-radius: 10px;
}

.alltopers .ntext {
text-align: start;
width: 85%;
margin-left: 10px;
height: 70%;
margin-right: -100px;
margin-top: 10px;
color: #000!important;
}

.alltopers font.username {
font-weight: 600;
color: #000;
}

.alltopers .left-side {
width: auto;
margin-right: 10px;
float: left;
}

.alltopers{
padding: 5px;
background: #8b8b8b;
height: 100%;
}
.alltopers .utoper span.tlevel {
background: #ff718b;
border-radius: 50px;
padding: 1px 5px 1px 5px;
font-weight: 600;
color: #fff;
margin-right: 10px;
}

.alltopers .utoper span.tscores {
float: right;
margin-top: -30px;
font-weight: 600;
}

.alltopers .utoper {
height: 60px;
padding: 10px;
margin-bottom: 0px;
background: #fff;
border-left: 2px solid #00ffd5;
border-right: 2px solid #00ffd5;
border-radius: 0px;
margin-bottom: 0px;
}

.alltopers .utoper:last-child {
border-bottom: 2px solid #00ffd5;
}


.alltopers .utoper .tscores i {
color: #ff718b;
font-size: 10px;
}
.usearch .card-header {
text-align: center;
background: #fff;
padding: 0.5rem 1rem;
margin-bottom: 0;
border-bottom: 1px solid rgba(0,0,0,.125);
}

.usearch .col-md-7 {
background: #fff;
width: 98%;
/* flex: 1 1 auto; */
padding: 15px;
}

.usearch input.form-control {
border-bottom-right-radius: 0px!important;
border-top-right-radius: 0px!important;
background: #fff;
height: 35px;
float: left;
width: 75%;
border-radius: 10px;
border: 2px solid #eee;
}

.usearch button.btn.btn-primary {
float: right;
width: 25%;
border-radius: 10px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}

.usearch table.table.table-bordered {
background: #fff;
}
.userbar{height: 65px;background: #005e54;color: #fff;padding: 0 8px;font-size: 24px;/* position: relative; *//* z-index: 1; */}
.userstory .userbar {
color: white!important;
background: #005e54;
}


.userbar div {
float: left;
}

.userbar div i{
color:white;
font-size:18px
}

.userbar:after {
content: "";
display: table;
clear: both;
}

.userbar .actions {
float: right;
margin: 10px 0px 0 15px;
}

.userbar .actions.more {
margin: 10px 12px 0 32px;
}

.userbar .actions.attachment {
margin: 10px 0 0 30px;
}

.userbar .actions.attachment i {
}

.userbar .avatar {
margin: 5px 0 0 5px;
width: 36px;
height: 36px;
}

.userbar .avatar img {
border-radius: 50%;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
display: block;
width: 40px;
height: 40px;
}

.userbar .name {
font-size: 17px;
font-weight: 600;
text-overflow: ellipsis;
letter-spacing: 0.3px;
margin: 5px 0px 0 8px;
overflow: hidden;
white-space: nowrap;
width: 110px;
}

.userbar .status {
display: block;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
}

.editp .unbantxt {
color: white;
font-weight: 600;
padding: 10px;
background: #f00;
border-radius: 5px;
}

.editp input.unban {
background: blue;
color: white;
font-weight: 600;
width: 100px!important;
border: 2px outset white;
margin-top: 20px;
border-radius: 50px;
}

.editp input.unban:active {
border: 2px outset #8f8f8f;
}


.banned {
background: white;
padding: 20px;
border-radius: 5px;
color: #000;
border: 2px solid red;
}

.banned .banhead {padding: 5px;background: #fff;border-radius: 20px;text-align: center;margin-top: 0px;}

.banned .banhead font.banbigtxt {
color: #f00;
font-weight: 1000;
font-size: 20px;
}

.banned .banaccess {
margin-top: 10px;
background: #000;
color: #fff;
font-weight: 600;
padding: 5px;
text-align: center;
border-radius: 5px;
}


.banned .banhead i {
color: red;
}

.banned div {
margin-top: 10px;
}

.banned .reason {
background: red;
color: white;
padding: 5px;
font-weight: 600;
border-radius: 5px;
}

.banned .bantime {
background: #00adff;
padding: 5px;
color: #fff;
font-weight: 600;
border-radius: 5px;
}

.banned .remaintime {
background: #2700ff;
padding: 5px;
color: #fff;
font-weight: 600;
border-radius: 5px;
}

.banned .banby {
background: #ff00a5;
padding: 5px;
color: #fff;
font-weight: 600;
border-radius: 5px;
}

.reports .title {
background: #9d00ff;
padding: 10px;
color: #fff;
font-weight: 600;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center;
margin: -10px;
margin-bottom: 10px;
}

.reports .list2 {
margin-top: 10px;
border-radius: 5px;
background: #fff;
padding: 5px;
border: 1px solid #000;
}

.reports td {
padding-left: 5px;
}

.reports .quote {
font-size: 12px;
border-left: 5px solid #3fff00;
margin: 0.5em 10px;
padding: 0 10px;
}

.reports button.attend {
background: #0066ff;
color: white;
font-weight: 600;
width: 30%;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #2f2fa2;
/* float: right; */
margin-left: 70%;
}

.reports .actions {
padding: 5px;
margin-right: 0%;
border-top: 1px dotted #2f2fa2;
}

.reports font.attender {
color: #0066ff;
font-weight: 600;
}

.reports font.attender i {
font-size: 15px;
color: #06f;
}

footer {

border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-top: 50px;
padding: 15px;
background: #9d00ff;
color: #fff;
}

footer .links i {
margin: 15px;
font-size: 20px;
}

footer .links {
text-align: center;
margin-bottom: 10px;
}

footer .detail {
text-align: center;
}

footer .detail a {
color: #ffffff;
/* text-decoration: underline; */
font-weight: 600;
font-size: 14px;
}

footer .detail a:after {
font-size: 10px;
content: " | ";
position: relative;
top: -2px;
color: #fff;
font-weight: 1000;
margin: 5px;
}

footer .copyright {
padding: 5px;
margin-top: 15px;
text-align: center;
border: 1px solid #000;
border-radius: 5px;
background: #fff;
box-shadow: 0px 0px 10px 0px #000;
color: #000;
}

footer .copyright font.copyrights {
font-weight: 600;
line-height: 1;
font-size: 15px;
}

footer .country img {
width: 50px;
height: 50px;
}

footer .country {
text-align: -webkit-center;
border: 1px solid #eeeeee42;
box-shadow: 0px 0px 5px 0px #000;
border-radius: 5px;
padding: 5px 10px;
width: 40%;
margin: 10px;
font-weight: 600;
font-family: ROBOTO;
}

footer .country .countryname {
background: linear-gradient(90deg, white, #033f19 30px);
padding: 5px 10px;
border-radius: 50px;
color: #ffffff;
}

.team .team-member {
text-align: center;
background: #fff;
border-radius: 20px;
margin-top: 20px;
border: 1px solid #0089ff;
border-bottom: 10px solid #0089ff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

.team .team-member div {
margin-top: 10px;
}

.team .team-member .name {font-weight: 600;text-decoration: underline;font-size: 15px;}

.team .team-member .acces-title {
font-weight: 600;
color: black;
/* background: #000; */
padding: 5px;
border-radius: 5px;
}

.connact i {
font-size: 15px;
color: #747474;
/* margin: 20px; */
/* border: 2px outset #0089ff; */
/* border-radius: 24px; */
/* padding: 1px 5px; */
}

.team .team-member .connact {border-top: 1px solid #eee;padding-top: 10px;padding: 5px;/* background: #f3f3f3; */}

.team .team-member  .connact font.view {
font-weight: 600;
font-size: 15px;
color: #747474;
}

.team .team-member .rank {
background: #0089ff;
color: #fff;
font-weight: 600;
padding: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: 0px;
}

.site-rules .ruleson {
background: #607d8b;
padding: 5px;
text-align: center;
color: #fff;
font-weight: 1000;
margin-top: 10px;
margin-bottom: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.site-rules {
padding: 5px;
background: #fff;
border-radius: 5px;
}

.helpf .ayaan {
background: #fff;
font-weight: 600;
text-align: center;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #e1e1e1;
}

.helpf .ayaan .top {
background: cornflowerblue;
padding: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #fff;
}

.helpf .ayaan .helpst {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border: 2px solid #000;
padding-top: 10px!important;
padding: 5px;
}



.feeda .shutimg {
max-width: 100%;
max-height: 100%;
}

.feeda .meta {
padding-top: 10px;
border-radius: 10px;
}

.feeda .msgg {
font-weight: 600;
float: left;
margin-top: -20px;
margin-left: 45px;
}

.feeda .bx {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.feeda .sp {
letter-spacing: 1px;
}
.feeda .circle {
border-radius: 50%;
}
.feeda .cxs {
font-size: 65%;
}
.feeda .cs {
font-size: 85%;
}
.feeda .lsp {
line-height: 1.56;
}
.sp {
letter-spacing: 1px;
}
.feeda .clb {
color: #404040;
text-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.feeda .sp {
letter-spacing: 1px;
}
.feeda .clb {
font-size: 15px;
font-weight: 600;
color: #404040;
text-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.feeda .textalb {
font-size: 9.2px;
text-align: center;
}

.feeda .shutimg img {
width: 100%;
height: 100%;
max-width:540px;
}

.feeda .textalign {
margin-left: 0;
margin-right:0;
text-align:center;
}

.feeda .post-reactions {
text-align: center;
padding: 10px;
margin-top: -10px;
border-top: 1px solid #000;
border: 0px;
max-width:540px;
}

.feeda button.rbtn {
width: 15%!important;
height: 42px;
}

.sp {
letter-spacing: 1px;
}
.cxs {
font-size: 65%;
}
.total {
padding: 5px 0px;
background: #2f2fa2;
text-align: center;
border-radius: 50px;
width: 30%;
margin-top: 15px;
font-weight: 600;
color: #fff;
}
.ossn-wall-item .meta .owner {
position: absolute;
}

.pageprev {
padding: 10px;
background: linear-gradient(90deg, #f44336, #e91e63);
border: 1px solid #000;
text-align: center;
color: #fff;
font-weight: 600;
border-radius: 5px;
margin-top: 10px;
}

#liverror{
position: fixed;
bottom: 10px;
left: 50%;
padding: 5px;
padding-top: 15px;
transform: translateX(-50%);
background-color: #333;
color: white;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease-in-out;
opacity: 1;
width: 100%;
text-align: center;
z-index:999;
}

.ossn-wall-item .meta .owner i.fa.fa-crown {
position: absolute;
left: 2px;
background: #00000085;
color: white;
border-radius: 50px;
font-size: 10px;
padding: 2px;
top: 21px;
width: 36px;
text-align: center;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}

.starpanelper {
padding: 15px;
background: #fff;
border-radius: 10px;
}

.starpanelper .toptext {
color: blue;
font-weight: 600;
padding: 10px;
border-bottom: 2px solid blue;
text-align: center;
margin-bottom: 20px;
}

.starpanelper label {
text-align: center;
}

.starpanelper .linkk {
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}

.ossn-wall-item .post-contents img {
max-width: 100%;
}

.feed {
padding: 10px;
background: #fff;
overflow: hidden;
border-bottom: 1px solid #000;
text-align: initial;
}

.feed .avatar {
float: left;
width: 60px;
margin-top: 0px;
}

.feed .avatar  img {
width: 50px;
border-radius: 50px;
height: 50px;
}


.feed  .image img {
width: 100%;
border-radius: 5px;
}

.feed .name {
margin-top: 0px;
font-weight: 600;
text-decoration: underline;
}

.feed .fmenu {
float: right;
margin-right: 15px;
margin-top: -10px;
}

.feed .fmenu i {
color: #9d00ff;
}

.feed  .postmessage {
margin: 5px;
margin-top: 30px;
font-weight: 600;
}


.feed .time {
margin: 0px 0px 5px 0px;
color: #767676;
font-family: ROBOTO;
padding: 5px;
font-weight: 600;
}

.buttonaria {
padding: 10px;
border-top: 1px solid #eee;
margin-top: 10px;
}

.buttonaria button.like {
background: #fff;
border: 0px;
float: left;
}

.buttonaria button.comment {
background: #fff;
border: 0px;
float: left;
}

.buttonaria button.comment .circle {
background: #000;
background: #4f61b636;
border-radius: 50%;
color: #fff;
position: relative;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}

.buttonaria button.comment .circle i {
color: #4f61b6;
font-size: 20px;
}

.buttonaria button.like .circle {
background: #f76a694f;
border-radius: 50%;
color: #fff;
position: relative;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}

.buttonaria button.like .circle i {
color: #ff3331;
font-size: 20px;
}

.buttonaria .like-count {
float: left;
margin-top: 14px;
color: #f47c7c;
font-weight: 600;
font-family: ROBOTO;
margin-right: 16px;
}

.feed .uname {
color: #b5b5b5;
}

.buttonaria .comment-count {
float: left;
margin-top: 14px;
color: #4f61b6;
font-weight: 600;
font-family: ROBOTO;
}

.feed  .dropdown-menu {
top: auto;
left: 50%;
margin-top: 20px;
padding: 0px;
}

.preg {
padding: 10px;
background: #fff;
margin: -5px 0px 15px 0px;
white-space: nowrap;
display: flex !important;
flex-direction: row !important;
overflow-x: scroll;
border-top: 2px solid #2196F3;
border-radius: 5px;
border-right: 0px;
border-left: 0px;
}

.preg a {
padding: 5px 10px;
margin-right: 2%;
float: left;
border: 1px solid #919191;
border-radius: 10px;
font-weight: 600;
color: #000;
font-family: ROBOTO;
padding-top: 10px;
}
.preg a i {
font-size: 12px;
}
.preg::-webkit-scrollbar {
height: 2px;
width:5px
}
.preg::-webkit-scrollbar-thumb {
background-color: #2196F3;
}
font.exired {
color: red;
font-weight: 600;
font-family: ROBOTO;
padding: 5px;
border: 1px solid red;
}

.gifts {
padding: 10px;
background: #fff;
overflow: hidden;
}

.gifts .divtext {
margin: 10px 15px;
padding-bottom: 10px;
color: #000;
font-weight: 600;
font-size: 17px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}

.gifts .gift .image img {
width: 40px;
}

.gifts .gift .image {float: left;}

.gifts .gift .name {
font-weight: 600;
margin-top: 10px;
margin-left: 50px;
}

.gifts .gift {
background: #f7f7f7;
border-radius: 5px;
padding: 5px;
overflow: hidden;
margin-top: 10px;
}

.gifts .gift .count {
margin-top: -15px;
float: right;
margin-right: 10px;
font-weight: 600;
color: black;
text-shadow: 0 0 0px red;
font-family: sans-serif;
font-size: 10px;
}

.gifts .gift .count:after {
content: " )";
}

.gifts .gift  .count:before {
content: "( ";
}

.gifts .giftgift {
border: 3px solid #eee;
overflow: hidden;
float: left;
text-align: center;
font-weight: 600;
padding: 4px;
border-radius: 10px;
width: 40%;
margin: 5%;
}

.gifts .giftgift .image img {
width: 100%;
height:150px;
border-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
box-shadow: inset 0px 0px 5px 0px black;
}


.gifts .giftgift .price {
background: linear-gradient(266deg, #d91a60, #fe922f);
color: white;
padding: 5px;
}

.gifts .giftgift .name {
background: linear-gradient(123deg, #ff00bf, #0081ff);
padding: 5px;
border-radius: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
color: #ffff;
}
.sendingarea {
padding: 10px;
background:#fff;
overflow: hidden;
text-align: center;
}

.sendingarea .divtext {
margin: 10px 15px;
padding-bottom: 10px;
color: #000;
font-weight: 600;
font-size: 17px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}

.sendingarea .img {
border: 1px solid #eee;
}

.sendingarea .img img {
width: 245px;
}

.sendingarea .sendto {
padding: 10px;
background: #0088ff;
font-weight: 600;
color: white;
text-align: left;
border-radius: 5px;
}

.sendingarea button.sending {
margin-top: 20px;
background: deeppink;
padding: 11px;
width: 50%;
border: 1px solid #fff;
color: #fff;
font-weight: 600;
border-radius: 5px;
}
.sendingarea textarea {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}
.sendingarea label {
margin: 15px;
}
.aboutgift {
padding: 10px;
background: #fff;
overflow: hidden;
}

.aboutgift .gift {
text-align: center;
border: 1px solid #eee;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}

.aboutgift .gift .image {
float: none;
border: 1px solid #9c27b0;
border-top: 10px solid #9c27b0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

.aboutgift .gift .aouti {
float: left;
padding: 10px;
width: 50%;
border: 1px solid #9c27b0;
}

.aboutgift .gift .aouti .about {
font-family: ROBOTO;
margin-bottom: 10px;
}

.aboutgift .gift .aouti .info {
font-weight: 600;
font-family: ROBOTO;
word-break: break-all;
}

.aboutgift .gift .image .imageguft {
font-weight: 600;
font-family: ROBOTO;
word-break: break-all;
margin: 10px;
border-bottom: 1px solid #eee;
padding: 10px;
}

.aboutgift .gift .image img {
width: 100%;
}
.editp .pic {
overflow: hidden;
text-align: center;
margin: 26px;
padding: 26px;
border-bottom: 1px solid #eee;
border-radius: 5px;
}

.editp  .pic .profilepic img {
width: 150px;
height: 150px;
border-radius: 1000px;
border: 5px outset #e91e63;
padding: 5px;
}

.editp .pic .profilepic i {
background: deeppink;
padding: 5px 8px;
position: absolute;
margin-top: 90px;
margin-left: -45px;
border-radius: 50px;
border: 5px
solid #FFF;
}

.editp .pic .name {
margin-top: 15px;
font-weight: 600;
color: #e91e63;
padding: 10px;
border: 1px solid #eee;
font-family: STYLISH;
font-size: 22px;
font-style: italic;
text-decoration: underline;
}
.shop {
padding: 10px;
background: #ffff;
}

.shop .card { 
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
transition: 0.3s; 
width: 40%; 
display: inline-block; 
margin: 10px; 
white-space: wrap !important; 
text-overflow: clip !important; 
overflow: hidden !important; 
word-break: break-word; 
word-wrap: break-word; 
height: 100%; 
} 
.shop .card:hover { 
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
} 
.shop .containershah { 
padding: 2px 16px; 
}
@media (min-width: 576px) { 
.shop .card { 
width: 20%; 
} 
}
@media (max-width: 199px) { 
.shop .card { 
width: 95%; 
} 
} 

.shop .cardshah-khaki {
color: #fff;
background: red;
padding: 10px;
border-radius: 5px;
font-weight: 600;
margin: 10px;
border: 1px solid #000;
} 

.shop .round {
border-radius: 5px !important;
}

.shop .title {
background: #2f2fa2;
padding: 5px;
color: #fff;
text-align: center;
font-weight: 600;
margin-bottom: 15px;
border-radius: 50px;
}

.shop .round img {
padding: 0px 5px;
margin: 10px;
border: 1px solid #eee;
}

.shop .btn-block {
margin: 10px;
margin-left: 0px;
font-weight: 600;
background: cornflowerblue;
text-shadow: 0 0 black;
}

.shop .containershah span {
margin-top: 10px;
}

.namechange {
padding: 10px;
background: #fff;
border-radius: 5px;
}

.namechange  .imptext {
padding: 10px;
background: cyan;
}

.namechange  .simple {
background: #fff;
padding: 5px;
}

.namechange  .imp {
margin: 5px;
text-align: center;
background: #000;
color: red;
font-weight: 600;
padding: 5px;
width: 35%;
border: 5px solid #f76697;
margin-bottom: 0px;
}

.namechange  .text {
padding: 10px;
background: #f76697;
font-weight: 600;
border-radius: 5px;
color: #fff;
}

.namechange  form {
padding: 10px;
margin: 10px;
border: 1px solid #eee;
text-align: center;
}

.namechange  input[type="text"], .namechange input[type="color"] {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.namechange  button {
color: #fff;
background: #0072ff;
border: 1px;
padding: 6px 25px;
border-radius: 5px;
font-weight: 600;
}

.seedit  .author {
text-align: left;
font-family: ROBOTO;
margin: 10px;
color: #ff0057;
font-size: 14px;
border: 1px solid;
padding: 10px;
}

.deniederror {
background: #fff;
padding: 10px;
color: black;
text-shadow: 0px 0px 20px red;
font-size: 15px;
font-weight: 600;
text-align: center;
font-family: system-ui;
border: 1px solid red;
border-radius: 5px;
}


.alltopers .leveltable .optt {overflow: hidden;}

.alltopers .leveltable .optt .i {
padding: 10px;
border: 1px solid #eee;
float: left;
width: 15%;
text-align: center;
font-family: ROBOTO;
font-weight: 600;
}

.alltopers .leveltable .optt .level {
border: 1px solid #eee;
padding: 10px;
float: left;
font-family: ROBOTO;
font-weight: 1000;
}

.alltopers .leveltable .optt .scores {
border: 1px solid #eee;
padding: 10px;
float: left;
width: 65%;
text-align: center;
font-family: ROBOTO;
font-weight: 600;
color: blue;
}

.alltopers .leveltable .optt .level {
width: 20%;
text-align: center;
}

.alltopers .leveltable .displaytext {
width: 100%;
border: 1px solid #eee;
padding: 10px;
text-align: center;
font-weight: 600;
color: hotpink;
font-family: ROBOTO;
}
.dropdown-menu{
padding: 0px!important;
}
.policy {
padding: 10px;
border-radius: 5px;
background: #fff;
text-align: center;
}

.policy .firsthead {
padding: 10px;
border: 1px solid #eee;
font-size: 25px;
font-family: ROBOTO;
font-weight: 600;
}

.policy .lastupdate {
padding: 10px;
border: 1px solid #eee;
border-top: 0px;
color: blue;
font-weight: 600;
font-family: ROBOTO;
}

.policy .aboutfirst {
margin: 10px;
border-bottom: 1px solid #000;
padding: 10px;
font-family: ROBOTO;
font-weight: 1000;
font-size: 20px;
}

.policy .abouting {
border-left: 1px solid red;
border-right: 1px solid #454CFB;
border-bottom: 1px solid red;
border-top: 1px solid #454CFB;
margin-top: 30px;
border-radius: 10px;
text-align: left;
box-shadow: 2px 1px 2px 0px #454CFB, -2px 0px 2px 0px red;
}

.policy .abouting .aboutdiv {
background: linear-gradient(90deg, red, #001fff);
color: #fff;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-weight: 600;
font-family: ROBOTO;
text-align: center;
margin: -2px;
}

.policy .abouting .about {
padding: 10px;
font-variant: small-caps;
font-weight: 600;
}

.policy .abouting .about ul {
text-align: left;
}
.maintainance .showaria {
padding: 20px;
margin: 20px;
box-shadow: 0px 0px 6px 0px #000;
font-family: ROBOTO;
border-radius: 10px;
background:#fff;
}

.maintainance {
text-align: -webkit-center;
}

.maintainance .showaria .topside {
color: red;
font-weight: 600;
font-size: 145%;
text-shadow: 0 0 0px black;
}

.maintainance .showaria .abouttext {
font-size: 12px;
margin: 10px;
font-weight: 600;
color: cornflowerblue;
}

.maintainance .showaria .signaria {
padding: 10px;
border: 1px solid #eee;
text-align: left;
}

.maintainance .showaria .signaria .abouttextaria {
margin: 5px;
border-bottom: 1px solid #eee;
font-weight: 1000;
text-align: center;
}

.maintainance .showaria .signaria input[type="text"] {
width: 100%;
border: 1px solid #d9d9d9;
padding: 10px;
}

.maintainance .showaria .signaria input[type="submit"] {
padding: 5px;
width: 30%;
background: #0d6efd;
color: #fff;
border: 1px solid #0d6efd;
border-radius: 5px;
margin: 10px;
font-family: math;
}

.selections {
padding: 10px;
background: #c5c5c5;
border: 2px solid;
}

.selections .selecter {
width: 100%;
padding: 15px;
background: #fff;
font-weight: 600;
}

.selections .selecter .select_icon {
float: left;
margin-right: 10px;
margin-left: 2px;
}

.selections .selecter .select_icon i {
color: #000;
margin-top: -2px;
}

.selections .aboutdiv {
padding: 10px;
width: 100%;
text-align: center;
background: #fff;
font-weight: 600;
color: blue;
}
.rightarea {background: #fff;border: 1px solid darkgray;padding: 10px;
display:none;}

.rightarea .abouttyc {
font-family: ROBOT;
font-weight: 600;
border: 1px solid #eee;
padding: 10px;
}

.rightarea .aboutdiv {
padding: 10px;
text-align: center;
border: 1px solid #eee;
margin: -10px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: 600;
color: #959595;
}

.rightarea .actives {
margin: -10px;
margin-bottom: 10px;
border: 1px solid #eee;
padding-top: 10px;
}

.rightarea img#dp {border-radius: 50px;margin-top: -8px;float: left;width: 50px;height: 50px;background: linear-gradient(90deg,#9d00ff,#0575ff,#ff5722,#ff1493) border-box;padding: 2px;}

.rightarea img.active {
}

.rightarea .onlines {
border-bottom: 2px solid #eee;
padding: 10px;
margin-bottom: 10px;
overflow: hidden;
}

.rightarea .name {
margin-left: 5px;
margin-top: -5px;
color: blue;
text-decoration: underline;
font-weight: 600;
}

.rightarea img.active {
width: 19px;
margin-top: 10px;
margin-left: -51px;
position: absolute;
border: 3px solid #fff;
border-radius: 50px;
background: #fff;
}

.rightarea .onlines:last-child {
border: 0px;
}
@media (min-width:601px) {
.rightarea {
display:block;
float:right;
width: 33.33333%;
}

.centerrow {
float:left;
width: 65.66666%;
border: 1px solid darkgray;
border-radius: 10px;
}


}
.radioprivacy {
padding: 10px;
background: #ffff;
overflow: hidden;
}

.radioprivacy .user {
padding: 5px;
border-radius: 5px;
background: #00000014;
overflow: hidden;
margin-top: 10px;
}

.radioprivacy .user .leftsider .dp img {
width: 50px;
border-radius: 50px;
height: 50px;
}

.radioprivacy .user .leftsider {
float: left;
width: 85%;
}

.radioprivacy .user .leftsider .dp {
float: left;
}

.radioprivacy .user .leftsider .ntext {
float: left;
margin-left: 5px;
margin-top: 5px;
font-weight: 600;
}

.radioprivacy .user .radioslct {
padding: 0px 5px;
float: right;
margin: 2%;
border: 2px solid blue;
}

.radioprivacy .user .radioslct input[type="checkbox"] {
/* Double-sized Checkboxes */-ms-transform: scale(2); /* IE */-moz-transform: scale(2); /* FF */-webkit-transform: scale(2); /* Safari and Chrome */-o-transform: scale(2); /* Opera */transform: scale(2);}

.radioprivacy .pagetitle {
padding: 10px;
margin: 10px;
text-align: center;
border-bottom: 5px solid #eee;
font-weight: 600;
}

.radioprivacy .searcharea {
margin: 20px;
}

.radioprivacy .searcharea input[type="text"] {
width: 83%;
padding: 10px;
border: 2px solid blue;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-right: 0px;
}

.radioprivacy.radioprivacy .searcharea  button.search_button {
padding: 10px;
border: 1px solid blue;
background: #fff;
width: 15%;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
margin-top: 5px;
background: blue;
margin-left: -5px;
}

.radioprivacy.radioprivacy .searcharea button.search_button i {
font-size: 15px;
color: #fff;
}
.radioprivacy .sendbutton {
padding: 20px;
text-align: -webkit-center;
margin: 10px;
border-bottom: 1px solid #eee;
}

.radioprivacy .sendbutton input.buttonsend {
padding: 7px 20px;
background: cornflowerblue;
color: #fff;
font-weight: 600;
border-radius: 50px;
border: 1px solid;
}

.squote  .rado {
background: #fff;
box-shadow: 0px 0px 5px 0px;
border-radius: 5px;
margin: 10px;
overflow: hidden;
padding: 10px;
}

.squote  .rado div {
float: left;
}

.squote .rado div input[type="radio"] {
margin-right: 5px;
margin-left: 5px;
}

.squote .rado div font.privacytxt {
color: blue;
font-weight: 600;
}

.squote .rado .right {
float: right!important;
text-decoration: underline;
color: #25D366;
}
.ossn-wall-items .pin {
border: 5px solid #9d00ff;
border-radius: 15px;
margin-top: 10px;
}

.ossn-wall-items .pin .pintxt {
background: #9d00ff;
padding: 15px;
text-align: center;
color: white;
font-weight: 600;
font-family: RBOO;
font-size: 16px;
margin-bottom: -30px;
}
.pageoff {
padding: 10px;
border: 1px solid red;
text-align: center;
font-weight: 600;
color:#fff;
background:red;
margin:10px;
}
.feelings {
background: #fff;
padding: 5px;
}

.feelings label {
padding: 10px;
border-bottom: 5px solid #eee;
width: 100%;
text-align: center;
}

.feelings input#send {
width: 60%;
margin-top: 20px;
}

.feel {
border-bottom: 1px solid #000;
padding: 10px;
}

.feelings .feel  span {
margin-left: 10px;
}

.feelings .feel span img {
border-radius: 50px;
}
.reports .usercircle {
background: #fff;
padding: 10px;
border: 1px solid deeppink;
margin-top: 20px;
border-radius: 5px;
}

.reports .usercircle .dp img {
width: 100px;
height: 100px;
border-radius: 50px;
border: 2px solid deeppink;
padding: 5px;
}

.reports .usercircle .dp {
text-align: center;
}

.reports .usercircle .time {
float: right;
margin-top: -100px;
padding: 5px;
border: 1px solid #eee;
font-weight: 600;
font-family: auto;
}

.reports .usercircle .name {
text-align: center;
margin: 5px;
padding: 10px;
font-weight: 600;
color: deeppink;
text-decoration: underline;
font-size: 16px;
}

.reports .usercircle .more {
border: 1px solid #eee;
}

.reports .usercircle .more div {
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
padding: 15px;
font-weight: 600;
font-family: ROBOTO;
}

.reports {
padding: 10px;
border: 1px solid #9d00ff;
border-radius: 15px;
}

.reports .aboutpage {
background: #000;
padding: 10px;
color: #fff;
text-align: center;
font-weight: 600;
font-family: ROBOTO;
margin: -10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ipblock {
padding: 10px;
border: 2px solid red;
background: #fff;
text-align: center;
font-family: ROBOTO;
}

.ipblock .topside {
margin: 10px;
color: red;
font-weight: 600;
font-size: 20px;
}

.ipblock .aftertext {
padding: 10px;
margin: 10px;
border: 1px solid #eee;
font-weight: 600;
}

.ipblock .thankstext {
padding: 10px;
margin: 10px;
font-weight: 600;
color: blue;
}  
.profile .friendsarea {
margin-top: 20px;
border-radius: 10px;
border-top: 5px solid blue;
border-bottom: 5px solid blue;
background: #fff;
padding: 15px;
padding-top: 20px;
overflow: hidden;
}

.profile .friendsarea .aboutdivtxt {
padding: 10px;
font-size: 16px;
border-bottom: 1px solid #000;
font-weight: 600;
margin: 5px;
margin-bottom: 10px;
}

.profile .userfrnd .frndimg img {
width: 75px;
border-radius: 10px;
height: 75px;
}

.profile .friendsarea .userfrnd {
float: left;
width: 31%;
padding: 10px;
margin: 1%;
border: 1px solid #eee;
border-radius: 5px;
text-align: center;
height: 120px;
font-weight: 600;
font-family: ROBOTO;
box-shadow: 0px 0px 2px 0px #000;
}


.profile .friendsarea .userfrnd .frndname {
margin-top: 10px;
font-weight: 600;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
width: 100%;
}

.profile .rcvgifts {
margin-top: 20px;
border-radius: 10px;
border-top: 5px solid red;
border-bottom: 5px solid red;
background: #fff;
padding: 15px;
padding-top: 20px;
overflow: hidden;
}

.profile .rcvgifts .aboutdivtxt {
padding: 10px;
font-size: 16px;
border-bottom: 1px solid #000;
font-weight: 600;
margin: 5px;
margin-bottom: 10px;
}

.profile .rcvgifts .rcvgift {
float: left;
padding: 10px;
margin: 5%;
border: 1px solid #eee;
width: 40%;
box-shadow: 0px 0px 2px 0px #000;
border-radius: 5px;
height: 180px;
}

.profile .rcvgift .giftimg img {
width: 100%;
height: 100px;
border-radius: 5px;
}

.profile .rcvgifts .rcvgift .giftname {
text-align: center;
margin: 5px;
font-weight: 600;
}

.profile .rcvgifts .rcvgift .fromname {
text-align: center;
font-weight: 600;
color: blue;
border: 1px solid;
padding: 5px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
}

.profile .oriiinfo {
padding: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom: 5px solid #9d00ff;
background: #ffffff;
margin-bottom: 20px;
padding-bottom: 30px;
}

.profile .oriiinfo .dp img {
width: 100px;
height: 100px;
border-radius: 15px;
border: 2px solid #9d00ff;
padding: 2px;
}

.profile .oriiinfo .dp {
margin-top: -50px;
}

.profile .oriiinfo .settingbtn {margin-top: -100px;position: absolute;margin-top: -160px;right: 5%;}

.profile .oriiinfo .settingbtn .settingicon {
background: #d9d9d9cf;
border-radius: 50px;
padding: 5px 8px;
}

.profile .oriiinfo .settingbtn .settingicon i {
color: #000;
font-size: 15px;
}

.profile .oriiinfo .mood {
margin-top: 5px;
}

.profile .oriiinfo .mood font.nowmood {
border-radius: 10px;
padding: 4px 2px;
font-family: ROBOTO;
background: #eee;
padding-right: 5px
}

.profile .oriiinfo .dp .badging {
position: absolute;
background-color: #9d00ff;
color: #fff;
padding: 4px 10px;
border-radius: 5px;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
font-size: 14px;
font-weight: bold;
margin-top: -29px;
margin-left: 71px;
font-family: monospace;
}

.profile .oriiinfo .mood font.nowmood img {
margin-top: -3px;
margin-right: 2px;
}

.profile .oriiinfo .follow {
float: right;
margin-top: -30px;
}

.profile .oriiinfo .follow button.btn.follow {
background: cornflowerblue;
color: #fff;
font-weight: 600;
}

.profile .oriiinfo .follow button.btn.follow i {
font-size: 15px;
margin-right: 1px;
}

.profile .oriiinfo .name div {
margin-left: 5px;
width: 100px;
text-align: center;
margin-top: 5px;
color: #9d00ff;
font-weight: 600;
}

.profile .oriiinfo .followinfo {
margin-top: 5px;
}

.profile .oriiinfo .followinfo .followers {
margin-right: 10px;
font-family: ROBOTO;
}

.profile .oriiinfo .followinfo .followings {
font-family: ROBOT;
}

.profile .oriiinfo .statuss font {
font-family: ROBOTO;
margin-right: 5px;
text-transform: uppercase;
}

.profile .oriiinfo .statuss font:after {
content: "/";
margin-left: 5px;
}

.profile .oriiinfo .statuss {
margin-top: 5px;
}

.profile .oriiinfo .btns {
padding: 10px;
text-align: -webkit-center;
margin-top: 10px;
border-top: 2px solid #eee;
}

.profile .oriiinfo .btns .newmessage {
background: #25d366;
font-weight: 600;
color: #fff;
}

.profile .oriiinfo .btns i {
font-size: 15px;
}

.profile .oriiinfo .btns .block {
background: red;
font-weight: 600;
color: #fff;
margin-left: 15px;
}

.profile .oriiinfo .btns .sgift {
background: #673ab7;
font-weight: 600;
color: #fff;
margin-left: 50px;
margin-top: 10px;
display: block;
}

.profile .oriiinfo .statuss font:last-child:after {
content: "";
}

.profile .oriiinfo .county {
font-family: ROBOTO;
margin-top: 5px;
}

.profile .uabout {
margin: 10px;
background: #fff;
padding: 10px;
border-radius: 10px;
margin-top: -45px;
border-top: 5px solid #9d00ff;
border-left: 5px solid #9d00ff;
border-right: 5px solid #fb6296;
border-bottom: 5px solid #fb6296;
position: relative;
margin-bottom: -25px;
}

.profile .uabout .abouttxt {
box-shadow: 0px 0px 5px 0px #F2B;
padding: 10px;
border-radius: 5px;
font-weight: 600;
text-align: center;
}

.problems {
overflow: hidden;
padding: 10px;
border: 1px solid #eee;
box-shadow: 0px 0px 3px 0px #000;
margin-top: 20px;
border-radius: 10px;
}
.problems .aboutdiv {
padding: 10px;
border: 1px solid #eee;
overflow: hidden;
}

.problems font.que {
float: left;
width: 50%;
font-weight: 600;
margin-top: 10px;
}

.problems font.ans {
float: right;
width: 50%;
font-family: ROBOTO;
margin-top: 10px;
}

.problems font.ans img {
width: 100%;
height: 100%;
}

.problems .from {
padding: 10px;
margin: 10px;
border-bottom: 1px solid #eee;
font-weight: 1000;
text-align: center;
color: red;
font-family: ROBOTO;
font-size: 16px;
}

.problems .button {
margin-top: 15px;
padding: 10px;
border: 1px solid #eee;
}

.problems .btntxt {
padding: 10px;
background: #fafafa;
font-weight: 600;
color: #5D6D7E;
border: 1px solid #eee;
border-bottom: 0px;
text-align: center;
margin: -10px;
margin-bottom: 10px;
overflow: hidden;
}

.problems .button .btn {
width: 45%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 5%;
border-radius: 5px;
font-weight: 600;
}
.problem {
padding: 10px;
background: #fff;
}

.problem .form {
padding: 10px;
border: 1px solid #eee;
text-align: center;
}

.problem .form textarea {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 10px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}

.problem .form input#attach {
width: 100%;
border: 1px solid #E9EAED;
padding: 7px;
margin-bottom: 15px;
margin-top: 5px;
outline: none;
border-radius: 5px;
}

.problem .form button.probbtn {
width: 50%;
padding: 7px;
color: #fff!important;
background-color: #0d6efd;
border: 1px solid #0d6efd;
border-radius: 5px;
font-weight: 600;
margin-top: 10px;
margin-bottom: 10px;
}

.problem .form .aboutdivtxt {
padding: 10px;
font-size: 16px;
border-bottom: 1px solid #000;
font-weight: 600;
margin: 5px;
margin-bottom: 10px;
text-align: left;
}

.problem .divstart {
padding: 10px;
font-size: 16px;
border-bottom: 1px solid #000;
font-weight: 600;
margin: 5px;
margin-bottom: 10px;
text-align: left;
}

.problem .aboutprob {
overflow: hidden;

}

.problem .aboutprob .problems {
padding: 10px;
border: 1px solid #eee;
overflow: hidden;
}

.problem .aboutprob .problems  .subject {
font-weight: 600;
font-family: ROBOTO;
font-size: 20px;
}

.problem .aboutprob .problems .subject i {
color: #000;
font-size: 18px;
margin-right: 10px;
}

.problem .aboutprob .problems  .idnum {
float: right;
margin-top: -30px;
color: #9d00ff;
}

.problem .aboutprob .problems  .action {
margin-left: 38px;
margin-top: 6px;
}

.problem .aboutprob .problems  .action font.actiontxt, .starpanelper .problems font.ans  .action {
padding: 5px;
border-radius: 5px;
font-weight: 600;
margin-right: 5px;
}
.problem .aboutprob .problems  .action font.ans, .starpanelper .problems font.ans  .action font.answer  {
background: #9d00ff;
color: #fff;
}

.problem .aboutprob .problems  .action font.open, .starpanelper .problems font.ans  .action font.open  {
background: #0d6efd;
color: #fff;
}

.problem .aboutprob .problems  .action font.progess, .starpanelper .problems font.ans  .action font.progess {
background: red;
color: #fff;
}

.problem .aboutprob .problems  .action font.closed, .starpanelper .problems font.ans  .action font.closed{
background: #f44336;
color: #fff;
}
.starpanelper .helpus {
border: 1px solid #eee;
}

.starpanelper .helpus .help {
border: 1px solid #eee;
padding: 10px;
overflow: hidden;
}

.starpanelper .helpus .help .left div {
float: left;
}

.starpanelper .helpus .help .left {
overflow: hidden;
float: left;
}

.starpanelper .helpus .help .right {
float: right;
margin-right: 5px;
padding: 0px 10px 0px 10px;
}

.starpanelper .helpus .help .left .iconhelp i {
color: blue;
}

.starpanelper .helpus .help .right .rhelpicon i {
color: #000;
}

.starpanelper .helpus .help .left .helptxt {
margin-top: 2px;
margin-left: 10px;
font-weight: 600;
}

.starpanelper .helpus .help .helpcontent {
padding: 10px;
margin-top: 40px;
border-top: 2px solid #eee;
display: none;
}

.starpanelper .helpus .help .helpcontent .steps {
padding: 10px;
background: #9d00ff;
color: #fff;
font-weight: 600;
margin: -10px;
margin-bottom: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

.starpanelper .helpus .help .helpcontent .content {
border: 1px solid #9d00ff;
padding: 10px;
border-radius: 10px;
margin-top: 10px;
}

.starpanelper .helpus .help .helpcontent .helpimg {
text-align: -webkit-center;
border: 1px solid #000000;
margin-top: 10px;
}

.starpanelper .helpus .help .helpcontent .contenttxt {
font-weight: 600;
padding: 5px;
}

.starpanelper .helpus .help .helpcontent font.helpeng {
color: deeppink;
margin-right: 10px;
display: block;
margin-bottom: 10px;
}
.starpanelper .helpus .help #banhelp:target{
display:block!important;
}
.starpanelper .helpus .help #reghelp:target{
display:block!important;
}
.starpanelper .helpus .help #ipcheck:target{
display:block!important;
}
.starpanelper .helpus .help #reccheck:target{
display:block!important;
}
.starpanelper .helpus .help #dltcheck:target{
display:block!important;
}
.starpanelper .helpus .help #percheck:target{
display:block!important;
}
.starpanelper .helpus .help .helpcontent .helpimg img {
width: 100%;
}
.starpanelper .problems font.ans .action font.actiontxt {
padding: 5px;
border-radius: 5px;
font-weight: 600;
margin-right: 5px;
}
.squote input[type=file] {
width: 100%!important;
padding: 7px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 1px solid #eee;
}
.starpanelper .userrequest {
overflow: hidden;
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
margin-top: 30px;
}

.starpanelper .userrequest .avatar img {
width: 50px;
border-radius: 50px;
height: 50px;
border: 1px outset #eee;
padding: 2px;
}

.starpanelper .userrequest .avatar {
float: left;
}

.starpanelper .userrequest  .wherefrom {margin-left: 55px;margin-top: 3px;}

.starpanelper .userrequest .wherefrom .name {font-weight: 600;color: #e91e63;font-family: stylish;font-size: 17px;font-style: italic;text-decoration: underline;}

.starpanelper .userrequest span.time {
float: right;
margin-top: -45px;
font-size: 12px;
font-family: ROBOTO;
color: #7f7f7f;
}

.starpanelper .userrequest  .buttons {
border: 1px solid #eee;
margin: -10px;
margin-top: 15px;
overflow: hidden;
padding: 5px;
padding-top: 10px;
padding-bottom: 10px;
}

.starpanelper .userrequest .buttons .accept {
float: left;
text-align: center;
width: 40%;
border: 1px solid blue;
padding: 5px;
color: blue;
border-radius: 5px;
margin-right: 20%;
font-weight: 600;
}

.starpanelper .userrequest .buttons .cancel {
float: right;
text-align: center;
width: 40%;
border: 1px solid red;
padding: 5px;
border-radius: 5px;
color: red;
font-weight: 600;
}


.starpanelper .userrequest .wherefrom i {
font-size: 10px;
margin-left: 4px;
color: #e91e63;
}
.duel {
margin: auto;
border: 1px solid #e7e7e7;
margin-bottom: 5px;
background: #ffffff;
}

.duel .dueltitle {
text-align: center;
font-weight: bold;
color: #5D6D7E!important;
padding: 5px;
background-color: #ffffff;
border-bottom: 1px solid #dddfe2;
margin: -8px;
margin: 0px;
}

.duel .duelfirstt {
color: #000000 !important;
max-width: 100%;
}

.duel .duelfirstt ul.duel-box li.duelli {
width: 49.99999%;
float: left;
display: inline-block;
vertical-align: middle;
text-align: center;
}

.duel .duelfirstt ul.duel-box {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
will-change: transform;
width: 100%;
}

.duel .duelfirstt ul.duel-box li.duelli .duel-card {
padding: 0px;
border-radius: 10px;
margin: 5px;
background-color: #fafafa;
border: 1px solid #dddfe2;
text-align: left;
}

.duel .duelfirstt ul.duel-box li.duelli .duel-card a.profilelink {
padding: 0px !important;
display: block !important;
text-align: center;
font-weight: bold;
color: #5D6D7E!important;
font-size: 20px;
}

.duel .duelfirstt ul.duel-box li.duelli .duel-card a.profilelink .dueluser {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
overflow: hidden;
min-width: 100%;
height: 100px;
background-color: #5D6;
}

.duel .duelfirstt ul.duel-box li.duelli .duel-card a.profilelink .dueluser img.img-cover {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
margin-left: auto;
margin-right: auto;
}

.duel .duelfirstt ul.duel-box li.duelli .duel-card a.profilelink .duelusername {
padding: 5px;
}

.duel .duelfirstt ul.duel-box li.duelli  .duelvotes {
padding: 5px;
margin-top: -5px;
}

.duel .duelfirstt ul.duel-box li.duelli .duelvotes .votearia {
float: right;
margin: 0;
padding: 0;
}

.duel .duelfirstt ul.duel-box li.duelli .duelvotes .votearia span.winner {
border-radius: 10px;
color: #fff;
background: #4CAF50;
padding-left: 5px;
padding-right: 5px;
}

.duel .duelfirstt ul.duel-box li.duelli .duelvotes .normal {
font-size: normal;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
color: #5D6D7E;
}

.duel .duelfirstt .timearia {
text-align: left !important;
padding: 5px;
}

.duel .duelfirstt .timearia .timmme {
text-align: left !important;
color: #5D6D7E;
font-size: 90%;
}

.duel .duelfirstt ul.duel-box li.duelli .duelvotes .votearia a.votebutton {
color: #fff;
padding: 2px !important;
display: block !important;
background-color: #9d00ff;
color: #ffffff;
border-radius: 15px;
font-weight: bold;
}

.duel .duelfirstt ul.duel-box li.duelli .duelvotes .votearia a.votebutton:hover {
opacity: 0.8!important;
}
.reg {
padding: 10px;
background: #ffffff;
margin-top: -70px;
border: 1px solid #E91E63;
}
.reg .decs font.welcmsg {
font-weight: 600;
font-size: 18px;
}

.reg .decs {
text-align: center;
}

.reg .decs font.decmsg {
display: block;
}

.reg .tit {
background: #E91E63;
color: #fff;
padding: 10px;
margin: 10px;
margin-left: -10px;
margin-right: -10px;
font-weight: 600;
font-family: ROBOTO;
text-align: center;
font-size: 15px;
}

.reg  .detail .go {
font-weight: 600;
color: #000;
font-size: 20px;
}

.reg  .detail .form-group {
margin: 0px;
font-weight: 100;
font-family: ROBOTO;
font-size: 15px;
}

.reg  .detail font.ans {
font-weight: 600;
}

.reg  .detail {
padding: 10px;
border: 1px solid #eee;
box-shadow: inset 0px 0px 5px 0px #a7a7a7;
border-radius: 5px;
}

.reg  .detail .link {
padding: 20px;
text-align: center;
font-weight: 600;
text-decoration: underline;
border-top: 1px solid #eee;
margin-top: 10px;
}

.reg .detail .link a {
background: #9d00ff;
color: #fff;
padding: 10px;
border-radius: 50px;
box-shadow: 0px 0px 8px 3px #bebebe;
}

#msgpopup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 9999;
}


#networkIndicator {
position: fixed;
bottom: 10px;
left: 50%;
padding: 5px;
padding-top: 15px;
transform: translateX(-50%);
background-color: #333;
color: white;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease-in-out;
opacity: 0;
width: 85%;
text-align: center;
}

#networkIndicator.active {
opacity: 1;
}

#networkIndicator.hidden {
display: none;
}
.bass-media-filter {
padding: 0 5px 0;
overflow: hidden;
background: #f4f4f4;
}

.bass-media-filter .bass-filter-item {
width: 20%;
float: left;
display: block;
padding: 4px;
margin-bottom: 10px;
}

.bass-filter-content {
width: 100%;
padding: 12px 5px;
cursor: pointer;
text-align: center;
border-radius: 3px;
background: #fff;
color: #898989;
}

.bass-media-filter .bass-filter-item i {
font-size: 15px;
margin-bottom: 8px;
display: block;
color: #898989;
}

.bass-media-filter .bass-filter-item span {
font-size: 13px;
font-weight: 600;
}

.bass-media-filter .bass-filter-item .activediv {
background: #4fc1e9;
color: #fff;
}

.bass-media-filter .bass-filter-item .activediv i {
color: #fff;
}
.adtlt {
margin-top: 20px;
margin-bottom: 20px;
border-bottom: 1px solid;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.adtlt .tlt {
background: #fff;
padding: 10px;
text-align: center;
font-family: ROBOTO;
font-weight: 600;
border: 1px solid #000;
border-bottom: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.adtlt .ad {
border: 1px solid #000;
}

.unverified {
padding: 10px;
background: #fff;
margin: 10px;
border-radius: 10px;
border: 1px solid #5cb85c;
}

.unverified .buttons {
border-top: 1px solid #eee;
padding: 10px;
overflow: hidden;
margin-top: -20px;
margin-left: 5px;
margin-right: 5px;
}

.unverified .buttons .btn {
margin: 5px;
float: right;
}

.unverified .unftxt {
padding: 10px;
font-family: ROBOTO;
font-weight: 600;
}

.game {
padding: 10px;
background: #fff;
border: 2px solid #000;
border-radius: 5px;
overflow:hidden;
}

.game div {
margin: 5px;
}

.game .game-name {
text-align: center;
font-weight: 600;
font-size: 20px;
font-family: ROBOTO;
color: green;
}

.game .buttons {
text-align: center;
padding: 15px;
overflow: hidden;
border-top: 1px solid #eee;
padding-top: 15px;
margin-top: 15px!important;
}

.game .buttons button.btn-success {
float: right;
width: 45%;
margin: 2%;
padding: 10px;
}

.game .buttons button.btn-danger {
float: left;
width: 45%;
margin: 2%;
padding: 10px;
}

.game .game-logo img {
padding: 3px;
width: 100%;
border: 2px solid #eee;
}

.game .game-info {
padding: 10px;
}
.game .start-form .eggs {
overflow: hidden;
}

.game .start-form .eggs .egg {
float: left;
width: 16%;
}

.game .start-form .eggs .egg img {
width: 50px;
margin: 5%;
text-align: center;
border: 1px solid #000;
border-radius: 5px;
}

.game .start-form {
padding: 10px;
border: 1px solid #eee;
}

.game .start-form .labelfor {
text-align: center;
border-bottom: 1px solid #eee;
padding: 5px;
padding-bottom: 10px;
margin-top: -5px!important;
font-weight: 600;
font-family: ROBOT;
}
.game .game-form {
padding: 10px;
border: 1px solid #eee;
}

.game .game-form .game-method {
margin: -10px;
margin-bottom: 10px;
padding: 10px;
font-weight: 600;
border-bottom: 1px solid #eee;
font-family: ROBOTO;
}

.game .game-my-scores {
margin: -10px!important;
margin-top: 15px!important;
padding: 10px;
border-top: 1px solid #000;
font-family: ROBOTO;
color: green;
text-align: -webkit-center;
}

.newblogin {
margin-top: -70px;
}

.newblogin .wlcontainer {
background: #333;
padding-top: 20px;
padding-bottom: 20px;
}

.newblogin .wlcontainer .sitename .down {
color: #fff;
font-size: 300%;
font-family: cursive, fantasy;
}

.newblogin .wlcontainer .sitename {
text-align: center;
padding: 10px;
margin: 35px;
box-shadow: inset 0px 0px 10px 0px #000;
border-radius: 100%;
width: 120px;
height: 120px;
}

.newblogin .wlcontainer .sitename font.up {
color: #fff;
font-size: 140%;
font-family: cursive;
position: relative;
top: -20px;
}

.newblogin .wlcontainer .sitewelcome {
padding: 25px;
margin: 13px;
border-radius: 10px;
color: #fff;
box-shadow: inset 0px 0px 10px 0px #000;
margin-bottom: 30px;
}

.newblogin .wlcontainer .sitewelcome font.welcomemsg {
display: block;
text-align: center;
FONT-WEIGHT: 600;
margin-bottom: 16px;
font-family: Roboto;
font-size: 20px;
}

.newblogin .wlcontainer .actions {
border-radius: 10px;
margin: 10px;
font-family: sans-serif;
}

.newblogin .wlcontainer .actions button.newaccountbtn {
width: 50%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px 15px;
background: royalblue;
border-color: royalblue;
color: #fff;
font-weight: 600;
font-family: ROBOTO;
height: 50px;
}

.newblogin .wlcontainer .actions button.loginbtn {
width: 50%;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding: 10px 15px;
background: crimson;
border-color: crimson;
color: #fff;
font-weight: 600;
font-family: ROBOTO;
height: 50px;
}

.newblogin .wlcontainer .loginusers {
margin: 10px;
margin-top: 30px;
box-shadow: inset 0px 0px 10px 0px #000;
border-radius: 10px;
padding: 20px;
overflow: hidden;
}
.newblogin .wlcontainer .loginusers .userimage .img {
width: 60px;
height: 100px;
border-radius: 10px;
box-shadow: 0px 0px 5px 0px;
/* margin: 5px; */
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000);
background-size: 1000%;
animation: steam 10s linear infinite;
padding: 1px;
}
.newblogin .wlcontainer .aboutdiver .aboutdiv {
color: #fff;
font-weight: 600;
padding: 10px;
border-bottom: 2px solid #eee;
}

.newblogin .wlcontainer  .aboutdiver {
text-align: center;
margin-bottom: 30px;
}

.newblogin .wlcontainer .loginusers .userimage img {
width: 58px;
height: 98px;
border-radius: 10px;
}

.newblogin .wlcontainer .loginusers .userimage {
float: left;
width: 75px;
}

.newblogin .wlcontainer .topersusers {
box-shadow: inset 0px 0px 10px 0px #000;
padding-top: 20px;
border-radius: 10px;
margin: 10px;
}

.newblogin .wlcontainer .topersusers .user .uimg img {
width: 50px;
height: 50px;
border-radius: 50px;
}

.newblogin .wlcontainer .topersusers .user .uimg {
float: left;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000);
background-size: 1000%;
animation: steam 10s linear infinite;
padding: 1px;
border-radius: 50px;
}

.newblogin .wlcontainer .topersusers .user {
overflow: hidden;
margin: 10px;
padding: 10px;
border-bottom: 1px solid #eee;
}

.newblogin .wlcontainer .topersusers .user .uname font.tuname {
color: #fff;
display: block;
font-weight: 600;
font-size: 15px;
font-family: ROOTO;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
width: 45%;
}

.newblogin .wlcontainer .topersusers .user .uname {
margin-left: 60px;
margin-top: 10px;
}

.newblogin .wlcontainer .topersusers .user .uname font.scores {
color: #fff;
font-family: ROGOTO;
float: right;
margin-top: -35px;
padding: 15px;
box-shadow: inset 0px 0px 10px 0px #000;
border-radius: 50px;
}

.newblogin .wlcontainer .sitewelcome .freebtns {
border: 1px solid #6a1ec3;
padding: 10px 10px;
border-radius: 10px;
margin: -10px;
margin-top: 30px;
overflow: hidden;
}

.newblogin .wlcontainer .sitewelcome .freebtns button.addfree {
border-radius: 15px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
padding: 5px 15px;
background: #6a1ec3;
border-color: #6a1ec3;
font-family: ROBOTO;
margin-top: 20px;
color:#fff;
}

.newblogin .wlcontainer .sitewelcome .freebtns button.alrfree {
background: #6a1ec3;
border-color: #6a1ec3;
padding: 5px 15px;
border-radius: 15px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
margin-left: 9%;
float: right;
font-family: ROBOTO;
margin-top: 20px;
color:#fff;
}

.newblogin .wlcontainer .sitewelcome .freebtns img {
padding: 5px 10px;
display: block;
}

.newblogin .wlcontainer .sitewelcome font {
display: block;
}

.newblogin .wlcontainer .topersusers .user:last-child {
border:0px
}
.newblogin .wlcontainer .user-form {
padding: 20px;
margin: 10px;
box-shadow: inset 0px 0px 10px 0px #000;
border-radius: 10px;
}

.newblogin .wlcontainer .user-form .form-name {
text-align: center;
padding-bottom: 30px;
}

.newblogin .wlcontainer .user-form .form-name font.formname {

color: #fff;
font-weight: 600;
padding: 10px;
border-bottom: 2px solid #eee;
}

.newblogin .wlcontainer .user-form .form-group label {
color: #fff;
margin-left: -40px;
}

.newblogin .wlcontainer .user-form .form-group label:after {
content: ":";
}

.newblogin .wlcontainer .user-form .form-group .label-icon {
float: left;
background-color: #eee;
width: 42px;
height: 42px;
color: #949494;
line-height: 42px;
text-align: center;
margin-top: 25px;
border-radius: 10px 0px 0px 10px;
}

.newblogin .wlcontainer .user-form .form-group input[type=text],.newblogin .wlcontainer .user-form .form-group input[type=password], .newblogin .wlcontainer .user-form .form-group input[type=email], .newblogin .wlcontainer .user-form .form-group select {
width: 100%;
margin: 0;
height: 42px;
line-height: 42px;
padding: 0 18px!important;
color: #000;
font-size: 13px;
box-shadow: none!important;
border-radius: initial;
background: 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: calc(100% - 42px);
border: 1px solid #eee;
border-left: 0px;
background: #eee;
border-radius: 0px 11px 10px 0px;
}

.newblogin .wlcontainer .user-form .form-group  .btn-login {
width: 40%;
margin-top: 20px;
}

.newblogin .wlcontainer .user-form .form-group .label-icon i {
color: #000;
}
.newblogin .wlcontainer .user-form .form-group  a.forgetp {
color: white;
text-shadow: 0 0 5px red;
text-decoration: underline;
}

@keyframes steam {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
} 

.newblogin .wlcontainer .sversion {
position: absolute;
top: 1px;
left: 1px;
padding: 5px;
border: 1px solid #fff;
color: #fff;
border-radius: 1px;
}
.shoutpostsend {
padding: 11px;
background: linear-gradient(90deg, #cfe3f3, #cfe3f3);
border-radius: 10px;
border: 2px solid #0092ff;
}

.shoutpostsend .divshoutname {
text-align: left;
margin-top: -5px;
margin-left: -13px;
text-align: -webkit-center;
}

.shoutpostsend .divshoutname i {
font-size: 12px;
}

.shoutpostsend .divshoutname div {
color: #0092ff;
font-weight: 600;
border: 2px solid #0092ff;
border-top: 0px;
padding: 5px;
background: #cfe3f3;
width: 40%;
margin-top: -13px;
border-radius: 0px 0px 10px 10px;
}

.shoutpostsend .picandtype {
margin-top: 25px;
overflow: hidden;
}

.shoutpostsend .picandtype .myshoutpic img {
width: 100%;
height: 50px;
border-radius: 8px 0px 0px 8px;
}

.shoutpostsend .sendbtn i {
font-size: 25px;
}

.shoutpostsend .sendbtn {
float: right;
width: 15%;
position: relative;
}

.shoutpostsend .sendbtn button {
height: 56px;
padding: 12px 12px;
background: #0092ff;
color: #fff;
border: #0092ff;
border-radius: 0px 10px 10px 0px;
width: 100%;
}

.shoutpostsend .picandtype .myshoutpic {
float: left;
width: 14%;
height: 56px;
border: 3px solid #0092ff!important;
border-radius: 10px 0px 0px 10px;
position: relative;
margin-left: 1%;
}

.shoutpostsend .picandtype .typeshout {
border-bottom: 3px solid #0092ff!important;
border-top: 3px solid #0092ff!important;
border-left: 3px solid #0092ff!important;
width: 85%;
border-radius: 5px 0px 0px 5px;
}

.shoutpostsend .picandtype .typeshout textarea.shouttextarea {
width: 100%;
height: 50px;
background-color: #f9f9f900;
border: 1px solid #ccd0d500;
padding: 4px 0px 0px 10px;
outline: none;
display: block;
resize: vertical;
border-radius: 0px;
box-shadow: none;
-webkit-box-shadow: none;
color: #0092ff!important;
}

.shoutpostsend .picandtype .typeshout textarea.shouttextarea::-webkit-input-placeholder {
color: #0092ff!important;
font-weight: 600;
padding-top: 5px;
padding-bottom:15px;
}

.shoutpostsend .picandtype .typeshout textarea.shouttextarea:focus {
outline: none !important;
border: 1px solid #0092ff;
}

.shoutpostsend .moreshoutoptions {
padding: 0px;
white-space: nowrap;
display: flex !important;
flex-direction: row !important;
overflow: auto;
}

.shoutpostsend .moreshoutoptions .shoutoption {
padding: 12px 15px;
background: #fff;
margin: 10px;
border-radius: 50px;
color: #0092ff;
font-weight: 600;
}
.shoutpostsend .moreshoutoptions .shoutoption svg {
width: 20px;
height: 20px;
}
.success {
padding: 10px;
background: linear-gradient(90deg, #229754 80%, #94d1ae);
overflow: hidden;
color: #fff;
font-weight: 600;
border-radius: 5px;
margin: 5px;
margin-bottom: 20px;
margin-top: 20px;
}

.success .icon , .error .icon {
float: left;
margin-right: 15px;
margin-top: 1px;
}

.success .icon i , .error .icon i {
font-size: 40px;
text-shadow: 0 0 5px black;
}

.success .msg , .error .msg {
padding: 10px;
font-size: 15px;
margin-top: -15px;
}

.topmsg {
font-weight: 600;
font-family: ROBOTO;
font-size: 20px;
margin-top: 5px;
}

.error {
padding: 10px;
background: linear-gradient(90deg, #ec5756 80%, #ebadac);
overflow: hidden;
color: #fff;
font-weight: 600;
border-radius: 5px;
margin: 5px;
margin-bottom: 20px;
margin-top: 20px;
}
.shoutpostsend 
.filters-opt {
}

.shoutpostsend 
.filters-opt .emojis-list .emoji {
padding: 15px 10px;
width: 40%;
float: left;
border: 1px solid #3F51B5;
height: 70px;
text-align: center;
box-shadow: 0px 0px 10px 0px #3F51B5;
border-radius: 10px;
margin: 5%;
background: #fff;
text-align: -webkit-center;
}

.shoutpostsend 
.filters-opt .emojis-list {
overflow: hidden;
display:none;
padding: 10px;
border: 2px solid #3F51B5;
border-radius: 10px;
}

.emoji img {
max-width: 50px;
max-height: 50px;
}

.shoutpostsend 
.filters-opt .filterabout {
text-align: center;
padding: 10px;
border-bottom: 2px solid #3F51B5;
color: #3F51B5;
font-weight: 600;
font-size: 15px;
font-family: ROBOTO;
}

.shoutpostsend 
.filters-opt .emojisearch {
padding: 10px;
}

.shoutpostsend 
.filters-opt .emojisearch input[type=text] {
width: 100%;
padding: 10px;
border: 2px solid #3F51B5;
border-radius: 5px;
}
.shoutpostsend .feelings-list .feeling {
padding: 10px;
background: #fff;
width: 40%;
margin: 5%;
border-radius: 5px;
float: left;
border: 2px solid #3F51B5;    
box-shadow: 0px 0px 10px 0px #3f5185;
text-align: -webkit-center;
}

.shoutpostsend .feelings-list .feeling .feelingpic img {
width: 100px;
height: 100px;
border-radius: 50px;
}

.shoutpostsend .feelings-list .feeling .feelingtext {
text-align: center;
font-weight: 600;
font-family: ROBOTO;
margin-top: 10px;
}

.shoutpostsend .feelings-list .feeling .feelingpic {
text-align: center;
}
.shoutpostsend .filters-opt .selectphoto .select-pic input {
width: 100%;
padding: 10px;
border: 2px solid #3F51B5;
border-radius: 5px;
margin-top: 15px;
box-shadow: inset 0px 0px 10px 0px #3F51B5;
}

.shoutpostsend .filters-opt .selectphoto {
display:none;
padding: 10px;
border: 2px solid #3F51B5;
border-radius: 10px;
overflow: hidden;
}

.shoutpostsend .filters-opt .feelings-list {
display:none;
padding: 10px;
border: 2px solid #3F51B5;
border-radius: 10px;
overflow: hidden;
}
.shoutpost {
padding: 10px;
background: #fff;
overflow: hidden;
border-radius: 5px;
border: 1px solid #c1b8b8;
margin-top: 10px;
animation: showHide 0.3s ease-in-out;
}

.shoutposts {
margin-top: 15px;
}

.shoutpost  .userpic img {
width: 45px;
height: 45px;
border-radius: 50px;
border: 1px solid #eeee;
}

.shoutpost .userpic {
float: left;
margin-right: 5px;
margin-left: 5px;
}

.shoutpost  .userrank {
margin-top: 3px;
margin-left: 10px;
display: none;
float: left;
}

.shoutpost  .username {
float: left;
margin-top: 2px;
font-size: 16px;
font-weight: 900;
color: #337ab7;
width: 83%;
}

.shoutpost li.userrank::marker {
color: #000!important;
}

.shoutpost li.userrank font.useringlvl {
padding: 3px 10px;
background: gray;
color: #fff;
border-radius: 50px;
font-size: 10px;
font-family: ROBOTO;
}

.shoutpost .posttime i {color:#636262;float: left;margin-right: 3px;font-size: 12px;}

.shoutpost .posttime .timing {
font-size: 11px;
color: #636262;
font-style: italic;
}

.shoutpost .postreacts {
display: flex;
align-items: center;
border-top: 1px solid #eee;
padding: 5px 10px;
font-family: Arial, sans-serif;
position: relative;
background-color: #fff;
min-height: 30px;
max-width: none;
margin-bottom: 0;
font-weight: unset;
}

.shoutpost .postreacts img {
width: 20px;
height: 20px;
margin-left: -15px;
border-left: 2px solid #fff;
padding: 0px;
border-radius: 100%;
}

.shoutpost .postfooter {
margin: 0px -5px -5px -5px;
white-space: nowrap;
display: flex !important;
flex-direction: row !important;    
justify-content: center;
}

.shoutpost .postfooter .linker {
width: 33%;
text-align: center;
border-top: 1px solid #eee;
padding: 10px;
padding-top: 15px;
border-right: 1px solid #eee;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
cursor: pointer;
position: relative;
}

.shoutpost .postfooter .linker:last-child {
border-right: 0px;
}

.shoutpost .postfooter .linker .linkicon {
margin-right: 5px;
margin-top: 5px;
}

.shoutpost .postfooter .linker .linkname {
font-size: 16px;
margin-top: 5px;
}

.shoutpost .postmenu {
float: right;
margin-top: -23px;
padding: 3px 8px;
border-radius: 50px;
}

.shoutpost .postmenu i {
font-size: 20px;
color: #000;
}

.shoutpost .post-content {
padding: 10px 10px 10px 0px;
margin: 5px 0px 0px 5px;
}

.shoutpost .reactpic {
position: relative;
flex-shrink: 0;
}

.shoutpost .count {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 5px;
max-width: 25%;
color: #636262;
font-size: 12px;
font-weight: 600;
margin-top: 3px;
}

.shoutpost .postmenu:hover {
background: #eee;
}

.shoutpost .post-content .text {
color: #000;
font-size: 14px;
font-family: 'mulish';
}

.shoutpost .post-content .imag img {
width: 345px;
margin-top: 10px;
margin-left: -10px;
margin-right: -10px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px #3333;
}

.shoutpost .post-content .imag {
text-align: left;
}

.shoutpost .reactpic:first-child {
margin-left: 5px;
}

.shoutpost .postfooter .linker .linkicon i {
font-size: 16px;
}
.shoutpost .reacts {
display: flex;
gap: 5px;
}

.shoutpost .reacts .react {
margin-right: 5px;
padding: 5px;
z-index: 1;
}
.popupalert {
position: fixed;
bottom: 20px;
width: 100%;
text-align: -webkit-center;
z-index: 10;
display:none;
}

.popupalert .msg {
padding: 10px 20px;
border-radius: 5px;
font-weight: 600;
-webkit-animation: progress-bar-stripes 1s linear infinite;
animation: progress-bar-stripes 1s linear infinite;
overflow: auto;
white-space: nowrap;
display: flex !important;
flex-direction: row !important;
max-width: 90%;
justify-content: center;
}

.popupalert .msg.asuccess {
background: #0081ff;
color: #ffffff;
border: 2px solid #000;
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 2rem 2rem;
}

.popupalert .msg.aerror {
background: red;
color: #fff;
border: 2px solid #000;
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 2rem 2rem;
}

.shoutpost .reacts .react img {
width: 32px;
height: 32px;
transition: transform 0.3s ease;
background:#fff;
border-radius:50%;
}

.shoutpost .reacts .react img:hover {
transform: scale(1.2);
}

.shoutpost .forfree:checked + .postmenu + .menuopen {
display: block;
} 

.menuopen {
position: absolute;
background: #fff;
right: calc(50% - 145px);
box-shadow: 0px 0px 5px 0px #6f6f6f;
border-radius: 5px 0px 5px 5px;
width: 170px;
margin-top: 10px;
z-index: 2;
display: none;
}

.menuopen .opticon {
float: left !important;
width: 20px;
}

.menuopen .optn {
padding: 10px;
border-top: 1px dotted;
}

.menuopen .optns .optn .opttxt {
font-weight: 600;
font-size: 12px;
}
.menuopen .opticon i {
font-size: 13px;
}
.menuopen .optns .optn.bluecolor {
color: blue;
}

.menuopen .optns .optn.redcolor {
color: red;
}

.menuopen .optns .optn.blackcolor {
color: #000;
}

.menuopen .optns .optn.bluevioletcolor {
color: blueviolet;
}

.menuopen .optn:first-child {
border-top: 0px !important;
}

.menuopen .optn:hover {
background: #eee;
}

.shoutpost .post-quoted {
padding: 10px;
border-radius: 0px;
margin: 0px;
margin-top: 1px;
margin-bottom: 10px;
border: 1px solid #afafaf;
border-bottom: 1px solid #afafaf;
position: relative;
border-radius: 5px;
box-shadow: inset 0px 0px 5px 0px;
}
.shoutpost .post-content .text img {
max-width: 100%;
}

.shoutpost .post-quoted .qpostmsg img {
max-width: 70px;
max-height: 20px;
}

.shoutpost .post-quoted .qpostc {
padding: 0px 0px 5px 0px;
font-weight: 600;
float: right;
margin-left: 10px;
}

.shoutpost .post-quoted .repltingto {
border-bottom: 2px solid #eee;
text-align: center;
padding-bottom: 7px;
margin-bottom: 10px;
margin-left: -10px;
margin-right: -10px;
font-weight: 600;
font-family: ROBOTO;
font-size: 15px;
color: #333;
}

.shoutpost .post-quoted .qpostmsg {
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
}

.shoutpost .post-quoted .qposttime {
position: absolute;
right: 0px;
top: 15px;
border: 1px solid #8d8d8d;
padding: 2px 5px;
border-radius: 5px 0px 0px 0px;
font-family: ROBOTO;
border-bottom: 0px;
border-right: 0px;
background: #fff;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 35%;
margin-right: 5px;
}
.shoutpostsend .filters-opt .exoptprag {
width: 100%;
padding: 10px;
text-align: -webkit-center;
overflow: hidden;
border-top: 1px solid #000;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}

.shoutpostsend .filters-opt .prevexprev {
background: #fff;
padding: 7px 15px;
border-radius: 5px 0px 0px 5px;
font-weight: 600;
width: 35%;
border-right: 1px solid #eee;
margin-top: 15px;
}

.shoutpostsend .filters-opt .nextexshout {
width: 35%;
background: #fff;
padding: 7px 15px;
border-radius: 0px 5px 5px 0px;
font-weight: 600;
margin-top: 15px;
}

.shoutpostsend .filters-opt .exoptprag div:hover {
background: #eee;
}
.shoutpost .post-content .feeling {
padding: 10px;
border: 2px solid #333333;
border-radius: 5px;
box-shadow: inset 0px 0px 5px 0px;
text-align: -webkit-center;
}

.shoutpost .post-content .feeling .feeling-img img {
max-width: 100%;
width: 150px;
border-radius:100%;
}

.shoutpost .post-content .feeling font.feeling-name {
padding: 10px;
background: #fff;
padding: 5px 30px 11px 30px;
border: 2px solid #333;
border-bottom: 0px;
border-radius: 10px 10px 0px 0px;
box-shadow: inset 0px 0px 5px 0px;
font-family: cursive;
}

.shoutpost .post-content .feeling .feeling-from {
padding: 10px;
border-bottom: 2px solid #333333;
margin: -10px -10px;
font-weight: 600;
border-radius: 0px 0px 50px 50px;
}
.shoutpost .post-content .feeling .feeling-img {
margin: 15px;
}
.pageprag {
padding: 10px;
text-align: center;
background: #fff;
margin-top: 10px;
border: 1px solid rgb(96,9,240);
border-radius: 5px;
padding-top: 20px;
}

.pageprag .totalpages {
background: rgb(96,9,240);
padding: 5px 10px;
border-radius: 5px;
color: #fff;
box-shadow: inset 0px 0px 5px 0px #000;
}

.pageprag ul.ulprag {padding: 20px 10px;padding-bottom: 0px;position: relative;left: -5px;border-top: 1px dotted rgb(96,9,240);margin-top: 15px;}

.pageprag .ulprag li {
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}

.pageprag  li.prevprag {
background: rgb(96,9,240);
background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
border: none;
}
.pageprag  li.prevprag:hover {
box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .5), 
inset -4px -4px 6px 0 rgba(255,255,255,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
.pageprag  li.prevprag :before {
height: 0%;
width: 2px;
}
.pageprag .ulprag  li.nextprag {
background: rgb(96,9,240);
background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
border: none;
}
.pageprag .ulprag  li.nextprag:hover {
box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .5), 
inset -4px -4px 6px 0 rgba(255,255,255,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
.pageprag .ulprag  li.nextprag:before {
height: 0%;
width: 2px;
}

.pageprag .ulprag li a {
color: #fff;
}
.shoutpost .addedreacts{
display: none;
position: absolute;
top: -50px;
left: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 5px;
z-index: 1000;
box-shadow: 0px 0px 5px 0px;
}
.shoutpost .forfree:checked + .postmenu + .menuopen {
display: block;
}
.shoutpost .postfooter .forreactfree:checked + .linker .addedreacts {
display: block;
}


.user_onlines {
background: #fff;
padding: 20px 10px;
border-radius: 10px;
overflow: hidden;
text-align: -webkit-center;
}

.user_onlines .aboutdivon {
text-align: center;
padding: 10px;
margin-bottom: 25px;
}

.user_onlines .aboutdivon  font.aboutdivonfont {
font-size: 20px;
font-weight: 700;
padding: 5px;
border-bottom: 1px solid;
color: #000;
}

.user_onlines .user_online {
background: #fff;
float: left;
width: 45%;
margin-left: 2.5%;
margin-right: 2.5%;
text-align: center;
padding: 10px;
border-radius: 10px;
margin-top: 60px;
box-shadow: 0px 0px 10px 0px #ddd;
}

.user_onlines .user_online .user_online_dp img {
border-radius: 10px;
margin-top: -55px;
margin-bottom: 10px;
box-shadow: 0px 0px 4px 0px #45d831, 0px -1px 0px 5px #ddd;
}

.user_onlines .user_online .user_online_name {
font-weight: 600;
font-size: 16px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
}

.user_onlines .user_online .user_online_role {
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
color: #a6a6a6;
font-family: ROBOTO;
padding-bottom: 5px;
padding-top: 5px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin: 5px 0px;
}

.user_onlines .user_online .user_online_status {
position: relative;
margin-top: 10px;
height: 0px;
}

.user_onlines .user_online .user_online_status img {
width: 20px;
height: 20px;
border-radius: 50px;
background: #fff;
animation: activestatusani 5s infinite;
margin-top: -30px;
}

.user_onlines .user_online .user_online_time {
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
color: #a6a6a6;
font-family: ROBOTO;
}
@keyframes activestatusani {
0%,100% {opacity: 0;}
50% {opacity: 1;}
}

.user_onlines .user_online.off .user_online_dp img {
box-shadow: 0px 0px 4px 0px red, 0px -1px 0px 5px #fff;
}
.user_menu {
padding: 10px;
background: #fff;
border-radius: 10px;
}

.myintro {
overflow: hidden;
margin-top: 10px;
border: 1px solid #eee;
border-radius: 10px 10px 0px 0px;
}

.user_dp_menu img {
width: 80px;
height: 80px;
border-radius: 50px;
margin-bottom: 10px;
margin-left: -5px;
margin-top: -1px;
}

.myintro span.usering_name_menu {
display: block;
color: #949494;
font-size: 16px;
font-family: ROBOO;
padding-bottom: 10px;
text-align: -webkit-center;
margin-top: 5px;
}

.myintro .user_dp_menu {
text-align: -webkit-center;
margin-top: 15px;
}

.myintro .user_name_menu {
font-weight: 900;
font-size: 17px;
margin-top: 3px;
margin-bottom: -3px;
text-align: -webkit-center;
}

.user_menu_progress {
padding: 15px 10px;
background: #f4f5f7;
margin-top: -45px;
border-radius: 0px 0px 10px 10px;
margin-bottom: 10px;
position: relative;
}

.user_menu_progress .out_progress_menu {
height: 15px;
background: #d0d1d3;
border-radius: 50px;
margin-bottom: 5px;
}
.user_controls .show_controlss .show_controls:hover {
background: #eeee;
border-radius: 10px;
}
.user_menu_progress .in_progress_menu {
width: 75%;
background: #4773f8;
height: 15px;
border-radius: 50px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 12px;
max-width: 100%;
}

.user_menu_progress .progress_labels .progress_left_label {
float: left;
}

.user_menu_progress .progress_labels .progress_left_label_right {
float: right;
}

.user_menu_progress .progress_labels {
overflow: hidden;
font-family: ROBOTO;
color: #747474;
padding: 0px 5px;
}

.user_menu .menu_options {
margin-top: 10px;
background: #f4f5f7;
border-radius: 10px;
}

.user_menu .menu_options .menu_option {
display: flex;
flex-direction: row;
width: 100%;
padding: 10px;
}

.user_menu .menu_options .option_icon i {
font-size: 20px;
}

.user_menu .menu_options .option_label {
margin-top: 4px;
font-weight: 1000;
font-family: math;
font-size: 14px;
}

.user_menu .menu_options .option_icon {
margin-right: 10px;
color: #000;
}

.user_menu .menu_options .menu_option:hover {
background: #eee;
}

.user_menu .menu_options .menu_option:first-child {
border-radius: 10px 10px 0px 0px;
}

.user_menu .menu_options .menu_option:last-child {
border-radius: 0px 0px 10px 10px;
}
.user_profile .user_back_profile {
background: #8d8d8d;
height: 185px;
padding: 10px 10px;
border-radius: 10px 10px 0px 0px;
overflow: hidden;
color: #FFF;
font-size: 30px;
}

.user_profile .user_first_info {
background: #fff;
padding: 10px;
border-radius: 10px;
text-align: -webkit-center;
position: relative;
margin: -115px 10px 0px 10px;
}

.user_profile .user_back_profile .user_back {
float: left;
margin-top:5px;
}


.user_profile  .user_menu_info {
float: right;
margin-top: -65px;
text-align: -webkit-left;
}

.user_profile .user_first_info .user_dp img {
width: 80px;
height: 80px;
border-radius: 5px;
box-shadow: 0px 0px 0px 5px #fff, 0px 0px 12px 0px #000;
}

.user_profile .user_first_info .user_dp {
margin-top: -50px;
margin-bottom: 15px;
width: 100px;
}

.user_profile .user_first_info .user_name {
font-weight: 900;
font-size: 20px;
margin-top: 5px;
}

.user_profile .user_first_info .user_title {
color: #aaa;
font-family: ROBOTO;
}

.user_profile .like_follow_info {
background: #946bee;
color: #fff;
padding: 10px;
overflow: hidden;
border-radius: 0px 0px 15px 15px;
margin-top: -220px;
padding-top: 210px;
width: 100%;
}

.user_profile .like_follow_info .user_followers {
float: left;
padding: 9px;
border-right: 1px solid #fff;
text-align: -webkit-center;
width: 33%;
margin-top: 15px;
}

.user_profile .like_follow_info .user_followers:last-child {
border: 0px;
}

.user_profile .like_follow_info font.count_about {
font-family: ROBOTO;
display: block;
}

.user_profile .like_follow_info font.count {
font-weight: 1000;
font-family: math;
}

.user_profile .user_first_info .action_btns button.follow-btn {
background: #4e79ff;
color: #fff;
border-color: #4e79ff;
}

.user_profile .user_first_info .action_btns button.msg-btn {
background: #fb5aca;
color: #fff;
border-color: #fb5aca;
}

.user_profile .user_first_info .action_btns button.block-btn {
background: red;
color: #fff;
border-color: red;
}

.user_profile .user_first_info .action_btns button {
padding: 5px 15px;
border-radius: 5px;
font-weight: 600;
text-align: -webkit-center;
margin-top: 10px;
margin-right: 10px;
animation: showHide 0.3s ease-in-out;
}

.user_profile .user_first_info .action_btns button .btn-icon {
float: left;
margin-right: 5px;
}

.user_profile .user_first_info .action_btns button .btn-name {display: contents;}

.user_profile .user_first_info .action_btns {
text-align: -webkit-center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #eee;
}
.user_profile .user_followers_info {
padding: 10px;
background: #fff;
margin-top: 20px;
border: 2px solid #e91e63;
border-radius: 5px;
}

.user_profile .user_followers_info .user_followerrs .user_follower_dp img {
width: 50px;
height: 50px;
border-radius: 5px;
border: 1px solid #eee;
}

.user_profile .user_followers_info .user_followerrs {
display: flex;
flex-direction: row;
overflow-x: scroll;
padding: 14px 0px;
}

.user_profile .user_followers_info .user_followerrs .user_follower {
margin-right: 10px;
text-align: center;
width: 20%;
}

.user_profile .user_followers_info .user_followerrs .user_follower_name {
color: #000;
margin-top: 5px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.user_profile .user_followers_info .user_fabout {
padding: 15px 0px;
text-align: center;
margin: -10px;
border-bottom: 2px solid #e91e63;
margin-bottom: 5px;
}

.user_profile .user_followers_info font.aboutdivonfont {
font-weight: 900;
border-bottom: 1px solid;
padding: 0px 5px;
}
.guestheader {
background: #ffffff;
color: #fff;
overflow: hidden;
position: fixed;
width: 100%;
top: 0px;
padding: 10px;
border-bottom: 2px solid #a7a7a7;
z-index: 9999999;
display:none;
}

.guestheader .headleftmenu {
float: left;
display: block;
vertical-align: middle;
text-align: center;
width: 16.66666%;
}

.guestheader .headrightsearch {
float: left;
display: block;
vertical-align: middle;
text-align: center;
width: 16.66666%;
margin-top: 5px;
}


.guestheader .headleftmenu img {
width: 40px;
height: 40px;
border: 2px solid #eee;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px;
}

.guestheader .center-btns {
float: left;
display: block;
vertical-align: middle;
text-align: center;
width: 66.66666%;
margin-top: 2px;
}

.guestheader .center-btns .both-btns {background-color: #eee;padding: 2px;cursor: pointer;display: inline-block;border-radius: 5px;}

.guestheader .center-btns button.login-centerbtn {
padding: 5px 20px;
background: #006fd6;
border: 0px;
border-radius: 5px;
font-weight: 700;
color: #fff;
}

.guestheader .center-btns .both-btns button.signup-centerbtn {
padding: 5px 10px;
background: #eee;
border: 0px;
border-radius: 5px;
font-weight: 700;
color: #000;
}

.guestheader .headrightsearch i {
font-size: 20px;
color: #000;
}

.guestheader .center-btns button.login-centerbtn:hover {
background: #0076e5;
}

.guestheader .center-btns .both-btns button.signup-centerbtn:hover {
background: #e5e5e5;
}

.newwelcomemsg {
background: #fff;
text-align: -webkit-center;
margin-top: 60px;
padding: 20px 0px;
border-radius: 10px;
border-left: 2px solid #dc143c;
border-right: 2px solid #4169e1;
border-top: 2px solid #dc143c;
border-bottom: 2px solid #4169e1;
}

.newwelcomemsg .welcomem {
color: #000;
font-weight: 900;
font-size: 20px;
}
.newwelcomemsg .welcomeimg {
margin: 10px;
}

.newwelcomemsg .welcomeimg img{
width:100%;
border-radius:10px;
}

.newwelcomemsg .welcomeb {
font-size: 20px;
color: #000;
font-weight: 700;
margin: 0px 10px;
}

.newwelcomemsg .welcomebtns {
margin-top: 10px;
overflow: hidden;
padding: 0px 9px;
border-top: 1px solid #eee;
padding-top: 15px;
}

.newwelcomemsg button.welcomebtn-login {
padding: 10px 15px;
background: crimson;
border-color: crimson;
color: #fff!important;
font-weight: 900;
height: 45px;
float: left;
border-radius: 50px;
width: 160px;
}

.newwelcomemsg button.welcomebtn-signup {
padding: 10px 15px;
background: royalblue;
border-color: royalblue;
color: #fff!important;
font-weight: 900;
height: 45px;
border-radius: 50px;
width: 160px;
float: right;
}

.newwelcomemsg .welcomes {
font-family: ROBOTO;
color: #aaa;
font-size: 18px;
font-variant-caps: all-petite-caps;
}

.user_profile .user_followers_info .user_followerrs .user_follower .seeallfollowers,  .user_profile .user_gifts_info .user_followerrs .user_follower .seeallfollowers{
padding: 25px 25px;
background: #aaa;
border-radius: 5px;
color: #fff;
font-weight: 1000;
font-size: 12px;
text-decoration: underline;
width: 67px
}

.user_profile .user_followers_info .user_followerrs::-webkit-scrollbar {
height: 2px;
width:5px
}
.user_profile .user_followers_info .user_followerrs::-webkit-scrollbar-thumb {
background-color: #ff0057;
}

.user_profile .user_followers_info .user_followerrs .user_follower font.fontseeallfollowers, .user_profile .user_gifts_info .user_followerrs .user_follower font.fontseeallfollowers  {
position: relative;
margin-left: -26px;
right: -11px;
}
.user_profile 
.user_information {
background: #fff;
margin-top: 20px;
background-size: 100% 100%;
border: 2px outset #673ab7;
border-radius: 5px;
}

.user_profile 
.user_information .user_iabout {
padding: 20px 10px;
text-align: center;
background: #ffffffab;
margin-bottom: -10px;
border-bottom: 2px outset #3f51b5;
}

.user_profile .user_information .user_iabout font.aboutdivonfont {
font-weight: 900;
border-bottom: 1px solid;
padding: 0px 5px;
}

.user_profile .user_information .user_infos {
overflow: hidden;
background: #ffffffab;
margin: 10px;
box-shadow: 0px 0px 10px 0px #b1a8a8;
border-radius: 5px;
margin-top: 25px;
}

.user_profile .user_information .user_infos .user_info {
overflow: hidden;
padding: 10px 15px;
border-bottom: 2px solid #9c27b0;
}

.user_profile .user_information .user_infos .user_info_about {
color: #000000;
font-size: 15px;
font-weight: 600;
}

.user_profile .user_information .user_infos .user_info .user_info_row {
font-weight: 800;
font-size: 15px;
color: #000;
margin-top: 10px;
}
.user_profile .user_information .user_infos .user_info:last-child{
border-bottom: 0px;
}
.user_profile  input#settingcheck:checked + .user_menu_info {
background: #ffffff75;
padding: 7px 7px;
border-radius: 100%;
position: relative;
display: inline-block;
cursor: pointer;
}

.user_profile input#settingcheck:checked + .user_menu_info .menuopen {
display: block;
}

.user_profile .user_back_profile .menuopen .optns .optn.orangecolor {
color: orangered;
}

.user_profile .user_back_profile .menuopen .optns .opticon {
margin-right: 3px;
}
.user_controls {
padding: 10px;
background: #fff;
}

.user_controls .user_controls_aboutdiv {
text-align: center;
padding: 10px;
}

.user_controls .user_controls_aboutdiv font.fontuser_controls_aboutdiv {
padding: 10px;
font-weight: 900;
font-size: 20px;
border-bottom: 2px solid;
font-variant-caps: small-caps;
}

.user_controls .show_controlss {
padding: 10px;
overflow: hidden;
}

.user_controls .show_controlss .show_controls {
float: left;
width: 45%;
text-align: center;
padding: 10px;
border-bottom: 1px solid #aaa;
margin: 2%;
}

.user_controls .show_controlss .show_controls i {
font-size: 23px;
padding: 11px 17px;
padding-top: 15px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px #eee;
}

.user_controls .show_controlss .show_controls .controls_name {
margin-top: 25px;
color: #000;
font-weight: 600;
text-shadow: 0 0 0px gray;
font-variant-caps: small-caps;
}

.user_controls .show_controlss .show_controls .controls_icon {
margin: 10px;
margin-top: 20px;
}
.users_list {
padding: 10px;
background: #fff;
border-radius:10px;
}

.users_list .aboutdivuser {
text-align: -webkit-center;
padding: 10px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.users_list .aboutdivuser font.fontaboutdivuser {
font-weight: 600;
font-size: 20px;
border-bottom: 2px solid;
padding: 10px;
font-variant-caps: petite-caps;
}

.users_list .users_listing .user_list {
float: left;
box-shadow: 0px 0px 10px 0px #aaa;
padding: 10px;
border-radius: 10px;
width: 100%;
margin-bottom: 20px;
}

.users_list .users_listing {
overflow: hidden;
margin: 0px -15px;
padding: 20px;
}

.users_list .users_listing .user_list_dp img {
width: 80px;
height: 80px;
border-radius: 10px;
border:1px solid #eee;
}

.users_list .users_listing .user_list_dp {
float: left;
margin-right: 10px;
}
.users_list .users_listing .user_list_id {
float: right;
margin-top: -38.5px;
background: black;
color: #fff;
padding: 4px 6px;
border-radius: 0px 10px 0px 10px;
font-family: math;
margin-right: -10px;
}
.users_list .users_listing 
.user_list_other_bottom_options {
width: 100%;
overflow: hidden;
margin-top: 30px;
}

.users_list .users_listing .user_list_other_bottom_options .user_list_options {
float: left;
margin-right: 20px;
}

.users_list .users_listing .user_list_other_bottom_options .user_list_options .user_list_followers {
float: left;
margin-right: 10px;
text-align: center;
border-right: 1px solid #eee;
padding-right: 10px;
}

.users_list .users_listing .user_list_other_bottom_options .user_list_button {
float: right;
}

.users_list .users_listing .user_list_other_bottom_options .user_list_options .user_list_likes {
float: left;
text-align: center;
}

.users_list .users_listing .user_list_other_bottom_options .user_list_options .user_list_flwans {font-weight: 600;font-family: math;}

.users_list .users_listing .user_list_other_bottom_options .user_list_options .user_list_about {
font-family: ROVOTO;
color: #7e7e7e;
}

.users_list .users_listing .user_list_other_bottom_options .user_list_button button.btn.btn-follow {
background: #4e79ff;
color: #fff;
border-color: #4e79ff;
border-radius: 5px;
font-weight: 600;
text-align: -webkit-center;
}

.users_list .users_listing .user_list_status {margin-top: 8px;font-variant: petite-caps;word-wrap: break-word;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

.users_list .users_listing .user_list_name {
font-weight: 600;
font-size: 20px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 60px;
}

.users_list .users_listing .user_list_uname {
margin-top: 2px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #646464;
font-size: 12px;
}

.users_list .users_listing .user_list_other_bottom_options .user_list_button button.btn.btn-msg {
background: #fb5aca;
color: #fff;
border-color: #fb5aca;
border-radius: 5px;
font-weight: 600;
text-align: -webkit-center;
}
.users_list .users_listing .user_list_other_bottom_options .user_list_button button.btn.btn-gift {
background: blueviolet;
color: #fff;
border-color: blueviolet;
border-radius: 5px;
font-weight: 600;
text-align: -webkit-center;
}
.user_toppers {
background: #fff;
padding: 10px;
border-radius: 5px;
}

.user_toppers .aboutdivtop {
text-align: -webkit-center;
padding: 10px;
}

.user_toppers .aboutdivtop font.fontaboutdivtop {
padding: 10px;
border-bottom: 2px solid #000;
color: #000;
font-weight: 800;
font-size: 20px;
font-variant-caps: small-caps;
}

.user_toppers .users_three {
margin: 0px -10px;
padding: 10px;
margin-top: 110px;
display: flex;
justify-content: center;
align-items: flex-end;
}

.user_toppers .users_three .top_dp .top_dp_img {
width: 80px;
height: 80px;
border-radius: 100%;
background: #fff;
}

.user_toppers .users_three .users_top_two {
text-align: -webkit-center;
width: 30%;
margin-right: 2%;
border: 1px solid #aaa;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px #b3b3b3;
}

.user_toppers .users_three .users_top_one {
padding: 10px;
border: 1px solid #aaa;
text-align: -webkit-center;
width: 35%;
margin-right: 2%;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px #b3b3b3;
}

.user_toppers .users_three .users_top_three {
width: 30%;
padding: 10px;
border: 1px solid #aaa;
text-align: -webkit-center;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px #b3b3b3;
}

.user_toppers .users_three .users_top_one .top_dp .top_dp_img {
width: 105px;
height: 105px;
border: 2px solid orange;
padding: 3px;
}

.user_toppers .users_three .top_name {
margin-top: 5px;
font-weight: 900;
font-size: 17px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.user_toppers .users_three .top_dp {
margin-top: -70px!important;
}

.user_toppers .users_three .users_top_two .top_dp .top_dp_img {
border: 2px solid #0095ff;
padding: 3px;
}

.users_top_three .top_dp .top_dp_img {
border: 2px solid deeppink;
padding: 3px;
}

.user_toppers .users_three .top_uname {
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-top: 2px;
color: #aaa;
font-family: ROBOTO;
}

.user_toppers .users_three .top_points {
font-weight: 900;
font-family: math;
margin-top: 5px;
}

.user_toppers .users_three .users_top_two .top_points {
color: #0095ff;
}


.users_top_one .top_points {
color: orange;
}


.users_top_three .top_points {
color: deeppink;
}

.users_top_one .top_dp {
margin-left: -10px;
margin-right: -10px;
}

.user_toppers .users_three .users_top_two .topingbadge {
height: 0px;
position: relative;
top: -105px;
left: 0px;
}

.users_top_one .topingbadge {
height: 0px;
position: relative;
top: -130px;
left: 0px;
}

.users_top_three .topingbadge {
height: 0px;
position: relative;
top: -105px;
left: 0px;
}

.user_toppers .users_three .users_top_two .topingbadge .fonttopingbadge {
background: #0095ff;
border-radius: 100% 100% 0px 0px;
padding: 3px 10px;
color: #fff;
font-size: 20px;
font-weight: 1000;
}

.users_top_one .topingbadge .fonttopingbadge {
background: orange;
border-radius: 100% 100% 0px 0px;
padding: 3px 10px;
color: #fff;
font-size: 20px;
font-weight: 1000;
}

.users_top_three .topingbadge .fonttopingbadge {
background: deeppink;
border-radius: 100% 100% 0px 0px;
padding: 3px 10px;
color: #fff;
font-size: 20px;
font-weight: 1000;
}

.user_toppers .aboutdivsprag {
background: #0095ff;
border-radius: 10px;
overflow: hidden;
padding: 10px;
margin-top: 10px;
}

.user_toppers .aboutdivsprag .aboutdivlinks {
float: left;
color: #fff;
font-weight: 900;
text-align: -webkit-center;
}

.user_toppers .top_listing {
margin-top: -10px;
border: 2px solid #0095ff;
border-top: 0px;
padding-top: 20px;
border-radius: 0px 0px 10px 10px;
}

.user_toppers .top_listing .top_userar {
border-bottom: 2px solid #eee;
overflow: hidden;
padding: 2%;
margin-bottom: 10px;
}

.user_toppers .top_listing .rank_topuser {
float: left;
width: 15%;
text-align: -webkit-center;
margin-top: 12px;
color: #0095ff;
font-size: 20px;
font-weight: 1000;
font-family: math;
}

.user_toppers .top_listing .dp_topuser {
float: left;
}

.user_toppers .top_listing .name_topuser {
float: left;
font-weight: 900;
font-size: 15px;
margin-left: 10px;
margin-top: 12px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 39%;
}

.user_toppers .top_listing .points_topuser {
float: right;
width: 27%;
text-align: -webkit-center;
font-weight: 900;
font-size: 15px;
margin-top: 12px;
color: #8d8d8d;
font-family: math;
}

.user_toppers .top_listing .dp_topuser img {
width: 50px;
height: 50px;
border-radius: 100%;
}

.user_toppers .top_listing .top_userar:last-child {
border-bottom: 0px;
}

.user_toppers .linksprags .lnkprag {
width: 33%;
margin-right: 3%;
float: left;
text-align: -webkit-center;
font-weight: 900;
font-size: 15px;
padding: 5px 10px;
border-radius: 5px;
color: #333;
}

.user_toppers .linksprags {
margin-top: 15px;
overflow: hidden;
padding: 10px;
background: #eee;
border-radius: 5px;
}

.user_toppers .linksprags .lnkprag.active {
background: deeppink!important;
color: #fff;
}

.user_toppers .linksprags .lnkprag:last-child {
margin-right: 0px!important;
}

.user_toppers .linksprags .lnkprag:hover {
background: #fdfdfd;
}
.users_privacy_setting {
padding: 10px;
background: #fff;
border-radius: 10px;    
margin-top: 80px;
}

.users_privacy_setting .privacyaboutdiv {
padding: 10px;
text-align: -webkit-center;
}

.users_privacy_setting .privacyaboutdiv font.fontprivacyaboutdiv {
font-weight: 900;
font-size: 20px;
padding: 10px;
border-bottom: 2px solid;
font-variant: small-caps;
}

.users_privacy_setting .privacy_settings {
margin-top: 20px;
}

.users_privacy_setting .privacy_settings .form-group {
display: flex;
margin-bottom: 10px;
padding-top: 10px;
border-top: 1px solid #eee;
flex-direction: row;
flex-wrap: wrap;
}

.users_privacy_setting .privacy_settings .form-group .fullinput input {
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
height: 100%;
width: 50%;
outline: none;
float:right;
}

.users_privacy_setting .privacy_settings .form-group .about-input {
float: left;
font-size: 15px;
font-weight: 600;
color: #868686;
margin-right: 10px;
margin-top: 10px;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching {
position: relative;
width: 90px;
height: 30px;
overflow: hidden;
float: right;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .checkbox {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .knobs {
position: absolute;
height: 30px;
width: 90px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .layer {
width: 100%;
height: 30px;
background-color: #ebf7fc;
transition: 0.3s ease all;
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

/* Button 18 */
.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .knobs:before, .switching .knobs span {
content: "ON";
position: absolute;
top: 6px;
left: 5px;
width: 67px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
background-color: #03a9f4;
border-radius: 2px;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .knobs:before {
top: 52%;
left: 3px;
width: 45px;
height: 10px;
margin-top: -5px;
background-color: transparent;
z-index: 2;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .knobs span {
width: 45px;
height: 10px;
padding: 9px 4px;
transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
z-index: 1;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:active + .knobs:before {
left: 10px;
width: 46px;
height: 4px;
color: transparent;
margin-top: -2px;
background-color: #0095d8;
transition: 0.3s ease all;
overflow: hidden;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:active + .knobs span {
width: 58px;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:checked:active + .knobs:before {
left: auto;
right: 10px;
background-color: #d80000;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:checked:active + .knobs span {
margin-left: -38px;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:checked + .knobs:before {
content: "OFF";
left: 40px;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:checked + .knobs span {
left: 40px;
background-color: #f44336;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:checked ~ .layer {
background-color: #fcebeb;
}

.users_privacy_setting .privacy_settings .form-group .input_show .switch {
}

.users_privacy_setting .privacy_settings .form-group .input_show {
flex: 1 1 auto;
}

.users_privacy_setting .privacy_settings .form-group .input-alert {
color: #aaa;
margin-bottom: -12px;
}

.users_privacy_setting .privacy_settings .form-group .fullinput input:focus {
border: 1px solid #03a9f4!important;
border-radius: 5px;
}

.users_privacy_setting .privacy_settings .form-group:last-child {
border-bottom:0px!important;
}

.users_privacy_setting .privacy_settings .form-button button.btn.btn-save {
background: #03a9f4;
color: #fff;
font-weight: 600;
font-size: 15px;
padding: 6px 30px!important;
}

.users_privacy_setting .privacy_settings .form-button {
text-align: -webkit-center;
margin-top: 15px;
padding-top: 15px;
border-top: 2px solid #eeee;
}

.users_privacy_setting .privacy_settings .form-group:first-child {
border-top: 0px!important;
}

.users_privacy_setting .privacy_settings .form-group .input_show .checkboxinput {
text-align: right;
padding-top: 5px;
}

.users_privacy_setting .privacy_settings .form-group .input_show .checkboxinput input[type=radio] {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
}

.users_privacy_setting .privacy_settings .form-group .input_show .checkboxinput label {color: #333;}

.site-maintenance {
background: #fff;
border-radius: 15px;
border: 2px outset #a847b2;
max-width: 375px;
}

.site-maintenance .about-site {
display: flex;
justify-content: center;
flex-direction: row;
align-content: space-around;
padding: 10px;
border-bottom: 2px solid #eee;
}

.site-maintenance .about-site .site_logo img {
width: 40px;
}

.site-maintenance .about-site .site_name {
font-weight: 900;
font-size: 20px;
padding-top: 5px;
color: #a84299;
}

.site-maintenance .about-site .site_logo {
margin-right: 0px;
}

.site-maintenance .main-paging {
padding: 25px;
text-align: -webkit-center;
}

.site-maintenance .main-image img {
width: 100%;
height: 100%;
max-width: 400px;
max-height: 400px;
}

.site-maintenance .main-paging .main-text {
font-size: 25px;
font-weight: 700;
font-variant: small-caps;
}

.site-maintenance .main-paging .sec-text {
margin-top: 10px;
font-weight: 600;
font-variant: small-caps;
}

.site-maintenance .main-paging .last-text {
font-weight: 600;
font-variant: small-caps;
}

.site-maintenance .contacting-info {
padding: 10px;
text-align: -webkit-center;
border-top: 2px solid #eee;
margin-bottom: 5px;
}

.site-maintenance .contacting-info .contacting-infos_see .contacting-infos-about {
float: left;
font-weight: 700;
color: #000;
margin-right: 5px;
}

.site-maintenance .contacting-info .contacting-infos_see .contacting-infos-ans {
float: left;
}

.site-maintenance .contacting-info .contacting-infos_see {
overflow: hidden;
}

.site-maintenance .contacting-info .contacting-about {
font-weight: 600;
font-size: 15px;
}

.site-maintenance .contacting-info .contacting-infos {
margin-top: 10px;
}

.site-maintenance .main-image {
text-align: -webkit-center;
}
.popup-access-main {
width: 100%;
height: 100%;
position: fixed;
background: #000000b5;
top: 0px;
left: 0px;
display: flex;
justify-content: center;
align-items: center;
display:none;
}

.popup-access-main .popup-form {
top: 30%;
position: fixed;
background: #fff;
padding: 80px 30px;
border-radius: 5px;
}

.popup-access-main .close-tab {
color: #fff;
font-size: 30px;
position: fixed;
top: 15px;
right: 25px;
}

.popup-access-main .popup-form .popup-about {
font-weight: 800;
font-size: 15px;
border-bottom: 2px solid;
padding: 5px;
position: relative;
top: -65px;
}

.popup-access-main .popup-form .title-input {
text-align: left;
margin-bottom: 6px;
font-weight: 600;
}
.popup-access-main .popup-form button.btn.btn-primary {
margin-top: 30px;
width: 80px;
}

.popup-access-main .popup-form input.acps {
padding: 10px;
}
.site-maintenance input#maintencheck:checked + .popup-access-main {
display: flex;
animation: showHide 0.3s ease-in-out;
}
.user_messanger .user_message_navi {
display: flex;
width: 100%;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
font-weight: 800;
}

.user_messanger .user_message_navi_prev {
padding: 10px 10px;
background: #fff;
border-radius: 10px 0px 0px 10px;
border: 2px solid #5878f7;
border-right: 2px solid #eee;
}

.user_messanger .user_message_navi_new {
padding: 10px 10px;
background: #fff;
border-radius: 0px 10px 10px 0px;
border: 2px solid #5878f7;
border-left: 0px;
}
.user_messangers .messanger_sendarea .image-input {
background: #e3e8fd;
padding: 10px;
border-bottom: 2px solid #eee;
display:none;
}
.user_messangers .messanger_sendarea 
input#openingphotobox:checked + .image-input {
display: block;
animation: showHide 0.3s ease-in-out;
}
.user_messanger .user_message .user_message_img img {
width: 100%;
height: 100%;
border-radius: 10px;
box-shadow: 0px 0px 7px 0px #000;
}

.shoutpostsend .quotepost {
padding: 10px;
border: 2px solid #0092ff;
margin-bottom: -10px;
border-radius: 10px;
margin-top: 10px;
}

.shoutpostsend .quotepost .quoteposttitle {
color: #0092ff;
border-bottom: 2px solid;
padding: 10px;
font-weight: 900;
text-align: -webkit-center;
}

.shoutpostsend .quotepost .ptitleq {
text-align: left;
overflow: hidden;
margin-top: 15px;
}

.shoutpostsend .quotepost .pqauthrmsg {
text-align: left;
margin: 10px 0px;
color: #000;
font-weight: 600;
}

.shoutpostsend .quotepost .ptitleq .athrti {
float: left;
margin-right: 5px;
color: #0092ff;
font-weight: 800;
}

.shoutpostsend .quotepost .ptitleq .uathrname {
font-weight: 800;
font-style: italic;
}
.expire-prod {
display: flex;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
height: 250px;
margin-top: 10px;
margin-left: -10px;
margin-right: -10px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px #3333;
}

.expire-prod .expired-prod-txt {
border: 2px solid red;
padding: 10px;
border-radius: 5px;
color: red;
font-weight: 800;
}
.user_messanger .user_message .expired {
padding: 10px;
border: 2px  solid red;
border-radius: 5px;
font-weight: 800;
font-size: 10px;
height: 150px;
display: flex;
flex-wrap: wrap;
align-content: center;
box-shadow: inset 0px 0px 10px 0px #a74343;
font-style: italic;
}
.user_messanger .user_message .user_message_seen {
margin-top: -3px;
border: 2px solid #5878f7;
height: 16px;
width: 16px;
left: 100%;
cursor: pointer;
position: absolute;
color: #fff;
font-size: 15px;
border-radius: 100%;
margin-left: 10px;
}
.user_messanger .user_message 
.user_message_seen.double {
background: #5878f7;
}
.user_messanger .user_message.sen .user_message_links {
margin-right: 20px;
}
.user_messangers .topbar_messanger input#openmenu:checked + .topbar_menu .menuopen {
display: block!important;
animation: showHide 0.3s ease-in-out;
}


.user-login {
margin-top: -70px;
}
.user-login .user-login-back img {
width: 100%;
height: 470px;
filter: blur(2px);
-webkit-filter: blur(2px);
padding:2px;
}

.user-login-back-txt {
position: relative;
color: #fff;
top: -300px;
text-align: -webkit-center;
}

.user-login-back-txt font.font-user-login-txt {
font-weight: 900;
font-size: 20px;
text-decoration: underline;
}

.user-login-form {
width: 100%;
rotate: 0deg;
border-radius: 20px 20px 0px 0px;
height: 130px;
background: #fff;
margin-top: -190px;
}

.user-login .user-login-form-inside {
width: 100%;
background: #fff;
margin-top: -98px;
padding: 20px;
position: relative;
overflow: hidden;
}

.user-login .user-login-form-inside .user-login-form-group {
overflow: hidden;
margin-top: 30px;
border-bottom: 1px solid;
}

.user-login .user-login-form-inside .user-login-form-group:first-child {
margin-top: 0px;
}

.user-login .user-login-form-inside .login-form-emoji {
float: left;
padding: 10px;
width: 10%;
text-align: -webkit-center;
}

.user-login .user-login-form-inside input.user-login-input {    
width: 90%;
border: 0px;
outline: none;
font-weight: 600;
line-height: 0px;
padding: 10px!important;
}

.user-login .user-login-form-inside .login-form-emoji i {
font-size: 16px;
}

.user-login .user-login-form-inside .user-login-down {
float: right;
margin-top: 5px;
}

.user-login .user-login-form-inside .user-login-down a {
color: #1042bf;
font-weight: 700;
}

.user-login .user-login-form-inside .login-form-btn {
margin: 50px 0px;
}

.user-login .user-login-form-inside button.login-frm-btn\" {
width: 100%;
padding: 20px;
background: #1042bf;
color: #fff;
font-weight: 800;
border-radius: 5px;
border: 0px;
}

.user-login .user-login-form-inside input.user-login-input:focus {
outline: none;
}

.user-login .user-login-form-inside .user-login-form-group:hover .login-form-emoji {
color: #1042bf;
}

.user-login .user-login-form-inside .user-login-form-group:hover {
color: #1042bf;
}

.user-login .user-login-form-inside .login-externel-link {
padding-top: 30px;
font-weight: 600;
border-top: 1px solid #aaa;
}

.user-login .user-login-form-inside .login-frm-externel {
text-align: -webkit-center;
}

.user-login .user-login-form-inside .login-externel-link a {
color: #1042bf!important;
font-weight: 800;
}

.user-login-form-group:hover .user-login-input::-webkit-input-placeholder {
color: #1042bf;
}
.user-login-form-group:hover input.user-login-input {
color: #1042bf;
}

.user-login-form-group:hover input.user-login-input:-webkit-autofill {
-webkit-text-fill-color: #1042bf;
}

.user-login .user-login-form-inside input.user-login-input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

.user-login .user-login-form-inside .login-form-btn-icon {float: left;
width: 55px;
height: 60px;
line-height: 58px;
text-align: center;
background-color: rgb(0 0 0 / 26%);
margin: -20px;
margin-top: -20px;
margin-bottom: -20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-top: 5px;
}

.user-login .user-login-form-inside .login-form-btn-icon i {
color: #fff;
font-size: 20px;
position: absolute;
margin-left: -10px;
margin-top: 10px;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input {
width: 90%;
margin-left: 10%;
padding: 10px;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input label.select-name, label.selected-male, label.selected-female {
width: 100%;
font-weight: normal;
animation: showHide 0.3s ease-in-out;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input span.right-tick {
float: right;
font-size: 15px;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#enable-genderbox:checked + .select-options {
display: none!important;
animation: showHide 0.3s ease-in-out;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input .select-options {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px saddlebrown;
border: 1px solid #eee;
position: relative;
width: 118%;
margin-left: -15%;
display: none;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input label.select-label-class {
width: 100%;
overflow: hidden;
border-top: 1px solid #eee;
padding: 10px;
height: 35px;
margin-top: -10px;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input .label-icon {
float: left;
margin-right: 10px;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#male-gender:checked + #female-gender + #enable-genderbox + label.select-name, input#female-gender:checked + #enable-genderbox + label.select-name{
display: none!important;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#enable-genderbox:checked + .select-name + .selected-male + .selected-female + .select-options {
display: block!important;
animation: showHide 0.3s ease-in-out;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#male-gender:checked + #female-gender + #enable-genderbox + .select-name + .selected-male{
display: block!important;
animation: showHide 0.3s ease-in-out;
}



.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#female-gender:checked + #enable-genderbox + .select-name + .selected-male + .selected-female{
display: block!important;
animation: showHide 0.3s ease-in-out;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#male-gender:checked + #female-gender + #enable-genderbox + .select-name + .selected-male + .selected-female {
display: none!important;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#female-gender:checked + #enable-genderbox + .select-name + .selected-male {
display: none!important;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input .right-circle {
float: right;
display: none;
}
.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#male-gender:checked + #female-gender + #enable-genderbox + .select-name + .selected-male + .selected-female + .select-options #male-gender-box .right-circle {
display:block!important;
animation: showHide 0.3s ease-in-out;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input input#female-gender:checked + #enable-genderbox + .select-name + .selected-male + .selected-female + .select-options #female-gender-box .right-circle {
display:block!important;
animation: showHide 0.3s ease-in-out;
}

.user-login .user-login-form-inside .user-login-form-group .login-form-input .select-input label.selected-male, label.selected-female {
display: none;
}
.new-account-info {
background: #fff;
border-radius: 10px;
margin-top: -70px;
border: 2px outset #a847b2;
}

.new-account-info .account-info-title {
padding: 20px;
text-align: -webkit-center;
font-weight: 700;
border-bottom: 2px solid #eee;
font-variant: petite-caps;
font-size: 20px;
}

.new-account-info .web-title-new-act .about-site-new-act {
display: flex;
justify-content: center;
flex-direction: row;
align-content: space-around;
padding: 10px;
border-bottom: 2px solid #eee;
}

.new-account-info .web-title-new-act .about-site-new-act .about-site-new-act_site_name {
font-weight: 900;
font-size: 20px;
padding-top: 5px;
color: #a84299;
}

.new-account-info .web-title-new-act .about-site-new-act .about-site-new-act_site_logo img {
width: 40px;
}

.new-account-info .info-alert-newact {
padding: 10px;
font-weight: 900;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: inset 0px 0px 4px 0px;
border-top: 2px solid #1e5ca9;
font-variant: petite-caps;
font-size: 15px;
}

.new-account-info .newaccount-info .info-fields-nwact .info-field-nwact .qust-in-field-newact {
color: #000000;
font-size: 15px;
font-weight: 600;
}

.new-account-info 
.newaccount-info .info-fields-nwact {
overflow: hidden;
background: #ffffffab;
margin: 10px;
box-shadow: 0px 0px 5px 0px #b1a8a8;
border-radius: 5px;
margin-top: 25px;
}

.new-account-info .info-btn-newact {
margin: 10px 70px;
text-align: -webkit-center;
border-top: 2px solid #eee;
padding: 10px;
}

.new-account-info .info-btn-newact button.btn-newact-info {
width: 65%;
padding: 10px;
background: #a84299;
border: 0px;
border-radius: 5px;
color: #fff;
font-weight: 800;
}

.new-account-info .newaccount-info .info-fields-nwact .info-field-nwact {
overflow: hidden;
padding: 10px 15px;
border-bottom: 2px solid #9c27b0;
}

.new-account-info .newaccount-info .info-fields-nwact .info-field-nwact .ans-in-field-newact {
font-weight: 800;
font-size: 15px;
color: #000;
margin-top: 10px;
}


.new-account-info .newaccount-info .info-fields-nwact .info-field-nwact:last-child {
border-bottom: 0px;
}

::-webkit-scrollbar {
height: 2px;
width:5px
}
::-webkit-scrollbar-thumb {
background-color: #2196F3;
}
.leftmenu-web .webinfo-leftbar .name-webinfo-leftbar {
font-weight: 900;
font-size: 18px;
margin-top: -15px;
color: #a84299;
padding-bottom: 15px;
}

.leftmenu-web .webinfo-leftbar .name-webinfo-leftbar font.rightwebinfoname {
color: #1e5ca9;
}

.leftmenu-web {
background-color: #fafafa;
bottom: 0px !important;
border-right: 1px solid #000;
margin-top: -70px;
position: fixed;
float: left;
height: 100%;
left: 0px;
width: 20%;
text-align: -webkit-center;
}

.web-content {
margin-left: 21%;
margin-right: 36%;
}

.leftmenu-web .webinfo-leftbar {
margin: 10px 20px;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: -1px -1px 5px 0px #a84299, 1px 1px 5px 0px #1e5ca9;
border-top: 2px solid #a84299;
border-left: 2px solid #a84299;
border-bottom: 2px solid #1e5ca9;
border-right: 2px solid #1e5ca9;
}

.leftmenu-web .webinfo-leftbar .logo-webinfo-leftbar img {
width: 100px;
height: 100px;
}

.leftmenu-web .webinfo-leftbar .logo-webinfo-leftbar.Lymlyte img {
margin: 15px 5px;
border-radius: 10px;
}

.leftmenu-web .links-webinfo .link-webingo {
padding: 10px;
overflow: hidden;
margin-bottom: 10px;
border-radius: 5px 0px 0px 5px;
display: flex;
color: #000;
}

.leftmenu-web .links-webinfo .link-webingo .icon-link-webinfo {
margin-right: 10px;
}

.leftmenu-web .links-webinfo .link-webingo .name-link-webinfo {
font-weight: 700;
margin-top: -1px;
}

.leftmenu-web .links-webinfo .link-webingo .notif-link-webinfo {
background: #000;
padding: 2px 6px;
color: #fff;
border-radius: 5px;
margin-top: -5px;
font-weight: 700;
position: absolute;
margin-left: 75%;
}

.leftmenu-web .links-webinfo .link-webingo.activelink {
background: #000000!important;
color: #fff;
}

.leftmenu-web .links-webinfo {
padding: 10px;
padding-right: 0px;
overflow: hidden;
}

.leftmenu-web .webinfo-leftbar:hover {
background: #eee;
}

.leftmenu-web .links-webinfo .link-webingo:hover {
background: #eeeeeee6;
box-shadow: 0px 0px 0px 0px;
border: 0px;
}

@media screen and (max-width: 1024px) {
.leftmenu-web .links-webinfo .link-webingo .name-link-webinfo{
display:none!important;
}
.leftmenu-web{
width:10%
}
.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-rbtn{
display:none!important;
}
.leftmenu-web .links-webinfo .link-webingo .notif-link-webinfo{
position: absolute;
border-radius: 50%;
margin-left: 10px;
margin-top: -8px;
padding: 3.5px 8px;
font-size: 12px;
}

.leftmenu-web .webinfo-leftbar {
margin: 0px;
border: 0px;
box-shadow: 0px 0px 0px;
}

.leftmenu-web .webinfo-leftbar .name-webinfo-leftbar {
display: none!important;
}

.leftmenu-web .links-webinfo .link-webingo .icon-link-webinfo i {
font-size: 143%;
}

.leftmenu-web .webinfo-leftbar .logo-webinfo-leftbar img {
width: 100%;
}

.leftmenu-web .links-webinfo .link-webingo {
border-radius: 5px;
float: left;
padding-left: 20%;
padding-right: 20%;
margin-left: 15%;
}

.leftmenu-web .links-webinfo {
padding-right: 10px;
text-align: -webkit-center;
}

.leftmenu-web .links-webinfo .link-webingo .icon-link-webinfo {
margin-right: 0px!important;
}

.web-content {
margin-left: 11%;
margin-top: -70px;
}
}
@media screen and (max-width: 480px){
.leftmenu-web {
display: none!important;
}
#navbar{
display:block;
}
.guestheader{
display:block;
}
.rightmenu-web{
display:none!important;
}
.web-content {
margin-left: 0%;
margin-right: 0%;
margin-top: 70px;
}
.user-login-form {
height: 194px!important;
background: #fff!important;
margin-top: -190px!important;
rotate: 30deg!important;
border-top-left-radius: 91px!important;
width: 92%!important;
}
}

@media screen and (max-width: 360px){
.leftmenu-web {
display: none!important;
animation: showHide 0.3s ease-in-out;
}
#navbar{
display:block!important;
animation: showHide 0.3s ease-in-out;
}
header.datamode {
top: 54px!important;
}
.using-mode{
display:block!important;
animation: showHide 0.3s ease-in-out;
}
.guestheader{
display:block;
animation: showHide 0.3s ease-in-out;
}
.web-content {
margin-left: 0%;
}
.user-login-form {
height: 194px!important;
background: #fff!important;
margin-top: -190px!important;
rotate: 30deg!important;
border-top-left-radius: 91px!important;
width: 92%!important;
}
}

.rightmenu-web {
background-color: #fafafa;
bottom: 0px !important;
border-left: 1px solid #000;
margin-top: -70px;
position: fixed;
float: right;
height: 100%;
right: 0px;
width: 35%;
padding: 10px;
overflow-x: scroll;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin-right: 5px;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-dp img {
width: 55px;
height: 55px;
border-radius: 100%;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted {
width: 100%;
overflow: hidden;
padding: 15px 10px;
border-bottom: 1px solid #eee;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-dp {
float: left;
margin-right: 10px;
}

.rightmenu-web .people-sgst .people-sgsted-title {
padding: 20px;
font-weight: 800;
font-size: 20px;
border-bottom: 1px solid;
font-variant: small-caps;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-rbtn {
float: right;
margin-top: -41px;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-rbtn button.follow-sgstedbtn-right .sgstedbtn-right-icon {
float: left;
margin-right: 5px;
margin-top: 3px;
font-size: 13px;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-rbtn button.follow-sgstedbtn-right .sgsted-btnname {
float: left;
font-size: 15px;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-rbtn button.follow-sgstedbtn-right {
overflow: hidden;
background: #0084ff;
color: #fff;
font-size: 15px;
font-weight: 600;
padding: 5px 10px;
border: 0px;
border-radius: 5px;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-name {
font-weight: 900;
font-size: 15px;
margin-top: 5px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
float: left;
width: 50%;
color: #000;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-uname {
font-weight: 800;
font-size: 14px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
width: 45%;
color: #000;
}

.rightmenu-web .people-sgst {
background: #fff;
border-radius: 5px;
box-shadow: 0px 0px 1px 0px;
}

.rightmenu-web .people-sgst .peoples-sgsted  .people-sgsted-see {
padding: 20px;
text-align: -webkit-center;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted-see button.see-more-sgsted-people {
padding: 6px 18px;
font-weight: 800;
background: #673ab7;
color: #fff;
border: 0px;
border-radius: 5px;
font-size: 15px;
overflow: hidden;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted-see button.see-more-sgsted-people .see-more-sgsted-people-icon {
float: left;
margin-right: 5px;
}

.rightmenu-web .people-sgst .peoples-sgsted .people-sgsted-see button.see-more-sgsted-people .see-more-sgsted-people-txt {float: left;}

.rightmenu-web .rightmenu-welcome-msg {
background: #fff;
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px;
margin-bottom: 20px;
}

.rightmenu-web .rightmenu-welcome-msg .welcome-msg-txt h4 {
text-align: -webkit-center;
font-weight: 800;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}

.leftmenu-web .download-app-leftmenu img {
width: 100%;
background: #fff;
}

.leftmenu-web .download-app-leftmenu {
margin-top: 20px;    
position: absolute;
bottom: 0px;
left: 0px;
display:none;
}

.rightmenu-web .rightmenu-welcome-msg .welcome-btns-rightmenu button.login-frm-btn\" {
width: 100%;
padding: 10px;
background: #1042bf;
color: #fff;
font-weight: 800;
border-radius: 5px;
border: 0px;
}

.rightmenu-web .rightmenu-welcome-msg .welcome-btns-rightmenu button.login-frm-btn\" .login-form-btn-icon, .rightmenu-web .rightmenu-welcome-msg .welcome-btns-rightmenu button.sign-frm-btn .sign-form-btn-icon {
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgb(0 0 0 / 26%);
margin: -20px;
margin-top: -10px;
margin-left: -10px;
margin-bottom: -20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.rightmenu-web .rightmenu-welcome-msg .welcome-btns-rightmenu button.sign-frm-btn {
width: 100%;
padding: 10px;
background: crimson;
color: #fff;
font-weight: 800;
border-radius: 5px;
border: 0px;
margin-top: 10px;
}

.rightmenu-web .rightmenu-welcome-msg .welcome-btns-rightmenu {
margin-top: 15px;
padding-top: 15px;
border-top: 2px solid #eee;
}
.rightmenu-web::-webkit-scrollbar {
height: 2px;
width:5px;
border-radius:100%;
}
.rightmenu-web::-webkit-scrollbar-thumb {
background-color: crimson;
}
.user-form {
margin-top: -20px;
}

.user-form .inside-user-form {
background: #fff;
border-radius: 20px;
margin-top: -15%;
position: relative;
padding: 30px;
}

.user-form .inside-user-form .user-profile-user-form img {
width: 115px;
height: 115px;
border-radius: 100%;
border: 2px solid #fff;
padding-top: 2px;
padding-left: 1px;
padding-right: 1px;
}

.user-form .inside-user-form .user-profile-user-form {
text-align: -webkit-center;
position: relative;
top: -90px;
height: 50px;
}

.user-form .inside-user-form .user-profile-user-form i {
background: #000000;
color: #fff;
padding: 7px 10px;
border-radius: 100%;
position: absolute;
margin-top: 75px;
margin-left: -35px;
font-size: 15px;
font-size: 15px;
border: 1px solid;
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form-div .input-title-user {
font-weight: 700;
color: #565656;
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form {
margin-top: 5px;
margin-bottom: 20px;
}


.user-form .inside-user-form .all-inputs-user-form .input-user-form .inputing-user-form {
width: 100%;
padding: 12px;
border: 1px solid #d1d1d1;
border-radius: 5px;
padding-left: 20px;
color: #767676;
font-weight: 600;
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form .inputing-user-form:focus {
outline: none;
}

.user-form i.fi.fi-rr-angle-left {
padding: 10px 15px;
background: #ffffff7a;
position: absolute;
margin-top: 35px;
margin-left: 15px;
color: #fff;
border-radius: 10px;
font-size: 15px;
z-index: 1;
}

.user-form .inside-user-form .submitbtn-user-form button.btn-user-form {
width: 100%;
padding: 15px;
background: #171844;
color: #fff;
font-weight: 700;
border: 0px;
border-radius: 100px;
text-align: -webkit-center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
}

.user-form .inside-user-form .submitbtn-user-form button.btn-user-form .sumitbtn-icon-user-form {
margin-right: 10px;
}

.user-form .background-user-form {
background: url("../../icons/edit_back.png");
height: 40%;
background-size: 100% 100%;
filter: blur(2px);
-webkit-filter: blur(2px);
margin: 2px;
}

.user-form .inside-user-form .all-inputs-user-form .select-user-form {
float: right;
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form-div.select .input-title-user {
float: left;
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form-div.select {
overflow: hidden;
width: 100%;
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form-div {
margin-top: 5px;
margin-bottom: 20px;
}

.user-form .inside-user-form .all-inputs-user-form .select-options {
border-radius: 10px;
border-bottom: 1px saddlebrown;
display: none;
border: 1px solid #eee;
margin-bottom: 20px;
}

.user-form .inside-user-form .all-inputs-user-form input#enable-genderbox:checked + .input-user-form-div.select + .select-options {
display: block!important;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form .all-inputs-user-form label#male-gender-box, label#female-gender-box, label#single-status-box, label#married-status-box, label#widowed-status-box, label#separated-status-box, label#divorced-status-box{
width: 100%;
padding: 10px;
border-top: 1px solid #eee;
}

.user-form .inside-user-form .all-inputs-user-form .label-icon {
float: left;
margin-right: 10px;
}

.user-form .inside-user-form .all-inputs-user-form .right-circle {
float: right;
display: none;
}

.user-form .inside-user-form .all-inputs-user-form label#male-gender-box {
border-top: 0px;
}

.user-form .inside-user-form .all-inputs-user-form input#male-gender:checked + input#female-gender + input#enable-genderbox + .input-user-form-div.select + .select-options #male-gender-box .right-circle {
display: block!important;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form .all-inputs-user-form input#female-gender:checked  + input#enable-genderbox + .input-user-form-div.select + .select-options #female-gender-box .right-circle {
display: block!important;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form .all-inputs-user-form  .dobbox-user-form {
width: 100%;
overflow: hidden;
margin-bottom: 20px;
display: none;
}

.user-form .inside-user-form .all-inputs-user-form .dobbox-user-form .day-dobbox-user-form {
width: 32.33333%;
float: left;
display: inline-block;
vertical-align: middle;
text-align: center;
margin-right: 5px;
}

.user-form .inside-user-form .all-inputs-user-form .dobbox-user-form .mon-dobbox-user-form {
width: 30.33333%;
float: left;
display: inline-block;
vertical-align: middle;
text-align: center;
margin-right: 5px;
}

.user-form .inside-user-form .all-inputs-user-form .dobbox-user-form .year-dobbox-user-form {
width: 33.33333%;
float: left;
display: inline-block;
vertical-align: middle;
text-align: center;
}

.user-form .inside-user-form .all-inputs-user-form .dobbox-user-form select {
background: #fcfcfc!important;
color: #5D6D7E!important;
width: 100%;
padding: 5px !important;
border-radius: 5px!important;
display: inline-block;
text-decoration: none;
text-align: center;
font-weight: 500;
border: 1px solid #eee;
}


.user-form .inside-user-form .all-inputs-user-form input#enable-birthbox:checked + .input-user-form-div.select + .dobbox-user-form {
display: block;
animation: showHide 0.3s ease-in-out;
}
.user-form .inside-user-form input#enable-statusbox:checked + .input-user-form-div.select + .select-options {
display: block;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form input#single-status:checked + input#married-status + input#widowed-status + input#separated-status + input#divorced-status + input#enable-statusbox + label.input-user-form-div.select + .select-options label#single-status-box .right-circle{
display:block;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form input#married-status:checked + input#widowed-status + input#separated-status + input#divorced-status + input#enable-statusbox + label.input-user-form-div.select + .select-options label#married-status-box .right-circle{
display:block;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form input#widowed-status:checked + input#separated-status + input#divorced-status + input#enable-statusbox + label.input-user-form-div.select + .select-options label#widowed-status-box .right-circle{
display:block;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form input#separated-status:checked + input#divorced-status + input#enable-statusbox + label.input-user-form-div.select + .select-options label#separated-status-box .right-circle{
display:block;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form input#divorced-status:checked + input#enable-statusbox + label.input-user-form-div.select + .select-options label#divorced-status-box .right-circle{
display:block;
animation: showHide 0.3s ease-in-out;
}
@keyframes GetErrorfadeOut {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; display: none; }
}
.popupalert.showalert {
display: block;
animation: GetErrorfadeOut 10s normal forwards ease-in-out;
transition: width .4s ease-in-out;
}


.user-form .inside-user-form .confirm-detail .avatar-confirm-detail {
float: left;
margin-right: 10px;
}

.user-form .inside-user-form .confirm-detail .name-confirm-detail {font-weight: 800;font-size: 15px;}

.user-form .inside-user-form .confirm-detail .avatar-confirm-detail i {
font-size: 30px;
color: #2196f3;
}

.user-form .inside-user-form .confirm-detail {
border: 1px solid #2196f3;
border-radius: 10px;
overflow: hidden;
padding: 10px;
box-shadow: 0px 0px 6px 0px #2196f3;
}

.user-form .inside-user-form .confirm-detail .right-confirm-detail {
float: right;
margin-top: -34px;
}

.user-form .inside-user-form .confirm-detail .email-confirm-detail {
font-weight: 600;
font-size: 13px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 50%;
}

.user-form .inside-user-form .confirm-detail .right-confirm-detail button.right-change-btn-confirm-detail {
padding: 6px 11px;
border: 0px;
background: #000000;
color: #fff;
font-weight: 600;
border-radius: 5px;
width: 100%;
}


.user-form .inside-user-form .confirm-detail .right-confirm-detail button.right-change-btn-confirm-detail .icon-right-change-btn-confirm-detail {
float: left;
margin-right: 5px;
font-size: 12px;
margin-top: 3px;
}

.user-form div#mood-options label {
width: 100%;
padding: 10px;
border-top: 1px solid #eee;
}

.user-form .inside-user-form input#enable-moodbox:checked + .input-user-form-div.select + .select-options {
display: block;
animation: showHide 0.3s ease-in-out;
}

.user-form .inside-user-form  #happy-mood:checked ~ .select-options #happy-mood-box .right-circle,
.user-form .inside-user-form  #shy-mood:checked ~ .select-options #shy-mood-box .right-circle,
.user-form .inside-user-form  #scaring-mood:checked ~ .select-options #scaring-mood-box .right-circle,
.user-form .inside-user-form  #calibrate-mood:checked ~ .select-options #calibrate-mood-box .right-circle,
.user-form .inside-user-form  #shock-mood:checked ~ .select-options #shock-mood-box .right-circle,
.user-form .inside-user-form  #unwell-mood:checked ~ .select-options #unwell-mood-box .right-circle,
.user-form .inside-user-form  #yawn-mood:checked ~ .select-options #yawn-mood-box .right-circle,
.user-form .inside-user-form  #sleep-mood:checked ~ .select-options #sleep-mood-box .right-circle,
.user-form .inside-user-form  #laugh-mood:checked ~ .select-options #laugh-mood-box .right-circle,
.user-form .inside-user-form  #cry-mood:checked ~ .select-options #cry-mood-box .right-circle,
.user-form .inside-user-form  #angry-mood:checked ~ .select-options #angry-mood-box .right-circle,
.user-form .inside-user-form  #sad-mood:checked ~ .select-options #sad-mood-box .right-circle,
.user-form .inside-user-form  #wink-mood:checked ~ .select-options #wink-mood-box .right-circle,
.user-form .inside-user-form  #silent-mood:checked ~ .select-options #silent-mood-box .right-circle,
.user-form .inside-user-form  #devil-mood:checked ~ .select-options #devil-mood-box .right-circle {
display: block;
animation: showHide 0.3s ease-in-out;
}
.users_list .users_listing .user_list_other_bottom_options .user_list_button button.btn.btn-follow .user_list_button_icon {
font-size: 12px;
display: block;
float: left;
margin-top: 2px;
margin-right: 5px;
}

.empty_box_user_listing {
padding: 10px 10px;
text-align: -webkit-center;
border: 1px solid #2061dd;
border-radius: 10px;
padding-top: 20px;
box-shadow: inset 0px 0px 5px 0px #2061dd;
margin-top:10px;
width:100%;
}

.empty_box_user_listing .text_empty_box_user_listing {
margin-top: 10px;
font-weight: 900;
font-variant: small-caps;
color: #2061dd;
margin-bottom: 10px;
}

.empty_box_user_listing .icon_empty_box_user_listing {
font-size: 20px;
}

.empty_box_user_listing .icon_empty_box_user_listing img {
width: 150px;
}
.user_profile .user_first_info .my-mood {
background-color: #8d8d8d;
color: #fff;
text-align: -webkit-left;
overflow: hidden;
position: absolute;
height: 30px;
margin-top: -45px;
max-width: 30%;
padding: 5px;
border-radius: 5%;
box-shadow: 0px 0px 5px 0px #8d8d8d;
}

.user_profile .user_first_info .my-rank .icon-my-mood , .user_profile .user_first_info .my-mood .icon-my-mood {
float: left;
margin-right: 5px;
margin-left: 5px;
}

.user_profile .user_first_info .my-rank .icon-my-mood-text, .user_profile .user_first_info .my-mood .icon-my-mood-text {
float: left;
margin-right: 10px;
font-weight: 700;
font-variant: small-caps;
}


.user_profile .user_first_info .my-rank {
color: #000;
text-align: -webkit-left;
overflow: hidden;
position: absolute;
right: 10px;
height: 30px;
margin-top: -45px;
max-width: 30%;
padding: 3px;
border-radius: 5px;
border: 2px solid #eee;
z-index: 0;
background: #001;
}

@keyframes rotate-border {
100% {
transform: rotate(1turn);
}
}

.user_profile .user_first_info .my-rank:before,
.user_profile .user_first_info .my-rank:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
}

.user_profile .user_first_info .my-rank:before {
background-image: conic-gradient(rgba(0,0,0,0), #946bee, rgba(0,0,0,0) 30%);
animation: rotate-border 5s linear infinite;
z-index: -2;
border-radius: 100px;
}

.user_profile .user_first_info .my-rank:after {
background: #ffffff;
border-radius: 0px;
left: 2px;
top: 4px;
width: calc(100% - 5px);
height: calc(100% - 8px);
z-index: -1;
}
.css-1xhvohf > button > * {
left: 0em!important;
}

.story-upload-menu .story-upload-menu-links .story-upload-menu-link {
display: flex;
align-items: center;
padding: 5px 15px;
border-radius: 15px;
background: rgb(255 255 255 / 25%);
color: #fff;
font-weight: 500;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
margin: 5px 3px;
}

.story-upload-menu .story-upload-menu-links {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 30px;
background: linear-gradient(135deg, #9932CC, #FF69B4);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
flex-direction: row;
align-content: center;
flex-wrap: nowrap;
margin: 5px;
}

.story-upload-menu {
margin-top: 70px;
}

.story-upload-menu .story-upload-menu-links .story-upload-menu-link:first-child {
margin-left: 1.5%!important;
}

.story-upload-menu .story-upload-menu-links .story-upload-menu-link:last-child {
margin-right: 1.5%!important;
}

.story-upload-menu .story-upload-menu-links .story-upload-menu-link .icon-story-upload-menu-link {
font-size: 11px;
float: left;
margin-right: 5px;
margin-top: 2px;
}

.story-upload-menu .story-upload-menu-links .story-upload-menu-link .name-story-upload-menu-link {
font-size: 13px;
float: right;
font-variant: small-caps;
font-weight: 900;
}

.story-upload-menu .story-upload-menu-links .story-upload-menu-link.activelink {
background: #fff;
box-shadow: 0px 0px 10px 0px #e159ba !important;
}


.story-upload-menu .story-upload-menu-link.activelink  .icon-story-upload-menu-link i,.story-upload-menu  .story-upload-menu-link.activelink  .name-story-upload-menu-link {
color: #000;
}

.story-upload-menu .story-upload-menu-link .icon-story-upload-menu-link i,.story-upload-menu  .story-upload-menu-link .name-story-upload-menu-link {
color: #fff;
}

.story-upload-menu .story-upload-menu-link:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.2);
}

.story-upload-menu-link.activelink {
background: #fff;
box-shadow: 0px 0px 10px 0px #e159ba !important;
}

.story-upload-form {
background: #fff;
margin-top: 30px;
padding: 10px;
border-radius: 10px;
animation: showHide 0.3s ease-in-out;
border: 2px solid #9932CC;
}

.story-upload-form .story-upload-form-title {
text-align: center;
padding: 10px;
margin-bottom: 25px;
}

.story-upload-form .story-upload-form-title font.text-story-upload-form-title {
font-size: 20px;
font-weight: 800;
padding: 5px;
border-bottom: 1px solid;
color: #9932CC;
font-variant: small-caps;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-group {
overflow: hidden;
margin-bottom: 30px;
border-bottom: 1px solid;
padding: 5px;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-group-icon {
float: left;
padding: 2%;
padding-top: 3%;
width: 10%;
text-align: -webkit-center;
font-size: 20px;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-group-input input.story-form-input {
border: 0px;
outline: none;
font-weight: 600;
line-height: 0px;
padding: 10px!important;    
width: 100%;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-group-input {
float: left;
margin-top: 1%;
margin-left: 1.5%;
width: 85%;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-button button.story-upload-button {
width: 100%;
padding: 20px;
background: linear-gradient(
180deg, #9932CC, #6A5ACD);
color: #fff;
font-weight: 800;
border-radius: 5px;
border: 0px;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-button .btn-icon {
float: left;
width: 55px;
height: 60px;
line-height: 58px;
text-align: center;
background-color: rgb(0 0 0 / 26%);
margin: -20px;
margin-top: -20px;
margin-bottom: -20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-top: 2px;
font-size: 20px;
}.story-upload-loading {
display: none;
margin-top: 50px;
background: #4f4f4f;
padding: 50px 0px;
}

.story-upload-loading .box {
display: flex;
justify-content: center;
align-items: center;
background: #4f4f4f;
border-radius: 5px;
flex-direction: column;
}

.story-upload-loading .percent {
position: relative;
}

.story-upload-loading .text {
margin-top: 10px;
font-weight: 600;
color: #fff;
font-size: 25px;
}

.story-upload-loading .cancel-btn {
margin-top: 5px;
padding: 8px;
border: none;
border-radius: 5px;
background: #ff4d4d;
color: #fff;
cursor: pointer;
width: 50%;
font-weight: 700;
}

/* Big water wave animation */
.story-upload-loading .water {
animation: bigWave 3s ease-in-out infinite;
}

@keyframes bigWave {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}

/* Fishes animations */
.story-upload-loading .fish1,
.story-upload-loading .fish2,
.story-upload-loading .fish3 {
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/* Horizontal swimming only */
.story-upload-loading .fish1 { animation: swim1 4s infinite linear; }
.story-upload-loading .fish2 { animation: swim2 5s infinite linear; }
.story-upload-loading .fish3 { animation: swim3 6s infinite linear; }

/* Horizontal swimming keyframes */
@keyframes swim1 { 0% { cx:0; } 100% { cx:100; } }
@keyframes swim2 { 0% { cx:100; } 100% { cx:0; } }
@keyframes swim3 { 0% { cx:0; } 100% { cx:100; } }

/* Remove float animations so JS controls vertical position */

/* Text inside circle */
.story-upload-loading .num {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: #fff;
text-transform: uppercase;
font-size: 9px;
}


.story-upload-form .story-upload-inside-form .story-upload-inside-form-group .story-upload-inside-form-group-bg {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-left: 50px;
overflow-x: auto;
position: relative; /* Make the flex container the reference point for absolute positioning */
/* Example of flex properties */
padding-top: 20px;
padding-left: 10px;
margin-top: -15px;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-group .story-upload-inside-form-group-bg label.story-upload-inside-form-group-bg-img img {
width: 50px;
height: 50px;
border-radius: 10px;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-group .story-upload-inside-form-group-bg label.story-upload-inside-form-group-bg-img {
margin-right: 10px;
}

.story-upload-form .story-upload-inside-form .story-upload-inside-form-group .story-upload-inside-form-group-bg label.story-upload-inside-form-group-bg-img i {
background: #fff;
padding: 3px 6px;
font-size: 15px;
border-radius: 100%;
color: #000;
margin-left: -5px;
margin-top: -5px;
box-shadow: 0px 0px 5px 0px;
position: absolute;
display: none;
}
.story-upload-form .story-upload-inside-form .story-upload-inside-form-group .story-upload-inside-form-group-bg input:checked + label.story-upload-inside-form-group-bg-img .fi-rr-check {
display: block;
animation: showHide 0.3s ease-in-out;
}
.launch-div {
background: #fff;
border-radius: 15px;
border: 2px outset #a847b2;
margin-top: -20px;
max-width: 375px;
}

.launch-div .launch-site {
display: flex;
justify-content: center;
flex-direction: row;
align-content: space-around;
padding: 10px;
border-bottom: 2px solid #eee;
}

.launch-div .launch-site .site_logo img {
width: 40px;
}

.launch-div .launch-site .site_name {
font-weight: 900;
font-size: 20px;
padding-top: 5px;
color: #a84299;
}

.launch-div .launch-inside {
padding: 25px 10px;
text-align: -webkit-center;
}

.launch-div .launch-inside .launch-title {
font-weight: 800;
width: 100%;
border: 1px solid blue;
padding: 10px;
border-radius: 6px;
font-size: 16px;
}

.launch-div .launch-inside .launch-thanks {
margin: 20px;
padding: 10px;
border: 1px solid;
border-radius: 5px;
background: #000;
color: #fff;
font-weight: 600;
display: inline-grid;
}

.launch-div .launch-inside .launch-date {
display: inline-grid;
border: 1px solid #000;
padding: 5px 10px;
border-radius: 3px;
font-weight: 800;
box-shadow: 0px 0px 2px 0px;
}
.shoutpost .pinned_post_shout {
padding: 15px;
background: #000;
color: #fff;
text-align: -webkit-center;
font-weight: 900;
font-variant-caps: small-caps;
border-radius: 6px 6px 0px 0px;
position: relative;
width: 105%;
margin-left: -10px;
top: -10px;
}
.shoutpost .post-content .text textarea.shoutmsgedit {
width: 100%;
border-color: #002bff;
padding: 5px;
border-radius: 5px;
}

.shoutpost .post-content .edit-button-shout button.cancel-btn-edit-shout {
padding: 3px 15px;
background: #000000;
color: #fff;
font-weight: 700;
border: 3px solid #000000;
border-radius: 5px;
}

.shoutpost .post-content .edit-button-shout button.update-btn-edit-shout {
float: right;
padding: 3px 15px;
background: #0d6efd;
color: #fff;
font-weight: 700;
border: 3px solid #0d6efd;
border-radius: 5px;
}

.shoutpost .post-content .edit-button-shout {
overflow: hidden;
margin-top: 10px;
}
.user_messanger_info div#user_messengerinfo {
overflow: hidden;
margin-bottom: 20px;
background: #fff;
padding: 10px;
padding-bottom: 0px;
border-radius: 5px;
}

.user_messanger_info {
padding-bottom: 0px;
margin-top: 55px;
border-radius: 5px;
}

.user_messanger_info .user-messaging-info {box-shadow: 0px 0px 5px 0px;background: #fff;padding: 10px;border-radius: 10px;margin: 20px;}

.user_messanger_info .user-messaging-info .user-messaging-info-div-tick {
float: left;
margin-right: 5px;
margin-top: 2px;
}

.user_messanger_info .user-messaging-info .user-messaging-info-div {
overflow: hidden;
}

.user_messanger_info .user-messaging-info .user-messaging-info-div:first-child {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}

.user_messanger_info .user-messaging-info .user\=messaging-info-div-time {
margin-top: 10px;
font-weight: 600;
}

.user_messanger_info .user-messaging-info .user-messaging-info-div-title {
font-weight: 700;
font-size: 17px;
}

.user_messanger_info .user-messaging-info .user-messaging-info-div:first-child i {
color: blue;
}
.user_messanger .user_message .user_message_text textarea.inboxmsgeditbox {
background: transparent;
padding: 10px;
border: 2px solid #fff;
border-radius: 5px;
font-weight: 800;
color: #fff;
width: 100%;
}

.user_messanger .user_message .user_message_text .edit-button-shout {
overflow: hidden;
margin-top: 10px;
}

.user_messanger .user_message .user_message_text .edit-button-shout button.cancel-btn-edit-shout {
padding: 3px 15px;
background: #000000;
color: #fff;
font-weight: 700;
border: 3px solid #000000;
border-radius: 5px;
}

.user_messanger .user_message .user_message_text .edit-button-shout button.update-btn-edit-shout {
float: right;
padding: 3px 15px;
background: #ffffff;
color: #000000;
font-weight: 700;
border: 3px solid #ffffff;
border-radius: 5px;
}
.shout-links {
overflow: hidden;
padding: 10px;
border-top: 2px solid #673AB7;
border-bottom: 2px solid #673AB7;
margin-bottom: 20px;
border-radius: 5px;
}

.shout-links .shout-link {
float: left;
width: 20%;
margin: 2.5%;
text-align: -webkit-center;
background: #fff;
padding: 10px;
border-radius: 15px 0px 15px 0px;
}

.shout-links .shout-link .shout-link-icon {
margin-bottom: 8px;
font-size: 20px;
}

.shout-links .shout-link.activelink {
background: #673AB7!important;
color: #fff;
}

.shout-links .shout-link .shout-link-name {
font-weight: 700;
font-variant-caps: small-caps;
font-size: 14px;    
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.shout-links .shout-link:hover {
background: #dfdfdf;
}
.shoutpostsend input#photoshow:checked ~ .filters-opt .selectphoto {
display: block;
animation: showHide 0.3s ease-in-out;
}

.shoutpostsend input#feelingshow:checked ~ .filters-opt .feelings-list {
display: block;
animation: showHide 0.3s ease-in-out;
}
.shoutpostsend input#emojishow:checked ~ .filters-opt .emojis-list{
display:block;
animation: showHide 0.3s ease-in-out;
}
.delete-links {
margin: 20px;
background: #fff;
padding: 10px;
overflow: hidden;
border-radius: 5px;
box-shadow: 0px 0px 7px 0px;
}

.delete-links .delete-link {
width: 100%;
overflow: hidden;
padding: 10px;
margin-top: 15px;
padding-top: 15px;
padding-bottom: 0px;
border-top: 2px solid #eee;
}

.delete-links .delete-link .link-name {
float: left;
font-weight: 900;
font-variant-caps: small-caps;
}

.delete-links .delete-link .link-icon {
float: right;
font-size: 20px;
margin-top: -5px;
}

.delete-links .delete-link:first-child {
margin-top: 0px;
padding-top: 5px;
padding-bottom: 0px;
border-top: 0px;
}
.web-footer {
padding-top: 40px;
}

.web-footer .foot-inside {
border-radius: 0px 0px 5px 5px;
overflow: hidden;
background: #673AB7;
text-align: -webkit-center;
box-shadow: 0px 0px 10px 0px #673AB7;
margin: 0px 5px;
padding-top: 20px;
}

.web-footer .foot-inside .foot-options {
text-align: -webkit-center;
overflow: hidden;
padding-top: 10px;
padding-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: space-around;
align-items: stretch;

}

.web-footer .foot-inside .foot-options .foot-option img {
background: #fff;
width: 30px;
padding: 5px;
border-radius: 100%;
}

.web-footer .foot-inside .foot-options .foot-option {
margin-right: 5px;
}

.web-footer .foot-inside  .foot-links {
text-align: -webkit-center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
align-items: stretch;
padding-bottom: 20px;
padding-top: 5px;
}

.web-footer .foot-inside  .foot-links .foot-link {color: #fff;font-weight: 600;font-variant: small-caps;    margin: 5px;}

.web-footer .foot-inside  .foot-links .foot-link:after {
content: "-";
margin-right: 10px;
margin-left: 10px;
}

.web-footer .foot-inside .country-img img {
width: 48px;
}

.web-footer .foot-inside .country-name {
display: inline-block;
font-weight: 900;
color: #0a9400;
margin-top: 5px;
}

.web-footer .foot-inside .country-flag {
display: inline-block;
background: #fff;
padding: 5px;
border-radius: 5px;
margin-bottom: 5px;
margin-top: -10px;
}
.post-comments {
margin-top: 50px;
}

.post-comments .inside-post .shoutpost {
border-top: 0px;
border-radius: 0px;
margin-top: 0px;
}

.post-comments .post-comment-title {
background: #fff;
padding: 10px;
border: 1px solid #c1b8b8;
text-align: -webkit-center;
border-radius: 10px 10px 0px 0px;
border-bottom: 0px;
}

.post-comments .post-comment-title font.post-comment-title-font {font-variant-caps: small-caps;font-weight: 800;padding: 5px;border-bottom: 1px solid;font-size: 15px;}

.post-comments .comment-sections {
padding: 10px;
border: 1px solid #c1b8b8;
background: #fff;
overflow: hidden;
border-top: 0px;
}

.post-comments .comment-sections .comment-left-section {
float: left;
}

.post-comments .comment-sections .comment-right-section {
float: right;
margin-top: -1px;
}

.post-comments .comment-sections .comment-right-section .cooment-all-filters {
display: none;
position: absolute;
background: #fff;
padding: 10px;
margin-left: -110px;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px #a9a9a9;
margin-top: 10px;
animation: showHide 0.3s ease-in-out;
}

.post-comments .comment-sections .comment-right-section .comment-showing-filter i {
display: block;
float: right;
margin-left: 5px;
font-size: 15px;
}

.post-comments .comment-sections .comment-right-section .cooment-all-filters .comment-filter {
padding: 10px;
width: 150px;
border-bottom: 1px solid #eee;
font-weight: 600;
}

.post-comments .comment-sections .comment-right-section .cooment-all-filters .comment-filter:last-child {
border-bottom: 0px;
}

.post-comments .comment-sections .comment-right-section .cooment-all-filters .comment-filter i {
float: right;
font-size: 20px;
color: #333;
margin-top: -5px;
margin-right: -10px;
}

.post-comments .comment-sections .comment-right-section .cooment-all-filters .comment-filter:hover {
background: #eee;
border-radius: 5px;
}

.post-comments .comment-sections .comment-left-section font.comment-left-section-title-font {
font-weight: 600;
}

.post-comments .comment-sections .comment-right-section .comment-showing-filter {
font-weight: 600;
margin-bottom: 0px;
}

.post-comments  input#cmnt-filters:checked ~ .comment-right-section .cooment-all-filters {
display: block;
}

.post-comments .post-comments-are .commenter-left-section .commenter-dp img {
width: 45px;
height: 45px;
border-radius: 5px;
}

.post-comments .post-comments-are {
background: #fff;
padding: 10px;
border: 1px solid #c1b8b8;
border-top: 0px;
}

.post-comments .post-comments-are .commenter-left-section {margin-right: 10px;}

.post-comments .post-comments-are .post-comment {
overflow: hidden;
display: flex;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
}

.post-comments .post-comments-are .commenter-right-section {
/* float: right; */
overflow: hidden;
width: 100%;
}

.post-comments .post-comments-are .commenter-right-section .commenter-name {
font-weight: 700;
font-size: 15px;
color: #000;
margin-bottom: 5px;
}

.post-comments .post-comments-are .commenter-right-section .commenter-text {
font-weight: 400;
}

.post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn button.cmnt-btn-reply i {
display: block;
float: left;
margin-right: 5px;
font-size: 9px;
margin-top: 4px;
color: #000;
}

.post-comments .post-comments-are .commenter-right-section .other-links {
margin-top: 10px;
}

.post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn button.cmnt-btn-reply {
background: #0084ff2e;
padding: 3px 10px;
outline: none;
border: none;
border-radius: 5px;
font-weight: 700;
font-size: 12px;
margin-right: 5px;
}

.post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn .if-replies-have:before {
content: "\A";
width: 5px;
height: 5px;
border-radius:50%;
background: #000000;
display:inline-block;
margin-right: 10px;
margin-left: 5px;
}

.post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn {
display: flex;
}

.post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn .if-replies-have {
font-weight: 400;
font-variant-caps: small-caps;
border-bottom: 1px solid #000000;
padding: 0px 10px;
}

.post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-time {
float: right;
overflow: hidden;
margin-top: -20px;
}

.post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-time .other-lnk-cmnt-time-icon {
float: left;
margin-right: 3px;
font-size: 10px;
color: #a3a0a0;
margin-top: -1px;
}

.post-comments .post-comments-are .commenter-right-section .other-lnk-cmnt-time-clock {
font-weight: 800;
float: right;
overflow: hidden;
font-variant-caps: small-caps;
margin-top: -20px;
padding: 2px 5px;
color: #4c4c4c;
border-radius: 3px;
font-size: 8px;
}

.other-lnk-cmnt-time-clock i {
display: block;
float: left;
margin-right: 3px;
}

.cmnt-reply-dp img {
width: 40px;
height: 40px;
border-radius: 5px;
}


.post-comments .post-comments-are .commenter-right-section .comment-reply .cmnt-reply-dp {
float: left;
margin-right: 10px;
}

.post-comments .post-comments-are .commenter-right-section .comment-reply {
overflow: hidden;
margin: 3px;
margin-bottom: 8px;
padding: 5px;
border: 1px solid #eeee;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px;
margin-top: 10px;
}

.post-comments .post-comments-are .commenter-right-section .comment-reply .cmnt-reply-name {
font-weight: 700;
}

.post-comments .post-comments-are .commenter-right-section .comment-reply .other-links {
margin-left: 50px;
}

.post-comments .post-comments-are  .post-comment:last-child {
border-bottom: 0px;
}
.comming-soon-page {
margin-top: 50px;
border-radius: 5px;
background: #fff;
padding: 20px;
text-align: -webkit-center;
border: 2px solid #3F51B5;
}

.comming-soon-page .first-text-comming {
font-size: 25px;
color: #3F51B5;
font-weight: 800;
font-variant-caps: small-caps;
}

.comming-soon-page .second-text-commning {
padding: 5px;
font-weight: 600;
border-radius: 100px;
display: inline-block;
}

.comming-soon-page .thanks-text-comming {
color: blue;
font-weight: 600;
}

.comming-soon-page img {
width: 200px;
height: 200px;
}

.user_messanger .user_message .user_message_text.deleted i.fi.fi-rr-ban {
display: block;
float: left;
margin-right: 5px;
}

.user_messanger .user_message .user_message_text.deleted {
font-style: italic;
color: #e6e6e6;
font-weight: 900;
font-size: 12px;
}
.user_messanger .user_message.rec .user_message_text.deleted {
color: #6e6e6e;
}
.ayat-mubarak {
padding: 30px;
background: #fff;
margin-top: 15px;
text-align: center;
border: 2px solid deeppink;
border-radius: 10px;
}

.ayat-mubarak .arbi-ayat {
font-weight: 600;
font-size: 25px;
}

.ayat-mubarak .trjma-ayat {
font-weight: 600;
margin-top: 15px;
text-shadow: 0 0 20px deeppink;
}
.alert-message {
padding: 10px;
border: 1px solid #e91e63;
margin-top: 50px;
border-radius: 5px;
overflow: hidden;
background:#fff;
margin-bottom:10px;
}

.alert-message .left-icon {
float: left;
font-size: 30px;
color: #e91e63;
margin-right: 10px;
}

.alert-message .left-label {
font-weight: 900;
color: #e91e63;
font-size: 20px;
margin-top: 6px;
}

.alert-message .alert-msg {
float: right;
margin-left: 40px;
font-weight: 600;
}

.alert-message  button.redirect {
margin-top: 15px;
margin-bottom: 5px;
float: right;
margin-right: 10px;
padding: 10px;
background: #e91e63;
color: #fff;
font-weight: 600;
border: 0px;
border-radius: 5px;
}

.alert-message button.redirect i {
display: block;
float: left;
margin-right: 6px;
margin-top: 1px;
}
.using-mode {
display:none;
padding: 5px;
background: #000;
overflow: hidden;
color: #fff;
position: fixed;
top: 0px;
width: 100%;
z-index: 997;
border-radius: 2px;
box-shadow: inset 0px 0px 10px 0px #808080;
}

.using-mode .using-mode-icon {
float: left;
font-size: 20px;
margin-top: 2px;
padding: 5px;
margin-left: 5px;
}

.using-mode .using-mode-text {
float: left;
font-weight: 600;
font-size: 15px;
padding: 10px;
}

.using-mode  .other-btns {
float: right;
overflow: hidden;
padding: 5px;
}

.using-mode .other-btns button.Go.to.Free {
background: #000;
padding: 5px 15px;
border: 1px solid #eee;
font-weight: 400;
float: left;
border-radius: 2%;
}

.using-mode .other-btns .hide-mode {
float: right;
padding: 7px;
margin-left: 15px;
}
.user-rank-title {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 4px 2px 20px;
font-size: 8px;
font-weight: 700;
font-family: system-ui;
border-radius: 3px;
border: 1px solid currentColor;
background: color-mix(in srgb, currentColor 14%, transparent);
white-space: nowrap;
}

.user-rank-title-icon {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 17px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9.5px;
color: #fff;
border-radius: 3px 0 0 3px;
line-height: 2px;
margin-left: -1px;
}

.user-rank-title-text {
line-height: 1;
}

/* Dark mode */
div.content-darkmode .user-rank-title {
background: color-mix(in srgb, currentColor 35%, #000);
}

/* Roles / Titles */
.rank-member {
color: #673AB7;
}
.rank-member .user-rank-title-icon {
background: #673AB7;
}

.rank-mod-voice {
color: #7c3aed;
}
.rank-mod-voice .user-rank-title-icon {
background: linear-gradient(180deg, #8b5cf6, #6d28d9);
}

.rank-moderator {
color: #2563eb;
}
.rank-moderator .user-rank-title-icon {
background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}

.rank-chief-mod {
color: #1e40af;
box-shadow: 0 0 3px rgba(37, 99, 235, 0.4);
}
.rank-chief-mod .user-rank-title-icon {
background: linear-gradient(180deg, #2563eb, #1e3a8a);
}

.rank-admin-voice {
color: #ea580c;
}
.rank-admin-voice .user-rank-title-icon {
background: linear-gradient(180deg, #fb923c, #ea580c);
}

.rank-admin {
color: #dc2626;
}
.rank-admin .user-rank-title-icon {
background: linear-gradient(180deg, #ef4444, #b91c1c);
}

.rank-chief-admin {
color: #991b1b;
box-shadow: 0 0 4px rgba(220, 38, 38, 0.6);
}
.rank-chief-admin .user-rank-title-icon {
background: linear-gradient(180deg, #dc2626, #7f1d1d);
}

.rank-supervisor {
color: #4338ca;
box-shadow: 0 0 5px rgba(99, 102, 241, 0.7);
}
.rank-supervisor .user-rank-title-icon {
background: linear-gradient(180deg, #6366f1, #312e81);
}

.rank-manager {
color: #E91E63;
box-shadow: 0 0 3px #E91E63;
}
.rank-manager .user-rank-title-icon {
background: linear-gradient(180deg, #E91E63, #7f1e3f);
}

/* MALE PREMIUM OWNER */
.rank-owner {
color: #cbe7ff; /* icy premium text */
background: linear-gradient(
135deg,
rgba(10, 25, 50, 0.95),
rgba(20, 40, 80, 0.85),
rgba(30, 60, 120, 0.75)
);
border-color: #60a5fa;
box-shadow: 0 0 2px rgba(96, 165, 250, 0.8),
0 0 5px rgba(96, 165, 250, 0.6),
inset 0 0 5px rgba(203, 231, 255, 0.25);
}
.rank-owner .user-rank-title-icon {
background: linear-gradient(180deg, #60a5fa, #1e3a8a);
color: #ffffff;
}

.rank-redstar {
color: #e11d48;
}
.rank-redstar .user-rank-title-icon {
background: linear-gradient(180deg, #fb7185, #9f1239);
}

.rank-goldstar {
color: coral;
box-shadow: 0 0 5px coral;
}
.rank-goldstar .user-rank-title-icon {
background: linear-gradient(180deg, coral, #ca8a04);
}

.rank-robot {
color: #ffe4e6;
background: linear-gradient(
135deg,
rgba(50, 10, 15, 0.95),
rgba(90, 20, 30, 0.85),
rgba(130, 35, 45, 0.75)
);
border-color: #fb7185;
box-shadow:
0 0 2px rgba(251, 113, 133, 0.9),
0 0 6px rgba(251, 113, 133, 0.6),
inset 0 0 6px rgba(255, 228, 230, 0.25);
}

.rank-robot .user-rank-title-icon {
background: linear-gradient(180deg, #fb7185, #7f1d1d);
color: #ffffff;
}


.user-rank-title.line{
overflow: hidden;
}

.user-rank-title.line:before{
content: "";
position: absolute;
top: -30%;
left: -60%;
width: 40%;
height: 160%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
transform: skewX(-20deg);
animation: rank-title-premium-shine 2.8s ease-in-out infinite;
pointer-events: none;
z-index: 5;
}

@keyframes rank-title-premium-shine {
0% {
left: -60%;
opacity: 0;
}
30% {
opacity: 0.4;
}
60% {
opacity: 0.8;
}
100% {
left: 140%;
opacity: 0;
}
}


.rank-butterfly{
color:#ec4899;
}
.rank-butterfly .user-rank-title-icon{
background:linear-gradient(180deg,#f472b6,#db2777);
}

.rank-angel{
color:#fbbf24;
}
.rank-angel .user-rank-title-icon{
background:linear-gradient(180deg,#fde68a,#f59e0b);
}

.rank-blossom{
color:#fb7185;
}
.rank-blossom .user-rank-title-icon{
background:linear-gradient(180deg,#fda4af,#e11d48);
}

.rank-fairy{
color:#c084fc;
}
.rank-fairy .user-rank-title-icon{
background:linear-gradient(180deg,#e9d5ff,#9333ea);
}

.rank-queen{
color:#facc15;
}
.rank-queen .user-rank-title-icon{
background:linear-gradient(180deg,#fde047,#ca8a04);
}
.rank-shadow{
color:#334155;
}
.rank-shadow .user-rank-title-icon{
background:linear-gradient(180deg,#64748b,#1e293b);
}

.rank-fire{
color:#ef4444;
}
.rank-fire .user-rank-title-icon{
background:linear-gradient(180deg,#f87171,#b91c1c);
}

.rank-prince{
color:#2563eb;
}
.rank-prince .user-rank-title-icon{
background:linear-gradient(180deg,#60a5fa,#1d4ed8);
}

.rank-wolf{
color:#475569;
}
.rank-wolf .user-rank-title-icon{
background:linear-gradient(180deg,#94a3b8,#334155);
}

.rank-ice{
color:#38bdf8;
}
.rank-ice .user-rank-title-icon{
background:linear-gradient(180deg,#7dd3fc,#0284c7);
}
.rank-star{
color:#eab308;
}
.rank-star .user-rank-title-icon{
background:linear-gradient(180deg,#fde047,#a16207);
}

.rank-dream{
color:#22c55e;
}
.rank-dream .user-rank-title-icon{
background:linear-gradient(180deg,#86efac,#15803d);
}

.rank-magic{
color:#8b5cf6;
}
.rank-magic .user-rank-title-icon{
background:linear-gradient(180deg,#c4b5fd,#5b21b6);
}

.rank-topscore{
color:#f59e0b;
}

.rank-topscore .user-rank-title-icon{
background:linear-gradient(180deg,#fde047,#ca8a04);
}

.rank-topscore .user-rank-title-icon i {
animation: topscoreanimation 2s ease-out forwards; /* one-time */
}

@keyframes topscoreanimation {
0% {
transform: translate(-100px, -100px) rotate(-45deg) scale(0);
opacity: 0;
}
60% {
transform: translate(10px, 10px) rotate(10deg) scale(1.2);
opacity: 1;
}
80% {
transform: translate(-5px, -5px) rotate(-5deg) scale(0.95);
}
85% {
transform: translate(0,0) rotate(0deg) scale(1);
opacity: 1;
}
90%{
transform:scale(1); 
}
95%{
transform:scale(1.5); 
}
100%{
transform:scale(1); 
}
}
.rank-topgamer{
color:#2563eb;
}
.rank-topgamer .user-rank-title-icon{
background:linear-gradient(180deg,#60a5fa,#1d4ed8);
}

.rank-topgamer .user-rank-title-icon i{
animation:topgameranimation 1.5s infinite;
}

@keyframes topgameranimation{
0%, 100%{ transform:translateX(0); }
25%{ transform:translateX(-1px); }
50%{ transform:translateX(1px); }
75%{ transform:translateX(-1px); }
}

.rank-toplikes{
color:#e11d48;
}
.rank-toplikes .user-rank-title-icon{
background:linear-gradient(180deg,#fb7185,#9f1239);
}


.rank-toplikes .user-rank-title-icon i{
animation:toplikesanimation 1.2s infinite;
}

@keyframes toplikesanimation{
0%,100%{ transform:scale(1); }
50%{ transform:scale(1.1); }
}

.rank-topfollowers{
color:#db2777;
}
.rank-topfollowers .user-rank-title-icon{background:linear-gradient(#7e22ce, #db2777);}
.rank-topfollowers .user-rank-title-icon i{
animation:toplikesanimation 1.2s infinite;
}

@keyframes topfollowersani{
0%{ transform:translateY(0); }
50%{ transform:translateY(-1px); }
100%{ transform:translateY(0); }
}
.rank-legend{
color:#22c55e;
}
.rank-legend .user-rank-title-icon{
background:linear-gradient(180deg,#86efac,#15803d);
}


.access-denied {
text-align: -webkit-center;
padding: 10px;
background: #fff;
border-radius: 5px;
border: 1px solid red;
}

.access-denied .top-lock-denied {
font-size: 30px;
color: red;
}

.access-denied .top-denied-text {
font-size: 17px;
margin-top: 10px;
font-weight: 800;
color: red;
font-variant: small-caps;
}

.access-denied .second-denied-text {
padding: 10px;
font-weight: 400;
color: #858585;
text-shadow: 0 0 red;
}

.access-denied .bottom-denied-return {
margin-top: 10px;
margin-bottom: 10px;
}

.access-denied button.return-btn {
width: 150px;
padding: 7px;
background: red;
color: #fff;
border: 0px;
border-radius: 5px;
}

.page-is-off .page-is-off-image img {
width: 100%;
border-radius: 5px 5px 0px 0px;
}

.page-is-off {
padding: 10px;
border: 1px solid #5a99f8;
background: #fff;
border-radius: 10px;
}

.page-is-off .page-is-off-image {
margin: -10px -10px 10px -10px;
}

.page-is-off .page-is-off-top-text {
font-weight: 900;
text-align: -webkit-center;
font-variant-caps: small-caps;
font-size: 20px;
color: #f75413;
}

.page-is-off .page-is-off-down-text {
text-align: -webkit-center;
margin-top: 5px;
font-weight: 400;
color: #000000;
font-variant-caps: small-caps;
}
.user_id_status {
padding: 10px;
background: #fff;
border-radius: 5px;
border: 2px outset #484bfc;
}

.user_id_status .id_in_process .id_in_process_clock img{
width: 200px;
}

.user_id_status .id_in_process {
text-align: center;
}

.user_id_status .id_in_process .id_in_process_text {
font-weight: 800;
color: #484bfc;
font-variant: small-caps;
font-size: 20px;
}

.user_id_status .id_in_process .in_id_process_des {font-variant-caps: small-caps;font-weight: 400;}

svg.menu-after{
transform: scale(-1, -1) translate(0px, 0px);
fill: #fff;
position: absolute;
bottom: calc(100% - 2px);
right: 0px;
outline: #000;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( -1px 6px 3px #c5c5c5);
}

i.heart-pink {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(../../icons/heart-pink.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.post-comments .comment-reply {
background: #fff;
padding: 10px;
border: 1px solid #c1b8b8;
border-radius: 0px 0px 5px 5px;
border-top: 0px;
}

.post-comments .comment-reply .comment-reply-post {
padding: 10px;
background: #eee;
border-radius: 5px;
}

.post-comments .comment-reply .comment-reply-post font.replt-author-text {
font-weight: 700;
}

.post-comments .comment-reply .comment-reply-post font.replt-author {
font-weight: 800;
color: blue;
}

.post-comments .comment-reply .comment-reply-post .comment-reply-post-msg {
margin-top: 10px;
}

.post-comments .comment-reply .comment-reply-form {
margin-top: 10px;
}

.post-comments .comment-reply .comment-reply-form .comment-reply-input-form {
padding: 10px;
width: 100%;
border: 1px solid #aaa;
border-radius: 5px;
height: 42px;
}

.comment-reply-send {
margin-top: 15px;
text-align: -webkit-center;
}

.post-comments .comment-reply .comment-reply-form button.comment-reply-send-btn {
width: 100%;
padding: 15px;
background: #1042bf;
color: #fff;
font-weight: 800;
border-radius: 5px
;border: 0px;
}

.post-comments .comment-reply .comment-reply-form button.comment-reply-send-btn i {
float: left;
display: block;
width: 50px;
height: 50px;
line-height: 48px;
text-align: center;
background-color: rgb(0 0 0 / 26%);
margin-left: -15px;
margin-top: -15px;
margin-right: -30px;
margin-bottom: -20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 20px;
}
.saved_posts .aboutdivon {
text-align: center;
padding: 10px;
margin-bottom: 25px;
}

.saved_posts .aboutdivon font.aboutdivonfont {
font-size: 20px;
font-weight: 700;
padding: 5px;
border-bottom: 1px solid;
color: #000;
}

.saved_posts {
background: #fff;
padding: 20px 10px;
border-radius: 10px;
overflow: hidden;
}

.saved_posts .user_posts .user_post {
padding-bottom: 10px;
margin-top: 10px;
border-bottom: 2px solid #eee;
}

.saved_posts .user_posts {
margin: 0 -5px 0 -5px;
}

.saved_posts .user_posts .user_post:last-child {
border-bottom: 0px !important;
}
.comment-send-section {
background: #fff;
padding: 10px;
border: 1px solid #0089ff;
}

.comment-send-section textarea.comment-textarea {
width: 100%;
padding: 10px;
border: 1px solid #aaa;
}


.comment-send-section .comment-send-section-sendbtn {
margin-top: 5px;
padding-top: 10px;
overflow: hidden;
}

.comment-send-section-sendbtn button.commentbtn {
float: right;
padding: 6px 12px;
background: #0089ff;
color: #fff;
border: #0089ff;
border-radius: 5px;
}


.comment-send-section textarea.comment-textarea:focus {
outline: none !important;
border: 1px solid #0092ff;
}

.comment-send-section-sendbtn .bbcodes-titles {
overflow: hidden;
margin-left: 5px;
float: left;
margin-top: 5px;
}

.comment-send-section-sendbtn .bbcodes-titles .bbcode-title {
float: left;
margin-right: 15px;
}
.story-upload-form .story-upload-inside-form .story-upload-inside-form-group-input textarea.story-form-input {
width: 100%;
height: 40px;
margin-top: 5px;
background-color: #f9f9f900;
border: 1px solid #ccd0d500;
padding: 4px 0px 0px 10px;
outline: none;
display: block;
resize: vertical;
border-radius: 0px;
box-shadow: none;
-webkit-box-shadow: none;
}
.shoutpost .postreacts .timing i {
color: #636262;
margin-right: 5px;
font-size: 11px;
display: block;
float: left;
}

.shoutpost .postreacts .timing {    
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #636262;
white-space: nowrap;
text-shadow: 0 0 1px #a1a1a1;
display: flex;
align-items: center;
margin-top: 3px;
}

.postreacts .comments-count {
font-variant: small-caps;
color: #636262;
margin-left: auto;
font-size: 12px;
font-weight: 600;
}

.shoutpost .username img {
max-width: 20px;
max-height: 20px;
margin-top: -5px;
}
.user_profile .user_first_info .online-status-prof {
background-color: #e91e63;
color: #ffffff;
text-align: -webkit-left;
position: absolute;
height: 30px;
margin-top: -45px;
max-width: 30%;
padding: 5px;
border-radius: 5%;
box-shadow: 0px 0px 5px 0px #8d8d8d;
right: 10px;
overflow: hidden;
width: 85px;
text-align: -webkit-center;
}

.user_profile .user_first_info .online-status-text-prof {
font-weight: 700;
font-variant: small-caps;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
margin-right: 5px;
margin-left: 5px;
}
.online-status-text-prof img {
width: 10px;
margin-top: 0px;
}
.help-center .help-questions .help-question .help-question-ans .step-help-answer-text img {
width: 100%;
border: 2px solid #673ab7;
border-radius: 5px;
margin-top: 10px;
}

.help-center .help-questions .help-question .help-question-ans .step-help-answer-text {
font-weight: 800;
font-variant: small-caps;
}
.shoutpost .post-content .edited-text {
font-weight: 800;
font-size: 12px;
padding: 10px 10px 0px 10px;
border-top: 1px solid #eee;
margin: 0px -10px;
margin-top: 10px;
color: #747474;
font-variant: small-caps;
}
.about_us_users {
background: #fff;
padding: 10px;
border-radius: 5px;
border: 2px solid #9d00ff;    
overflow: hidden;
}
@media (min-width: 576px) { 
.about_us_users  .about_us_users_user{
width: 45%;
float: left;
margin: 2.5%;
}
}

.about_us_users .about_us_users_title {
text-align: -webkit-center;
padding: 0px;
margin-bottom: 15px;
}

.about_us_users .about_us_users_title font.about_us_users_title_font {
padding: 5px;
border-bottom: 2px solid #9d00ff;
font-weight: 1000;
font-variant-caps: small-caps;
font-size: 17px;
color: #9d00ff;
}

.about_us_users 
.about_us_users_user .about_us_users_back_info {
background: url("../../icons/about_us_back.jpg");
background-size: 100% 100%;
clip-path: ellipse(80% 150px at center top);
object-fit: cover;
padding: 40px 10px;
position: relative;
z-index: 9;
border-radius: 10px 10px 0px 0px;
height: 160px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: -webkit-center;
}

.about_us_users 
.about_us_users_user {
border-radius: 12px;
box-shadow: 0px 0px 5px 0px #aaa;
margin-bottom: 20px;
}

.about_us_users .about_us_users_user .about_us_users_user_infos_links .about_us_users_back_info_location {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: nowrap;
justify-content: center;
margin-top: 5px;
color: #000;
font-weight: 700;
}

.about_us_users .about_us_users_user .about_us_users_user_infos_links .about_us_users_back_info_location .about_us_users_back_info_location_icon {
margin-right: 5px;
margin-top: -1px;
}

.about_us_users .about_us_users_user .about_us_users_user_infos_links .about_us_users_back_info_name {
color: #000;
font-weight: 800;
}


.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_avatar img {
width: 80px;
height: 80px;
border-radius: 20px;
box-shadow: 5px 0px 10px 0px deeppink, -5px 0px 10px 0px #454dfb;
background: #fff;
}

.about_us_users 
.about_us_users_user .about_us_users_user_infos {
background: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: center;
align-items: center;
margin-top: -40px;
padding: 10px 0px;
position: relative;
}

.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_followers {
text-align: -webkit-center;
color: #454dfb;
}

.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_following {
text-align: -webkit-center;
color: deeppink;
}

.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_followers .about_us_users_user_infos_followers_count {
font-weight: 900;
}

.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_followers .about_us_users_user_infos_followers_name {
font-weight: 800;
font-size: 12px;
}

.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_following .about_us_users_user_infos_following_count {
font-weight: 900;
}

.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_following .about_us_users_user_infos_following_name {
font-weight: 800;
font-size: 12px;
}

.about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_avatar {
position: relative;
z-index: 10;
}

.about_us_users 
.about_us_users_user .about_us_users_user_infos_links {
display: flex;
justify-content: center;
clip-path: ellipse(110% 120% at 50% 100%);
padding-top: 25px;
padding-bottom: 10px;
border-radius: 100% 100% 15px 15px;
margin-top: -25px;
flex-direction: column;
align-items: center;
box-shadow: inset 0px 4px 10px rgb(255 20 157 / 25%);
}

.about_us_users .about_us_users_user .about_us_users_back_info .about_us_users_back_info_title {
color: #fff;
font-weight: 800;
font-variant: small-caps;
}
.about_us_users .about_us_users_user:hover {
box-shadow: 0px 0px 20px 0px #aaa;
}

.contact_us_support .contact_us_support_sec .contact_us_support_sec_icon svg {
width: 40px;
height: 40px;
}

.contact_us_support {
padding: 10px;
background: #f8f8f8;
margin: 10px;
border-radius: 10px;
box-shadow: 0px 0px 2px 0px;
margin-bottom: 20px;
}

.contact_us_support .contact_us_support_title {
font-weight: 700;
font-size: 12px;
color: #878787;
text-shadow: 0 0 black;
}

.contact_us_support .contact_us_support_sec {
overflow: hidden;
margin-top: 20px;
}

.contact_us_support .contact_us_support_sec .contact_us_support_sec_icon {
float: left;
margin-right: 5px;
margin-top: -2.5px;
}

.contact_us_support .contact_us_support_sec .contact_us_support_sec_name {
font-weight: 700;
font-size: 12px;
color: #878787;
text-shadow: 0 0 black;
}

.contact_us_support .contact_us_support_sec .contact_us_support_sec_des {
font-size: 12px;
color: #878787;
text-shadow: 0 0 black;
}

.contact_us_form {
padding: 10px;
margin: 10px;
background: #fff;
box-shadow: 0px 0px 2px 0px;
border-radius: 5px;
overflow: hidden;
}

.contact_us_form .contact_us_form_input .contact_us_form_input_type .contact_us_form_input_type_cls {
padding: 5px 5px!important;
width: 100%!important;
border: 1px solid #9f9f9f !important;
margin-top: 5px;
border-radius: 5px;
}

.contact_us_form .contact_us_form_input.contactright {
float: left;
width: 50%;
}

.contact_us_form .contact_us_form_input {
margin-bottom: 10px;
}

.contact_us_form .contact_us_form_input .contact_us_form_input_title {
font-weight: 700;
font-size: 12px;
}

.contact_us_form .contact_us_form_input button.contact_us_form_input_btn {
width: 100%;
background: #5457ff;
padding: 10px;
color: #fff;
font-weight: 700;
border: 0px;
border-radius: 5px;
margin-top: 10px;
}

.contact_us_form .contact_us_form_title {
font-weight: 700;
font-size: 12px;
color: #878787;
text-shadow: 0 0 black;
border-bottom: 1px solid;
padding: 10px 10px;
margin: 0px -10px;
margin-bottom: 15px;
margin-top: -10px;
}
.help-center .help-questions .help-question .help-question-ans .step-question-answer .madeby-help-ff .madeby-help-f {
padding: 5px 10px;
background: black;
color: #fff;
font-weight: 700;
border-radius: 5px;
display: inline-block;
box-shadow: inset 0px 0px 7px 0px #ffffff;
}

.help-center .help-questions .help-question .help-question-ans .step-question-answer .madeby-help-ff {
overflow: hidden;
text-align: -webkit-center;
width:100%;
padding: 5px;
}
.user_powers .user_powers_category input.userpowersmerit {
padding: 8px;
width: 100%;
margin-top: 9px;
border: 2px solid #aaa;
border-radius: 5px;
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form select {
width: 100%;
padding: 10px!important;
border: 1px solid #d1d1d1;
border-radius: 5px!important;
color: #767676!important;
font-weight: 600;
background: rgb(255 255 255 / 30%)!important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.user-form .inside-user-form .all-inputs-user-form .input-user-form select:focus {
outline:none;
}
.menuopen .optns .optn.orangecolor {
color: orangered;
}
.users_reports {
background: #fff;
padding: 10px;
border: 2px solid;
border-radius: 10px;
}

.users_reports .users_reports_title {
text-align: -webkit-center;
padding: 10px;
}

.users_reports .users_reports_title font.users_reports_title_font {
font-weight: 900;
font-variant-caps: small-caps;
font-size: 18px;
}

.users_reports .users_reports_users {
padding: 10px;
border: 1px solid;
box-shadow: inset 0px 0px 4px 0px;
border-radius: 5px;
}

.users_reports .users_reports_users .users_reports_users_user {
border: 1px solid;
box-shadow: inset 0px 0px 4px 0px;
border-radius: 5px;
margin-bottom: 10px;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_title font.users_reports_user_title_font {
font-weight: 900;
font-variant: small-caps;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_title {
text-align: -webkit-center;
padding: 15px;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos {
overflow: hidden;
padding: 10px;
margin: 5px;
border: 1px solid #eee;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ques {
float: left;
font-weight: 700;
width: 40%;
text-shadow: 0 0 red;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans {
float: left;
font-weight: 800;
width: 60%;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans a {
text-decoration: underline;
}
.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_danger {
padding: 10px;
background: red;
box-shadow: inset 0px 0px 5px 0px #000;
text-align: -webkit-center;
color: #fff;
font-variant-caps: small-caps;
font-weight: 900;
border-radius: 4px 4px 0px 0px;
}
.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans .users_reports_users_user_info_ans_attachts .users_reports_users_user_info_ans_attachs_attach img {
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 5px;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans .users_reports_users_user_info_ans_attachts {width: 100%;overflow: auto;white-space: nowrap;display: flex !important;flex-direction: row !important;}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans .users_reports_users_user_info_ans_attachts .users_reports_users_user_info_ans_attachs_attach {
margin: 5px;
margin-left: 0px;
}
.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans button.users_reports_users_user_info_ans_attend {
overflow: hidden;
padding: 4px 13px;
background: #2196F3;
color: #fff;
border: 0px;
border-radius: 5px;
float: right;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans .users_reports_users_user_info_ans_attend_icon {
float: left;
margin-right: 2px;
margin-top: 2px;
}

.users_reports .users_reports_users .users_reports_users_user .users_reports_users_user_infos .users_reports_users_user_info_ans .users_reports_users_user_info_ans_attend_text {
float: left;
font-weight: bolder;
font-variant-caps: small-caps;
font-size: 15px;
letter-spacing: 1px;
}

.level_info {
padding: 10px;
background: #fff;
border: 2px solid #673AB7;
border-radius: 5px;
}

.level_info .title_level_info {
padding: 5px;
text-align: -webkit-center;
}

.level_info .title_level_info font.title_level_info_font {
border-bottom: 2px solid #673AB7;
padding: 5px;
font-weight: 900;
font-variant: small-caps;
font-size: 17px;
color: #673AB7;
}

.level_info .level_infos .level_infos_info {
overflow: hidden;
padding: 15px;
font-weight: 800;
margin: 10px -10px;
margin-bottom: -10px;
}

.level_info .level_infos .level_infos_info .right_level_info {
float: right;
width: 50%;
text-align: -webkit-right;
}

.level_info .level_infos .level_infos_info .left_level_info {
float: left;
width: 50%;
}

.level_info .level_infos .level_infos_info:nth-child(2) {
background: #9C27B0;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(3) {
background: #3F51B5;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(4) {
background: #2196F3;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(5) {
background: #009688;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(6) {
background: #4CAF50;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(7) {
background: #e91e63;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(8) {
background: #ff7600;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(9) {
background: #ff00e0;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(10) {
background: #FF5722;
color: #fff;
}

.level_info .level_infos .level_infos_info:nth-child(11) {
background: #ff0000;
color: #fff;
border-radius: 0px 0px 3px 3px;
}

.level_info .level_infos .level_infos_info:nth-child(1) .left_level_info {
border-right: 1px solid;
}
.user_messangers .messanger_sendarea  .private_div {
padding: 20px 5px;
text-align: -webkit-center;
background: #fff;
width: 100%;
font-weight: 800;
font-variant: small-caps;
}
.shop_titles {
padding: 10px;
background: #fff;
border: 1px solid #adadad;
border-radius: 10px;
}

.shop_titles .shop_titles_text {
text-align: center;
padding: 10px;
}

.shop_titles .shop_titles_text font.shop_titles_text_font {
padding: 10px;
font-weight: 900;
font-size: 20px;
border-bottom: 2px solid;
font-variant-caps: small-caps;
}

.shop_titles .shop_titles_all {
overflow: hidden;
margin-top: 20px;
}

.shop_titles .shop_titles_all .shop_title {
float: left;
width: 45%;
padding: 3%;
box-shadow: 0px 0px 5px 0px #d1d1d1;
margin: 2%;
border-radius: 5px;
}

.shop_titles .shop_titles_all .shop_title .shop_title_top {
text-align: -webkit-center;
padding: 5px;
}

.shop_titles .shop_titles_all .shop_title .shop_title_name {
padding: 5px 0px;
font-size: 12px;
font-weight: 700;
text-align: -webkit-center;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.shop_titles .shop_titles_all .shop_title  .shop_title_btn {
text-align: -webkit-center;
margin-top: 10px;
}

.shop_titles .shop_titles_all .shop_title 
button.shop_title_buy_btn {
padding: 2px 19px;
background: #673ab7;
color: #fff;
font-weight: 700;
border: 0px;
border-radius: 5px;
font-size: 13px;
}

.shop_titles .shop_titles_all .shop_title 
.shop_title_price {
padding: 5px 0px;
font-size: 12px;
font-weight: 700;
text-align: -webkit-center;
font-family: math;
}
.users_shop {
padding: 10px;
background: #fff;
border: 1px solid #000;
border-radius: 5px;
}

.users_shop .users_shop_title font.users_shop_title_font {
padding: 10px;
font-weight: 900;
font-size: 20px;
border-bottom: 2px solid;
font-variant-caps: small-caps;
}

.users_shop .users_shop_title {
text-align: -webkit-center;
padding: 10px;
}

.users_shop .user_shop {
margin-top: 20px;
}

.users_shop .user_shop .user_shop_hey {
margin-left: 5%;
font-weight: 800;
font-size: 16px;
}

.users_shop .user_shop .user_shop_con {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
margin-top: 15px;
}

.users_shop .user_shop .user_shop_con .user_shop_div {background: #000;padding: 5%;margin: 5%;width: 40%;color: #fff;border-radius: 10px;}

.users_shop .user_shop .user_shop_con .user_shop_div .user_shop_div_icon {
float: right;
}

.users_shop .user_shop .user_shop_con .user_shop_div .user-shop_div_text {
margin-top: 30px;
text-align: -webkit-center;
font-variant: small-caps;
font-weight: 700;
}

.users_shop .user_shop .user_shop_note {
margin: 5%;
padding: 2%;
border: 1px solid #ff0000;
font-weight: 700;
border-radius: 5px;
color: #ff0000;
text-shadow: 0 0 0px black;
font-variant: small-caps;
}
.users_shop .user_shop .user_shop_form {
padding: 5%;
}

.users_shop .user_shop .user_shop_form .user_shop_input {
margin-bottom: 20px;
}

.users_shop .user_shop .user_shop_form .user_shop_input_title {
font-weight: 900;
}

.users_shop .user_shop .user_shop_form .user_shop_input input {
padding: 8px;
width: 100%;
margin-top: 10px;
border: 1px solid #000;
border-radius: 5px;
}

.users_shop .user_shop .user_shop_form button.user_shop_form_btn {
overflow: hidden;
padding: 7px 15px;
background: #3F51B5;
color: #fff;
font-weight: 600;
border: 1px solid;
border-radius: 5px;
}

.users_shop .user_shop .user_shop_form .user_shop_form_btn_icon {
float: left;
margin-right: 5px;
}

.users_shop .user_shop .user_shop_form .user_shop_form_btn_name {
float: left;
}

.users_shop .user_shop .user_shop_form .user_shop_input_price {
color: red;
padding: 5px;
border: 1px solid;
font-weight: 900;
margin-bottom: 15px;
border-radius: 2px;
margin-top: -15px;
}

.users_shop .user_shop  .user_shop_info {
margin: 5%;
padding: 2%;
border: 1px solid #4CAF50;
font-weight: 700;
border-radius: 5px;
color: #4CAF50;
text-shadow: 0 0 0px black;
font-family: cursive;
}
.css-1ww4d3g {
border-radius: 10px;
}

.css-1nit0ig {
border-radius: 10px;
}
.post_reply_inbox {
padding: 10px;
border: 1px solid blue;
margin-bottom: 15px;
border-radius: 5px;
display: block !important;
animation: showHide 0.3s ease-in-out;
}

.post_reply_inbox .post_reply_inbox_text {
text-align: -webkit-center;
margin-bottom: 10px;
padding: 10px;
border-bottom: 1px solid #5878f7;
margin-top: -10px;
}

.post_reply_inbox .post_reply_inbox_msg {
padding: 10px 6px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.post_reply_inbox .post_reply_inbox_text font.post_reply_inbox_text_font {
font-variant: small-caps;
font-weight: 800;
font-size: 16px;
color: #5878f7;
}

.post_reply_inbox .post_reply_inbox_msg font.post_reply_inbox_msg_font {
color: #5878f7;
font-weight: 800;
}
.user_messanger .user_message.rec .reply-btn {
left: 100%;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
position: absolute;
color: #fff;
font-size: 15px;
padding: 1px 4px;
border-radius: 50px;
margin-left: 10px;
}

.user_messanger .user_message.sen .reply-btn {
right: 100%;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
position: absolute;
color: #fff;
font-size: 15px;
padding: 1px 4px;
border-radius: 50px;
margin-right: 10px;
}

.user_messanger .user_message .reply-btn:hover {
background: #fff!important;
color: #000!important;
}
.user_messanger .user_message .replymsg {
padding: 10px;
margin: -10px;
background: #0000003b;
margin-bottom: 10px;
border-radius: 5px;
border-left: 5px solid #fff;
min-width:100px;
}

.user_messanger .user_message .replymsg_author {
font-weight: 700;
margin-bottom: 5px;
margin-top: -5px;
}

.user_messanger .user_message .replymsg_msg {
margin-bottom: -5px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.user_messanger .user_message.rec .replymsg {
background: #00000014;
border-left: 5px solid #333;
color: #333;
}
.post_reply_inbox  .post_reply_inbox_author {
padding: 10px 6px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
color: #5878f7;
font-weight: 600;
}

.post_reply_inbox  font.post_reply_inbox_author_font {
font-weight: 800;
}

.post_reply_inbox .post_reply_inbox_text .post_reply_inbox_text_cross {
color: #5878f7;
float: right;
font-size: 15px;
}

.user-searching {
margin-top: 50px;
}

.user-searching .main-search-area {
text-align: -webkit-center;
padding: 20px;
border-radius: 5px;
background: #fff;
}

.user-searching .main-search-area .main-text-line {
font-weight: 800;
font-size: 25px;
font-variant-caps: small-caps;
}

.user-searching .main-search-area .main-second-line {
margin-top: 10px;
padding: 0px 45px;
color: #8f8e8e;
font-weight: 500;
}

.user-searching .main-search-area .search-input input.user-search-info {
width: 100%;
padding: 12px;
box-shadow: 0px 0px 10px 0px #aaa;
border: none;
border-radius: 5px;
}

.user-searching .main-search-area .search-input {
margin-top: 20px;
}

.user-searching .main-search-area  .search-btn {
margin-top: 20px;
}

.user-searching .main-search-area .search-btn button.search-btn-info {
width: 100%;
padding: 13px 10px;
background: #1e4efd;
color: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: space-around;
align-items: stretch;
border-radius: 5px;
border: 0px;
font-weight: 700;
}

.user-searching .main-search-area .search-btn button.search-btn-info i {margin-right: 10px;}

.user-searching .second-section-search {
margin-top: 20px;
padding: 15px;
text-align: -webkit-center;
border-bottom: 2px solid #eee;
background: #fff;
}
.user-searching .second-section-search font.current-search-query {
border-bottom: 2px solid #1e4efd;
padding: 5px;
font-weight: 700;
}

.search-results .search_user .search_user_avatar img {
width: 40px;
height: 40px;
border-radius: 100%;
border: 1px solid #eee;
}

.search-results .search_user {
padding: 10px;
overflow: hidden;
border-bottom: 2px solid #eee;
background: #fff;
}

.search-results .search_user .search_user_avatar {
float: left;
margin-right: 10px;
}

.search-results .search_user .search_user_right {
float: right;
color: #1e4efd;
margin-top: -30px;
font-size: 20px;
}

.search-results .search_user .search_user_name {
font-weight: 800;    
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 75%;
}

.search-results .search_user .search_user_uname {
font-size: 13px;
color: #8d8b8b;
font-weight: 600;    
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 75%;
} 
.search-results .total-recirds {
padding: 10px;
text-align: -webkit-center;
font-weight: 800;
font-variant-caps: small-caps;
border-radius: 0px 0px 10px 10px;
background: #fff;
}
.refferel_link_div {
padding: 5px;
border: 2px solid blueviolet;
border-radius: 5px;
color: blueviolet;
font-variant: small-caps;
}

.refferel_link_div .referral_link_text {
font-weight: 800;
margin: 5px;
}


.refferel_link_div .referrel_link_link {
margin: 2px;
margin-top: 10px;
}

.refferel_link_div .referrel_link_link input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 2px outset #8400ff;
font: small-caption;
}




/* Dark Mode Code */

div.content-darkmode .using-mode {
background: #000000;
color: #fff;
}

div.content-darkmode .titlenew a.partlinks, div.content-darkmode .titlenew a.lpartlinks {
background: #121212;
color: #ffffff;
border: 2px solid #bf006c;
}

div.content-darkmode .stories font.divstoryname {
color: #eee;
border-bottom: 1px solid #555555;
}

div.content-darkmode .stories .story .msimage {
border: #6d7284;
}

div.content-darkmode .stories .story .ustory img {border: 2px solid #262626;}
div.content-darkmode .stories .story .mstory img {
border: 2px solid #262626;
}

div.content-darkmode .stories .story .mstory font.stext, div.content-darkmode .stories .story .ustory font.stext , div.content-darkmode .shout-links .shout-link .shout-link-name, div.content-darkmode .shoutpost .postmenu i {
color: #fff;
}

div.content-darkmode div#partrefresh {
border-bottom: 2px solid #bf006c;
}

div.content-darkmode .shout-links .shout-link {
background: #121212;
}

div.content-darkmode .shout-links .shout-link .shout-link-icon i {
color: #7e7d7d;
}

div.content-darkmode .shout-links .shout-link.activelink .shout-link-icon i {
color: #fff;
}

div.content-darkmode  .shoutpostsend {
background: #233541;
border: 2px solid #007fe9;
}

div.content-darkmode .shoutpostsend .divshoutname div {
background: #233541;
}

div.content-darkmode  textarea.shouttextarea {
border: 1px solid #005195;
}

div.content-darkmode  .typeshout {
border-bottom: 3px solid #005ba6 !important;
border-top: 3px solid #005ba6 !important;
border-left: 3px solid #005ba6 !important;
}

div.content-darkmode .shoutpostsend .sendbtn button {
background: #006ec9;
color: #dadada;
}

div.content-darkmode .shoutpostsend .moreshoutoptions .shoutoption {
background: #121212;
color: #008bff;
}


div.content-darkmode .shoutpost {
background: #121212;
border: 1px solid #625d5d;
}

div.content-darkmode .shoutpost .post-content .text {
color: #fff;
}

div.content-darkmode .shoutpost .username a {
color: #528cc6 !important;
}

div.content-darkmode .shoutpost .post-quoted .qpostmsg {
color: #d3d3d3;
}

div.content-darkmode .shoutpost .post-quoted .repltingto {
border-bottom: 2px solid #625d5d;    
color: #aaa;
}

div.content-darkmode .shoutpost .post-quoted .qpostc {
color: #fff;
}

div.content-darkmode .shoutpost .post-quoted .qposttime {
color: #d8d8d8;
background: #121212;
box-shadow: 0px 0px 0px 0px;
}


div.content-darkmode .shoutpost .postreacts .timing, div.content-darkmode .shoutpost .postreacts .timing i {
color: #c9c8c8;
}

div.content-darkmode .shoutpost .post-quoted {
border: 1px solid #625d5d!important;
}

div.content-darkmode .shoutpost .postreacts {
border-top: 1px solid #625d5d;
background: #121212;
}

.postfooter {}

div.content-darkmode .shoutpost .postfooter .linker {
border-top: 1px solid #625d5d;
border-right: 1px solid #625d5d;
color: #dfdfdf;
}

div.content-darkmode .shoutpost .postfooter .linker .linkname {
color: #dfdfdf;
}

div.content-darkmode .shoutpost .userpic img {
color: #fff;
border: 1px solid #383838;
}

div.content-darkmode .pageprag {
background: #282828;
border: 1px solid #5a3f63;
}

div.content-darkmode .pageprag ul.ulprag {
border-top: 1px solid #5a3f63;
}

div.content-darkmode .shoutpost .postreacts .timing, div.content-darkmode .shoutpost .count {
color: #b5b5b5;
}

div.content-darkmode .using-mode .other-btns button.Go.to.Free {
border: 1px solid #5e5e5e;
}
div.content-darkmode .shoutpost .postfooter .linker:last-child {
border-top: 1px solid #625d5d;
border-right: 0px;
color: #dfdfdf;
}

div.content-darkmode {
background: #262627 !important;
}

div.content-darkmode .user_messanger .user_message_navi_prev {
background: #121212;
border: 2px solid #4256ab;
border-right: 2px solid #6a6a6a;
}

div.content-darkmode .user_messanger .user_message.rec {
background: #2a2a2a;
color: #dbdbdb;
}

div.content-darkmode .user_messangers .messanger_sendarea {
background: #161618;
}

div.content-darkmode .user_messangers .messanger_sendarea .messanger_form {
background: #272c3b;
}

div.content-darkmode .user_messangers .messanger_sendarea .messanger_form textarea#messanger_textarea {
background: #272c3b;
color: #dbdbdb;
}
div.content-darkmode .user_profile .user_first_info {
background: #121212;
}

div.content-darkmode .user_profile .user_first_info .user_name {
color: #dbdbdb;
}

div.content-darkmode .user_profile .user_followers_info {
background: #121212;
}

div.content-darkmode .user_profile .user_gifts_info {
background: #121212;
}

div.content-darkmode .user_profile .user_followers_info font.aboutdivonfont {
color: #dfdfdf;
border-bottom: 0px;
}

div.content-darkmode .user_profile .user_gifts_info font.aboutdivonfont {
color: #dfdfdf;
border-bottom: 0px;
}

div.content-darkmode .user_profile .user_followers_info .user_followerrs .user_follower_dp img {
border: 1px solid #595959;
}

div.content-darkmode .user_profile .user_gifts_info .user_followerrs .user_follower_dp img {
border: 1px solid #595959;
}

div.content-darkmode .user_profile .user_followers_info .user_followerrs .user_follower_name {
color: #fdfdfd;
}

div.content-darkmode .user_profile .user_information {
background: #121212;
}

div.content-darkmode .user_profile .user_information .user_iabout {
background: #121212;
color: #dfdfdf;
border-bottom: 2px outset #959595;
}

div.content-darkmode .user_profile .user_information .user_iabout font.aboutdivonfont {border-bottom: 1px solid #4f4f4f;}

div.content-darkmode .user_profile .user_information .user_infos {
background: #121212;
}

div.content-darkmode .user_profile .user_information .user_infos .user_info_about {
color: #f8f8f8;
}

div.content-darkmode .user_profile .user_information .user_infos .user_info .user_info_row {
color: #fff;
}
div.content-darkmode .user_controls {
background: #121212;
}

div.content-darkmode .myintro {
border: 1px solid #3d3d3d;
color: #dcdcdc;
}

div.content-darkmode .user_menu_progress {
background: #222324;
}

div.content-darkmode .user_controls .show_controlss .show_controls i {
box-shadow: 0px 0px 0px 0px;
}

div.content-darkmode .user_controls .show_controlss .show_controls .controls_name {
color: #fff;
}


div.content-darkmode .user_controls .user_controls_aboutdiv font.fontuser_controls_aboutdiv {
color: #fff;
border-bottom: 2px solid #343434;
}

div.content-darkmode .user_controls .show_controlss .show_controls {
border-bottom: 1px solid #333333;
}
div.content-darkmode .user_onlines {
background: #121212;
}

div.content-darkmode .user_onlines .aboutdivon font.aboutdivonfont {
color: #fff;
border-bottom: 1px solid #505050;
}

div.content-darkmode .user_onlines .user_online {
background: #121212;
box-shadow: 0px 0px 10px 0px #303030;
}

div.content-darkmode .user_onlines .user_online a {
color: #fff!important;
}

div.content-darkmode .user_onlines .user_online .user_online_status img {
background: #1e1f1e;
box-shadow: 0px 0px 4px 0px #45d831, 0px -1px 0px 5px #1e1f1e;
}

div.content-darkmode .user_onlines .user_online .user_online_dp img {
box-shadow: 0px 0px 4px 0px #45d831, 0px -1px 0px 5px #1e1f1e;
}

div#content {
background: #eeeeeea3;
}
.user_messangers .user_message_notic {
margin-bottom: 34px;
padding: 10px;
width: 75%;
background: #fff3bf;
font-size: 10px;
font-weight: 700;
font-variant: all-small-caps;
border-radius: 10px;
}

.user_messangers .user_message_notic i {
font-size: 7px;
margin-right: 5px;
}
div.content-darkmode .web-footer .foot-inside .country-flag {
background: #121212;
}

div.content-darkmode .web-footer {background: #272727;}

div.content-darkmode .web-footer .foot-inside .foot-options .foot-option img {
background: #121212;
}
div.content-darkmode .user_profile {
background: #272727;
}
.jumma_mubarak {
background: #fff;
text-align: -webkit-center;
border: 2px solid deeppink;
border-radius: 5px;
}

.jumma_mubarak .jumma_mubarak_title {
padding: 10px;
border-bottom: 2px solid deeppink;
font-variant: small-caps;
font-weight: 900;
}

.jumma_mubarak .jumma_mubarak_img img {
width: 100%;
}

.jumma_mubarak .jumma_mubarak_ayat {
padding: 10px;
text-align: left;
font-variant: small-caps;
font-weight: 800;
}

.jumma_mubarak .jumma_mubarak_img {
border-bottom:  2px solid deeppink;
}

.birthdaywish {
padding: 10px;
background: #fff;
text-align: center;
overflow: hidden;
border-radius: 10px;
width: 100%; /* full width */
box-sizing: border-box; /* include padding in width */
position: relative;
}

.birthdaywish  .backstyle {
border-radius: 5px;
padding: 10px;
border: 1px solid #f41b2a;
position: relative;
background: #fff;
max-width: 400px; /* keeps content from stretching too wide */
margin: 0 auto; /* centers backstyle within birthdaywish */
}

.birthdaywish .backstyle img.wishbaloon {
width: 100%;
background: #fff;
display: block;
border-radius: 5px;
}

.birthdaywish  .backstyle img.birthcake {
width: 50%;
max-width: 150px;
background: #fff;
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
border-radius: 50px;
}

.birthdaywish .topwish {
text-align: center;
padding: 10px;
background: #fff;
border-radius: 5px;
margin-top: 0;
}

.birthdaywish .shadow-user {
font-size: 20px;
font-family: cursive;
}

.birthdaywish .shadow-user.bold {
display: block;
margin-top: 10px;
font-variant: petite-caps;
font-weight: 900;
}

.birthdaywish .shadow-user.bold a {
border-bottom: 1px solid;
padding: 5px;
text-decoration: none;
}

.birthdaywish .more {
padding: 5px 10px;
margin: 20px auto;
background: #9d00ff;
color: #fff;
font-weight: 600;
border-radius: 50px;
border: 1px solid #9d00ff;
cursor: pointer;
display: block;
}

@media (max-width: 600px) {
.birthdaywish  .backstyle {
max-width: 100%;
padding: 5px;
}
.birthdaywish .backstyle img.birthcake {
width: 60%;
max-width: none;
top: 60px;
}
}

div.content-darkmode .leftmenu-web {
background: #1f1f1f;
border-right: 1px solid #575757;
}


div.content-darkmode .leftmenu-web .links-webinfo .link-webingo {
color: #fff;
}

div.content-darkmode .rightmenu-web {
background: #1f1f1f;
border-left: 1px solid #575757;
}

div.content-darkmode .rightmenu-web .people-sgst {
background: #121212;
}

div.content-darkmode .web-content {
background: #262626;
}

div.content-darkmode .rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-name,div.content-darkmode  .rightmenu-web .people-sgst .peoples-sgsted .people-sgsted .people-sgsted-uname {
color: #fff!important;
}

div.content-darkmode .rightmenu-web .people-sgst .people-sgsted-title {
color: #fff;
}

div.content-darkmode .rightmenu-web .people-sgst .peoples-sgsted .people-sgsted {
border-bottom: 1px solid #464646;
}

.user_messanger .user_message .fulltime_popup {
display: none;
position: relative;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 6px 10px;
font-size: 13px;
color: #333;
top: 25px;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 100;
right: 50px;
top: -5px;
}

.user_messanger .user_message.sen .fulltime_popup {
right: 50px;
}

.user_messanger .user_message.rec .fulltime_popup {
left: 50px;
}
.fulltime_toggle:checked ~ .fulltime_popup {
display: block !important;
}

div.content-darkmode .shoutpost .postreacts .comments-count {
color: #9e9d9d;
}
div.content-darkmode .web-content .about_us_users {
background: #121212;
border: 2px solid #913FA3;
}

div.content-darkmode .web-content .about_us_users .about_us_users_title font.about_us_users_title_font {
color: #e25eff;
border-bottom: 2px solid #983fab;
}

div.content-darkmode .web-content .about_us_users .about_us_users_user {
background: #121212;
box-shadow: 0px 0px 5px 0px #4f4f4f;
}

div.content-darkmode .web-content .about_us_users .about_us_users_user_infos {
background: #121212;
}

div.content-darkmode .web-content .about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_followers {
color: #637eff;
}

div.content-darkmode .web-content .about_us_users .about_us_users_user .about_us_users_user_infos .about_us_users_user_infos_following {
color: #eb009d;
}

div.content-darkmode .web-content .about_us_users .about_us_users_user .about_us_users_user_infos_links .about_us_users_back_info_location {
color: #fff!important;
}

div.content-darkmode .web-content .about_us_users .about_us_users_user .about_us_users_user_infos_links .about_us_users_back_info_name {
color: #ffff!important;
}
div.content-darkmode .web-content .policy {
background: #121212;
}

div.content-darkmode .web-content .policy .firsthead {
color: #dfdfdf;
border: 1px solid #373737;
}

div.content-darkmode .web-content .policy .lastupdate {
color: #d198ff;
border: 1px solid #373737;
}

div.content-darkmode .web-content .policy .abouting .about {
color: #d9d5d9;
}
div.content-darkmode .web-content .help-center .site-about {
background: #121212;
border: 1px solid #5d5f89;
}

div.content-darkmode .web-content .help-center .site-about .site-about-text font.site-about-text-font {
color: #d39cff!Important;
border-bottom: 2px solid #6e71ab!important;
}

div.content-darkmode .web-content .help-center .site-about .site-info .site-info-ques {
color: #989898;
}

div.content-darkmode .web-content .help-center .site-about .site-info .site-info-ans {
color: #dfdfdf;
}

div.content-darkmode .web-content .help-center .help-questions {
background: #121212;
border: 1px solid #444444;
}

div.content-darkmode .web-content .help-center .help-questions .help-questions-text font {
color: #dfdfdf;
border-bottom: 2px solid #575757;
}

div.content-darkmode .web-content .help-center .help-questions .help-question .help-question-ques {
color: #d9dfdf;
}

div.content-darkmode .web-content .help-center .help-questions .help-question .help-question-ans .step-question-answer .madeby-help-ff .madeby-help-f {
box-shadow: 0px 0px 0px 0px;
}

div.content-darkmode .web-content .help-center .help-questions .help-question .help-question-ans .step-help:before {
border-left: 15px solid #121212 !important;
}

div.content-darkmode .web-content .help-center .help-questions .help-question .help-question-ans .step-help-answer-text {
color: #dfdfdf;
}

div.content-darkmode .web-content .help-center .help-questions .help-question {
border-left: 1px solid #3f3f3f;
}
div.content-darkmode .web-content .policy .aboutfirst {
color: #dfdfdf;
border-bottom: 1px solid #3f3f3f;
}
div.content-darkmode .web-content .contact_us_support {
background: #202020;
border: 1px solid #535353;
}

div.content-darkmode .web-content .contact_us_form {
background: #121212;
}

div.content-darkmode .web-content .contact_us_form .contact_us_form_input .contact_us_form_input_title {
color: #dfdfdf;
}

div.content-darkmode .web-content .contact_us_form .contact_us_form_input .contact_us_form_input_type .contact_us_form_input_type_cls {
background: #3b3b3b;
color: #d2dfd2;
}
div.content-darkmode .web-content .inside-user-form {
background: #121212;
border-top: 2px solid #6d6d6d;
}

div.content-darkmode .web-content .user-form .inside-user-form .all-inputs-user-form .input-user-form-div .input-title-user {
color: #b1b1b1;
}

div.content-darkmode .web-content .user-form .inside-user-form .all-inputs-user-form .input-user-form .inputing-user-form {
background: #3b3b3b;
color: #b1b1b1;
border: 1px solid #858585;
}

div.content-darkmode .web-content .user-form .inside-user-form .all-inputs-user-form .dobbox-user-form select {
background: #3b3b3b!important;
color: #b1b1ad!important;
border: 1px solid #838383!important;
}

div.content-darkmode .web-content .user-form .inside-user-form .all-inputs-user-form .select-user-form {
color: #b1b1b1;
}

div.content-darkmode .web-content .user-form .inside-user-form .all-inputs-user-form label#male-gender-box, div.content-darkmode .web-content  label#female-gender-box, div.content-darkmode .web-content  label#single-status-box, div.content-darkmode label#married-status-box, div.content-darkmode label#widowed-status-box, div.content-darkmode .web-content  label#separated-status-box, div.content-darkmode .web-content  label#divorced-status-box {
background: #121212;
color: #b1b1b1;
}

div.content-darkmode .web-content .user-form .inside-user-form .user-profile-user-form img {
border: 2px solid #575757;
}

div.content-darkmode .web-content .user-form .inside-user-form .user-profile-user-form i {
border: 2px solid #575757;
}
div.content-darkmode .web-content .user-form div#mood-options label {
background: #121212;
color: #b1b1b1;
}

div.content-darkmode .web-content .shoutpost .post-content .text textarea.shoutmsgedit {
background: transparent;
}

div.content-darkmode .web-content .shoutpostsend .quotepost .pqauthrmsg {
color: #bbb;
}
div.content-darkmode .web-content .post-comments .post-comment-title {
background: #121212;
color: #dfdfdf;
border: 1px solid #343434;
}

div.content-darkmode .web-content .post-comments .post-comment-title font {
border: none;
}

div.content-darkmode .web-content .comment-send-section {
background: #121212;
border: 1px solid #024a8d;
}

div.content-darkmode .web-content .comment-send-section textarea.comment-textarea {
background: #3b3b3b;
color: #ffffff;
border: 1px solid #484848;
}

div.content-darkmode .web-content .comment-send-section-sendbtn .bbcodes-titles {
color: #dfdfdf;
}

div.content-darkmode .web-content .post-comments .comment-sections {
background: #121212;
color: #dfdfdf;
border: 1px solid #5a5555;
}

div.content-darkmode .web-content .post-comments .post-comments-are {
background: #121212;
border: 1px solid #555252;
}
div.content-darkmode .menuopen {
background: #121212;
}

div.content-darkmode .menuopen .optns .optn.orangecolor {
color: #e12a01;
}

div.content-darkmode .menuopen .optns .optn.bluevioletcolor {
color: #db79ff;
}

div.content-darkmode  .menuopen .optn:hover {
background: #282828;
}

div.content-darkmode .menuopen .optns .optn.blackcolor {
color: #f8f4f8;
}

div.content-darkmode .menuopen .optns .optn.bluecolor {
color: cornflowerblue;
}

div.content-darkmode .menuopen  svg.menu-after {
fill: #121212;
filter: drop-shadow(-1px 3px 3px #c5c5c5);
}
div.content-darkmode .post-comments .post-comments-are .post-comment {
background: #121212;
border-bottom: 1px solid #2d2d2d;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section .commenter-name {
color: #ffffff;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section {
color: #d9dcdf;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn .if-replies-have {
color: #bfb3b8;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn .if-replies-have:before {
background: #988d93;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section .comment-reply {
background: #121212;
box-shadow: 0px 0px 5px 0px #363636;
border: 1px solid #636363;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section .other-lnk-cmnt-time-clock {
color: #a9a8a9;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn button.cmnt-btn-reply {
background: #0f273d;
color: #dfd9da;
}

div.content-darkmode .post-comments .post-comments-are .commenter-right-section .other-links .other-lnk-cmnt-btn button.cmnt-btn-reply i {
color: #dfd9da;
}
div.content-darkmode .web-content .shoutpost .postreacts img {
border-left: 2px solid #575757;
}

div.content-darkmode .post-comments .comment-reply {
background: #121212;
}

div.content-darkmode .post-comments .comment-reply .comment-reply-post {
background: #282828;
color: #dfdfdf;
}

div.content-darkmode .post-comments .comment-reply .comment-reply-form .comment-reply-input-form {
background: #282828;
color: #dfdfdf;
border: 1px solid #404040;
}

div.content-darkmode .post-comments .comment-reply .comment-reply-post font.replt-author {
color: #dc98dc;
}

div.content-darkmode .leftmenu-web .links-webinfo .link-webingo:hover {
background: #474747;
}

div.content-darkmode .user_controls .show_controlss .show_controls:hover {
background: #474747;
border-radius: 10px;
}
.user_id_card {
background: url("../../icons/card_back_img.png");
background-size: 100% 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-between;
border-radius: 10px;
border: 1px solid #1e5ca9;
max-width: 360px;
}

.user_id_card .user_dp img {
width: 140px;
height: 140px;
border-radius: 50%;
border: 5px solid #1ebbf5;
}

.user_id_card .brand_name {
font-weight: 900;
font-size: 18px;
color: #a84299;
}
.user_id_card .brand_icon img {
width: 38px;
}

.user_id_card .brand_icon {padding: 5px;display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;border-bottom: 1px solid #1e5ca9;margin-bottom: 15px;border-radius: 0px 0px 15px 15px;}

.user_id_card .user_name {
margin-top: 5px;
color: #fff;
font-weight: 800;
font-size: 20px;
}

.user_id_card .user_title {
color: #fff;
font-weight: 700;
font-size: 12px;
line-height: 1; /* controls space between lines */
font-family: none;
font-variant: small-caps;
letter-spacing: 2px;
}

.user_id_card .user_info {
width: 100%;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px; /* gap between rows */
margin-top: 20px;
}

.user_id_card .user_info_tb {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #fff; /* white text for dark background */
background: rgba(255, 255, 255, 0.1); /* light overlay */
padding: 6px 15px;
}

.user_id_card .user_info_ques {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.user_id_card .user_info_ans {
text-align: right;
font-weight: 400;
letter-spacing: 0.3px;
max-width: 60%;
overflow-wrap: break-word;
}


.user_id_card .user_info_approver_img img {
width: 70px;
height: 70px;
}

.user_id_card .user_info_approver {
display: flex;
flex-direction: column;
justify-content: center;
align-content: space-between;
flex-wrap: nowrap;
align-items: center;
margin-top: 20px;
margin-bottom: 20px;
}

.user_id_card .user_info_approver_text {
color: #fff;
font-weight: 800;
font-variant: small-caps;
border-top: 2px solid;
margin-top: 10px;
padding-top: 10px;
}
.firstbigletter::first-letter {
text-transform: uppercase;
}
.user_id_card .user_info_approver_img {
width: 70px;
height: 70px;
margin-bottom: -15px;
}
.user_card_download {
width: 100%;
padding: 10px;
border-top: 2px solid #ababab;
border-bottom: 2px solid #ababab;
margin-top: 20px;
}

.user_card_download .user_card_down_btn {
width: 100px;
background: forestgreen;
padding: 7px;
margin-top: 10px;
margin-bottom: 10px;
color: #fff;
border-radius: 5px;
border: 1px solid #fff;
}



/* Loading indicator */
.loadingidcard {
display: none;
margin-top: 10px;
font-weight: bold;
background: #0068c5;
color: #fff;
padding: 10px;
border-radius: 5px;
}

/* Success message */
.successmsgidc {
display: none;
margin-top: 10px;
background: #228b22;
font-weight: bold;
color: #fff;
padding: 10px;
border-radius: 5px;
}

div.content-darkmode .web-content .user-form .inside-user-form .confirm-detail {
color: #dfdfdf;
}
div.content-darkmode .saved_posts {
background: #4b4b4b;
}

div.content-darkmode .saved_posts font.aboutdivonfont {
color: #fff;
border-bottom: 1px solid #aaa;
}

div.content-darkmode .buttonaria button.like {
background: none;
}

div.content-darkmode .buttonaria button.comment {
background: none;
}
div.content-darkmode .users_list {
background: #4b4b4b;
}

div.content-darkmode .web-content .users_list .users_listing .empty_box_user_listing {
background: #282828;
}

div.content-darkmode .web-content .users_list .aboutdivuser font.fontaboutdivuser {
color: #fff;
border-bottom: 1px solid #aaa;
}

div.content-darkmode .users_list .users_listing .user_list {
background: #282828;
color: #dfdfdf;
}

div.content-darkmode .users_list .users_listing .user_list_other_bottom_options .user_list_options .user_list_about {
color: #898989;
}

div.content-darkmode .users_list .users_listing .user_list_other_bottom_options .user_list_options .user_list_followers {
border-right: 1px solid #515151;
}

div.content-darkmode .users_list .users_listing .user_list_uname {
color: #a7a7a7;
}

div.content-darkmode .users_list .users_listing .user_list_dp img {
border: 1px solid #282828;
}

div.content-darkmode .users_shop {
background: #4b4b4b;
color: #dfdfdf;
border: 1px solid #aaa;
}

div.content-darkmode .users_shop .user_shop {
background: #282828;
border-radius: 5px;
padding: 15px 0px;
}

div.content-darkmode .squote.dpuploading {
background: #4b4b4b;
}

div.content-darkmode .squote.dpuploading form {
background: #2c2933;
padding: 20px 10px;
color: #aaa;
border-radius: 5px;
}

div.content-darkmode .squote .sqtxt {
color: #dfdfdf;
border-bottom: 1px solid #aaa;
}

div.content-darkmode .squote input[type=file] {
background: #4b4b4b;
border: 1px solid #aaa;
}

div.content-darkmode .users_list .users_listing .user_list_name {
color: #dfdfdf;
}

div.content-darkmode .user-searching .main-search-area {
background: #4b4b4b;
color: #dfdfdf;
}

div.content-darkmode .user-searching .main-search-area form {
background: #282828;
padding: 20px 10px;
margin: 15px 0px;
border-radius: 5px;
}

div.content-darkmode .user-searching .main-search-area .search-input input.user-search-info {
background: #4b4b4b;
box-shadow: 0px 0px 0px 0px;
border: 1px solid #aaa;
}

div.content-darkmode .user-searching .second-section-search {
background: #4b4b4b;
border-bottom: 2px solid #aaa;
}

div.content-darkmode .user-searching .second-section-search font.current-search-query {
color: #fff;
border-bottom: 0px;
}

div.content-darkmode .search-results .search_user {background: #4b4b4b;border-bottom: 2px solid #aaa;color: #dfdfdf;}

div.content-darkmode .search-results .total-recirds {
background: #4b4b4b;
color: #dfdfdf;
}

div.content-darkmode .search-results .search_user .search_user_avatar img {
border: 1px solid #aaa;
}

div.content-darkmode .level_info {
background: #4b4b4b;
color: #dfdfdf;
}

div.content-darkmode .level_info .level_infos .level_infos_info {
background: #282828!important;
color: #aaa!important;
}

div.content-darkmode .level_info .title_level_info font.title_level_info_font {
color: #dfdfdf;
border-bottom: 1px solid #aaa;
}

/* === Popup Styles === */
.theme-popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.6s ease forwards;
z-index: 1000;
}

.theme-popup .popup-box {
background: white;
border-radius: 16px;
width: 90%;
max-width: 400px;
padding: 24px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
animation: popUp 0.4s ease forwards;
}

.theme-popup .popup-box  h2 {
margin: 0 0 20px;
font-size: 1.3rem;
color: blue;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 1;
}

.theme-popup .popup-box  .themes {
display: flex;
justify-content: space-around;
gap: 10px;
margin-bottom: 20px;
flex-direction: column;
}

.theme-popup .popup-box  .theme-card {
border-radius: 12px;
overflow: hidden;
background: #f2f2f2;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid #aaa;
}
.theme-popup .popup-box  .theme-card:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.theme-popup .popup-box  .theme-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.theme-popup .popup-box  .theme-card span {
display: block;
padding: 6px;
font-size: 0.9rem;
background: white;
}

.theme-popup .popup-box  .popup-buttons {
margin-top: 10px;
}

.theme-popup .popup-box  .popup-buttons button {
color: white;
border: none;
padding: 8px 25px;
border-radius: 5px;
cursor: pointer;
font-weight: 700;
background: linear-gradient(45deg, #a84299, #1e5ca9);
}

/* --- Animations --- */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes popUp {
from { transform: translateY(40px) scale(0.9); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Optional: hide popup after 6s just for demo */
@keyframes hidePopup {
to { opacity: 0; visibility: hidden; }
}

.theme-popup .popup-box .theme-img {
height: 70px;
}

div.content-darkmode .rightmenu-web .rightmenu-welcome-msg {
background: #121212;
color: #dfdfdf;
box-shadow: 0px 0px 5px 0px #bbb;
border: none;
}

div.content-darkmode .rightmenu-web .rightmenu-welcome-msg .welcome-msg-txt h4 {
border-bottom: 2px solid #aaa;
}

div.content-darkmode .rightmenu-web .rightmenu-welcome-msg .welcome-btns-rightmenu {
border-top: 2px solid #aaa;
}

div.content-darkmode .web-content .jumma_mubarak {
background: #121212;
color: #dfdfdf;
border: 2px solid #a1005b;
}

div.content-darkmode .web-content .jumma_mubarak .jumma_mubarak_img {
border-bottom: 2px solid #a1005b;
}

div.content-darkmode .web-content .jumma_mubarak .jumma_mubarak_title {
border-bottom: 2px solid #ab5a82;
}



div.content-darkmode .user-form .inside-user-form .all-inputs-user-form .input-user-form select {
background: #3b3b3b!important;
color: #8a8f91!important;
border: 1px solid #858585;
}

div.content-darkmode .convers_search .convers_search_inputs input[type="search"] {
background: #3b3b3b;
border: 1px solid #4f4f4f;
color: #cbcbcb !important;
}

div.content-darkmode .convers_search .convers_search_inputs button {
background: #6b6b6b;
color: #ecfff6;
border: 1px solid #787878;
}

div.content-darkmode .pmdelete {
background: #121212;
color: #d9d5d9;
}

div.content-darkmode .pmdelete .cmsg {
color: #f8f8f8;
}

div.content-darkmode .pmdelete .actions {
border-top: 1px solid #303030;
}

div.content-darkmode .pmdelete button.yes {
background: transparent;
}

div.content-darkmode .pmdelete button.cancel {
background: transparent;
}

div.content-darkmode .user_toppers {
background: #121212;
border: 1px solid #aaa;
}

div.content-darkmode .user_toppers .linksprags .lnkprag {
color: #dfdfdf;
}

div.content-darkmode .user_toppers .linksprags {
background: #282828;
}

div.content-darkmode .user_toppers .linksprags .lnkprag.active {}

div.content-darkmode .user_toppers .aboutdivtop font.fontaboutdivtop {
border-bottom: 1px solid #575757;
color: #fff8f8;
}

div.content-darkmode .user_toppers .users_three .top_dp .top_dp_img {
background: transparent;
}

div.content-darkmode .user_toppers .top_listing .name_topuser {
color: #dfdfdf;
}

div.content-darkmode .user_toppers .users_three .top_name {
color: #dfdfdf;
}

div.content-darkmode .user_toppers .top_listing .top_userar {
border-bottom: 2px solid #464646;
}

div.content-darkmode .user_toppers .linksprags .lnkprag:hover {
background: #515151;
}
div.content-darkmode .users_privacy_setting {
background: #121212;
border: 1px solid #464646;
}

div.content-darkmode .users_privacy_setting .privacyaboutdiv font.fontprivacyaboutdiv {
color: #dfdfdf;
border-bottom: 2px solid #373737;
}

div.content-darkmode .users_privacy_setting .privacy_settings .form-group .about-input {
color: #a3a3a3;
}

div.content-darkmode .users_privacy_setting .privacy_settings .form-group {
border-top: 1px solid #343434;
}

div.content-darkmode .users_privacy_setting .privacy_settings .form-button {
border-top: 2px solid #3b3b3b;
}

div.content-darkmode .users_privacy_setting .privacy_settings .form-group .fullinput input {
background: #3b3b3b;
border: 1px solid #5c5c5c;
color: #dadcdf;
}

div.content-darkmode .users_privacy_setting .privacy_settings .form-group .input_show .switch .switching .checkbox:checked ~ .layer {
background-color: #302424;
}

div.content-darkmode .users_privacy_setting .privacy_settings .form-group .input_show .switch .layer {
background-color: #1b2428;
}

div.content-darkmode .users_privacy_setting .privacy_settings .form-group .input_show .checkboxinput label {
color: #eeeeee;
}

div.content-darkmode .shoutpost .addedreacts {
background: #121212;
border: 1px solid #565656;
box-shadow: 0px 0px 5px 0px #757575;
}

div.content-darkmode .shoutpostsend .feelings-list .feeling {
background: #121212;
color: #dfdfdf;
}

div.content-darkmode .shoutpostsend .filters-opt .filterabout {
color: #a4a9ff;
}

div.content-darkmode .shoutpostsend .filters-opt .emojisearch input[type=text] {
background: #3b3b3b;
color: #aaa;
}

div.content-darkmode .shoutpostsend .filters-opt .emojis-list .emoji {
background: #121212;
}

div.content-darkmode .shoutpostsend .filters-opt .nextexshout {
background: #555555;
color: #dbdbdf;
}

div.content-darkmode .shoutpostsend .filters-opt .prevexprev {
background: #555555;
color: #dbdbdf;
}

.number-game-container .number-game-card .number-game-stats font {
background: #eee;
font-weight: 400;
padding: 5px;
border-radius: 5px;
width: 30%;
}

.number-game-container {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background: #fff;
border: 2px solid #0082ff;
border-radius: 5px;
}

.number-game-container .number-game-card {
width: 100%;
border-radius: 20px;
text-align: center;
animation: fadeIn 0.5s 
ease;
}

.number-game-container .number-game-card .number-game-header {
font-size: 1.4rem;
font-weight: 700;
color: #333;
padding-bottom: 10px;
border-bottom: 1px solid #0082ff;
}

.number-game-container .number-game-card font.number-game-result {
display: block;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
font-weight: 600;
text-align: center;
border: 1px solid #d6d8d9;
color: #383d41;
background: #e2e3e5;    
margin-top: 10px;
}

.number-game-container .number-game-card .number-game-input {
transition: 0.3s;
width: 100%;
padding: 10px;
color: #000;
border: 1px solid #0082ff;
border-radius: 5px;
}

.number-game-container .number-game-card .number-game-btn {
transition: 0.3s;
height: 42px;
margin-top: 10px;
display: inline-block;
border-radius: 5px;
border: 1px solid #eee;
background: #0081ff;
color: #fff;
width: 100%;
}

.number-game-container .number-game-card .number-game-chances {
margin-top: 8px;
font-size: 14px;
color: #444;
background: #eee;
padding: 10px;
border-radius: 5px;
}

.number-game-container .number-game-card .number-game-stats {
margin-top: 15px;
border-top: 1px solid #ddd;
padding-top: 12px;
font-size: 0.9rem;
color: #333;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: center;
}

.number-game-container .number-game-card .number-game-stats font {
background: #eee;
font-weight: 400;
padding: 5px;
border-radius: 5px;
width: 30%;
}

.number-game-container .number-game-card .number-game-score {
font-weight: bold;
color: #007bff;
}

.number-game-container .number-game-card .number-game-change {
font-weight: bold;
display: inline-block;
margin-left: 5px;
font-weight: bold;
animation: fadeIn 0.4s ease-in-out;
}

.number-game-container .number-game-card .number-game-log {
margin-top: 15px;
padding: 10px;
background: #f9f9ff;
border: 1px solid #e3e3f5;
border-radius: 5px;
text-align: left;
font-size: 0.9rem;
color: #333;
max-height: 120px;
overflow-y: auto;
padding-top: 0px;
}

.number-game-container .number-game-card .number-game-log h4 {
font-size: 1rem;
color: #444;
margin-bottom: 15px;
text-align: -webkit-center;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}

.number-game-container .number-game-card .number-game-log ul {
padding-left: 20px;
margin: 0;
}

.number-game-container .number-game-card .number-game-log li {
margin-bottom: 4px;
list-style: "💠 ";
}

.number-game-container .number-game-card .number-game-info {
margin-top: 10px;
font-size: 0.85rem;
color: #555;
background: #f4f9ff;
border: 1px solid #cce5ff;
border-radius: 5px;
padding: 10px;
text-align: left;
padding-top: 0px;
}

.number-game-container .number-game-card .number-game-info h4 {
font-size: 1rem;
color: #444;
margin-bottom: 0px;
text-align: -webkit-center;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}

/* Fade-in the entire widget */
@keyframes verifydaiani {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}

.verify-mobile {
width: 100%;
margin: auto;
background: #ffffff;
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
font-family: Inter, sans-serif;
text-align: center;
border: 5px solid #002c66;
animation: verifydaiani 0.5s ease forwards;
margin-top: 85px; 
}

/* Top Icon */
.verify-mobile .verify-mobile-top-icon {
background: #002b65;
margin: -16px;
border-radius: 5px 5px 0 0;
margin-bottom: 15px;
border: 1px solid #002c66;
padding: 0 20px;
}

.verify-mobile .verify-mobile-top-icon img {
width: 90%;
margin-bottom: 12px;
animation: verifydaiani 0.6s ease forwards;
}

/* Status Text */
.verify-mobile .verify-mobile-status {
font-weight: 700;
color: #0f4c81;
font-size: 16px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #aaa;
animation: verifydaiani 0.7s ease forwards;
}

/* Benefits Grid */
.verify-mobile .verify-mobile-benefits {
display: flex;
justify-content: space-between;
gap: 12px;
width: 100%;
animation: verifydaiani 0.8s ease forwards;
}

.verify-mobile .verify-mobile-benefits .verify-mobile-benefit {
flex: 1;
display: flex;
gap: 8px;
align-items: flex-start;
}

.verify-mobile .verify-mobile-benefits .verify-mobile-icon {
width: 30px;
height: 30px;
background: #eef6f6;
border-radius: 6px;
display: grid;
place-items: center;
animation: verifydaiani2 0.6s ease forwards;
}

@keyframes verifydaiani2 {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.verify-mobile .verify-mobile-benefits .verify-mobile-benefit-text {
text-align: left;
}

.verify-mobile .verify-mobile-benefits .verify-mobile-benefit-text .verify-title {
font-weight: 600;
font-size: 13px;
color: #0b2540;
}

.verify-mobile .verify-mobile-benefits .verify-mobile-benefit-text .description {
font-size: 12px;
color: #6b7280;
}

/* Bottom / Button */
.verify-mobile .verify-mobile-bottom {
font-size: 28px;
margin-top: 5px;
padding-top: 20px;
border-top: 1px solid #aaa;
}

.verify-mobile .verify-mobile-bottom .verify_email_home_btn {
background: linear-gradient(90deg,#0f4c81,#00a3a3);
color: white;
font-weight: 700;
border: none;
border-radius: 5px;
padding: 10px 16px;
font-size: 14px;
cursor: pointer;
box-shadow: 0 6px 12px rgba(15,76,129,0.2);
transition: all 0.3s ease;
}

/* Button hover animation */
.verify-mobile .verify-mobile-bottom .verify_email_home_btn:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(15,76,129,0.3);
}

.user_connection {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-family: Inter, sans-serif;
background: #fff;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
border-radius: 0px;
}

.user_connection  .user_connection_left_user,
.user_connection  .user_connection_right_user {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.user_connection .user_connection_left_dp img,
.user_connection .user_connection_right_dp img {
width: 60px;
height: 60px;
border-radius: 5px;
object-fit: cover;
border: 2px solid #002c66;
}

.user_connection .user_connection_left_name,
.user_connection .user_connection_right_name {
margin-top: 8px;
font-weight: 600;
color: #002c66;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60px;
}

.user_connection .user_connection_center_words {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.user_connection .user_connection_center_words_top,
.user_connection .user_connection_center_words_bottom {
font-weight: 600;
color: #444;
}

.user_connection .user_connection_center_words_line {
position: relative;
width: 150px;
height: 2px;
background: #002c66;
margin: 8px 0;
}

.user_connection .user_connection_center_words_line::before {
content: '';
position: absolute;
left: 0;
top: -5px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 8px solid #002c66; /* Left arrow */
}

.user_connection .user_connection_center_words_line::after {
content: '';
position: absolute;
right: 0;
top: -5px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #002c66; /* Right arrow */
}
.user-form .connection-info-box {
background-color: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 10px;
padding: 20px 25px;
width: 100%;
margin: 30px auto;
font-family: 'Inter', sans-serif;
color: #111827;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

}
.user-form .connection-info-box h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: #1f2937;
text-align: -webkit-center;
border-bottom: 1px solid #000;
padding-bottom: 10px;
}
.user-form .connection-info-box ul {
padding-left: 20px;
margin: 0;
line-height: 1.6;
}
.user-form .connection-info-box li {
margin-bottom: 8px;
font-size: 14px;
}
.user-form .connection-info-box li strong {
color: #2563eb; /* highlight important info */
}

div.content-darkmode .user-form .connection-info-box {
background: #1e1f20;
border: 1px solid #494a4c;
color: #f8ffff;
}

div.content-darkmode .user-form .connection-info-box h4 {
color: #e3eef1;
border-bottom: 1px solid #616161;
}

div.content-darkmode .user_connection {
background: #121212;
border: 1px solid #818181;
}

div.content-darkmode .user_connection .user_connection_left_dp img, .user_connection .user_connection_right_dp img {
border: 1px solid #454b53;
}

div.content-darkmode .user_connection .user_connection_center_words_top, div.content-darkmode .user_connection .user_connection_center_words_bottom {
color: #cacaca;
}

div.content-darkmode .user_connection .user_connection_left_name, div.content-darkmode .user_connection .user_connection_right_name {
color: #d4e4ff;
}

div.content-darkmode .user_connection .user_connection_center_words_line {
background: #673AB7;
}

div.content-darkmode .user_connection .user_connection_center_words_line::after {
border-left: 8px solid #673ab7;
}

div.content-darkmode .user_connection .user_connection_center_words_line::before {
border-right: 8px solid #673ab7;
}

.user_profile .verified-badge {
display: inline-flex;
align-items: center;
background-color: #e6f4ea; /* light green background */
color: #2e7d32; /* dark green text */
font-size: 13px;
font-weight: 500;
padding: 2px 7px;
border-radius: 5px;
margin-top: 5px;
}

.user_profile .verified-badge .verified-icon {
width: 15px;
height: 15px;
margin-right: 4px;
}

.game .game-form .egg {
font-size: 2em;
color: #e7e7e7;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.3s ease;
animation: eggPop 0.4s ease;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
}
.game .game-form .egg:hover {
transform: scale(1.1);
background-color: #45a049;
}
.game .game-form .not-empty { color: #ffa500!important; }
.game .game-form .empty { color: #ddd!important; }
.game .game-form .success_msg {
margin: 20px 0;
border: blue 1px solid;
padding: 7px 5px;
border-radius: 5px;
color: blue;
font-weight: 100;
animation: fadeIn 0.8s ease forwards;
background: #eee;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}
.game .game-form .game-my-scores { animation: fadeUp 1s ease; }
.game .game-form button img {
height: 6.5%;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.game .game-form button.egg { margin: 2%; }


div.content-darkmode .user_profile .verified-badge {
background: #4f4f4f;
color: #5eab5c;
}

div.content-darkmode .games-box {
background: #121212;
}

div.content-darkmode .games-box .games-title font.games-title-font {
color: #dfdfdf;
border-bottom: 2px solid #4f4f4f;
}

div.content-darkmode .games-box .games_have_game .games_have_game_name {
border: 1px solid #323232;
color: #dfdfdf;
}

div.content-darkmode .game {
background: #121212;
border: 2px solid #575757;
}

div.content-darkmode .game .game-info {
color: #d9d5d9;
}

div.content-darkmode .game .game-logo img {
border: 2px solid #464646;
}

div.content-darkmode .game .buttons {
border-top: 1px solid #2e2e2e;
}

div.content-darkmode .game .game-name {
color: #4aaf38;
}

div.content-darkmode .game .game-form .game-method {
color: #dfdfdf;
border-bottom: 1px solid #5d5d5d;
}

div.content-darkmode .game .game-form {
border: 1px solid #5d5d5d;
}

div.content-darkmode .game .game-my-scores {
color: #4aaf2b;
}

.number-game-container .number-game-card .retry-game-btn {
transition: 0.3s;
height: 42px;
margin-top: 10px;
display: inline-block;
border-radius: 5px;
border: 1px solid #eee;
background: #0081ff;
color: #fff;
width: 100%;
}
.number-game-container .number-game-card .number-game-word {
display:block;
font-size:2.5rem;
font-weight:700;
letter-spacing:6px;
text-transform:uppercase;
text-align:center;
margin:15px 0;
margin-top:-5px;
color:#333;
background:#fff;
padding:10px 15px;
border-radius:10px;
box-shadow:inset 0 0px 10px #c5c5c5;
transition: all 0.3s ease;
}
.number-game-container .number-game-card .number-game-word.animate {
animation: fadeInScale 0.5s ease forwards;
}
.number-game-container .number-game-card .number-game-result.animate-correct {
animation: correctFlash 0.8s ease;
color: #28a745;
}
.number-game-container .number-game-card .number-game-result.animate-wrong {
animation: wrongFlash 0.8s ease;
color: #dc3545;
}
/* Score animation */
.number-game-container .number-game-card #score.animate-score {
animation: scorePulse 0.5s ease;
}
.number-game-container .number-game-card .btn-spinner {
display: inline-block;
float:right;
width: 16px;
height: 16px;
border: 2px solid #fff;
border-top: 2px solid #333;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 5px;
vertical-align: middle;
}
/* Disable button when processing */
.number-game-container .number-game-card .number-game-btn.loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}

.number-game-container .number-game-card font.number-game-word:hover {
background: #e9f7ff;
transform: scale(1.03);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}



.number-game-container .number-game-card .number-game-result,
.number-game-container .number-game-card .number-game-stats font,
.number-game-container .number-game-card .number-game-log li {
animation: fadeIn 0.4s ease-in-out;
}


.number-game-container .number-game-card .number-game-btn.loading::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

.number-game-container .number-game-card .number-game-change.positive { color: #00c853; }
.number-game-container .number-game-card  .number-game-change.negative { color: #ff5252; }

div.content-darkmode .number-game-container {
background: #121212;
border: 2px solid #1257a3;
}

div.content-darkmode .number-game-container .number-game-card .number-game-header {
color: #dfdfdf;
border-bottom: 1px solid #104883;
}

div.content-darkmode .number-game-container .number-game-card font.number-game-result {
background: #2f3031;
color: #d1d1d1;
border: 1px solid #747576;
}

div.content-darkmode .number-game-container .number-game-card .number-game-input {
background: #3b3b3b;
color: #fff;
border: 1px solid #0f5aab;
outline: none;
}

div.content-darkmode .number-game-container .number-game-card .number-game-btn {
background: #0081ff;
color: #deefff;
border: 1px solid #979b9e;
}

div.content-darkmode .number-game-container .number-game-card .number-game-chances {
background: #282828;
color: #cacaca;
}

div.content-darkmode .number-game-container .number-game-card .number-game-stats {
border-top: 1px solid #292929;
}

div.content-darkmode .number-game-container .number-game-card .number-game-stats font {
background: #282828;
color: #dddddd;
}

div.content-darkmode .number-game-container .number-game-card .number-game-log {
background: #1f1f23;
color: #dddddd;
border: 1px solid #303033;
}

div.content-darkmode .number-game-container .number-game-card .number-game-log h4 {
color: #dddddd;
border-bottom: 2px solid #414141;
}

div.content-darkmode .number-game-container .number-game-card .number-game-info {
background: #1f1f23;
color: #dddddd;
border: 1px solid #303033;
}

div.content-darkmode .number-game-container .number-game-card .number-game-info h4 {
color: #dddddd;
border-bottom: 2px solid #414141;
} 

div.content-darkmode .number-game-container .number-game-card .number-game-word {
color: #dfdfdf;
background: #121212;
margin-top: 15px;
}


.games-box {
padding: 10px;
background: #ffff;
border-radius: 5px;
border: 1px solid #000000;
}

.games-box .games-title {
text-align: -webkit-center;
padding: 10px;
margin-bottom: 20px;
}

.games-box .games-title font.games-title-font {
padding: 10px;
font-weight: 800;
font-variant: small-caps;
border-bottom: 2px solid;
font-size: 15px;
}

.games-box .games_have_game {
border: 1px solid #27ae60;
float: left;
border-radius: 10px;
width: 40%;
margin-bottom: 20%;
margin: 5%;
}

.games-box .games_have {
overflow: hidden;
}

.games-box .games_have_game .games_have_game_icon img {
width: 100%;
height: 70px;
border-radius: 9px 8px 0px 0px;
}

.games-box .games_have_game .games_have_game_name {
padding: 10px;
border: 1px solid #eee;
border-right: 0px;
border-left: 0px;
text-align: -webkit-center;
font-weight: 800;
font-variant: all-small-caps;
font-size: 17px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.games-box .games_have_game .games_have_game_play {height: 30px;text-align: -webkit-center;}

.games-box .games_have_game .games_have_game_play button {
appearance: none;
backface-visibility: hidden;
background-color: #27ae60;
border-radius: 5px;
border-style: none;
box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: normal;
line-height: 1.5;
outline: none;
overflow: hidden;
padding: 5px 25px;
position: relative;
text-align: center;
text-decoration: none;
transform: translate3d(0, 0, 0);
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
margin-top: 10px;
}


.games-box .games_have_game .games_have_game_play button:hover {
background-color: #1e8449;
opacity: 1;
transform: translateY(0);
transition-duration: .35s;
}

.games-box .games_have_game .games_have_game_play button:active {
transform: translateY(2px);
transition-duration: .35s;
}

.games-box .games_have_game .games_have_game_play button:hover {
box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
}
.theme-popup input[type="radio"]:checked + .theme-card::after {
content: "✔";
position: absolute;
margin-top: -85px;
right: 0px;
margin-right: 40px;
background: #1e5ca9;
color: white;
font-weight: bold;
font-size: 0.9rem;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
animation: fadeIn 0.3s ease;
}
.user_messanger .user_message .user_message_gallery {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
max-height: none;
overflow: visible;
}

.user_messanger .user_message .user_message_gallery.scrollable {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
max-height: 250px; /* adjust as needed */
overflow-y: auto;
padding-right: 5px;
scroll-behavior: smooth;
}

.user_messanger .user_message .user_message_gallery.scrollable::-webkit-scrollbar {
width: 6px;
}

.user_messanger .user_message .user_message_gallery.scrollable::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 3px;
}

.user_messanger .user_message .user_message_img img {
max-width: 120px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease;
}

.user_messanger .user_message .user_message_img img:hover {
transform: scale(1.05);
}

div.content-darkmode  .shoutpost .postmenu:hover {
background: #282828;
}
div.content-darkmode  .user_messangers .messanger_sendarea .image-input {
background: #272c3b;
color: #fff;
border-bottom: 2px solid #aaaa;
}
div.content-darkmode  .user_messangers .messanger_sendarea .new_voice_rec {
background: #272c3b;
color: #aaa;
}

.recevied_gifts .recevied_gift .recevied_gift_icon img {width: 100%;max-height: 200px;border-radius: 5px;}

.recevied_gifts .recevied_gift {
padding: 10px;
width: 90%;
border: 1px solid #eee;
margin: 5%;
box-shadow: 0px 0px 5px 0px #aaa;
border-radius: 5px;
}

.recevied_gifts {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
}

.recevied_gifts .recevied_gift .recevied_gift_icon {margin-bottom: 10px;}

.recevied_gifts .recevied_gift font.recevied_gift_name_que {
font-weight: 800;
}

div.content-darkmode .recevied_gifts .recevied_gift {
color: #dfdfdf;
border: 1px solid #4c4c4c;
background: #282828;
}

.user_profile .user_gifts_info {
padding: 10px;
background: #fff;
margin-top: 20px;
border-radius: 5px;
border: 2px solid #009688;
}

.user_profile .user_gifts_info .user_fabout {
padding: 15px 0px;
text-align: center;
margin: -10px;
margin-bottom: 5px;
border-bottom: 2px solid #009688;
}

.user_profile .user_gifts_info .user_followerrs {
display: flex;
flex-direction: row;
overflow-x: scroll;
padding: 14px 0px;
}

.user_profile .user_gifts_info font.aboutdivonfont {
font-weight: 900;
border-bottom: 1px solid;
padding: 0px 5px;
}

.user_profile .user_gifts_info .user_followerrs .user_follower_dp img {
width: 70px;
height: 70px;
border-radius: 5px;
border: 1px solid #eee;
}

.user_profile .user_gifts_info .user_followerrs .user_follower {
margin-right: 10px;
text-align: center;
width: 20%;
}

.user_profile .user_gifts_info .user_followerrs .user_follower_name {
color: #000;
margin-top: 5px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: none;
}

.user_profile .user_gifts_info .user_followerrs::-webkit-scrollbar {
height: 2px;
width:5px
}
.user_profile .user_gifts_info .user_followerrs::-webkit-scrollbar-thumb {
background-color: #009688;
}

.user_profile font.privatefrndlist {
font-variant: small-caps;
padding: 10px;
font-weight: 800;
background: #eee;
width: 100%;
text-align: -webkit-center;
border-radius: 5px;
}


div.content-darkmode .user_profile font.privatefrndlist {
background: #282828;
color: #dfdfdf;
}

div.content-darkmode .story-upload-menu .story-upload-menu-links .story-upload-menu-link {
background: #121212;
color: #ffffff;
}

div.content-darkmode .story-upload-menu .story-upload-menu-links .story-upload-menu-link .icon-story-upload-menu-link {
color: #fff;
}

div.content-darkmode .story-upload-menu .story-upload-menu-links .story-upload-menu-link .name-story-upload-menu-link {
color: #fff;
}

div.content-darkmode .story-upload-form {
background: #121212;
}

div.content-darkmode .story-upload-form .story-upload-form-title font.text-story-upload-form-title {
color: #eeeeee;
border-bottom: 1px solid #353535;
}

div.content-darkmode .story-upload-form .story-upload-inside-form .story-upload-inside-form-group-icon {
color: #dfdfdf;
}

div.content-darkmode .story-upload-form .story-upload-inside-form .story-upload-inside-form-group .story-upload-inside-form-group-bg label.story-upload-inside-form-group-bg-img i {
background: #aaa;
}

div.content-darkmode .story-upload-form .story-upload-inside-form .story-upload-inside-form-group-input textarea.story-form-input {
color: #fff;
}
div.content-darkmode .story-upload-form .story-upload-inside-form .story-upload-inside-form-group-input {
color: #dfdfdf;
}

div.content-darkmode .story-upload-form .story-upload-inside-form .story-upload-inside-form-group-input input.story-form-input {
background: #121212;
color: #fff;
outline: none;
}

div.content-darkmode .gifts {
background: #121212;
}

div.content-darkmode .gifts .divtext {
color: #fff;
border-bottom: 1px solid #3a3a3a;
}

div.content-darkmode .gifts .gift .name {
color: #ffffff;
}

div.content-darkmode .gifts .gift .count {
color: #aaa;
}

div.content-darkmode .gifts .gift {
background: #212121;
}

div.content-darkmode .gifts .giftgift {
border: 3px solid #464646;
}

div.content-darkmode .sendingarea {
background: #121212;
}

div.content-darkmode .sendingarea .divtext {
color: #fff;
border-bottom: 1px solid #3a3a3a;
}

div.content-darkmode .sendingarea .img {
border: 1px solid #404040;
}

div.content-darkmode .sendingarea label {
color: #d2dfdf;
}

div.content-darkmode .sendingarea textarea {
background: #121212;
color: #fff;
outline: none;
border: 1px solid #404040;
}

div.content-darkmode .users_shop .user_shop .user_shop_form .user_shop_input input {
background: #4b4b4b;
border: 1px solid #aaa;
color: #fff;
outline: none;
}

div.content-darkmode .refferel_link_div {
border: 2px solid #9351ab;
color: #d56ff8;
}

div.content-darkmode .refferel_link_div .referrel_link_link input {
border: 2px outset #ab72ab;
color: #fff;
}


/* Responsive table container */
.user_requests .user_req_table_container {
overflow-x: auto;
width: 100%;
}

.user_requests .user_req_table_container table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
min-width: 700px; /* For horizontal scroll on mobile */
}

.user_requests  th, td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid #e5e5e5;
}

.user_requests .user_req_table_container table th {
background-color: #ceb2ff;
font-size: 0.9em;
}

.user_requests .user_req_table_container table tr:hover {
background-color: #f9fbff;
}

.user_requests .user_req_table_container table .badge {
padding: 4px 10px;
border-radius: 5px;
color: #fff;
font-size: 0.8em;
}

.user_requests .user_req_table_container table .pending { background-color: #ffb100; }
.user_requests .user_req_table_container table .approved { background-color: #28a745; }
.user_requests .user_req_table_container table .scheduled { background-color: #0078d7; }

.user_requests .user_req_table_container table .expand-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
}

.user_requests .user_req_table_container table .details-row {
background: #f9fbff;
}

.user_requests .user_req_table_container table .details-cell {
padding: 10px 15px;
font-size: 0.9em;
color: #444;
}

.user_requests .user_req_table_container table .details-label {
font-weight: bold;
color: #222;
}


.user_requests .user_req_table_container table thead {background: #000000;}

.user_messanger .user_message .storymsg {padding: 0px;margin: -10px;background: #0000003b;margin-bottom: 10px;border-radius: 5px;border-left: 5px solid #fff;width: 170px;}

.user_messanger .user_message.rec .storymsg {
background: #00000014;
border-left: 5px solid #333;
color: #333;
}

.user_messanger .user_message .storymsg .story_author font.author-name-story {
float: left;
display: inline-block;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 20%;
}



.user_messanger .user_message .storymsg .story_author .dot {
float: left;
display: block;
width: 5px;
height: 5px;
background-color: #ffffff;
border-radius: 50%; /* makes it a circle */
margin-left: 5px;
margin-right: 5px;
margin-top: 8px;
}

.user_messanger .user_message .storymsg .story_author {
height: 25px;
font-weight: 800;
font-variant: small-caps;
padding: 5px 10px;
}

.user_messanger .user_message .storymsg img {
width: 50px;
height: 50px;
float: right;
border-radius: 5px;
margin: 2.5px 3px;
}

.user_messanger .user_message .storymsg .story_msg {
padding: 5px 10px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 70%;
font-weight: 700;
}

/* MAIN WRAPPER */
.banned-users-section {
width: 100%;
background: linear-gradient(135deg, #1b1b2f, #162447);
padding: 10px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
max-width: 950px;
margin: 30px auto;
color: #fff;
}

/* TITLE */
.banned-users-section .section-title {
font-size: 24px;
font-weight: 800;
margin-bottom: 25px;
color: #ff7675;
text-shadow: 0 2px 4px rgba(255,0,0,0.45);
text-align: -webkit-center;
border-bottom: 2px solid;
padding-bottom: 20px;
padding-top: 10px;
font-variant: small-caps;
}

/* USER CARD */
.banned-users-section .banned-user-card {
background: rgba(255,255,255,0.08);
padding: 20px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(6px);
margin-bottom: 20px;
transition: .3s ease;
}

.banned-users-section .banned-user-card .banned-user-card:hover {
background: rgba(255,255,255,0.15);
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

/* TOP SECTION */
.banned-users-section .banned-user-card .top-row {
display: flex;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
}

/* AVATAR */
/* Ban Stamp */
.banned-users-section .banned-user-card .top-row .ban-stamp {
position: absolute;
top: -6px;
right: -6px;
background: #e63946;
color: white;
font-size: 10px;
padding: 5px 8px;
border-radius: 6px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 3px 8px rgba(0,0,0,0.3);
border: 2px solid rgba(255,255,255,0.4);
transform: rotate(6deg);
}

/* Avatar wrapper must be position relative */
.banned-users-section .banned-user-card .top-row .avatar-wrapper {
position: relative;
display: inline-block;
background: linear-gradient(
90deg, #ff4d4d, #E91E63);
padding: 4px;
border-radius: 50%;
margin-right: 18px;
box-shadow: 0 0 12px rgb(255 0 0 / 50%);
}
.banned-users-section .banned-user-card .top-row .banned-avatar {
width: 85px;
height: 85px;
border-radius: 50%;
object-fit: cover;
}

/* NAME + GENDER + AGE */
.banned-users-section .banned-user-card .top-row .top-info {
flex: 1;
max-width: 50%;
}

.banned-users-section .banned-user-card .banned-name {
font-size: 22px;
font-weight: 700;
color: #f1f2f6;
/* Ensure name wraps if too long */
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.banned-users-section .banned-user-card .banned-details {
font-size: 15px;
color: #dcdde1;
margin-top: 4px;
}

/* LINE */
.banned-users-section .banned-user-card .divider {
border: none;
height: 1px;
background: linear-gradient(to right, #ff4d4d, #ffbe76);
margin: 15px 0;
opacity: 0.7;
}

/* BOTTOM DETAILS */
.banned-users-section .banned-user-card  .banned-meta p {
margin: 5px 0;
font-size: 15px;
color: #f5f6fa;
background: #eeeeee1f;
padding: 10px;
border-radius: 5px;
}

.banned-users-section .banned-user-card  .banned-meta strong {
color: #ff7675;
}

div.content-darkmode .user_messanger .user_message.rec .replymsg {
color: #aaa;
background: #ffffff14;
border-left: 5px solid #aaa;
}



/* BLOCKED IP CARDS */
.ip-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 35px;
background: #aaa;
padding: 10px;
border: 2px solid red;
border-radius: 0px 0px 10px 10px;
}
.ip-grid .ip-card{
background:#fff;
padding:16px;
border-radius:18px;
box-shadow:0 10px 22px rgba(0,0,0,.08);
border-left:6px solid #e74c3c;
transition:.25s;
}
.ip-grid .ip-card:hover{
transform:translateY(-5px);
}
.ip-grid .ip-card a{
text-decoration:none;
color:#000;
display:block;
}
.ip-grid .ip{
font-size:15px;
font-weight:700;
color:#e74c3c;
}
.ip-grid .reason{
font-size:13px;
margin:6px 0;
color:#555;
}
.ip-grid .date{
font-size:12px;
color:#888;
}

/* USERS WRAP */
.blocked_ips .table-wrap{
background:#fff;
padding:18px;
border-radius:20px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.blocked_ips .table-wrap .table-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 14px;
color: #34495e;
padding: 10px;
background: #eee;
border-radius: 5px;
}

/* BADGES */
.blocked_ips .table-wrap .badger{
display:inline-block;
padding:6px 12px;
border-radius:20px;
font-size:11px;
font-weight:600;
color:#fff;
margin-top:10px;
margin-bottom:10px;
border-radius:5px;
}
.blocked_ips .table-wrap .badge-ip{ background:#e74c3c; }

/* USERS WRAP */
.blocked_ips .table-wrap{
background:#fff;
padding:18px;
border-radius:20px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
overflow-x:auto; /* enable horizontal scroll */
}

/* TABLE */
.blocked_ips .table-wrap table{
border-collapse:collapse;
font-size:13px;
}
.blocked_ips .table-wrap th,td{
padding:10px;
border-bottom:1px solid #eee;
text-align:left;
}
.blocked_ips .table-wrap table th{
background:#aaa;
color:#fff;
}
.blocked_ips .table-wrap tr:hover{
background:#f6f9ff;
}

/* EMPTY */
.blocked_ips .empty{
text-align:center;
padding:25px;
color:#777;
font-size:14px;
}

/* ---------- MOBILE VIEW ---------- */
@media(max-width: 768px){

.blocked_ips .table-wrap table thead{
display:none;
}

.blocked_ips .table-wrap table td[data-label="timeago"] {
background: #185a9d;
border-radius: 13px 15px 0px 0px;
text-align: -webkit-center;
padding: 10px !important;
margin: -14px;
margin-bottom: 10px;
border-left: 0px !important;
color: #fff;
font-weight: 900;
font-variant: small-caps;
font-size: 14px !important;
margin-left: -17px;
}
.blocked_ips .table-wrap td[data-label="timeago"]:before{
content:""!important;
}

.blocked_ips .table-wrap td span {
display: inline-block;
background: rgb(0 0 0 / 5%);
padding: 12px;
border-radius: 5px;
font-weight: 600;
margin-top: 10px;
}

.blocked_ips .table-wrap tbody tr{
display:block;
background:#fff;
margin-bottom:16px;
padding:14px;
border-radius:16px;
box-shadow:0 8px 22px rgba(0,0,0,.08);
border-left:5px solid #185a9d;
}

.blocked_ips .table-wrap tbody td{
display:block;
border:none;
padding:6px 0;
font-size:13px;
}

.blocked_ips .table-wrap tbody td:before{
content:attr(data-label);
display:block;
font-size:12px;
font-weight:600;
color:#555;
margin-bottom:2px;
}
}
.blocked_ips .table-wrap .user-box{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}
.blocked_ips .table-wrap .user-avatar{
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
border:2px solid #3498db;
}
.blocked_ips .table-wrap .user-name{
font-size:13px;
font-weight:600;
color:#2c3e50;
text-align:center;
}

.blocked_ips .blocked_ips_title {
text-align: -webkit-center;
margin: 30px 0px;
font-weight: 800;
background: #fff;
padding: 20px;
margin-bottom: 0px;
border: 2px solid red;
border-bottom: 0px;
border-radius: 10px 10px 0px 0px;
font-variant: small-caps;
font-size: 16px;
}

.blocked_ips {
margin-top: 80px;
}



/* SEARCH WRAP */
.ip-search-wrap{
margin: 50px 5px 0px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

/* SEARCH BOX */
.ip-search-wrap .ip-search-box{
display:flex;
align-items:center;
padding:10px;
gap:10px;
}

/* ICON */
.ip-search-wrap .ip-search-box .ip-search-icon{
font-size:20px;
color:#fff;
padding:0 10px;
}

/* INPUT */
.ip-search-wrap .ip-search-box input{
flex:1;
border:none;
outline:none;
padding:12px 14px;
font-size:14px;
border-radius: 5px;
background:#fff;
}

/* BUTTON */
.ip-search-wrap  .ip-search-box button{
border:none;
cursor:pointer;
padding:12px 18px;
font-size:14px;
font-weight:600;
color:#fff;
background:linear-gradient(135deg,#ff416c,#ff4b2b);
border-radius: 5px;
transition:.25s;
}

.ip-search-box button:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* MOBILE */
@media(max-width: 768px){
.ip-search-wrap .ip-search-box{
flex-direction:column;
padding:14px;
}

.ip-search-wrap .ip-search-box input, .ip-search-wrap .ip-search-box button{
width:100%;
}

.ip-search-wrap .ip-search-box .ip-search-icon{
display:none;
}
}


.ip-search-wrap .search-blocked_ips_title {
padding: 15px;
text-align: -webkit-center;
color: #fff;
border-bottom: 2px solid red;
font-weight: 800;
font-variant: small-caps;
font-size: 15px;
}


div.content-darkmode .story-upload-menu .story-upload-menu-links .story-upload-menu-link.activelink {
background: #ffffff;
color: #000000!important;
box-shadow: inset 0px 0px 9px 2px #000!Important;
}

div.content-darkmode .story-upload-menu .story-upload-menu-links .story-upload-menu-link.activelink i {
color: #000000;
}

div.content-darkmode .story-upload-menu .story-upload-menu-links .story-upload-menu-link.activelink .name-story-upload-menu-link {
color: #000;
}
div.content-darkmode .user_messanger .user_message.rec .storymsg {
color: #aaa;
background: #ffffff14;
border-left: 5px solid #aaa;
}

.capture-mode * {
animation: none !important;
transition: none !important;
filter: none !important;
backdrop-filter: none !important;
}

.capture-mode .post {
background: #ffffff !important;
opacity: 1 !important;
box-shadow: none !important;
}



/* Name Color CSS */

.user-form .inside-user-form .gradient-form{
background: linear-gradient(
180deg, #ffffff, #e1e1e1);
padding: 22px;
border-radius: 18px;
box-shadow: 0 0 10px 0px rgba(63, 81, 181, 0.15);
font-family: "Poppins", sans-serif;
position: relative;
}

.user-form .inside-user-form .gradient-form #previewText{
text-align: center;
padding: 16px;
margin-bottom: 20px;
border-radius: 14px;
background: linear-gradient(145deg, #f9fbff, #eef1ff);
box-shadow: inset 0 4px 10px rgba(0,0,0,0.06);
}

.user-form .inside-user-form .gradient-form #previewText #gradientText{
font-size: 22px;
font-weight: 900;
text-decoration: none;
letter-spacing: 0.4px;    background: linear-gradient(#ff1200, #3F51B5);
-webkit-background-clip: text!important;
background-clip: text!important;
color: transparent;
}

.user-form .inside-user-form .gradient-form .color-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.user-form .inside-user-form .gradient-form .color-row label{
background: #fff;
padding: 14px 14px 16px;
border-radius: 14px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
font-size: 13px;
font-weight: 700;
color: #3f51b5;
transition: transform .25s ease, box-shadow .25s ease;
}

.user-form .inside-user-form .gradient-form .color-row label:hover{
transform: translateY(-3px);
box-shadow:
0 12px 28px rgba(63,81,181,0.18),
inset 0 0 0 1px rgba(255,255,255,0.9);
}

.user-form .inside-user-form .gradient-form .color-row input[type="color"]{
width: 100%;
height: 44px;
margin: 10px 0 6px;
border-radius: 10px;
border: none;
cursor: pointer;
background: none;
padding: 0;
}

.user-form .inside-user-form .gradient-form .color-row span{
display: block;
font-size: 12px;
font-weight: 600;
color: #555;
background: rgba(63,81,181,0.08);
padding: 4px 8px;
border-radius: 8px;
text-align: center;
}

.content-darkmode .user-form .inside-user-form .gradient-form{
background: #808080;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
color: #e0e3ff;
}

.content-darkmode .user-form .inside-user-form .gradient-form #previewText{
background: #adadad;
box-shadow: inset 0 0 13px rgb(0 0 0);
}

.content-darkmode .inside-user-form .gradient-form #previewText #gradientText{
text-shadow: 0 0 14px rgba(255,255,255,0.15);
}

.content-darkmode .inside-user-form .gradient-form .color-row label{
background: linear-gradient(160deg, #1f2338, #14172a);
box-shadow: 0 6px 18px rgba(0,0,0,0.6);
color: #9aa7ff;
}

.content-darkmode .inside-user-form .gradient-form .color-row label:hover{
box-shadow:
0 12px 30px rgba(0,0,0,0.8),
inset 0 0 0 1px rgba(120,130,255,0.25);
}

.content-darkmode .inside-user-form .gradient-form .color-row input[type="color"]{
background-color: transparent;
}

.content-darkmode .inside-user-form .gradient-form .color-row span{
color: #cdd3ff;
background: rgba(130,140,255,0.15);
}
.inside-user-form .gradient-form button{
width: 50%;
margin-top: 25px;
padding: 10px;
border: none;
background: #3f51b5;
color: #fff;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 0px 5px 0px #000;
}

.inside-user-form .gradient-form .gradient-form button:hover{
background: #303f9f;
}


/* Title Purchase CSS */

.title-purchase-wrapper{
max-width: 520px;
font-family: system-ui;
padding: 10px;
text-align: -webkit-center;
background: #fff;
border-radius: 10px;
border: 2px solid #0071ff;
}

.title-purchase-wrapper .purchase-header{
font-size: 20px;
font-weight: 900;
color: #0071ff;
border-bottom: 1px solid #0071ff;
border-top: 1px solid #0071ff;
padding: 10px;
font-variant: small-caps;
margin: 0px -10px;
margin-bottom: 12px;
}

.title-purchase-wrapper .purchase-grid{
display: grid;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
gap: 12px;
}

.title-purchase-wrapper .purchase-grid .purchase-card{
background: #fff;
border-radius: 10px;
padding: 12px;
border: 1px solid #e5e7eb;
text-align: center;
transition: .25s ease;
}
.title-purchase-wrapper .purchase-grid .purchase-card:hover{
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.title-purchase-wrapper .purchase-grid .purchase-card .purchase-name{
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
color: #020617;    word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.title-purchase-wrapper .purchase-grid .purchase-card .title-preview{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 3px;
margin-bottom: 8px;
border: 1px solid #eee;
background: #f5f5f5;
}

.title-purchase-wrapper .purchase-grid .purchase-card .purchase-price{
font-size: 12px;
font-weight: 700;
margin-bottom: 10px;
color: #334155;
}

.title-purchase-wrapper .purchase-grid .purchase-card .btn-buy{
width: 100%;
border: none;
padding: 7px;
font-size: 11px;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
background: linear-gradient(135deg,#22c55e,#15803d);
color: #fff;
}
.btn-buy:hover{
filter: brightness(1.1);
}

.title-purchase-wrapper .purchase-grid .purchase-card .not-purchaseable{
font-size: 10px;
font-weight: 700;
padding: 6px;
border-radius: 6px;
background: #e5e7eb;
color: #64748b;
}

.title-purchase-wrapper .purchase-grid .purchase-card.disabled{
opacity: .8;
}
.title-purchase-wrapper .purchase-grid .purchase-card.disabled:hover{
transform: none;
box-shadow: none;
}

.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card{
background:#020617;
border-color:#1e293b;
}
.content-darkmode .title-purchase-wrapper .purchase-header,
.content-darkmode .title-purchase-wrapper .purchase-name,
.content-darkmode .title-purchase-wrapper .purchase-price{
color:#e5e7eb;
}

.title-purchase-wrapper .title-tabs{
display:flex;
gap:8px;
margin-bottom:12px;
}

.title-purchase-wrapper .tab-btn{
flex:1;
padding:8px;
font-size:12px;
font-weight:800;
border-radius:8px;
border:1px solid #e5e7eb;
background:#f8fafc;
cursor:pointer;
color:#334155;
transition:.25s;
}
.title-purchase-wrapper .tab-btn:hover{
background:#e5e7eb;
}

.title-purchase-wrapper .tab-btn.active{
background:linear-gradient(135deg,#3b82f6,#2563eb);
color:#fff;
border-color:transparent;
}

.title-purchase-wrapper .purchase-section{
display:none;
}
.title-purchase-wrapper .purchase-section.active{
display:block;
}
/* =========================
DARK MODE – TITLE PURCHASE
========================= */

.content-darkmode .title-purchase-wrapper{
background:#020617;
border-color:#3b82f6;
}

/* Header */
.content-darkmode .title-purchase-wrapper .purchase-header{
color:#93c5fd;
border-color:#1e40af;
}

/* Tabs */
.content-darkmode .title-purchase-wrapper .title-tabs .tab-btn{
background:#020617;
border-color:#1e293b;
color:#cbd5f5;
}

.content-darkmode .title-purchase-wrapper .title-tabs .tab-btn:hover{
background:#020617;
border-color:#334155;
}

.content-darkmode .title-purchase-wrapper .title-tabs .tab-btn.active{
background:linear-gradient(135deg,#3b82f6,#2563eb);
color:#ffffff;
}

/* Cards */
.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card{
background:#020617;
border-color:#1e293b;
}

.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card:hover{
box-shadow:0 12px 28px rgba(0,0,0,.6);
}

/* Title Name */
.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card .purchase-name{
color:#e5e7eb;
}

/* Preview Badge */
.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card .title-preview{
background:#020617;
border-color:#1e293b;
color:#c7d2fe;
}

/* Price */
.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card .purchase-price{
color:#94a3b8;
}

/* Buy Button */
.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card .btn-buy{
background:linear-gradient(135deg,#22c55e,#15803d);
color:#ffffff;
}

/* Not Purchaseable */
.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card .not-purchaseable{
background:#020617;
color:#94a3b8;
border:1px solid #1e293b;
}

/* Disabled Card */
.content-darkmode .title-purchase-wrapper .purchase-grid .purchase-card.disabled{
opacity:.6;
}



/* Power Roles Card */



.user-role-card {
margin:0px -15px;
background: #fff;
border-radius: 16px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
font-family: system-ui, "Segoe UI", sans-serif;
}

.user-role-card .user-role-header {
padding: 22px;
background: linear-gradient(135deg, #020617, #0f172a);
color: #fff;
border-radius: 16px 16px 0 0;
}

.user-role-card .user-role-form {
padding: 15px;
}

.user-role-card .user-role-form .user-role-form-group {
margin-bottom: 18px;
}

.user-role-card .user-role-form .user-role-form-group label {
font-size: 13px;
font-weight: 600;
display: block;
margin-bottom: 6px;
color: #334155;
}

.user-role-card .user-role-form .user-role-form-group .role-options label {
display: flex;
justify-content: space-between;
padding: 12px 14px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
cursor: pointer;
margin-bottom: 8px;
transition: 0.2s;
}

.user-role-card .user-role-form .user-role-form-group label span {
font-size: 12px;
color: #64748b;
}

/* Highlight selected role */
.user-role-card .user-role-form .user-role-form-group #r0:checked ~ .role-options label[for="r0"],
.user-role-card .user-role-form .user-role-form-group #r10:checked ~ .role-options label[for="r10"],
.user-role-card .user-role-form .user-role-form-group #r15:checked ~ .role-options label[for="r15"],
.user-role-card .user-role-form .user-role-form-group #r20:checked ~ .role-options label[for="r20"],
.user-role-card .user-role-form .user-role-form-group #r25:checked ~ .role-options label[for="r25"],
.user-role-card .user-role-form .user-role-form-group #r30:checked ~ .role-options label[for="r30"],
.user-role-card .user-role-form .user-role-form-group #r40:checked ~ .role-options label[for="r40"],
.user-role-card .user-role-form .user-role-form-group #r50:checked ~ .role-options label[for="r50"],
.user-role-card .user-role-form .user-role-form-group #r70:checked ~ .role-options label[for="r70"],
.user-role-card .user-role-form .user-role-form-group #r100:checked ~ .role-options label[for="r100"] {
background: #2563eb;
color: #fff;
border-color: #2563eb;
border-radius: 8px;
}


.user-role-card .user-role-form .user-role-form-group #r0:checked ~ .role-options label[for="r0"] span,
.user-role-card .user-role-form .user-role-form-group #r10:checked ~ .role-options label[for="r10"] span,
.user-role-card .user-role-form .user-role-form-group #r15:checked ~ .role-options label[for="r15"] span,
.user-role-card .user-role-form .user-role-form-group #r20:checked ~ .role-options label[for="r20"] span,
.user-role-card .user-role-form .user-role-form-group #r25:checked ~ .role-options label[for="r25"] span,
.user-role-card .user-role-form .user-role-form-group #r30:checked ~ .role-options label[for="r30"] span,
.user-role-card .user-role-form .user-role-form-group #r40:checked ~ .role-options label[for="r40"] span,
.user-role-card .user-role-form .user-role-form-group #r50:checked ~ .role-options label[for="r50"] span,
.user-role-card .user-role-form .user-role-form-group #r70:checked ~ .role-options label[for="r70"] span,
.user-role-card .user-role-form .user-role-form-group #r100:checked ~ .role-options label[for="r100"] span {
color: #e0e7ff;
}

/* Role Info */
.user-role-card .user-role-form .user-role-form-group .role-info {
position: relative;
padding: 14px;
background: #f8fafc;
border-left: 4px solid #2563eb;
border-radius: 10px;
font-size: 13px;
color: #334155;
min-height: 48px;
}

.user-role-card .user-role-form .user-role-form-group .role-info .info {
display: none;
font-weight: 500;
}

.user-role-card .user-role-form .user-role-form-group .role-info .default {
display: block;
}

/* Show info using CSS only */
.user-role-card .user-role-form .user-role-form-group #r0:checked ~ .role-info .r0,
.user-role-card .user-role-form .user-role-form-group #r10:checked ~ .role-info .r10,
.user-role-card .user-role-form .user-role-form-group #r15:checked ~ .role-info .r15,
.user-role-card .user-role-form .user-role-form-group #r20:checked ~ .role-info .r20,
.user-role-card .user-role-form .user-role-form-group #r25:checked ~ .role-info .r25,
.user-role-card .user-role-form .user-role-form-group #r30:checked ~ .role-info .r30,
.user-role-card .user-role-form .user-role-form-group #r40:checked ~ .role-info .r40,
.user-role-card .user-role-form .user-role-form-group #r50:checked ~ .role-info .r50,
.user-role-card .user-role-form .user-role-form-group #r70:checked ~ .role-info .r70,
.user-role-card .user-role-form .user-role-form-group #r100:checked ~ .role-info .r100 {
display: block;
}

.user-role-card .user-role-form .user-role-form-group #r0:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r10:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r15:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r20:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r25:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r30:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r40:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r50:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r70:checked ~ .role-info .default,
.user-role-card .user-role-form .user-role-form-group #r100:checked ~ .role-info .default {
display: none;
}

/* Buttons */
.user-role-card .user-role-form .form-actions {
display: flex;
gap: 12px;
margin-top: 22px;
}

.user-role-card .user-role-form .form-actions .btn-primary {
flex: 1;
padding: 12px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 600;
}

.user-role-card .user-role-form .form-actions .btn-secondary {
flex: 1;
padding: 12px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 10px;
font-weight: 600;
}


.user-role-card .user-role-form .user-role-form-group input#r100:checked ~ .role-info {
display: block;
background: #000;
color: #ffffff;
}

.user-role-card .user-role-form .user-role-form-group input {
display: none;
}

.user-role-card .user-role-header .user-role-header-main {
font-size: 20px;
font-weight: 700;
font-variant: small-caps;
}

.user-role-card .user-role-header .user-role-header-second {
font-variant: small-caps;
font-size: 16px;
font-weight: 400;
}


/* Admin Panel Role Setting */


/* Container */
.roles-container {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #fff;
padding: 10px;
border-radius: 10px;
}

/* Page header */
.roles-container .role-page-header {
text-align: center;
margin-bottom: 30px;
}
.roles-container .role-page-header font {
font-size: 26px;
font-weight: 700;
color: #1e3a8a;
font-variant: small-caps;
}
.roles-container .role-page-header p {
color: #64748b;
font-size: 14px;
}

/* Roles grid */
.roles-container .roles-grid {
display: grid;
gap: 20px;
}

/* Role card */
.roles-container .roles-grid .role-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
border: 1px solid #e2e8f0;
transition: transform 0.2s, box-shadow 0.2s;
}
.roles-container .roles-grid .role-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* Card header */
.roles-container .roles-grid .role-card .role-card-header {
padding: 15px 20px;
background: linear-gradient(90deg,#2563eb,#1d4ed8);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 16px;
}
.roles-container .roles-grid .role-card .role-title .merit-badge {
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 8px;
font-size: 12px;
margin-left: 10px;
font-weight: 500;
}
.roles-container .roles-grid .role-card .edit-btn,.roles-container .roles-grid .cancel-btn {
background: #facc15;
color: #1f2937;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: 0.2s;
}
.roles-container .roles-grid .role-card .edit-btn:hover,.roles-container .roles-grid .cancel-btn:hover {
background: #fbbf24;
}

/* Card body */
.roles-container .roles-grid .role-card .role-card-body {
padding: 15px 20px;
background: #f8fafc;
}

/* Powers edit grid */
.powers-grid {
display: grid;
gap: 10px;
}

/* Individual power item */
.roles-container .roles-grid .role-card .power-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-radius: 8px;
background: #fff;
border: 1px solid #cbd5e1;
transition: 0.2s;
font-size: 14px;
}
.roles-container .roles-grid .role-card .power-item:hover {
background: #e0f2fe;
}
.roles-container .roles-grid .role-card .power-item input[type="checkbox"] {
margin-right: 8px;
width: 16px;
height: 16px;
}

/* Power name */
.roles-container .roles-grid .role-card .power-item .power-name {
flex: 1;
font-weight: 500;
color: #1e293b;
font-variant: small-caps;
}

/* Status badge */
.roles-container .roles-grid .role-card .power-item .status-badge {
padding: 2px 6px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.roles-container .roles-grid .role-card .power-item .status-badge.active {
background: #d1fae5;
color: #065f46;
}
.roles-container .roles-grid .role-card .power-item .status-badge.inactive {
background: #fee2e2;
color: #b91c1c;
}

.roles-container .roles-grid .save-btn {
margin-top: 10px;
background: #10b981;
color: #fff;
border: none;
padding: 8px 14px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.roles-container .roles-grid .save-btn:hover {
background: #059669;
}




/* User Stars */



.star-role-panel {
display: grid;
gap: 20px;
padding: 20px 0px;
background: #fff;
border-radius: 10px;
}

.star-role-panel .star-card {
border-radius: 16px;
padding: 22px;
color: #fff;
position: relative;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.35);
transition: transform .3s ease;
}

.star-role-panel  .star-card:hover {
transform: translateY(-6px);
}

.star-role-panel .star-icon {
font-size: 40px;
margin-bottom: 10px;
}

.star-role-panel .star-card h3 {
margin: 0;
font-size: 22px;
font-weight: 700;
}

.star-role-panel  .star-title {
opacity: .9;
margin: 6px 0 14px;
font-weight: 500;
}

.star-role-panel  .star-powers {
list-style: none;
padding: 0;
margin: 0 0 18px;
}

.star-role-panel  .star-powers li {
font-size: 14px;
margin-bottom: 6px;
opacity: .95;
}

/* ACTION BUTTONS */
.star-role-panel  .star-actions {
display: flex;
gap: 10px;
}

.star-role-panel .star-actions .btn {
flex: 1;
border: none;
padding: 10px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: all .25s ease;
}

.star-role-panel .star-actions .btn.give {
background: rgba(255,255,255,0.2);
color: #fff;
}

.star-role-panel .star-actions .btn.remove {
background: rgba(0,0,0,0.25);
color: #fff;
}

.star-role-panel .star-actions .btn:hover {
transform: scale(1.05);
}

/* STAR COLORS */
.star-role-panel .star-card.pink {
background: linear-gradient(135deg, #ff55b1, #c01a50);
}

.star-role-panel .star-card.red {
background: linear-gradient(135deg, #ff4b4b, #a40000);
}

/* STAR COLORS */
.star-role-panel .star-card.gold {
background: linear-gradient(135deg, #f6c453, #c08a1a);
}
/* STATUS BADGE */
.star-role-panel .star-status {
position: absolute;
top: 14px;
right: 14px;
padding: 5px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}

.star-role-panel .star-status.active {
background: rgba(0, 255, 120, 0.2);
color: #00ff90;
border: 1px solid rgba(0, 255, 120, 0.4);
}

.star-role-panel .star-status.inactive {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
}

/* ACTIVE CARD GLOW */
.star-role-panel .star-card.active {
box-shadow: inset 0 0 0 2px rgba(0, 255, 150, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.45);
}

/* DISABLED GIVE BUTTON */
.star-role-panel .star-actions .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}




.user-login #step2 .login-form-text {
font-weight: 600;
color: #374151;
text-align: center;
padding: 20px 0px;
border-bottom: 1px solid #737373ee;
margin-bottom: -15px;
}

.user-login #firebaseui-auth-container {
width: 100%;
margin-top: 10px;
margin-left: 7.5%;
padding: 10px 0px;
}

/* FirebaseUI button override to match user-login style */
.user-login .firebaseui-idp-button {
width: 100% !important;
border-radius: 12px !important;
height: 48px !important;
font-size: 15px !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.user-login .firebaseui-idp-button.google {
background: #4285f4 !important;
color: #fff !important;
border: none !important;
}

.user-login .firebaseui-idp-button.google:hover {
background: #357ae8 !important;
}



.verification-complete-wrapper {padding: 10px;}

.verification-complete-wrapper .verification-card {
background: #ffffff;
border-radius: 20px;
padding: 40px 20px;
width: 100%;
text-align: center;
box-shadow: 0 0 10px rgb(0 0 0 / 28%);
animation: fadeInUp 0.6s ease forwards;
}

.verification-complete-wrapper .verification-card .verification-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.verification-complete-wrapper .verification-card .verification-header i {
font-size: 34px;
color: #534caf;
background: #e8e8f5;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
}

.verification-complete-wrapper .verification-card .verification-header h2 {
font-size: 24px;
font-weight: 600;
color: #1f2937;
}

.verification-complete-wrapper .verification-card .verification-body p {
font-size: 15px;
color: #374151;
margin-bottom: 20px;
font-variant-caps: all-small-caps;
font-weight: 900;
padding: 5px;
border: 1px solid;
box-shadow: inset 0px 0px 3px 0px #000;
border-radius: 5px;
}

.verification-complete-wrapper .verification-card .verification-success-icon {
margin: 20px 0;
animation: popIn 0.6s ease forwards;
}

.verification-complete-wrapper .verification-card .verification-footer {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-top: 40px;
}

.verification-complete-wrapper .verification-card .verification-footer .btn-primary, .verification-complete-wrapper .verification-card .verification-footer .btn-secondary {
padding: 12px 20px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}

.verification-complete-wrapper .verification-card .verification-footer .btn-primary {
background: linear-gradient(135deg,#6366f1,#4f46e5);
color: #fff;
}

.verification-complete-wrapper .verification-card .verification-footer .btn-primary:hover {
background: linear-gradient(135deg,#4f46e5,#6366f1);
transform: translateY(-2px);
}

.verification-complete-wrapper .verification-card .verification-footer .btn-secondary {
background: #f3f4f6;
color: #1f2937;
border: 1px solid #e5e7eb;
}

.verification-complete-wrapper .verification-card .verification-footer .btn-secondary:hover {
background: #e5e7eb;
transform: translateY(-2px);
}



.verify-method-wrapper {
font-family: 'Segoe UI', sans-serif;
padding: 10px;
}

.verify-method-wrapper .verify-method-card {
width: 100%;
background: #ffffff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 25px 45px rgba(0,0,0,0.08);
}

/* Loading */
.verify-method-wrapper .verify-method-card .verify-loading {
text-align: center;
padding: 40px 0;
}

.verify-method-wrapper .verify-method-card .loading-spinner {
width: 42px;
height: 42px;
border: 4px solid #e5e7eb;
border-top: 4px solid #6366f1;
border-radius: 50%;
margin: 0 auto 14px;
}

.verify-method-wrapper .verify-method-card .loading-text {
font-size: 14px;
color: #6b7280;
}
/* Content */
.verify-method-wrapper .verify-method-card .verify-method-text {
font-size: 15px;
color: #374151;
margin-bottom: 18px;
text-align: center;
}

/* Firebase override */
.verify-method-wrapper .verify-method-card .firebaseui-container {
box-shadow: none !important;
}

.verify-method-wrapper .verify-method-card .firebaseui-idp-button {
border-radius: 14px !important;
height: 48px !important;
}

/* Footer */
.verify-method-wrapper .verify-method-card .verify-method-footer {
margin-top: 18px;
font-size: 13px;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}

/* Header */
.verify-method-wrapper .verify-method-card .verify-header {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 600;
color: #1f2937;
margin-bottom: 18px;
}

.verify-method-wrapper .verify-method-card .verify-header i {
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #6366f1, #4f46e5);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 18px;
}

.verify-wrapper {padding: 10px;user-select: none;}

.verify-wrapper .verify-card {
width: 100%;
background: #ffffff;
border-radius: 18px;
padding: 32px 28px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.verify-wrapper .verify-card .verify-icon {
width: 72px;
height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, #4f46e5, #6366f1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 30px;
}

.verify-wrapper .verify-card .verify-title {
font-size: 22px;
font-weight: 600;
color: #111827;
margin-bottom: 10px;
}

.verify-wrapper .verify-card .verify-text {
font-size: 14.5px;
color: #6b7280;
line-height: 1.6;
margin-bottom: 26px;
}

.verify-wrapper .verify-card .verify-btn {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #4f46e5, #6366f1);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}

.verify-wrapper .verify-card .verify-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.35);
}

.verify-wrapper .verify-card .verify-note {
margin-top: 18px;
font-size: 13px;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}


/* FULL PAGE CENTER */
.incomplete-profile-page-wrap {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
padding: 10px;
}

/* SMALL CARD */
.incomplete-profile-page-wrap .incomplete-profile-mini-card {
width: 100%;
padding: 26px 24px;
border-radius: 10px;
background: #ffffff;
text-align: center;
box-shadow: 0 0 10px rgb(99 102 241);
}

/* ICON */
.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-icon {
width: 58px;
height: 58px;
border-radius: 10px;
margin: 0 auto 14px;
background: linear-gradient(135deg, #6366f1, #ec4899);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 0 5px rgb(99 102 241);
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .profile-mini-card h3 {
margin: 0 0 6px;
font-size: 20px;
font-weight: 700;
color: #312e81;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .profile-mini-card p {
margin: 0 0 18px;
font-size: 14px;
color: #6b7280;
line-height: 1.5;
}

/* PROGRESS */
.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-progress {
margin-bottom: 20px;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-progress-info {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-bottom: 6px;
color: #4338ca;
font-weight: 600;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-bar {
height: 7px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-fill {
height: 100%;
background: linear-gradient(135deg, #6366f1, #ec4899);
border-radius: 999px;
}

/* STEPS */
.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-steps {
display: flex;
flex-direction: column;
gap: 10px;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step i {
font-size: 16px;
color: #6366f1;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step span {
flex: 1;
font-size: 13px;
font-weight: 500;
color: #1f2937;
text-align: left;
}

.incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step a {
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-decoration: none;
color: #fff;
background: linear-gradient(135deg, #6366f1, #ec4899);
}

/* CARD */
.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card {
background: #020617;
box-shadow: 0 0 10px rgba(99,102,241,0.5);
margin:10px 0px;
}

/* ICON */
.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-icon {
box-shadow: 0 0 12px rgba(236,72,153,0.6);
}

/* HEADINGS */
.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card h3 {
color: #e0e7ff;
}

.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card p {
color: #94a3b8;
}

/* PROGRESS */
.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-progress-info {
color: #c7d2fe;
}

.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-bar {
background: #1e293b;
}

.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-fill {
background: linear-gradient(135deg, #6366f1, #ec4899);
}

/* STEPS */
.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step {
background: #020617;
border: 1px solid #1e293b;
}

.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step i {
color: #a5b4fc;
}

.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step span {
color: #e5e7eb;
}

/* BUTTON */
.content-darkmode .web-content .incomplete-profile-page-wrap .incomplete-profile-mini-card .mini-step a {
background: linear-gradient(135deg, #6366f1, #ec4899);
color: #fff;
box-shadow: 0 4px 12px rgba(99,102,241,0.5);
}

/* USER LOGIN */
.content-darkmode .web-content .user-login #step2 .login-form-text {
color: #cbd5e1;
border-bottom: 1px solid #475569;
}

.content-darkmode .web-content .user-login #firebaseui-auth-container {
margin-left: 0;
}

.content-darkmode .web-content .user-login .firebaseui-idp-button.google {
background: #3367d6 !important;
color: #fff !important;
}

.content-darkmode .web-content .user-login .firebaseui-idp-button.google:hover {
background: #274b9c !important;
}

/* VERIFICATION COMPLETE CARD */
.content-darkmode .web-content .verification-complete-wrapper .verification-card {
background: #1e293b;
}

.content-darkmode .web-content .verification-complete-wrapper .verification-card .verification-header i {
background: #3b4254;
color: #c7d2fe;
}

.content-darkmode .web-content .verification-complete-wrapper .verification-card .verification-header h2 {
color: #e0e7ff;
}

.content-darkmode .web-content .verification-complete-wrapper .verification-card .verification-body p {
color: #cbd5e1;
border-color: #475569;
box-shadow: inset 0px 0px 3px 0px #000;
}

.content-darkmode .web-content .verification-complete-wrapper .verification-card .verification-footer .btn-primary {
background: linear-gradient(135deg,#6366f1,#4f46e5);
color: #fff;
}

.content-darkmode .web-content .verification-complete-wrapper .verification-card .verification-footer .btn-secondary {
background: #334155;
color: #cbd5e1;
border-color: #475569;
}

/* VERIFY METHOD CARD */
.content-darkmode .web-content .verify-method-wrapper .verify-method-card {
background: #1e293b;
}

.content-darkmode .web-content .verify-method-wrapper .verify-method-card .verify-method-text,
.content-darkmode .web-content .verify-method-wrapper .verify-method-card .verify-method-footer {
color: #cbd5e1;
}

.content-darkmode .web-content .verify-method-wrapper .verify-method-card .verify-header {
color: #e0e7ff;
}

.content-darkmode .web-content .verify-method-wrapper .verify-method-card .verify-header i {
background: linear-gradient(135deg,#4f46e5,#6366f1);
color: #fff;
}

/* VERIFY WRAPPER */
.content-darkmode .web-content .verify-wrapper .verify-card {
background: #1e293b;
}

.content-darkmode .web-content .verify-wrapper .verify-card .verify-icon {
background: linear-gradient(135deg,#6366f1,#4f46e5);
color: #fff;
}

.content-darkmode .web-content .verify-wrapper .verify-card .verify-title {
color: #e0e7ff;
}

.content-darkmode .web-content .verify-wrapper .verify-card .verify-text,
.content-darkmode .web-content .verify-wrapper .verify-card .verify-note {
color: #cbd5e1;
}

.content-darkmode .web-content .verify-wrapper .verify-card .verify-btn {
background: linear-gradient(135deg,#6366f1,#4f46e5);
color: #fff;
}


.user-id-status {
padding: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* CARD */
.user-id-status .status-card {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 22px;
border-radius: 16px;
background: #ffffff;
border: 1px solid #e5e7eb;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
max-width: 520px;
}

/* ICON */
.user-id-status .status-icon {
width: 58px;
height: 58px;
border-radius: 14px;
background: linear-gradient(135deg,#6366f1,#4f46e5);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(99,102,241,0.4);
}

.user-id-status .status-icon i {
font-size: 32px;
animation: reviewspulse 1.8s infinite;
color: #fff;
}

/* CONTENT */
.user-id-status .status-content h3 {
margin: 6px 0 8px;
font-size: 18px;
font-weight: 700;
color: #111827;
}

.user-id-status .status-content p {
font-size: 14px;
color: #6b7280;
line-height: 1.6;
}

/* BADGE */
.user-id-status .status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #4338ca;
background: #eef2ff;
border: 1px solid #c7d2fe;
}

/* STATUS COLOR */
.user-id-status .status-card.in-process {
border-left: 5px solid #6366f1;
}

/* ANIMATION */
@keyframes reviewspulse {
0%   { transform: scale(1); opacity: 1; }
50%  { transform: scale(1.08); opacity: .85; }
100% { transform: scale(1); opacity: 1; }
}
.content-darkmode .web-content .user-id-status .status-card {
background: #1e293b;
border-color: #334155;
}

.content-darkmode .web-content .user-id-status .status-content h3 {
color: #e5e7eb;
}

.content-darkmode .web-content .user-id-status .status-content p {
color: #cbd5e1;
}

.content-darkmode .web-content .user-id-status .status-badge {
background: #312e81;
color: #c7d2fe;
border-color: #4f46e5;
}








/* Container */
.page-notifications {
max-width: 880px;
margin: 30px auto;
background: #fff;
border-radius: 16px;
border: 2px solid #2563eb;
overflow: hidden;
}



/* Top Buttons */
.page-notifications .sn-top-buttons {
display: flex;
justify-content: center;
background: linear-gradient(90deg, #6a11cb, #2575fc);
padding: 10px;
gap: 12px;
}
.page-notifications .sn-top-buttons .sn-btn {
flex: 1;
padding: 10px 0;
border-radius: 10px;
border: none;
font-weight: 700;
color: #fff;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
text-align: -webkit-center;
}
.page-notifications .sn-top-buttons .sn-btn.active {
background: #fff;
color: #2575fc;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.page-notifications .sn-top-buttons button {
background: transparent;
border: 0px;
}

/* Panel Header */
.page-notifications .sn-panel-header {
display: flex;
justify-content: space-between;
padding: 10px 15px;
border-bottom: 1px solid #e0e0e0;
align-items: center;
align-content: center;
padding-bottom: 5px;
}
.page-notifications .sn-panel-header .sn-panel-title {
font-size: 26px;
font-weight: 900;
color: #333;
font-variant: all-small-caps;
margin-top: 0px;
}
.page-notifications .sn-panel-header .sn-panel-menu {
position: relative;
}
.page-notifications .sn-panel-header .sn-menu-toggle {
background: transparent;
border: none;
font-size: 22px;
cursor: pointer;
}
.page-notifications .sn-panel-header .sn-menu-dropdown {
display: none;
position: absolute;
top: 28px;
right: 0;
background: #fff;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
overflow: hidden;
z-index: 10;
width: 150px;
}
/* ⭐ THIS MAKES IT OPEN */
.page-notifications .sn-menu-checkbox:checked ~ .sn-menu-dropdown{
display: block;
}
.page-notifications .sn-panel-header .sn-menu-item {
display: block;
padding: 12px 20px;
text-decoration: none;
font-weight: 600;
color: #fff;
}
.page-notifications .sn-panel-header .sn-menu-item.seen { background: #6a11cb; }
.page-notifications .sn-panel-header .sn-menu-item.delete { background: #e53935; }


.page-notifications .sn-panel-header .sn-menu-item i {
display: inline-block;
float: left;
margin-left: -10px;
margin-right: 10px;
}
/* Notification Item */
.page-notifications  .pn-item {
position: relative;
display: flex;
gap: 15px;
padding: 10px 15px;
border-bottom: 1px solid #f1f5f9;
margin-top: -1px;
}

.page-notifications  .pn-item:hover {
background: #f8fafc;
}

.page-notifications  .pn-item.unread {
background: #eef5ff;
box-shadow: inset 4px 0 0 #2563eb;
}

/* Avatar */
.page-notifications .pn-item .pn-avatar {
width: 53px;
height: 53px;
border-radius: 5px;
object-fit: cover;
margin-top: 3px;
}

/* Body */
.page-notifications .pn-item .pn-body {
flex: 1;
}

.page-notifications .pn-item .pn-body .pn-text {
font-weight: 700;
color: #0f172a;
font-size: 15px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 150px;
}

.page-notifications .pn-item .pn-body .pn-subtext {
margin-top: -1px;
font-size: 14px;
color: #475569;
line-height: 1.4;
}

.page-notifications .pn-item .pn-meta {
margin-top: -1px;
font-size: 12px;
color: #64748b;
}

/* Thumbnail */
.page-notifications .pn-item .pn-thumb {
width: 60px;
height: 60px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0px 5px rgba(0, 0, 0, .18);
flex-shrink: 0;
}

.page-notifications .pn-item .pn-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-notifications .pn-item .pn-thumb .pn-on-thumb-icon {
position: absolute;
margin-top: 40px;
margin-left: -65px;
border-radius: 100%;
border: 2px solid #fff;
}

.page-notifications .pn-item  .pn-on-thumb-icon img {
width: 20px;
background: #fff;
border-radius: 100%;
}


.page-notifications .pn-item .pn-thumb-req-actions {
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
align-content: center;
}

/* Base button style */
.page-notifications .pn-item .pn-thumb-req-actions button{
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
width: 85px;
height: 23px;
padding: 9px 8px;
border-radius: 5px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
letter-spacing: .2px;
transition: all .2s ease;
font: -webkit-small-control;
font-size: 12px;
}

/* Icon inside button */
.page-notifications .pn-item .pn-thumb-req-actions button i{
font-size: 11px;
min-width: 16px;
text-align: center;
}

/* Approve button */
.page-notifications .pn-item .req-accept{
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #ffffff;
}

.page-notifications .pn-item .req-accept:hover{
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(34,197,94,.45);
}

/* Reject button */
.page-notifications .pn-item .req-reject{
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #ffffff;
}

.page-notifications .pn-item .req-reject:hover{
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(239,68,68,.45);
}


.page-notifications .pn-item .pn-meta span.pn-time {
font-variant: all-small-caps;
font-size: 13px;
}


/* =========================
DARK MODE – NOTIFICATIONS
========================= */

.content-darkmode .web-content .page-notifications {
background: #0f172a;
border-color: #4f46e5;
}

/* Top Buttons */
.content-darkmode .web-content .page-notifications .sn-top-buttons {
background: linear-gradient(90deg, #312e81, #1e3a8a);
}

.content-darkmode .web-content .page-notifications .sn-top-buttons .sn-btn {
background: rgba(255,255,255,0.12);
color: #e5e7eb;
}

.content-darkmode .web-content .page-notifications .sn-top-buttons .sn-btn.active {
background: #1e293b;
color: #a5b4fc;
box-shadow: 0 4px 18px rgba(79,70,229,0.4);
}

/* Panel Header */
.content-darkmode .web-content .page-notifications .sn-panel-header {
border-bottom-color: #334155;
}

.content-darkmode .web-content .page-notifications .sn-panel-title {
color: #e5e7eb;
}

.content-darkmode .web-content .page-notifications .sn-menu-toggle {
color: #cbd5f5;
}

/* Menu Dropdown */
.content-darkmode .web-content .page-notifications .sn-menu-dropdown {
background: #1e293b;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.content-darkmode .web-content .page-notifications .sn-menu-item {
color: #ffffff;
}

.content-darkmode .web-content .page-notifications .sn-menu-item.seen {
background: linear-gradient(135deg,#4f46e5,#6366f1);
}

.content-darkmode .web-content .page-notifications .sn-menu-item.delete {
background: linear-gradient(135deg,#ef4444,#b91c1c);
}

/* Notification Item */
.content-darkmode .web-content .page-notifications .pn-item {
border-bottom-color: #1e293b;
}

.content-darkmode .web-content .page-notifications .pn-item:hover {
background: #020617;
}

.content-darkmode .web-content .page-notifications .pn-item.unread {
background: #020617;
box-shadow: inset 4px 0 0 #6366f1;
}

/* Avatar */
.content-darkmode .web-content .page-notifications .pn-avatar {
border: 1px solid #1e293b;
}

/* Body Text */
.content-darkmode .web-content .page-notifications .pn-text {
color: #e5e7eb;
}

.content-darkmode .web-content .page-notifications .pn-subtext {
color: #94a3b8;
}

.content-darkmode .web-content .page-notifications .pn-meta {
color: #64748b;
}

/* Thumbnail */
.content-darkmode .web-content .page-notifications .pn-thumb {
box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

.content-darkmode .web-content .page-notifications .pn-thumb .pn-on-thumb-icon {
border-color: #0f172a;
}

/* Request Action Buttons */
.content-darkmode .web-content .page-notifications .req-accept {
background: linear-gradient(135deg, #22c55e, #15803d);
}

.content-darkmode .web-content .page-notifications .req-reject {
background: linear-gradient(135deg, #ef4444, #991b1b);
}

/* Time Text */
.content-darkmode .web-content .page-notifications .pn-meta span.pn-time {
color: #94a3b8;
}
.user_profile .user_first_info .user_title .user_online_role {
padding: 10px;
}

.content-darkmode .web-content .user_onlines .user_online .user_online_role {
border-bottom: 1px solid #505050;
border-top: 1px solid #505050;
}



.inbox-wrapper {
max-width: 560px;
margin: auto;
background: #fff;
border-radius: 16px;
border: 1px solid #e5e7eb;
overflow: hidden;
box-sizing: border-box;
font-family: Inter, system-ui, sans-serif;    
}

/* TOP BAR */
.inbox-wrapper .inbox-topbar {
position: relative;
border-bottom: 1px solid #e5e7eb;
overflow: hidden;
z-index: 1;
}

.inbox-wrapper .inbox-topbar::before {
content: "";
position: absolute;
inset: 0;
background: url(../../icons/inbox-wrapper-back.jpg);
background-size: 100% 250%;
z-index: -1;
}

.inbox-wrapper .inbox-topbar .inbox-top-header{
padding:14px 14px;
display:flex;
align-items:center;
justify-content:space-between;
border-radius:22px 22px 0px 0px;
position:sticky;
top:0;
z-index:20;
box-shadow:0 4px 20px rgba(87,76,214,.18);
}

.inbox-wrapper .inbox-topbar .inbox-header-title{
display:flex;
align-items:center;
gap:10px;
color:#fff;
font-size:20px;
font-weight:800;
letter-spacing:.3px;
}

.inbox-wrapper .inbox-topbar .inbox-header-title i{
font-size:20px;
display:flex;
}

.inbox-wrapper .inbox-topbar .new-msg-btn{
height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,0.9);
color:#574cd6;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.22s ease;
box-shadow:
0 4px 14px rgba(0,0,0,.12);
}

.inbox-wrapper .inbox-topbar .new-msg-btn:hover{
transform:translateY(-2px);
background:#f5f3ff;
}

.inbox-wrapper .inbox-topbar .new-msg-btn i{
font-size:14px;
display:flex;
}


.inbox-wrapper .inbox-topbar .inbox-search-wrap{
padding:0px 14px 14px;
position:sticky;
top:70px;
z-index:19;
}

.inbox-wrapper .inbox-topbar .inbox-search{
height:45px;
background:rgba(255,255,255,0.9);
border-radius:18px;
display:flex;
align-items:center;
padding:0 16px;
gap:12px;
box-shadow:
0 6px 18px rgba(0,0,0,.12);
}

.inbox-wrapper .inbox-topbar .inbox-search i{
font-size:16px;
color:#574cd6;
display:flex;
}

.inbox-wrapper .inbox-topbar .inbox-search input{
flex:1;
border:none;
outline:none;
background:transparent;
font-size:12px;
font-weight:500;
color:#574cd6;
}

.inbox-wrapper .inbox-topbar .inbox-search input::placeholder{
color:#8d86e8;
}

.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search{
background:#2a275f;
box-shadow:none;
}

.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search input{
color:#fff;
}

.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search input::placeholder{
color:#b8b3ff;
}


/* FOCUS EFFECT */
.inbox-wrapper .inbox-topbar .inbox-search:focus-within {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
background: #fff;
}


.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search:focus-within {
background: #2a275f;
border-color: #6366f1;
}

.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search i{
color:#b8b3ff;
}

.content-darkmode .inbox-wrapper .inbox-topbar .new-msg-btn{
background:#2a275f;
color:#fff;
}

.content-darkmode .inbox-wrapper .inbox-topbar .new-msg-btn:hover{
background:#35317a;
}


/* =========================
MOBILE
========================= */

@media(max-width:768px){

.inbox-wrapper .inbox-topbar .inbox-top-header{
border-radius:0;
padding:14px;
}

.inbox-wrapper .inbox-topbar .inbox-header-title{
font-size:18px;
}

.inbox-wrapper .inbox-topbar .new-msg-btn{
height:36px;
padding:0 14px;
font-size:12px;
}

.inbox-wrapper .inbox-topbar .inbox-search{
height:40px;
border-radius:16px;
}

}

.inbox-wrapper .inbox-bottom-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px;
}

.inbox-wrapper .inbox-bottom-actions .action-btn{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding: 9px 0px;
border-radius: 5px;
text-decoration:none;
color:#fff;
font-size:12px;
font-weight:700;
transition:all .25s ease;
position:relative;
overflow:hidden;
}

.inbox-wrapper .inbox-bottom-actions .action-btn i{
font-size:16px;
display:flex;
}

.inbox-wrapper .inbox-bottom-actions .action-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}


.inbox-wrapper .inbox-bottom-actions .action-btn:active{
transform:scale(0.97);
}

.inbox-wrapper .inbox-bottom-actions .action-btn.seen-all{
background:linear-gradient(135deg,#4facfe,#00f2fe);
}

.inbox-wrapper .inbox-bottom-actions .action-btn.delete-all{
background:linear-gradient(135deg,#ff416c,#ff4b2b);
}

.inbox-wrapper .inbox-bottom-actions .action-btn.privacy{
background:linear-gradient(135deg,#574cd6,#7b6ef6);
}


.inbox-wrapper .inbox-bottom-actions .action-btn::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
transform:skewX(-20deg);
}

.inbox-wrapper .inbox-bottom-actions .action-btn:hover::after{
left:140%;
transition:0.7s ease;
}

.content-darkmode .inbox-wrapper .inbox-bottom-actions{
background:rgba(20,20,20,0.55);
border:1px solid rgba(255,255,255,0.08);
}


/* LIST */
.inbox-wrapper .inbox-v2 {
background: #fff;
}

/* ROW */
.inbox-wrapper .inbox-v2 .inbox-row {
display: flex;
gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s ease;
}

.inbox-wrapper .inbox-v2 .inbox-row:hover {
background: #f8fafc;
}

/* DP */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-dp-wrap .inbox-dp {
width: 53px;
height: 53px;
border-radius: 5px;
object-fit: cover;
border: 1px solid #e5e7eb;
}

/* BODY */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-body {
flex: 1;
min-width: 0;
}

.inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-name {
font-size: 13px;
font-weight: 600;
color: #0f172a;
}

.inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-role {
font-size: 11px;
margin-top: 1.5px;
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
}

/* MESSAGE */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-msg {
margin-top: 3px;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* RIGHT */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-right {
min-width: 40px;
text-align: right;
margin-top: 5px;
}



.inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-msg .username {
font-weight: 600;
flex-shrink: 0; /* keeps username from shrinking */
max-width: 32%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-msg .message-text {
flex: 1; /* takes remaining space */
word-wrap: break-word;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 4px;
}


.inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-msg .username:before {
content: ":";
float: right;
}

.inbox-wrapper .inbox-v2 .inbox-row .inbox-right .time {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
font-variant-caps: all-small-caps;
}

/* UNREAD */
.inbox-wrapper .inbox-v2 .inbox-row.unread .inbox-msg {
color: #0f172a;
font-weight: 600;
}

/* FOOTER */
.inbox-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: #f8fafc;
border-top: 1px solid #e5e7eb;
}

.inbox-wrapper .page-btn {
padding: 8px 16px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}

.inbox-wrapper .page-btn.primary {
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: #fff;
border: none;
}

.inbox-wrapper .page-info {
font-size: 12px;
font-weight: 600;
color: #64748b;
}

.inbox-wrapper .inbox-v2 .privacy_reminder_bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:
linear-gradient(135deg,
rgba(87,76,214,.12),
rgba(122,111,255,.08));border:1px solid rgba(87,76,214,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;overflow:hidden;}

.inbox-wrapper .inbox-v2 .privacy_reminder_bar::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:1px;
background:rgba(255,255,255,.35);
}

.inbox-wrapper .inbox-v2 .privacy_reminder_left{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}

.inbox-wrapper .inbox-v2 .privacy_reminder_icon{width:42px;height:42px;min-width:42px;border-radius: 10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5d52db,#786eff);color:#fff;font-size:18px;box-shadow: 0 0 10px rgba(93, 82, 219, .28), inset 0 0 0 rgba(255, 255, 255, .15);}

.inbox-wrapper .inbox-v2 .privacy_reminder_content{
min-width:0;
}

.inbox-wrapper .inbox-v2 .privacy_reminder_title{
font-size:13px;
font-weight:700;
color:#2d2d38;
line-height:1.2;
}

.inbox-wrapper .inbox-v2 .privacy_reminder_text{
font-size:12px;
color:#6f748b;
margin-top:2px;
line-height:1.35;
word-break:break-word;
}

.inbox-wrapper .inbox-v2 .privacy_reminder_btn{
width:38px;
height:38px;
min-width:38px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(87,76,214,.1);
border:1px solid rgba(87,76,214,.15);
color:#5b52db;
font-size:16px;
cursor:pointer;
transition:.18s ease;
margin-bottom:0!important;
max-width:unset!important;
font-weight:unset!important;
}

.inbox-wrapper .inbox-v2 .privacy_reminder_btn:hover{
transform:translateY(-1px);
background:#5b52db;
color:#fff;
}

/* dark mode */
.content-darkmode .inbox-wrapper .inbox-v2 .privacy_reminder_bar{
background:
linear-gradient(135deg,
rgba(87,76,214,.16),
rgba(87,76,214,.07));
border-color:rgba(124,115,255,.14);
}

.content-darkmode .inbox-wrapper .inbox-v2 .privacy_reminder_title{
color:#f2f3ff;
}

.content-darkmode .inbox-wrapper .inbox-v2 .privacy_reminder_text{
color:#aaafc8;
}

.content-darkmode .inbox-wrapper .inbox-v2 .privacy_reminder_btn{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.06);
color:#c7caff;
}

.content-darkmode .inbox-wrapper .inbox-v2 .privacy_reminder_btn:hover{
background:#5b52db;
color:#fff;
}

/* MESSAGE COUNT */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-right .msg-count {
display: table-caption;
margin-top: 6px;
padding: 2px 5px;
font-size: 11px;
font-weight: 700;
border-radius: 5px;
background: linear-gradient(135deg, #6366f1, #3b82f6);
color: #fff;
box-shadow: 0 0 5px rgba(99, 102, 241, 0.35);
text-align: -webkit-center;
position: absolute;
right: 18px;
}

/* UNREAD ROW BACKGROUND */
.inbox-wrapper .inbox-v2 .inbox-row.unread {
background: linear-gradient(
90deg,
rgba(99,102,241,0.10),
rgba(255,255,255,0)
);
position: relative;
}

/* LEFT ACCENT LINE */
.inbox-wrapper .inbox-v2 .inbox-row.unread::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 4px;
border-radius: 0 6px 6px 0;
background: linear-gradient(180deg, #6366f1, #3b82f6);
}
/* DP WRAPPER */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-dp-wrap {
position: relative;
width: 53px;
height: 53px;
flex-shrink: 0;
}
/* STATUS DOT BASE */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-dp-wrap.onlineuser::after {
content: "";
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #fff;
}

/* ONLINE */
.inbox-wrapper .inbox-v2 .inbox-row .inbox-dp-wrap.onlineuser::after {
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34,197,94,0.35);
animation: onlinePulse 1.8s infinite;
}

@keyframes onlinePulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}



.inbox-wrapper .inbox-v2 .inbox-row .inbox-msg img.emojisclass {
max-width: 15px;
}

.inbox-wrapper .inbox-v2 .inbox-row .inbox-body span.msg-text {
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}

.inbox-wrapper .inbox-v2 .inbox-row .msg-text-deleted {
font-style: italic;
color: #838383;
}

.inbox-wrapper .inbox-v2 .inbox-row .msg-text-deleted i {
font-size: 10px;
}
/* ===============================
DARK MODE – .content-darkmode
================================ */

.content-darkmode .inbox-wrapper {
background: #0b1220;
border-color: #1e293b;
}

/* TOP BAR */
.content-darkmode .inbox-wrapper .inbox-topbar {
border-bottom-color: #1e293b;
}

/* LIST */
.content-darkmode .inbox-wrapper .inbox-v2 {
background: #0b1220;
}

/* ROW */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row {
border-bottom-color: #1e293b;
}

.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row:hover {
background: #111827;
}

/* DP */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row .inbox-dp {
border-color: #334155;
}

/* NAME */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-name {
color: #e5e7eb;
}

/* ROLE */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-role {
color: #94a3b8;
}

/* MESSAGE */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row .inbox-body .inbox-msg {
color: #9ca3af;
}

/* UNREAD MESSAGE */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row.unread .inbox-msg {
color: #f1f5f9;
}

/* TIME */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row .inbox-right .time {
color: #64748b;
}

/* UNREAD ROW BG */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row.unread {
background: linear-gradient(
90deg,
rgba(99,102,241,0.18),
rgba(15,23,42,0)
);
}

/* LEFT ACCENT LINE */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row.unread::before {
background: linear-gradient(180deg, #818cf8, #6366f1);
}

/* FOOTER */
.content-darkmode .inbox-footer {
background: #0f172a;
border-top-color: #1e293b;
}

/* PAGE BUTTON */
.content-darkmode .inbox-wrapper .page-btn {
background: #020617;
border-color: #1e293b;
color: #e5e7eb;
}

/* PAGE INFO */
.content-darkmode .inbox-wrapper .page-info {
color: #94a3b8;
}


/* STATUS DOT BORDER FIX */
.content-darkmode .inbox-wrapper 
.inbox-v2 
.inbox-row 
.inbox-dp-wrap.onlineuser::after {
border-color: #020617;
}

/* DELETED MESSAGE */
.content-darkmode .inbox-wrapper .inbox-v2 .inbox-row .msg-text-deleted {
color: #64748b;
}


/* Wrapper */
.staff-management-wrapper {
margin: 20px auto;
padding: 24px;
border-radius: 20px;
background: #ffffff;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
border: 2px solid #6419cf;
}

/* Header */
.staff-management-wrapper .staff-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.staff-management-wrapper .staff-header h2 {
font-size: 22px;
font-weight: 900;
color: #222;
font-variant: small-caps;
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
}

.staff-management-wrapper .staff-header .add-staff-btn {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
padding: 8px 16px;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s;
}

.staff-management-wrapper .staff-header .add-staff-btn:hover { opacity: 0.9; }

/* Add Staff Form */
.staff-management-wrapper .add-staff-form {
display: none;
flex-direction: column;
background: #f8f8f8;
padding: 20px;
border-radius: 16px;
border: 1px solid #ddd;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin-bottom: 20px;
animation: staffrecordfadeIn 0.4s ease-in-out;
}

.staff-management-wrapper .add-staff-form:target { display: flex; }

.staff-management-wrapper .add-staff-form h4 {
margin: 0 0 14px;
color: #222;
font-weight: 700;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}

.staff-management-wrapper .add-staff-form input, .staff-management-wrapper .add-staff-form select {
padding: 12px;
margin-bottom: 12px;
border-radius: 10px;
border: 1px solid #ccc;
font-size: 15px;
transition: all 0.3s;
width:100%
}

.staff-management-wrapper .add-staff-form input:focus, .staff-management-wrapper .add-staff-form select:focus {
border-color: #6419cf;
box-shadow: 0 0 6px rgba(100,25,207,0.4);
outline: none;
}

.staff-management-wrapper .add-staff-form .form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
}

.staff-management-wrapper .add-staff-form .form-actions .btn {
padding: 8px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s;
}

.staff-management-wrapper .add-staff-form .save-btn { background: #28a745; color: #fff; }
.staff-management-wrapper .add-staff-form .save-btn:hover { background: #218838; }

.staff-management-wrapper .add-staff-form .cancel-btn { background: #dc3545; color: #fff; }
.staff-management-wrapper .add-staff-form .cancel-btn:hover { background: #c82333; }

/* Staff Card */
.staff-management-wrapper .staff-card {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid #e0e0e0;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all 0.3s;
}

.staff-management-wrapper .staff-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.staff-management-wrapper .staff-card .staff-info {
display: flex;
flex-direction: column;
}

.staff-management-wrapper .staff-card .staff-name { font-weight: 700; font-size: 16px; color: #fff; }
.staff-management-wrapper .staff-card .staff-role { font-size: 13px; color: #fff; margin-top: 2px; }

/* Action Buttons */
.staff-management-wrapper .staff-card .staff-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.staff-management-wrapper .staff-card .staff-actions .small-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border: none;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s;
font-weight: 700;
line-height: 1.4;
color: #fff;
}

.staff-management-wrapper .staff-card .staff-actions .edit-btn { background: #007bff; }
.staff-management-wrapper .staff-card .staff-actions .edit-btn:hover { background: #0056b3; }

.staff-management-wrapper .staff-card .staff-actions .up-btn { background: #17a2b8; }
.staff-management-wrapper .staff-card .staff-actions .up-btn:hover { background: #117a8b; }

.staff-management-wrapper .staff-card .staff-actions .down-btn { background: #ffc107; color: #222; }
.staff-management-wrapper .staff-card .staff-actions .down-btn:hover { background: #e0a800; }

.staff-management-wrapper .staff-card .staff-actions .delete-btn { background: #dc3545; }
.staff-management-wrapper .staff-card .staff-actions .delete-btn:hover { background: #c82333; }

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

/* Mobile Responsive */
@media(max-width: 480px){
.staff-management-wrapper { padding: 16px; }
.staff-management-wrapper .staff-header h2 { font-size: 20px; }
.staff-management-wrapper .staff-card { flex-direction: column; align-items: flex-start; gap: 8px; }
.staff-management-wrapper .staff-card .staff-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
/* Toggle Add Staff Form */
.staff-management-wrapper input#toggleAddStaff:checked  ~ .add-staff-form {
display: flex;
}
/* ================= Edit Staff Form Wrapper ================= */
.staff-management-wrapper .edit-staff-wrapper {
background: #f9f9f9;
padding: 20px;
margin-bottom: 20px;
border-radius: 16px;
border: 2px solid #6419cf;
box-shadow: 0 0 5px 0 rgb(100 25 207 / 95%);
max-width: 560px;
margin-left: auto;
margin-right: auto;
transition: all 0.3s;
}

/* Header */
.staff-management-wrapper .edit-staff-wrapper h4 {
font-size: 20px;
font-weight: 800;
color: #222;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}

/* Inputs */
.staff-management-wrapper .edit-staff-wrapper input[type="text"],
.staff-management-wrapper .edit-staff-wrapper input[type="number"] {
width: 100%;
padding: 12px 14px;
margin-bottom: 12px;
border-radius: 12px;
border: 1px solid #ccc;
font-size: 15px;
transition: all 0.3s;
box-sizing: border-box;
}

.staff-management-wrapper .edit-staff-wrapper input:focus {
border-color: #6419cf;
box-shadow: 0 0 10px rgba(100, 25, 207, 0.2);
outline: none;
}

/* Form Actions */
.staff-management-wrapper .edit-staff-wrapper .form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}

/* ================= Buttons ================= */
.staff-management-wrapper .edit-staff-wrapper .btn {
padding: 8px 16px;
border-radius: 12px;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s;
border: none;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Save Button */
.staff-management-wrapper .edit-staff-wrapper .save-btn {
background: linear-gradient(135deg, #28a745, #20c997);
color: #fff;
}

.staff-management-wrapper .edit-staff-wrapper .save-btn:hover {
background: linear-gradient(135deg, #218838, #1aa179);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Cancel Button */
.staff-management-wrapper .edit-staff-wrapper .cancel-btn {
background: linear-gradient(135deg, #dc3545, #e4606d);
color: #fff;
}

.staff-management-wrapper .edit-staff-wrapper .cancel-btn:hover {
background: linear-gradient(135deg, #c82333, #d33f50);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive */
@media (max-width: 480px) {
.staff-management-wrapper .edit-staff-wrapper {
padding: 16px;
}

.staff-management-wrapper .edit-staff-wrapper h4 {
font-size: 18px;
}

.staff-management-wrapper .edit-staff-wrapper .form-actions {
flex-direction: column;
}

.staff-management-wrapper .edit-staff-wrapper .btn {
width: 100%;
justify-content: center;
}
}

/* Container */
.powers-container {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #fff;
padding: 10px;
border-radius: 10px;
}

/* Dark mode */
.content-darkmode .powers-container {
background: #1f2937; /* dark gray */
color: #f1f5f9; /* light text */
}

/* Header */
.powers-container .user-header {
text-align: center;
margin-bottom: 30px;
}
.powers-container .user-header h1 {
font-size: 20px;
font-weight: 700;
color: #1e3a8a;
font-variant: small-caps;
}
.powers-container .user-header p {
color: #64748b;
font-size: 14px;
font-variant: small-caps;
}

/* Dark mode header */
.content-darkmode .powers-container .user-header h1 {
color: #60a5fa;
}
.content-darkmode .powers-container .user-header p {
color: #cbd5e1;
}

/* Card */
.powers-container .power-card {
margin-bottom: 20px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 3px rgb(0 0 0);
transition: transform 0.2s, background 0.2s;
}
.powers-container .power-card:hover {
transform: translateY(-3px);
}

/* Dark mode card */
.content-darkmode .powers-container .power-card {
box-shadow: 0 0 5px rgba(255,255,255,0.1);
}

/* Card header */
.powers-container .power-card .power-card-header {
padding: 14px 20px;
background: linear-gradient(90deg,#2563eb,#1d4ed8);
color: #fff;
font-weight: 600;
font-size: 16px;
}

/* Dark mode card header */
.content-darkmode .powers-container .power-card .power-card-header {
background: linear-gradient(90deg,#1e40af,#1e3a8a);
color: #f1f5f9;
}

/* Card body */
.powers-container .power-card .power-card-body {
background: #f8fafc;
padding: 15px 20px;
}

/* Dark mode card body */
.content-darkmode .powers-container .power-card .power-card-body {
background: #374151; /* dark gray */
}

/* Power item */
.powers-container .power-card .power-card-body .power-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
font-size: 14px;
}
.powers-container .power-card .power-card-body .power-item:last-child {
border-bottom: none;
}

/* Dark mode power item */
.content-darkmode .powers-container .power-card .power-card-body .power-item {
border-bottom: 1px solid #4b5563; /* darker border */
}

/* Power name */
.powers-container .power-card .power-card-body .power-item .power-name {
font-weight: 500;
color: #334155;
font-variant: small-caps;
text-transform: capitalize;
}

/* Dark mode power name */
.content-darkmode .powers-container .power-card .power-card-body .power-item .power-name {
color: #e5e7eb;
}

/* Status */
.powers-container .power-card .power-card-body .power-item .power-status {
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
.powers-container .power-card .power-card-body .power-item .power-status.enabled {
color: #16a34a; /* green */
}
.powers-container .power-card .power-card-body .power-item .power-status.disabled {
color: #ef4444; /* red */
}

/* No powers message */
.powers-container .no-powers {
text-align: center;
color: #ef4444;
font-weight: 600;
padding: 30px;
background: #fef2f2;
border-radius: 10px;
}

/* Dark mode no powers */
.content-darkmode .powers-container .no-powers {
background: #b91c1c; /* darker red */
color: #fee2e2; 
}

/* User not found */
.powers-container .user-notfound {
text-align:center;
margin:50px;
font-size:18px;
color:red;
}

/* Dark mode user not found */
.content-darkmode .powers-container .user-notfound {
color: #fca5a5;
}



/* FEATURES DIV STYLING */
.features-div {
max-width: 1200px;
margin: 50px auto;
padding: 30px 20px;
text-align: center;
background: linear-gradient(135deg, #1e3a8a, #2563eb);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
color: #fff;
}

.features-div .features-title {
font-size: 25px;
font-weight: 900;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
font-variant-caps: small-caps;
margin-top: 0px;
}

.features-div .features-cards {
display: flex;
flex-wrap: wrap;
gap: 25px;
justify-content: center;
}

/* FEATURE CARD */
.features-div .features-cards .feature-card {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(15px);
border-radius: 20px;
width: 240px;
padding: 25px 15px;
text-align: left;
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
display: flex;
flex-direction: column;
gap: 15px;
}

.features-div .features-cards .feature-card:hover {
transform: translateY(-7px);
box-shadow: 0 20px 40px rgba(0,0,0,0.35);
background: rgba(255,255,255,0.1);
}

.features-div .features-cards .feature-icon img {
width: 100%;
height: 100%;
border-radius: 12px;
margin-bottom: 10px;
object-fit: cover;
}

.features-div .features-cards .feature-card h3 {
font-size: 20px;
font-weight: 800;
margin-bottom: 8px;
}

.features-div .features-cards .feature-card p {
font-size: 14px;
color: #f0f0f0;
line-height: 1.5;
margin-bottom: 5px;
}

.features-div .features-cards .feature-card .feature-steps {
font-size: 13px;
color: #cce0ff;
font-weight: 600;
}

.features-div .features-cards .btn-feature-view {
margin-top: 10px;
display: inline-block;
text-decoration: none;
padding: 8px 18px;
font-weight: 700;
color: #fff;
background: linear-gradient(90deg, #ff6a00, #ee0979);
border-radius: 12px;
text-align: center;
box-shadow: 0 0 10px rgba(238,9,121,0.6);
transition: transform 0.2s, box-shadow 0.2s;
}

.features-div .features-cards .btn-feature-view:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(238,9,121,0.5);
}

/* RESPONSIVE */
@media screen and (max-width: 900px){
.features-div .features-cards {
flex-wrap: wrap;
justify-content: center;
}
}

@media screen and (max-width: 600px){
.features-div .features-cards .feature-card {
width: 90%;
}
}

/* DARK MODE */
div.content-darkmode .features-div {
background: linear-gradient(135deg, #42275a, #734b6d);
}

div.content-darkmode .features-div .feature-card {
background: rgba(255,255,255,0.05);
}

div.content-darkmode .features-div .feature-card .btn-feature-view {
box-shadow: 0 0 12px rgba(238, 9, 121, 0.8);
}





/* Light Mode */
.mobile-features-compact {
display: block;
background: linear-gradient(135deg, #6a11cb, #2575fcd6);
padding: 15px 10px;
border-radius: 12px;
text-align: center;
font-family: 'Inter', sans-serif;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
margin: 10px;
border: 2px solid rgba(255,255,255,0.3);
color: #fff;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Dark Mode */
div.content-darkmode  .mobile-features-compact {
background: linear-gradient(135deg, #1f1f2e, #3a3a5c);
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
border: 2px solid rgba(255,255,255,0.1);
color: #fff;
}

.mobile-features-compact:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

.mobile-features-compact .features-title {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 25px;
margin-top: 0px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(255,255,255,0.5);
}

div.content-darkmode  .mobile-features-compact .features-title  {
border-bottom: 2px solid rgba(255,255,255,0.2);
color: #fff;
}

.mobile-features-compact .features-cards {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
justify-content: space-between;
}

.mobile-features-compact .features-cards .features-cards::-webkit-scrollbar {
display: none;
}

.mobile-features-compact .features-cards .feature-card {
flex: 0 0 auto;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(8px);
border-radius: 16px;
padding: 8px 10px;
min-width: 90px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
color: #fff;
}

div.content-darkmode  .mobile-features-compact .features-cards .feature-card {
background: rgba(255,255,255,0.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.mobile-features-compact .features-cards .feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}

div.content-darkmode  .mobile-features-compact .features-cards .feature-card:hover {
background: rgba(255,255,255,0.1);
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.mobile-features-compact .features-cards .feature-card img {
width: 40px;
height: 40px;
margin-bottom: 5px;
border-radius: 5px;
}

.mobile-features-compact .features-cards .feature-card span {
font-size: 12px;
color: #fff;
display: block;
font-variant: all-small-caps;
}

.mobile-features-compact .btn-view-more {
display: inline-block;
margin-top: 20px;
padding: 7px 13px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: linear-gradient(90deg, #ff6a00, #ee0979);
border-radius: 5px;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 0 8px rgba(238, 9, 121, 0.6);
}

div.content-darkmode .mobile-features-compact  .btn-view-more {
background: linear-gradient(90deg, #ff416c, #1f1c2c);
box-shadow: 0 0 8px rgba(255, 65, 108, 0.6);
}

.mobile-features-compact .btn-view-more:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(238,9,121,0.4);
}

div.content-darkmode .mobile-features-compact  .btn-view-more:hover {
box-shadow: 0 10px 20px rgba(255,65,108,0.4);
}

.shoutpost .postreacts .react-users-box{
position: absolute;
top: 100%;
left: 0px;
right: 0px;
width: 100%;
margin-top: 8px;
box-shadow: rgb(0 0 0 / 70%) 0px 0 5px 0px;
display: none;
z-index: 5;
background: rgb(255, 255, 255);
border-radius: 15px;
border-width: 1px;
border-style: solid;
border-color: rgb(238, 238, 238);
border-image: initial;
animation: 0.2s ease 0s 1 normal none running reactershowhide;
}

.shoutpost .postreacts .react-users-box .react-users-header{
padding: 10px;
font-weight: 700;
border-bottom: 1px solid #eee;
display:flex;
justify-content:space-between;
align-items:center;
}

.shoutpost .postreacts .react-users-box .react-users-list{
max-height: 200px;
overflow-y: auto;
}

.shoutpost .postreacts .react-users-box .react-users-list .react-user-item{
display:flex;
align-items:center;
padding:8px 10px;
gap: 10px;
transition:.2s;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
}

.react-user-item:hover{
background:#f5f5f5;
}

.shoutpost .postreacts .react-users-box .react-users-list .react-user-item .ru-dp{
width: 32px!important;
height: 32px!important;
border-radius: 50%!important;
margin-left: 0px!important;
border-left: none!important;
}

.ru-name{
font-weight:600;
font-size:14px;
}

.shoutpost .postreacts .react-users-box .react-users-list .react-user-item .ru-react{
width: 25px !important;
height: 25px !important;
border-radius: 50% !important;
margin-left: 0px !important;
border-left: none !important;
}

.shoutpost .postreacts .react-users-box .react-users-header .close-reacts{
cursor:pointer;
font-size:18px;
}

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

.shoutpost .postreacts .react-users-box .ru-info{
display:flex;
flex-direction:column;
flex: 1;
}

.shoutpost .postreacts .react-users-box .ru-time{
font-size:11px;
color:#888;
margin-top:2px;
font-style:italic;
}

/* DARK MODE */
div.content-darkmode .shoutpost .postreacts .react-users-box{
background: #1e1f24;
border: 1px solid #2c2d33;
box-shadow: 0 5px 15px rgba(0,0,0,0.6);
color: #e4e6eb;
}

div.content-darkmode .shoutpost .postreacts .react-users-box .react-users-header{
border-bottom: 1px solid #2c2d33;
color: #fff;
}

div.content-darkmode .shoutpost .postreacts .react-users-box .react-users-list .react-user-item{
color: #ddd;
}

div.content-darkmode .shoutpost .postreacts .react-users-box .react-users-list .react-user-item:hover{
background:#2a2b31;
}

div.content-darkmode .shoutpost .postreacts .react-users-box .ru-name{
color:#f1f1f1;
}

div.content-darkmode .shoutpost .postreacts .react-users-box .ru-time{
color:#9aa0a6;
}

div.content-darkmode .shoutpost .postreacts .react-users-box .close-reacts{
color:#ccc;
}

div.content-darkmode .shoutpost .postreacts .react-users-box .close-reacts:hover{
color:#fff;
}
[data-after-text],
[data-before-text] {
--badge-offset-x: calc(0px - var(--badge-size) / 3);
--badge-offset-y: calc(0px - var(--badge-size) / 3);
--badge-size: 1.5rem;
--circle-size: 2rem;
--dot-offset: 0.5rem;
--dot-size: 0.5rem;

--b: initial;
--bgc: hsl(195, 100%, 30%);
--bdrs: 0;
--c: hsl(195, 100%, 99%);
--d: inline-flex;
--fz: 0.625rem;
--fw: 700;
--h: auto;
--l: initial;
--m: 0.4rem;
--p: 0;
--pos: static;
--r: initial;
--t: initial;
--tt: uppercase;
--w: initial;

position: relative;
}

[data-after-text]:not([data-after-text=""])::after {
content: attr(data-after-text);
}
[data-before-text]:not([data-before-text=""])::before {
content: attr(data-before-text);
}

[data-after-text]:not([data-after-text=""])::after,
[data-before-text]:not([data-before-text=""])::before {
align-items: center;
background: var(--bgc);
border-radius: var(--bdrs);
bottom: var(--b);
box-shadow: var(--bxsh);
box-sizing: border-box;
color: var(--c);
display: var(--d);
font-size: var(--fz);
font-weight: var(--fw);
height: var(--h);
justify-content: center;
left: var(--l);
padding: var(--p);
position: var(--pos);
right: var(--r);
text-decoration: none;
text-transform: var(--tt);
top: var(--t);
width: var(--w);
}

/* MODIFIERS */
[data-after-type*="badge"]::after,
[data-before-type*="badge"]::before {
--bdrs: var(--badge-size);
--bxsh: 0 0 0 2px rgba(255, 255, 255, 0.5);
--h: var(--badge-size);
--p: 0;
--pos: absolute;
--w: var(--badge-size);
}
[data-after-type*="circle"],
[data-before-type*="circle"]{
align-items: center;
display: flex;
}
[data-after-type*="circle"]::after,
[data-before-type*="circle"]::before {
--bdrs: 50%;
--fw: 400;
--h: var(--circle-size);
// --pos: relative;
// --t: -0.75em;
--tt: initial;
--w: var(--circle-size);
}
[data-after-type*="circle"]::after,
[data-after-type*="pill"]::after {
margin-inline-start: 1ch;
}
[data-before-type*="circle"]::before,
[data-before-type*="dot"]::before,
[data-before-type*="pill"]::before {
margin-inline-end: 1ch;
}
[data-after-type*="dot"]::after,
[data-before-type*="dot"]::before {
--bdrs: 50%;
--d: inline-block;
--fz: 50%;
--h: var(--dot-size);
--p: 0;
--pos: relative;
--t: -1px;
--w: var(--dot-size);
}
[data-after-type*="dot"]::after,
[data-before-type*="dot"]::before {
content: "" !important;
}
[data-after-type*="pill"]::after,
[data-before-type*="pil"]::before {
--bdrs: 1rem;
--p: 0.25rem 0.75rem;
--pos: relative;
--t: -1px;
}

/* COLORS */
[data-after-type*="blue"]::after,
[data-before-type*="blue"]::before {
--bgc: #007acc;
}
[data-after-type*="darkgray"]::after,
[data-before-type*="darkgray"]::before {
--bgc: #706e6b;
--c: #fff;
}
[data-after-type*="green"]::after,
[data-before-type*="green"]::before {
--bgc: #04844b;
}
[data-after-type*="lightgray"]::after,
[data-before-type*="lightgray"]::before {
--bgc: #ecebea;
--c: #080707;
}
[data-after-type*="orange"]::after,
[data-before-type*="orange"]::before {
--bgc: #ffb75d;
--c: #080707;
}

[data-after-type*="red"]::after,
[data-before-type*="red"]::before {
--bgc: #c23934;
}

/* POSITION */
[data-after-type*="top"]::after,
[data-before-type*="top"]::before {
--b: auto;
--pos: absolute;
--t: var(--dot-offset);
}
[data-after-type*="right"]::after,
[data-before-type*="right"]::before {
--l: auto;
--pos: absolute;
--r: var(--dot-offset);
}
[data-after-type*="bottom"]::after,
[data-before-type*="bottom"]::before {
--b: var(--dot-offset);
--pos: absolute;
--t: auto;
}
[data-after-type*="left"]::after,
[data-before-type*="left"]::before {
--pos: absolute;
--r: auto;
--l: var(--dot-offset);
}
[data-after-type*="badge"][data-after-type*="top"]::after,
[data-before-type*="badge"][data-before-type*="top"]::before {
--m: 0;
--t: var(--badge-offset-y);
}
[data-after-type*="badge"][data-after-type*="right"]::after,
[data-before-type*="badge"][data-before-type*="right"]::before {
--m: 0;
--r: var(--badge-offset-x);
}
[data-after-type*="badge"][data-after-type*="bottom"]::after,
[data-before-type*="badge"][data-before-type*="bottom"]::before {
--b: var(--badge-offset-y);
--m: 0;
}
[data-after-type*="badge"][data-after-type*="left"]::after,
[data-before-type*="badge"][data-before-type*="left"]::before {
--l: var(--badge-offset-x);
--m: 0;
}

/* ================= CHANNEL INFO ================= */
.channel-info {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 15px;
transition: background 0.3s, box-shadow 0.3s;
}

/* COVER */
.channel-info .channel-cover {
position: relative;
height: 170px;
}

.channel-info .channel-cover .cover-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
transition: filter 0.3s;
}

/* CENTER CONTENT */
.channel-info .channel-center {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}

.channel-info .channel-center .channel-dp {
width: 90px;
height: 90px;
border-radius: 50%;
border: 4px solid #fff;
background: #eee;
object-fit: cover;
}

.channel-info .channel-center .channel-name {
margin-top: 25px;
font-size: 18px;
font-weight: 700;
color: #000000;
text-shadow: 0 0 2px rgb(255 0 0 / 50%);
font-variant: small-caps;
}

/* DETAILS */
.channel-info .channel-details {
padding: 50px 15px 15px;
}

.channel-info .channel-details .channel-desc {
font-size: 14px;
color: #555;
margin-bottom: 8px;
text-align: center;
font-variant: all-small-caps;
font-weight: 800;
}

.channel-info .channel-details .member-count {
font-size: 13px;
font-weight: 700;
color: #7c3aed;
text-align: center;
margin-bottom: 10px;
font-family: system-ui;
}

/* MEMBERS */
.channel-info .channel-details .member-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.channel-info .channel-details .member-list .member {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 10px;
background: #f6f6fb;
transition: background 0.2s;
}

.channel-info .channel-details .member-list .member:hover {
background: #ecebff;
}

.channel-info .channel-details .member-list .member img {
width: 45px;
height: 45px;
border-radius: 999px;
object-fit: cover;
}

.channel-info .channel-details .member-list .m-name {
font-weight: 600;
font-size: 14px;
}

.channel-info .channel-details .member-list .m-role {
font-size: 12px;
color: #7c3aed;
padding: 3px 0;
}

/* SEARCH BOX */
.channel-info .channel-details .channel-search {
display: flex;
gap: 8px;
margin: 10px 0;
}

.channel-info .channel-details .channel-search input {
flex: 1;
padding: 10px;
border: none;
border-radius: 8px;
background: #f2f2f7;
font-size: 14px;
transition: background 0.3s, color 0.3s;
}

.channel-info .channel-details .channel-search button {
border: none;
padding: 10px 14px;
border-radius: 8px;
background: linear-gradient(45deg,#7c3aed,#9333ea);
color: #fff;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}

.channel-info .channel-details .channel-search button:hover {
transform: scale(1.05);
}

/* ================= DARK MODE ================= */
.content-darkmode .channel-info {
background: #1f2937;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.content-darkmode .channel-info .channel-cover .cover-img {
filter: brightness(0.5);
}

.content-darkmode .channel-info .channel-center .channel-dp {
border: 4px solid #2d3748;
background: #374151;
}

.content-darkmode .channel-info .channel-center .channel-name {
color: #f3f4f6;
text-shadow: 0 0 2px rgb(255 255 255 / 30%);
}

.content-darkmode .channel-info .channel-details .channel-desc {
color: #d1d5db;
}

.content-darkmode .channel-info .channel-details .member-count {
color: #a78bfa;
}

.content-darkmode .channel-info .channel-details .member-list .member {
background: #111827;
}

.content-darkmode .channel-info .member:hover {
background: #1f2937;
}

.content-darkmode .channel-info .channel-details .member-list .m-name {
color: #e5e7eb;
}

.content-darkmode .channel-info .channel-details .member-list .m-role {
color: #a78bfa;
}

.content-darkmode .channel-info .channel-search input {
background: #111827;
color: #e5e7eb;
}

.content-darkmode .channel-info .channel-search button {
background: linear-gradient(45deg,#7c3aed,#9333ea);
color: #fff;
}



/* SMOOTH ANIMATIONS */
@keyframes fadeInmenuopenstaff{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes popstaffalert{
0%{transform:scale(.9)}
100%{transform:scale(1)}
}

/* ================= APP ================= */
.chat-app{
width:100%;
max-width:420px;
height:100vh;
margin:auto;
background:#fff;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
animation:fadeInmenuopenstaff .3s ease;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ================= HEADER ================= */
.chat-app .chat-header{
height:56px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 12px;
border-bottom:1px solid #e5e5ea;
font-weight:600;
position:sticky;
top:0;
background:#fff;
z-index:20;
box-shadow:0 2px 6px rgba(0,0,0,0.04);
}

.chat-app .chat-header .chat-title{
display:flex;
align-items:center;
gap:6px;
padding:5px 10px;
border:1px solid #eee;
border-radius:999px;
transition:.2s;
}
.chat-app .chat-header .chat-title:hover{background:#f3f4f6;}

.chat-app .chat-header .staff-icon{
width:28px;
height:28px;
border-radius:50%;
object-fit:cover;
}

.chat-app .chat-header .back{font-size:22px;cursor:pointer}

/* ================= BODY ================= */
.chat-app .chat-body{
flex:1;
overflow-y:auto;
padding:12px;    
padding-bottom: 15%;
scroll-behavior:smooth;
background:
linear-gradient(#7f7f7f94,#a9a9a978),
url("../../temporary_img/staff_back.jpeg");
background-size:cover;
background-position:center;
}

.chat-app .chat-body::-webkit-scrollbar{width:4px}
.chat-app .chat-body::-webkit-scrollbar-thumb{
background:#cbd5f5;
border-radius:10px;
}

/* ================= SYSTEM ALERT ================= */
.chat-app .chat-body .sys-alert{
width:fit-content;
max-width:90%;
margin:15px auto;
padding:8px 14px;
border-radius:12px;
font-size:12px;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
animation:popstaffalert .25s ease;
}
/* ================= MESSAGE ================= */
.chat-app .chat-body .msg{
display:flex;
margin-bottom:14px;
animation:fadeInmenuopenstaff .25s ease;
position:relative;
}

.chat-app .chat-body .send{justify-content:flex-end}

.chat-app .chat-body .dp{
width:34px;
height:34px;
border-radius:50%;
margin-right:8px;
object-fit:cover;
}

.chat-app .chat-body .msg-content{max-width:75%}

.chat-app .chat-body .receive .name{
font-size:12px;
font-weight:600;
margin-bottom:2px;
}

/* BUBBLE */
.chat-app .chat-body .bubble{
padding:10px 12px;
border-radius:5px;
font-size:14px;
word-wrap:break-word;
line-height:1.4;
box-shadow:0 1px 4px rgba(0,0,0,0.08);
transition:.15s;
position:relative;
}

.chat-app .chat-body .bubble:hover{transform:translateY(-1px)}

.chat-app .chat-body .highlight{background:#e5e5ea}
.chat-app .chat-body .purple{background:#7c3aed;color:#fff}

/* TIME */
.chat-app .chat-body .receive .time,
.chat-app .chat-body .meta{
font-size:11px;
color:#2e2e2e;
margin-top:3px;
}

.chat-app .chat-body .meta{
display:flex;
gap:6px;
justify-content:flex-end;
}

.chat-app .chat-body .ticks{color:#7c3aed;font-weight:bold}

/* ================= REPLY BOX ================= */
.chat-app .chat-body .reply-box{
background:#d1d5db;
padding:5px 7px;
border-left:3px solid #7c3aed;
border-radius:6px;
font-size:12px;
margin-left: -5px;
margin-right: -5px;
margin-bottom: 10px;
animation:fadeInmenuopenstaff .2s ease;   
}

.chat-app .chat-body .purple .reply-box{
border-left:3px solid #fff;
background:#0000003d;
}
.chat-app .chat-body .reply-btn{
position:absolute;
top:50%;transform:
translateY(-50%);
color:#fff;
font-size:12px;
padding:4px 6px;
border-radius:50%;
cursor:pointer;
opacity: 1;
transition:.2s;
z-index: 10;
}

.chat-app .chat-body .receive .bubble .reply-btn{
right: -30px;
}

.chat-app .chat-body .send .bubble .reply-btn{
left: -34px;
}



/* ================= ATTACHMENTS ================= */
.chat-app .chat-body .chat-img{
width:100%;
border-radius:10px;
margin-bottom:6px;
transition:.2s;
}

.chat-app .chat-body .chat-img:hover{transform:scale(1.02)}

.chat-app .chat-body .file{
background:#e2e8f0;
padding:6px 8px;
border-radius:8px;
font-size:13px;
}

/* ================= TEXT STYLES ================= */
.chat-app .chat-body .bubble a{color:#2563eb;text-decoration:underline}
.chat-app .chat-body .bubble code{
background:#000;
color:#0f0;
padding:2px 4px;
border-radius:4px;
font-size:12px;
}

/* ================= INPUT ================= */
/* ================= CHAT INPUT FLEX FIX ================= */
.chat-app .chat-input {
display: flex;
flex-direction: column; /* stack reply preview above input row */
padding: 6px 10px;
padding-bottom:20px;
background: #fff;
border-top: 1px solid #e5e5ea;
position: sticky;
bottom: 8%;
z-index: 20;
box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
}

.chat-app .chat-input .post_reply_inbox_div {
width: 100%;
margin-bottom: 4px;
display: flex;
flex-direction: column;
}

.chat-app .chat-input .reply-input-row {
display: flex;      /* tools + input + send in one line */
align-items: center;
gap: 6px;
}

.chat-app .chat-input .tools{display:flex;gap:5px;margin-right:6px}

.chat-app .chat-input .tools button{
border:none;
background:#eee;
padding:7px;
border-radius:8px;
cursor:pointer;
transition:.2s;
}
.chat-app .chat-input .tools button:hover{background:#ddd}

.chat-app .chat-input input, .chat-app .chat-input textarea {
flex: 1;
border: none;
outline: none;
background: #f2f2f7;
padding: 10px;
border-radius: 10px;
font-size: 14px;
height: 40px;
}
.chat-app .chat-input .send-btn{
margin-left:6px;
border:none;
background:#7c3aed;
color:#fff;
padding:9px 15px;
border-radius:20px;
cursor:pointer;
transition:.2s;
}

.chat-app .chat-input .send-btn:hover{transform:scale(1.05)}

/* ================= MENU ================= */
.chat-app .menu-wrapper{position:relative}

.chat-app .menu-wrapper .menu-dropdown{
position:absolute;
right:0;
top:40px;
width:170px;
background:#fff;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
display:none;
flex-direction:column;
overflow:hidden;
animation:fadeInmenuopenstaff .2s ease;
}

.chat-app .menu-wrapper .menu-item{
padding:10px 14px;
font-size:14px;
cursor:pointer;
width: 100%;
}

.chat-app .menu-wrapper .menu-item:hover{background:#f2f2f7}

.chat-app .menu-wrapper #menuToggle:checked ~ .menu-dropdown{display:flex}

/* ================= GALLERY ================= */
.chat-app .user_message_gallery{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}

.chat-app .user_message_gallery img,
.chat-app .user_message_gallery video{
max-width:150px;
border-radius:10px;
cursor:pointer;
transition:.2s;
}

.chat-app .user_message_gallery img:hover,
.chat-app .user_message_gallery video:hover{
transform:scale(1.05);
}

/* ================= PROGRESS ================= */
.chat-app #uploadProgressContainer{
position:fixed;
bottom:60px;
left:0;
width:100%;
height:4px;
background:#ddd;
z-index:9999;
}

.chat-app #uploadProgress{
width:0%;
height:100%;
background:#7c3aed;
transition:width .2s linear;
}

/* ================= DARK MODE ================= */
.content-darkmode .chat-app{background:#020617}

.content-darkmode .chat-app .chat-header,
.content-darkmode .chat-app .chat-input{
background:#020617;
border-color:#1f2937;
}

.content-darkmode .chat-app .highlight{
background:#1f2937;
color:#e5e7eb;
}

.content-darkmode .chat-app .reply-box{
background:#111827;
border-left:3px solid #8b5cf6;
}

.content-darkmode .chat-app .chat-input input, .content-darkmode .chat-app .chat-input textarea {
background:#111827;
color:#e5e7eb;
}

.content-darkmode .chat-app .menu-dropdown{
background:#020617;
box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.content-darkmode .chat-app .tools button {background: #111827;color: #e5e7eb;}

.content-darkmode .chat-app .chat-title {
background: #111827;
color: #e5e7eb;
border: 0px solid #e5e7eb;
}

.content-darkmode .chat-app .back, .content-darkmode .chat-app .menu-wrapper {
color: #e5e7eb;
}

.content-darkmode .chat-app .chat-input .tools button:hover{background: #2d3447;}

.content-darkmode .chat-app .chat-header .chat-title:hover{background: #2d3447;}

.chat-app .reply-btn:hover {
background: #fff!important;
color: #000!important;
}

/* Container (optional if using inline text-align:center) */
.chat-app .chat-body #prev-msg-btn-container {
text-align: center;
margin: 20px 0;
}

/* Previous Messages Button */
.chat-app .chat-body #prev-msg-btn-container button.prev-msg-btn {
background: linear-gradient(45deg, #673AB7, #9C27B0);          /* Purple main color */
color: #fff;                  /* White text */
border: none;                 /* Remove default border */
padding: 8px 16px;            /* Vertical and horizontal padding */
border-radius: 25px;          /* Rounded pill shape */
font-size: 14px;              /* Text size */
font-weight: 600;             /* Semi-bold */
cursor: pointer;              /* Pointer on hover */
transition: all 0.2s ease;   /* Smooth hover effect */
box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Soft shadow */
font-variant: small-caps;
}

.chat-app .chat-body #prev-msg-btn-container button.prev-msg-btn:hover {
background: #5b21b6;          /* Darker purple on hover */
transform: translateY(-2px);  /* Slight lift effect */
}

.chat-app .chat-body #prev-msg-btn-container button.prev-msg-btn:disabled {
background: #ccc;             /* Greyed out when disabled */
cursor: not-allowed;          /* Not clickable */
box-shadow: none;
transform: none;
}
.content-darkmode .chat-app .reply-btn:hover {
background: #2d3447!important;
color: #e5e7eb!important;
}

div.content-darkmode .shoutpost .post-content .feeling font.feeling-name {
background: #1e1e1e;
color: #aaa;
box-shadow: inset 0px 0px 5px 0px #333;
}

div.content-darkmode .shoutpost .post-content .feeling .feeling-from {
color: #aaa;
}


.notif-wrapper {
margin: auto;
font-family: math;
}

.notif-wrapper .notif-enabled-box {
border-radius: 14px;
padding: 8px;
margin: 12px;
color: #fff;
background: linear-gradient(135deg,#ff6a6a,#ff9f43,#ffc371);
box-shadow: 0 8px 22px rgba(255,120,60,0.35);
position: relative;
}

.notif-wrapper .notif-enabled-box.enabled {
background: linear-gradient(135deg,#36d1dc,#5b86e5,#43e97b);
box-shadow: 0 8px 22px rgba(80,150,255,0.35);
}

.notif-wrapper .notif-enabled-box .notif-top {
background: #fff;
color: #222;
border-radius: 12px 12px 0 0;
padding: 16px;
display: flex;
gap: 14px;
}

.notif-wrapper .notif-enabled-box .notif-top .notif-icon {
min-width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg,#ff9f43,#ff6a6a);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
line-height: 5;
}

.notif-wrapper .notif-enabled-box .notif-top .notif-title-area h3 {
margin: 0;
font-size: 17px;
font-weight: 800;
}

.notif-wrapper .notif-enabled-box .notif-top .notif-title-area p {
margin: 6px 0 0;
font-size: 13px;
color: #666;
}

.notif-wrapper .notif-enabled-box .notif-btn-row {
display: flex;
gap: 12px;
background: #fff;
padding: 14px;
border-radius: 0 0 12px 12px;
}

.notif-wrapper .notif-enabled-box .notif-btn-row .notif-btn {
flex: 1;
border: none;
cursor: pointer;
padding: 11px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
color: #fff;
transition: 0.2s;
letter-spacing: 0.5;
}

.notif-wrapper .notif-enabled-box .notif-btn-row .notif-btn.enable {
background: linear-gradient(135deg,#00c853,#69f0ae);
}

.notif-wrapper .notif-enabled-box .notif-btn-row .notif-btn.cancel {
background: linear-gradient(135deg,#ff1744,#ff5f6d);
}

.notif-wrapper .notif-enabled-box  .notif-center-disabled {
position: absolute;
top: 65%;
left: 50%;
width: 95%;
transform: translate(-50%,-50%);
font-size: 20px;
font-weight: 800;
color: #ff2d55;
background: rgba(255,255,255,0.92);
padding: 12px 18px;
z-index: 10;
text-align: -webkit-center;
}

.notif-wrapper .notif-enabled-box.enabled .notif-center-disabled {
display: none;
}

.notif-wrapper .notif-settings {
background: #fff;
border-radius: 12px;
padding: 16px;
color: #000;
margin-top: 16px;
transition: 0.25s;
}

.notif-enabled-box.disabled .notif-settings {
filter: blur(1px);
opacity: 0.6;
pointer-events: none;
}

.notif-enabled-box .notif-settings .notif-head {
font-weight: 800;
text-align: center;
margin-bottom: 14px;
border-bottom: 2px solid #ff9f43;
padding-bottom: 6px;
}

/* ITEM */
.notif-wrapper .notif-settings .notif-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #eee;
}

/* SWITCH */
.notif-wrapper .notif-settings .notif-item .switch {
position: relative;
width: 46px;
height: 24px;
}

.notif-wrapper .notif-settings .notif-item .switch input { display:none; }

.notif-wrapper .notif-settings .notif-item .switch .slider {
position:absolute;
inset:0;
background:#ccc;
border-radius:24px;
transition:.3s;
}

.notif-wrapper .notif-settings .notif-item .switch .slider:before {
content:"";
position:absolute;
height:18px;
width:18px;
left:3px;
top:3px;
background:white;
border-radius:50%;
transition:.3s;
}

.notif-wrapper .notif-settings .notif-item .switch input:checked + .slider {
background: linear-gradient(135deg,#fc6a66,#0575e6);
}

.notif-wrapper .notif-settings .notif-item .switch input:checked + .slider:before {
transform: translateX(22px);
}
.content-darkmode .notif-wrapper .notif-enabled-box .notif-menu-dropdown  .menu-item {
color: #bbb;
}

.notif-wrapper .notif-enabled-box .notif-menu-dropdown .menu-item:first-child {
border-bottom: 1px solid;
}

.notif-wrapper .notif-enabled-box.enabled .notif-head {
border-bottom: 2px solid #5a88e5;
}
.content-darkmode .notif-wrapper .notif-enabled-box {
background: linear-gradient(135deg,#2c3e50,#34495e,#3a3f51);
box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.content-darkmode .notif-wrapper .notif-enabled-box.enabled {
background: linear-gradient(135deg,#1e3c72,#2a5298,#1e3c72);
box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-top {
background: #2c3e50;
color: #eee;
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-top .notif-icon {
background: linear-gradient(135deg,#ff9f43,#ff6a6a);
color: #fff;
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-top .notif-title-area h3 {
color: #fff;
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-top .notif-title-area p {
color: #ccc;
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-btn-row {
background: #2c3e50;
border-top: 1px solid #444;
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-btn-row .notif-btn.enable {
background: linear-gradient(135deg,#00c853,#69f0ae);
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-btn-row .notif-btn.cancel {
background: linear-gradient(135deg,#ff3b50,#ff6f70);
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-center-disabled {
background: rgba(50,50,50,0.85);
color: #ff6b81;
}

.content-darkmode .notif-wrapper .notif-settings {
background: #2c3e50;
color: #eee;
border-radius: 12px;
}

.content-darkmode .notif-wrapper .notif-settings .notif-head {
border-bottom: 2px solid #3498db;
color: #fff;
}

.content-darkmode .notif-wrapper .notif-settings .notif-item {
border-bottom: 1px solid #444;
}

.content-darkmode .notif-wrapper .notif-settings .notif-item .switch .slider {
background: #555;
}

.content-darkmode .notif-wrapper .notif-settings .notif-item .switch input:checked + .slider {
background: linear-gradient(135deg,#fc6a66,#0575e6);
}

/* WRAPPER LOADER */
.notif-loader {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.85);
z-index: 50;
display: none;
align-items: center;
justify-content: center;
border-radius: 14px;
}

.notif-loader .loader-spin {
width: 50px;
height: 50px;
border: 4px solid #ddd;
border-top: 4px solid #36d1dc;
border-radius: 50%;
animation: spin 1s linear infinite;
}

/* ERROR DIV */
.notif-error {
display: none;
margin: 10px 12px;
padding: 12px;
border-radius: 10px;
font-weight: 700;
background: #ffe5e8;
color: #d90429;
text-align: center;
border: 1px solid #ffb3c1;
}

.notif-wrapper .notif-enabled-box.enabled div#notifSettings {
margin-top: 0px;
}


.notif-wrapper .notif-enabled-box .notif-menu {position: relative;top: 10px;right: 12px;cursor: pointer;float: right;}

.notif-wrapper .notif-enabled-box .notif-menu i {font-size: 20px;color: #555;color: #fff;}

.notif-wrapper .notif-enabled-box .notif-menu-dropdown {display: none;position: absolute;right: 0;top: 28px;background: #fff;border-radius: 10px;box-shadow: 0 6px 18px rgba(0,0,0,0.2);min-width: 160px;z-index: 20;overflow: hidden;}

.notif-wrapper .notif-enabled-box .notif-menu-dropdown .menu-item {padding: 12px;font-size: 14px;font-weight: 600;border-bottom: 1px solid #eee;cursor: pointer;color: #000;}

.notif-wrapper .notif-enabled-box .notif-menu-dropdown .menu-item:hover {
background: #f5f5f5;
}

.content-darkmode .notif-wrapper .notif-enabled-box .notif-menu-dropdown {
background: #2c3e50;
color: #eee;
}

.content-darkmode .notif-wrapper .notif-enabled-box .menu-item:hover {
background: #3a4a5c;
}

.notif-wrapper .notif-enabled-box input#menuopencheckbox:checked + .notif-menu .notif-menu-dropdown {
display: block;
}

@media screen and (max-width: 360px) {
.m-top-120 {
margin-top: 120px;
}
}


.user-info-message{position:relative;min-height:100dvh;background:linear-gradient(180deg,#ffffff 0%,#f4f2ff 40%,#574cd6 100%);padding-bottom:30px;overflow:hidden;border-radius: 5px;}

.user-info-message *{
box-sizing:border-box;
}

.user-info-message .user-dp-cover-message{
position:relative;
height:190px;
overflow:hidden;
border-radius:0 0 32px 32px;
}

.user-info-message .user-dp-cover-message::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(0,0,0,0.08),
rgba(87,76,214,0.55)
);
}

.user-info-message .user-dp-cover-message img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.user-info-message .user-dp-message{position:relative;width:115px;height:115px;margin:-58px auto 0;border-radius:50%;padding:5px;background:linear-gradient(135deg,#574cd6,#7b6ef6,#00f0ff);box-shadow: 0 0 30px rgba(87, 76, 214, 0.35);z-index:5;animation:userDpPopInInfoMsgs .35s ease;}

@keyframes userDpPopInInfoMsgs{
0%{
transform:scale(.75);
opacity:0;
}
100%{
transform:scale(1);
opacity:1;
}
}

.user-info-message .user-dp-message img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
background:#fff;
border:4px solid #fff;
display:block;
}

.user-info-message .user-name-message{
text-align:center;
margin-top:16px;
padding:0 18px;
}

.user-info-message .user-name-message-font{
font-size:26px;
font-weight:800;
color:#1d1d1f;
letter-spacing:.2px;
display:block;
}

.user-info-message .user-title-message{
text-align:center;
margin-top:6px;
padding:0 20px;
}

.user-info-message .user-title-message-font{
font-size:14px;
font-weight:500;
color:#6b6b7d;
display:block;
line-height:1.5;
}

.user-info-message .user-links-message{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
padding:22px 16px 8px;
}

.user-info-message .user-links-message a{
text-decoration:none;
}

.user-info-message .user-link-message{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
gap:12px;

padding:14px;
border-radius:22px;

background:rgba(255,255,255,0.72);
backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,0.45);

box-shadow:
0 10px 24px rgba(87,76,214,0.12),
0 2px 5px rgba(0,0,0,0.04);

transition:all .22s ease;
cursor:pointer;
}

.user-info-message .user-link-message::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
135deg,
rgba(87,76,214,0.06),
rgba(123,110,246,0.02)
);
opacity:0;
transition:.22s ease;
}

.user-info-message .user-link-message:hover{
transform:translateY(-3px);
box-shadow:
0 16px 35px rgba(87,76,214,0.2),
0 6px 12px rgba(0,0,0,0.06);
}

.user-info-message .user-link-message:hover::before{
opacity:1;
}

.user-info-message .user-link-message:active{
transform:scale(.97);
}

.user-info-message .user-link-icon-message{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#574cd6,#7b6ef6);color:#fff;font-size:18px;flex-shrink:0;box-shadow: 0 0 10px rgba(87, 76, 214, 0.3);}

.user-info-message .user-link-name-message{
font-size:14px;
font-weight:700;
color:#1f1f28;
}

.user-info-message .user-cus-message{
margin:18px 16px 0;
padding:18px;

border-radius:26px;

background:rgba(255,255,255,0.75);
backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,0.5);

box-shadow:
0 12px 30px rgba(87,76,214,0.12),
0 3px 8px rgba(0,0,0,0.05);
}

.user-cus-message.last{
margin-bottom:20px;
}

.user-info-message .user-cus--title-message{
margin-bottom:14px;
display:flex;
align-items:center;
justify-content:space-between;
}

.user-info-message .user-cus-font-title-message{
font-size:13px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:#574cd6;
}
.user-info-message .user-cus-message a{
text-decoration:none;
color:inherit !important;
}

.user-info-message .user-cus-add-message{
position:relative;

display:flex;
align-items:center;
gap:14px;

padding:14px 2px;

border-bottom:1px solid rgba(87,76,214,0.08);

transition:.2s ease;
cursor:pointer;
}

.user-info-message .user-cus-add-message:last-child{
border-bottom:none;
padding-bottom:4px;
}

.user-info-message .user-cus-add-message:hover{
transform:translateX(4px);
}

.user-info-message .user-cus-add-message:active{
transform:scale(.985);
}

.user-info-message .user-cus-message-icon{position:relative;width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#574cd6,#7b6ef6);color:#fff;font-size:17px;flex-shrink:0;box-shadow: 0 0 10px rgba(87, 76, 214, 0.25);}

.user-info-message .user-cus-name-message{
flex:1;

font-size:14px;
font-weight:700;

color:#202028;
}

.user-info-message .user-cus-add-message::after{
content: "›";
font-family:"uicons-regular-rounded";
font-size: 16px;
font-weight: 700;
color: #574cd6;
transition:.2s ease;
}

.user-info-message .user-cus-add-message:hover::after{
transform:translateX(3px);
color:#574cd6;
}

/* Block */
.user-info-message [data-bs-toggle="blockbtninfo"] .user-cus-message-icon{
background:linear-gradient(135deg,#ff416c,#ff4b2b);
}

/* Unblock */
.user-info-message [data-bs-toggle="unblockbtninfo"] .user-cus-message-icon{
background:linear-gradient(135deg,#ff9800,#ff5722);
}

/* Report */
.user-info-message a[href*="report"] .user-cus-message-icon, .user-info-message a[href*="delete"] .user-cus-message-icon{
background:linear-gradient(135deg,#ff3b30,#ff6b6b);
}

/* Follow */
.user-info-message [data-bs-toggle="followbtninfo"] .user-link-icon-message{
background:linear-gradient(135deg,#00c6ff,#0072ff);
}

/* Unfollow */
.user-info-message [data-bs-toggle="unfollowbtninfo"] .user-link-icon-message{
background:linear-gradient(135deg,#ff416c,#ff4b2b);
}

.user-info-message .user-link-message.loading,
.user-info-message .user-cus-add-message.loading{
pointer-events:none;
opacity:.7;
}

.user-info-message .user-link-message.loading::after,
.user-info-message .user-cus-add-message.loading::before{
content:"";
position:absolute;
right:14px;

width:18px;
height:18px;

border-radius:50%;
border:2px solid rgba(87,76,214,0.15);
border-top-color:#574cd6;

animation:usermsginfospinInfo .55s linear infinite;
}

@keyframes usermsginfospinInfo{
to{
transform:rotate(360deg);
}
}

.user-info-message::-webkit-scrollbar{
width:4px;
}

.user-info-message::-webkit-scrollbar-thumb{
background:#574cd6;
border-radius:999px;
}

.user-info-message::-webkit-scrollbar-track{
background:#ece9ff;
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.user-info-message .user-dp-cover-message{
height:170px;
border-radius:0 0 26px 26px;
}

.user-info-message .user-links-message{
grid-template-columns:1fr 1fr;
gap:10px;
padding:20px 12px 6px;
}

.user-info-message .user-link-message{
padding:12px;
border-radius:18px;
}

.user-info-message .user-link-icon-message,
.user-info-message .user-cus-message-icon{
width:42px;
height:42px;
font-size:16px;
}

.user-info-message .user-link-name-message,
.user-info-message .user-cus-name-message{
font-size:13px;
}

.user-info-message .user-cus-message{
margin:16px 12px 0;
padding:16px;
border-radius:22px;
}

.user-info-message .user-name-message-font{
font-size:23px;
}

}

div.content-darkmode .user-info-message{
background:linear-gradient(180deg,#121212 0%,#1d1d2e 45%,#574cd6 100%);
}

div.content-darkmode .user-info-message .user-name-message-font{
color:#fff;
}

div.content-darkmode .user-info-message .user-title-message-font{
color:#c8c8d8;
}

div.content-darkmode .user-info-message .user-link-message,
div.content-darkmode .user-info-message .user-cus-message{
background:rgba(28,28,38,0.72);
border-color:rgba(255,255,255,0.05);
}

div.content-darkmode .user-info-message .user-link-name-message,
div.content-darkmode .user-info-message .user-cus-name-message{
color:#fff;
}

div.content-darkmode .user-info-message .user-cus-add-message{
border-bottom:1px solid rgba(255,255,255,0.06);
}



.user-info-message .usernickname{
margin: 20px 16px;
padding: 18px;
border-radius: 26px;

background: rgba(255,255,255,0.75);
backdrop-filter: blur(14px);

border: 1px solid rgba(255,255,255,0.5);

box-shadow:
0 12px 30px rgba(87,76,214,0.12),
0 3px 8px rgba(0,0,0,0.05);
}

.user-info-message .usernickname-text{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
}

.user-info-message .usernickname-text-font{
font-size:13px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:#574cd6;
}

.user-info-message .usernickname-select-action{
position:relative;
}

.user-info-message .usernickname-select-name{
display:flex;
align-items:center;
gap:14px;

padding:14px;
border-radius:18px;

background:rgba(255,255,255,0.65);
border:1px solid rgba(87,76,214,0.08);

cursor:pointer;
transition:.2s ease;
position:relative;
overflow:hidden;
}

.user-info-message .usernickname-select-name:hover{
transform:translateY(-3px);
box-shadow:0 16px 30px rgba(87,76,214,0.15);
}

/* avatar */
.user-info-message .usernickname-select-avatar{
width:44px;
height:44px;
border-radius:15px;
overflow:hidden;
flex-shrink:0;

background:linear-gradient(135deg,#574cd6,#7b6ef6);
box-shadow:0 0 10px rgba(87,76,214,0.25);
}

.user-info-message .usernickname-select-avatar img{
width:100%;
height:100%;
object-fit:cover;
}

/* old name */
.user-info-message .usernickname-select-oldnick{
flex:1;
font-size:14px;
font-weight:700;
color:#1f1f28;
}

/* new nickname */
.user-info-message .usernickname-select-newnick{
font-size:13px;
font-weight:600;
color:#574cd6;
padding:6px 10px;
border-radius:999px;
background:rgba(87,76,214,0.08);
white-space:nowrap;
}

.edit-btn,
.delete-btn{
font-size:12px;
font-weight:700;
padding:6px 10px;
border-radius:10px;
text-decoration:none;
transition:.2s ease;
}

.user-info-message .usernickname .edit-btn{
background:linear-gradient(135deg,#574cd6,#7b6ef6);
color:#fff;
}

.user-info-message .usernickname .edit-btn:hover{
transform:scale(1.05);
}

.user-info-message .usernickname .delete-btn{
background:rgba(255,75,43,0.1);
color:#ff4b2b;
}

.user-info-message .usernickname .delete-btn:hover{
background:#ff4b2b;
color:#fff;
transform:scale(1.05);
}

.user-info-message .usernickname .usernickname-select-updateform{
display:none;
}

.user-info-message .usernickname #updatebox2:checked ~ .usernickname-select-updateform{
display:block;
}

.user-info-message .usernickname .usernickname-select-updateform-panel{
position:fixed;
inset:0;
background:rgba(0,0,0,0.5);
display:flex;
align-items:center;
justify-content:center;
z-index:999;
padding:20px;
}

.user-info-message .usernickname .usernickname-select-updateform-panel-form{
width:100%;
max-width:420px;
background:#fff;
border-radius:22px;
padding:18px;

box-shadow:0 20px 50px rgba(0,0,0,0.25);
}

.user-info-message .usernickname .usernickname-select-updateform-panel-typearea-type{
width:100%;
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(87,76,214,0.2);
outline:none;
font-size:14px;
font-weight:600;
}

.user-info-message .usernickname .usernickname-select-updateform-panel-typearea-type:focus{
border-color:#574cd6;
box-shadow:0 0 0 3px rgba(87,76,214,0.1);
}

.user-info-message .usernickname .usernickname-select-updateform-panel-button{
margin-top:14px;
}

.user-info-message .usernickname .nicknameupdatebtn{
width:100%;
padding:12px;
border:none;
border-radius:14px;

background:linear-gradient(135deg,#574cd6,#7b6ef6);
color:#fff;

font-weight:800;
cursor:pointer;
transition:.2s ease;
}

.user-info-message .usernickname .nicknameupdatebtn:hover{
transform:translateY(-2px);
}

.user-info-message .usernickname .usernickname-select-updateform-panel-cancel{
position:absolute;
top:14px;
right:14px;
font-size:18px;
cursor:pointer;
color:#fff;
}

div.content-darkmode .user-info-message .usernickname {
background:rgba(28,28,38,0.72);
border-color:rgba(255,255,255,0.05);
}

div.content-darkmode .user-info-message .usernickname-select-name{
background:rgba(28,28,38,0.6);
border-color:rgba(255,255,255,0.05);
}

div.content-darkmode .user-info-message .usernickname-select-oldnick{
color:#fff;
}
.user-info-message .usernickname-actions-down{display:flex;gap:10px;justify-content: space-between;margin-top:12px;padding-top:12px;border-top:1px solid rgba(87,76,214,0.08);align-items: center;}

.user-info-message .usernickname-actions-down .edit-btn,
.user-info-message .usernickname-actions-down .delete-btn{
display:inline-flex;
align-items:center;
gap:6px;

font-size:12px;
font-weight:800;
padding:8px 12px;
border-radius:12px;
text-decoration:none;
transition:.2s ease;
}

/* icon size fix */
.user-info-message .usernickname-actions-down i{
font-size:14px;
line-height:1;
}

/* edit */
.user-info-message .usernickname-actions-down .edit-btn{
background:linear-gradient(135deg,#574cd6,#7b6ef6);
color:#fff;
}

/* delete */
.user-info-message .usernickname-actions-down .delete-btn{
background:rgba(255,75,43,0.1);
color:#ff4b2b;
}

.user-info-message .usernickname-actions-down .edit-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(87,76,214,0.25);
}

.user-info-message .usernickname-actions-down .delete-btn:hover{
background:#ff4b2b;
color:#fff;
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(255,75,43,0.2);
}

.user-info-message .usernickname-select-updateform{
display:none;
}

.user-info-message #updatebox2:checked ~ .usernickname-select-updateform{
display:block;
}

.user-info-message .usernickname-select-updateform-panel{
position:fixed;
inset:0;
background:rgba(0,0,0,0.55);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
backdrop-filter: blur(6px);
animation: userinfomsgfadeIn .2s ease;
}

@keyframes userinfomsgfadeIn{
from{opacity:0;}
to{opacity:1;}
}

/* modal box */
.user-info-message .usernickname-select-updateform-panel-form{width:92%;max-width:420px;background:linear-gradient(180deg,#ffffff,#f7f7ff);border-radius: 10px;padding:20px;position:relative;box-shadow:
0 25px 60px rgba(0,0,0,0.25);animation: pop .25s ease;}

@keyframes pop{
from{transform:scale(.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}

/* close button */
.user-info-message .usernickname-select-updateform-panel-cancel{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(87,76,214,0.1);color: #ffffff;font-size: 20px;cursor:pointer;transition:.2s;}

.user-info-message .usernickname-select-updateform-panel-cancel:hover{
background:#574cd6;
color:#fff;
transform:rotate(90deg);
}

/* input box */
.user-info-message .usernickname-select-updateform-panel-typearea-type{
width:100%;
padding:14px 14px 14px 44px;
border-radius:14px;
border:1px solid rgba(87,76,214,0.2);
outline:none;
font-size:14px;
font-weight:600;
transition:.2s ease;
background:#fff;

/* icon space */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23574cd6' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-size:18px;
background-position:12px center;
}

.user-info-message .usernickname-select-updateform-panel-typearea-type:focus{
border-color:#574cd6;
box-shadow:0 0 0 4px rgba(87,76,214,0.15);
}

/* button */
.user-info-message .usernickname-select-updateform-panel-button{
margin-top:14px;
}

.user-info-message .nicknameupdatebtn{
width:100%;
padding:13px;
border:none;
border-radius:14px;

background:linear-gradient(135deg,#574cd6,#7b6ef6);
color:#fff;

font-weight:900;
cursor:pointer;
transition:.2s ease;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

.user-info-message .nicknameupdatebtn::before{
content:"\f0c7"; /* save icon */
font-family: "uicons-regular-rounded";
font-size:14px;
}

.user-info-message .nicknameupdatebtn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(87,76,214,0.25);
}

/* dark mode */
div.content-darkmode .user-info-message .usernickname-select-updateform-panel-form{
background:#1d1d2e;
}

div.content-darkmode .user-info-message .usernickname-select-updateform-panel-typearea-type{
background:#12121a;
color:#fff;
border-color:rgba(255,255,255,0.08);
}

div.content-darkmode .user-info-message .usernickname-select-updateform-panel-cancel{
background:rgba(255,255,255,0.08);
color:#fff;
}

.user-info-message .usernickname-select-updateform-panel-form form {
margin-bottom: 0px;
}

.user-info-message .user_medias{
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 10px 0;
}

.user-info-message .user_media{
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 18px;
overflow: hidden;

background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);

border: 1px solid rgba(87,76,214,0.12);

box-shadow:
0 10px 25px rgba(87,76,214,0.12),
0 2px 6px rgba(0,0,0,0.05);

transition: all .25s ease;
cursor: pointer;
}

.user-info-message .user_media:hover{
transform: translateY(-4px) scale(1.02);
box-shadow:
0 18px 40px rgba(87,76,214,0.2),
0 6px 12px rgba(0,0,0,0.08);
}

.user-info-message .user_media img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}

.user-info-message .user_media:hover img{
transform: scale(1.1);
}

.user-info-message .user_media a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.user-info-message .user_media::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 40%,
rgba(0,0,0,0.35)
);
opacity: 0;
transition: .25s ease;
}

.user-info-message .user_media:hover::after{
opacity: 1;
}

.user-info-message .user_media .media_badge{
position: absolute;
top: 10px;
right: 10px;

width: 28px;
height: 28px;

border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;

background: rgba(87,76,214,0.9);
color: #fff;
font-size: 14px;

box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.user-info-message .user_media.video::before{
content: "▶";
position: absolute;
top: 10px;
left: 10px;

width: 28px;
height: 28px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background: rgba(255,75,43,0.9);
color: #fff;
font-size: 12px;
font-weight: 900;
}

.user-info-message .user_media.audio::before{
content: "♪";
position: absolute;
top: 10px;
left: 10px;

width: 28px;
height: 28px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background: rgba(0,198,255,0.9);
color: #fff;
font-size: 14px;
font-weight: 900;
}

@media (max-width: 768px){
.user-info-message .user_medias{
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}

.user-info-message .user_media{
border-radius: 14px;
}
}

@media (max-width: 480px){
.user-info-message .user_medias{
grid-template-columns: repeat(2, 1fr);
}
}



.user-info-message .user_media::after{
pointer-events:none;
}



.user-info-message .convers_search{
margin-top: 10px;
}

.user-info-message .convers_search_inputs form{
display: flex;
align-items: center;
padding: 0px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(12px);
border: 1px solid rgba(87, 76, 214, 0.12);
box-shadow: 0 10px 25px rgba(87, 76, 214, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
transition: .2s ease;
}

.user-info-message .convers_search_inputs form:hover{
transform: translateY(-2px);
box-shadow:
0 14px 30px rgba(87,76,214,0.15),
0 4px 10px rgba(0,0,0,0.06);
}

.user-info-message .convers_search_inputs input[type="search"]{
flex: 1;
border: none;
outline: none;
font-size: 14px;
font-weight: 600;
color: #1f1f28;
background: transparent;
padding: 10px 8px;
border-radius: 10px 0px 0px 10px;
}

.user-info-message .convers_search_inputs input::placeholder{
color: #8a8aa3;
font-weight: 500;
}

.user-info-message .convers_search_inputs button{
width: 42px;
height: 42px;
border: none;
border-radius: 0px 10px 10px 0px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #574cd6, #7b6ef6);
color: #fff;
cursor: pointer;
transition: .2s ease;
box-shadow: 0 8px 18px rgba(87, 76, 214, 0.25);
}

.user-info-message .convers_search_inputs button:hover{
transform: scale(1.05);
}

.user-info-message .convers_search_inputs button:active{
transform: scale(0.95);
}

.user-info-message .convers_search_inputs button i{
font-size: 16px;
}

div.content-darkmode .user-info-message .convers_search_inputs form{
background: rgba(28,28,38,0.65);
border-color: rgba(255,255,255,0.08);
}

div.content-darkmode .user-info-message .convers_search_inputs input{
color: #fff;
}

div.content-darkmode .user-info-message .convers_search_inputs input::placeholder{
color: #b8b8c8;
}



.inbox-wrapper .privacy_popup_overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.55);
backdrop-filter:blur(4px);
display:flex;
align-items:flex-end;
justify-content:center;
padding:16px;
z-index:99999;

opacity:0;
visibility:hidden;
transition:.2s ease;
}

.inbox-wrapper input#openprivacytab:checked ~ .privacy_popup_overlay {
opacity: 1; 1;
visibility: visible;
}

/* POPUP BOX */
.inbox-wrapper .privacy_popup_overlay .privacy_popup_box{
width:100%;
max-width:420px;
background:#fff;
border-radius:24px 24px 18px 18px;
padding:18px;
transform:translateY(40px);
transition:.25s ease;
box-shadow:0 10px 40px rgba(0,0,0,0.25);
}

.content-darkmode .inbox-wrapper .privacy_popup_overlay .privacy_popup_box{
background:#16171f;
}

.inbox-wrapper input#openprivacytab:checked ~ .privacy_popup_overlay .privacy_popup_box{
transform:translateY(0);
}

.inbox-wrapper .privacy_popup_overlay .privacy_popup_top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:4px;
}

.inbox-wrapper .privacy_popup_overlay .close_privacy_popup{
width:34px;
height:34px;
border-radius:12px;
background:rgba(87,76,214,0.12);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
color:#574cd6;
}

.inbox-wrapper .privacy_popup_overlay .msg_privacy_title{
display:flex;
align-items:center;
gap:8px;
font-size:18px;
font-weight:700;
color:#574cd6;
}

.inbox-wrapper .privacy_popup_overlay .msg_privacy_desc{
font-size:13px;
color:#8a90a6;
margin-bottom:16px;
}

.content-darkmode .inbox-wrapper .privacy_popup_overlay .msg_privacy_desc{
color:#a7acc0;
}

.inbox-wrapper .privacy_popup_overlay .privacy_option{
display:block;
margin-bottom:10px;
cursor:pointer;
font-weight: unset;
}

.inbox-wrapper .privacy_popup_overlay .privacy_option input{
display:none;
}

.inbox-wrapper .privacy_popup_overlay .privacy_card{
display:flex;
align-items:center;
gap:12px;
padding:13px;
border-radius:16px;
background:#f7f7ff;
border:1px solid #ececff;
transition:.2s ease;
}

.content-darkmode .inbox-wrapper .privacy_popup_overlay .privacy_card{
background:#1d1e28;
border-color:#2a2c38;
}

.inbox-wrapper .privacy_popup_overlay .privacy_card:hover{
transform:translateY(-1px);
}

.inbox-wrapper .privacy_popup_overlay .privacy_icon{
width:42px;
height:42px;
border-radius:14px;
background:#574cd6;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:18px;
flex-shrink:0;
}

.inbox-wrapper .privacy_popup_overlay .privacy_text{
flex:1;
}

.inbox-wrapper .privacy_popup_overlay .privacy_name{
font-size:14px;
font-weight:700;
color:#222;
}

.content-darkmode .inbox-wrapper .privacy_popup_overlay .privacy_name{
color:#fff;
}

.inbox-wrapper .privacy_popup_overlay .privacy_sub{font-size:12px;color:#7d8398;margin-top:2px;font-variant: small-caps;}

.content-darkmode .inbox-wrapper .privacy_popup_overlay .privacy_sub{
color:#a7acc0;
}

.inbox-wrapper .privacy_popup_overlay .privacy_tick{
width:24px;
height:24px;
border-radius:50%;
background:#574cd6;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:11px;

opacity:0;
transform:scale(.6);
transition:.2s ease;
}

.inbox-wrapper .privacy_popup_overlay .privacy_option input:checked + .privacy_card{
border-color:#574cd6;
background:#f1efff;
box-shadow:0 0 0 2px rgba(87,76,214,.12);
}

.content-darkmode .inbox-wrapper .privacy_popup_overlay .privacy_option input:checked + .privacy_card{
background:#23243a;
}

.inbox-wrapper .privacy_popup_overlay .privacy_option input:checked + .privacy_card .privacy_tick{
opacity:1;
transform:scale(1);
}

.inbox-wrapper .privacy_popup_overlay .privacy_save_btn{
width:100%;
height:46px;
border:none;
border-radius:16px;
margin-top:8px;
background:#574cd6;
color:#fff;
font-size:14px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
}

.inbox-wrapper .privacy_popup_overlay .privacy_popup_box form {margin-bottom: 0px;}

div.content-darkmode .shoutpostsend .filters-opt .selectphoto .select-pic input {
color: #a4a9ff;
}



#new-inbox-ui .user_chats_inbox{
position: relative;
overflow: hidden;
width:100%;
max-width:360px;
height:100dvh; 
background:#fff;
border-radius:12px;
display:flex;
flex-direction:column;
border: 5px solid #FFF;
}

#new-inbox-ui .user_chats_inbox .user_chats_inbox_header {
background: #574cd6;
color: #fff;
padding: 15px;
border-radius: 10px 0px 0px 0px;
border-bottom:1px solid #837aed;
}


#new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_left {
float: left;
margin-right: 15px;
font-size: 20px;
margin-top: 5px;
}

#new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_img img {
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid #aaa;
}

#new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_img {
float: left;
margin-right: 10px;
}

#new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_name {
float: left;
font-weight: 800;
}

#new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_name span {
display: block;
font-weight: 300;
font-size: 13px;
color:#eee;
padding-left: 1px;
font-variant-caps: all-small-caps;
}

#new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_right {
background: #ffffff;
font-size: 15px;
color: #574cd6;
position: absolute;
right: 0px;
top: -1px;
height: 73px;
display: flex;
align-items: center;
justify-content: space-around;
padding: 13px;
gap: 9px;
z-index: 55;
border-radius: 0px 0px 0px 30px;
margin: -1px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll{
background: linear-gradient(180deg, #ffffff, #574cd6 50%);
flex:1;
overflow-y:auto;
overflow-x:hidden;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll::-webkit-scrollbar{
width:3px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll::-webkit-scrollbar-track{
background:#574cd6;
border-radius:0px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll::-webkit-scrollbar-thumb{
background:#fff;
border-radius:0px;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll::-webkit-scrollbar-thumb{
background:#121212;
border-radius:0px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll::-webkit-scrollbar-thumb:hover{
background:#d6d3ff;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs {
background: #574cd6;
border-radius: 0px 40px 0px 0px;
min-height: 100%;
padding: 20px 10px;
padding-bottom: 0px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg, #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_typing {
display: flex;
flex-direction: column;
margin-bottom: 14px;
animation: fadeInmenuopenstaff .25s ease;
position: relative;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send, #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs  .user_chats_typing.send {align-items: flex-end;}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer{
align-items:center;
padding:10px;
background:#574cd6;
position:relative;
margin-bottom: 0px;
display: unset;
margin-top: 0px;
unicode-bidi: unset;
margin-block-end: unset;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer.progressadd {
padding-bottom: 20px!important;
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing{
display:flex;
align-items:center;
flex:1;
background:#fff;
border-radius:999px;
padding:4px 6px;
gap:6px;
float: left;
width: 85%;
margin-right: 2.5%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .clip_btn{
width: 25px;
display: flex;
align-items: center;
justify-content: flex-start;
color: #574cd6;
font-size: 18px;
cursor: pointer;
border-radius: 50%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .voice_send_btn{width: 40px;height: 20px;color: #574cd6;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;border-right: 1px solid #aca5ff;padding-right: 2.5px;}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .msg_send_textarea{
flex:1;
margin:0 6px;
margin-right:0px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .msg_send_textarea .msg_send_textareas{width:100%;border:none;outline:none;resize:none;border-radius:0px;padding: 7px 8px;font-size:14px;background:transparent;max-height: 35px;padding-left: 0px;color: #574cd6;}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .msg_send_textarea .msg_send_textareas::placeholder{
color:#574cd6; 
opacity:1;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .msg_send_textarea .msg_send_textareas::-webkit-input-placeholder{color:#574cd6;}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .msg_send_textarea .msg_send_textareas:-ms-input-placeholder{color:#574cd6;}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn {
width:40px;
height:40px;
background:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
overflow:hidden;
border:none;

transition: all 0.25s cubic-bezier(.4,0,.2,1);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn:active {
transform: scale(0.92);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.sending {
background:#fff;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn .send_icon {
display:flex;
align-items:center;
justify-content:center;
transition: all 0.25s ease;
z-index:2;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.sending .send_icon {
opacity:0;
transform:scale(0.4) rotate(-20deg);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn .send_loader {
position:absolute;
width:24px;
height:24px;
border-radius:50%;

border:2.5px solid rgba(87,76,214,0.15);
border-top:2.5px solid #574cd6;
border-right:2.5px solid #574cd6;

opacity:0;
transform:scale(0.5);

transition: all 0.25s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.sending .send_loader {
opacity:1;
transform:scale(1);
animation: spinFast 0.6s linear infinite, pulse 1s ease infinite;
}
@keyframes spinFast {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}

@keyframes pulse {
0%   { box-shadow: 0 0 0 0 rgba(87,76,214,0.4); }
70%  { box-shadow: 0 0 0 6px rgba(87,76,214,0); }
100% { box-shadow: 0 0 0 0 rgba(87,76,214,0); }
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.successmsger {
background:#574cd6;
transform: scale(1.05);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.successmsger .send_loader {
opacity:0;
animation:none;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.successmsger .send_icon {
opacity:1;
transform:scale(1);
filter: brightness(0) invert(1);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.successmsger::after {
content:"✔";
position:absolute;
color:#fff;
font-size:14px;
animation: popTick 0.3s ease;
}

@keyframes popTick {
0%   { transform: scale(0.3); opacity:0; }
100% { transform: scale(1); opacity:1; }
}

@media (hover:hover) {
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn:hover {
transform: scale(1.08);
box-shadow: 0 4px 14px rgba(87,76,214,0.25);
}
}
#new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_right i {
padding: 4px 8px;
border: 1px solid;
border-radius: 999px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg_n {
margin-bottom: 14px;
animation: fadeInmenuopenstaff .25s ease;
position: relative;
padding: 10px;
border-radius: 18px;
max-width: 75%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg, #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_typing, #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg * {
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg img {
pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg img.emojisclass {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg, #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_typing {
-webkit-touch-callout: none;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received, #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_typing.received {
align-items: flex-start;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .user_chats_msg_n {
background: #7b6fee;
color: #fff;
border-bottom-left-radius: 4px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .user_chats_msg_n {
background: #ffff;
color: #000000;
border-bottom-right-radius: 4px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_react {
position: absolute;
bottom: -8px;
right: -8px;

width: 22px;
height: 22px;
padding: 0 5px;

background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;

display: flex;
align-items: center;
justify-content: center;
gap: 2px;

font-size: 9px;
line-height: 1;

box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);

position: absolute;
overflow: visible;

transform-origin: center;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_react.pop {
animation: reactPop 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes reactPop {
0% { opacity: 0; transform: scale(0.4); }
60% { opacity: 1; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_react .react_icon {
font-size: 10px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_react .react_count {
font-size: 7px;
font-weight: 700;
color: #333;
margin-top: -1px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_react::before {
content: "";
position: absolute;
inset: -3px;
border-radius: 999px;
border: 2px solid transparent;
border-top-color: #ff2d55;
opacity: 0;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_react.ring::before {
opacity: 1;
animation: ringSpin 0.6s linear;
}

@keyframes ringSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); opacity: 0; }
}
@media (max-width:768px){

#new-inbox-ui .user_chats_inbox{
max-width:100%;
border-radius:0;
}

}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_reply {
background: rgba(255,255,255,0.2); 
padding: 6px 10px;
border-left: 3px solid #fff;
border-radius: 8px;
margin-bottom: 10px;
font-size: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
margin-left: -2px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_reply .reply_name {
font-weight: 700;
font-size: 12px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .msg_reply .reply_text {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .msg_reply {
background: rgba(255,255,255,0.2);
color: #fff;
border-left-color: #fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .msg_reply {
background: #f0f0f0;
color: #000;
border-left-color: #574cd6;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .replying_bar {
display: flex;
flex: 1 1 100%;
align-items: center;
justify-content: space-between;
background: #f3f3f3;
padding: 8px 12px;
border-radius: 12px;
border-left: 4px solid #574cd6;
margin-bottom: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-size: 13px;
color: #574cd6;
transition: background 0.2s;
}
.replying_bar:hover {
background: #e8e8ff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .replying_bar .replying_text {
flex: 1 1 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 8px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .replying_bar .reply_cancel_btn {
background: transparent;
border: none;
color: #ff4d4f;
font-weight: bold;
font-size: 16px;
cursor: pointer;
transition: transform 0.2s;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .replying_bar .reply_cancel_btn:hover {
transform: scale(1.2);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .msg_react {
left: -6px;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_gallery{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:6px;
margin-top:6px;
border-radius:14px;
overflow:hidden;
padding-right:5%;
align-items:start;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_gallery.single{
grid-template-columns:1fr;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_gallery.three{
grid-template-columns:repeat(3,1fr);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_img{
position:relative;
overflow:hidden;
border-radius:12px;
cursor:pointer;
margin:5%;
background:#111;
box-shadow:0 0 5px rgb(0 0 0 / 55%);
aspect-ratio:1/2;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg  .user_message_img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .28s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_img:hover img{
transform:scale(1.06);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .more_overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
color:#fff;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
backdrop-filter:blur(3px);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_video,
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .lazy_video{
position:relative;
overflow:hidden;
border-radius:12px;
cursor:pointer;
margin:5%;
background:#000;
box-shadow:0 0 5px rgb(0 0 0 / 55%);
aspect-ratio:1/2;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .video_thumb{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .video_fake_thumb{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .28s ease;
filter:brightness(.92);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_video:hover .video_fake_thumb,
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .lazy_video:hover .video_fake_thumb{
transform:scale(1.06);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .video_play_icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:52px;
height:52px;
background:rgba(0,0,0,.55);
color:#fff;
font-size:21px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
pointer-events:none;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
transition:.2s ease;
z-index:2;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_video:hover .video_play_icon,
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .lazy_video:hover .video_play_icon{
transform:translate(-50%,-50%) scale(1.08);
background:rgba(0,0,0,.72);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_video video{
width:100%;
height:100%;
object-fit:cover;
background:#000;
display:block;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg div#oplayerContainer{
position:absolute;
inset:0;
width:100%;
height:100%;
background:#000;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg #oplayerContainer video{
width:100%;
height:100%;
object-fit:contain;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_audio{
margin-top:5px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_audio audio{
width:100%;
border-radius:12px;
display:block;
}

@media(max-width:768px){

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_gallery{
gap:4px;
padding-right:3%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .video_play_icon{
width:46px;
height:46px;
font-size:18px;
}

}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_img:active,
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_video:active,
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .lazy_video:active{
transform:scale(.98);
transition:.12s;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .expired, #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .unsupported{
background:#fff;
color:red;
padding:10px;
border-radius:8px;
font-size:12px;
text-align:center;
}

#new-inbox-ui .media_preview_modal{
position: fixed;
top:0; left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.95);

display: flex;
align-items: center;
justify-content: center;

z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
overflow: hidden;
}

#new-inbox-ui .media_preview_modal.active{
opacity:1;
visibility: visible;
}

#new-inbox-ui .media_preview_modal #mediaContainer img,
#new-inbox-ui .media_preview_modal #mediaContainer videor{
max-width: 95vw;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
opacity: 0;
transform: scale(0.95);
transition: all 0.25s ease;
}

#new-inbox-ui .media_preview_modal.active #mediaContainer img,
#new-inbox-ui .media_preview_modal.active #mediaContainer video,
#new-inbox-ui .media_preview_modal.active #oplayerContainer{
opacity:1;
transform: scale(1);
}

#new-inbox-ui .media_preview_modal .close_preview{
position:absolute;
top:20px; right:20px;
font-size: 30px;
color: #fff;
cursor:pointer;
z-index:10000;
transition: transform 0.2s, background 0.2s;
background: rgba(255,255,255,0.15);
width: 40px; height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

#new-inbox-ui .media_preview_modal .close_preview:hover{
background: rgba(255,255,255,0.3);
transform: scale(1.1);
}


#new-inbox-ui .media_preview_modal #mediaContainer{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_voice{
display:flex;
align-items:center;
gap:12px;

padding:10px 14px;
border-radius:16px;

background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);

box-shadow: 0 6px 18px rgba(0,0,0,0.08);

transition: all .25s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_voice:hover{
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(87,76,214,0.18);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_message{
display:flex;
align-items:center;
gap:12px;
padding:10px 14px;
border-radius:16px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
transition: all .25s ease;
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_play{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

background: linear-gradient(135deg,#574cd6,#7b6ef6);
color:white;

cursor:pointer;
transition: .2s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_play:active{
transform: scale(0.85);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_bars{
display:flex;
align-items:flex-end;
gap:2px;
height:30px;
overflow:hidden;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_bar{
width:3px;
background:rgba(255,255,255,0.3);
border-radius:3px;
transition:0.15s ease;
transform:scaleY(0.6);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_bar.active{
background:#fff;
transform:scaleY(1.2);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_time{
font-size:12px;
opacity:0.7;
min-width:45px;
text-align:right;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .wave_wrap{
position:relative;
width:140px;
height:30px;
display:flex;
align-items:flex-end;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_lines{
display:flex;
gap:2px;
height:100%;
width:100%;
align-items: center;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_line{
width:3px;
background:#888;
border-radius:3px;
opacity:0.6;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .voice_line{
background: rgba(255,255,255,0.35);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .voice_line{
background: rgba(0,0,0,0.25);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .voice_line.active{
background: #ffffff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .voice_line.active{
background: #574cd6;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_line{
transition: background 0.2s ease, transform 0.2s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_line.active{
transform: scaleY(1.2);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_lines{
cursor: pointer;
position: relative;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .voice_play img {
width: 15px;
}



#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .show_more_box{
width:100%;
display:flex;
justify-content:center;
margin:10px 0;
margin-bottom: 30px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .show_more_box .show_more_btn{
display:flex;
align-items:center;
gap:8px;

padding:8px 14px;
border:none;
border-radius:20px;

font-size:12px;
cursor:pointer;

background: rgba(255,255,255,0.08);
color:#fff;

backdrop-filter: blur(10px);

transition:0.2s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .show_more_box .show_more_btn:hover{
transform: translateY(-2px);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .show_more_box .show_more_btn i{
font-size:14px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs  .user_chats_msg .user_message_doc {
display: flex;
align-items: center;
gap: 12px;

padding: 10px 12px;
border-radius: 14px;

max-width: 320px;

backdrop-filter: blur(10px);

box-shadow: 0 4px 12px rgba(0,0,0,0.15);
margin: 1%;
transition: 0.25s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_doc:hover{
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .user_message_doc{
background: rgba(255,255,255,0.08);
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .user_message_doc{
background: #ffffff;
color:#222;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_doc .doc_icon {
width: 44px;
height: 44px;
border-radius: 10px;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;

color:#fff;
background: linear-gradient(135deg,#6c5ce7,#574cd6);

position:relative;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_doc .doc_ext{
position:absolute;
bottom:-5px;
right:-5px;

font-size:8px;
padding:2px 4px;
border-radius:4px;

background:#000;
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_doc .doc_info {
flex:1;
overflow:hidden;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_doc .doc_name {
font-size:13px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:100px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_doc .doc_size {
font-size:11px;
opacity:0.7;
margin-top:2px;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_doc .doc_download {
width: 36px;
height: 36px;

border-radius: 50%;

display:flex;
align-items:center;
justify-content:center;

text-decoration:none;

transition:0.2s;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .doc_download{
background: rgba(255,255,255,0.15);
color:#fff;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .doc_download{
background: rgba(87,76,214,0.12);
color:#574cd6;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .doc_download:hover{
background:#574cd6 !important;
color:#fff !important;
transform: scale(1.05);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .doc_download i{
font-size:16px;
color:inherit;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel{
position:absolute;
bottom: 65px;
left: 1.5%;
display:flex;
gap:12px;
padding:12px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
opacity:0;
visibility:hidden;
transform: translateY(20px);
transition:0.25s ease;
z-index:999;
align-items: center;
justify-content: center;
width: 97.5%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel.active{
opacity:1;
visibility:visible;
transform: translateY(0);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
cursor:pointer;
font-size:11px;
color:#fff;
width:60px;
text-align:center;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item .attach_icon{
position:relative;
width:50px;
height:50px;
border-radius:16px;

display:flex;
align-items:center;
justify-content:center;

font-size:20px;
color:#fff;

transition:0.2s;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item .attach_icon.img{
background: linear-gradient(135deg,#ff7a18,#ffb347);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item .attach_icon.video{
background: linear-gradient(135deg,#ff416c,#ff4b2b);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item .attach_icon.audio{
background: linear-gradient(135deg,#1dd1a1,#10ac84);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item .attach_icon.doc{
background: linear-gradient(135deg,#574cd6,#7b6ef6);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item:hover .attach_icon{
transform: scale(1.1);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_badge{
position:absolute;
top:-6px;
right:-6px;
min-width:18px;
height:18px;
padding:0 5px;
background: #5f52dc;
color: #ffffff;
font-size:10px;
font-weight:700;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 6px rgba(0,0,0,0.3);
opacity: 0;
transform:scale(0.5);
transition:0.2s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_panel .attach_item.has-files .attach_badge{
opacity:1;
transform:scale(1);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;

padding:0 14px;
height:0;

overflow:hidden;

background: rgba(87,76,214,0.95);
backdrop-filter: blur(12px);
border-radius:18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
color:#fff;

opacity:0;
transform: translateY(20px);

transition: all 0.25s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar.active{
height:60px;
padding:10px 14px;

opacity:1;
transform: translateY(0);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_left{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_left .rec_dot{
width:10px;
height:10px;
border-radius:50%;
background:#ff4d4f;
animation: blink 1s infinite;
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_wave{
flex:1;
display:flex;
align-items:center;
gap:2px;
height:30px;
overflow:hidden;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_wave_bar{
width:3px;
background:#fff;
border-radius:3px;
height:6px;
transition: height 0.08s ease;
}

@keyframes waveAnim{
0%,100%{height:6px;}
50%{height:24px;}
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_right{
display:flex;
align-items:center;
gap:10px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_right .rec_time{
font-size:12px;
opacity:0.8;
min-width:40px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_right .rec_actions{
display:flex;
gap:6px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_right .rec_actions .rec_cancel, #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_right .rec_actions .rec_send{
width:32px;
height:32px;
border:none;
border-radius:50%;
cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

transition:0.2s;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .voice_rec_right .rec_actions .rec_cancel{
background: rgba(255,255,255,0.2);
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .rec_send{
background:#fff;
color:#574cd6;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .rec_cancel:hover{
background:#ff4d4f;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .voice_record_bar .rec_send:hover{
transform: scale(1.1);
}
#new-inbox-ui .user_chats_inbox .voice_wave_bar{
width:3px;
background:#fff;
border-radius:3px;
height:6px;
transition: height 0.1s linear;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .hiderecarea {
opacity: 0;
transform: translateY(20px);
height: 0px;
transition: all 0.25s ease;
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .attach_icon.emojis {
background: linear-gradient(135deg, #FFEB3B, #FFC107);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel{position:absolute;bottom: 70px;left:5px;width:97%;max-width:360px;height:320px;background: rgba(87,76,214,0.95);backdrop-filter: blur(15px);border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,0.3);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform: translateY(20px);transition:0.25s;z-index:9999;}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel.active{
opacity:1;
visibility:visible;
transform: translateY(0);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_header{
display:flex;
align-items:center;
border-bottom:1px solid rgba(255,255,255,0.2);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_header input{
flex:1;
padding:10px;
border:none;
outline:none;
background:transparent;
color:#fff;
font-size:14px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_header input::placeholder{
color: rgba(255,255,255,0.6);
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_header input::-webkit-input-placeholder{
color: rgba(255,255,255,0.6);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_header .emoji_close{
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
color:#fff;
transition:0.2s;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_header .emoji_close:hover{
background:rgba(255,255,255,0.1);
border-radius:50%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_bbcode{
display:flex;
gap:6px;
padding:6px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_bbcode button{
flex:1;
background:rgba(255,255,255,0.1);
border:none;
color:#fff;
padding:6px;
border-radius:8px;
cursor:pointer;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_grid{
flex:1;
overflow:auto;
display:grid;
grid-template-columns: repeat(8, 1fr);
align-items: center;
gap:6px;
padding:10px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_grid .emoji_item img{
max-width: 100%;
max-height: 100%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_load_more{
text-align:center;
padding:8px;
color:#fff;
cursor:pointer;
font-size:13px;
background:rgba(255,255,255,0.08);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_load_more:hover{
background:#574cd6;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .emoji_panel .emoji_grid .emoji_item {
margin: 5%;
padding: 15%;
background: #eeeeee40;
border-radius: 5px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_menu_box{
position:absolute;
top:auto;
bottom:-5px;
right:10px;
width:170px;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(10px);
border-radius:14px;
padding:8px;
display:none;
flex-direction:column;
z-index:999;
color:#fff;
transform: translateY(100%);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_menu_box.active{
display:flex;
animation: fadeMenu .15s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .msg_menu_box{
right: 0;
left: auto;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .msg_menu_box{
left: 0;
right: auto;
}


@keyframes fadeMenu{
from{transform: scale(0.9); opacity:0;}
to{transform: scale(1); opacity:1;}
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_menu_time{
font-size:11px;
opacity:0.6;
text-align:center;
margin-bottom:5px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_menu_item{
display:flex;
gap:8px;
padding:7px;
border-radius:8px;
cursor:pointer;
font-size:13px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_menu_item:hover{
background: rgba(255,255,255,0.1);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg:has(.msg_menu_box.active) {
z-index: 99998;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .chat_date_divider{
width:100%;
display:flex;
justify-content:center;
margin:15px 0;
margin-top: -10px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .chat_date_divider span{
background: rgba(0,0,0,0.4);
color:#fff;
font-size:12px;
padding:5px 12px;
padding-top: 2.5px;
border-radius: 7px;
backdrop-filter: blur(8px);
font-variant-caps: all-small-caps;
font-size: 15px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_animate {
opacity: 0;
transform: translateY(-10px);
animation: msgFadeIn 0.25s ease forwards;
}

@keyframes msgFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .top_loader{
display:none;
text-align:center;
padding:10px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .top_loader.active{
display:block;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .spinner{
width:18px;
height:18px;
border:2px solid #ccc;
border-top:2px solid #574cd6;
border-radius:50%;
animation: spin .6s linear infinite;
margin:auto;
}

@keyframes spin{
to{ transform: rotate(360deg); }
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .upload_progress_wrap {position: absolute;top: 55px;left: 10px;right: 10px;display: flex;align-items: center;gap: 8px;opacity: 0;visibility: hidden;transform: translateY(20px);transition: 0.25s ease;z-index: 999;margin-bottom: 10px;}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .upload_progress_wrap.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .upload_progress_wrap .upload_progress_bar {
flex: 1;
height: 5px;
background: rgba(255,255,255,0.2);
border-radius: 999px;
overflow: hidden;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .upload_progress_wrap .upload_progress_bar .upload_progress_fill {
height: 100%;
width: 0%;

background: linear-gradient(
90deg,
#574cd6,
#7b6ef6,
#00f0ff,
#ff00cc
);

border-radius: 999px;
transition: width 0.1s linear;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .upload_progress_wrap .upload_progress_text {
font-size: 11px;
color: #fff;
min-width: 32px;
text-align: center;
opacity: 0.9;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
font-size: 10px;
margin-right: 2.5px;
margin-top: -12px;
user-select: none;
color: #fff;
font-family: fangsong;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_time {
opacity: 0.6;
font-weight: 500;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_state {
letter-spacing: 0.3px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_state {
transition: all 0.25s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_state.updated {
animation: msgStatePop 0.25s ease;
}

@keyframes msgStatePop {
0%   { transform: scale(0.8); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_state.delivered {
right: -1px;
}


#new-inbox-ui #chatNotifyWrap{
position: fixed;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 95%;
max-width: 360px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 10px;
}

#new-inbox-ui #chatNotifyWrap .chat_notify{
position: relative;
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border-radius:18px;

background: rgba(255,255,255,0.12);
backdrop-filter: blur(16px);

box-shadow: 0 10px 30px rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.2);
color:#fff;

will-change: transform, opacity;

opacity: 0;
transform: translateY(-40px) scale(0.95);
}
#new-inbox-ui #chatNotifyWrap .chat_notify.shownotify{
animation: notifyIn 0.45s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes notifyIn{
0%{
opacity: 0;
transform: translateY(-60px) scale(0.95);
}
70%{
opacity: 1;
transform: translateY(8px) scale(1.02);
}
100%{
opacity: 1;
transform: translateY(0) scale(1);
}
}

#new-inbox-ui #chatNotifyWrap .chat_notify.hide{
animation: notifyOut 0.25s ease forwards;
}

@keyframes notifyOut{
to{
transform: translateY(-20px);
opacity:0;
}
}

#new-inbox-ui #chatNotifyWrap .notify_avatar{
width:42px;
height:42px;
border-radius:50%;
overflow:hidden;
flex-shrink:0;
}

#new-inbox-ui #chatNotifyWrap .notify_avatar img{
width:100%;
height:100%;
object-fit:cover;
}

#new-inbox-ui #chatNotifyWrap .notify_content{
flex:1;
overflow:hidden;
}

#new-inbox-ui #chatNotifyWrap .notify_name{
font-weight:700;
font-size:13px;
margin-bottom:2px;
}

#new-inbox-ui #chatNotifyWrap .notify_text{
font-size:12px;
opacity:0.85;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#new-inbox-ui #chatNotifyWrap .chat_notify::before{
content:"";
position:absolute;
inset:0;
border-radius:18px;
padding:1px;

background: linear-gradient(
120deg,
#574cd6,
#7b6ef6,
#00f0ff,
#ff00cc
);

-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;

pointer-events:none;
}

#new-inbox-ui #chatNotifyWrap .chat_notify.is_notif{
border-left: 3px solid #00f0ff;
}

#new-inbox-ui #chatNotifyWrap .notify_icon{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background: rgba(0,240,255,0.15);
color:#00f0ff;
margin-right:8px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .deleted_icon{
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background: rgba(255,77,79,0.15);
font-size:16px;
flex-shrink:0;
float: left;
margin-right: 10px;
position:relative;
flex-shrink:0;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .deleted_text{
font-size:13px;
font-weight:500;
opacity:0.9;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-top: 9px;
font-family: ui-monospace;
text-transform: uppercase;
font-style: italic;
}

@keyframes spinRing{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .deleted_icon::before{
content:"";
position:absolute;
inset: 0px;
border-radius:50%;
border: 1px solid transparent;
border-right-color:#ff7a18;
animation: spinRing 1.2s linear infinite;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_react_bar{position:relative;top:auto;left:auto;right:auto;transform:none;width:100%;display:flex;justify-content: center;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.1);}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_react_bar .react_quick{
display:flex;
gap:8px;
align-items:center;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_react_bar .react_quick .react_item{
font-size:16px;
cursor:pointer;
transition:0.15s;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_react_bar .react_quick .react_item:hover{
transform:scale(1.2);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_react_bar .react_quick .more_btn{
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
padding: 0px 6px;
font-weight: bold;
font-size: 13px;
padding-bottom: 1px;
}

#new-inbox-ui #emojiPopup {
position: fixed;
bottom: 70px;
right: 10px;
z-index: 99999;
display: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
border-radius: 12px;
width: 95%;
}

#new-inbox-ui #emojiPopup emoji-picker {
width: 100%;
--emoji-size: 3rem;
--num-columns: 6;
}

#new-inbox-ui .scroll_to_bottom{
position: absolute;
right: 15px;
bottom: 90px;

width: 37px;
height: 37px;

background: #574cd6;
color: #fff;

border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;

cursor: pointer;

z-index: 9999;

overflow: visible;

box-shadow: 0 0 20px rgb(0 0 0 / 25%);
transition: all 0.25s ease;
opacity: 0;
transform: translateY(20px) scale(0.9);
pointer-events: none;
}

#new-inbox-ui .scroll_to_bottom.activate{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
animation: btnPopIn 0.35s ease;
}

#new-inbox-ui .scroll_to_bottom:hover{
transform: translateY(-2px) scale(1.05);
box-shadow: 0 12px 25px rgba(87,76,214,0.35);
}

#new-inbox-ui .scroll_to_bottom i{
font-size: 18px;
line-height: 1;
}

#new-inbox-ui .scroll_to_bottom .new_msg_dot{
position: absolute;
top: -4px;
right: 0px;

width: 10px;
height: 10px;

background: #ffffff;
border-radius: 50%;

opacity: 0;
transform: scale(0.5);

box-shadow: 0 0 0 rgb(255 255 255 / 40%);

transition: all 0.2s ease;
}

#new-inbox-ui .scroll_to_bottom .new_msg_dot.activate{
opacity: 1;
transform: scale(1);
animation: dotPulse 1.6s infinite ease-in-out;
}

@keyframes btnPopIn{
0%{
opacity: 0;
transform: translateY(15px) scale(0.85);
}
60%{
transform: translateY(-3px) scale(1.05);
}
100%{
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes dotPulse{
0%{
box-shadow: 0 0 0 0 rgb(255 255 255 / 45%);
}
70%{
box-shadow: 0 0 0 12px rgba(255,59,48,0);
}
100%{
box-shadow: 0 0 0 0 rgba(255,59,48,0);
}
}

#new-inbox-ui .scroll_to_bottom i::before{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

#new-inbox-ui .scroll_to_bottom .new_msg_dot.count{
width: 15px;
height: 15px;

font-size: 10px;
font-weight: 700;

display:flex;
align-items:center;
justify-content:center;

color: #574cd6;
}
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_message_text {
padding: 5px;
word-break: break-word;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .typing_indicator{display:flex;align-items:center;gap:6px;max-width: max-content;padding: 8px 12px;margin: 6px 0px;border-radius: 18px;background: rgba(255,255,255,0.12);backdrop-filter: blur(10px);color:#fff;font-size: 12px;box-shadow: 0 6px 18px rgba(0,0,0,0.15);animation: typingFadeIn 0.25s ease;}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .typing_dots{
display:flex;
align-items:center;
gap:3px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .typing_dots span{
width:6px;
height:6px;
border-radius:50%;

background:#fff;
opacity:0.4;

animation: typingBounce 1.2s infinite ease-in-out;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .typing_dots span:nth-child(1){ animation-delay: 0s; }
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .typing_dots span:nth-child(2){ animation-delay: 0.15s; }
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .typing_dots span:nth-child(3){ animation-delay: 0.3s; }

@keyframes typingBounce{
0%, 80%, 100%{
transform: translateY(0);
opacity: 0.4;
}
40%{
transform: translateY(-4px);
opacity: 1;
}
}

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

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .typing_indicator{
background: rgba(255,255,255,0.10);
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .typing_indicator.compact{
padding: 6px 10px;
font-size: 11px;
border-radius: 14px;
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .voice_record_icon{
position: relative;

width: 40px;
height: 40px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background: rgba(255,255,255,0.10);
backdrop-filter: blur(12px);

color:#fff;

box-shadow: 0 6px 18px rgba(0,0,0,0.15);

transition: all 0.25s ease;
animation: micBreath 1.8s ease-in-out infinite;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .voice_record_icon i{
font-size:18px;
z-index:2;

animation: micIconPulse 1.2s ease-in-out infinite;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .voice_record_icon::before{
content:"";
position:absolute;
inset:0;

border-radius:50%;

border:2px solid rgba(255,59,48,0.35);

transform: scale(1);
opacity: 0;

animation: ringWave 1.6s infinite ease-out;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .voice_record_icon::after{
content:"";
position:absolute;
inset:0;

border-radius:50%;

border:2px solid rgba(255,59,48,0.2);

animation: ringWave 1.6s infinite ease-out;
animation-delay: 0.6s;
}


@keyframes micBreath{
0%,100%{
transform: scale(1);
background: rgba(255,255,255,0.10);
}
50%{
transform: scale(1.06);
background: rgba(255,255,255,0.14);
}
}

@keyframes micIconPulse{
0%,100%{
transform: scale(1);
}
50%{
transform: scale(1.12);
}
}

@keyframes ringWave{
0%{
transform: scale(0.9);
opacity: 0.6;
}
100%{
transform: scale(2.2);
opacity: 0;
}
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .voice_record_icon{
background: rgba(255,255,255,0.10);
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .voice_record_icon{
background: #574cd6;
}

#new-inbox-ui .bio_popup_overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);

display: flex;
align-items: center;
justify-content: center;

opacity: 0;
pointer-events: none;

transition: 0.25s ease;
z-index: 99999;
}

#new-inbox-ui .bio_popup_overlay.active{
opacity: 1;
pointer-events: auto;
}

#new-inbox-ui .bio_popup_overlay .bio_popup_card{width: 280px;border-radius: 18px;background: rgba(30,30,40,0.85);color: #fff;box-shadow: 0 20px 60px rgba(0,0,0,0.4);transform: scale(0.8);transition: 0.25s ease;overflow: hidden;}

#new-inbox-ui .bio_popup_overlay.active .bio_popup_card{transform: scale(1);}

#new-inbox-ui .bio_popup_overlay .bio_popup_header{
display: flex;
justify-content: space-between;
align-items: center;

padding: 10px 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);

font-size: 13px;
font-weight: 600;
}

#new-inbox-ui .bio_popup_overlay #bioClose{
background: transparent;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
opacity: 0.7;
}

#new-inbox-ui .bio_popup_overlay #bioClose:hover{
opacity: 1;
}

#new-inbox-ui .bio_popup_overlay .bio_popup_body{padding: 14px;font-size: 12px;line-height: 1.4;opacity: 0.85;text-align: -webkit-center;}


#new-inbox-ui .reaction_viewer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 0;

background: rgba(0,0,0,0.4);

backdrop-filter: blur(6px);

overflow: hidden;

transition: 0.25s ease;

z-index: 99999;
}

#new-inbox-ui .reaction_viewer.active {
height: 100%;
}

#new-inbox-ui .reaction_viewer .reaction_viewer_box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;

background: #fff;

border-radius: 18px 18px 0 0;

max-height: 60%;

display: flex;
flex-direction: column;

transform: translateY(100%);
transition: 0.25s ease;
}

#new-inbox-ui .reaction_viewer.active .reaction_viewer_box {
transform: translateY(0);
}

#new-inbox-ui .reaction_viewer .rv_header {
display: flex;
justify-content: space-between;
align-items: center;

padding: 12px 14px;

font-weight: 600;

border-bottom: 1px solid #eee;
}

#new-inbox-ui .reaction_viewer .rv_list {
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}

#new-inbox-ui .reaction_viewer .rv_item {
display: flex;
align-items: center;
gap: 10px;

padding: 8px;

border-radius: 10px;

transition: 0.15s;
}

#new-inbox-ui .reaction_viewer .rv_item:hover {
background: #f5f5f5;
}

#new-inbox-ui .reaction_viewer .rv_dp {
width: 34px;
height: 34px;

border-radius: 50%;

object-fit: cover;
}

#new-inbox-ui .reaction_viewer .rv_name {
flex: 1;
font-size: 13px;
font-weight: 500;
}

#new-inbox-ui .reaction_viewer .rv_emoji {
font-size: 18px;
}

#new-inbox-ui .call_message{
padding:10px;
border-radius:18px;
overflow:hidden;
backdrop-filter:blur(10px);
animation:fadeInmenuopenstaff .25s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .call_message{
background:#fff;
color:#111;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .call_message{
background:#7b6fee;
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_msg_top{
display:flex;
align-items:center;
gap:12px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_icon{
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
flex-shrink:0;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_icon.audio{
background:linear-gradient(135deg,#574cd6,#7b6ef6);
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_icon.video{background: linear-gradient(135deg, #9C27B0, #E91E63);color:#fff;}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_icon.missed{
background:#ffebee;
color:#ff3b30;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_title{
font-size:11px;
font-weight:700;
padding-right: 10px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_sub{
font-size:10px;
opacity:.8;
margin-top:3px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_actions{
margin-top:12px;
display:flex;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_action_btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;

padding:10px 14px;
border-radius:12px;

font-size:13px;
font-weight:600;

cursor:pointer;
transition:.2s ease;

width:100%;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .call_action_btn{
background:rgba(87,76,214,0.1);
color:#574cd6;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .call_action_btn{
background:rgba(255,255,255,0.12);
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .call_action_btn:hover{
transform:scale(1.02);
}

#new-inbox-ui .incoming_call_screen{position:fixed;inset:0;width:100%;max-width: 360px;height:100dvh;background: linear-gradient(180deg, rgb(87 76 214), rgba(30, 20, 90, 0.98));overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999999;font-family:sans-serif;}

#new-inbox-ui .incoming_call_screen::before{content:"";position:absolute;width:420px;height:420px;background:rgba(255,255,255,0.08);border-radius:50%;top:-120px;right:-100px;animation: floatGlow 7s ease-in-out infinite;}

#new-inbox-ui .incoming_call_screen::after{content:"";position:absolute;width:300px;height:300px;background:rgba(255,255,255,0.05);border-radius:50%;bottom:-100px;left:-80px;animation: floatGlow2 9s ease-in-out infinite;}

@keyframes floatGlow{
0%{transform:translateY(0px);}
50%{transform:translateY(30px);}
100%{transform:translateY(0px);}
}

@keyframes floatGlow2{
0%{transform:translateX(0px);}
50%{transform:translateX(25px);}
100%{transform:translateX(0px);}
}


#new-inbox-ui .incoming_call_screen .call_user_avatar{position:relative;width: 130px;height: 130px;border-radius:50%;overflow:hidden;z-index:5;box-shadow:
0 0 0 10px rgba(255,255,255,0.05),
0 0 0 20px rgba(255,255,255,0.03),
0 25px 60px rgba(0,0,0,0.35);animation: avatarPulse 2.5s infinite;}

#new-inbox-ui .incoming_call_screen .call_user_avatar img{
width:100%;
height:100%;
object-fit:cover;
}

@keyframes avatarPulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.04);
}
100%{
transform:scale(1);
}
}

#new-inbox-ui .incoming_call_screen .call_user_name{margin-top:28px;font-size: 24px;font-weight:800;color:#fff;z-index:5;text-align:center;padding:0 20px;text-shadow:0 5px 18px rgba(0,0,0,0.35);}


#new-inbox-ui .incoming_call_screen .call_user_status{
margin-top:10px;
font-size:15px;
font-weight:500;
color:rgba(255,255,255,0.75);

display:flex;
align-items:center;
gap:8px;

z-index:5;
}

#new-inbox-ui .incoming_call_screen .call_status_dot{
width:10px;
height:10px;
border-radius:50%;
background:#00ff8c;

animation: livePulse 1s infinite;
}

@keyframes livePulse{
0%{
transform:scale(1);
opacity:1;
}
50%{
transform:scale(1.6);
opacity:.4;
}
100%{
transform:scale(1);
opacity:1;
}
}

#new-inbox-ui .incoming_call_screen .call_action_buttons{position:absolute;bottom: 50px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap: 100px;z-index:20;}

#new-inbox-ui .incoming_call_screen .call_action_btn{position:relative;width: 72px;height: 72px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size: 24px;cursor:pointer;transition:.22s ease;}

#new-inbox-ui .incoming_call_screen .call_action_btn:active{
transform:scale(.92);
}

#new-inbox-ui .incoming_call_screen .call_accept{
background:linear-gradient(
135deg,
#00d26a,
#00ff88
);

color:#fff;

box-shadow:
0 10px 25px rgba(0,255,136,0.35);
}

#new-inbox-ui .incoming_call_screen .call_reject{
background:linear-gradient(
135deg,
#ff2d55,
#ff0033
);

color:#fff;

box-shadow:
0 10px 25px rgba(255,0,51,0.35);
}

#new-inbox-ui .incoming_call_screen .call_accept:hover{
transform:translateY(-3px);
}

#new-inbox-ui .incoming_call_screen .call_reject:hover{
transform:translateY(-3px);
}


#new-inbox-ui .incoming_call_screen .call_action_btn::before{content:"";position:absolute;inset:0;border-radius:50%;border: 5px solid rgb(0 0 0 / 35%);animation: rippleCall 4s infinite;}

@keyframes rippleCall{
0%{
transform:scale(1);
opacity:.8;
}
100%{
transform:scale(1.8);
opacity:0;
}
}

#new-inbox-ui .incoming_call_screen .call_btn_text{position:absolute;bottom:-28px;font-size:13px;font-weight:600;color:#fff;opacity:.85;}

#new-inbox-ui .incoming_call_screen .call_top_bar{
position:absolute;
top:22px;
left:0;
width:100%;

display:flex;
align-items:center;
justify-content:center;

font-size:13px;
font-weight:600;

color:rgba(255,255,255,0.8);

z-index:10;
}

#new-inbox-ui .incoming_call_screen .call_top_bar i{
margin-right:8px;
}

#new-inbox-ui .incoming_call_screen .call_waves{
position:absolute;
width:220px;
height:220px;
border-radius:50%;

border:2px solid rgba(255,255,255,0.06);

animation:waveAnim 3s linear infinite;
}

#new-inbox-ui .incoming_call_screen .call_waves.wave2{
animation-delay:1s;
}

#new-inbox-ui .incoming_call_screen .call_waves.wave3{
animation-delay:2s;
}

@keyframes waveAnim{
0%{
transform:scale(.6);
opacity:0;
}
50%{
opacity:.5;
}
100%{
transform:scale(1.6);
opacity:0;
}
}


@media(max-width:768px){

#new-inbox-ui .incoming_call_screen {
max-width:100%;
}
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs  .msg_edited_meta{
display:flex;
align-items:center;
gap:6px;

margin-top:6px;

width:max-content;

padding:4px 9px;

border-radius:999px;

font-size:10px;
font-weight:600;

backdrop-filter: blur(10px);

animation: editedFade .25s ease;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .msg_edited_meta{
background: rgba(87,76,214,0.08);
color:#574cd6;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .msg_edited_meta{
background: rgba(255,255,255,0.12);
color:#fff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .edited_dot{
width:6px;
height:6px;
border-radius:50%;

background: currentColor;

opacity:0.8;

animation: editedPulse 1.8s infinite;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .edited_text{display:flex;align-items:center;gap:4px;letter-spacing:0.2px;font-family: system-ui;font-variant: small-caps;}

@keyframes editedFade{
from{
opacity:0;
transform: translateY(4px) scale(0.95);
}
to{
opacity:1;
transform: translateY(0) scale(1);
}
}

@keyframes editedPulse{
0%,100%{
transform:scale(1);
opacity:0.8;
}
50%{
transform:scale(1.5);
opacity:0.3;
}
}
#new-inbox-ui .edit_modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
backdrop-filter:blur(6px);
display:flex;
align-items:flex-end;
justify-content:center;
padding:20px;
z-index:999999;
opacity:0;
pointer-events:none;
transition:.25s;
}

#new-inbox-ui .edit_modal.active{
opacity:1;
pointer-events:auto;
}

#new-inbox-ui .edit_modal .edit_modal_box{
width:100%;
max-width:500px;
background:#111827;
border-radius:28px;
padding:18px;
transform:translateY(120%);
transition:.3s cubic-bezier(.22,1,.36,1);
box-shadow:0 20px 60px rgba(0,0,0,.45);
}

#new-inbox-ui .edit_modal.active .edit_modal_box{
transform:translateY(0);
}

#new-inbox-ui .edit_modal .edit_modal_header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:15px;
color:#fff;
font-size:18px;
font-weight:700;
}

#new-inbox-ui .edit_modal .edit_modal_header button{
width:36px;
height:36px;
border:none;
background:#1f2937;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:20px;
cursor:pointer;
}

#new-inbox-ui .edit_modal #editMessageText{
width:100%;
height:140px;
background:#1f2937;
border:none;
outline:none;
resize:none;
border-radius:18px;
padding:15px;
font-size:15px;
line-height:1.5;
color:#fff;
}

#new-inbox-ui .edit_modal .edit_modal_actions{
margin-top:15px;
display:flex;
justify-content:flex-end;
}

#new-inbox-ui .edit_modal #saveEditBtn{
height:46px;
padding:0 22px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#2563eb,#3b82f6);
color:#fff;
font-weight:700;
cursor:pointer;
transition:.2s;
}

#new-inbox-ui .edit_modal #saveEditBtn:active{
transform:scale(.96);
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_edited_meta{
display:flex;
align-items:center;
gap:6px;
margin-top:6px;
opacity:.75;
font-size:11px;
font-weight:500;
color:#999;
transition:.2s;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_edited_meta .edited_text{
letter-spacing:.2px;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_updated_flash{
animation:messageUpdated .8s ease;
}

@keyframes messageUpdated{

0%{
transform:scale(.96);
filter:brightness(1.25);
}

40%{
transform:scale(1.01);
}

100%{
transform:scale(1);
filter:brightness(1);
}

}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .edited_anim{
animation:editedFade .5s ease;
}

@keyframes editedFade{

0%{
opacity:0;
transform:translateY(6px);
}

100%{
opacity:.75;
transform:translateY(0);
}

}

#new-inbox-ui .delete_modal{
position:fixed;
inset:0;
z-index:999999;

background:rgba(0,0,0,0.6);

backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

display:flex;
align-items:center;
justify-content:center;

padding:20px;

opacity:0;
pointer-events:none;

transition:.25s ease;
}

#new-inbox-ui .delete_modal.active{
opacity:1;
pointer-events:auto;
}

#new-inbox-ui .delete_modal .delete_modal_box{
width:100%;
max-width:370px;

background:linear-gradient(
180deg,
rgba(28,28,32,0.98),
rgba(15,15,18,0.98)
);

border-radius:30px;

border:1px solid rgba(255,255,255,0.06);

padding:22px;

box-shadow:
0 20px 60px rgba(0,0,0,0.45);

transform:
translateY(30px)
scale(.9);

transition:
.35s cubic-bezier(.22,1,.36,1);
}

#new-inbox-ui .delete_modal.active .delete_modal_box{
transform:
translateY(0)
scale(1);
}

#new-inbox-ui .delete_modal .delete_top{
text-align:center;
margin-bottom:22px;
}

#new-inbox-ui .delete_modal .delete_icon_wrap{
width:76px;
height:76px;

margin:auto auto 16px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
#ff4b4b,
#d40000
);

box-shadow:
0 12px 30px rgba(255,0,0,0.35);
}

#new-inbox-ui .delete_modal .delete_icon_wrap i{
font-size:30px;
color:#fff;
}

#new-inbox-ui .delete_modal .delete_title{
font-size:23px;
font-weight:700;
color:#fff;
margin-bottom:8px;
}

#new-inbox-ui .delete_modal .delete_msg_preview{
margin:12px 0 18px;

padding:12px 14px;

border-radius:14px;

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.06);

font-size:13px;
line-height:1.4;

color:rgba(255,255,255,0.75);

max-height:80px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}

#new-inbox-ui .delete_modal .delete_text{
font-size:14px;
line-height:1.5;
color:rgba(255,255,255,0.65);
}

#new-inbox-ui .delete_modal .delete_option_list{
display:flex;
flex-direction:column;
gap:12px;
}

#new-inbox-ui .delete_modal .delete_option_btn{
position:relative;

display:flex;
align-items:center;
justify-content:space-between;

width:100%;

padding:16px;

border:none;
outline:none;

border-radius:22px;

cursor:pointer;

transition:.2s ease;
}

#new-inbox-ui .delete_modal .delete_option_btn:active{
transform:scale(.98);
}

#new-inbox-ui .delete_modal .delete_option_left{
display:flex;
align-items:center;
gap:14px;
text-align:left;
}

#new-inbox-ui .delete_modal .delete_option_left i{
font-size:22px;
}

#new-inbox-ui .delete_modal .delete_option_title{
font-size:15px;
font-weight:700;
}

#new-inbox-ui .delete_modal .delete_option_desc{
font-size:12px;
margin-top:2px;
opacity:.7;
}

#new-inbox-ui .delete_modal .delete_option_btn.everyone{
background:
linear-gradient(
135deg,
rgba(255,70,70,.18),
rgba(255,0,0,.1)
);

border:1px solid rgba(255,80,80,.15);

color:#ffb3b3;
}

#new-inbox-ui .delete_modal .delete_option_btn.everyone:hover{
background:
linear-gradient(
135deg,
rgba(255,70,70,.24),
rgba(255,0,0,.16)
);
}

#new-inbox-ui .delete_modal .delete_option_btn.me{
background:
rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);

color:#fff;
}

#new-inbox-ui .delete_modal .delete_option_btn.me:hover{
background:
rgba(255,255,255,.08);
}

#new-inbox-ui .delete_modal .delete_cancel_btn{
margin-top:4px;

height:52px;

border:none;
outline:none;

border-radius:18px;

background:rgba(255,255,255,.06);

color:#fff;

font-size:15px;
font-weight:700;

cursor:pointer;

transition:.2s ease;
}

#new-inbox-ui .delete_modal .delete_cancel_btn:hover{
background:rgba(255,255,255,.1);
}

#new-inbox-ui .delete_modal .delete_loader{
width:18px;
height:18px;

border-radius:50%;

border:2px solid rgba(255,255,255,.15);
border-top-color:#fff;

animation:deleteSpin .7s linear infinite;

display:none;
}

@keyframes deleteSpin{
to{
transform:rotate(360deg);
}
}

#new-inbox-ui .delete_modal .delete_option_btn.loading .delete_loader{
display:block;
}

#new-inbox-ui .delete_modal .delete_option_btn.loading .delete_option_left{
opacity:.45;
}

@media(max-width:480px){

#new-inbox-ui .delete_modal .delete_modal_box{
padding:20px;
border-radius:26px;
}

#new-inbox-ui .delete_modal .delete_title{
font-size:21px;
}

#new-inbox-ui .delete_modal .delete_option_btn{
padding:15px;
border-radius:20px;
}

}
#new-inbox-ui .call_permission_overlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;

background:rgba(0,0,0,.6);
backdrop-filter:blur(12px);

opacity:0;
visibility:hidden;
transition:.22s ease;

z-index:999999;
}

#new-inbox-ui .call_permission_overlay.active{
opacity:1;
visibility:visible;
}

#new-inbox-ui .call_permission_card{
width:100%;
max-width:340px;

padding:22px;

border-radius:24px;

background:linear-gradient(
135deg,
rgba(31,31,45,.98),
rgba(58,58,91,.92)
);

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 20px 60px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.03);

color:#fff;

transform:scale(.88) translateY(10px);
transition:.25s ease;
}

#new-inbox-ui .call_permission_overlay.active .call_permission_card{
transform:scale(1) translateY(0);
}

#new-inbox-ui .call_permission_top{
display:flex;
align-items:center;
gap:14px;
margin-bottom:16px;
}

#new-inbox-ui .call_permission_icon{
width:62px;
height:62px;

border-radius:20px;

display:flex;
align-items:center;
justify-content:center;

font-size:24px;

background:linear-gradient(135deg,#6d5dfc,#8b7dff);

box-shadow:0 10px 30px rgba(109,93,252,.4);
}

#new-inbox-ui .call_permission_title{
font-size:19px;
font-weight:700;
}

#new-inbox-ui .call_permission_sub{
font-size:12px;
opacity:.7;
margin-top:2px;
}

#new-inbox-ui .call_permission_text{
font-size:14px;
line-height:1.6;
opacity:.92;
margin-bottom:20px;
}

#new-inbox-ui .call_permission_actions{
display:flex;
gap:10px;
}

#new-inbox-ui .call_permission_btn{
flex:1;
border:none;
outline:none;

padding:12px 15px;

border-radius:14px;

font-size:14px;
font-weight:700;

cursor:pointer;
transition:.18s ease;
}

#new-inbox-ui .call_permission_btn:hover{
transform:translateY(-2px);
}

#new-inbox-ui .call_permission_btn.cancel{
background:rgba(255,255,255,.08);
color:#fff;
}

#new-inbox-ui .call_permission_btn.confirm{
background:linear-gradient(135deg,#6d5dfc,#8b7dff);
color:#fff;

box-shadow:0 10px 25px rgba(109,93,252,.35);
}

#new-inbox-ui .call_permission_btn.single{
background:#fff;
color:#5d50e6;
}

#new-inbox-ui .callTrigger{
cursor:pointer;
transition:.18s ease;
}

#new-inbox-ui .callTrigger:hover{
transform:scale(1.12);
color:#8b7dff;
}

#new-inbox-ui .storymsg{
max-width: 220px;
padding: 6px;
margin: 6px 0;
border-radius: 12px;
background: #574cd6;
color: #fff;
font-family: Arial, sans-serif;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

#new-inbox-ui .storymsg .story_preview{
width: 100%;
height: 70px;
overflow: hidden;
border-radius: 10px;
background: rgba(255,255,255,0.08);
}

#new-inbox-ui .storymsg .story_media{
width: 100%;
height: 70px;
object-fit: cover;
display: block;
}

#new-inbox-ui .storymsg .story_video{
position: relative;
}

#new-inbox-ui .storymsg .story_play{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}

#new-inbox-ui .storymsg .story_audio img{
width: 100%;
height: 70px;
object-fit: contain;
padding: 10px;
}

#new-inbox-ui .storymsg .story_footer{display: flex;align-items: center;gap: 5px;margin-top: 4px;font-size: 11px;opacity: 0.9;padding-left: 5px;}

#new-inbox-ui .storymsg .story_user{
font-weight: 600;
}

#new-inbox-ui .storymsg .story_dot{
width: 3px;
height: 3px;
background: #fff;
border-radius: 50%;
opacity: 0.6;
}

#new-inbox-ui .storymsg .story_type{
font-size: 10px;
opacity: 0.7;
text-transform: uppercase;
}

#new-inbox-ui .storymsg .story_caption{margin-top: 3px;font-size: 11px;opacity: 0.95;word-break: break-word;padding-left: 5px;}


#new-inbox-ui .user_chats_msg.send .storymsg {
margin-left: auto;
background: #574cd6;
border-bottom-right-radius: 6px;
}

#new-inbox-ui .user_chats_msg.received .storymsg {
margin-right: auto;
background: #3b3b55;
border-bottom-left-radius: 6px;
}

.content-darkmode #new-inbox-ui .user_chats_inbox {
background: #121212;
border-color: #121212;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_inbox_header .user_chats_header_right {
background: #121212;
color: #a38def;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .user_chats_msg_n {
background: #121212;
color: #f7ffff;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing {
background: #121212;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .msg_send_textarea .msg_send_textareas::placeholder {
color:#f3f3f3;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .msg_send_textarea .msg_send_textareas {
color:#f3f3f3;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn .send_loader {

border: 2.5px solid rgb(255 255 255 / 15%);
border-top: 2.5px solid #f3f3f3;
border-right: 2.5px solid #f3f3f3;

}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn.successmsger::after{
color:#000;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .first_rowing .voice_send_btn {
color: #f3f3f375;
border-color: #f3f3f375;
}
.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .msg_send_btn {
background: #121212;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll {
background: linear-gradient(180deg, #121212, #574cd6 50%);
}
.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.send .msg_reply {
background: #3b3b3b;
color: #eee;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg.received .msg_reply {
background: #00000029;
color: #eee;
}

.content-darkmode #new-inbox-ui .privacy_notice{
color: #fff;
}

#new-inbox-ui .privacy_notice{
width: 100%;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
color: #000;
position: relative;
box-shadow: 0 6px 18px rgba(87, 76, 214, 0.25);
overflow: hidden;
}
.content-darkmode #new-inbox-ui .privacy_notice .icon{
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.25);
}


/* icon */
#new-inbox-ui .privacy_notice .icon{
width: 42px;
height: 42px;
min-width: 42px;
background: rgb(0 0 0 / 18%);
border: 1px solid rgb(0 0 0 / 25%);
display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;
font-size: 18px;
backdrop-filter: blur(6px);
}

/* text */
#new-inbox-ui .privacy_notice .text{
font-size: 15px;
font-weight: 800;
line-height: 1.3;
position: relative;
font-variant: small-caps;
}

#new-inbox-ui .privacy_notice .text span{
display: block;
font-size: 10px;
font-weight: 400;
opacity: 0.85;
margin-top: 2px;
}

/* hover animation */
#new-inbox-ui .privacy_notice:hover{
transform: translateY(-2px);
transition: 0.2s ease;
box-shadow: 0 10px 25px rgba(87, 76, 214, 0.35);
}

/* mobile */
@media(max-width:768px){
#new-inbox-ui .privacy_notice{
padding: 12px;
}
}
#new-inbox-ui .friends_only_notice{
width: 100%;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #574cd6, #7b6ef6);
color: #fff;
border-radius: 14px;
position: relative;
box-shadow: 0 6px 18px rgba(87, 76, 214, 0.25);
overflow: hidden;
}

/* soft glow effect */
#new-inbox-ui .friends_only_notice::before{
content:"";
position:absolute;
inset:-50%;
background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
transform: rotate(25deg);
}

/* icon circle */
#new-inbox-ui .friends_only_notice .icon{
width: 42px;
height: 42px;
min-width: 42px;

background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.25);

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;
font-size: 18px;
backdrop-filter: blur(6px);
}

/* text */
#new-inbox-ui .friends_only_notice .text{
font-size: 14px;
font-weight: 700;
line-height: 1.3;
position: relative;
font-variant: small-caps;
}

#new-inbox-ui .friends_only_notice .text span{
display:block;
font-size: 12px;
font-weight: 400;
opacity: 0.85;
margin-top: 2px;
}

/* hover effect */
#new-inbox-ui .friends_only_notice:hover{
transform: translateY(-2px);
transition: 0.2s ease;
box-shadow: 0 10px 25px rgba(87, 76, 214, 0.35);
}

/* mobile */
@media(max-width:768px){
#new-inbox-ui .friends_only_notice{
padding: 12px;
border-radius: 12px;
}
}


#new-inbox-ui .inbox_error_toast{position: fixed;top: 18px;left: 50%;transform: translateX(-50%) translateY(-20px);z-index: 99999;min-width: 280px;max-width: 360px;display: flex!important;align-items: center;gap: 12px;padding: 12px 14px 14px;background: rgba(255, 255, 255, 0.9);backdrop-filter: blur(10px);border-left: 4px solid #ff3b3b;border-radius: 14px;box-shadow: 0 0 30px rgb(255 0 0);opacity: 0;pointer-events: none;transition: all 0.35s cubic-bezier(.4,0,.2,1);overflow: hidden;width: 95%;}

/* DARK MODE */
.content-darkmode #new-inbox-ui .inbox_error_toast{
background: rgba(22, 23, 31, 0.95);
color: #fff;
}

/* SHOW STATE */
#new-inbox-ui .inbox_error_toast.show{
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}

/* ICON */
#new-inbox-ui .error_icon{width: 38px;height: 38px;border-radius: 12px;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #ff4d4d, #ff2d55);color: #fff;font-size: 18px;box-shadow: 0 6px 14px rgba(255, 45, 85, 0.25);}

/* TEXT */
#new-inbox-ui .error_content{
flex: 1;
}

#new-inbox-ui .error_title{
font-size: 13px;
font-weight: 800;
color: #ff3b3b;
letter-spacing: 0.3px;
}

.content-darkmode #new-inbox-ui .error_title{
color: #ff6b6b;
}

#new-inbox-ui .error_text{
font-size: 12.5px;
opacity: 0.85;
margin-top: 2px;
line-height: 1.3;
}

.content-darkmode #new-inbox-ui .user_chats_inbox .user_chats_msgs_footer .replying_bar {
background: #242424;
color: #bbb;
border-left-color: #bbb;
}

/* TOP PROGRESS BAR */
#new-inbox-ui .error_bar{position: absolute;bottom: 0;left: 0px;height: 1px;width: 100%;background: linear-gradient(90deg, #ff3b3b, #ff7a7a);animation: errorBar 5s linear forwards;}

@keyframes errorBar{
from{ width: 100%; }
to{ width: 0%; }
}


/* WRAPPER */
#uploadStackWrap{
position: relative;
padding: 5px;
margin: 10px;
border-radius: 14px;
z-index: 99999;

background: linear-gradient(270deg,#574cd6,#ff4ecd,#00d4ff,#00d26a,#574cd6);
background-size: 400% 400%;
animation: uploaduinewborderflow 4s linear infinite;

box-shadow: 0 0 30px rgba(87,76,214,0.25);
margin-top: 50px;
overflow: hidden;
}

/* GLASS BACKGROUND */
#uploadStackWrap::before{
content:"";
position:absolute;
inset:5px;
border-radius: 12px;
background: rgba(255,255,255,0.88);
backdrop-filter: blur(18px);
z-index:0;
}

/* CONTENT STACK */
#uploadStackWrap #uploadStack{
position: relative;
z-index: 1;
display:flex;
flex-direction:column;
gap:12px;
}

/* CARD */
#uploadStackWrap #uploadStack .upload_card{
padding:14px;
border-radius:12px;
background: rgba(255,255,255,0.65);
backdrop-filter: blur(14px);
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
animation: uploaduinewpop .25s ease;
}

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

/* TOP */
#uploadStackWrap #uploadStack .upload_top{
display:flex;
gap:10px;
align-items:center;
}

/* ICON */
#uploadStackWrap #uploadStack .upload_icon{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
font-size:18px;
color:#fff;
background: linear-gradient(135deg,#574cd6,#7b6ef6);
box-shadow: 0 0 10px rgba(87, 76, 214, 0.25);
}

#uploadStackWrap #uploadStack .upload_icon.video{
background: linear-gradient(135deg,#ff4ecd,#574cd6);
}

#uploadStackWrap #uploadStack .file_name{
font-size:13px;
font-weight:700;
color:#222;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#uploadStackWrap #uploadStack .file_status{
font-size:11px;
color:#777;
margin-top:2px;
}

#uploadStackWrap #uploadStack .progress_wrap{
position:relative;
height: 15px;
margin-top:10px;
border-radius:999px;
background: rgba(0,0,0,0.06);
overflow:hidden;
}

#uploadStackWrap #uploadStack .progress_fill{
height:100%;
width:0%;
border-radius:999px;
background: linear-gradient(90deg,#574cd6,#ff4ecd,#00d4ff);
transition: width .25s ease;
}

#uploadStackWrap #uploadStack .bottom_row{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:10px;
}

#uploadStackWrap #uploadStack .percent{
font-size:12px;
font-weight:800;
color:#574cd6;
}

#uploadStackWrap #uploadStack .cancel_btn{
border:none;
padding:5px 12px;
border-radius:999px;
font-size:11px;
cursor:pointer;
color:#fff;
background: linear-gradient(135deg,#ff4d4d,#ff9500);
transition:.2s ease;
}

#uploadStackWrap #uploadStack .cancel_btn:hover{
transform:scale(1.06);
}

#uploadStackWrap #uploadStack .upload_card.success .progress_fill{
background: linear-gradient(90deg,#00d26a,#00d4ff);
}

#uploadStackWrap #uploadStack .upload_card.success .cancel_btn{
display:none;
}

#uploadStackWrap #uploadStack .progress_border{
position:relative;
padding:2px;
border-radius:999px;

background: linear-gradient(
90deg,
#574cd6,
#ff4ecd,
#00d4ff,
#00d26a,
#574cd6
);

background-size:300% 300%;
animation: uploaduinewborderflow 3s linear infinite;

box-shadow: 0 0 12px rgba(87,76,214,0.25);
overflow:hidden;
}

#uploadStackWrap #uploadStack .progress_border::before{
content:"";
position:absolute;
inset:2px;
border-radius:999px;
background: rgba(255,255,255,0.85);
}

#uploadStackWrap #uploadStack .progress_fill{
position:relative;
height:10px;
border-radius:999px;
z-index:2;

background: linear-gradient(90deg,#574cd6,#ff4ecd,#00d4ff);

transition: width .25s ease;
}

/* ANIMATION */
@keyframes uploaduinewborderflow{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}


.call_screen{
position:relative;
width:100%;
height:100dvh;
overflow:hidden;
background:#000;
}

.call_screen  #remoteVideo{
width:100%;
height:100%;
object-fit:cover;
background:#111;
}

.call_screen  .call_overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.2), rgba(0,0,0,.8));
z-index:2;
pointer-events:none;
}

.call_screen  .local_floating{
position:absolute;
top:16px;
right:16px;
width:110px;
height:150px;
border-radius:18px;
overflow:hidden;
z-index:999;
background:#111;
border:2px solid rgba(255,255,255,.2);
box-shadow:0 15px 35px rgba(0,0,0,.6);
}

.call_screen .local_floating #localVideo{
width:100%;
height:100%;
object-fit:cover;
}

.call_screen .waiting_screen{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:10;
background:#000;
transition:.5s ease;
}

.call_screen .waiting_screen.hidden{
opacity:0;
transform:scale(1.1);
pointer-events:none;
}

.call_screen .waiting_screen img{
width:130px;
height:130px;
border-radius:50%;
object-fit:cover;
border:3px solid rgba(255,255,255,.2);
animation:call_screenpulseAvatar 2s infinite;
}

@keyframes call_screenpulseAvatar{
0%{transform:scale(1);}
50%{transform:scale(1.06);}
100%{transform:scale(1);}
}

.call_screen .waiting_screen .waiting_name{
color:#fff;
font-size:22px;
font-weight:700;
margin-top:12px;
}

.call_screen .waiting_screen .waiting_text{
color:#aaa;
font-size:14px;
margin-top:6px;
}

.call_screen  .call_bottom{
position:absolute;
left:16px;
right:16px;
bottom:105px;
padding:14px;
border-radius:26px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(20px);
display:flex;
justify-content:space-between;
align-items:center;
z-index:30;
opacity:0;
transform:translateY(40px);
transition:.4s ease;
}

.call_screen  .call_bottom.active{
opacity:1;
transform:translateY(0);
}

.call_screen .call_bottom .call_user{
display:flex;
align-items:center;
gap:12px;
}

.call_screen .call_bottom .call_avatar img{
width:58px;
height:58px;
border-radius:50%;
object-fit:cover;
border:2px solid rgba(255,255,255,.2);
}

.call_screen .call_bottom .call_name{
color:#fff;
font-size:16px;
font-weight:700;
}

.call_screen .call_bottom .call_status{
color:#ccc;
font-size:13px;
margin-top:3px;
}

.call_screen .call_bottom .call_time{
display:flex;
align-items:center;
gap:7px;
color:#fff;
font-weight:600;
}

.call_screen .call_bottom .call_dot{
width:8px;
height:8px;
background:#ff3b3b;
border-radius:50%;
animation:call_scenpulse 1s infinite;
}

@keyframes call_scenpulse{
0%{
transform:scale(1);
opacity:1;
}
50%{
transform:scale(1.5);
opacity:.5;
}
100%{
transform:scale(1);
opacity:1;
}
}

.call_screen  .controls{
position:absolute;
bottom:22px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:14px;
padding:12px 16px;
border-radius:40px;
background:rgba(255,255,255,.10);
backdrop-filter:blur(22px);
z-index:50;
}

.call_screen .controls .btn{
width:50px;
height:50px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.12);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:#fff;
font-size:22px;
position:relative;
transition:.2s;
}

.call_screen .controls .btn.active{
background:#fff;
color:#000;
}

.call_screen .controls .btn.end{
background:#ff2d2d;
}

.call_screen .controls .btn:active{
transform:scale(.9);
}

.call_screen .controls .btn.slashoff{
background:#fff;
color:#000;
}

.call_screen .controls .btn.slashoff::after{
content:"";
position:absolute;
width:70%;
height:2px;
background:red;
transform:rotate(-45deg);
}




/* VIDEO SMOOTH */
.call_screen #localVideo video,
.call_screen #remoteVideo video{
transition:
filter .35s ease,
transform .35s ease;
animation:call_scenbeautyGlow 3s ease-in-out infinite;
}


/* SOFT GLOW */
@keyframes call_scenbeautyGlow{

0%{
filter:
brightness(1.10)
contrast(1.06)
saturate(1.15)
blur(.5px);
}

50%{
filter:
brightness(1.16)
contrast(1.10)
saturate(1.22)
blur(.7px);
}

100%{
filter:
brightness(1.10)
contrast(1.06)
saturate(1.15)
blur(.5px);
}

}

.call_screen  .video_off_badge{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
padding:10px 16px;
border-radius:20px;
background:rgba(0,0,0,.65);
backdrop-filter:blur(10px);
color:#fff;
font-size:13px;
font-weight:700;
letter-spacing:1px;
display:none;
z-index:5;
border:1px solid rgba(255,255,255,.2);
}

.call_screen .video_off_badge.show{
display:block;
animation:call_scenfadeIn .3s ease;
}

@keyframes call_scenfadeIn{
from{opacity:0; transform:translate(-50%,-50%) scale(.8);}
to{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

/* HIDE UI MODE */
.call_screen .ui_hidden .call_bottom,
.call_screen .ui_hidden .controls{
opacity:0 !important;
pointer-events:none !important;
transform:translateY(30px) !important;
transition:.3s ease;
}

/* FULL CINEMA MODE */
.call_screen .cinema_mode .local_floating{
opacity:0;
transform:scale(.6);
pointer-events:none;
transition:.3s ease;
}

/* smooth */
.call_screen  .call_bottom, .call_screen .controls, .call_screen .local_floating{
transition:.3s ease;
}

.call_screen .local_fullscreen .local_floating{
position:fixed !important;
top:0;
left:0;
width:100vw !important;
height:100vh !important;
z-index:99999;
border-radius:0 !important;
box-shadow:none !important;
}

.call_screen .local_fullscreen .call_bottom,
.call_screen .local_fullscreen .controls,
.call_screen .local_fullscreen .call_overlay,
.call_screen .local_fullscreen #remoteVideo{
opacity:0 !important;
pointer-events:none !important;
transition:.25s ease;
}

.call_screen .audio_call_bg{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background:
radial-gradient(circle at top,#1f1f1f,#000);
z-index:1;
}

.call_screen  .audio_call_bg .audio_avatar{
width:170px;
height:170px;
border-radius:50%;
overflow:hidden;
border:4px solid rgba(255,255,255,.15);
box-shadow:0 0 60px rgba(255,255,255,.08);
animation:call_scenaudioPulse 2s infinite;
}

.call_screen  .audio_call_bg .audio_avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.call_screen  .audio_call_name{
color:#fff;
font-size:28px;
font-weight:700;
margin-top:22px;
}

.call_screen  .audio_call_text{
color:#aaa;
margin-top:8px;
font-size:15px;
}

@keyframes call_scenaudioPulse{
0%{
transform:scale(1);
box-shadow:0 0 0 rgba(255,255,255,.1);
}
50%{
transform:scale(1.05);
box-shadow:0 0 45px rgba(255,255,255,.2);
}
100%{
transform:scale(1);
box-shadow:0 0 0 rgba(255,255,255,.1);
}
}


.call_popup{
position:fixed;
top:-220px;
left:50%;
transform:translateX(-50%) scale(.95);
width:95%;
max-width:335px;
z-index:999999;
opacity:0;
transition:0.45s cubic-bezier(.2,.8,.2,1);
}

@media(max-width:768px){

.call_popup {
max-width:100%;
}
}

.call_popup.show{
top:25px;
opacity:1;
transform:translateX(-50%) scale(1);
}

.call_popup .call_box{
background:rgba(10,10,10,0.92);
backdrop-filter:blur(20px);
color:#fff;
border-radius:22px;
padding:18px;
box-shadow:0 25px 70px rgba(0,0,0,0.75);
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,0.08);
}

.call_popup .call_box::before{
content:"";
position:absolute;
inset:-2px;
background:linear-gradient(120deg,#25d366,#00c3ff,#7b6ef6);
opacity:.15;
filter:blur(18px);
z-index:0;
}

.call_popup .call_top{
display:flex;
align-items:center;
gap:12px;
position:relative;
z-index:2;
}

.call_popup .dp{
width:56px;
height:56px;
border-radius:50%;
overflow:hidden;
border:2px solid #25d366;
box-shadow:0 0 15px rgba(37,211,102,0.4);
flex-shrink:0;
}

.call_popup .dp img{
width:100%;
height:100%;
object-fit:cover;
}

.call_popup .info b{
display:block;
font-size:16px;
font-weight:700;
}

.call_popup .info span{
font-size:12px;
opacity:.7;
}

.call_popup #callTypeText{
display:inline-block;
margin-top:4px;
font-size:12px;
color:#25d366;
font-weight:600;
letter-spacing:.3px;
}

.call_popup .ring{
height:70px;
margin:12px 0;
position:relative;
z-index:2;
}

.call_popup .ring::before,
.call_popup .ring::after{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:2px solid #25d366;
animation:ring 1.6s infinite;
}

.call_popup .ring::before{width:45px;height:45px}
.call_popup .ring::after{width:85px;height:85px;opacity:0.35;animation-delay:0.3s}

@keyframes ring{
0%{transform:translate(-50%,-50%) scale(.6);opacity:1}
100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}
}

.call_popup .call_label{
text-align:center;
font-size:12px;
opacity:.6;
margin-top:5px;
z-index:2;
position:relative;
}

.call_popup .call_actions{
display:flex;
gap:12px;
margin-top:14px;
position:relative;
z-index:2;
margin-bottom:10px;
justify-content: space-around;
}

.call_popup .btn{
flex:1;
height:48px;
border:none;
border-radius:14px;
cursor:pointer;
font-size:14px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
transition:0.2s ease;
}

.call_popup .accept{
background:linear-gradient(135deg,#25d366,#1aa34a);
color:#fff;
box-shadow:0 10px 25px rgba(37,211,102,0.3);
}

.call_popup .reject{
background:linear-gradient(135deg,#ff3b3b,#d60000);
color:#fff;
box-shadow:0 10px 25px rgba(255,59,59,0.3);
}

.call_popup .btn:hover{
transform:translateY(-2px);
}

.call_popup .btn:active{
transform:scale(0.96);
}

.call_popup .btn i{
font-size:18px;
}

.call_popup .btn.accept::after{
content:"ACCEPT";
position:absolute;
bottom:-20px;
font-size:10px;
opacity:.5;
}

.call_popup .btn.reject::after{
content:"REJECT";
position:absolute;
bottom:-20px;
font-size:10px;
opacity:.5;
}

/* =========================
MESSAGE HIGHLIGHT EFFECT
========================= */
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_highlight {
position: relative;
animation: msgHighlightPulse 2.2s ease-in-out;
z-index: 2;
}

/* Soft glowing background overlay */
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_highlight::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 20px;
background: linear-gradient(135deg, rgb(0 170 255), rgba(0, 255, 170, 0.15));
z-index: -1;
filter: blur(6px);
opacity: 0;
animation: msgGlowFade 2.2s ease-in-out;
}

/* Subtle border flash */
#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .msg_highlight .user_chats_msg_n {
box-shadow: 0 0 0 2px rgb(0 170 255),
    0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}

/* Smooth pulse animation */
@keyframes msgHighlightPulse {
0% {
transform: scale(1);
}
30% {
transform: scale(1.02);
}
60% {
transform: scale(0.99);
}
100% {
transform: scale(1);
}
}

/* Glow fade effect */
@keyframes msgGlowFade {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
100% {
opacity: 0;
}
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .download_msg_btn.downloading .download_icon {
animation: spinner 400ms linear infinite;
}


.updates-section{
width:96%;
margin:10px auto;
padding:12px;
background:#fff;
border-radius:15px;
box-shadow:0 3px 15px rgba(0,0,0,.08);
}

.updates-section .updates-title{
text-align:center;
margin-bottom:20px;
}

.updates-section .updates-title h2{
margin:0;
font-size:22px;
font-weight:900;
color:#111;
font-variant:small-caps;
display:inline-block;
border-bottom:2px solid #111;
padding-bottom:5px;
}

.updates-section .updates-title span{
display:block;
margin-top:8px;
color:#777;
font-size:12px;
font-variant:small-caps;
}

.updates-section .update-row{
position:relative;
display:flex;
gap:12px;
margin-bottom:15px;
}

.updates-section .update-row:not(:last-child)::after{
content:"";
position:absolute;
left:7px;
top:18px;
width:2px;
height:140%;
background:#e5e7eb;
}

.updates-section .update-row .timeline-dot{
min-width:15px;
width:15px;
height:15px;
border-radius:50%;
margin-top:18px;
z-index:2;
}

.updates-section .update-row .completed{
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.15);
}

.updates-section .update-row .progress{
background:#f59e0b;
box-shadow:0 0 0 4px rgba(245,158,11,.15);
}

.updates-section .update-row .planned{
background:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.15);
}

.updates-section .update-row .update-box{
flex:1;
background:#fafafa;
border-radius:14px;
padding:12px;
border:1px solid #f1f1f1;
box-shadow:0 3px 10px rgba(0,0,0,.04);
}

.updates-section .update-row .update-box .update-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
}

.updates-section .update-row .update-box .update-top .badge{
padding:5px 8px;
border-radius:20px;
font-size:9px;
font-weight:700;
letter-spacing:.5px;
}

.updates-section .update-row .update-box .update-top .live{
background:#dcfce7;
color:#15803d;
}

.updates-section .update-row .update-box .update-top .progress-badge{
background:#fef3c7;
color:#b45309;
}

.updates-section .update-row .update-box .update-top .planned-badge{
background:#f3e8ff;
color:#7e22ce;
}

/* META WRAPPER */
.updates-section .update-row .update-box .update-top .nu_meta_info{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

/* VERSION TAG */
.updates-section .update-row .update-box .update-top .nu_meta_info .nu_version_tag{
padding:3px 6px;
border-radius:999px;
font-size:9px;
font-weight:800;
letter-spacing:.5px;
background:linear-gradient(135deg,#dbeafe,#bfdbfe);
color:#1d4ed8;
border:1px solid #93c5fd;
box-shadow:0 2px 6px rgba(59,130,246,.15);
}

/* TIME TAG (CLEAN MODERN STYLE) */
.updates-section .update-row .update-box .update-top .nu_meta_info .nu_time_tag{
font-size:9px;
font-weight:600;
color:#6b7280;
padding:3px 6px;
border-radius:999px;
background:#f3f4f6;
border:1px solid #e5e7eb;
position:relative;
}

/* optional small dot before time */
.updates-section .update-row .update-box .update-top .nu_meta_info .nu_time_tag::before{
content:"•";
margin-right:5px;
color:#9ca3af;
}

/* HOVER EFFECT */
.updates-section .update-row .update-box .update-top .nu_meta_info .nu_time_tag:hover{
background:#e5e7eb;
color:#374151;
transition:.2s;
}

.updates-section .update-row .update-box h3{
margin:0 0 6px;
font-size:14px;
font-weight:700;
color:#111;
line-height:1.4;
}

.updates-section .update-row .update-box p{
margin:0;
color:#666;
font-size:12px;
line-height:1.5;
}

.updates-section .view-more-btn{
display:inline-block;
margin-top:8px;
font-size:11px;
font-weight:700;
color:#2563eb;
text-decoration:none;
padding:4px 10px;
border-radius:20px;
border:1px solid #bfdbfe;
background:#eff6ff;
transition:.2s;
}

.updates-section .view-more-btn:hover{
background:#2563eb;
color:#fff;
border-color:#2563eb;
}


.updates-section .view-more-btn i {
display: block;
float: right;
margin-left: 5px;
}

/* =========================================
DARK MODE
========================================= */

.content-darkmode .updates-section{
background:#1a1d24;
box-shadow:none;
border:1px solid #2b313d;
}

.content-darkmode .updates-section .updates-title h2{
color:#f8fafc;
border-bottom-color:#475569;
}

.content-darkmode .updates-section .updates-title span{
color:#94a3b8;
}

.content-darkmode .updates-section .update-row:not(:last-child)::after{
background:#374151;
}

.content-darkmode .updates-section .update-row .update-box{
background:#222733;
border:1px solid #313847;
box-shadow:none;
}

.content-darkmode .updates-section .update-row .update-box h3{
color:#f8fafc;
}

.content-darkmode .updates-section .update-row .update-box p{
color:#cbd5e1;
}

/* Status Badges */
.content-darkmode .updates-section .update-row .update-box .update-top .live{
background:rgba(34,197,94,.15);
color:#4ade80;
}

.content-darkmode .updates-section .update-row .update-box .update-top .progress-badge{
background:rgba(245,158,11,.15);
color:#fbbf24;
}

.content-darkmode .updates-section .update-row .update-box .update-top .planned-badge{
background:rgba(168,85,247,.15);
color:#c084fc;
}

/* Version Tag */
.content-darkmode .updates-section .update-row .update-box .update-top .nu_meta_info .nu_version_tag{
background:linear-gradient(135deg,#1e3a8a,#2563eb);
border-color:#3b82f6;
color:#dbeafe;
box-shadow:none;
}

/* Time Tag */
.content-darkmode .updates-section .update-row .update-box .update-top .nu_meta_info .nu_time_tag{
background:#2b313d;
border:1px solid #3b4454;
color:#cbd5e1;
}

.content-darkmode .updates-section .update-row .update-box .update-top .nu_meta_info .nu_time_tag::before{
color:#94a3b8;
}

.content-darkmode .updates-section .update-row .update-box .update-top .nu_meta_info .nu_time_tag:hover{
background:#374151;
color:#fff;
}

/* Timeline Dots Glow */
.content-darkmode .updates-section .update-row .completed{
box-shadow:0 0 0 4px rgba(34,197,94,.20);
}

.content-darkmode .updates-section .update-row .progress{
box-shadow:0 0 0 4px rgba(245,158,11,.20);
}

.content-darkmode .updates-section .update-row .planned{
box-shadow:0 0 0 4px rgba(168,85,247,.20);
}

.content-darkmode .updates-section .view-more-btn{
background:#1e293b;
border:1px solid #334155;
color:#60a5fa;
}

.content-darkmode .updates-section .view-more-btn:hover{
background:#2563eb;
color:#fff;
border-color:#2563eb;
}

.user_controls .nu_referral_card{
width:100%;
background:linear-gradient(145deg,#ffffff,#f8fafc);
border:1px solid #e5e7eb;
border-radius:10px;
padding:14px;
margin-top:15px;
position:relative;
overflow:hidden;
}

.user_controls .nu_referral_card .nu_referral_top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.user_controls .nu_referral_card .nu_referral_title{
font-size:13px;
padding-left:2px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
background:linear-gradient(90deg,#6366f1,#06b6d4,#22c55e);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.user_controls .nu_referral_card .nu_referral_count{
font-size:11px;
font-weight:700;
color:#64748b;
background:#f1f5f9;
padding:4px 10px;
border-radius:999px;
}

.user_controls .nu_referral_card .nu_referral_input_box input{
width:100%;
padding:12px;
border-radius:5px;
border:1px solid #e2e8f0;
background:#f8fafc;
font-size:12px;
font-weight:600;
color:#334155;
outline:none;
}

.user_controls .nu_referral_card input:focus{
border-color:#6366f1;
box-shadow:0 0 0 4px rgba(99,102,241,.12);
}

.content-darkmode .user_controls .nu_referral_card{
background:linear-gradient(145deg,#1e293b,#0f172a);
border:1px solid #2b3444;
box-shadow:none;
}

.content-darkmode .user_controls .nu_referral_card .nu_referral_count{
background:#111827;
color:#cbd5e1;
}

.content-darkmode .user_controls .nu_referral_card .nu_referral_input_box input{
background:#111827;
border:1px solid #2b3444;
color:#e5e7eb;
}

.content-darkmode .user_controls .nu_referral_card .nu_referral_input_box input:focus{
border-color:#6366f1;
box-shadow:0 0 0 4px rgba(99,102,241,.2);
}


#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_chats_msg .user_message_video .video_thumbnail{
width:100%;
height:100%;
object-fit: contain;
display:block;
}

.search_found{
animation: searchFlash 2.5s ease!important;
}

@keyframes searchFlash{
0%{background:#ffe16a;}
40%{background:#ffe16a;}
100%{background:transparent;}
}


.search_results_wrap{
display:flex;
flex-direction:column;
gap:14px;
animation:usermsgsearchfadeSearch .25s ease;
}

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

.search_results_wrap .search_result_card{
position:relative;
overflow:hidden;
border-radius: 0px 14px 14px 0px;
padding:12px;
background:linear-gradient(180deg,#ffffff,#fafcff);
border:1px solid rgba(0,0,0,.06);
box-shadow:
0 10px 30px rgba(0,0,0,.06),
0 2px 8px rgba(0,0,0,.03);
transition:.22s ease;
display:flex;
gap:12px;
cursor:pointer;
}

.search_results_wrap .search_result_card::before{
content:"";
position:absolute;
top:0;
left:0;
width:4px;
height:100%;
background:linear-gradient(180deg,#5b8cff,#7a5cff,#ff4fd8);
opacity:.9;
}

.search_results_wrap .search_result_card:hover{
transform:translateY(-3px);
box-shadow:
0 16px 40px rgba(0,0,0,.12),
0 4px 12px rgba(0,0,0,.05);
}

.search_results_wrap .search_result_card .search_dp{
width:50px;
min-width:50px;
height:50px;
border-radius:15px;
overflow:hidden;
position:relative;
border:2px solid #fff;
box-shadow:0 4px 14px rgba(0,0,0,.12);
}

.search_results_wrap .search_result_card .search_dp img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.search_results_wrap .search_result_card.active .search_dp::after{
content:"";
position:absolute;
bottom:3px;
right:3px;
width:12px;
height:12px;
border-radius:50%;
background:#14d45f;
border:2px solid #fff;
}

.search_results_wrap .search_result_card .search_msg_body{
flex:1;
min-width:0;
}

.search_results_wrap .search_result_card .search_msg_top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}

.search_results_wrap .search_result_card .search_sender_name{
font-size:15px;
font-weight:700;
color:#111827;
display:flex;
align-items:center;
gap:6px;
}

.search_results_wrap .search_result_card .you_badge{
background:linear-gradient(135deg,#4f7cff,#6f52ff);
color:#fff;
font-size:10px;
font-weight:700;
padding:4px 8px;
border-radius:999px;
letter-spacing:.4px;
}

.search_results_wrap .search_result_card .search_msg_time{
font-size:11px;
color:#8b8b8b;
white-space:nowrap;
}

.search_results_wrap .search_result_card .search_msg_text{
font-size:13.5px;
line-height:1.6;
color:#1e293b;
word-break:break-word;
}

.search_results_wrap .search_result_card .search_msg_text mark{
background:linear-gradient(135deg,#ffe45c,#ffbf00);
color:#111;
padding: 0px;
}

.search_results_wrap .search_result_card .search_msg_footer{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:12px;
}

.search_results_wrap .search_result_card .search_msg_footer .search_type{
display:inline-flex;
align-items:center;
gap:5px;
padding:7px 12px;
border-radius:999px;
font-size:11px;
font-weight:700;
letter-spacing:.3px;
}

.search_results_wrap .search_result_card .search_msg_footer .search_type.text{
background:#e8f1ff;
color:#2463eb;
}

.search_type.image{
background:#ffeaf4;
color:#d81b60;
}

.search_type.voice{
background:#fff3df;
color:#ef6c00;
}

.search_type.video{
background:#e7ffef;
color:#1b8e3e;
}

.search_results_wrap .search_result_card .search_msg_footer .search_msg_id{
font-size:11px;
color:#9aa0a6;
}

.search_results_wrap .search_empty{
padding:60px 20px;
text-align:center;
border-radius:26px;
background:#fff;
border:1px dashed #d6d6d6;
}

.search_results_wrap .search_empty i{
font-size:48px;
margin-bottom:12px;
display:block;
color:#7b8cff;
}

.search_results_wrap .search_empty h3{
margin:0;
font-size:18px;
color:#111;
}

.search_results_wrap .search_empty p{
margin-top:8px;
color:#777;
font-size:14px;
}

@keyframes usrmsgsearchresultGlow{
0%{
    box-shadow:0 0 0 rgba(0,0,0,0);
}
50%{
    box-shadow:0 0 0 4px rgba(91,140,255,.12),
    0 0 35px rgba(91,140,255,.35);
}
100%{
    box-shadow:0 0 0 rgba(0,0,0,0);
}
}

.search_results_wrap .search_result_card.active{
animation:usrmsgsearchresultGlow 1.2s ease;
}

.user-info-message .usernickname .search_pagination{
display:flex;
justify-content: center;
align-items:center;
margin:25px 0;
gap:15px;
flex-direction: column;
}

.user-info-message .usernickname .search_pagination .page_btn{
display:flex;
align-items:center;
gap:8px;
padding:10px 18px;
background:#5b8cff;
color:#fff;
text-decoration:none;
border-radius:12px;
font-weight:600;
transition:.2s;
}

.user-info-message .usernickname .search_pagination .page_btn:hover{
background:#4377f5;
color:#fff;
}

.user-info-message .usernickname .search_pagination .page_number{
font-weight:700;
color:#555;
}

/*=========================
SEARCH RESULTS DARK MODE
=========================*/

.content-darkmode .search_results_wrap .search_result_card{
background:linear-gradient(180deg,#1d1f24,#181a1f);
border:1px solid rgba(255,255,255,.06);
box-shadow:
0 10px 30px rgba(0,0,0,.45),
0 2px 8px rgba(0,0,0,.25);
}

.content-darkmode .search_results_wrap .search_result_card:hover{
box-shadow:
0 16px 40px rgba(0,0,0,.55),
0 4px 12px rgba(0,0,0,.35);
}

.content-darkmode .search_results_wrap .search_result_card .search_dp{
border:2px solid #2c313b;
}

.content-darkmode .search_results_wrap .search_result_card.active .search_dp::after{
border:2px solid #1d1f24;
}

.content-darkmode .search_results_wrap .search_result_card .search_sender_name{
color:#f3f4f6;
}

.content-darkmode .search_results_wrap .search_result_card .search_msg_time{
color:#9ca3af;
}

.content-darkmode .search_results_wrap .search_result_card .search_msg_text{
color:#d1d5db;
}

.content-darkmode .search_results_wrap .search_result_card .search_msg_text mark{
background:#ffcc33;
color:#111;
}

.content-darkmode .search_results_wrap .search_result_card .search_msg_footer .search_msg_id{
color:#9ca3af;
}

/* Message Types */

.content-darkmode .search_results_wrap .search_result_card .search_msg_footer .search_type.text{
background:#1b335d;
color:#8ec5ff;
}

.content-darkmode .search_results_wrap .search_result_card .search_msg_footer .search_type.image{
background:#51243c;
color:#ff9cc4;
}

.content-darkmode .search_results_wrap .search_result_card .search_msg_footer .search_type.voice{
background:#4d3920;
color:#ffca75;
}

.content-darkmode .search_results_wrap .search_result_card .search_msg_footer .search_type.video{
background:#1f4630;
color:#7df2aa;
}

/* Empty */

.content-darkmode .search_results_wrap .search_empty{
background:#1d1f24;
border:1px dashed #3b414d;
}

.content-darkmode .search_results_wrap .search_empty i{
color:#8da2ff;
}

.content-darkmode .search_results_wrap .search_empty h3{
color:#f3f4f6;
}

.content-darkmode .search_results_wrap .search_empty p{
color:#b3b8c2;
}

/* Pagination */

.content-darkmode .user-info-message .usernickname .search_pagination .page_btn{
background:#3d6df7;
color:#fff;
}

.content-darkmode .user-info-message .usernickname .search_pagination .page_btn:hover{
background:#2d5ae6;
}

.content-darkmode .user-info-message .usernickname .search_pagination .page_number{
color:#d1d5db;
}

.user_media_grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:10px;
padding:10px;
animation:usermediagridfade .25s ease;
}

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

.user_media_grid .media_card{
position:relative;
overflow:hidden;
border-radius:14px;
background:#ffffff;
border:1px solid rgba(0,0,0,.06);
box-shadow:
0 8px 24px rgba(0,0,0,.08),
0 2px 8px rgba(0,0,0,.04);
transition:.22s ease;
}

.user_media_grid .media_card:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:
0 14px 32px rgba(0,0,0,.14),
0 4px 12px rgba(0,0,0,.08);
}

.user_media_grid .media_card .media_thumb{
width:100%;
height:120px;
position:relative;
overflow:hidden;
}

.user_media_grid .media_card .media_thumb img,
.user_media_grid .media_card .media_thumb video{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.user_media_grid .media_card .media_icon{
width:100%;
height:120px;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#ffffff;
background:linear-gradient(135deg,#5b8cff,#6b5cff);
}

.user_media_grid .media_card .media_badge{
position:absolute;
top:8px;
right:8px;
display:flex;
align-items:center;
gap:4px;
padding:5px 8px;
border-radius:8px;
background:rgba(0,0,0,.65);
color:#fff;
font-size:11px;
font-weight:600;
backdrop-filter:blur(8px);
}

.user_media_grid .media_card .media_overlay{
position:absolute;
left:0;
right:0;
bottom:0;
padding:8px;
background:linear-gradient(transparent,rgba(0,0,0,.78));
color:#fff;
font-size:11px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.4px;
}

.user-info-message .usernickname .media_pagination{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
padding:20px 10px;
flex-wrap:wrap;
}

.user-info-message .usernickname .media_pagination .page_btn{
display:flex;
align-items:center;
gap:8px;
padding:10px 18px;
background:#5b8cff;
color:#fff;
text-decoration:none;
border-radius:12px;
font-size:13px;
font-weight:600;
transition:.2s;
}

.user-info-message .usernickname .media_pagination .page_btn:hover{
background:#4377f5;
color:#fff;
}

.user-info-message .usernickname .media_pagination .page_info{
font-size:13px;
font-weight:700;
color:#555;
}

.content-darkmode .user_media_grid .media_card{
background:#1d1f24;
border:1px solid rgba(255,255,255,.06);
box-shadow:
0 10px 28px rgba(0,0,0,.45),
0 2px 8px rgba(0,0,0,.25);
}

.content-darkmode .user_media_grid .media_card:hover{
box-shadow:
0 16px 36px rgba(0,0,0,.55),
0 4px 12px rgba(0,0,0,.35);
}

.content-darkmode .user_media_grid .media_card .media_icon{
background:linear-gradient(135deg,#345fd8,#5b49df);
color:#ffffff;
}

.content-darkmode .user_media_grid .media_card .media_badge{
background:rgba(0,0,0,.72);
color:#fff;
}

.content-darkmode .user_media_grid .media_card .media_overlay{
background:linear-gradient(transparent,rgba(0,0,0,.88));
color:#f3f4f6;
}

.content-darkmode .user-info-message .usernickname .media_pagination .page_btn{
background:#3d6df7;
color:#fff;
}

.content-darkmode .user-info-message .usernickname .media_pagination .page_btn:hover{
background:#2b59e4;
color:#fff;
}

.content-darkmode .user-info-message .usernickname .media_pagination .page_info{
color:#d1d5db;
}


.updates-section .update-box ul{
margin:18px 0 0;
padding:0;
list-style:none;
}

.updates-section .update-box ul li{
position:relative;
margin-bottom:12px;
padding:12px 14px 12px 42px;
border-radius:12px;
background:#f8f9fc;
border:1px solid #e6eaf3;
color:#444;
font-size:14px;
line-height:1.7;
transition:.2s ease;
}

.updates-section .update-box ul li:last-child{
margin-bottom:0;
}

.updates-section .update-box[status="completed"] ul li::before{
content:"✓";
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#4caf50;
color:#fff;
font-size:11px;
font-weight:700;
}

.updates-section .update-box ul li:hover{
background:#f2f6ff;
border-color:#bfd4ff;
transform:translateX(4px);
}

.updates-section .update-box ul li strong{
color:#222;
font-weight:700;
}

/*=========================
DARK MODE
=========================*/

.content-darkmode .updates-section .update-box ul{
margin:18px 0 0;
padding:0;
list-style:none;
}

.content-darkmode .updates-section .update-box ul li{
background:#242830;
border:1px solid #363c47;
color:#d7dce5;
}

.content-darkmode .updates-section .update-box ul li::before{
background:#42b86d;
color:#fff;
}

.content-darkmode .updates-section .update-box ul li:hover{
background:#2c313b;
border-color:#4d74ff;
}

.content-darkmode .updates-section .update-box ul li strong{
color:#ffffff;
}

/* =========================
URL PREVIEW
========================= */

.url_preview{

margin-top:8px;
border:1px solid #ddd;
border-radius:14px;
overflow:hidden;
background:#fff;
max-width:360px;
cursor:pointer;
transition:.25s;
box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.url_preview:hover{

transform:translateY(-2px);

}

.url_preview_img{

background:#f5f5f5;

}

.url_preview_img img{

width:100%;
display:block;
max-height:220px;
object-fit:cover;

}

.url_preview_info{

padding:12px;

}

.url_preview_site{

font-size:12px;
color:#888;
margin-bottom:5px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.3px;

}

.url_preview_title{

font-size:15px;
font-weight:700;
line-height:1.4;
margin-bottom:6px;
color:#222;

}

.url_preview_desc{

font-size:13px;
line-height:1.5;
color:#666;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;

}

.url_preview_link{

margin-top:8px;
font-size:12px;
color:#0a7cff;
font-weight:600;
word-break:break-all;

}

/* =========================
DARK MODE
========================= */

.content-darkmode .url_preview{

background:#1d1d1d;
border-color:#343434;
box-shadow:0 2px 10px rgba(0,0,0,.35);

}

.content-darkmode .url_preview:hover{

border-color:#4b4b4b;

}

.content-darkmode .url_preview_img{

background:#111;

}

.content-darkmode .url_preview_site{

color:#9d9d9d;

}

.content-darkmode .url_preview_title{

color:#f5f5f5;

}

.content-darkmode .url_preview_desc{

color:#bdbdbd;

}

.content-darkmode .url_preview_link{

color:#63a8ff;

}

/*=========================================
        PROFESSIONAL MESSAGE LINK
=========================================*/

.message_url{
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:100%;
    padding:10px 16px;
    margin-top:8px;
    background:linear-gradient(180deg,#ffffff,#f6f8fc);
    border:1px solid #dfe5f0;
    border-radius:14px;
    color:#2563eb;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    overflow:hidden;
    text-overflow: nowrap;
    box-shadow:
        0 2px 8px rgba(0,0,0,.05),
        0 8px 20px rgba(37,99,235,.08);
    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
    flex-direction: row;
}

.message_url::before{
    content:"\eb4f";
    font-size: 13px;
    font-family: uicons-regular-rounded !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.message_url:hover{
    color:#1d4ed8;
    background:#ffffff;
    border-color:#8fb6ff;
    transform:translateY(-2px);
    box-shadow:
        0 8px 24px rgba(37,99,235,.16),
        0 2px 8px rgba(0,0,0,.06);
}

.message_url:active{
    transform:scale(.98);
}

.content-darkmode .message_url{
    background:#232831;
    border-color:#363d49;
    color:#8ab4ff;
    box-shadow:none;
}

.content-darkmode .message_url:hover{
    background:#2b313b;
    border-color:#5f8fff;
    color:#b7d1ff;
}

#new-inbox-ui .user_chats_inbox .user_chats_msgs_scroll .user_chats_msgs .user_message_text a {
    -webkit-touch-callout: none; /* iPhone/iPad */
    -webkit-user-select: none;
    user-select: none;
}

#new-inbox-ui .report_modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
backdrop-filter:blur(6px);
display:flex;
align-items:flex-end;
justify-content:center;
padding:20px;
z-index:999999;
opacity:0;
pointer-events:none;
transition:.25s;
}

#new-inbox-ui .report_modal.active{
opacity:1;
pointer-events:auto;
}

#new-inbox-ui .report_modal_box{
width:100%;
max-width:520px;
background:#111827;
border-radius:28px;
padding:20px;
transform:translateY(120%);
transition:.35s cubic-bezier(.22,1,.36,1);
box-shadow:0 25px 70px rgba(0,0,0,.45);
}

#new-inbox-ui .report_modal.active .report_modal_box{
transform:translateY(0);
}

#new-inbox-ui .report_modal_header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

#new-inbox-ui .report_modal_title{
display:flex;
align-items:center;
gap:10px;
color:#fff;
font-size:20px;
font-weight:700;
}

#new-inbox-ui .report_modal_header button{
width:38px;
height:38px;
border:none;
background:#1f2937;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
cursor:pointer;
}

#new-inbox-ui .report_warning{display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px;padding:18px;margin-bottom:20px;background:#2b1d0d;border:1px solid #7c4a05;border-radius:18px;}

#new-inbox-ui .report_warning_icon{
width:54px;
height:54px;
border-radius:50%;
background:#f59e0b;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:#fff;
}

#new-inbox-ui .report_warning_text h3{
margin:0 0 8px;
color:#fff;
font-size:17px;
}

#new-inbox-ui .report_warning_text p{
margin:0;
color:#d1d5db;
font-size:14px;
line-height:1.6;
}

#new-inbox-ui .report_warning_list{
margin:15px 0 0;
padding-left:18px;
text-align:left;
color:#d1d5db;
font-size:13px;
line-height:1.7;
}

#new-inbox-ui .report_warning_list li{
margin-bottom:6px;
}

#new-inbox-ui .report_warning_list li::marker{
color:#f59e0b;
}

#new-inbox-ui .report_modal_actions{
display:flex;
gap:12px;
margin-top:20px;
}

#new-inbox-ui .report_cancel_btn,
#new-inbox-ui .report_send_btn{
height:48px;
border:none;
border-radius:15px;
font-weight:700;
cursor:pointer;
}

#new-inbox-ui .report_cancel_btn{
flex:1;
background:#374151;
color:#fff;
}

#new-inbox-ui .report_send_btn{
flex:2;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:linear-gradient(135deg,#dc2626,#ef4444);
color:#fff;
transition:.2s;
}

#new-inbox-ui .report_send_btn:active{
transform:scale(.97);
}