/* HTML: */
.uniloader {
width: 65px;
aspect-ratio: 1;
position: relative;
}
.uniloader:before,
.uniloader:after {
content: "";
position: absolute;
border-radius: 50px;
/* Default light mode color */
box-shadow: 0 0 0 3px inset #303f9f;
animation: l4 2.5s infinite;
}
.uniloader:after {
animation-delay: -1.25s;
}
.whatsapp-close {
top: auto !important;
}
/* Dark mode color */
@media (prefers-color-scheme: dark) {
.uniloader:before,
.uniloader:after {
box-shadow: 0 0 0 3px inset #fff;
}
}
@keyframes l4 {
0% {
inset: 0 35px 35px 0;
}
12.5% {
inset: 0 35px 0 0;
}
25% {
inset: 35px 35px 0 0;
}
37.5% {
inset: 35px 0 0 0;
}
50% {
inset: 35px 0 0 35px;
}
62.5% {
inset: 0 0 0 35px;
}
75% {
inset: 0 0 35px 35px;
}
87.5% {
inset: 0 0 35px 0;
}
100% {
inset: 0 35px 35px 0;
}
}
#loadMoreNtf {
display: block;
padding: 10px 20px;
margin: 15px auto;
background-color: #303f9f;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
#loadMoreNtf:hover {
opacity: 0.9;
}
.loading-image-placeholder {
display: inline-block;
background: linear-gradient(270deg, #f0f0f0, #e0e0e0, #f0f0f0);
background-size: 400% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.navbar-header {
position: relative;
}
.login-big fieldset *:not(.glogin-btn):not(.glogin-btn *) {
display: none;
}
.login-big.show-login fieldset *:not(.glogin-btn):not(.glogin-btn *) {
display: block;
}
.login-sm > *:not(.glogin-btn) {
display: none;
}
.login-sm.show-login input {
display: block;
margin: 10px auto;
}
.notif-details ol, .notif-details ul {
padding-left: 20px;
}
.notif-badge {
font-family: arial, sans-serif;
position: absolute;
z-index: 9;
top: 5px;
right: 5px;
background: red;
color: white;
font-size: 10px;
font-weight: bold;
border-radius: 50%;
padding: 0px 8px;
display: none; /* hidden when 0 */
}
@media only screen and (max-width: 767px) {
.notif-badge {
top: 5px;
right: 5px;
background: red;
color: white;
font-weight: bold;
border-radius: 50%;
padding: 0px 7px;
display: none; /* hidden when 0 */
}
}
.footer-area {
text-align: center;
}
tc-root {
position: relative;
z-index: 9999999 !important;
}
#ton-connect-button {
display: flex;
justify-content: right;
}
/* Dark mode */
.dark .payment-container {
background: #121212;
color: #f5f5f5;
}
.dark .payment-container .container {
background: #1e1e1e;
}
.dark .payment-container .durcard {
background: #333;
color: #ccc;
}
.dark .payment-container .durcard.active {
background: #303f9f;
color: white;
}
.dark .payment-container select {
background: #333;
color: white;
border: 1px solid #555;
}
.dark {
background-color: #222;
color: #ffffff;
}
.inline-tbot {
color: #303f9f !important;
}
.dark .inline-tbot {
color: yellow !important;
}
/* Wrap form in any parent with class .dark */
/* Example: OR */
.dark .wd-form-area {
color: #ffffff;
}
/* Inputs */
.dark .form-input,
.dark .wd-message {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
transition: 0.3s;
}
.dark .form-input::placeholder,
.dark .wd-message::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* Projects + Budgets items */
.dark .wd-project,
.dark .wd-budget {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: 0.3s;
}
.dark .wd-project:hover,
.dark .wd-budget:hover {
background: rgba(255, 255, 255, 0.12);
}
.dark .wd-project.active,
.dark .wd-budget.active {
background: #303f9f;
border-color: #303f9f;
color: #ffffff;
}
/* Titles */
.dark .form-title {
color: #dcdcdc;
}
/* Submit button */
.dark .wd-submit {
background: #303f9f;
color: #ffffff;
border-radius: 12px;
transition: 0.3s;
}
.dark .wd-submit:hover {
background: #3f51b5;
}
/* Loader (if any) */
.dark .wd-loader {
color: #ffffff;
}
/* Form container glass effect */
.dark .web-dev-form {
backdrop-filter: blur(15px);
border-radius: 16px;
padding: 20px 20px 70px;
transition: 0.3s;
}
.ft-payments {
display: inline-block;
margin-bottom: 50px;
padding: 16px;
border: 3px solid #303f9f;
background: url('../images/afro-mpesa.jpg') no-repeat scroll center bottom / cover;
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 6px 20px rgba(48, 63, 159, 0.3);
}
.ft-payments:hover {
transform: scale(1.05) rotate(-2deg);
box-shadow: 0 10px 30px rgba(48, 63, 159, 0.5);
}
.ft-payment {
width: 65px;
height: auto;
display: block;
filter:
drop-shadow( 2px 0px 0 black)
drop-shadow(-2px 0px 0 black)
drop-shadow( 0px 2px 0 black)
drop-shadow( 0px -2px 0 black);
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
.ft-payments {
background: url('../images/afro-mpesa.jpg') no-repeat scroll center bottom / cover;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.ft-payment {
filter:
drop-shadow( 2px 0px 0 black)
drop-shadow(-2px 0px 0 black)
drop-shadow( 0px 2px 0 black)
drop-shadow( 0px -2px 0 black);
}
}
.dark .ft-payment {
border-radius: 10px;
}
.dark .tabcontent h4 {
color: #ddd;
}
.dark .table-striped>tbody>tr:nth-of-type(even) {
background-color: #444;
}
.pay-data .table-striped>tbody>tr>th {
width: 150px;
}
.dark * {
box-shadow: none !important;
color: #ddd;
}
.dark .formholder {
background: #444;
}
.dark .formholder input {
color: black !important;
}
.dark .modal input[type="text"], .dark .modal input[type="number"] {
color: #aaa !important;
background: none !important;
}
.dark .tabfunc {
color: black !important;
}
.dark .tablink {
background-color: #444;
}
.dark .tablink.active {
background-color: #555;
color: #fff;
}
.dark form * {
color: #ddd !important;
}
.dark .subscribe {
color: #fff !important;
}
.dark .bttn-white:not(.subscribe) {
color: #303f9f !important;
}
.dark .glogin-btn p {
color: #000 !important;
}
.dark .jjnbzx {
color: #000 !important;
}
.dark .lds-ellipsis div {
background: #ddd;
}
.dark .lfs-title {
color: #ddd;
}
.dark .vnklaa,
.dark .vnklab,
.dark .inerror,
.dark .tin-error {
color: #555 !important;
}
.dark .sp-name {
color: #000;
}
.dark .tabnext {
color: #fff !important;
}
.dark .tabnext:hover {
color: #000 !important;
}
.dark .tabnext:focus {
color: #000 !important;
}
.dark .bttn-default {
color: #fff !important;
}
.dark .team-slide .owl-controls .owl-nav > div:before, .dark .service-box .box-icon:before {
background-color: #444;
border: 3px solid #fff;
border-radius: 50%;
}
.dark .mainmenu-area ul.nav.navbar-nav li a {
color: #fff !important;
}
.dark .mainmenu-area:before {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
}
body .mainmenu-area svg .st0 {
transition: fill 0.3s ease;
}
.dark .mainmenu-area ul.nav.navbar-nav li a:hover, .dark .mainmenu-area ul.nav.navbar-nav li.active a {
border-bottom-color: white;
}
.dark .mainmenu-area svg .st0 {
fill: white;
}
.dark .page-title .title {
color: white;
}
.dark .search-input {
background: #555;
color: #fff;
}
.dark .lfs-edit-text {
color: #222 !important;
}
.dark .search-input::placeholder {
color: #bbb;
}
.dark .lf-content {
box-shadow: none;
background: #333;
}
.dark .lfs-post {
background: #444;
}
.dark .lfs-post-text {
background: #666;
color: #fff;
}
.dark .lfs-post-text::placeholder {
color: #bbb;
}
.dark .lfs-story {
background: #444;
}
.dark .lfs-story-text {
color: white;
}
.dark .lfs-story-text a {
color: #888 !important;
}
.dark .lfs-edit,
.dark .lfs-delete,
.dark .lfs-mint {
border-radius: 50%;
background: #fff;
}
.dark .lfs-edit,
.dark .lfs-mint {
display: none !important;
}
.dark .lfs-delete,
.dark .lfs-edit {
border: 3px solid #fff;
max-height: 34px;
}
.dark .lfs-feats {
background: #555;
}
.dark .lfs-name {
color: #ccc;
}
.dark .lfs-time {
color: #fff;
}
.dark a[href] {
color: #aaa !important;
}
.dark .lfs-engage i {
color: #fff;
}
.dark .lfs-engage p {
color: #fff;
}
.darkModeToggle {
background: none;
border: none;
position: absolute;
right: 170px;
top: 20px;
cursor: pointer;
padding: 0;
z-index: 999999999;
margin-top: -5px;
}
.dark .darkModeToggle {
margin-top: -5px;
}
.dark .footer-bottom {
background: #222;
}
.dark .sell-div {
background: #222;
box-shadow: none;
}
.dark .progress-title {
color: #bbb !important;
}
.dark .dark-color {
color: white;
}
.dark .brand-chooser {
background: #eee;
}
.dark .sell-prev, .dark .sale-confirm {
color: black;
font-weight: 600;
}
.dark .sell-next {
color: white;
font-weight: 600;
}
.dark .modal-content {
background: #222;
}
.dark .filter-title {
color: #ddd;
}
.dark .sell-next:hover {
color: black;
}
.dark .table-striped>tbody>tr:nth-of-type(odd) {
background-color: #333;
}
.sf-dtls-next a {
color: white;
font-weight: 600;
}
.sf-dtls-next a: hover {
color: black;
font-weight: 600;
}
.dark .sf-dtls-next,
.dark .bf-dtls-next {
font-weight: 600 !important;
color: white !important;
}
.dark .sf-dtls-next:hover,
.dark .bf-dtls-next:hover {
font-weight: 600 !important;
color: black !important;
}
.dark .sf-dtls-prev,
.dark .bf-dtls-prev {
font-weight: 600 !important;
color: black !important;
}
.dark .modal-body {
background: #222;
}
.dark .form-label {
color: #aaa;
}
.dark .sf-contact-details input, .dark .sf-contact-details select, .dark .sf-contact-details textarea, .dark .bf-contact-details input, .dark .bf-contact-details select, .dark .bf-contact-details textarea, .dark .signup-modal input, .dark .signup-modal select {
color: #aaa !important;
}
.dark .pm-user-details, .dark .pm-overviews, .dark .pm-links, .dark .earnings {
background: #444;
}
.dark .pm-user-id {
color: #bbb;
}
.dark .dropdown-menu {
background: #222;
}
.dark .mainmenu-area .right-button a {
background: #333;
color: white !important;
}
.mainmenu-area .right-button a {
width: 100%;
text-align: center;
}
.dark .mainmenu-area .right-button a:hover {
background: #555 !important;
}
.dark .total-stories {
color: #fff;
}
.dark .status-tabs {
background: #222;
}
.dark listings-modal-content, .dark .orders-modal-content {
background: #222;
}
.dark input:not(".slider") {
background: #555;
color: #fff;
}
.dark input::placeholder {
color: #bbb;
}
.dark .dash-card {
box-shadow: none;
background: #444;
color: white;
}
.dark .buy-div, .dark .offers-div {
background: #222;
}
.dark .buy-card {
color: #fff;
background: #444;
}
.dark .card-buy {
color: #fff !important;
font-weight: 600;
}
.dark .payment-procedure {
background: #333;
}
.dark .payment-details {
background: #555;
}
.dark .payment-details a {
color: #bbb;
}
.dark .payment-method:hover {
background: #777;
color: #fff;
}
.dark .sales-person {
color: #000;
}
.dark .tradein-fields {
background: #333;
}
.dark .tin-status {
background: #555;
}
.dark .filters {
background: #222;
}
.dark .filter-sec-title {
color: #bbb;
}
.dark .questions-area {
background: #222;
}
.dark .toggole-boxs h3, .dark .toggole-boxs div {
background: #444;
color: #fff;
}
.dark .subscribe-form {
background: #222;
}
.dark .feedback-div {
background: #222;
}
.dark .feedback-div h3 {
color: white;
}
.dark .browse-topics-area {
background: #333;
}
.dark .topic-card {
background: #444;
}
.dark .topic-card h4 {
color: white;
}
.dark .call-to-action-btns a {
color: #303f9f;
}
.dark .blue-color {
color: white;
}
.dark .how-to {
color: #303f9f;
}
.dark .team-box:hover {
background: #333;
}
.dark .team-box h4 {
color: #fff;
}
.dark .buy-cards {
background: #222;
}
.dark .footer-box a {
color: white !important;
}
.dark .toggole-boxs h3:before, .dark .toggole-boxs h3:after {
background: white;
}
.dark .answers h2 {
color: white;
}
.dark .swiper-button-next:after, .dark .swiper-button-prev:after {
background: none;
}
.dark .post-single {
background: #333;
}
.dark .post-single .post-body h4 {
color: white;
}
.dark .post-single .post-body .read-more {
color: white;
}
.dark .mainmenu-area .navbar-toggle span {
background: white;
}
.dark .pagination .nav-links {
background: #333;
}
.dark .cookies-modal {
background: #333;
border: 1px solid #303f9f;
}
.dark .lfs-post-comment-txt {
background: #555;
}
.dark .lfs-post-comment-txt a {
color: #bbb !important;
}
.dark .lfs-post-comment-txt .lfs-post-comment-like {
color: #bbb;
}
.dark .lfs-user-img {
border-radius: 10px;
}
.dark .lfs-post-img {
border-radius: 10px;
}
.dark .cookies-modal img {
border-radius: 10px;
}
.dark .cookies-title {
color: #fff !important;
}
.dark .selected-brand::after {
background-color: #888;
}
/* PROFILE MODAL */
.profile-modal .modal-body {
padding: 0;
min-height: 400px;
padding: 10px;
}
.profile-modal h4 {
font-size: 18px;
font-weight: 700;
}
.pm-user-details, .pm-overviews, .pm-links, .earnings {
background: #fff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
margin: 20px 0;
border-radius: 20px;
border: 5px solid #303f9f;
}
.pm-user-detail {
display: flex;
gap: 20px;
align-items: center;
}
.pm-profile-avatar img {
max-width: 100px;
width: 100px;
border-radius: 10px;
}
.pm-user-id {
margin-top: 5px;
font-weight: 600;
color: #555;
}
.pm-overview {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.pm-ov {
padding: 10px;
border-radius: 10px;
width: 200px;
background: #303f9f;
color: #fff;
}
.pm-ov-title {
font-weight: 700;
margin-bottom: 20px;
border-bottom: 1px solid #fff;
padding-bottom: 10px;
}
.pm-ov-value {
font-size: 20px;
font-weight: 700;
color: #ccc;
padding-top: 10px;
}
.pm-links {
margin-bottom: 0;
}
.pm-linker a {
width: 100%;
display: block;
font-weight: 700;
margin-bottom: 10px;
color: #303f9f;
}
.profile-fname {
text-transform: capitalize;
}
.btm-alert {
position: fixed;
bottom: -100px; /* Hidden below view initially */
left: 50%;
transform: translateX(-50%);
background-color: #303f9f;
color: #fff;
padding: 10px 20px;
border-radius: 30px;
border: 2px solid #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: bottom 0.5s, opacity 0.5s;
z-index: 999999999;
min-width: 250px;
text-align: center;
}
.btm-alert.juu {
bottom: 20px; /* Slide up into view */
opacity: 1;
}
.btm-alert.chini {
bottom: -100px; /* Slide down out of view */
opacity: 0;
}
.mobile-nav {
display: none;
position: absolute;
top: 10px;
right: 50px;
justify-content: right;
flex-wrap: wrap;
gap: 5px;
}
@media only screen and (max-width: 767px) {
.mobile-nav {
display: flex;
}
}
.mobile-nav-img {
max-height: 28px;
margin-right: 15px;
}
.mobile-nav .mobile-nav-link:nth-child(2) img {
padding: 2px 0;
padding-right: 4px;
}
.forum-ad-container {
display: block;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.1);
}
.forum-ad-modal {
top: 40%;
position: relative;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
z-index: 999999;
border-radius: 20px;
background-color: rgba(255,255,255,0.9);
overflow-x: hidden;
margin: -157.5px auto;
width: 400px;
max-width: 96%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
height: 100%;
max-height: 395px;
overflow: hidden;
}
.forum-ad-img {
width: 100%;
}
.forum-ad-accept {
position: absolute;
right: 50px;
left: 50px;
bottom: 0;
font-size: 14px;
font-weight: 600;
padding: 8px 25px;
text-align: center;
display: inline-block;
margin: 20px auto 10px !important;
border-radius: 50px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#482cbf+0,6ac6f0+100 */
background: #303f9f;
color: #ffffff;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
cursor: pointer;
}
.forum-ad-close {
position: absolute;
top: 15px;
right: 15px;
max-height: 40px;
cursor: pointer;
}
/* Login-Form */
nav .right-button {
width: 140px;
max-width: 140px;
}
fieldset {
border: none;
}
#menu_checkbox {
display: none;
}
#menu_label {
display: none;
position: absolute;
top: 54%;
right: 22px;
margin: 0 auto;
width: 30px;
height: 30px;
transform: translateY(-50%);
transition: 0.3s ease transform;
cursor: pointer;
}
#menu_label div {
width: 6px;
height: 4px;
background-color: black;
margin-left: 0;
margin-bottom: 8px;
border-radius: 8px;
transition: 0.3s ease width, 0.3s ease margin-left, 0.3s ease margin-bottom,
0.3s ease background-color;
}
#menu_label div:first-child {
width: 22px;
}
#menu_label div:nth-child(2) {
width: 16px;
}
#menu_label div:last-child {
width: 36px;
margin-bottom: 0;
}
#menu_checkbox:checked + label {
transform: translateY(-50%) rotateZ(-90deg);
}
#menu_checkbox:checked + label div {
width: 6px;
margin-left: 12px;
margin-bottom: 8px;
background-color: black;
}
.nav-menu {
position: absolute;
right: 30px;
top: 17px;
}
.nav-menu a {
font-size: 15px;
font-weight: 600;
margin: 10px;
color: black;
}
.nav-menu a.active {
color: #FF4B07;
}
.login-error,
.logger {
display: none;
}
.login-error {
padding: 4px 4px 2px;
text-align: center;
color: red;
border: #e57373;
background: #ffebee;
font-weight: 600;
}
.login-box {
right: 150px;
z-index: 999999;
position: relative;
width: 270px;
display: none;
}
.arrow-up {
display: none;
visibility: hidden;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
right: 15%;
position: absolute;
top: -10px;
}
.formholder {
background: -webkit-linear-gradient(45deg, #303F9F 0%, rgba(106, 198, 240, 1) 100%);
background: -o-linear-gradient(45deg, #303F9F 0%, rgba(106, 198, 240, 1) 100%);
background: linear-gradient(45deg, #303F9F 0%, rgba(106, 198, 240, 1) 100%);
width: 270px;
border-radius: 5px;
padding-top: 5px;
}
.formholder label {
color: #fff;
}
.formholder input[type="email"],
.formholder input[type="password"] {
padding: 7px 5px 9px;
margin: 0 0 10px;
width: 100%;
display: block;
font-size: 14px;
border-radius: 5px;
border: #1976d2;
box-shadow: 0 0 1px 1px #42a5f5;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.formholder input[type="email"]:focus,
.formholder input[type="password"]:focus {
outline: none;
box-shadow: 0 0 1px 1px #42a5f5;
}
.formholder input[type="submit"] {
cursor: pointer;
margin-top: 20px;
background: #fff !important;
padding: 7px 0 9px;
font-size: 14px;
display: block;
width: 100%;
border: none;
color: #000;
border-radius: 5px;
}
.formholder input[type="submit"]:hover {
background: #ccc !important;
}
.randompad {
padding: 10px 10px 18px;
}
/* Dropdown-Menu */
.dropdown-menu a {
cursor: pointer;
color: #768ede !important;
-webkit-transition: 0s linear !important;
-moz-transition: 0s linear !important;
-o-transition: 0s linear !important;
transition: 0s linear !important;
}
.dropdown-menu li:hover,
.dropdown-menu a:hover {
background: #eceff1 !important;
}
.login-register {
display: block !important;
color: #fff;
font-weight: 600;
text-align: right;
position: relative;
top: 12px;
cursor: pointer;
width: 70px;
float: right;
line-height: 16px;
}
.signup-modal input, .signup-modal label {
display: none !important;
}
.signup-modal .form-input {
padding-top: 0;
}
.signup-submit {
display: none;
}
.sm-register {
display: block !important;
color: #303f9f;
font-weight: 600;
width: 70px;
margin: 0 auto;
text-align: center;
cursor: pointer;
}
.dark .sm-register {
color: #fff;
}
/* Login Small */
.login-sm {
bottom: 0;
background: #ddd;
z-index: 99999999;
position: fixed;
width: 100%;
display: none;
padding: 20px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
text-align: center;
}
@media (prefers-color-scheme: dark) {
.login-sm {
background: #333;
}
}
.login-sm input {
width: 80%;
padding: 8px 10px 10px;
margin-bottom: 20px;
border-radius: 20px;
}
.logsm-title {
color: #fff;
font-size: 18px;
font-weight: 600;
padding-bottom: 20px;
}
.login-sm input[type="email"]::placeholder {
color: #fff;
}
.login-sm input[type="email"] {
background: rgb(24, 40, 72, 0.2);
color: #fff;
border: 2px solid #fff;
}
.login-sm input[type="password"]::placeholder {
color: #fff;
}
.login-sm input[type="password"] {
background: rgb(24, 40, 72, 0.2);
color: #fff;
border: 2px solid #fff;
}
.loginsm-error {
color: #ffcdd2;
display: none;
margin-bottom: 20px;
}
.loggersm {
display: none;
}
.login-sm input[type="submit"] {
background: #fff;
color: #000;
font-weight: 600;
padding-top: 8px;
border: none;
outline: none;
}
.lsearch-row {
width: 100%;
padding: 10px 20px;
display: flex;
justify-content: center;
margin: 0 0 60px;
}
.lsearch-bar {
width: 80%;
max-width: 230px;
display: flex;
justify-content: center;
position: relative;
}
.lsearch-input {
font-family: 'Varela Round', sans-serif;
font-weight: 600;
font-size: 14px;
color: #333 !important;
background: #e8eaf6;
position: absolute;
padding-left: 15px;
padding-right: 45px;
width: 100%;
border-radius: 40px;
border: 2px solid #303F9F;
height: 40px;
line-height: 40px;
z-index: 0;
}
.lsearch-btn {
position: absolute;
width: 32px;
height: 32px;
margin: 4px;
line-height: 29px;
border-radius: 20px;
font-size: 20px;
top: 0;
right: 0;
text-align: center;
vertical-align: middle;
color: #fff;
cursor: pointer;
background: rgb(72, 44, 191);
background: -webkit-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
background: -o-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
background: linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
}
.gsign {
max-width: 300px;
margin: 0 auto 30px;
display: block;
}
.earnings {
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 20px 0;
border-radius: 20px;
max-width: 100vw;
background: #fff;
}
.total-stories {
font-size: 20px;
color: #303f9f;
font-weight: 600;
text-align: center;
}
.story-count {
/*font-size: 35px;*/
}
.stories-bar {
height: 20px;
background: #ddd;
border-radius: 20px;
margin: 10px 0;
overflow: hidden;
}
.stories-prog {
height: 20px;
background: green;
}
.rem-stories {
font-weight: 600;
text-align: center;
}
.rem-story-count {
font-size: 20px;
}
.withdrawal-no {
min-width: 200px;
text-align: center;
display: block;
margin: 0 auto;
margin-top: 10px;
padding: 10px;
border-radius: 10px;
border: 2px solid #303f9f;
background: #eee;
}
.story-withdraw {
background: #303F9F;
border: none;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
width: 150px;
display: block;
margin: 0 auto;
text-align: center;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.notif-loader {
display: none;
}
.notifications {
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 20px 0;
border-radius: 20px;
max-width: 100vw;
}
.notif-bar {
padding-bottom: 10px;
border-bottom: 2px solid #303f9f;
}
.notif-bar p {
font-size: 18px;
font-weight: 600;
}
.notif-list {
margin-top: 0;
}
.notif-item {
cursor: pointer;
padding: 10px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.notif-item {
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
}
.notif-item.show {
display: flex;
opacity: 1;
transform: translateY(0);
}
.interpunct {
font-size: 50px;
color: #303f9f;
margin-right: 10px;
}
.notif-details {
}
.notif-detail {
font-weight: 600;
font-size: 14px;
}
.comment-snap {
font-weight: 400;
max-width: 100%;
overflow: hidden;
}
.comment-snap {
display: -webkit-box;
-webkit-line-clamp: 3; /* limit to 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word; /* handle long words/links */
max-height: calc(1.2em * 3); /* optional: keep height stable */
}
.notif-time {
font-size: 10px;
font-weight: 600;
color: #777;
margin-top: 10px;
}
.glogin-btn {
display: flex;
align-items: center;
background: #fff;
margin: 20px 0 10px;
border-radius: 10px;
cursor: pointer;
}
.login-sm .glogin-btn {
border-radius: 100px;
max-width: 80%;
margin: 20px auto;
}
.signup-modal .glogin-btn {
max-width: 250px;
margin: 20px auto;
border: 2px solid #303F9F;
border-radius: 50px;
}
.glogin-btn img {
max-height: 25px;
margin: 10px;
}
.glogin-btn p {
font-weight: 600;
}
.dark .model-item {
color: #fff;
}
.dark .selected-model {
color: #aaa;
}
.dark .lfs-story-img-modal {
background-color: #444;
}
.forum-loader-card-skeleton {
background: #fff;
border-radius: 20px;
width: 100%;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.dark .forum-loader-card-skeleton {
background: #444;
}
.forum-loader-skeleton {
background: #ccc;
position: relative;
overflow: hidden;
}
.dark .forum-loader-skeleton {
background: #777;
}
.forum-loader-skeleton::after {
content: "";
position: absolute;
top: 0;
left: -100px;
height: 100%;
width: 100px;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { left: -100px; }
100% { left: 100%; }
}
.forum-loader-header {
display: flex;
gap: 10px;
align-items: center;
}
.forum-loader-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.forum-loader-header-texts {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.forum-loader-text-line {
height: 10px;
border-radius: 5px;
width: 100px;
}
.forum-loader-text-line.short {
width: 60%;
}
.forum-loader-title-line {
height: 14px;
width: 80%;
border-radius: 6px;
}
.forum-loader-image-block {
height: 300px;
border-radius: 20px;
margin-bottom: 70px;
}
/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1280px) {}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
.post-modal .lfs-story {
margin: 10px;
}
.pm-ov {
width: 100%;
}
.pm-ov-value {
padding-top: 0;
}
.profile-modal-content,
.orders-modal-content,
.listings-modal-content {
width: 100%;
}
.dash-col-2,
.dash-col-3 {
float: right;
margin: 0;
width: 180px;
}
.dash-col-2 {
margin-top: 20px;
}
.dash-col-3 {
margin-bottom: 20px;
}
.darkModeToggle {
display: none;
}
.feedback-btn {
bottom: 20px !important;
}
.buy-model-container:after {
background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0) 70px), linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0) 70px);
}
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
.dark .mainmenu-area #primary_menu ul.nav.navbar-nav li.active a, .dark .mainmenu-area #primary_menu ul.nav.navbar-nav li a:hover {
background-color: #444;
color: #fff;
}
.signup-modal-content {
top: 1px !important;
border-radius: 10px !important;
}
.signup-modal {
padding: 0;
}
.signup-modal-content {
width: 100%;
}
.signup-modal .modal-body {
padding: 70px 10px;
}
.modal-content {
top: 1px;
border-radius: 2px;
max-width: 100vw;
}
.notifications {
margin: 20px 10px;
}
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {}