/*[ 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;
}
<style>
.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%;
}
.messages  .message { 
background: #fff;
border-bottom: 1px solid blue;
overflow:hidden;
}


.messages .message .status {
color: #a5a5a5;
font-weight: 600;
margin-left: 5px;
font-size: 10px;
margin-top: 2px;
font-family: emoji;
}

.messages  .message .username {
margin-top: -5px;
}

.messages  .message .left-sider {
float: left;
width: 85px;
padding: 15px;
}

.messages {
border: 2px solid #9d00ff;
border-radius: 10px;
}

.messages .message .msg {
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
}
.messages .message .msg img {
max-width: 50px;
}

.left-sider img.img-dp {
width: 60px;
height: 60px;
border-radius: 15px;
padding: 3px;
border: 1px solid deeppink;
box-shadow: 0px 0px 2px 0px deeppink;
}
.username font.user-name {
color: #e91e63;
font-size: 15px;
font-weight: 600;
text-decoration: underline;
font-style: oblique;
font-family: stylish;
}
.messages .message .username {
margin-top: -2px;
}

.messages .message span.badge {
background: #7444f4;
float: right;
padding: 5px;
}

.messages  .message .right-side span.time {
font-family: serif;
float: right;
color:#745a5a;
margin-top: -25px;
}

.messages  .message  .msg font.msgtxt {
color: #745a5a;
font-family: playfair display;
}

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



.messages .mtitle {
padding: 10px;
text-align: center;
background: #ffffff;
color: #000;
border-radius: 10px;
font-weight: 600;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}


.messages .buttons {
background: #ffffff;
border-top: 1px solid #fff;
padding: 10px;
border: 1px solid #9d00ff;
border-right: 0px;
border-left: 0px;
}

.msg img, svg {
max-width: 100%;
vertical-align: middle;
}

.messages .buttons button.new {
background: #fff;
border: 1px solid #ff5722;
padding: 5px;
border-radius: 5%;
color: #000;
font-weight: 600;
box-shadow: 0px 0px 5px 0px #ff5722;
}

.messages .buttons button.read {
background: #fff;
border: 1px solid #ff5722;
padding: 0px 5px;
color: #fff;
font-weight: 600;
float: right;
border-radius: 5px;
margin-top: 2px;
box-shadow: 0px 0px 5px 0px #ff5722;
}


.vertical-menu {
background: darkgray;
width: 100%;
text-align: left !important;
}
.vertical-menu a {
color: #EEEEEE;
display: block;
padding: 12px;
text-decoration: none;
border-bottom: 1px solid #1b2a38;
font-weight: 600;
}

.vertical-menu a i {
font-size: 15px;
margin-right: 10px;
background: #fff;
color: #000;
padding: 2px 5px;
border-radius: 15px;
}

.messages .message .conversation-compose .input-msg {
background: #fff;
border: 0;
flex: 1 1 auto;
font-size: 16px;
margin: 0;
outline: none;
min-width: 50px;
padding-top: 10px;
padding-left: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

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

.messages .message .conversation-compose .photo:after {
border-width: 0px 0 10px 10px;
border-color: #fbfbfb00 #ffffff00 transparent #ffffff;
border-style: solid;
position: absolute;
width: 0;
height: 0;
content: "";
top: 0;
right: -10px;
}
.messages .message form {
padding: 15px;
margin-top: -20px;
}

.left-sider img.active {
bottom: 65px;
position: relative;
right: -48px;
width: 15px;
background: #fff;
border-radius: 50px;
border: 2px solid #fff;
}

.messages .message .hstar {
position: absolute;
}

.messages .message .hstar i {
bottom: 26px;
position: relative;
right: -37px;
width: auto;
background: deeppink;
border-radius: 0px;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border: 2px solid deeppink;
color: white;
font-size: 10px;
padding: 25%;
}

.message .right-side {
margin-left: 60px;
padding: 15px;
}
.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;
}

.messages .message .owner i{
bottom: 25px;
position: relative;
right: 0px;
width: auto;
background: deeppink;
border-radius: 0px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border: 2px solid deeppink;
color: white;
font-size: 10px;
padding: 25%;
}
.messages .message .owner {
position: absolute;
}
.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;
}
.storyshow .userinfosand {
background: #000;
padding: 10px;
}

.storyshow .totallines {
font-family: inherit;
margin-right: 12px;
display: flex;
margin-top: 12px;
height: 4px;
width: calc(100% - 0px);
margin-top: 7px;
}

.storyshow .totallines .lines {
font-family: inherit;
height: 100%;
display: flex;
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
background-color: rgb(255 255 255 / 0%);
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
flex: 1 1 auto;
}

.storyshow .totallines .lines .line {
transition-duration: 0.3s;
width: 100%;
font-family: inherit;
height: 100%;
margin-right: 5px;
transition-property: width;
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
transition-timing-function: linear;
border-bottom-right-radius: 100px;
background-color: #adadad;
border-top-right-radius: 100px;
will-change: width;
}

.storyshow .userinfosand .infoo {
overflow: hidden;
padding: 10px 5px;
}

.storyshow .userinfosand .infoo .avatar {
float: left;
margin-top: 5px;
}

.storyshow .userinfosand .infoo .avatar img {
width: 50px;
height: 50px;
border-radius: 50px;
}

.storyshow 
.storyimage img {
width: 100%;
height: 100%;
}

.storyshow .reactions .storyop img {
width: 17%;
border: 1px outset #fff;
margin-right: 10px;
}

.storyshow .userinfosand .infoo .name span.spanname {
color: white;
font-weight: 600;
}

.storyshow .userinfosand .infoo .name {
margin-left: 60px;
margin-top: 8px;
}

.storyshow .userinfosand .infoo .name span.time {
display: block;
color: #eee;
}

.storyshow .userinfosand .infoo .cancel {
float: right;
margin-top: -35px;
margin-right: 10px;
}

.storyshow .userinfosand .infoo .cancel i.fa.fa-xmark {
font-size: 25px;
}

.storyshow .totallines .lines .line:last-child {
margin-right: 0px;
}

.storyshow  .next {
position: absolute;
top: 50%;
right: 0px;
float: right;
background: #0000007a;
padding: 10px;
}

.storyshow 
.previous {
position: absolute;
top: 50%;
left: 0px;
float: left;
background: #0000007a;
padding: 10px;
}

.storyshow 
.titlestory {position: absolute;text-align: center;width: 100%;margin-top: -65px;padding: 10px;background: #0000009c;color: #fff;font-weight: 600;}

.storyshow 
.textandbutton {
display: flex;
flex-direction: row;
align-items: flex-end;
overflow: hidden;
height: 50px;
width: 100%;
margin-left: 0px;
z-index: 2;
padding: 5px;
background: #000;
border-top: 1px solid #ffff;
}

.storyshow .textandbutton textarea.commenttype {
border: 0;
flex: 1 1 auto;
font-size: 16px;
margin: 0;
min-width: 50px;
padding-top: 10px;
border: 0;
background: #fff;
height: 100%;
padding-left: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}

.storyshow .textandbutton button#send {
background: transparent;
border: 0;
cursor: pointer;
flex: 0 0 auto;
padding: 0;
position: relative;
outline: none;
margin-bottom: -1px;
}

.storyshow .textandbutton button#send .circle {
background: #008a7c;
border-radius: 10px;
color: #fff;
position: relative;
width: 48px;
height: 41px;
display: flex;
align-items: center;
justify-content: center;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}

.storyshow 
.reactions {
padding: 10px;
background: #000;
border-top: 1px solid #fff;
}

.storyshow .userinfosand .infoo .views {
float: right;
margin-top: -30px;
margin-right: 30px;
}

.storyshow .userinfosand .infoo .comments {
float: right;
margin-top: -30px;
margin-right: 90px;
}

.alltopers .leveltable {
padding: 10px;
border: 1px solid #eee;
overflow: hidden;
}

.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;
}
.storyshow  .textstory {
height: 100%;
text-align: center;
background: url("https://tycchat.ml/stories/bd/1.webp") center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-size: cover;
background-repeat: no-repeat;
font-size: 20px;
font-weight: 600;
color: white;
padding: 150px 35px !important;
word-break: break-word;
}
.storyshow  .textstory img {
max-width: 50px;
}
.storyshow .videotype {
padding: 10px;
border: 5px solid #0d6efd;
background: #fff;
}

.storyshow .videotype .typeevid {
background: #0d6efd;
padding: 10px;
color: #fff;
text-align: center;
font-weight: 600;
margin: -10px;
margin-bottom: 10px;
}

.storyshow .videotype video {
border-radius: 10px;
margin-bottom: 60px;
}
.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;
}

.centerrow .storyshow .titlestory{
width: 65.66666%!important;
}

.centerrow .storyshow .next{
right:35%!important;
}

}
.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;
}
.storyshow 
.bottomarea {
background: #000;
padding: 10px;
overflow: hidden;
}

.reactings {
padding: 10px;
background: #fff;
float: left;
width: 45%;
text-align: center;
color: #f30051;
margin: 5px;
font-weight: 600;
border: 1px solid #f30051;
}

.commentss {
padding: 10px;
background: #fff;
float: right;
width: 45%;
text-align: center;
color: blue;
margin: 5px;
font-weight: 600;
border: 1px solid blue;
}

.storyshow .bottomarea .reacts {   
background: #fff;
border-radius: 50px;
overflow: hidden;
position: absolute;
margin-top: -60px;
box-shadow: 0px 0px 20px 6px #000;
margin-left: 0px;
margin-right: 50px;
display: none;
}

.storyshow .bottomarea .reacts a img {
width: 15%;
height: 10%;
border-radius: 50px;
}

.storyshow .bottomarea .reacts a {
margin: 2%;
}

.storyshow .bottomarea .commenttype {
background: #fff;
border-radius: 10px;
overflow: hidden;
position: absolute;
margin-top: -80px;
box-shadow: 0px 0px 20px 0px #000;
padding: 10px;
width: 94%;
display: none;
}

.storyshow .bottomarea .commenttype textarea {
width: 85%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 6px;
height: 49px;
float: left;
border: 2px solid #0d6efd;
}

.storyshow .bottomarea .commenttype button.sendtype {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
height: 49px;
padding: 10px 10px;
border: 1px solid #0d6efd;
}
.storyshow .onprivacy {
background: #fff;
padding: 100px 10px;
border: 2px solid red;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.storyshow .onprivacy .toptext {
margin: 30px;
text-align: center;
font-weight: 600;
color: red;
font-family: ROBOTO;
font-size: 30px;
}

.storyshow .onprivacy .bottomtxt {
padding: 10px;
font-weight: 600;
color: black;
border: 1px solid #eee;
text-align: center;
}
.storyshow .onprivacy .thank {
padding: 10px;
font-weight: 600;
color: black;
border: 1px solid blue;
text-align: center;
margin: 40px;
}
.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;
}

.inbox {
margin-top: -25px;
background: #fff;
}

.inbox  #security:target {
display: block!important;
}
.inbox .topmenu {
overflow: hidden;
padding: 30px 10px;
background: linear-gradient(160deg,blue,white 160%);
position: relative;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: -35px;
position: relative;
z-index: 10;
width:100%;
}

.inbox .topmenu div {
float: left;
}

.inbox .topmenu .avatar  img.mydp {
width: 45px;
height: 45px;
border-radius: 10px;
}

.inbox .topmenu .actionsarea {
float: right!important;
margin-top: 13px;
}

.inbox .topmenu .activearea {
margin-top: 12px;
margin-right: 20px;
}

.inbox .topmenu .avatar {
border: 1px solid #fff;
border-radius: 10px;
padding: 2px;
}

.inbox .topmenu .name {
margin-top: 5px;
color: #fff;
margin-left: 5px;
}



.inbox font.nameimg {
font-weight: 600;
text-decoration: underline;
}

.inbox font.timeing {
font-family: ROBOTO;
font-size: 12px;
color: #eee;
display: block;
}

.inbox .topmenu .actionsarea div {margin-right: 40px;}

.inbox .topmenu .menuarea {
margin-right: 15px!important;
}

.inbox .chatarea {
padding: 20px;
box-shadow: inset 0 10px 10px -10px #000;
overflow-x: hidden;
width: 100%;
height: calc(90vh - 120px);
position: relative;
background: #00000038;
margin-top: 0;
padding-top: 50px;
padding-bottom: 50px;
}

.inbox .chatarea::-webkit-scrollbar { 
display: none;  /* Safari and Chrome */
}

.inbox .chatarea .chats .mesage {
color: #000;
clear: both;
line-height: 18px;
font-size: 15px;
padding: 8px;
position: relative;
margin: 10px;
max-width: 85%;
word-wrap: break-word;
}

.inbox .chatarea .chats .mesage.rece {    background: #fff;
background: #fff;
color: #000;
border-radius: 0px 10px 10px 10px;
float:left;

}

.inbox .chatarea .chats .mesage.sen {
background: #e1ffc7;
float: right;
border-radius: 10px 0px 10px 10px;
}


.inbox .chatarea .chats .recetime {
float: left;
width: 100%;
text-align: left;
margin-top: 7px;
font-family: ROBOT;
margin-top: 5px;
padding-top: 10px;
border-top: 1px solid #eee;
}

.inbox .chatarea .chats  .sentime {
float: right;
width: 100%;
text-align: right;
margin-top: 4px;
font-family: ROBOTO;
overflow: hidden;
margin-top: 5px;
padding-top: 10px;
border-top: 1px solid #eee;
}

.inbox .chatarea .chats .mesage.sen:before {
border-width: 0px 0 10px 10px;
border-color: transparent transparent transparent #e1ffc7;
margin-top: -8px;
right: -9px;
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}

.inbox .chatarea .chats .mesage.rece:before {
border-width: 0px 10px 10px 0;
border-color: transparent #fff transparent transparent;
margin-top: -8px;
left: -9px;
top: auto;
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}

.inbox .chatarea .pregii {
text-align: -webkit-center;
overflow:hidden;
width: 100%;
padding: 0px 39%;
margin-top: -7%;
margin-bottom: 5%;
}

.inbox .chatarea .pregii div {
float: left;
background: #7e7e7e;
padding: 5% 14%;
}

.inbox .chatarea .pregii .leftside {border-right: 1px solid #fff;}

.inbox .actionsarea div i {
font-size: 23px;
}

.inbox .chatarea .chats  div.timing.rec:after {
content: "-";
margin-left: 10px;
}
.inbox .chatarea .chats  div.timing.sen:before {
content: "-";
margin-right: 10px;
}

.inbox .chatarea .chats span.editttxt.rec {
float: left;
}

.inbox .chatarea .chats span.editttxt {
margin-top: 3px;
font-family: ROBOTO;
font-variant-caps: small-caps;
font-variant-numeric: oldstyle-nums;
}

.inbox .chatarea .chats span.editttxt.rec:after {
content: "-";
margin: 5px;
}

.inbox .chatarea .chats  span.editttxt.sen {
float: right;
}

.inbox .chatarea .chats  span.editttxt.sen:before {
content: "-";
margin: 5px;
}


.inbox .chatarea .chats span.messagemenu i {
color: #000;
margin-left: 10px;
}

.inbox .chatarea .chats  span.timing {
margin-top: 5px;
}

.inbox .chatarea .chats  .timing {
margin-top: 4px;
}

.inbox .chatarea .chats  .timing.rec {
float: left;
}

.inbox .chatarea .chats  .timing.sen {
float: right;
}

.inbox .chatarea .chats span.messagemenu.sen {
margin-right: 10px;
}

.inbox .privsendingarea {
padding: 20px;
border-top: 1px solid #eee;
background: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: -40px;
position: relative;
}

.inbox .privsendingarea .tab {
box-shadow: 0px 0px 5px 0px #b5b5b5;
display: flex;
border-radius: 53px;
}

.inbox .privsendingarea .tab .attachment {
padding: 10px;
margin-top: 3px;
margin-left: 5px;
}

.inbox .privsendingarea .tab textarea.typingtextarea {
padding-top: 10px;
flex: 1 1 auto;
font-size: 16px;
margin: 0;
min-width: 50px;
border: 0;
border-radius: 10px;
padding-left: 5px;
}

.inbox .privsendingarea .tab .attachment i {
color: #c7c700;
font-size: 24px;
}

.inbox .privsendingarea .tab button.sendingbtn {
background: linear-gradient(160deg, blue, white 170%);
border-radius: 50px;
padding: 10px 15px;
height: 50px;
border: 0px;
margin-top: 4px;
margin-right: 5px;
}

.inbox spam.status {
display: block;
}

.inbox .chatarea .chats  .user {
border-radius: 50px;
padding: 2px;
border: 1px solid #3f01cf;
}

.inbox .chatarea .chats .user img {
width: 35px;
height: 35px;
border-radius: 50px;
}

.inbox .chatarea .chats  .rece.user {
float: left;
margin-right: 10px;
margin-top: 10px;
}

.inbox .chatarea .chats  .sen.user {
float: right;
margin-left: 10px;
margin-top: 10px;
}

.inbox .chatarea .chats .messsage.security {
background: linen;
padding: 15px;
border-radius: 15px;
font-size: 12px;
margin-bottom: 5px;
box-shadow: 0px 0px 5px 0px #c3c3c3;
border: 1px solid #c3c3c3;
}

.inbox .infoprivate {
background: #fff;
padding: 10px;
border-radius: 10px;
position: fixed;
bottom: 0px;
overflow: hidden;
border: 2px solid #000;
display: none;
width: 100%;
left: 0px;
z-index: 10;
}

.inbox .infoprivate .closebtn i {
color: #000;
text-shadow: 0px 0px 5px #00000047;
}

.inbox .infoprivate .closebtn {
float: left;
padding: 5px;
}

.inbox .infoprivate .privatelock i {
color: #3f01cf;
font-size: 50px;
}

.inbox .infoprivate .privatelock {
text-align: center;
margin: 50px;
margin-bottom: 0px;
}

.inbox .infoprivate .firstsen {
text-align: center;
font-weight: 600;
font-family: ROBOTO;
color: #3f01cf;
}

.inbox .infoprivate .secsen {
padding: 10px;
margin-left: 10px;
margin-right: 10px;
color: #818181;
font-family: ROBOTO;
}

.inbox .infoprivate .includes .include .icon i {
color: #818181;
}

.inbox .infoprivate .includes .include div {
float: left;
color: #818181;
font-weight: 600;
font-family: ROBTO;
margin-top: 2px;
margin-left: 10px;
}

.inbox .infoprivate .includes {
overflow: hidden;
padding: 17px;
}

.inbox .infoprivate .includes .include {
overflow: hidden;
margin-top: 10px;
border-bottom: 1px solid #eee;
}

.inbox .infoprivate .includes .include .icon {
margin-top: 0px!important;
margin-left: 0px!important;
width: 20px;
text-align: center;
}

.inbox .topmenu .unreads {
padding: 10px;
width: 100%;
text-align: -webkit-center;
}

.inbox .topmenu .unread {
padding: 10px;
background: #fff;
margin-bottom: -20px;
margin-top: 10px;
border-radius: 5px;
font-weight: 600;
color: black;
float: none!important;
width: 27%;
}
.inbox .chatarea .chats .msgtyping .dot-falling {
position: relative;
left: -9999px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9880ff;
color: #9880ff;
box-shadow: 9999px 0 0 0 #9880ff;
animation: dot-falling 2s infinite linear;
animation-delay: 0.1s;
}
.inbox .chatarea .chats .msgtyping .dot-falling::before, .dot-falling::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
}
.inbox .chatarea .chats .msgtyping .dot-falling::before {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9880ff;
color: #9880ff;
animation: dot-falling-before 1s infinite linear;
animation-delay: 0s;
}
.inbox .chatarea .chats .msgtyping .dot-falling::after {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9880ff;
color: #9880ff;
animation: dot-falling-after 1s infinite linear;
animation-delay: 0.2s;
}

.inbox .chatarea .chats .msgtyping {
background: #fff;
background: #fff;
color: #000;
border-radius: 0px 10px 10px 10px;
margin: 10px;
padding: 8px;
max-width: 85%;
word-wrap: break-word;
align-self: flex-start;
color: #000;
clear: both;
line-height: 18px;
font-size: 15px;
padding: 8px;
position: relative;
margin: 10px;
max-width: 85%;
word-wrap: break-word;
}


.inbox .chatarea .chats .msgtyping:before {
border-width: 0px 10px 10px 0;
border-color: transparent #fff transparent transparent;
margin-top: -8px;
left: -9px;
top: auto;
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}

@keyframes dot-falling {
0% {
box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
}
25%, 50%, 75% {
box-shadow: 9999px 0 0 0 #9880ff;
}
100% {
box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
}
}
@keyframes dot-falling-before {
0% {
box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
}
25%, 50%, 75% {
box-shadow: 9984px 0 0 0 #9880ff;
}
100% {
box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
}
}
@keyframes dot-falling-after {
0% {
box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
}
25%, 50%, 75% {
box-shadow: 10014px 0 0 0 #9880ff;
}
100% {
box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
}
} 
.inbox a.replyicon.replysend i {
color: #fff;
font-size: 15px;
background: #501bca;
padding: 2px 5px;
border-radius: 50px;
}
.inbox .chatarea .chats .mesage a.replyicon.replyrec {
position: absolute;
margin-left: 20px;
margin-top: 40px;
}
.inbox .chatarea .chats .mesage a.replyicon.replysend {
position: absolute;
margin-left: -45px;
margin-top: 20px;
}
.inbox  .chatss {
margin-top: 0;
overflow: hidden;
background: #efe7dd url("../../chatrooms/pics/default-chat.jpg") repeat;
background-size: 100% 100%;
}
.inbox .privsendingarea .tab .attachment input#imageslct{
position:absolute;
height:400px;
width:400px;
left:-200px;
top:-200px;
background:transparent;
opacity:0;
display: none;
}
.inbox .chatarea .chats .mesage.sen img.pvsimg, .inbox .chatarea .chats .mesage.rece img.pvfimg {
border: 2px solid #3f01cf;
margin-top: 10px;
border-radius: 5px;
} 
.inbox .chatarea .chats ul.privatepost {position: absolute;float: left;min-width: 160px;padding: 0px 0;font-size: 14px;background-color: #fff;border: 1px solid rgba(0,0,0,.15);border-radius: 4px;box-shadow: 0 6px 12px rgb(0 0 0 / 18%);top: auto;display: block;margin-top: -80px;margin-left: -110px;margin-right: 21px;}

.inbox .chatarea .chats ul.privatepost li.privatepostli {
text-align: left;
list-style-type: none;
padding: 5px 1px;
}

.inbox .chatarea .chats ul.privatepost li.blue {
color: blue;
border: 1px solid;
}
.inbox .chatarea .chats ul.privatepost li.privatepostli.blue a i {
color: blue!important;
font-size: 15px;
}

.inbox .chatarea .chats ul.privatepost 
li.privatepostli a i {
font-size: 15px;
margin-right: 10px;
margin-left: 10px;
}

.inbox .chatarea .chats ul.privatepost 
li.red {
color: red;
border: 1px solid;
}

.inbox .chatarea .chats ul.privatepost 
li.privatepostli.red a i {
color: red!important;
margin-right: 13px;
}

.inbox .chatarea .chats ul.privatepost li.blue a {
color: blue;
font-weight: 600;
font-family: ROBOTO!important;
}

.inbox .chatarea .chats ul.privatepost 
li.red a {
color: red;
font-weight: 600;
font-family: ROBOTO!important;
}
.inbox .chatarea .chats ul.privatepost li.orange {
color: orange;
border: 1px solid;
}

.inbox .chatarea .chats ul.privatepost li.privatepostli.orange a i {
color: orange;
font-size: 15px;
}

.inbox .chatarea .chats ul.privatepost li.orange a {
color: orange;
font-weight: 600;
font-family: ROBOTO!important;
}

.inbox #userpmenu:target{
display:block!important;
}
.inbox .chatarea .chats .mesage .dltt {color: #a0a0a0;font-weight: 600;font-style: italic;}
.inbox .chatarea .chats .mesage .dltt i.fa.fa-ban {
color: #a0a0a0;
font-size: 15px;
}
.inbox .popmenu .privatepost {
position: absolute;
float: left;
min-width: 160px;
padding: 0px 0;
font-size: 14px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
top: auto;
display: block;
margin-top: -80px;
/* margin-left: -110px; */
/* margin-right: 21px; */
}

.inbox .popmenu .privatepost li.blue {
color: blue;
border: 1px solid;
}
.inbox .popmenu .privatepost li.privatepostli {
text-align: left;
list-style-type: none;
padding: 5px 7px;
}
.inbox .popmenu .privatepost li.red {
color: red;
border: 1px solid;
}
.inbox .popmenu .privatepost li.blue a {
color: blue;
font-weight: 600;
font-family: ROBOTO!important;
}
.inbox .popmenu .privatepost li.red a {
color: red;
font-weight: 600;
font-family: ROBOTO!important;
}

.inbox .popmenu .privatepost .privatepostli.blue a i {
color: blue!important;
font-size: 15px;
}
.inbox .popmenu .privatepost .privatepostli.red a i {
color: red!important;
font-size: 15px;
}
.inbox .popmenu .privatepost .privatepostli a i {
font-size: 15px;
margin-right: 10px;
}


.inbox .popmenu .privatepost .privatepostli.orange a i  {
color: orange;
font-size: 15px;
}
.inbox .popmenu .privatepost li.orange {
color: orange;
border: 1px solid;
}
.inbox .popmenu .privatepost li.orange a {
color: orange;
font-weight: 600;
font-family: ROBOTO!important;
}
.inbox .popmenu {
background: #0000008c;
position: fixed;
top: 0px;
padding: 100% 80%;
}

.inbox .popmenu .pvtm {background: #fff;
position: fixed;
top: 50%;
margin-left: -50%;}


.inbox .popmenu .closebtn {
position: fixed;
top: 32%;
margin-left: 22%;
}
.inbox .reply {
background: #fff;
border-radius: 10px;
padding: 10px;
border: 1px solid #005e54;
border-left: 5px solid #005e54;
overflow: hidden;
}

.inbox .reply .name {
color: #008a7c;
font-weight: 600;
font-family: ROBOTO;
}

.inbox .reply .cancel {
float: right;
margin-top: -20px;
}

.inbox .reply .cancel i {
color: #008a7c;
font-size: 25px;
}



.inbox a.replyicon.replysend {
position: relative;
margin-left: -100px;
}

.inbox  a.replyicon.replyrec i {
color: #fff;
font-size: 15px;
background: #008a7c;
padding: 2px 5px;
border-radius: 50px;
}

a.replyicon.replyrec {
position: relative;
margin-right: -80px;
}
.inbox .chatarea .chats .mesage img {
max-width: 100%;
}

.inbox  .voice {
padding: 10px;
border: 1px solid #000;
margin-bottom: 5px;
background:#fff;
width:100%;
}

.inbox  .voice  i.fa.fa-microphone.fa-beat {
color: #000;
}

.inbox  .voice .top font.sec {
float: left;
}

.inbox  .voice .top 
span.txt i {
color: red;
font-size: 12px;
}

.inbox  .voice .bottom font.lefticon {
float: left;
margin-top: 5px;
}

.inbox  .voice .top {
overflow: hidden;
}

.inbox  .voice .bottom {
overflow: hidden;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #eee;
}

.inbox  .voice .bottom font.lefticon i {
color: #008a7c;
font-size: 20px;
}

.inbox  .voice .bottom span.pause i {
color: red;
font-size: 27px;
}

.inbox  .voice .bottom span.senbtn i {
color: white;
}

.inbox  .voice .bottom span.senbtn {
float: right;
margin: 5px;
margin-top: -40px;
right: 30px;
background: #008a7c;
border-radius: 50px;
padding: 2px 5px;
border: 0px;
}

.inbox  .voice .top 
span.txt {
font-family: ROBOTO;
}
.inbox  .post-body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
width: 255px;
}

.inbox  .voice-body .voice-title {
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
color: #434344;
font-size: 25px;
font-weight: 500;
padding: 25px 5px;
background: #f2f3f5;
}

.inbox .voice-body {
border-radius: 15px;
border-top-left-radius: 3px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
}

.inbox .voice-body .voice-audio {
background: #e6e7e9;
position: relative;
padding: 35px 20px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}

.inbox  .voice-body .voice-audio .control {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 20px;
}

.inbox  .voice-body .voice-audio .control button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #F5F5F5;
width: 40px;
height: 40px;
border-radius: 50px;
-webkit-box-shadow: 0 1px 3px #716c6c;
box-shadow: 0 1px 3px #716c6c;
border: none;
}

.inbox  .voice-body .voice-audio .control #pause {
display: none;
}

.inbox  .voice-body .voice-audio .control .time {
-ms-flex-item-align: end;
align-self: flex-end;
font-weight: 500;
color: #fff;
}

.inbox .voice-body .voice-audio .control button svg {
fill: #4CAF50;
stroke: #4CAF50;
width: 20px;
height: 20px;
}

.inbox .voice-body .voice-audio .control button#play svg {
margin-left: 3px
}

.inbox  .voice-body .voice-audio .progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.inbox .voice-body .voice-audio progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.inbox .voice-body .voice-audio progress[value]::-webkit-progress-bar {
background-color: rgba(0, 0, 0, 0);
}

.inbox .voice-body .voice-audio progress[value]::-webkit-progress-value {
background: #128c7e;
-webkit-box-shadow: 2px 0px 10px #adadaf;
box-shadow: 2px 0px 10px #adadaf;
}

.inbox .sound-bars {
margin: 0 5px 15px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.inbox .sound-bars span {
display: inline-block;
height: 22px;
width: 4px;
margin-left: 2px;
border-radius: 50px;
background: #4080ff
}

.inbox  .sound-bars span:nth-child(1) {
height: 6px
}

.inbox  .sound-bars span:nth-child(2) {
height: 4px
}

.inbox  .sound-bars span:nth-child(3) {
height: 15px
}

.inbox  .sound-bars span:nth-child(5) {
height: 10px
}
.inbox progress.progress {
background: #075e54;
border-radius: 10px;
}
.inbox .chats::after {
content: "";
display: table;
clear: both;
}

.inbox .privatepost {
display: none;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.inbox .privatepost.active {
display: block;
opacity: 1;
}

.inbox #imageslct, .inbox #ossn_photo {
width: 100%;
padding: 5px;
margin-bottom: 5px;
margin-top: -5px;
outline: none;
border: 1px solid #E9EAED;
border-radius: 10px;
background: #fff;
}

.expired {
padding: 5px;
border: 2px solid red;
color: red;
border-radius: 5px;
margin-top: 10px;
}


/*CHATROOM.PHP*/


.chatrm .timing.rec.loadtime:after {
content: ""!important;
}
.chatrm .timing.sen.loadtime:before {
content: ""!important;
}
.chatrm .privsendingarea .box {
box-shadow: 0px 0px 5px 0px #b5b5b5;
display: flex;
border-radius: 10px;
}

.chatrm .privsendingarea .box .attachment {
padding: 10px;
margin-top: 3px;
margin-left: 5px;
}

.chatrm .privsendingarea .box textarea#inputtt {
padding-top: 10px;
flex: 1 1 auto;
font-size: 16px;
margin: 0;
min-width: 50px;
border: 0;
border-radius: 10px;
padding-left: 5px;
font-family: ROBOTO;
}

.chatrm .privsendingarea .box input#imageslct {
position: absolute;
height: 400px;
width: 400px;
left: -200px;
top: -200px;
background: transparent;
opacity: 0;
display: none;
}

.chatrm .privsendingarea .box i.fa.fa-paperclip {
color: #000000;
font-size: 24px;
}

.chatrm .privsendingarea .box .sendingbtn {
background: linear-gradient(160deg, black, white 170%);
border-radius: 50px;
padding: 10px 15px;
height: 50px;
border: 0px;
margin-top: 4px;
margin-right: 5px;
}
.chatrm .suser.rec {
margin-left: -50px;
margin-top: -5px;
}

.chatrm .suser img {
width: 35px;
height: 35px;
border-radius: 30px;
padding: 2px;
}

.chatrm  span.susername {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 65%;
font-family: ROBOTO;
font-size: 12px;
color: black;
}

.chatrm .suser.sen img {
border: 1px solid;
color: #e1ffc7;
}

.chatrm .suser {
position: absolute;
}

.chatrm .suser.sen {
right: -55px;
margin-top: -5px;
}

.chatrm .suser.rec img {
border: 1px solid;
color: #ffffff;
}

.chatrm .inbox .chatarea .chats .mesage.sen {
margin-right: 30px;
}

.chatrm .inbox .chatarea .chats .mesage.rece {
margin-left: 25px;
}
.chatrm .inbox  .ban {
padding: 10px;
text-align: center;
background: #fff;
border: 2px outset red;
}

.chatrm .inbox  .ban .toper {
font-size: 25px;
color: red;
font-weight: 600;
}

.chatrm .inbox  .ban .sec {
padding: 10px;
text-align: left;
border: 2px outset #f6f6f6;
font-weight: 600;
font-family: ROBOTO;
}

.chatrm .inbox  .ban .sec  li {
margin-top: 10px;
font-weight: 100;
}

.chatrm .inbox .joinarea {
padding: 20px;
background: #fff;
text-align: -webkit-center;
border: 1px solid;
}

.chatrm .inbox  .joinarea .topperaria {
margin-bottom: 20px;
font-weight: 600;
text-align: left;
font-family: ROBOTO;
}

.chatrm .inbox  .joinarea .btnaria {
padding: 10px;
border: 2px solid #eee;
font-weight: 600;
font-family: ROBOTO;
}

.chatrm .inbox .joinarea .btnaria button {
padding: 10px 20px;
font-weight: 600;
font-family: cursive;
}

.inbox .chatarea .chats  .msglog {
padding: 2px;
text-align: center;
float: left;
width: 100%;
margin: 15px 0px 15px 0px;
font-family: ROBOTO;
}

.inbox .chatarea .chats .msglog font {
background: #eee;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
}

/*CHATROOM/SETTINGS.PHP*/

.croomset .groupdetail .pic img {
width: 100%;
height:100%;
border: 3px solid #898989;
border-radius: 100px;
background: #898989;
}

.croomset .groupdetail {
background: #787878;
text-align: -webkit-center;
padding: 30px;
}

.croomset .groupdetail .name {
margin-top: 20px;
font-size: 20px;
color: #fff;
font-weight: 600;
}

.croomset .groupdetail .privacy {
font-size: 11px;
color: #fff;
font-weight: 600;
margin-top: 5px;
font-family: ROBOTO;
}

.croomset .groupdetail .privacy i {
font-size: 12px;
margin-right: 5px;
}

.croomset .groupdetail .postandmem ul {
list-style: none;
margin: 0!important;
padding: 0;
}

.croomset .groupdetail .postandmem li {
min-width: 65px;
color: #fff;
padding: 0 20px;
text-align: center;
display: inline-block;
text-transform: uppercase;
min-width: initial;
list-style: none;
}

.croomset .groupdetail .postandmem .snumber {
color: #fff;
font-size: 26px;
font-weight: 400;
line-height: 24px;
margin-bottom: 5px;
font-family: Poppins,Open sans,sans-serif;
font-size: 20px;
}

.croomset .groupdetail .postandmem h3.sdescription {
margin: 0;
padding: 0;
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 22px;
letter-spacing: 1px;
font-family: inherit;
}

.croomset .groupdetail 
.postandmem {
margin-top: 30px;
}

.croomset .cmenu {
margin-top: 10px;
background: #fff;
margin: 10px;
text-align: -webkit-center;
color: #9f9f9f;
border: 5px solid #f6f6f6;
border-radius: 5px;
}

.croomset .cmenu  i {
color: #868e96;
margin: 15px;
background: #f6f6f6;
border-radius: 50px;
padding: 5px 10px;
margin-right: 3px;
}

.croomset .umenu .umenulink span.umenuicon {
width: 32px;
height: 32px;
font-size: 14px;
line-height: 32px;
text-align: center;
display: inline-block;
font-family: "Font Awesome 5 Free"!important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 8px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
}

.croomset .umenu .umenulink span.umenuicon i {
font-size: 13px;
}

.croomset .umenu {
background: #fff;
margin: 15px;
padding: 15px;
}

.croomset .umenu .umenulink {
margin-top: 25px;
font-size: 13px;
text-transform: initial;
padding: 0;
color: #898989;
font-weight: 600;
font-family: inherit;
}

.croomset .detail {
background: #fff;
margin: 15px;
border-radius: 5px;
padding: 15px;
}

.croomset .acct label {
display: block;
color: #898989;
font-size: 13px;
font-weight: 600;
margin-bottom: 15px;
}

.croomset .acct  input[type="text"] {
width: 100%;
height: 40px;
color: #898989;
font-size: 13px;
padding: 8px 15px;
border: 1px solid #eee;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

.croomset .acct 
textarea {
width: 100%;
color: #898989;
font-size: 13px;
padding: 8px 15px;
overflow: hidden;
overflow-wrap: break-word;
height: 150px;
border: 1px solid #eee;
}

.croomset .acct 
input#save {
background: #4fc1e9;
color: #fff;
width: 100%;
height: 55px;
padding: 0;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
border: none;
}
.croomset #umenu:target{
display:block!important;
}
.croomset .acct .settings {background: #fff;margin: 15px;border-radius: 5px;padding: 15px;}

.croomset .acct .settings fieldset.cprivacy {
padding: 25px;
margin-bottom: 35px;
border: 1px solid #eee;
}

.croomset .acct .settings fieldset.cprivacy legend {
padding: 0 15px;
font-size: 14px;
font-weight: 600;
color: #18b8ea;
border: 0;
}

.croomset .acct .settings fieldset.cprivacy .radio {
width: initial;
height: initial;
}

.croomset .acct .settings fieldset.cprivacy .radio label {
display: block;
color: #898989;
font-size: 13px;
font-weight: 600;
margin-bottom: 13px;
font-family: inherit;
}

.croomset .acct .settings fieldset.cprivacy .radio label input#group-status-public {
vertical-align: middle;
margin-right: 5px;
border: 1px solid #eee;
opacity: 1;
width: initial;
height: initial;
position: relative;
}


.croomset .acct .settings fieldset.cprivacy ul#public-group-description {
padding-left: 35px;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #f6f6f6;
}

.croomset .acct .photo {
background: #fff;
margin: 15px;
border-radius: 5px;
padding: 15px;
}

.croomset .acct .photo-avatar {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
margin-top: -80px;
}

.croomset .acct .photo-avatar p {
color: #777;
font-size: 14px;
line-height: 22px;
margin-bottom: 25px;
text-align: center;
margin-top: 80px;
}

.croomset .acct .photo-avatar .bp-avatar-nav {
background: 0 0;
clear: both;
margin: 10px 0;
overflow: hidden;
border-bottom: 1px solid #eee;
}

.croomset .acct .photo-avatar .bp-avatar-nav ul.avatar-nav-items {
margin: 0;
padding: 0;
list-style: none;
}

.croomset .acct .photo-avatar .bp-avatar-nav li#bp-avatar-upload {
border: 1px solid #ccc;
border-bottom-color: #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-bottom: -1px;
background-color: #eee;
border: 1px solid #eee;
float: left!important;
margin: 0;
list-style: none;
}

.croomset .acct .photo-avatar .bp-avatar-nav li#bp-avatar-upload a {
background: 0 0;
color: inherit;
font-weight: 700;
opacity: .8;
outline: 0;
color: #7f7f7f;
font-size: 13px;
font-weight: 600;
color: #4e4f50;
font-weight: 600;
display: block;
padding: 5px 10px;
text-decoration: none;
}

.croomset .acct .photo-avatar .bp-avatar-nav  li#bp-avatar-delete {
float: left!important;
margin: 0;
list-style: none;
}

.croomset .acct .photo-avatar a.bp-avatar-nav-item {
color: #7f7f7f;
font-size: 13px;
font-weight: 600;
display: block;
padding: 5px 10px;
text-decoration: none;
}

.croomset .acct .photo-avatar .bp-avatar div#bp-upload-ui {
background: 0 0;
}

.croomset .acct .photo-avatar .bp-avatar  div#drag-drop-area {
border: 4px dashed #e0dede;
height: 200px;
}

.croomset .acct .photo-avatar  p.drag-drop-info {
margin-top: 0;
}

.croomset .acct .photo-avatar label.bp-screen-reader-text {
display: none!important;
}

.croomset .acct .photo-avatar input#bp-browse-button {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border: none;
color: #fff;
width: initial;
font-size: 12px;
margin: 5px auto 0;
font-weight: 600;
line-height: 20px;
padding: 10px 25px;
letter-spacing: .03em;
background-color: #809fae;
text-transform: uppercase;
}


.croomset .drag-drop-inside p {
display: none;
}
.croomset  .drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
display: block;
}

.croomset .acct .photo-avatar .bp-avatar-status {
clear: both;
margin: 1em 0;
}

.croomset .acct .photo-avatar p.warning {
border: none;
color: #8a8a8a;
padding: 12px 25px;
background-color: #f6f6f6;
border-left: 5px solid #809fae;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
font-family: inherit;
text-align: left;
}
.croomset .acct .sendinvites {
margin: 15px;
border-radius: 5px;
}

.croomset .acct .sendinvites div#invite-list {
margin-bottom: 15px!important;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
background-color: #fff;
}

.croomset .acct .sendinvites img.userindp {
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
vertical-align: middle;
display: inline-block;
margin-right: 12px;
width: 35px;
height: 35px;
}

.croomset .acct .sendinvites .list-title {
color: #969696;
font-size: 13px;
font-weight: 600;
padding: 15px 25px;
border-bottom: 1px solid #f6f6f6;
}

.croomset .acct .sendinvites .list-title i {
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
width: 35px;
height: 35px;
font-size: 13px;
margin-right: 12px;
line-height: 35px;
text-align: center;
background-color: #f5f5f5;
color: #969696;
}

.croomset .acct .sendinvites .left-menu ul {
padding: 12px 25px;
margin: 0;
list-style: none;
}

.croomset .acct .sendinvites .left-menu li {
padding: 12px 0;
}

.croomset .acct .sendinvites label.bass-cs-checkbox-field {
padding-left: 35px;    
cursor: pointer;
position: relative;
}

.croomset .acct .sendinvites input.inviteinput {
opacity: 0;
z-index: -1;
position: absolute!important;
}

.croomset .acct .sendinvites .bass_field_indication {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
top: 6px;
width: 22px;
height: 22px;
left: 0;
width: 20px;
height: 20px;
position: absolute;
background: 0 0;
border: 1px solid #d8d8d8;
}

.croomset .acct .sendinvites .bass_field_indication:after {
top: 2px;
left: 6px;
width: 6px;
height: 11px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border: solid #a09e9e;
border-width: 0 2px 2px 0;
box-sizing: border-box;
position: absolute;
content: '';
display: none;
}

.croomset .acct .sendinvites  .bass-cs-checkbox-field input:checked~.bass_field_indication:after {
display: block;
}

.croomset .acct .sendinvites div#message {
background: #fff;
border-left: 6px solid #9e9e9e;
margin-bottom: 15px!important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 15px 25px;
}

.croomset .acct .sendinvites div#message p {
margin: 0;
padding: 0;
color: #898989;
font-size: 13px;
font-weight: 600;
line-height: 28px;
}
.croomset .acct  .deletec {
background: #fff;
margin: 15px;
padding: 15px;
border-radius: 5px;
}

.croomset .acct .bass-group-settings-tab.bass-delete-group-tab div#message {
border-left: 6px solid #f44336;
background-color: #f9f9f9;
margin-bottom: 15px!important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 15px 25px;
}

.croomset .acct .bass-group-settings-tab.bass-delete-group-tab div#message p {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
margin: 0;
padding: 0;
color: #898989;
font-size: 13px;
font-weight: 600;
line-height: 28px;
}


.croomset .acct .bass-group-settings-tab.bass-delete-group-tab input#delete-group-button {
border: none;
color: #fff;
font-size: 12px;
margin-top: 5px;
font-weight: 600;
line-height: 18px;
padding: 12px 25px;
letter-spacing: .03em;
background-color: #f8483e;
text-transform: uppercase;
width: 100%;
height: 55px;
padding: 0;
background: #4fc1e9;
color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
font-family: 'Open Sans',sans-serif;
}
.croomset .acct .members {
margin: 15px;
}

.croomset .acct .members h3.section-header {
color: #777;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
margin: 0;
padding: 0;
line-height: 24px;
letter-spacing: initial;
}

.croomset .acct .members  h3.section-header i {
background-color: #ff5c50;
width: 35px;
height: 35px;
color: #fff;
line-height: 35px;
margin-right: 10px;
text-align: center;
vertical-align: middle;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

.croomset .acct .members  .item-list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 10px;
}

.croomset .acct .members  li.lists {
margin-bottom: 15px!important;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
width: 100%;
padding: 25px;
display: table;
margin-bottom: 20px;
background-color: #fff;
margin: 0;
list-style: none;
}

.croomset .acct .members  .item-avatar {
margin-right: 15px;
display: inline-block;
vertical-align: middle;
}

.croomset .acct .members  .item-avatar img {padding: 0px!important;margin: 0px!important;border-radius: 100%;-webkit-border-radius: 100%!important;-moz-border-radius: 100%!important;-ms-border-radius: 100%!;-o-border-radius: 100%!important;width: 45px;height: 45px;color: #898989;font-size: 8px;display: block;opacity: 1;transition: opacity .3s;}

.croomset .acct .members  .item {
display: inline-block;
vertical-align: middle;
width: calc(100% - 60px);
}

.croomset .acct .members  .item-title a {
color: #7c838a;
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
}

.croomset .acct .members 
p.joined.item-meta {
margin: 0;
color: #969696;
font-size: 10px;
margin-top: 5px;
font-weight: 600;
display: inline-block;
letter-spacing: .05em;
text-transform: uppercase;
}

.croomset .acct .members .action a {
padding: 0;
margin: 5px;
display: inline-block;
border: none;
background: 0 0;
}

.croomset .acct .members .action i {
margin: 0;
padding: 0;
width: 35px;
height: 35px;
color: #7c838a;
font-size: 14px;
line-height: 35px;
text-align: center;
background-color: #eee;
position: initial;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
}

.croomset .acct .members  div#message {background: #fff;border-left: 6px solid #9e9e9e;margin-bottom: 15px!important;-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;padding: 15px 25px;margin-top: 10px;}


.croomset .acct .members div#message p {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
margin: 0;
padding: 0;
color: #898989;
font-size: 13px;
font-weight: 600;
line-height: 28px;
}

.croomset .acct .members .action {
float: none;
display: block;
margin-top: 25px;
padding-top: 20px;
text-align: center;
border-top: 1px solid #f6f6f6;
vertical-align: middle;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
border-radius: 50px;
}
.croomset .acct .members .item span.bannedlog {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
color: #fff;
font-size: 10px;
font-weight: 100;
margin-left: 3px;
padding: 5px 8px 3px;
display: inline-block;
background-color: #f44336;
text-transform: uppercase;
font-family: inherit;
}
.croomset .ban {
padding: 10px;
text-align: center;
background: #fff;
border: 2px outset red;
}

.croomset .ban .toper {
font-size: 25px;
color: red;
font-weight: 600;
}

.croomset .ban .sec {
padding: 10px;
text-align: left;
border: 2px outset #f6f6f6;
font-weight: 600;
font-family: ROBOTO;
}

.croomset .ban .sec  li {
margin-top: 10px;
font-weight: 100;
}
.croomset .joinarea {
padding: 20px;
background: #fff;
text-align: -webkit-center;
border: 1px solid;
}

.croomset .joinarea .topperaria {
margin-bottom: 20px;
font-weight: 600;
text-align: left;
font-family: ROBOTO;
}

.croomset .joinarea .btnaria {
padding: 10px;
border: 2px solid #eee;
font-weight: 600;
font-family: ROBOTO;
}

.croomset .joinarea .btnaria button {
padding: 10px 20px;
font-weight: 600;
font-family: cursive;
}

.croomset .groupdetail .des {
font-size: 13px;
color: #fff;
font-weight: 600;
font-family: cursive;
padding: 5px;
margin: 5px;
border-radius: 5px;
margin-bottom: 10px;
font-weight: lighter;
}

#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;
}

.inbox .chatarea .chats .timing.sen .resend-button button {
background: red;
color: #fff;
margin-left: 10px;
border-radius: 5px;
border-color: red;
padding: 3px 10px;
font-weight: 600;
}
.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;
}
.inbox .voicefail {
padding: 25px;
position: fixed;
bottom: 0px;
background: #ffffffd1;
text-align: center;
width: 100%;
left: 0px;
border: 1px solid #000;
font-family: ROBOTO;
overflow: hidden;
border-top: 5px solid black;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

.inbox .voicefail .icon i {
color: red;
font-size: 40px;
}

.inbox .voicefail .centertxt {
color: red;
font-weight: 600;
font-size: 15px;
}

.inbox .voicefail .closer {
float: right;
margin-bottom: 10px;
border: 2px solid #000;
padding: 3px 8px;
border-radius: 50px;
position: relative;
top: -10px;
left: 15px;
}

.inbox .voicefail .closer i {
color: #000;
font-size: 15px;
}

.inbox .voicefail .icon {width: 100%;}
.storyshow .titlestory {
position: absolute;
text-align: center;
width: 100%;
margin-top: -50px;
padding: 10px;
background: #0000009c;
color: #fff;
font-weight: 600;
}

.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_notifications .user_notificationstitle {
padding: 15px;
border-bottom: #a1a1a1 1px solid;
border-radius: 10px 10px 0px 0px;
}

.user_notifications {
border-radius: 10px;
background: #fff;
padding: 10px 0px;
}

.user_notifications .datevise {
background: #fff;
border-bottom: 1px solid #dbdbdb;
margin: 15px 10px;
margin-left: 45px;
}

.user_notifications .datevise .textdate {
position: absolute;
background: #fff;
padding: 5px 5px;
margin-top: -15px;
margin-left: -20px;
color: #000;
font-weight: 700;
}

.user_notifications .user_notification {
padding: 10px;
overflow:hidden;
}

.user_notifications .user_notification .user_avatar img {
width: 55px;
height: 55px;
border-radius: 5px;
}

.user_notifications .user_notification .notification_image .absolute_div img {
width: 20px;
background: #fff;
border-radius: 100%;
}

.user_notifications .user_notification .seen {
width: 25px;
padding-top: 18px;
float:left;
}

.user_notifications .user_notification .user_avatar {
width: 61px;
margin-top: 0px;
float:left;
}

.user_notifications .user_notification .seen i {
color: #ff1493;
}

.user_notifications .user_notification .otherinfo .notification_date {
color: #fff;
background: #e91e63;
padding: 2px 5px;
border-radius: 5px;
font-size: 10px;  
}

.user_notifications .user_notification .otherinfo {
word-break: break-word;
width: 57%;
float:left;
}

.user_notifications .user_notification .otherinfo .user_name {
float: left;
color: #000;
font-weight: 900;
margin-right: 10px;
margin-bottom: -10px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
max-width: 60%;
}

.user_notifications .user_notification .notification_image .bannering_image img {
width: 50px;
height: 50px;
border-radius: 5px;
}

.user_notifications .user_notification  .notification_image .absolute_div {
position: absolute;
margin-top: -20px;
margin-left: -5px;
border-radius: 100%;
border: 2px solid #fff;
}

.user_notifications .user_notification .otherinfo .notification_for {
font-size: 10px;
text-transform: uppercase;
}

.user_notifications .user_notification .otherinfo .notification_text {
font-weight: 700;
font-variant: petite-caps; 
margin: 4px 0px;
}

.user_notifications .user_notification .notification_image {
float:right;
}

.user_notifications .notifications_links {
padding: 20px;
overflow: hidden;
}

.user_notifications .notifications_links .notifications_link {
padding: 8px 10px;
float: left;
font-weight: 700;
border-radius: 5px;
width: 50%;
text-align: -webkit-center;
}

.user_notifications .notifications_links .notifications_link.active {
background: aqua;
}

.user_notifications .notifications_links  .notfication_count {
float: right;
background: #9d00ff;
margin-left: -15px;
border-radius: 5px;
padding: 0px 5px;
color: #fff;
font-family: system-ui;
border: 1px #fff;
}

.user_notifications .dbig-ntitile .big-ntitile {
margin: 0px 10px;
font-size: 20px;
font-weight: 900;
border-bottom: 2px solid #000;
padding: 5px 10px;
}

.user_notifications 
.dbig-ntitile {
margin: 2px;
margin-bottom: 30px;
text-align: -webkit-center;
}

.user_messages {
background: url("../../icons/inbox_back.jpg");
border-radius: 10px;
background-size:100%;
}

.user_messages .user_chat_messages {
background: #fff;
background-size: 100% 100%;
border-radius: 15px;
overflow: hidden;
position: relative;
z-index: 5;
}

.user_messages .user_messages_filters {
display: flex;
flex-direction: row;
padding: 10px;
margin-bottom: 10px;
}

.user_messages .user_message_filter {
color: #ebebeb;
padding: 6px 8px;
width: 25%;
border-radius: 5px;
text-align: -webkit-center;
font-weight: 900;
font-size: 100%;
}

.user_messages .user_message_filter.actvefilter {
background: #fff;
color: #00b5ff;
}

.user_messages .messages_bar {
padding: 20px;
overflow: hidden;
}

.user_messages .messages_bar .for_bar {
float: left;
font-size: 25px;
font-weight: 700;
color: #fff;
margin-top: 10px;
}

.user_messages .messages_bar label.search_label {
float: right;
margin-right: 10px;
margin-top: 15px;
}


.user_messages .messages_bar label.search_label i {
font-size: 20px;
color: #fff;
}

.user_messages .messages_bar .search_back .search_div {
margin-top: 50px;
margin-bottom: -30px;
}

.user_messages .messages_bar .search_back .search_div input[type=text] {
width: 100%!important;
padding: 15px 10px;
margin-bottom: 5px;
margin-top: 5px;
background: #ffff;
border-radius: 5px;
border: 2px solid #fff;
padding-right: 50px;
color: #000;
font-weight: 800;
}

.user_messages .messages_bar .search_back .search_div button.btn-searchsubmit {
position: absolute;
right: 10px;
margin-top: 5px;
padding: 14px 15px;
background: #000;
border-radius: 5px;
color: #fff;
border: 1px solid #fff;
font-size: 15px;
}

.user_messages .messages_bar .search_back {
margin: 0px -20px;
padding: 10px;
display: none;
}

.user_messages .user-message .messanger_image img {
width: 60px;
height: 60px;
border-radius: 50px;
border: 1px solid #aaa;
/* Set your default height for the image */
/* Add a smooth transition effect */
}

.user_messages .user-message {
padding: 15px;
overflow: hidden;
border-bottom: 1px solid #aaa;
}

.user_messages .messages_bar .search_input:checked + .search_label + .search_back{
display: block;
animation: showHide 0.3s ease-in-out;
}

.user_messages .messages_bar .search_input:checked + .search_label .fi.fi-rr-cross{display: contents!important;}

.user_messages .messages_bar .search_input:checked + .search_label .fi.fi-rr-search {
display: none;
}

.user_messages .user-message .messanger_image {
float: left;
width: 70px;
}

.user_messages .user-message .other_messanger .messanger_name {
color: #000;
font-weight: 500;
font-size: 17px;
margin-top: 5px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 75px;
}

.user_messages .user-message .other_messanger .message_time {
float: right;
margin-top: -50px;
color: #aaa;
font-family: ROBOTO;
font-size: 12px;
}

.user_messages .user-message .other_messanger .messanger_count {
float: right;
margin-top: -30px;
margin-right: 5px;
background: #5479f2;
padding: 2px 6px;
color: #ffff;
border-radius: 5px;
font-family: ROBOTO;
}

.user_messages .user-message .other_messanger .messanger_message {    color: #989898;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;padding-right: 50px;}

.user_messages .user-message .other_messanger {
/* Adjust the line height as needed */
/* Set a minimum height for single-line text */
/* Allow the div to expand based on content */
overflow: hidden;
}

@keyframes pulse {  

to {
box-shadow: 0px 0px 1px 20px rgba(8,212,137,0);
}

}
.new_message {
position: fixed;
padding: 16px 22px;
background: #fb5aca;
color: #fff;
border-radius: 50px;
font-size: 20px;
right: 20px;
bottom: 20px;
z-index: 999;
box-shadow: 0px 0px 10px 0px #fb5aca;
animation: pulse 1.2s infinite cubic-bezier(0.6, 0, 0, 1);
}
.user_messages .footpattern {
padding: 30px 10px 10px 10px;
margin-bottom: 30px;
overflow: hidden;
background: linear-gradient(45deg, #000000bf, #ff0000bf);
margin-top: -20px;
border-radius: 0px 0px 15px 15px;
position: relative;
z-index: 3;
}

.user_messages .footpattern .totalresults {
background: black;
float: left;
padding: 3px 10px;
color: #fff;
font-weight: 600;
border-radius: 5px;
margin-top: 5px;
border: 2px outset #eee;
}

.user_messages .footpattern button.deletebtn {
padding: 8px 16px;
background: red;
color: #fff;
font-weight: 600;
border: 0px;
border-radius: 5px;
float: right;
}

.user_messages .footpattern button.seenbtn {
padding: 8px 16px;
background: blueviolet;
color: #fff;
font-weight: 600;
border: 0px;
border-radius: 5px;
float: right;
margin-right: 10px;
}

.user_messages .footpattern button:hover {
box-shadow: 0px 0px 10px 0px #aaa;
}
.user_messangers .topbar_messanger {
overflow: hidden;
background: linear-gradient(180deg, #004cff, #95b0f1 120%);
border-radius: 10px 10px 0px 0px;
color: #fff;
padding: 20px 5px;
padding-bottom: 5px;
}

.user_messangers .topbar_messanger .topbar_back {
float: left;
width: 15%;
font-size: 40px;
text-align: center;
}

.user_messanger input[type=checkbox]:checked + .user_message .user_message_links{
display: block!important;
}

.user_messangers .topbar_messanger .topbar_uname {
text-align: center;
float: left;
width: 70%;
margin-top: 4px;
word-wrap: break-word;
text-overflow: ellipsis;
letter-spacing: 0.3px;
overflow: hidden;
white-space: nowrap;
padding: 0px 15px;
}


.user_messangers .messanger_sendarea .new_voice_rec {
position: relative;
z-index: 2;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-end;
max-width: 100%;
min-height: 62px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
background-color: #f0f2f5;
border-left: #e9edef;
display:none;
}

.user_messangers .messanger_sendarea .new_voice_rec_box {
position: relative;
flex: 1;
width: 100%;
min-width: 0;
min-height: 52px;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea span.new_voice_rec_box_spam {
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea .new_voice_rec_box_spam_inside {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
pointer-events: auto;
}

.user_messangers .messanger_sendarea .new_voice_rec_box_spam_inside_flex {
width: 100%;
max-width: 417px;
display: flex;
align-items: center;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea button.new_voice_rec_box_dlt_btn {
height: 35px;
width: 35px;
color: #667781;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
cursor: pointer;
background: none;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea svg.new_voice_rec_box_dlt_btn_svg {
position: relative;
width: 16px;
display: block;
pointer-events: none;
}

.user_messangers .messanger_sendarea .new_voice_rec_time_and_wave {
height: 46px;
flex-shrink: 1;
display: flex;
align-items: center;
flex-basis: 0px;
position: relative;
flex-grow: 1;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea .new_voice_rec_time_and_wave_spn_flex {
bottom: 0;
top: 0;
right: 0;
display: flex;
align-items: center;
left: 0;
margin-left: 12px;
position: absolute;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea .new_voice_rec_timer {
min-width: 2.25em;
padding: 0;
margin: 0;
font: inherit;
font-size: 2rem;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea .new_voice_rec__wave_flex {
height: 28px;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
margin-left: 4px;
flex-shrink: 1;
margin-right: 10px;
display: flex;
flex-basis: 0px;
flex-grow: 1;
}

.user_messangers .messanger_sendarea .new_voice_rec__wave_flex_inside {
position: relative;
flex-grow: 1;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea .new_voice_rec_pause_start_btns {
display: flex;
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
margin-right: 12px;
}

.user_messangers .messanger_sendarea button.new_voice_rec_pause_start_btn {
width: 32px;
height: 32px;
color: #fb3330;
position: relative;
padding: 0;
cursor: pointer;
background: none;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea .new_voice_rec_pause_start_btn_pause {
width: 100%;
height: 100%;
top: 0;
transform: scale(1);
left: 0;
position: absolute;
transition: transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .messanger_sendarea .new_voice_rec_pause_start_btn_start {
width: 100%;
height: 100%;
top: 0;
transform: scale(1);
left: 0;
position: absolute;
transition: transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
display:none;
}

.user_messangers .messanger_sendarea button.new_voice_rec_send_btn {
height: 35px;
width: 35px;
min-width: 35px;
color: #5878f7;
padding: 0;
cursor: pointer;
background: #5878f7;
border: 0;
outline: none;
border-radius: 5px;
}

.user_messangers .messanger_sendarea span.new_voice_rec_time_and_wave_spn {
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: none;
}

.user_messangers .topbar_messanger .topbar_menu {font-size: 25px;margin-top: 10px;width: 100%;text-align: center;}

.user_messangers .topbar_messanger .topbar_uname font.uname_messanger {
font-size: 22px;
font-weight: 600;
border-bottom: 1px solid;
}

.user_messangers .ustatus_messanger {
background: #7d98d7;
padding: 10px 10px;
padding-bottom: 50px;
text-align: center;
border-radius: 0px 0px 25px 25px;
color: #fff;
font-weight: 700;
font-variant-caps: petite-caps;
}

.user_messangers 
.user_messanger {
background: #00000075;
padding: 15px;
border-radius: 25px 25px 0px 0px;
padding-top: 25px;
margin-top: -40px;
overflow-x: hidden;
width: 100%;
height: calc(90vh - 230px);
position: relative;
}

.user_messanger .user_message {
margin-bottom: 34px;
padding: 15px;
max-width: 70%;
clear: both;
display: block;
font-weight: inherit;
}

.user_messanger .user_message.sen {
background: #5878f7;
color: #fff;
float: right;
border-radius: 10px 10px 0px 10px;
margin-right: 20px;
position: relative;
margin-bottom: 34px;
padding: 15px;
max-width: 70%;
clear: both;
font-weight: inherit;
}

.user_messanger .user_message.rec {
background: #ebebeb;
border-radius: 10px 10px 10px 0px;
float: left;
position: relative;
margin-bottom: 34px;
padding: 15px;
max-width: 70%;
clear: both;
font-weight: inherit;
}

.user_messanger .user_message_links {
position: absolute;
margin-top: 15px;
display:none;
width: 110px;
}

.user_messanger .user_message.sen .user_message_links div {
float: left;
}

.user_messanger .user_message.rec .user_message_links div {
float: right;
}

.user_messanger .user_message.sen .user_message_links {
right: -25px;
color: #fff;
}

.user_messanger .user_message.rec .user_message_links {
left: -5px;
color:#fff;
}

.user_messanger .user_message.sen .message_menu {
margin-top: -3px;
font-size: 20px;
float:left;
}

.user_messanger .user_message.rec .message_menu {
margin-top: -3px;
font-size: 20px;
float:right;
}

.user_messanger .user_message.sen span.dotclum {
float: left;
margin-left: 10px;
margin-right: 10px;
font-weight: 600;
}

.user_messanger .user_message.rec span.dotclum {
float: right;
margin-left: 10px;
margin-right: 10px;
font-weight: 600;
}

.user_messangers .topbar_messanger .topbar_uname span.date\&time {
display: block;
font-size: 12px;
color: #eee;
margin-top: 2px;
font-weight: 400;
font-variant: all-small-caps;
}

.user_messangers 
.messanger_sendarea {
background: linear-gradient(264deg, white, #ffffff87 350%);
border-top: 1px dotted #333;
padding: 10px;
border-radius: 0px 0px 10px 10px;
}

.user_messangers 
.messanger_sendarea .messanger_form {
background: #e3e8fd;
display: flex;
flex-direction: row;
border-radius: 5px;
align-content: space-around;
justify-content: space-between;
}

.user_messangers .messanger_sendarea .messanger_form .other_links {
margin: 10px;
background: #5878f7;
color: #fff;
padding: 4px 7px;
border-radius: 5px;
width: 28px;
height: 30px;
margin-top: 15px;
margin-right: 5px;
}

.user_messangers .messanger_sendarea .messanger_form 
button.messanger_btnarea {
margin: 10px;
background: #5878f7;
color: #fff;
padding: 1px 10px;
border-radius: 5px;
border: 0px;
font-size: 20px;
display: none;
}

.user_messangers .messanger_sendarea .messanger_form 
.messanger_emoji {
margin: 10px;
margin-top: 15px;
color: #5d5d5d;
border-radius: 5px;
font-size: 20px;
width: 35px;
}

.user_messangers .messanger_sendarea .messanger_form 
textarea#messanger_textarea {
flex: auto;
margin: 5px;
border: 0px;
padding: 10px;
height: 50px;
background: #e3e8fd;
}

.user_messangers .messanger_sendarea .messanger_form textarea#messanger_textarea::-webkit-input-placeholder {
padding-top: 5px;
}

.user_messangers .messanger_sendarea .messanger_form 
textarea#messanger_textarea:focus {
outline: none;
border: 1px solid #5878f7!important;
}
.user_messanger::-webkit-scrollbar {

-webkit-appearance: none;
width: 5px;


}
.user_messanger::-webkit-scrollbar-thumb {
background-color: #7d98d7;
}
@keyframes showHide {
0% { display: none; opacity: 0; }
1% { display: block; opacity: 0; }
100% { display: block; opacity: 1; }
}

.user_messangers .messanger_sendarea .messanger_form #messanger_textarea:focus + .messanger_btnarea {
display:block;
animation: showHide 0.3s ease-in-out;
}

.user_messangers .messanger_sendarea .messanger_form #messanger_textarea:focus + .messanger_btnarea + .messanger_emoji , .user_messangers .messanger_sendarea .messanger_form button.messanger_btnarea:hover + .messanger_emoji,
.user_messangers .messanger_sendarea .messanger_form button.messanger_btnarea:focus + .messanger_emoji{
display:none;
}

.user_messangers .messanger_sendarea .messanger_form button.messanger_btnarea:hover,
.user_messangers .messanger_sendarea .messanger_form button.messanger_btnarea:focus {
display: block!important;
}
.user_messangers .messanger_sendarea .messanger_form .other_box {
position: fixed;
background: #fff;
width: 100%;
padding: 10px;
left: 0px;
border: 1px solid #2663f0;
bottom: 0px;
border-radius: 10px 10px 0px 0px;
display: none;
}

.user_messangers .messanger_sendarea .messanger_form .other_box .div-detail {
padding: 10px;
border-bottom: 1px solid;
text-align: center;
font-weight: 700;
font-size: 20px;
}

.user_messangers .messanger_sendarea .messanger_form .other_box .other_box_links {
overflow: hidden;
margin-top: 10px;
}

.user_messangers .messanger_sendarea .messanger_form .other_box .other_box_links .other_box_link {
float: left;
background: #eee;
margin: 5%;
text-align: center;
padding: 10px;
border-radius: 5px;
border: 1px solid #673AB7;
width: 40%;
}

.user_messangers .messanger_sendarea .messanger_form .other_box .other_box_links .other_box_link .lnk_txt {
margin-top: 10px;
font-weight: 600;
}

.user_messangers .messanger_sendarea .messanger_form .other_box .other_box_links .other_box_link .lnk_icon {
font-size: 20px;
}

.user_messangers .messanger_sendarea .messanger_form .other_box .cancel_option {
color: #000;
position: absolute;
right: 15px;
font-size: 17px;
margin-top: -50px;
}

.user_messangers .messanger_sendarea .messanger_form input#openingotherbox:checked + .other_links + .other_box {
display: block!important;
animation: showHide 0.3s ease-in-out;
}
.user_messanger .user_message .user_message_links input[type=checkbox]:checked + .message_menu + .menuopen {
display: block;
animation: showHide 0.3s ease-in-out;
}
.user_messanger .user_message .user_message_links  .menuopen div{
float:none;
}
.user_messanger .user_message .user_message_voice .voice_lines {
float: left;
overflow: hidden;
padding: 10px 0px;
}

.user_messanger .user_message .user_message_voice .voice_time {
float: left;
margin-left: 10px;
margin-top: 10px;
font-weight: 600;
}

.user_messanger .user_message .user_message_voice {overflow: hidden;margin: -10px;margin-top: 2px;margin-right: 0px;}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line {
float: left;
width: 3px;
border-radius: 50px;
height: 20px;
margin-right: 4px;
margin-top: 2px;
}

.user_messanger .user_message .user_message_voice .voice_play {
float: left;
margin-left: 10px;
padding: 8px 13px;
padding-top: 9px;
border-radius: 50px;
font-size: 17px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(1) {
height: 10px;
margin-top: 7px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(2) {
height: 18px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(3) {
height: 40px;
margin-top: -10px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(4) {
height: 17px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(5) {
height: 30px;
margin-top: -6px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(6) {
height: 16px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(7) {
height: 40px;
margin-top: -10px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(8) {
height: 30px;
margin-top: -4px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(9) {
height: 16px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(10) {
height: 25px;
margin-top: -3px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(11) {
height: 40px;
margin-top: -10px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(12) {
height: 28px;
margin-top: -5px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(13) {
height: 15px;
margin-top: 3px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(14) {
height: 25px;
margin-top: -3px;
}

.user_messanger .user_message .user_message_voice .voice_lines .voice_line:nth-child(15) {
height: 16px;
}

.user_messanger .user_message.rec .user_message_voice .voice_play {
background: #5878f7;
color: #fff;
}

.user_messanger .user_message.sen .user_message_voice .voice_play {
background: #fff;
color: #5878f7;
}

.user_messanger .user_message.sen  .user_message_voice .voice_time {
color: #fff;
}

.user_messanger .user_message.rec .user_message_voice .voice_time {
color: #000;
}

.user_messanger .user_message.sen .user_message_voice .voice_lines .voice_line {
background: #fff;
}

.user_messanger .user_message.rec .user_message_voice .voice_lines .voice_line {
background: blue;
}
.user_messangers .back_image {
background: url("../../icons/conversation-back.jpg");
background-size: 100% 100%;
border-radius: 25px 25px 10px 10px;
}
.user_messanger .user_message .user_message_text {word-break: break-word;}

.user_messanger .user_message .user_message_text img {
max-width: 100%;
}
.user_messages .user-message .other_messanger .messanger_message img {
max-width: 30px;
max-height: 30px;
}
.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_story {
background: #000;
margin-top: -30px;
padding-top: 25px;
}

.user_story .stories_limit {
height: 5px;
display: flex;
position: relative;
}

.user_story .stories_user_info .user_avatr img {
width: 50px;
height: 50px;
border-radius: 50px;
}

.user_story .stories_user_info {
overflow: hidden;
margin-top: 25px;
padding: 10px;
position: relative;
background: #0000004f;
}

.user_story .stories_user_info .user_avatr {
float: left;
margin-right: 10px;
}

.user_story .stories_user_info .user_nm {
color: #fff;
font-weight: 900;
font-size: 16px;
margin-top: 2px;
}

.user_story .stori_image img {
width: 100%;
}

.user_story .stories_limit .stories_limit_lines {
height: 37px;
display: flex;
flex: 1 1 auto;
margin-top: -7px;
padding-top: 20px;
background: #0000004f;
width: 100%;
margin-right: 5px;
}

.user_story .stories_limit .stories_limit_line {
height: 5px;
transition-duration: 0.3s;
width: 100%;
border-radius: 100px;
will-change: width;
background: #fff;
margin-left: 5px;
}

.user_story .stories_user_info .stori_time {
color: #aaa;
float: left;
}

.user_story .stories_user_info .stories_actions {
float: right;
color: #fff;
font-size: 20px;
margin-top: -15px;
}

.user_story .stories_user_info .stories_actions div {
float: right;
margin-right: 35px;
font-size: 23px;
}

.user_story .stories_user_info .stories_actions div:first-child {
margin-right: 10px;
font-size: 20px;
}

.user_story 
.stori_footer .foot_stori_flex input.stori_type {
padding: 10px;
border-radius: 6px;
text-align: left;
height: 45px;
float: left;
background: #6a6a6a;
margin-left: 10px;
border: 0px;
font-weight: 600;
}
.user_story 
.stori_footer .foot_stori_flex img {
background: #fff;
border-radius: 100px;
width: 45px;
height: 45px;
margin-left: 10px;
animation: showHide 0.3s ease-in-out;
}

.user_story 
.stori_footer .foot_stori_flex {
padding: 13px 1px;
display: flex;
flex-direction: row;
overflow-x: scroll;
}

.user_story .stori_content .stori_msg {
background: #00000087;
padding: 10px 5px;
text-align: -webkit-center;
color: #fff;
font-weight: 500;
position: absolute;
width: 100%;
margin-top: -20%;
box-shadow: 0px 0px 5px 0px #fff;
}

.user_story 
.stori_footer .foot_stori_flex input.stori_type::placeholder {
color: #fff;
}
.user_story .stori_content {
position: relative; /* Add this to make the buttons position relative to this container */
text-align: -webkit-center;
}

.user_story .stori_content a.left_button_stori {
position: absolute;
background: #0000004f;
padding: 5px 10px;
color: #fff;
font-size: 35px;
border-radius: 0px 10px 10px 0px;
top: 50%;
transform: translateY(-50%);
left: 0;
}

.user_story .stori_content a.right_button_stori {
position: absolute;
background: #0000004f;
padding: 5px 10px;
color: #fff;
font-size: 35px;
border-radius: 10px 0px 0px 10px;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.user_story .stori_content .stori_video {
padding-bottom: 15%;
margin-top: 10%;
}
.user_story .stori_content .stori_bg {
position: relative;
width: 100%;
min-height: 300px; /* Adjust height as needed */
background-size: cover;
background-position: center;
margin-bottom: 20px; /* Adjust margin as needed */
display: flex;
justify-content: center;
align-items: center;
padding: 0px 50px;
}

.user_story .stori_content .stori_bg_text {
position: relative;
color: white; /* Text color */
font-size: 20px; /* Text size */
font-weight: bold; /* Text weight */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for better visibility */
text-align: center; /* Center the text */
word-break: break-word;
}
.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;}
.user_messages .empty_message .empty_message_pic img {
width: 100%;
height: 100%;
}

.user_messages .empty_message .empty_message_title {
padding: 0px 20px 20px 20px;
text-align: -webkit-center;
color: #188fff;
font-weight: 800;
font-size: 20px;
}

.user_messages .empty_message {
border: 2px outset #188fff;
border-radius: 0px 0px 5px 5px;
}
.site-maintenance {
background: #fff;
border-radius: 15px;
border: 2px outset #a847b2;
margin-top: -20px;
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;
}
.user_notifications input#toggleCheckbox\ check:checked + .right-menu .menuopen {
display: block!important;
animation: showHide 0.3s ease-in-out;
}
.user_notifications .dbig-ntitile label.right-menu {
background: #000;
padding: 2px 10px;
color: #fff;
font-size: 20px;
border-radius: 5px;
float: right;
margin-left: 13%;
position: absolute;
}
.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;
}
.user_story .stori_footer  .myreactonstory img {
width: 30px;
margin-right: 5px;
float: left;
}

.user_story .stori_footer  .myreactonstory {
padding: 10px;
padding-left: 15px;
overflow: hidden;
}
.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);
}


.user_notifications .user_notification  .requests-btn {
overflow: hidden;
width: 100%;
padding: 10px 0px 10px 25px;
border-bottom: 1px solid #eeee;
}

.user_notifications .user_notification  .requests-btn button.reject-btn-req {
float: left!important;
background: #ff2264 !important;
}

.user_notifications .user_notification  .requests-btn button {
float: right;
background: #32a1fe;
color: #fff;
font-weight: 600;
padding: 3px 8px;
border: 0pc;
border-radius: 5px;
overflow: hidden;
}

.user_notifications .user_notification  .requests-btn button i {
float: left;
margin-right: 6px;
font-size: 13px;
margin-top: 2px;
}

.user_notifications .user_notification .requests-btn button.reject-btn-req i {
font-size: 10px;
margin-top: 4px;
}
.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;
}
.user_story .stori_content .stori_msg input.story-msg {
padding: 10px;
width: 100%;
background: #000;
border: 1px solid #eee;
color: #eee;
border-radius: 5px;
}

.user_story .stori_content .edit_buttons {
margin-top: 30px;
width: 100%;
overflow: hidden;
padding-top: 25px;
}

.user_story .stori_content .edit_buttons button.change-attach-btn-story {
float: left;
margin-left: 10px;
padding: 6px 10px;
background: #E91E63;
border: 1px solid #fff;
color: #fff;
font-weight: 500;
border-radius: 3px;
}

.user_story .stori_content .edit_buttons button.submit-btn-story {
float: right;
margin-right: 10px;
padding: 6px 14px;
background: #196af2;
border: 1px solid #fff;
color: #fff;
font-weight: 500;
border-radius: 2px;
}
.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_messages .user_chat_messages .messanger_name img, .user_messangers .topbar_messanger .topbar_uname img, .user_notifications .user_notification .otherinfo .user_name 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-info-message .user-dp-cover-message img {
width: 100%;
height: 200px;
filter: blur(2px);
-webkit-filter: blur(2px);
border-radius: 5px;
box-shadow: 0px 0px 5px 0px #000;
}

.user-info-message  .user-dp-message {
text-align: -webkit-center;
margin-top: -150px;
position: relative;
}

.user-info-message  .user-dp-message img {
width: 80px;
height: 80px;
border-radius: 100%;
border: 1px solid #eee;
}

.user-info-message .user-name-message font.user-name-message-font {
color: #fff;
font-weight: 700;
}

.user-info-message  .user-name-message {
position: relative;
text-align: -webkit-center;
margin-top: 10px;
}

.user-info-message .user-title-message {
position: relative;
text-align: -webkit-center;
margin-top: 7px;
}

.user-info-message .user-title-message font.user-title-message-font {
color: #fff;
font-weight: 600;
font-variant-caps: small-caps;
}

.user-info-message .user-links-message {
background: #fff;
width: 100%;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
padding: 20px 10px;
margin-top: 12px;
margin-bottom: 10px;
}

.user-info-message .user-links-message .user-link-message {
text-align: -webkit-center;
width: 60px;
margin-right: 10px;
}

.user-info-message .user-links-message .user-link-message .user-link-icon-message {
background: #eee;
height: 30px;
width: 30px;
border-radius: 100%;
padding: 5px 0px;
}

.user-info-message .user-links-message .user-link-message .user-link-name-message {
margin-top: 5px;
font-weight: 600;
font-size: 12px;
}

.user-info-message .user-dp-cover-message {
text-align: -webkit-center;
}

.user-info-message .user-cus-message {
padding: 5px;
background: #fff;
padding-top: 15px;
margin-top: -25px;
padding-bottom: 25px;
}

.user-info-message .user-cus-message .user-cus-add-message {
overflow: hidden;
padding: 15px;
border-bottom: 1px solid #eee;
}

.user-info-message .user-cus-message .user-cus-add-message .user-cus-message-icon {
float: left;
margin-right: 10px;
font-size: 15px;
}

.user-info-message .user-cus-message .user-cus--title-message {
padding: 10px;
font-weight: 600;
text-align: -webkit-center;
border-bottom: 1px solid #aaa;
margin-bottom: 20px;
margin-top: -30px;
}

.user-info-message .user-cus-message .user-cus--title-message font.user-cus-font-title-message {
border: 1px solid #6d6d6d;
padding: 5px 10px;
text-shadow: 0 0 black;
color: #6d6d6d;
position: relative;
top: 20px;
background: #fff;
border-radius: 50px;
}

.user-info-message .user-cus-message .user-cus-add-message:last-child {
border-bottom: 0px!important;
}

.user-info-message .user-cus-message .user-cus-add-message .user-cus-name-message {
font-weight: 700;
font-size: 15px;
}

.user-info-message .user-cus-message.last {
border-bottom: 2px solid;
border-radius: 0px 0px 10px 10px;
}

.user-info-message .user-cus-message .user-cus-add-message:hover {
background: #eee;
border-radius:5px
}
.usernickname {
background: #fff;
padding-top: 35px;
border-radius: 5px;
margin-top: -10px;
border-bottom: 2px solid #000;
border-radius: 0px 0px 10px 10px;
}

.usernickname .usernickname-text {
text-align: -webkit-center;
padding: 10px;
margin-top: -15px;
border-top: 1px solid #333;
margin-bottom: -35px;
padding-top: 20px;
height: 0px;
border-radius: 5px 5px 0px 0px;
}

.usernickname .usernickname-text font.usernickname-text-font {
font-weight: 800;
font-variant: small-caps;
border: 1px solid;
padding: 5px 15px;
border-radius: 50px;
font-size: 15px;
position: relative;
bottom: 33px;
background: #fff;
}

.usernickname .usernickname-select-action {
border-top: 0px;
padding: 10px;
padding-top: 40px;
padding-bottom: 25px;
}

.usernickname .usernickname-select-action .usernickname-select-name {
overflow: hidden;
margin-bottom: 10px;
width: 100%;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-avatar {
float: left;
margin-right: 2.5px;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-oldnick {
font-size: 18px;
font-weight: 700;
}
.usernickname .usernickname-select-action .usernickname-select-name .actions {
float: right;
margin-top: -35px;
}

.usernickname .usernickname-select-action .usernickname-select-name .actions .edit-btn, .usernickname .usernickname-select-action .usernickname-select-name .actions .delete-btn {
padding: 6px 17px;
background: linear-gradient(135deg,#4f46e5,#06b6d4);
border-radius: 5px;
cursor: pointer;
font-size: 13px;
text-align: center;
text-decoration: none;
display: inline-block;
margin-left: 10px;
}


.usernickname .usernickname-select-action .usernickname-select-name .actions .delete-btn {
background: linear-gradient(135deg,#ff1744,#d50000);
color: #fff;
}
.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-avatar img {
width: 50px;
height: 50px;
border: 1px solid #eee;
border-radius: 5px;
margin-right: 5px;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-newnick {
font-size: 12px;
opacity: 0.8;
margin-top: 5px;
}

.usernickname .usernickname-select-action .usernickname-select-name:last-child {
margin-bottom: 0px!important;
}
.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform {
animation: showHide 0.3s ease-in-out;
position: fixed;
background: #000000a3;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
overflow: hidden;
display: none;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform .usernickname-select-updateform-panel {
width: 250px;
background: #fff;
border-radius: 5px;
padding: 10px;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform .usernickname-select-updateform-panel-cancel {
float: right;
font-size: 20px;
margin-top: -5px;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform input.usernickname-select-updateform-panel-typearea-type {
width: 100%;
padding: 6px 10px;
border-radius: 2px;
border: 1px solid #aaa;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform .usernickname-select-updateform-panel-form {
margin-top: 30px;
padding: 10px;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform .usernickname-select-updateform-panel-button {
margin-top: 20px;
text-align: -webkit-center;
}

.usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform button.nicknameupdatebtn {
background: #3F51B5;
color: #fff;
border: 1px solid;
padding: 6px 28px;
border-radius: 5px;
font-weight: 800;
font-size: 12px;
}
.usernickname .usernickname-select-action input[type=checkbox]:checked + .usernickname-select-name .usernickname-select-updateform {
display: flex!important;
}
.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;
}
.user_medias {padding: 5%;overflow: hidden;}

.user_medias .user_media {
float: left;
padding: 5%;
width: 33.3%;
}

.user_medias .user_media img {
width: 75px;
height: 75px;
border-radius: 5px;
border: 2px solid #000;
padding: 1px;
}
.convers_search {
padding: 10px;
}

.convers_search .convers_search_inputs {
padding: 10px;
margin-top: 20px;
overflow: hidden;
}

.convers_search .convers_search_inputs input[type="search"] {
width: 85%;
padding: 7px;
border: 1px solid #000;
color: #000;
border-radius: 10px 0px 0px 10px;
float: left;
margin-right: -1px;
}

.convers_search .convers_search_inputs button {
width: 12%;
padding: 7px;
border: 1px solid #000;
color: #000000;
border-radius: 0px 10px 10px 0px;
border-left: 0px;
}
.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 .user_messages .user_message_filter.actvefilter {
background: #121212;
color: #ffffff;
}

div.content-darkmode .user_messages .user_chat_messages {
background: #121212;
}

div.content-darkmode .user_messages .user-message .other_messanger .messanger_name {
color: #fff;
}

div.content-darkmode .user_messages .user-message .messanger_image img {border: 1px solid #373737;}

div.content-darkmode .user_messages img[src="../icons/online_icon.gif"] {
background: #121212 !important;
}

div.content-darkmode .user_messages .user-message {
border: 1px solid #383838;
}

div.content-darkmode .user_messages .messages_bar .search_back .search_div input[type=text] {
background: #121212;
border: 2px solid #575757;
color: #fff;
}

div.content-darkmode .user_messages .messages_bar .search_back .search_div button.btn-searchsubmit {
border: 1px solid #575757;
}
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-darkmode .user_notifications {
background: #121212;
}

div.content-darkmode .user_notifications .notifications_links .notifications_link.active {
background: #808080;
color: #fff;
}

div.content-darkmode .user_notifications .notifications_links .notifications_link {
color: #fff;
}

div.content-darkmode .user_notifications .dbig-ntitile {
color: #dfdfd9;
}

div.content-darkmode .user_notifications .dbig-ntitile font.big-ntitile {
border-bottom: 1px solid #a6a6a6;
}

div.content-darkmode .user_notifications .datevise .textdate {
background: #121212;
color: #fff;
}

div.content-darkmode .user_notifications .datevise {
border-bottom: 1px solid #828282;
}

div.content-darkmode .user_notifications .user_notification .otherinfo .user_name {
color: #fff;
}

div.content-darkmode .user_notifications .user_notification .otherinfo .notification_text {
color: #dfdfdf;
}

div.content-darkmode .user_notifications .user_notification .otherinfo .notification_for {
color: #dcd9dc;
}
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;
}
.user_messages .user-message .other_messanger .user_message_text.deleted {
font-style: oblique;
color: #737373;
font-size: 12px;
}

.user_messages .user-message .other_messanger .user_message_text.deleted i {
font-size: 10px;
display: block;
float: left;
margin-right: 5px;
margin-top: 2px;
}
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-info-message .user-links-message {
background: #121212;
color: #eeeeee;
}

div.content-darkmode .user-info-message .user-cus-message {
background: #121212;
color: #d2dfdf;
}


div.content-darkmode .user-info-message .user-cus-message .user-cus--title-message font.user-cus-font-title-message {
background: #121212;
color: #919491;
}

div.content-darkmode .user-info-message .user-cus-message .user-cus-add-message {
color: #dfdfdf;
border-bottom: 2px solid #333737;
}

div.content-darkmode .user-info-message .user-links-message .user-link-message .user-link-name-message {
color: #b7b7b7;
}

div.content-darkmode .user-info-message .user-links-message .user-link-message .user-link-icon-message {
color: #eee;
background: #282828;
}

div.content-darkmode .user-info-message .user-cus-message.last {border-bottom: 2px solid #333737;;}

div.content-darkmode .user-info-message .user-cus-message .user-cus--title-message {
border-bottom: 1px solid #333737;
}

div.content-darkmode .user-info-message .user-dp-message img {
border: 1px solid #aaa;
}

div.content-darkmode .usernickname {
background: #121212;
}

div.content-darkmode .usernickname .usernickname-text font.usernickname-text-font {
background: #121212!important;
color: #dfdfd2;
border: 1px solid #2c2c2c !important;
}

div.content-darkmode .usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-avatar img {
border: 1px solid #282828;
}

div.content-darkmode .usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-newnick {
color: #a19fa1;
}

div.content-darkmode .usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform .usernickname-select-updateform-panel {
background: #121212;
}

div.content-darkmode .usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform input.usernickname-select-updateform-panel-typearea-type {
background: #3b3b3b;
color: #dfdfcc;
border: 1px solid #484848;
}

div.content-darkmode .usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform button.nicknameupdatebtn {
border: 1px solid #737baa;
}

div.content-darkmode .usernickname .usernickname-select-action .usernickname-select-name .usernickname-select-updateform .usernickname-select-updateform-panel-cancel {
color: #dfdfc6;
}

div.content-darkmode .usernickname .usernickname-select-action .usernickname-select-name {
color: #dfdfcc;
}

div.content-darkmode .user-info-message .user-cus-message .user-cus-add-message:hover {
background: #282828;
border-radius: 5px;
}

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 {padding: 16px 18px;border-bottom: 1px solid #e5e7eb;background: url("../../icons/inbox-wrapper-back.jpg");background-size: 100% 500%;}

.inbox-wrapper .inbox-topbar .inbox-left .inbox-title {
font-size: 17px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}

.inbox-wrapper .inbox-topbar .inbox-actions button {
border: none;
padding: 8px 14px;
font-size: 12px;
border-radius: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
}

.inbox-wrapper .inbox-topbar .inbox-actions button.btn-seen {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #fff;
}

.inbox-wrapper .inbox-topbar .inbox-actions button.btn-delete {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
}

/* 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: 60px;
text-align: right;
margin-top: 5px;
}

.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;
}
/* LEFT SIDE */
.inbox-wrapper .inbox-topbar .inbox-left {
display: flex;
align-items: center;
gap: 14px;
flex-direction: row;
margin-top: 5px;
}

/* SEARCH BOX */
.inbox-wrapper .inbox-topbar .inbox-search {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
min-width: 200px;
background: rgba(255,255,255,0.9);
border: 1px solid #e5e7eb;
border-radius: 12px;
transition: all 0.25s ease;
}

/* SEARCH ICON */
.inbox-wrapper .inbox-topbar .inbox-search i {
font-size: 14px;
color: #6366f1;
}

/* INPUT */
.inbox-wrapper .inbox-topbar .inbox-search input {
border: none;
outline: none;
background: transparent;
font-size: 12px;
font-weight: 600;
width: 100%;
color: #0f172a;
}

/* PLACEHOLDER */
.inbox-wrapper .inbox-topbar .inbox-search input::placeholder {
color: #94a3b8;
font-weight: 500;
}

/* 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;
}


.inbox-wrapper .inbox-topbar .inbox-actions {
float: right;
margin-top: -28px;
margin-bottom: 15px;
}
/* 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;
}

/* SEARCH BOX */
.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search {
background: rgba(2,6,23,0.9);
border-color: #1e293b;
}

.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search input {
color: #e5e7eb;
}

.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search input::placeholder {
color: #64748b;
}

.content-darkmode .inbox-wrapper .inbox-topbar .inbox-search:focus-within {
background: #020617;
border-color: #6366f1;
}

/* 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;
}
}