/*==================================================
  Template Name: Friend Finder
  Description: A Social Network Template
  Author: thunder-team
  Version: 1.4
==================================================*/

/*==================================================
  [Table of Contents]
  --------------------------------------------------
  - body
    - Typography
    - Common classes
    - Header
    - Homepage
      - Top Banner
      - Signup Form
      - Features
      - App Download
      - Image Divider
      - Site Facts
      - Live Feed
    - Landing Page | Register
    - Newsfeed
      - Left Sidebar
      - Right Sidebar
      - Create Post Box
      - Post Contents
      - Nearby People
      - Friend List
      - Chat Room
      - Media: image and video
    - Timeline
      - Timeline Sidebar
      - Post Date
      - About Profile
      - Profile Album
    - Edit Profile
    - Contact Us
    - Footer
    - Media Queries
    - Slide Animations
    - Scroll Down Arrow
    - Preloader
==================================================*/

* {
    font-family: sans-serif, Arial Narrow;
    letter-spacing: 0.6px;
}

html,
body {
    height: 100%;
    width: 100%;
}

body {
    font-family: sans-serif, 'Lato';
    line-height: 26px;
    color: #6d6e71;
    font-size: 13px;
    background-color: #ecf0f1;
}

.fa-user-check {
    color: #ec6714 !important;
}

/*==================================================
  Typography
  ==================================================*/

@font-face {
    font-family: "Agency FB";
    src: url("../fonts/agency-fb.eot")
        /* EOT file for IE */
}

@font-face {
    font-family: "Agency FB";
    src: url("../fonts/agency-fb.ttf")
        /* TTF file for CSS3 browsers */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ec6714;
}

h1.grey,
h2.grey,
h3.grey,
h4.grey,
h5.grey,
h6.grey {
    color: #6d6e71;
    margin: 0 auto 20px;
}

.text-white {
    color: #fff;
}

.text-white:hover {
    color: #fff;
}

.text-green {
    color: rgb(45, 216, 45);
}

.text-green:hover {
    color: rgb(45, 216, 45);
}

.text-red {
    color: #ef4136;
}

.text-red:hover {
    color: #d6100b;
}

.profile-link {
    font-weight: 600;
}

.profile-link-margin {
    margin-right: 5px;
}

.text-muted {
    color: #939598;
}

a {
    color: #ec6714;
}

a:hover {
    color: #ec6714;
    text-decoration: underline;
}

a,
a:active,
a:focus {
    outline: none;
}

section h1.section-title {
    font-family: 'Agency FB', sans-serif;
    font-size: 215px;
    color: #E6E7E8;
    margin-bottom: -55px;
}

section h2.sub-title {
    font-family: 'Agency FB', sans-serif;
    color: #E6E7E8;
    font-size: 50px;
    margin: 40px 0;
}

.following {
    color: rgb(45, 216, 45);
    font-size: 12px;
    margin-left: 20px;
}

/*==================================================
  Common
  ==================================================*/
/*Custom css*/
/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
    transition: background-color 0.3s ease, width 0.3s ease;
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
}

/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
    background-color: lighten(var(--primary-color), 10%);
    cursor: pointer;
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrollbar Thumb on Hover */
::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    background-color: var(--primary-color);
}

.container {
    max-width: 1170px;
}

section .wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
}

.page-title-section {
    background: #f1f2f2;
    text-align: center;
    padding: 30px 0 40px;
    position: relative;
}

.page-title-section h1 {
    font-family: 'Agency FB', sans-serif;
    font-size: 50px;
}

#page-contents {
    padding: 30px 0 50px 0;
}

.guest-primary {

    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.18);

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2)) !important;
    color: #ec6714 !important;
    font-size: 14px;
    border-radius: 8px;
    position: relative;
    /* font-weight: 600; */
    outline: none;
    transition: all 0.9s !important;
    box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.6) !important;
}

.guest-primary:hover {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
    transition: all 0.9s;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    border-left: 1px solid rgba(0, 0, 0, 0.18);
}

.btn-primary {
    padding: 7px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2)) !important;
    color: #ec6714 !important;
    font-size: 14px;
    font-weight: 300;
    border-radius: 8px;
    position: relative;
    outline: none;
    transition: all 0.9s !important;
    box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.6) !important;
}

.btn-primary:hover {
    text-decoration: none !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
    transition: all 0.9s;
    border-top: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.18) !important;
}

.btn-secondary {

    background: linear-gradient(to bottom, rgba(109, 110, 113, 1), #7fa2a0);
    padding: 0 40px;
    border: none;
    min-height: 36px;
    font-size: 18px;
    border-radius: 6px;
    color: #fff;
    position: relative;
    outline: none;
}

.btn-secondary:hover {
    background: #000;
    transition: all 1s;
}

.new_button {
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important;
    color: #ec6714 !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    position: relative;
    outline: none;
    text-decoration: none !important;
    transition: all 0.9s !important;
    cursor: pointer;
    box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 10px;
}

.new_button:hover {
    text-decoration: none !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
    transition: all 0.9s;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
}

@media (min-width: 768px) {
    .new_button {
        padding: 7px 11px !important;
    }
}

section img {
    margin: auto;
}

img.profile-photo {
    height: 58px;
    width: 58px;
    border-radius: 50%;
}

img.profile-photo-lg {
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

img.profile-photo-md {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

img.profile-photo-sm {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

img.profile-photo-xs {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.img-wrapper {
    position: relative;
}

.img-wrapper::after {
    content: "";
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 1s ease 0s;
}

.img-wrapper:hover:after {
    background-color: rgba(0, 0, 0, 0.4);
}

.video-wrapper {
    position: relative;
}

ul {
    padding-left: 15px;
}

ul li {
    list-style-image: url("../images/bullet.png");
}

.line {
    background: rgba(163, 163, 163, 0.53);
    height: 1px;
    width: 100%;
    margin-bottom: 10px;
}

.line-divider {
    background: none;
    height: 1px;
    border-top: 1px solid rgba(163, 163, 163, 0.3);
    width: 98%;
    margin: auto;

}

.map {
    width: 100%;
    height: auto;
    border: none;
}

.static {
    position: static;
}

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.custom-label {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
}

.form-control {

    background: rgba(163, 163, 163, 0.05);
    ;
    border: 1px solid rgba(163, 163, 163, 0.3);
    box-shadow: none;
    border-radius: 4px;
    color: #939598;
    font-size: 13px !important;
    width: 100% !important;
}

.screen-reader-text {
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    position: absolute;
    margin: -1px;
    padding: 0;
    height: 1px;
    width: 1px;
    word-wrap: normal !important;
    border: 0 none;
}

/* Accordion */

.panel-default {
    border-color: #f1f2f2;
}

.panel-default>.panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #f1f2f2;
    padding-right: 40px;
    position: relative;
}

.panel-default>.panel-heading::before {
    content: "\f217";
    font-family: ionicons;
    color: rgb(45, 216, 45);
    position: absolute;
    right: 15px;
    top: 50%;
    font-size: 20px;
    transform: translateY(-50%);
    cursor: pointer;
}

.panel-default>.panel-heading .panel-title a:hover,
.panel-default>.panel-heading .panel-title a:active,
.panel-default>.panel-heading .panel-title a:focus {
    text-decoration: none;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #f1f2f2;
}

.panel-group .panel-heading+.panel-collapse>.list-group,
.panel-group .panel-heading+.panel-collapse>.panel-body {
    border: 1px solid rgba(236, 236, 236, 0.05);
}

.panel-body .label-primary {
    background-color: #27aae1 !important;
}

.panel-body .label-success {
    background-color: rgb(45, 216, 45);
}

/*==================================================
  Header
  ==================================================*/

#header {
    min-height: 50px;
}

.menu {


    max-height: 60px;
    background-repeat: repeat;
    background-position: center;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

.menu form {
    margin: 12px 0;
}

.menu form .form-group {
    position: relative;
}

.menu form .form-group i.icon {
    position: absolute;
    left: 15px;
    top: 3px;
    color: #fff;
}

.menu form .form-group input.form-control {
    background: rgba(255, 255, 255, 0.99);
    border: 0;
    box-shadow: none;
    min-width: 235px;
    color: #000;
    height: 26px;
    border-radius: 13px;
    font-size: 13px;
    padding-left: 30px;
}

.menu ul.main-menu li a {
    line-height: 26px;
}

.menu ul.main-menu li.dropdown a {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.menu ul.main-menu li.dropdown a:hover,
.menu ul.main-menu li.dropdown a:active,
.menu ul.main-menu li.dropdown a:focus {
    color: #ec6714 !important;
    background: none;
    text-decoration: none;
}

.menu ul.main-menu li.open a,
.menu ul.main-menu li.open a:active,
.menu ul.main-menu li.open a:focus {
    background: transparent;
    color: #ec6714;
}

.menu ul.main-menu li ul.dropdown-menu {
    background: #27262d !important;

    box-shadow: none;

    border-radius: 10px;

    margin: 0 auto;
}

.menu ul.main-menu li ul.dropdown-menu li {
    list-style: none;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.menu ul.main-menu li ul.dropdown-menu li a,
.menu ul.main-menu li.open ul.dropdown-menu li a {
    color: #fff;
    font-size: 16px;
    line-height: 16px;
}

.menu ul.main-menu li ul.dropdown-menu li a:hover,
.menu ul.main-menu li.open ul.dropdown-menu li a:hover {
    color: #ec6714 !important;
    text-decoration: none;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border: 0;
}

/*For Homepage Header | Display on Scroll*/

#header.lazy-load {
    visibility: hidden;
    position: fixed;
    left: 0;
    right: 0;
    transition: .5s ease-in-out;
    transform: translateY(-50px);
    z-index: 99999;
}

#header.lazy-load.visible {
    visibility: visible;
    transform: translateY(0);
}

/*Transparent Background Header for Landing Page-2*/

#header-inverse nav.menu {
    background: transparent;
    margin-top: 15px;
    z-index: 1030;
}

#header-inverse .menu ul.main-menu li ul.dropdown-menu {
    border-radius: 4px;
    position: absolute;
}

#header-inverse .menu ul.main-menu li ul.dropdown-menu::before {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    bottom: 100%;
    width: 0;
    height: 0;
    border-bottom: 10px solid #231F20;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

/*==================================================
  Homepage Top Banner
  ==================================================*/

#banner {
    background: url("http://placehold.it/1920x900") fixed no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 550px;
    position: relative;
    top: 0;
}

/*==================================================
  Homepage Signup Form
  ==================================================*/

.sign-up-form {
    background: linear-gradient(to bottom, rgba(43, 57, 144, .8), rgba(39, 170, 225, 1) 65%);
    position: absolute;
    width: 340px;
    min-height: 600px;
    top: 0;
    padding: 40px 30px;
    text-align: center;
    color: #fff;
    z-index: 1000;
}

.sign-up-form:after {
    content: "";
    border-color: #27aae1 transparent transparent;
    border-style: solid;
    border-width: 40px 170px 0;
    bottom: -40px;
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}

.sign-up-form h2 {
    font-family: 'Agency FB', sans-serif;
    margin: 100px 0 20px;
}

.sign-up-form .line-divider {
    background: none;
    height: 1px;
    border-top: 1px solid rgba(255, 255, 255, .20);
    width: 180px;
    margin: auto;
    margin-bottom: 10px;
}

.sign-up-form .form-wrapper {
    padding: 20px 20px 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-top: none;
    margin-bottom: 30px;
}

.sign-up-form .form-wrapper .signup-text {
    font-size: 15px;
}

.sign-up-form .form-wrapper .form-group {
    margin-bottom: 10px;
    width: 100%;
}

.sign-up-form .form-wrapper .form-group .form-control {
    border: none;
    box-shadow: none;
    border-radius: 17px;
    padding-left: 20px;
}

.sign-up-form .form-wrapper button {
    position: relative;
    top: 20px;
    border-radius: 17px;
}

.sign-up-form a {
    color: #fff;
}

.sign-up-form img.form-shadow {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 100%;
}

/*==================================================
  Features Section
  ==================================================*/

#features {
    background: #EFEFEF;
    background: radial-gradient(#fff 50%, #EFEFEF 90%);
    background: -moz-radial-gradient(#fff 50%, #EFEFEF 90%);
    background: -webkit-radial-gradient(#fff 50%, #EFEFEF 90%);
    background: -o-radial-gradient(#fff 50%, #EFEFEF 90%);
    text-align: center;
}

#features .feature-item .feature-icon {
    background: linear-gradient(to bottom, rgba(43, 57, 144, .8), rgba(39, 170, 225, .8) 65%), url("../images/blur.png") no-repeat;
    background-size: cover;
    background-position: center;
    width: 110px;
    height: 110px;
    border-radius: 55px;
    margin: auto;
    border: 6px solid #fff;
    box-shadow: 0 12px 12px rgba(39, 170, 225, 0.3);
    cursor: pointer;
    font-size: 35px;
    color: #fff;
    line-height: 100px;
}

#features .feature-item .feature-icon:hover {
    background: #27aae1;
    transition: all 1s;
}

#features .feature-item h3 {
    font-family: 'Agency FB', sans-serif;
    color: #939598;
}

#incremental-counter .num {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #ec6714;
    display: inline-block;
    height: 64px;
    line-height: 62px;
    margin: 0 4px 20px;
    position: relative;
    left: -1px;
    text-align: center;
    width: 50px;
    font-size: 45px;
    font-size: 3.72625em;
    font-weight: normal;
    font-family: 'Agency FB', sans-serif;
}

#incremental-counter .num::before {
    background: #00aae6;
    content: "";
    display: block;
    height: 1px;
    left: -1px;
    margin: -0.5px 0 0;
    position: absolute;
    right: -1px;
    top: 50%;
    width: auto;
}

#features img.face-map {
    margin: 0 auto -250px;
}

/*==================================================
  App Download Section
  ==================================================*/

#app-download {
    background: #fff;
    text-align: center;
}

#app-download ul.app-btn {
    padding: 0;
    margin: 0;
}

#app-download ul.app-btn li {
    list-style: none;
    padding-left: 10px;
    padding-right: 10px;
}

#app-download ul.app-btn li button {
    padding: 8px 15px;
}

#app-download ul.app-btn li button::after {
    content: "";
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1), transparent 70%);
    height: 36px;
    width: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 6px;
}

/*==================================================
  Homepage Image Divider
  ==================================================*/

.img-divider {
    background: url("http://placehold.it/1920x460") no-repeat;
    background-size: cover;
    text-align: center;
    min-height: 460px;
    background-position: center;
}

/*==================================================
  Site Facts Section
  ==================================================*/

#site-facts {
    background: radial-gradient(rgba(0,
                0,
                0,
                0.7) 40%,
            rgba(0,
                0,
                0,
                1) 100%),
        url("/images/placeholder-image.png") fixed no-repeat;
    background-size: cover;
    height: 500px !important;
    text-align: center;
    color: #fff;
}

#site-facts .circle {
    background: #27aae1;
    width: 660px;
    height: 660px;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: -180px;
    padding: 75px;
    overflow: hidden;
}

#site-facts .circle ul.facts-list {
    padding: 0;
    margin: 0;
}

#site-facts .circle ul.facts-list li {
    list-style: none;
}

#site-facts .circle ul.facts-list li:nth-child(1) {
    margin: 5px auto 50px;
}

#site-facts .circle ul.facts-list li:nth-child(1)::before {
    content: "";
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    height: 75px;
    position: absolute;
    top: 0;
}

#site-facts .circle ul.facts-list li:nth-child(1)::after {
    content: "";
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    height: 34px;
    position: absolute;
}

#site-facts .circle ul.facts-list li:nth-child(2)::after {
    content: "";
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    height: 34px;
    position: absolute;
}

#site-facts .circle ul.facts-list li:nth-child(3) {
    margin: 50px auto 10px;
}

#site-facts .circle ul.facts-list li:nth-child(3)::after {
    content: "";
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    height: 75px;
    position: absolute;
    bottom: 0;
}

#site-facts .circle .fact-icon {
    background: rgba(255, 255, 255, .1);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin: auto;
}

#site-facts .circle .fact-icon {
    font-size: 50px;
}

/*==================================================
  Live Feed Section Homepage
  ==================================================*/

#live-feed {
    background: #fff;
    text-align: center;
}

#live-feed ul.online-users li {
    margin: 0;
}

/*==================================================
  Landing Page: V2 | Register/Login
  ==================================================*/

#lp-register {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("/images/signupBG-PIF.png") fixed no-repeat;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100vh;
}

#lp-register .wrapper {
    padding-top: 140px;
    padding-bottom: 140px;
}

.intro-texts {
    color: #fff;
    font-size: 14px;
    transform: translateY(100px);
}

.intro-texts h1 {
    font-family: 'Agency FB', sans-serif;
    margin-bottom: 30px;
    font-weight: 700;
}

.intro-texts button {
    margin-top: 20px;
    border-radius: 30px;
    padding: 8px 20px;
    width: 150px;
}

.intro-texts button::before {
    content: none;
}

/*Registration Form Container*/

.reg-form-container {
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 15px rgba(0, 0, 0, .9);
    padding: 40px 40px 40px 60px;
    border-radius: 8px;
    position: relative;
    min-height: 560px;
    z-index: 10;
}

/*
.reg-form-container::before {
    content: "";
    background: rgba(255, 255, 255, .1);
    width: 95%;
    height: 70%;
    border-radius: 6px;
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -2;
}

.reg-form-container::after {
    content: "";
    background: rgba(255, 255, 255, .1);
    width: 90%;
    height: 65%;
    border-radius: 6px;
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
*/

.reg-form-container .reg-options::before {
    content: "";
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: 70%;
    width: 50px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateX(-100%) translateY(-50%);
    border-radius: 8px 0 0 8px;
    z-index: -1;
}

/*Registration Login/Register Tabs*/

.reg-form-container .reg-options .nav-tabs {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-60%) rotate(270deg);
    border: none;
}

.reg-form-container .nav-tabs>li {
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

.reg-form-container .nav-tabs>li::after {
    content: "";
    background: rgba(255, 255, 255, 0.1);
    height: 25px;
    width: 1px;
    position: absolute;
    right: -10px;
    top: 5px;
}

.reg-form-container .nav-tabs>li:last-child::after {
    content: none;
}

.reg-form-container .nav-tabs>li>a {
    background: transparent;
    color: #939598;
    padding: 5px 30px;
    min-width: 120px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: none;
}

.reg-form-container .nav-tabs>li.active>a,
.reg-form-container .nav-tabs>li.active>a:focus,
.reg-form-container .nav-tabs>li.active>a:hover {
    background: transparent;
    color: #fff;
    font-weight: 700;
    border: none;
}

/*Registration Form*/

#registration_form .form-group,
#Login_form .form-group {
    margin-bottom: 10px;
}

#registration_form .form-control,
#Login_form .form-control {
    background: #fff;
    color: #000;
    font-size: 13px !important;
    border-radius: 30px;
    box-shadow: none;
    width: 100%;
    border: 1px solid #f1f2f2;
    padding-left: 15px;
}

#registration_form select.form-control {
    background: rgba(0, 0, 0, 0) url("../images/down-arrow.png") no-repeat scroll calc(100% - 10px) center / 8px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #000;
}

#registration_form p.birth {
    margin-left: 10px;
}

/*Social Links Bottom*/

#lp-register ul.social-icons {
    text-align: center;
    margin-top: 40px;
    z-index: 11;
}

#lp-register ul.social-icons li {
    border: none;
}

#lp-register ul.social-icons li a {
    color: #fff;
}

#lp-register ul.social-icons li a:hover {
    color: #ec6714;
    transition: all .5s;
}

/*feed-block and ul.online-users css available below*/

/*==================================================
  Newsfeed Left Sidebar
  ==================================================*/

/*Profile Card CSS*/

@media only screen and (max-width: 768px) {
    .profile-card {
        margin-top: 0px !important;
    }
}

.profile-card {
    background-image: url("/images/crypto-geometric.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 100%;
    min-height: 116px;
    margin-top: -26px;
    border-radius: 8px;
    padding: 10px 20px;
    color: #fff;

}

.profile-card img.profile-photo {
    border: 5px solid rgba(255, 255, 255, 0.25) !important;
    float: left;
    margin-right: 20px;
    position: relative;
    bottom: -60px;
    height: 70px;
    width: 70px;
    border-radius: 50%;
}

.header_dropdown_icons li i {
    font-size: 20px !important;

}

.header_dropdown_icons li .header_dropdown_titles {

    width: 170px;
    padding: 5px 12px;
    left: none;
}

/*********************** START/ Guest Layout ***********************/

.leftside_guest {
    padding-left: 20px;
    padding-right: 20px;
    margin: 40px 0 40px 0;
}

ul.leftside_guest li {
    list-style: none;
    display: block;
    padding: 15px 0;
}

ul.leftside_guest li div {
    position: relative;
    margin-left: 30px;
    font-size: 16px;
}

ul.leftside_guest li.active {
    content: "";

    border-left: 2px solid rgb(45, 216, 45);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    height: auto;
    padding-left: 9px;
    margin-left: -10px;
    /*position: relative;
    top: 50%;
    left: -20px;
    transform: translate(-50%, -50%);*/
}

ul.leftside_guest li.active {
    content: "";

    border-right: 2px solid rgb(45, 216, 45);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

    height: auto;
    /*padding-left: 9px;
    margin-left: -10px;
    position: relative;
    top: 50%;
    left: -20px;
    transform: translate(-50%, -50%);*/
}

ul.leftside_guest li.active i.icon {
    color: rgb(45, 216, 45);
}

ul.leftside_guest li.active a {
    color: rgb(45, 216, 45);

}

ul.leftside_guest li div::after {
    content: "";
    width: 100%;
    height: 1px;
    border-top: 1px solid #f1f2f2;
    position: absolute;
    bottom: -58%;
    left: -20px;
}

ul.leftside_guest li a {
    color: #6d6e71;
}

ul.leftside_guest li i {
    font-size: 18px;
    margin-right: 15px;
    float: left;
}

ul.leftside_guest i.ion-ios-paper {
    color: #9e9e9e;
}

.ion-ios-paper {
    color: #9e9e9e;
}

ul.leftside_guest i.ion-ios-people {
    color: #662d91;
}

.ion-ios-people {
    color: #662d91;
}

ul.leftside_guest i.ion-ios-people-outline {
    color: #ee2a7b;
}

.ion-ios-people-outline {
    color: #ee2a7b;
}

ul.leftside_guest i.ion-ios-heart-outline {
    color: red;
}

/*
.ion-ios-heart-outline {
    color:red;
}
*/
ul.leftside_guest i.ion-man {
    color: blue;
}

.ion-man {
    color: blue;
}

ul.leftside_guest i.ion-cash {
    color: darkgreen;
}

.ion-cash {
    color: darkgreen;
}

ul.leftside_guest i.ion-chatboxes {
    color: #f7941e;
}

.ion-chatboxes {
    color: #f7941e;
}

ul.leftside_guest li.active i.icon .fas .fa-user-check {
    color: rgb(45, 216, 45);
}

ul.leftside_guest i.fa-user-check {
    color: #f7941e;
}

.fa-user-check {
    color: #f7941e;
}

ul.leftside_guest li.active i.icon .fas .fa-dollar-sign {
    color: rgb(45, 216, 45);
}

ul.leftside_guest i.fa-dollar-sign {
    color: darkgreen;
}

.fa-dollar-sign {
    color: darkgreen;
}

ul.leftside_guest li.active i.icon .fas .fa-wallet {
    color: rgb(45, 216, 45);
}

ul.leftside_guest i.fa-wallet {
    color: darkgreen;
}

.fa-wallet {
    color: darkgreen;
}

ul.leftside_guest i.ion-images {
    color: #1c75bc;
}

.ion-images {
    color: #1c75bc;
}

.ion-ios-cog-outline {
    color: #1c75bc;
}

.ion-aperture {
    color: #1c75bc;
}

.ion-wifi {
    color: #8dcbff;
    display: inline-block;
    rotate: 45deg;
}

.ion-ios-locked-outline {
    color: #1c75bc;
}

.ion-ios-book-outline {
    color: #ec6714;
}

ul.leftside_guest i.ion-ios-videocam {
    color: #9e1f63;
}

.ion-ios-videocam {
    color: #9e1f63;
}

.ion-ios-star {
    color: rgb(233, 233, 73);
}

.ion-ios-chatboxes-outline {
    color: #9e9e9e;
}

ul.leftside_guest i.ion-ios-help-outline {
    color: #ec6714;
}

.ion-ios-help-outline {
    color: #ec6714;
}

ul.leftside_guest i.ion-ios-contact {
    color: #1100ff;
}

.ion-ios-contact {
    color: #1100ff;
}

.ion-ios-information-outline {
    color: #1100ff;
}

ul.leftside_guest i.ion-ios-home-outline {
    color: #ff4949;
}

.ion-ios-home-outline {
    color: #ff4949;
}

.ion-ios-mic-outline {
    color: #ff4949;
}

ul.leftside_guest i.ion-ios-person-outline {
    color: rgb(45, 216, 45);
}

.ion-ios-person-outline {
    color: rgb(45, 216, 45);
}

.ion-ios-briefcase-outline {
    color: rgb(45, 216, 45);
}

ul.leftside_guest i.ion-map {
    color: #3fc6bb;
}

.ion-map {
    color: #3fc6bb;
}

ul.leftside_guest i.ion-ios-heart-outline {
    color: red;
}

/*
.ion-ios-heart-outline {
    color: red;
}
*/
ul.leftside_guest i.ion-ios-lightbulb {
    color: rgb(202, 206, 0);
}

.ion-ios-lightbulb {
    color: rgb(202, 206, 0);
}

.ion-ios-settings {
    color: rgb(202, 206, 0);
}

/*********************** END/ Guest Layout ***********************/

/*Newsfeed Links CSS*/

ul.nav-news-feed {
    /* padding-left: 20px;
    padding-right: 20px; */
    margin: 0 0 50px 0;
}

ul.nav-news-feed li {
    list-style: none;
    display: block;
    padding: 15px 0;
    margin-top: 0px !important;
}

ul.nav-news-feed li div {
    position: relative;
    margin-left: 30px;
    font-size: 16px;
}

ul.nav-news-feed li.active {
    content: "";

    color: #ec6714;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: auto;
    padding-left: 9px;
    margin-left: -10px;
}

ul.nav-news-feed li.active {
    content: "";

    color: #ec6714;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    height: auto;
}

ul.nav-news-feed li.active i.icon {
    color: #ec6714;
}

ul.nav-news-feed li.active a {
    color: #ec6714;
}

ul.nav-news-feed li a {
    color: #6d6e71;
}

ul.nav-news-feed li i {
    font-size: 18px;
    margin-right: 15px;
    float: left;
}

ul.nav-news-feed i.ion-ios-paper {
    color: rgb(45, 216, 45);
}

ul.nav-news-feed i.ion-ios-people {
    color: #662d91;
}

ul.nav-news-feed i.ion-ios-people-outline {
    color: #ee2a7b;
}

ul.nav-news-feed i.ion-chatboxes {
    color: #f7941e;
}

ul.nav-news-feed i.ion-images {
    color: #1c75bc;
}

ul.nav-news-feed i.ion-ios-videocam {
    color: #9e1f63;
}

ul.nav-news-feed i.ion-ios-star-outline {
    color: rgb(233, 233, 73);
}

/*Chat Block CSS*/

#chat-block {
    margin: 0 0 40px 0;
    text-align: center;
}

#chat-block .title {
    background: rgb(45, 216, 45);
    padding: 2px 20px;
    width: 70%;
    height: 30px;
    border-radius: 15px;
    position: relative;
    margin: 0 auto 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

ul.online-users {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    margin: 0;
}

ul.online-users li {
    list-style: none;
    position: relative;
    margin: 3px auto !important;
    padding-left: 3px;
    padding-right: 3px;
}

ul.online-users li span.online-dot {
    background: linear-gradient(to bottom, rgba(141, 198, 63, 1), rgba(0, 148, 68, 1));
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: absolute;
    bottom: -6px;
    border: 2px solid #fff;
    left: 0;
    right: 0;
    margin: auto;
}

/*==================================================
  Newsfeed Right Sidebar
  ==================================================*/

.suggestions.affix {
    position: fixed !important;
}

.follow-user {
    margin-bottom: 10px;
}

.follow-user div {
    margin-left: -10px;
    bottom: -6px;
    position: relative;
}


/*==================================================
  Create Post Box CSS
  ==================================================*/

.create-post {
    width: 100%;
    min-height: 90px;
    padding: 20px;
    margin-bottom: 20px;
}

.create-post .form-group {
    margin-bottom: 0;
    display: inline-flex;
}

.create-post .form-group .form-control {
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.create-post .form-group img.profile-photo-md {
    margin-right: 10px;
}

.create-post .tools {
    padding: 8px 0 10px;
}

.create-post .tools ul.publishing-tools {
    display: inline-block;
    text-align: left;
    margin: 0;
    padding: 5px 0;
}

.create-post .tools ul.publishing-tools li a {
    color: #6d6e71;
    font-size: 18px;
}

.create-post .tools ul.publishing-tools li a:hover {
    color: #ec6714;
}

/*==================================================
  Post Contents CSS
  ==================================================*/

.post-content {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top: 6px solid #d1d1d1;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.post-content img.post-image,
video.post-video,
.google-maps {
    width: 100%;
    height: auto;
}

.post-content .google-maps .map {
    height: 300px;
}

.post-content .post-container {
    padding: 8px;
}

.post-content .post-container .post-detail {
    margin-left: 65px;
    position: relative;
}

.post-content .post-container .post-detail .post-text {
    line-height: 24px;
    margin: 0;
}

.post-content .post-container .post-detail .reaction {
    position: absolute;
    right: 0;
    top: 0;
}

.post-content .post-container .post-detail .post-comment {
    display: inline-flex;
    margin: 10px auto;
    width: 100%;
}

.post-content .post-container .post-detail .post-comment img.profile-photo-sm {
    margin-right: 10px;
}

.post-content .post-container .post-detail .post-comment .form-control {
    height: 30px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    margin: 7px 0;
    min-width: 0;
}

/*==================================================
  Nearby People CSS
  ==================================================*/

.people-nearby .google-maps {
    background: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #f1f2f2;
    padding: 20px;
    margin-bottom: 20px;
}

.people-nearby .google-maps .map {
    height: 300px;
    width: 100%;
    border: none;
}

.people-nearby .nearby-user {
    padding: 20px 0;
    border-top: 1px solid #f1f2f2;
    border-bottom: 1px solid #f1f2f2;
    margin-bottom: 20px;
}

/*==================================================
  Friend List CSS = Newsfeed and Timeline
  ==================================================*/

.friend-list .friend-card {
    border-radius: 8px;

    border: 10px solid rgba(163, 163, 163, 0.15);
    overflow: hidden;
    margin-bottom: 8px;
}

.friend-list .friend-card .card-info {
    padding: 0 20px 5px;
}

.friend-list .friend-card .card-info img.profile-photo-lg {
    margin-top: -60px;
    border: 7px solid rgba(255, 255, 255, 0.3) !important;
}

/*==================================================
  Chat Room CSS
  ==================================================*/

/*Chat Contact List*/

.chat-room ul.contact-list li {
    width: 100%;
    margin-bottom: 0;
}

.chat-room ul.contact-list li a {
    border: none;
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f2 !important;
}

.chat-room ul.contact-list li a:hover,
.chat-room ul.contact-list li a:active,
.chat-room ul.contact-list li a:focus {
    border: none;
    border-bottom: 1px solid rgb(45, 216, 45) !important;
    border-radius: 0;
    cursor: pointer;
    background: none;
}

.chat-room ul.contact-list li a .contact {
    margin-left: 10px;
    margin-right: 10px;
}

.chat-room ul.contact-list li a .contact .msg-preview {
    margin-left: 50px;
}

.chat-room ul.contact-list li a .contact .msg-preview small {
    position: absolute;
    top: 20px;
    right: 10px;
}

.chat-room ul.contact-list li a .contact .msg-preview .chat-alert {
    background: red;
    text-align: center;
    border-radius: 4px;
    padding: 1px 6px;
    position: absolute;
    right: 10px;
    bottom: 20px;
    color: #fff;
}

.chat-room ul.contact-list li a .contact .msg-preview .seen,
.replied {
    color: #939598;
    position: absolute;
    right: 10px;
    bottom: 20px;
    font-size: 14px;
}

/*Chat Messages*/

.chat-room .chat-body ul.chat-message {
    padding: 0;
    margin: 0;
}

.chat-room .chat-body ul.chat-message li {
    list-style: none;
    margin-bottom: 20px;
}

.chat-room .chat-body ul.chat-message li.left .chat-item {
    background: rgba(141, 198, 63, .1);
    margin-left: 50px;
    padding: 5px 10px;
    position: relative;
    border-radius: 10px;
}

.chat-room .chat-body ul.chat-message li.left .chat-item::before {
    border-bottom: 10px solid transparent;
    border-right: 8px solid rgba(141, 198, 63, .1);
    border-top: 10px solid transparent;
    content: "";
    height: 0;
    left: -8px;
    position: absolute;
    top: 10px;
    width: 0;
}

.chat-room .chat-body ul.chat-message li.left .chat-item .chat-item-header {
    border-bottom: 1px dotted #caef8e;
    margin-bottom: 10px;
}

.chat-room .chat-body ul.chat-message li.right .chat-item {
    background: rgba(39, 170, 225, .1);
    margin-right: 50px;
    padding: 5px 10px;
    position: relative;
    border-radius: 10px;
}

.chat-room .chat-body ul.chat-message li.right .chat-item::after {
    border-bottom: 10px solid transparent;
    border-left: 8px solid rgba(39, 170, 225, .1);
    border-top: 10px solid transparent;
    content: "";
    height: 0;
    right: -8px;
    position: absolute;
    top: 10px;
    width: 0;
}

.chat-room .chat-body ul.chat-message li.right .chat-item .chat-item-header {
    border-bottom: 1px dotted #bce8f7;
    margin-bottom: 10px;
}

.chat-room .chat-body ul.chat-message li .chat-item .chat-item-header h5 {
    color: #4d4d4d;
}

.chat-room .chat-body ul.chat-message li .chat-item .chat-item-header small {
    position: absolute;
    top: 15px;
    right: 20px;
}

.chat-room .send-message {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 4px;
}

.chat-room .send-message button {
    background: #000;
    color: #fff;
}

/*CSS for custom scrollbar*/

.scrollbar-wrapper.scrollbar-dynamic {
    max-height: none;
}

.scrollbar-wrapper.tab-content {
    overflow-y: auto;
    height: 400px;
}

.scrollbar-wrapper.contact-list {
    overflow-y: auto;
    height: 400px;
    border: none;
    margin-bottom: 20px;
}

.scrollbar-wrapper {
    height: 100%;
    overflow: auto;
    width: 100%;
}

/*==================================================
  Media = Images and Videos CSS
  ==================================================*/

.media .media-grid {
    background: #f8f8f8;
    border: 1px solid #f1f2f2;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

.media .media-grid img.post-image,
video {
    width: 100%;
    cursor: pointer;
}

.media .media-grid .media-info {
    padding-left: 10px;
    padding-right: 10px;
}

.media .media-grid .media-info .reaction {
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f2;
}

.media .media-grid .media-info .user-info {
    padding: 10px 0;
}

.media .media-grid .media-info .user-info .user {
    margin: -10px 0 0 50px;
}

.modal-content .post-content {
    margin: 0;
}

/*==================================================
  Timeline
  ==================================================*/

.timeline-cover {

    top: 10px;
    background-position: center;
    background-size: cover;
    min-height: 360px;
    border-radius: 0 0 4px 4px;
    position: relative;
}

/*Timeline Menu for Large Screens*/

.timeline-cover .timeline-nav-bar {
    background: rgba(0, 0, 0, .7);
    width: 100%;
    position: absolute;
    bottom: 0px;
}

.timeline-cover .timeline-nav-bar .profile-info {
    position: absolute;
    text-align: center;
    padding: 0 20px;
    top: -120px;
    z-index: 1;
}

.timeline-cover .timeline-nav-bar .profile-info img.profile-photo {
    border: 10px solid rgba(255, 255, 255, 0.3) !important;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 10px solid #fff;
}

.timeline-cover .navbar-mobile .profile-info img.profile-photo {
    border: 10px solid rgba(255, 255, 255, 0.45) !important;
    background: transparent;
    display: block;
    border-radius: 50%;
    height: 150px;
    margin: auto;
    width: 150px;
}

.timeline-cover .timeline-nav-bar ul.profile-menu {
    margin: 0;
    display: table;
}

.timeline-cover .timeline-nav-bar .profile-menu li {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 0;
}

.timeline-cover .timeline-nav-bar .profile-menu li a {
    color: #E2DFD2;
    padding: 15px;
    text-decoration: none;
}

.timeline-cover .timeline-nav-bar .profile-menu li a.active {
    color: #ec6714;
}

.timeline-cover .timeline-nav-bar .profile-menu li a:hover {
    color: #ec6714;
}

.timeline-cover .timeline-nav-bar ul.follow-me {
    margin: 0;
    position: absolute;
    right: 0px;
    top: 2px;
}

.timeline-cover .timeline-nav-bar .follow-me li {
    padding: 6px 15px;
    color: #E2DFD2;
}

.follow-me li a {
    color: #E2DFD2;
}

.follow-me li a:hover {
    color: #ec6714;
    text-decoration: none;
}

/*Timeline Menu for Small Screens*/

.timeline-cover .navbar-mobile {
    bottom: -205px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.timeline-cover .navbar-mobile .mobile-menu ul {
    margin: 0 0 20px;
}

.timeline-cover .navbar-mobile .mobile-menu ul li {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.timeline-cover .navbar-mobile .mobile-menu ul li::after {
    content: "";
    height: 20px !important;
    background: none !important;
    border-right: 1px solid #bcbdbd !important;
    position: absolute !important;
    right: 0 !important;
}

.timeline-cover .navbar-mobile .mobile-menu ul li:nth-child(4)::after {
    content: none;
}

.timeline-cover .navbar-mobile .mobile-menu ul li a {

    color: inherit;
}

.timeline-cover .navbar-mobile .mobile-menu ul li a.active {
    color: #ec6714;
}

/*==================================================
  Timeline Sidebar Right
  ==================================================*/

.feed-item {
    text-align: left;
    margin-bottom: 13px;
    padding: 0 20px;
    position: relative;
}

.feed-item::before {
    border-left: 2px solid rgb(45, 216, 45);
    position: absolute;
    height: 30px;
    content: "";
    left: 0;
    top: 5px;
}

.feed-item img.profile-photo-sm {
    float: left;
    margin-right: 10px;
}

.feed-item .live-activity {
    border-bottom: 1px solid #f1f2f2;
}

/*==================================================
 Post Date
==================================================*/

.timeline .post-content {
    position: relative;
    overflow: visible;
}

.timeline .post-content::before {
    content: "";
    position: absolute;
    background: none;
    width: 1px;
    height: 98%;
    left: -170px;
    border-left: 2px solid rgb(45, 216, 45);
    top: 15px;
}

.timeline .post-content .post-date {
    position: absolute;
    margin-left: -150px;
}

.timeline .post-content .post-date::before {
    content: "";
    background: rgb(45, 216, 45);
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    left: -28px;
    top: 10px;
    border: 2px solid #fff;
}

.timeline .post-content img.post-image {
    border-radius: 4px 4px 0 0;
}

/*==================================================
  About Profile
  ==================================================*/

.about-profile {
    margin-bottom: 20px;
}

.about-profile .about-content-block {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(163, 163, 163, 0.35);
    line-height: 24px;
    margin-bottom: 10px;
}

.about-profile .about-content-block h4 i.icon-in-title {
    margin-right: 15px;
    color: #ec6714;
}

.about-profile .about-content-block .organization img.img-org {
    height: 40px;
    width: 40px;

}

.about-profile .about-content-block .organization .work-info {
    margin-left: 50px;
}

.about-profile .about-content-block .google-maps .map {
    height: 150px;
}

ul.interests span.int-icons {
    color: #fff;
    font-size: 25px;
    color: rgb(45, 216, 45);
    cursor: pointer;
}

.map-container {
    width: 100%;
}

.map-container iframe {
    display: block;
    width: 100%;
    position: relative;
    /* IE needs a position other than static */
    pointer-events: none;
}

.map-container iframe.clicked {
    pointer-events: auto;
}

/*==================================================
  Profile Album
  ==================================================*/

ul.album-photos {
    padding: 0;
    margin: 0 auto 20px;
    ;
    display: block;
    font-size: 0;
    text-align: center;
}

ul.album-photos li {
    list-style: none;
    display: inline-block;
    max-width: 195px;
    padding: 2px;
}

ul.album-photos li img {
    max-width: 100%;
}

/*==================================================
  Edit Profile
  ==================================================*/

/* Edit Profile Menu */

ul.edit-menu {
    margin-top: 12px;
    padding: 0 20px;
}

ul.edit-menu li {
    list-style: none;
    border-bottom: 1px solid #f1f2f2;
    padding: 15px 0;
    position: relative;
}

ul.edit-menu li.active {
    content: "";
    border-left: 2px solid rgb(45, 216, 45);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: auto;
    padding-left: 9px;
    margin-left: -10px;
}

ul.edit-menu li.active {
    content: "";
    border-right: 2px solid rgb(45, 216, 45);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    height: auto;
    padding-right: 9px;
    margin-right: -10px;
}

ul.edit-menu li i.icon {
    font-size: 18px;
}

ul.edit-menu li.active i.icon {
    color: rgb(45, 216, 45);
}

ul.edit-menu li a {
    font-size: 14px;
    color: #6d6e71;
    margin-left: 20px;
}

ul.edit-menu li.active a {
    color: rgb(45, 216, 45);
}

.edit-profile-container h4 i {
    margin-right: 15px;
    color: #ec6714;
}

/* Edit Profile Contents */

.edit-profile-container h4 i {
    margin-right: 15px;
    color: #ec6714;
}

.edit-block {
    margin-bottom: 30px;
}

.edit-block .form-group {
    margin-bottom: 15px;
}

.edit-block select.form-control {
    background: rgba(0, 0, 0, 0) url(../images/down-arrow.png) no-repeat scroll calc(100% - 10px) center / 8px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.edit-block ul.interests {
    margin: 0;
    margin-bottom: 10px;
}

.edit-block ul.interests li {
    background: transparent;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.71);
    border: 1px solid rgba(163, 163, 163, 0.3);
    color: rgba(163, 163, 163);
    padding: 5px 15px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 40px;
}

.edit-block ul.interests li a {
    color: rgba(163, 163, 163);
}

.edit-block ul.interests li a i.icon {
    font-size: 18px;
}

.edit-block .btn-primary {
    width: fit-content;
    display: block;
    margin: 0 auto;
}

.gender .custom-label {
    padding-left: 0;
}

/* Toggle Notification Switch */

.toggle-switch {
    text-align: right;
}

.toggle-switch .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-top: 22px;
}

.toggle-switch .switch input {
    display: none;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #ec6714;
}

input:focus+.slider {
    box-shadow: 0 0 1px rgb(45, 216, 45);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*==================================================
  Contact Us
  ==================================================*/

.contact-map {
    height: 250px;
}

.verify_email_container {
    justify-content: center;
    margin-top: 25px;
}

.contact-us {
    background: #fff;
    padding: 40px;
    margin-top: -140px;
    border-radius: 4px;
}

.contact-us form.contact-form {
    margin-bottom: 20px;
}

.contact-us form.contact-form .form-group {
    position: relative
}

.contact-us form.contact-form .form-group i {
    color: #f1f2f2;
    font-size: 16px;
    left: 10px;
    position: absolute;
    top: 3px;
}

.contact-us form.contact-form .form-group input.form-control {
    padding-left: 30px;
}

.contact-us form.contact-form .form-group textarea {
    box-shadow: none;
    font-size: 12px;
    border: 1px solid #f1f2f2;
}

.contact-us .reach {
    margin: 10px 0;
    position: relative;
    line-height: 40px;
}

.contact-us .reach span {
    border: 1px solid #f1f2f2;
    position: absolute;
    color: #8DC63F;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 50px;
    text-align: center;
    font-size: 20px;
}

.contact-us .reach p {
    margin-left: 50px;
}

.contact-us ul.social-icons {
    margin-top: 20px;
}

/*==================================================
  FAQ Page
  ==================================================*/

.page-title-section.faq {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://placehold.it/1920x500") fixed no-repeat;
    background-size: cover;
    background-position: center;
    padding: 90px 0 110px;
    color: #fff;
}

.page-title-section.faq h1 {
    color: #fff;
}

.faq .page-search {
    max-width: 60%;
    margin: auto;
}

.faq .page-search .search-form {
    position: relative;
}

.faq .page-search .search-form .form-control {
    border: none;
    padding: 10px 30px;
    border-radius: 100px;
    height: 45px;
    border: 1px solid #fff;
}

.faq .page-search .search-form button.btn-primary {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    font-size: 20px;
    padding: 5px;
}

.faq-cat-list {
    text-align: center;
    border: none;
    font-family: 'Agency FB', sans-serif;
    font-size: 0;
    margin-top: -90px;
    margin-bottom: 50px;
}

.faq-cat-list.nav-tabs>li {
    float: none;
    display: inline-block;
    font-size: 25px;
}

.faq-cat-list.nav-tabs>li>a {
    border: none;
    color: #fff;
    border-radius: 0;
    margin: 0;
    font-size: 25px;
    padding: 40px 30px;
    position: relative;
    min-width: 200px;
}

.faq-cat-list.nav-tabs>li>a:hover {
    transform: scale(1.1);
    z-index: 1;
    transition: transform .5s;
}

.faq-cat-list.nav-tabs>li.active>a,
.faq-cat-list.nav-tabs>li.active>a:focus,
.faq-cat-list.nav-tabs>li.active>a:hover {
    border: none;
    color: #fff;
}

.faq-cat-list.nav-tabs>li.active>a::after {
    content: "";
    background: #000;
    height: 40px;
    width: 1px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -20px;
}

.faq-cat-list.nav-tabs>li:nth-child(1)>a {
    background: #40ccf2;
}

.faq-cat-list.nav-tabs>li:nth-child(2)>a {
    background: #39bcea;
}

.faq-cat-list.nav-tabs>li:nth-child(3)>a {
    background: #29abe2;
}

.faq-cat-list.nav-tabs>li:nth-child(4)>a {
    background: #1ea2d1;
}

.faq-cat-list.nav-tabs>li>a>i {
    display: block;
    font-size: 30px;
}

.faq-headline .item-title {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.faq-headline .item-title i {
    color: #ec6714;
    margin-right: 10px;
}

/* FAQ page contact sidebar */

.faq_contact .reach-out .method {
    margin-bottom: 15px;
    font-weight: 700;
}

.faq_contact .reach-out .method a {
    background: #000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 4px;
    display: block;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
}

.faq_contact .reach-out .method a:hover,
.faq_contact .reach-out .method a:active,
.faq_contact .reach-out .method a:focus {
    box-shadow: 0 0 12px rgba(0, 0, 0, .2);
    text-decoration: none;
    transition: box-shadow .5s;
}

.faq_contact .reach-out .method.by-forum a {
    background: #f7931e;
}

.faq_contact .reach-out .method.by-ticket a {
    background: #ed1e79;
}

.faq_contact .reach-out .method.by-email a {
    background: #29abe2;
}

.faq_contact .reach-out .method.by-phone a {
    background: #93278f;
}

.faq_contact .reach-out .method i {
    font-size: 15px;
    margin-right: 10px;
}

/*==================================================
  404 Error page
  ==================================================*/

.error-page {
    display: table;
    text-align: center;
    width: 100%;
    height: 100vh;
}

.error-page .error-content {
    display: table-cell;
    vertical-align: middle;
}

.error-page .error-content img {
    margin: auto;
}

.error-page .error-content h1.error-title {
    font-family: "Agency FB";
    color: #6d6e71;
    font-size: 60px;
}

.error-page .error-content p {
    font-size: 16px;
}

.error-page .error-content form .form-group {
    width: 50%;
    margin: 0 auto 15px;
}

.error-page .error-content form .form-group .form-control {
    border-radius: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

/*==================================================
  Site Footer
  ==================================================*/

#footer {
    background: #fff;
    position: relative;
}

#footer::before {
    content: "";
    background: linear-gradient(to right, #ffffff 0%, #53cbf1 50%, #ffffff 100%);
    height: 5px;
    width: 100%;
    position: absolute;
}

.footer-wrapper {
    padding: 50px 0;
    float: left;
    width: 100%;
}

img.footer-logo {
    margin-bottom: 20px;
}

ul.social-icons {
    margin: 0;
}

ul.social-icons li {
    background: transparent;
    width: 30px;
    height: 30px;
    border: 1px solid #f1f2f2;
    border-radius: 4px;
    margin: 3px;
    text-align: center;
}

ul.social-icons li a {
    color: #6d6e71;
    font-size: 15px;
    line-height: 30px;
}

ul.social-icons li a:hover {
    color: #ec6714;
    transition: all 1s;
}

ul.footer-links li {
    line-height: 25px;
}

ul.footer-links li a {
    color: #6d6e71;
}

ul.footer-links li a:hover {
    color: #ec6714;
}

ul.contact {
    margin: 0;
    padding: 0;
}

ul.contact li {
    list-style: none;
    padding: 15px 0;
    border-bottom: 1px solid #f1f2f2;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
}

ul.contact li i {
    font-size: 18px;
    margin-right: 20px;
    color: #ec6714;
}

/*==================================================
  CSS for width 992px
  ==================================================*/

@media only screen and (max-width: 992px) {
    section h1.section-title {
        font-size: 175px;
        margin-bottom: -40px;
    }

    #features .feature-item {
        margin-bottom: 20px;
    }

    #features .item {
        margin-bottom: 20px;
    }

    .timeline #page-contents {
        margin-top: 235px !important;
    }

    ul.edit-menu {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .faq-cat-list.nav-tabs>li>a {
        min-width: 150px;
        padding: 30px 15px;
    }

    .error-page .error-content form .form-group {
        width: 80%;
    }
}

@media only screen and (max-width: 425px) {}

/*==================================================
  CSS for width 768px
  ==================================================*/

@media only screen and (max-width: 768px) {
    .menu ul.main-menu li.dropdown ul.dropdown-menu li {
        background: #27262d;
    }

    #header-inverse nav.menu .navbar-collapse {
        background: rgba(0, 0, 0, 0.9);
    }

    .sign-up-form {
        left: 0;
        right: 0;
        margin: auto;
    }

    section h1.section-title {
        font-size: 90px !important;
        margin-bottom: 0 !important;
    }

    #features .feature-item {
        margin-bottom: 20px;
    }

    #site-facts .circle {
        width: 100%;
        border-radius: 1000px;
    }

    .nearby-user {
        text-align: center;
    }

    .nearby-user button.btn-primary {
        float: none !important;
    }

    .post-content .post-container .post-detail .reaction {
        position: relative;
    }

    #footer .footer-wrapper ul {
        margin-bottom: 20px;
    }

    .contact-us .col-sm-7 {
        margin-bottom: 20px !important;
    }

    .intro-texts {
        margin-top: 100px;
        transform: translateY(0);
        margin-bottom: 80px;
        text-align: center;
    }

    .reg-form-container {
        padding: 30px !important;
        text-align: center;
    }

    .reg-form-container .reg-options::before {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        height: 50px;
        width: 70%;
        left: 0;
        right: 0;
        margin: auto;
        top: -50px;
        transform: translateX(0) translateY(0);
        border-radius: 8px 8px 0 0;
    }

    .reg-form-container .reg-options .nav-tabs {
        left: 50%;
        transform: translateY(0) translateX(-50%) rotate(0);
        top: -40px;
    }

    .reg-form-container .reg-options .nav-tabs li {
        margin: 0;
    }

    .reg-form-container .reg-options .nav-tabs li:after {
        right: 0;
    }

    .reg-form-container::before {
        content: none;
    }

    .reg-form-container::after {
        content: none;
    }

    .reg-form-container .nav-tabs>li>a {
        padding-left: 10px;
        padding-right: 10px;
        min-width: 50px;
    }

    .toggle-switch {
        text-align: right;
    }

    .toggle-switch .switch {
        margin-top: 0px;
    }

    .faq-content {
        margin-bottom: 30px;
    }

    .faq .page-search {
        max-width: 90%;
    }

    .faq-cat-list.nav-tabs>li>a {
        width: 100px;
        min-width: initial;
        padding: 20px 10px;
        font-size: 16px;
    }

    .faq-cat-list.nav-tabs>li>a>i {
        font-size: 20px;
    }

    .error-page .error-content form .form-group {
        width: 100%;
    }
}

/*==================================================
  CSS for width 480px
  ==================================================*/

@media only screen and (max-width: 480px) {
    .sign-up-form {
        left: 0;
        right: 0;
        margin: auto;
        width: 90%;
        overflow: hidden;
        border-radius: 0 0 4px 4px;
    }

    #app-download ul.app-btn li button {
        margin-bottom: 20px;
    }

    .post-contents .post-container .post-detail .reaction {
        position: relative;
    }

    .faq-cat-list.nav-tabs>li>a {
        width: 60px;
    }

    .menu ul.main-menu li.dropdown ul.dropdown-menu li {
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
}

/*==================================================
  Slide Animations
  ==================================================*/

.slideUp,
.slideDown {
    visibility: hidden;
}

.slideDown.appear {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(8%);
    }

    65% {
        transform: translateY(-4%);
    }

    80% {
        transform: translateY(4%);
    }

    95% {
        transform: translateY(-2%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }

    50% {
        -webkit-transform: translateY(8%);
    }

    65% {
        -webkit-transform: translateY(-4%);
    }

    80% {
        -webkit-transform: translateY(4%);
    }

    95% {
        -webkit-transform: translateY(-2%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

.slideUp.appear {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(-8%);
    }

    65% {
        transform: translateY(4%);
    }

    80% {
        transform: translateY(-4%);
    }

    95% {
        transform: translateY(2%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }

    50% {
        -webkit-transform: translateY(-8%);
    }

    65% {
        -webkit-transform: translateY(4%);
    }

    80% {
        -webkit-transform: translateY(-4%);
    }

    95% {
        -webkit-transform: translateY(2%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

/*==================================================
  Scroll Down Arrow
  ==================================================*/

.arrows {
    width: 60px;
    height: 72px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -90px;
}

.arrows path {
    stroke: #27aae1;
    fill: transparent;
    stroke-width: 1px;
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite;
}

@keyframes arrow {
    0% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes arrow
/*Safari and Chrome*/

    {
    0% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.arrows path.a1 {
    animation-delay: -1s;
    -webkit-animation-delay: -1s;
}

.arrows path.a2 {
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s;
}

.arrows path.a3 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

/*==================================================
  Preloader Animation CSS
  ==================================================*/
.spinner {
    width: 60px;
    height: 60px;
    background-image: url(/images/Paying-it-forward-logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    border-radius: 50%;
    top: 48%;
    left: 48%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);

    /* Professional animation timing */
    animation:
        floatPulse 3.6s infinite ease-in-out,
        glow 3.2s infinite cubic-bezier(0.45, 0, 0.55, 1),
        bounce 1.7s infinite ease-in-out;
}
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    70% {
        transform: rotate(45deg);
    }
    90% {
        transform: rotate(-45deg);
    }
}
@keyframes floatPulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    20% {
        transform: translateY(-25px) scale(1.08);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    40% {
        transform: translateY(0) scale(1);
    }

    60% {
        transform: translateY(-15px) scale(1.05);
        animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    }

    80% {
        transform: translateY(0) scale(1);
    }
}
@keyframes smoothRotate {
    0% {
      transform: rotate(0deg);
    }
    10% {
      transform: rotate(100deg); /* Slow start */
    }
    30% {
      transform: rotate(800deg); /* Accelerating */
    }
    70% {
      transform: rotate(2800deg); /* Max speed */
    }
    90% {
      transform: rotate(3400deg); /* Decelerating */
    }
    100% {
      transform: rotate(3600deg); /* Exactly 10 full spins */
    }
  }


@keyframes glow {

    0%,
    100% {
        box-shadow:
            0 0 12px rgba(0, 0, 0, 0.3),
            0 0 8px rgba(100, 200, 255, 0.4);
    }

    25% {
        box-shadow:
            0 0 12px rgba(0, 0, 0, 0.3),
            0 0 25px rgba(100, 200, 255, 0.9);
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
    }

    75% {
        box-shadow:
            0 0 12px rgba(0, 0, 0, 0.3),
            0 0 15px rgba(100, 200, 255, 0.6);
    }
}

#spinner-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
}

.notification-pr {
    height: 20px;
    width: 40px;
}

.notification-bell {
    height: 20px;
    width: 20px;
}

.count {
    position: relative;
    top: 0;
    right: 0;
    margin-right: 5px;
    margin-top: 1px;
}

.preview-icon {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 5px;
}

.menu-icon {
    margin-right: 5px;
    height: 20px;
    width: 20px;
}

.day-night-icon {
    margin-right: 5px;
    height: 40px;
    width: 80px;
    margin-bottom: 0;
}

.follow {
    color: #ec6714;
    padding-inline: 15px;
    text-decoration: none;
}

.follow:hover {
    border-radius: 14px;
    color: #ec6714;
    text-decoration: underline !important;
}

.important_links a {
    margin: 0 2px 0 2px;
    line-height: 26px !important;
    color: inherit !important;
    font-size: 15px !important;
}

.important_links a:hover {
    text-decoration: none;
    color: #ec6714 !important;
}

.LLC-link {
    color: inherit;
    font-size: 11px;
}

.LLC-link:hover {
    text-decoration: none;
    color: #ec6714;
}

@media only screen and (max-width: 320px) {
    .daynight_gif {
        margin: 0;
    }

    .header_dropdown_icons li i {
        margin: 0;
    }

    .menu form {
        background: #27262d !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        margin-top: -8px !important;
    }

    .navbar-nav {
        margin: 10px 0 0 0 auto !important;
    }

    .guest-primary {
        background: #27262d !important;
        color: #ec6714 !important;
        font-size: 14px;
        position: relative;
        outline: none;
        transition: all 0.9s !important;
        margin: 0 auto !important;
        width: 95% !important;
    }

    .guest-primary:hover {
        background: #27262d !important;
        transition: all 0.9s;
    }

    .btn-primary {
        padding: 7px 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.18) !important;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2)) !important;
        color: #ec6714 !important;
        font-size: 14px;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        position: relative;
        outline: none;
        transition: all 0.9s !important;
    }

    .btn-primary:hover {
        text-decoration: none !important;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
        transition: all 0.9s;
        border-top: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-left: 1px solid rgba(0, 0, 0, 0.18) !important;
        transition: all 0.9s;
    }

    .custom_top {
        margin: 0px 0 20px 0 !important;
    }

    .all-terms-faq {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
}

@media only screen and (max-width: 375px) {
    .header_dropdown_icons li .header_dropdown_titles {
        left: none;
    }

    .menu form {
        background: #27262d !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        margin-top: -8px !important;
    }

    .navbar-nav {
        margin: 10px 0 0 0 auto !important;
    }

    .guest-primary {
        background: #27262d !important;
        color: #ec6714 !important;
        font-size: 14px;
        position: relative;
        outline: none;
        transition: all 0.9s !important;
        margin: 0 auto !important;
        width: 95% !important;
    }

    .guest-primary:hover {
        background: #27262d !important;
        transition: all 0.9s;
    }

    .btn-primary {
        padding: 7px 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2)) !important;
        color: #ec6714 !important;
        font-size: 14px;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        position: relative;
        outline: none;
        transition: all 0.9s !important;
    }

    .btn-primary:hover {
        text-decoration: none !important;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
        transition: all 0.9s;
        border-top: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-left: 1px solid rgba(0, 0, 0, 0.18) !important;
        transition: all 0.9s;
    }

    .custom_top {
        margin: 0px 0 20px 0 !important;
    }

    .all-terms-faq {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
}

@media only screen and (max-width: 425px) {
    .header_dropdown_icons li .header_dropdown_titles {
        left: none;
    }

    .menu form {
        background: #27262d !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        margin-top: -7.5px !important;
    }

    .navbar-nav {
        margin: 10px 0 0 0 auto !important;
    }

    .guest-primary {
        background: #27262d !important;
        color: #ec6714 !important;
        font-size: 14px;


        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        position: relative;
        outline: none;
        transition: all 0.9s !important;
        margin: 0 auto !important;
        width: 95% !important;
    }

    .guest-primary:hover {
        background: #27262d !important;
        transition: all 0.9s;

    }

    .btn-primary {
        padding: 7px 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.18) !important;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2)) !important;
        color: #ec6714 !important;
        font-size: 12px;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        position: relative;
        outline: none;
        transition: all 0.9s !important;
    }

    .btn-primary:hover {
        text-decoration: none !important;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
        transition: all 0.9s;
        border-top: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-left: 1px solid rgba(0, 0, 0, 0.18) !important;
        transition: all 0.9s;
    }

    .custom_top {
        margin: 0px 0 20px 0 !important;
    }
}

@media only screen and (max-width: 768px) {
    .custom_top {
        margin: 0px 0 20px 0 !important;
    }
}

@media only screen and (max-width: 984px) {
    .custom_top {
        margin: 0px 0 20px 0 !important;
    }
}

.dao_image img {
    border-radius: 8px;
    width: 300px;
    height: auto;
}

.custom_top {
    margin: 10px;
}

.faq {
    margin-top: 50px;
    padding: 0px 0px 50px;
    position: relative;
    background: #00000000;
}

.faq .right-shape {
    position: absolute;
    right: 0;
    top: 350px;
}

.faq .accordion .panel {
    margin-bottom: 20px;
    background: var(--custom-color);
    border-radius: 12px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.1);
    position: relative;
}

.faq .accordion .panel .panel-body {
    padding: 4px 20px 7px;
    background: url("/images/background-PIF-8-jpg.jpg");
    border-radius: 10px;
}

.faq .accordion .panel-title {
    display: block;
    width: 100%;

    padding: 20px 10px 20px 10px;
    font-size: 18px;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(163, 163, 163, 0.17);
    margin-bottom: 15px;
    color: var(--custom-color);
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    /* transition: all ease .1s; */
}

.faq .accordion .panel-title::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 100%;
    border-radius: 3px 0px 0px 3px;
    right: 0;
    top: 0;
    text-align: center;
}

.faq .accordion .panel-title::before {
    color: var(--custom-color);
    position: absolute;
    right: 0;
    bottom: -10%;
    transform: translateY(50%);
    rotate: 180deg;
    width: 40px;
    text-align: center;
    z-index: 1;
    font-size: 12px;
    transition: 0s ease-in;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;

    margin-right: 10px;
    font-family: "Font Awesome 6 Free";
    content: "\f139";
    font-weight: 900;
}

.faq .accordion .panel-title[aria-expanded=true]::before {
    font-family: "Font Awesome 6 Free";
    content: "\f139";
    font-weight: 900;
}

.col-12.no-padding.accordion-head {
    width: 300px;
}

.all-terms-faq {
    height: fit-content;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 40px;
    margin-top: 0px;

    color: var(--custom-color);
    border-radius: 10px;
    padding: 0px 5px 25px 5px;

    background: rgba(255, 255, 255, 0.07);

}

.all-terms-faq a {
    font-weight: 500;
    color: #ec6714;
    text-decoration: underline;
}

.all-terms-faq a:hover {
    text-decoration: none;
    color: #ec6714;
}

#userMentionsDropdown {
    position: absolute;
    top: -25 !important;
    left: 20px !important;
    z-index: 1000;

    background-color: rgba(238, 238, 238, 0.8);
    border: 1px solid #ccc;
    max-height: 450px;
    max-width: fit-content;
    overflow-y: auto;
    padding: 10px;
}

.mentioned_username {
    color: #ec6714;
}

/*
.trending-hashtag {
    /*background-color: #f5f5f5;
    background-color: transparent;
    margin-bottom: 10px;
    height: fit-content;
    /*padding: 10px 15px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgba(163, 163, 163, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
*/
.trending-hashtag h5 {
    margin: 0;
    font-size: 1.2em;
}

.trending-hashtag h5 a {
    text-decoration: none;
    color: #ec6714;
    transition: color 0.3s;
}

.trending-hashtag h5 a:hover {

    text-decoration: underline;
}

.trending-hashtag p {
    margin: 0;
    color: #888;
    font-size: 0.9em;
}

.comment_icon {
    background: #99999910;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px 5px;
    font-size: 20px;

    color: #929293;
}

.fa-heart:hover {
    color: rgb(223, 67, 67);
}

.fa-heart-active {
    color: rgb(223, 67, 67) !important;
}

.fa-star:hover {
    color: rgb(233, 233, 73);
}

.fa-star-active {
    color: rgb(233, 233, 73) !important;
}

/**************START/ My Dashboard **************/

/* notificaion  bar styles*/

.notification-item {
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
    padding: 10px 15px;
    text-decoration: none;
    color: inherit;
}

.notification-item:hover {
    background-color: #e2e2e2;
    transition: background-color 0.3s;
    text-decoration: none;
    border-radius: 5px;
    /* Slightly darker shade for hover */
}

.notification-thumbnail {
    margin-right: 10px;
    flex-shrink: 0;
}

.notification-icon {

    /* Adjust to fit with your primary color */
    padding: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
}

.notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.notification-title {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-time {
    font-size: 12px;
    color: #aaa;
    text-decoration: none;
    /* Slightly lighter text for the timestamp */
    margin-top: 5px;
}

.notification-divider {
    margin: 5px 0;
    background-color: rgba(163, 163, 163, 0.25);
    height: 1px;

    /* Adjust the color to fit with your theme */
}

.dashboard-card {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    padding: 20px;
    /*background-color: #f9f9f9;*/
    border-radius: 10px;
    background: transparent;
    /*background: url('/images/animated-gif7.gif') no-repeat center center;
    background: url('/images/geometricBg2.png') rgba(0, 0, 0, 0.51);
    background-blend-mode: darken;*/
    /*background: url('/images/geometricBg2.png');*/
    /*background-size: cover;
    width: 98%;*/
    margin-inline: auto;
}

.card {

    background-color: transparent;
    border-radius: 8px;
    margin: 2px;
    padding: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.71);
    transition: 0.3s;
}

.card-dashboard {

    background-color: transparent;
    font-weight: 300 !important;
    color: inherit;
    border: 1px solid rgba(163, 163, 163, 0.75);
    border-radius: 8px;
    margin: 2px;
    padding: 10px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
    transition: 0.3s;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.45);
}

.btn-outline-secondary {
    color: #fff;
    background-color: transparent;
    background-image: none;
    border-color: #32d968cc;
    background: rgba(0, 0, 0, 0.35);
    width: 100%;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #5a6268;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-outline-secondary-dashboard {
    color: #fff;


    border-color: #00cb2499;
    background: rgba(0, 0, 0, 0.35);
    width: 100%;
}

.btn-outline-secondary-dashboard:hover {
    color: #32d968cc;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-info {
    width: 100%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #32d968cc, #28b86499);
    border: none;
    transition: background 0.3s ease;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    color: white;
    cursor: pointer;
}

.btn-info:hover {
    background: linear-gradient(135deg, #32d968ee, #28b864cc);
    transform: translateY(-3px);
}

.btn-info-dashboard {
    width: 100%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #00000078, #00cb2466);
    border: none;
    transition: background 0.3s ease;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    color: white;
    cursor: pointer;
}

.btn-info-dashboard:hover {
    background: linear-gradient(135deg, #00cb2499, #000000cc);
    color: white;
    /*transform: translateY(-3px);*/
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.card-body p.text-muted {

    color: #fff;
    margin-bottom: 10px;
    font-size: 14px;
}

.btn-sm {
    padding: 7px 17px;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    border-radius: 4px;
}

.btn-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary,
.btn-outline-secondary {
    border-radius: 4px;
}

/************START/ Privacy Policy & Terms Dropdown ************/

.topbarclass_terms1 body {
    margin: 0px;
    text-align: center;
}

.topbarclass_terms1 div#topbar_terms1>#sections_btn_holder_terms1 {

    margin: 0 auto;
    position: relative;
    width: fit-content;
    height: 46px;
    border-radius: 10px;

}

div#topbar_terms1>#sections_btn_holder_terms1 :hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30%;
}

div#topbar_terms1>#sections_btn_holder_terms1>button {
    background-color: rgba(163, 163, 163, 0.15);
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--custom-color);
    font-weight: 400;
    padding: 10px;
}

div#topbar_terms1>#sections_btn_holder_terms1>button #navarrow_terms1 {
    box-shadow: none;
    border-radius: none;
    padding: none;
    color: #ec6714;
}

.topbarclass_terms1 div#topbar_terms1>#sections_panel_terms1 {
    position: relative;
    height: 0px;
    width: 100%;
    background: transparent;
    top: 5px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 3;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: height 0.3s linear 0s;
}

.topbarclass_terms2 body {
    margin: 0px;
    text-align: center;
}

.topbarclass_terms2 div#topbar_terms2>#sections_btn_holder_terms2 {

    margin: 0 auto;
    position: relative;
    width: fit-content;
    height: 46px;
    border-radius: 10px;

}

div#topbar_terms2>#sections_btn_holder_terms2 :hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30%;
}

div#topbar_terms2>#sections_btn_holder_terms2>button {
    background-color: rgba(163, 163, 163, 0.15);
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--custom-color);
    font-weight: 400;
    padding: 10px;
}

div#topbar_terms2>#sections_btn_holder_terms2>button #navarrow_terms2 {
    box-shadow: none;
    border-radius: none;
    padding: none;
    color: #ec6714;
}

.topbarclass_terms2 div#topbar_terms2>#sections_panel_terms2 {
    position: relative;
    height: 0px;
    width: 100%;
    background: transparent;
    top: 5px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 3;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: height 0.3s linear 0s;
}

/************END/ Privacy Policy & Terms Dropdown ************/

/************START/ More. . . Dropdown ************/

.topbarclass_more2 body {
    margin: 0px;
    text-align: center;
}


.topbarclass_more2 div#topbar_more2>#sections_btn_holder_more2 {

    margin: 0 auto;
    position: relative;
    width: fit-content;
    height: 46px;
    border-radius: 10px;

}

div#topbar_more2>#sections_btn_holder_more2 :hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30%;
}

div#topbar_more2>#sections_btn_holder_more2>button {
    background-color: rgba(163, 163, 163, 0.15);
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--custom-color);
    font-weight: 400;
    padding: 10px;
}

div#topbar_more2>#sections_btn_holder_more2>button #navarrow_more2 {
    box-shadow: none;
    border-radius: none;
    padding: none;
    color: #ec6714;
}

.topbarclass_more2 div#topbar_more2>#sections_panel_more2 {
    position: relative;
    height: 0px;
    width: 100%;
    background: transparent;
    top: 5px;
    border-radius: 0px 0px 8px 8px;
    overflow-y: scroll;
    z-index: 3;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: height 0.3s linear 0s;
}


.topbarclass_more1 body {
    margin: 0px;
    text-align: center;
}


.topbarclass_more1 div#topbar_more1>#sections_btn_holder_more1 {

    margin: 0 auto;
    position: relative;
    width: fit-content;
    height: 46px;
    border-radius: 10px;

}

div#topbar_more1>#sections_btn_holder_more1 :hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30%;
}

div#topbar_more1>#sections_btn_holder_more1>button {
    background-color: rgba(163, 163, 163, 0.15);
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--custom-color);
    font-weight: 400;
    padding: 10px;
}

div#topbar_more1>#sections_btn_holder_more1>button #navarrow_more1 {
    box-shadow: none;
    border-radius: none;
    padding: none;
    color: #ec6714;
}

.topbarclass_more1 div#topbar_more1>#sections_panel_more1 {
    position: relative;
    height: 0px;
    width: 100%;
    background: transparent;
    top: -25px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 3;
    margin-top: 25px;
    margin-bottom: 15px;
    transition: height 0.3s linear 0s;
}

/************END/ More. . . Dropdown ************/

/************START/ NewsFeed Dropdown ************/

.topbarclass_newsfeed body {
    margin: 0px;
    text-align: center;
}

.topbarclass_newsfeed div#topbar_newsfeed>#sections_btn_holder_newsfeed {

    margin: 0 auto;
    position: relative;
    width: fit-content;
    height: 46px;
    border-radius: 10px;

}

div#topbar_newsfeed>#sections_btn_holder_newsfeed :hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30%;
}

div#topbar_newsfeed>#sections_btn_holder_newsfeed>button {
    background-color: rgba(163, 163, 163, 0.15);
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--custom-color);
    font-weight: 400;
    padding: 10px;
}

div#topbar_newsfeed>#sections_btn_holder_newsfeed>button #navarrow_newsfeed {
    box-shadow: none;
    border-radius: none;
    padding: none;
    color: #ec6714;
}

.topbarclass_newsfeed div#topbar_newsfeed>#sections_panel_newsfeed {
    position: relative;
    height: 0px;
    width: 100%;
    background: transparent;
    top: 5px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 3;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: height 0.3s linear 0s;
}

/************END/ NewsFeed Dropdown ************/

/************START/ profile_settings Dropdown ************/

.topbarclass_profile_settings body {
    margin: 0px;
    text-align: center;
}

.topbarclass_profile_settings div#topbar_profile_settings>#sections_btn_holder_profile_settings {

    margin: 0 auto;
    position: relative;
    width: fit-content;
    height: 66px;
    border-radius: 10px;

}

div#topbar_profile_settings>#sections_btn_holder_profile_settings :hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30%;
}

div#topbar_profile_settings>#sections_btn_holder_profile_settings>button {
    background-color: rgba(163, 163, 163, 0.15);
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--custom-color);
    font-weight: 400;
    padding: 10px;
}

div#topbar_profile_settings>#sections_btn_holder_profile_settings>button #navarrow_profile_settings {
    box-shadow: none;
    border-radius: none;
    padding: none;
    color: #ec6714;
}

.topbarclass_profile_settings div#topbar_profile_settings>#sections_panel_profile_settings {
    position: relative;
    height: 0px;
    width: 100%;
    background: transparent;
    top: 0px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 3;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: height 0.3s linear 0s;
}

.custom-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out;
}

/* Default state */
.custom-button {
    background: linear-gradient(to right, #3498db, #2980b9);
    color: #fff;
    border: 2px solid #3498db;
}

/* Hover state */
.custom-button:hover {
    background: linear-gradient(to right, #2980b9, #3498db);
    color: #fff;
    border: 2px solid #2980b9;
}

/* Style for the container */
.nk-pps-steps {
    display: flex;
    justify-content: center
}

/* Style for each step */
.nk-pps-steps .step {
    width: 10px;
    /* Adjust the width as per your design */
    height: 10px;
    /* Adjust the height as per your design */
    background-color: #ccc;
    /* Set the background color for inactive steps */
    border-radius: 50%;
    /* Make it a circle */
    display: inline-block;
    margin-right: 5px;
}

/* Style for the active step */
.nk-pps-steps .step.active {
    background-color: #007bff;
    /* Set the background color for the active step */
    /* Add any additional styles for the active step */
}

/* User DashBoard pop up question*/
.chart_question {

    width: fit-content;
    z-index: 1;
    cursor: help;
}

.gizmo_chart_question {
    position: relative;


    width: fit-content;
    z-index: 9999;
    cursor: help;
}

.chart_question_icon_my_dashboard {
    position: relative;


    border-radius: 50%;
    /*-o-border-radius: 50%;*/
    /*-ms-border-radius: 50%;*/
    /*-moz-border-radius: 50%;*/
}

.chart_question_icon_my_dashboard img {
    width: 10px;
    height: 15px;
    fill: #000000;
}

/*
  .chart_question_icon_my_dashboard img:hover {
	background-color: rgba(0, 0, 0, 0.4);
  }
  */

/* User DashBoard pop up question*/

.qb {
    position: absolute;
    z-index: 5;


    display: none;
}

.chart_question:hover .qb {
    display: block;

}

.gizmo_chart_question:hover .qb {
    display: block;

}

.gizmo_answer_bubble {
    position: relative;
    background: rgba(255, 255, 255, 1.0);
    color: #000000;
    margin-left: -100px;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    width: 100%;
    max-width: 280px;
    min-width: 200px;
    border-radius: 10px;
    padding: 0px;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.answer_bubble {
    position: relative;
    background: rgba(255, 255, 255, 1.0);
    color: #000000;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    width: 100%;
    max-width: 280px;
    min-width: 280px;
    border-radius: 10px;
    padding: 0px;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.qb_earnings {
    position: absolute;
    z-index: 5;


    display: none;
}

.chart_question:hover .qb_earnings {
    display: block;
}

.gizmo_chart_question:hover .qb_earnings {
    display: block;
}

.answer_bubble_earnings {
    position: absolute;
    left: -45px;
    background: rgba(255, 255, 255, 1.0);
    color: #000000;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    width: 100%;
    max-width: 280px;
    min-width: 280px;
    border-radius: 10px;
    padding: 0px;
    text-align: center;
    padding: 10px 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.swal2-popup {
    font-size: 15px !important;
}

#posts-loading {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #ec6714 90%, #0000);
    background:
        var(--_g) 0% 50%,
        var(--_g) 50% 50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%
    }

    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%
    }

    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%
    }

    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%
    }
}

.repost-hover:hover {
    background-color: rgba(163, 163, 163, 0.13)
}

.top-navigation-icons a img {
    text-decoration: none;
}

.top-navigation-icons a:hover {
    text-decoration: none;
    transform: scale(1.1);
}

.top-navigation-icons a img:hover {
    text-decoration: none;
    transform: scale(1.1);
}

.top-navbar {
    background-color: #e6e8e6de;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    position: fixed;
    width: 100%;
    z-index: 9999 !important;
}

.custom_navbar {
    padding: 5px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom_navbar .logo {
    display: flex;
    align-items: center;
}

.custom_navbar .logo #logo-white {
    height: auto;
    width: 75px;
}

.custom_navbar .logo #platform-name {
    margin-top: 7px;
    height: auto;
    width: 212px;
}

@media only screen and (max-width: 768px) {
    .custom_navbar .logo #platform-name {
        margin-top: 6px;
        height: auto;
        width: 125px;
    }

    /*
    .mobile-sizing-name {
        height: auto;
        width: 150px !important;
    }*/

    .custom_navbar {
        justify-content: space-around;
    }
}

@media only screen and (max-width: 425px) {
    .custom_navbar .logo #platform-name {
        margin-top: 6px;
        height: auto;
        width: 85px !important;
    }

    /*
    .mobile-sizing-name {
        height: auto;
        width: 150px !important;
    }*/

    .custom_navbar {
        justify-content: space-around;
    }
}

.navigation {
    font-size: 30px;
}

.custom_navbar .navigation a.active i {
    color: #ec6714 !important;
}

.navigation .fa-solid,
.navigation .fa-brands {
    margin: 0px 20px;
    color: black !important;
}

.navigation .fa-solid:hover,
.navigation .fa-brands:hover {
    color: #ec6714 !important;
}

.profile {
    display: flex;
    align-items: center;
}

.profile a i.fa-solid {
    font-size: 30px;
    margin-right: 20px;
    color: black !important;
}

.profile a i.fa-solid:hover {
    color: #ec6714 !important;
}

.profile a img#profile-logo {
    width: 43px;
    height: 43px;
    border-radius: 100px;
    object-fit: fill;
}

.notification-icon {
    position: relative;
}

#notification-content {
    display: none;
    position: absolute;
    width: 400px;
    top: 68px;
    background-color: #f1f1f1;
    right: 0;
    overflow-y: scroll;
    min-height: 600px;
    max-height: 100vh;
}

#notification-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    transition: background-color 0.3s;
    border-radius: 8px;
}

#notification-item:hover {
    background-color: #e2e2e2;
    transition: background-color 0.3s;
    text-decoration: none !important;
    border-radius: 4px;
}

#notification-item img {
    width: 37px;
}

#notification-item div {
    margin-left: 13px;
}

#notification-item div .notification-time {
    font-size: 10px;
    margin-top: -14px;
}

@media screen and (max-width:992px) {
    .navigation {
        display: none;
    }
}

.dropdown-item {
    border: 1px solid #fff;
    color: #333333;
    display: block;
    padding: 3px 4px;
    margin: 5px 0px;
    border-radius: 8px;
    text-decoration: none;
}

.dropdown-item:hover {

    border: 1px solid rgba(163, 163, 163, 0.23);
    color: #ec6714;
    text-decoration: none !important;
}

.navbar-dropdown {
    padding: 10px;
    width: 250px;
}

.dropdown-menu a {
    color: #6d6e71;
}

.show_in_mobile_screen {
    display: none;
}

@media screen and (max-width:992px) {
    .show_in_mobile_screen {
        display: block !important;
    }
}

@media screen and (max-width:992px) {
    .show_in_mobile_screen_border {
        height: 80vh !important;
        border: 1px solid rgba(163, 163, 163, 0.53);
        border-radius: 5px;
    }
}

.trash-hover:hover {
    transform: scale(1.2);
    transition: 0.3s;
}

.small-screen-dashboard-menu {
    display: none;
}

@media screen and (max-width:768px) {
    .small-screen-dashboard-menu {
        display: block;
    }
}

.small-screen-NewsFeed-menu {
    display: none;
}

@media screen and (max-width:768px) {
    .small-screen-NewsFeed-menu {
        display: block;
    }
}

.small-screen-divider {
    height: 1px;
    width: 95%;
    margin: 0 auto;
    background-color: rgba(163, 163, 163, 0.25)
}

.platform-whitepaper-divider {
    height: 1px;
    width: 85%;
    margin-top: -5px;
    margin-bottom: 5px;
    background-color: rgba(163, 163, 163, 0.25)
}

.hover-transform:hover {
    fill: rgb(45, 216, 45);
    color: black;
}

.dropbtn-main-menu {

    border-radius: 6px;
    padding: 7px 9px;
    font-size: 16px;
    border: none;
}

.dropdown-main-menu {
    position: relative;
    display: inline-block;
}

.dropdown-content-main-menu {
    display: none;
    width: 100%;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.45);
}

.dropdown-content-main-menu a {
    color: #6d6e71;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content-main-menu a:hover {
    color: #ec6714;
}

.dropdown-divider-main-menu {
    height: 1px;
    width: 85%;
    margin: 0 auto;
    background-color: rgba(163, 163, 163, 0.25);
}

.dropdown-content-main-menu a:hover {
    background-color: rgba(163, 163, 163, 0.15);
    border-radius: 8px;
}

.dropdown-main-menu:hover .dropdown-content-main-menu {
    display: block;
}

.dropdown-main-menu:hover .dropbtn-main-menu {
    border: rgba(163, 163, 163, 0.15);
    background-color: none;
    cursor: pointer;
}

/*
    .list-group-item {
        margin-bottom: 5px !important;
        border-radius: 4px !important;
        }

*/
.large-screen-margin {
    margin-left: 5%;
    margin-right: 5%;
}

@media screen and (max-width: 992px) {
    .small-screen-margin {
        margin-left: 1%;
        margin-right: 1%;
    }
}

.link-colors a i {
    color: inherit;
}

.link-colors a i:hover {
    color: rgb(99, 215, 253);
}

.link-colors a .youtubehover {
    color: #b2071d;
}

.link-colors a .youtubehover:hover {
    color: #b2071d;
    transform: scale(1.7);
}

.link-colors a .twitterhover {
    color: #00acee;
}

.link-colors a .twitterhover:hover {
    color: #00acee;
    transform: scale(1.7);
}

.link-colors a .x-twitterhover {
    color: #000000;
}

.link-colors a .x-twitterhover:hover {
    color: #000000;
    transform: scale(1.7);
}

.link-colors a img.nextdoorhover:hover {
    transform: scale(1.7);
}

.link-colors a img.truthsocialhover:hover {
    transform: scale(1.7);
}

.link-colors a .facebookhover {
    color: #316FF6;
}

.link-colors a .facebookhover:hover {
    color: #316FF6;
    transform: scale(1.7);
}

.link-colors a .paypalhover {
    color: #253b80;
}

.link-colors a .paypalhover:hover {
    color: #253b80;
    transform: scale(1.7);
}

.link-colors a .instagramhover {
    color: #ee2a7b;
}

.link-colors a .instagramhover:hover {
    color: #ee2a7b;
    transform: scale(1.7);
}

.link-colors a .tiktokhover {
    color: black;
}

.link-colors a .tiktokhover:hover {
    color: black;
    transform: scale(1.7);
}

.link-colors a .linkedinhover {
    color: #0077b5;
}

.link-colors a .linkedinhover:hover {
    color: #0077b5;
    transform: scale(1.7);
}

.link-colors a .githubhover {
    color: black;
}

.link-colors a .githubhover:hover {
    color: black;
    transform: scale(1.7);
}

.link-colors a .pinteresthover {
    color: #c8232c;
}

.link-colors a .pinteresthover:hover {
    color: #c8232c;
    transform: scale(1.7);
}

.link-colors a .snapchathover {
    color: #fffc00;
}

.link-colors a .snapchathover:hover {
    color: #fffc00;
    transform: scale(1.7);
}

.link-colors a .whatsapphover {
    color: #25d366;
}

.link-colors a .whatsapphover:hover {
    color: #25d366;
    transform: scale(1.7);
}

.link-colors a .telegramhover {
    color: #0088cc;
}

.link-colors a .telegramhover:hover {
    color: #0088cc;
    transform: scale(1.7);
}

.link-colors a .discordhover {
    color: #2c2f33;
}

.link-colors a .discordhover:hover {
    color: #2c2f33;
    transform: scale(1.7);
}

.link-colors a .twitchhover {
    color: #6441a5;
}

.link-colors a .twitchhover:hover {
    color: #6441a5;
    transform: scale(1.7);
}

.link-colors a .spotifyhover {
    color: #1ED760;
}

.link-colors a .spotifyhover:hover {
    color: #1ED760;
    transform: scale(1.7);
}

.link-colors a .soundcloudhover {
    color: #ff7700;
}

.link-colors a .soundcloudhover:hover {
    color: #ff7700;
    transform: scale(1.7);
}

.link-colors a .tumblrhover {
    color: #d95e40;
}

.link-colors a .tumblrhover:hover {
    color: #d95e40;
    transform: scale(1.7);
}

.link-colors a .reddithover {
    color: #FF5700;
}

.link-colors a .reddithover:hover {
    color: #FF5700;
    transform: scale(1.7);
}

.link-colors a .mediumhover {
    color: #000;
}

.link-colors a .mediumhover:hover {
    color: #000;
    transform: scale(1.7);
}

.link-colors a .vimeohover {
    color: #0574e4;
}

.link-colors a .vimeohover:hover {
    color: #0574e4;
    transform: scale(1.7);
}

.link-colors a .dribbblehover {
    color: #ea4c89;
}

.link-colors a .dribbblehover:hover {
    color: #ea4c89;
    transform: scale(1.7);
}

.link-colors a .behancehover {
    color: #053eff;
}

.link-colors a .behancehover:hover {
    color: #053eff;
    transform: scale(1.7);
}

.link-colors a .deviantarthover {
    color: #05CC46;
}

.link-colors a .deviantarthover:hover {
    color: #05CC46;
    transform: scale(1.7);
}

.link-colors a .flickrhover {
    color: #0063DC;
}

.link-colors a .flickrhover:hover {
    color: #0063DC;
    transform: scale(1.7);
}

.link-colors a .vkhover {
    color: #4C75A3;
}

.link-colors a .vkhover:hover {
    color: #4C75A3;
    transform: scale(1.7);
}

.link-colors a .weibohover {
    color: #DF2029;
}

.link-colors a .weibohover:hover {
    color: #DF2029;
    transform: scale(1.7);
}

.link-colors a .renrenhover {
    color: #DF2029;
}

.link-colors a .renrenhover:hover {
    color: #DF2029;
    transform: scale(1.7);
}

.link-colors a .xinghover {
    color: #cfdc00;
}

.link-colors a .xinghover:hover {
    color: #cfdc00;
    transform: scale(1.7);
}

.link-colors a .slidesharehover {
    color: #0077B5;
}

.link-colors a .slidesharehover:hover {
    color: #0077B5;
    transform: scale(1.7);
}

.link-colors a .meetuphover {
    color: #ED1C40;
}

.link-colors a .meetuphover:hover {
    color: #ED1C40;
    transform: scale(1.7);
}

.link-colors a .patreonhover {
    color: #f96854;
}

.link-colors a .patreonhover:hover {
    color: #f96854;
    transform: scale(1.7);
}

.link-colors a .cashapphover {
    color: #00D632;
}

.link-colors a .cashapphover:hover {
    color: #00D632;
    transform: scale(1.7);
}

.link-colors a .venmohover {
    color: #82bce8;
}

.link-colors a .venmohover:hover {
    color: #82bce8;
    transform: scale(1.7);
}

.link-colors a .buymeacoffeehover {
    color: #000;
}

.link-colors a .buymeacoffeehover:hover {
    color: #000;
    transform: scale(1.7);
}

.link-colors a .kofihover {
    color: #6f4e37;
}

.link-colors a .kofihover:hover {
    color: #6f4e37;
    transform: scale(1.7);
}

.link-colors a .wordpresshover {
    color: #444140;
}

.link-colors a .wordpresshover:hover {
    color: #444140;
    transform: scale(1.7);
}

.link-colors a .bloggerhover {
    color: #ff5722;
}

.link-colors a .bloggerhover:hover {
    color: #ff5722;
    transform: scale(1.7);
}

.youtubehover {
    color: #b2071d;
}

.youtubehover:hover {
    color: #b2071d;
    transform: scale(1.7);
}

.twitterhover {
    color: #00acee;
}

.twitterhover:hover {
    color: #00acee;
    transform: scale(1.7);
}

img.nextdoorhover:hover {
    transform: scale(1.7);
}

img.truthsocialhover:hover {
    transform: scale(1.7);
}

.x-twitterhover {
    color: #000000;
}

.x-twitterhover:hover {
    color: #000000;
    transform: scale(1.7);
}

.facebookhover {
    color: #316FF6;
}

.facebookhover:hover {
    color: #316FF6;
    transform: scale(1.7);
}

.paypalhover {
    color: #253b80;
}

.paypalhover:hover {
    color: #253b80;
    transform: scale(1.7);
}

.instagramhover {
    color: #ee2a7b;
}

.instagramhover:hover {
    color: #ee2a7b;
    transform: scale(1.7);
}

.tiktokhover {
    color: black;
}

.tiktokhover:hover {
    color: black;
    transform: scale(1.7);
}

.linkedinhover {
    color: #0077b5;
}

.linkedinhover:hover {
    color: #0077b5;
    transform: scale(1.7);
}

.githubhover {
    color: black;
}

.githubhover:hover {
    color: black;
    transform: scale(1.7);
}

.pinteresthover {
    color: #c8232c;
}

.pinteresthover:hover {
    color: #c8232c;
    transform: scale(1.7);
}

.snapchathover {
    color: #fffc00;
}

.snapchathover:hover {
    color: #fffc00;
    transform: scale(1.7);
}

.whatsapphover {
    color: #25d366;
}

.whatsapphover:hover {
    color: #25d366;
    transform: scale(1.7);
}

.telegramhover {
    color: #0088cc;
}

.telegramhover:hover {
    color: #0088cc;
    transform: scale(1.7);
}

.discordhover {
    color: #2c2f33;
}

.discordhover:hover {
    color: #2c2f33;
    transform: scale(1.7);
}

.twitchhover {
    color: #6441a5;
}

.twitchhover:hover {
    color: #6441a5;
    transform: scale(1.7);
}

.spotifyhover {
    color: #1ED760;
}

.spotifyhover:hover {
    color: #1ED760;
    transform: scale(1.7);
}

.soundcloudhover {
    color: #ff7700;
}

.soundcloudhover:hover {
    color: #ff7700;
    transform: scale(1.7);
}

.tumblrhover {
    color: #d95e40;
}

.tumblrhover:hover {
    color: #d95e40;
    transform: scale(1.7);
}

.reddithover {
    color: #FF5700;
}

.reddithover:hover {
    color: #FF5700;
    transform: scale(1.7);
}

.mediumhover {
    color: #000;
}

.mediumhover:hover {
    color: #000;
    transform: scale(1.7);
}

.vimeohover {
    color: #0574e4;
}

.vimeohover:hover {
    color: #0574e4;
    transform: scale(1.7);
}

.dribbblehover {
    color: #ea4c89;
}

.dribbblehover:hover {
    color: #ea4c89;
    transform: scale(1.7);
}

.behancehover {
    color: #053eff;
}

.behancehover:hover {
    color: #053eff;
    transform: scale(1.7);
}

.deviantarthover {
    color: #05CC46;
}

.deviantarthover:hover {
    color: #05CC46;
    transform: scale(1.7);
}

.flickrhover {
    color: #0063DC;
}

.flickrhover:hover {
    color: #0063DC;
    transform: scale(1.7);
}

.vkhover {
    color: #4C75A3;
}

.vkhover:hover {
    color: #4C75A3;
    transform: scale(1.7);
}

.weibohover {
    color: #DF2029;
}

.weibohover:hover {
    color: #DF2029;
    transform: scale(1.7);
}

.renrenhover {
    color: #DF2029;
}

.renrenhover:hover {
    color: #DF2029;
    transform: scale(1.7);
}

.xinghover {
    color: #cfdc00;
}

.xinghover:hover {
    color: #cfdc00;
    transform: scale(1.7);
}

.slidesharehover {
    color: #0077B5;
}

.slidesharehover:hover {
    color: #0077B5;
    transform: scale(1.7);
}

.meetuphover {
    color: #ED1C40;
}

.meetuphover:hover {
    color: #ED1C40;
    transform: scale(1.7);
}

.patreonhover {
    color: #f96854;
}

.patreonhover:hover {
    color: #f96854;
    transform: scale(1.7);
}

.cashapphover {
    color: #00D632;
}

.cashapphover:hover {
    color: #00D632;
    transform: scale(1.7);
}

.venmohover {
    color: #82bce8;
}

.venmohover:hover {
    color: #82bce8;
    transform: scale(1.7);
}

.buymeacoffeehover {
    color: #000;
}

.buymeacoffeehover:hover {
    color: #000;
    transform: scale(1.7);
}

.kofihover {
    color: #6f4e37;
}

.kofihover:hover {
    color: #6f4e37;
    transform: scale(1.7);
}

.wordpresshover {
    color: #444140;
}

.wordpresshover:hover {
    color: #444140;
    transform: scale(1.7);
}

.bloggerhover {
    color: #ff5722;
}

.bloggerhover:hover {
    color: #ff5722;
    transform: scale(1.7);
}

/*  Comment emojis stuff */
.sticker-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sticker-img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    cursor: pointer;
}

.tab-nav {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

.tab-item {
    margin-right: 10px;
}

.tab-item a {
    text-decoration: none;
    color: black;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.tab-item.active_tab a {
    background-color: rgba(227, 230, 212, 0.492);
    color: black;
    border-color: var(--primary-color);
}

.tab-pane {
    display: none;
}

.tab-pane.active_tab {
    display: block;
}

.active_tab {
    display: block;
}

/*  Comment emojis stuff End */

.close {
    font-size: 4.5rem;
    font-weight: bold;
    color: #03eb82;
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 1000;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close:hover {
    color: #fff;
    background: #000;
    border-color: #000;
}

.post-detail-media {
    display: grid;
    gap: 20px;
    margin-top: 20px;
    padding: 10px;
}

.post-detail-media.one-item {
    grid-template-columns: 1fr;
}

.post-detail-media.two-items {
    grid-template-columns: 1fr 1fr;
}

.post-detail-media.three-items {
    grid-template-columns: 1fr 1fr;
}

.post-detail-media.two-items>div,
.post-detail-media.three-items>div {

    padding: 5px;
    border-radius: 10px;
}

.post-detail-media.three-items .media-item:nth-child(3) {
    grid-column: span 2;
}

.post-detail-media.four-items {
    grid-template-columns: 1fr 1fr;
}

.video-thumbnail-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-height: 500px;

    border-radius: 5px;
    overflow: hidden;
}

.video-thumbnail-container img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.play-button img {
    width: 80px;
    background: rgba(236, 103, 20, 0.8);
    border-radius: 50%;
}

.play-button-hover:hover {
    transform: scale(1.35);
    opacity: .9 !important;
}

.timestamp {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.card-body {
    cursor: auto;
}

.single-post {
    background-color: rgba(163, 163, 163, 0.08);
    margin: 20px 0px;
    border-radius: 8px;
}

.card {
    box-shadow: none !important;
}

#card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -11px !important;

}

.left-side-action {
    border: 1px solid rgba(163, 163, 163, 0.93);
    margin-right: 5px;
    margin-top: 5px;
    padding: 6px;
    border-radius: 7px;
    cursor: pointer;
    line-height: normal;
}

.left-side-action:hover {

    border: 1px solid #ec6714;
    padding: 6px;
    border-radius: 7px;
    cursor: pointer;
}

.left-side-action svg:hover {
    stroke: #ec6714;

}

.left-side-action svg {
    width: 20px;
    stroke: rgba(163, 163, 163, 0.93);
}

.hero-image-container23 img {

    width: 40px;
    height: 40px;
    padding: 3px;
    object-fit: fill;
}

.top-card-header {
    display: flex;
    align-items: center;
}

.username-card {
    display: flex;
    align-items: center;
}

#card-body {
    margin: 12px -5px !important;
}

.emoji_hover {
    padding: 4px 20px;
    border-radius: 8px;
    position: relative;
}

.emoji_hover:hover {
    background-color: #d9d9d994;
    padding: 4px 20px;
    border-radius: 3px;
    cursor: pointer;
}

.is_emoji {

    padding: 4px 20px;
    border-radius: 3px;
    cursor: pointer;
    color: red;
}

.is_emoji:hover {

    padding: 4px 20px;
    border-radius: 3px;
    cursor: pointer;
    color: red;
}

.is_emoji_fav {

    padding: 4px 20px;
    border-radius: 3px;
    cursor: pointer;
    color: #ec6714;
}

.is_emoji_fav:hover {

    padding: 4px 20px;
    border-radius: 3px;
    cursor: pointer;
    color: #ec6714;
}

.more_icon {
    position: absolute;
    background-color: white;
    width: 182px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -100px;
    top: -40px;
    left: 0;
    border: 1px solid #c9c9c9;
    padding: 4px 5px;
    visibility: hidden;
    opacity: 0;
}

.emoji_hover:hover .more_icon {
    visibility: visible;
    opacity: 1;
}

.more_icon svg {
    margin-right: 10px;
}

#footer_content {
    margin: 5px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

li {
    list-style: none !important;
}

.search-emoji {
    margin: 10px;
}

#form-group {
    display: flex;
    align-items: center;
    padding: 16px;
}

.hide_on_mobile_screen {
    display: block;
}

@media (max-width: 768px) {
    .hide_on_mobile_screen {
        display: none;
    }
}

.bg-white {
    background-color: white !important;
}

.primary-bg {
    /*background-color: #ecf0f1 !important;*/
    background-color: transparent !important;
}

.mt-4 {
    margin-top: 18px;
}

.bg-white-extra {
    background: white;
    border-radius: 10px;
    padding: 10px !important;
    margin-top: 5px;
}

.mySwiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 30px 70px !important;
}

.swiper_card_audio_img {

    width: 100% !important;
}

.swiper_card_audio_img_swiper {
    background: linear-gradient(to right, #ec7e3a78, #e1f5c4) !important;
    border-radius: 20px !important;
    padding: 1px !important;
    width: 100% !important;
    height: 48% !important;
}

.post_media_content_dialog {
    margin-top: 5vh;
    word-break: break-word;
}

@media (max-width: 768px) {
    .mySwiper {
        width: 75% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 7px !important;
    }

    .post_media_content_dialog {
        margin-top: 20vh;
        word-break: break-word;
    }
}

.day-background-color {
    background-color: #ecf0f1;
}

.multiple-post-media-border {

    border-radius: 8px !important;
}

.post-media-title-container {
    position: absolute;
    bottom: 10px;
    left: 2px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 10px;
    border-radius: 5px;
}

.orangeborder-hover:hover {
    border-color: #ec6714 !important;
    color: #ec6714 !important;
}

.policy-day-border {
    border: 1px solid rgba(163, 163, 163, 0.43);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .46);
}

.big-screen-img-size {
    max-width: 80%;
    max-height: 500px;
}

@media screen and (max-width: 769px) {
    .small-screen-img-size {
        max-width: 100%;
        max-height: 500px;
    }

    .mobile-display768-pc {
        display: block !important;
    }
}

.radiobutton-text-color span span {
    color: rgba(255, 255, 255, 0.9);
}

.notification-bell-hover:hover {
    transform: scale(1.25);
}

.top-nav-icon-hover:hover {
    transform: scale(1.15);
}

@media screen and (max-width: 991px) {
    .hide-for-mobile-view {
        display: none;
        color: inherit;
    }
}

@media screen and (max-width: 425px) {
    .header-mobile-425-view {
        padding-right: 5px !important;
        padding-left: 5px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .container-mobile-425-view {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
}

.whitepaper-hover img:hover {
    transform: scale(1.04);
    transition: all 0.5s;
}

.whitepaper-hover img {
    transition: all 0.5s;
}

.hover-copy-transform:hover {
    transform: scale(1.3);
}

.hover-reply-transform:hover {
    transform: scale(1.1);
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(163, 163, 163, 0.25);
    cursor: pointer;
}

.hover-transform-album:hover {
    transform: scale(1.02);
    border-radius: 4px;
}

.color-333333 {
    color: #333333;
}

.ppc-card-container {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid rgba(163, 163, 163, 0.65);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.mobile-display768-pc {
    display: inline-block;
}

span.money {
    color: green;
    font-size: 18px;
}

p.money {
    color: green;
    font-size: 18px;
}

.money {
    color: green;
    font-size: 18px;
}

.comment-media-delete-button {
    position: absolute !important;
    float: right !important;
    left: 20px !important;
    padding: 5px !important;
    color: red !important;
    z-index: 9;
}

.comment-media-wrapper {
    margin-bottom: 15px;
    border: 1px solid gray;
    border-radius: 5px;
    width: 50% !important;
    padding: 2px;
    margin: 0px !important;
}

.comment-media-wrapper-audio {
    width: 100% !important;
}

.comment-media-wrapper audio {
    width: 100% !important;
}

.highlight {
    background-color: #ffff0040;
    transition: background-color 0.5s ease;
}

.comment-icons-hover:hover {
    transform: scale(1.2);
}


.launching-soon-text {
    font-size: 20px;
    color: inherit;
    text-align: center;
    padding: 5px 8px;
    border-radius: 7px;
    background: rgb(139 195 74 / 29%);
    border: 1px solid #00b207;
}

.ec6714-hover:hover {
    color: #ec6714 !important;
}

.footer-socials-hover:hover {
    transform: scale(1.2);
}



/**========================================================================
 *                             Poll Styles
 *========================================================================**/

.poll__countdown {
    display: flex;
    right: 30px;
    position: absolute;
}

.poll {
    background: rgba(23, 25, 35, 0.9);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 20px;
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
}

/* Poll Header */
.poll__header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.poll__icon {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.poll__icon svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.poll__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Poll Question */
.poll__question {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Poll Options */
.poll__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.poll__option {
    position: relative;
}

.poll__option--selected .poll__option-button {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.poll__option-button {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poll__option-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
}

.poll__option-button:disabled {
    cursor: default;
}

.poll__option-button--voted {
    padding-bottom: 16px;
}

.poll__option-text {
    flex-grow: 1;
}

.poll__option-percentage {
    background: rgba(59, 130, 246, 0.2);
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.poll__progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.poll__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ec6714, #ff8840);
    /* Primary to lighter shade */
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* Poll Footer */
.poll__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.7);
}

.poll__info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.poll__info--voted {
    color: #3b82f6;
}

.poll__info-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: var(--primary-color);
}

.poll__total-votes {
    font-weight: 600;
}

/* Details Button */
.poll__details-button {
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(226, 232, 240, 0.7);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.poll__details-button:hover {
    color: #3b82f6;
}

.poll__details-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}