/*!
Theme Name: Mindplex-Theme
Theme URI: http://underscores.me/
Author: Esubalew
Author URI: https://github.com/EsubalewAmenu/
Description: Theme for Mindplex magazine site
Version: 2.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mindplex-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Mindplex-Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Barlow", sans-serif;
  /* font-style: normal; */

}

:root {
  /* new colors */
  --color-new-background: linear-gradient(180deg, #032E44 0%, #01243E 48.67%, #22223B 100%), #121212;
  /* --color-new-blue: #020044; */
  --color-new-nav: #002032;
  --color-new-blue: var(--color-new-background);
  --color-new-blue-700: #1c2eba;
  --color-new-bannerBlue: rgba(80, 43, 186, 0.55);
  --color-new-yellow: #e0e420;
  --color-new-yellow-700: #a88e45;
  --color-heading-new-yellow: #e0e420;
  --color-heading-new-red: #f400d7;
  --color-heading-new-lightblue: #0082ff;
  --color-new-red: #f400d7;
  --color-new-faq-red: #f400d7;
  --color-new-red-btn: #f400d7;
  --color-new-red-100: #ff5555;
  --color-new-orange: #37999F;
  --color-new-lightblue: #0082ff;
  --color-new-lightblue-tab: #0082ff;
  --color-modalBack-green: #20e47f1c;
  --color-new-interaction-pannel: rgba(0, 252, 252, 0.4);
  --color-new-modalProfile: rgba(2, 0, 68, 0.29);
  --color-new-lightblue-100: #8ad6ff;
  --color-new-cyan-200: #0caabf;
  --color-new-lightblue-50: #00d1ff;
  --color-new-bluewhite: #ecedf4;
  --color-new-cyan: #00fcfc;
  --color-new-green: #20e47f;
  --color-new-green-200: #0abf62;
  --color-new-modal-green-200: var(--color-new-green-200);
  --color-new-purple: #b872ff;
  --color-new-purple-interest: #b69cff;
  --color-white-universal: #fff;
  --color-new-login-btn: var(--color-new-red);
  --color-new-link-blue: var(--color-new-lightblue);
  --color-new-upload-lightblue: var(--color-new-lightblue);

  /* fonts */
  --font-trainOne: "Train One", cursive;
  --font-turretRoad: "Turret Road", cursive;
  --font-barlow: "Barlow", sans-serif;
  --font-zenDots: "Zen Dots", cursive;
  --font-barlowCondensed: "Barlow Condensed", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --font-inter: "Inter", sans-serif;

  --color-white-100: #d2d0d0;
  --color-white-300: rgba(217, 213, 213, 1);
  --color-gray-light: rgba(61, 61, 61, 1);
  --color-blue: rgba(60, 72, 165, 1);
  --color-blue-50: rgba(102, 113, 208, 1);
  --color-blue-100: rgba(109, 125, 246, 1);
  --color-blue-150: rgba(65, 134, 255, 1);
  --color-blue-200: rgba(80, 90, 174, 1);
  --color-blue-275: #3c48a5;
  --color-black: rgba(14, 14, 14, 1);
  --color-black-footer: rgba(5, 14, 36, 1);
  --color-black-100: rgba(49, 49, 49, 1);
  --color-black-150: rgba(58, 58, 58, 1);
  --color-black-200: #817f7f;
  --color-black-250: #5f5d5d;
  --color-black-250: rgba(135, 134, 134, 1);
  --color-black-400: #424242;
  --color-black-600: #060606;
  --color-black-700: #090909;
  --color-gray: rgba(168, 164, 164, 1);
  --color-gray-50: #878686;
  --color-gray-78: #787777;
  --color-gray-100: rgba(173, 171, 171, 1);
  --color-gray-150: rgba(95, 95, 93, 1);
  --color-gray-200: rgba(52, 52, 52, 1);
  --color-gray-250: rgba(230, 230, 230, 1);
  --color-gray-nav: #909090;
  --color-gray-author: #c4c4c4;
  --color-new-username-green: var(--color-new-green);
  --color-new-link-cyan: var(--color-new-cyan);
  --color-read-title-banner: #fff;
  --color-loader-border-top: #3498db;
  --color-loader-border: #f3f3f3;
  --color-topic-categories-darkgrey: darkgrey;
  --color-topic-categories-shadow: rgba(0, 0, 0, 0.3);

  --color-hero-overlay-gray: rgba(0, 0, 0, 0.1);
  --color-swiper-pagination-bullet-black: #060606;
  --color-swiper-dark: rgba(0, 0, 0, 0.5);
  --color-swiper-light: rgba(0, 0, 0, 0);
  --color-dark-true: #000;
  --swiper-pagination-progressbar-gray: rgba(0, 0, 0, 0.25);
  --swiper-scrollbar-color: rgba(0, 0, 0, 0.1);
  --color-swiper-scrollbar-drag-gray: rgba(0, 0, 0, 0.5);
  --profile-border-color: #d9d5d5;
  --author-title-color: #313131;
  --profile-button-color: #ffffff;
  --profile-button-bg-color: #3c48a5;
  --profile-button-width: 316px;
  --profile-button-height: 50px;
  --profile-input-border-color: #878686;
  --profile-active-tab-color: #6d7df6;
  --profile-info-color: #1f1f1f;
  --profile-notification-color: var(--color-new-green);
  --profile-color-black-100: #424242;
  --profile-color-blue-100: #3c48a5;
  --profile-color-gray-100: #817f7f;
  --profile-color-gray-50: #d9d5d5;
  --color-white-true: white;
  --swiper-theme-color: #007aff;
  --color-swiper-bg: rgba(0, 0, 0, 0.15);
  --color-education-item-list: #e7e7e7;
  --color-search: #acacac;
  --color-gray-original: gray;
  --color-dropdown: #878686;
  --color-dropdown-list: #424242;
  --color-black-original: black;
  --color-upload-btn-border: #1f1f1f;
  --color-gary-dark: #ccc;
  --color-anchor-blue: #4169e1;
  --color-anchor-visited: #800080;
  --color-anchor-hover-active: #191970;
  --color-gray-dark-100: #bbb;
  --color-gray-light: #aaa;
  --color-input-background: #e6e6e6;
  --color-white-dark: #eee;
  --color-btn: rgba(0, 0, 0, 0.8);
  --color-input: #666;
  --color-input-focus: #111;
  --color-navigation-shadow: rgba(0, 0, 0, 0.2);
  --color-screen-reader-shadow-focus: rgba(0, 0, 0, 0.6);
  --color-screen-reader-color: #21759b;
  --color-nav-notification-bg: #f92c2c;
  --color-popup: rgba(0, 0, 0, 0.4);
  --color-input-error: #ff5555;
  --color-dark-200: #404040;
  --color-trips-placeholder: #98999a;
  --color-mark-ins: #fff9c0;
  --color-screen-reader-text: #f1f1f1;
  --color-trips-progress-background: #f4f4f4;
  --color-trips-progress-foreground: #fcff7a;
  --color-edit-profile-red: #e82f2f;
  --color-active-indicator: #31a24c;
  --color-mpxr-gray: #817f7f;
  --color-scroll-bar: #d2d0d0;
  --color-interview-color: #3c48a5;
  --color-interview-sender: #8f8c8c;
  --color-interview-receive: #f7f7f7;
  --color-profile-cancel-btn: #989898;
  --color-new-connect-orange: var(--color-new-orange);
}

html {
  scroll-behavior: smooth;
}

input {
  background-color: var(--color-white-universal);
  color: var(--color-black-original);
}

textarea {
  background-color: var(--color-white-universal);
  color: var(--color-black-original);
}

#primary {
  position: relative;
}


body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 20px;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll-bar);
  border-radius: 20px;
  border: 1px solid #fff;
}

body {
  /* #4531C9 */
  background: var(--color-new-blue);
  /* background: #4531C9; */
  color: var(--color-white-universal);
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-bar) var(--color-white-universal);
}

.nav-contain {

  background-color: var(--color-new-nav);
}

header {
  padding: 12px 7px;
  max-width: 1440px;
  margin: auto;
}

.menu {
  display: flex;
  list-style: none;
}

.entry-header {
  display: none;
}

.menu>* {
  margin: 0 1rem;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  /* margin: 0.8rem 0; */
  flex-wrap: wrap;
  gap: 10px;
}

.leftNavigation,
.search-ico {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.burger {
  cursor: pointer;
  pointer-events: none;
}

.right-navigation .btn-register {
  background-color: var(--color-new-orange);
  border: none;
  color: var(--color-white-universal);
  border-radius: 0.3rem;
  padding: 4px 18px;
  cursor: pointer;
}

@media screen and (max-width:417px) {
  .right-navigation .btn-register {
    padding: 4px 8px;
  }
}

.right-navigation .toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.right-navigation .toggle-slot {
  position: relative;
  height: 21px;
  width: 42px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  /* background-color: white; */
  /* box-shadow: 0px 10px 25px #e4e7ec; */
  transition: background-color 250ms;
  /* overflow: hidden; */
  cursor: pointer;
}
#sp_100 *{
font-size:20px
}

.right-navigation .toggle-checkbox:checked~.toggle-slot {
  background-color: #374151;
}

.right-navigation .toggle-button {
  /* transform: translate(11.75em, 1.75em); */
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 0.75em #ffbb52;
  transition: background-color 250ms, border-color 250ms,
    transform 500ms cubic-bezier(0.26, 2, 0.46, 0.71);
  top: 2px;
  /* left: 50%; */
  /* transform: translate(0,50%); */
  right: 2px;
}

.right-navigation .toggle-checkbox:checked~.toggle-slot .toggle-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 0.75em white;
  /* left: 1px; */
  transform: translate(-21px, 0);
}

.right-navigation .sun-icon {
  position: absolute;
  /* height: 6em; */
  width: 20px;
  color: #ffbb52;
}

.right-navigation .sun-icon-wrapper {
  position: absolute;
  /* height: 10px; */
  width: 10px;
  opacity: 1;
  /* transform: translate(2em, 2em) rotate(15deg); */
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(0.26, 2, 0.46, 0.71);
  top: 0;
  left: 0;
}

.right-navigation .toggle-checkbox:checked~.toggle-slot .sun-icon-wrapper {
  opacity: 0;
  /* transform: translate(3em, 2em) rotate(0deg); */
}

.right-navigation .moon-icon {
  position: absolute;
  height: 25px;
  width: 20px;
  color: white;
  top: 0px;
  /* z-index: 1111; */
  right: 0;
}

.right-navigation .moon-icon-wrapper {
  position: absolute;
  /* height: 25px; */
  /* width: 25px; */
  opacity: 0;
  /* transform: translate(11em, 2em) rotate(0deg); */
  /* transform-origin: 50% 50%; */
  transition: opacity 150ms, transform 500ms cubic-bezier(0.26, 2.5, 0.46, 0.71);
  top: 0;
  z-index: 111;
  right: 0;
}

.right-navigation .toggle-checkbox:checked~.toggle-slot .moon-icon-wrapper {
  opacity: 1;
  /* transform: translate(12em, 2em) rotate(-15deg); */
}

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

.logo-burger-container>* {
  margin-right: 16px;
}

.nav-notification-container {
  position: relative;
  cursor: pointer;
}

.notification-top {
  position: relative;
}

.notification-top svg {
  width: 1.5rem;
}

.nav-notification-counter {
  position: absolute;
  width: 18px;
  height: 18px;
  top: -10px;
  right: -8px;
  padding-top: 0;
  border-radius: 50%;
  color: var(--color-black);
  background-color: var(--color-white-universal);
  text-align: center;
}

.nav-upgrade {
  display: none;
  background-color: var(--color-new-red);
  color: var(--color-white-universal);
  border: none;
  padding: 0.5rem;
  margin: 1rem 0;
  border-radius: 5px;
  cursor: pointer;
  width: 6rem;
}

.nav-avatar {
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
  border-radius: 50%;
}

.right-navigation {
  display: flex;
  align-items: center;
  /* flex-wrap: wrap; */
}

.right-navigation>* {
  margin: 0 0.2rem;
}

.mobile-search {
  margin: 0.6rem 0;
  font-size: 1.37rem;
  font-weight: 600;
}

.avatar-arrow-up {
  border: solid var(--color-new-red);
  position: relative;
  border-width: 0 1px 1px 0px;
  display: inline-block;
  top: -10px;
  z-index: 3;
  padding: 6px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-left: 105px;
  border-left: 1px solid var(--color-new-blue);
  /* background-color: var(--color-new-blue); */
  background-color: var(--color-new-modalProfile);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.arrow-up {
  border: solid var(--color-new-red);
  position: relative;
  border-width: 0 1px 1px 0px;
  display: inline-block;
  top: -10px;
  z-index: 3;
  padding: 6px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-left: 150px;
  /* border-left: 1px solid var(--color-new-modalProfile); */
  background-color: var(--color-new-modalProfile);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mp-active-nav {
  color: var(--color-blue-150);
  position: relative;
}

.mp-active-nav img {
  filter: brightness(0) invert(27%) sepia(28%) saturate(2896%) hue-rotate(211deg) brightness(91%) contrast(93%);
}

.mp-active-nav span a {
  font-weight: bold !important;
  color: var(--color-blue) !important;
}

.mp-active-nav ::after {
  content: "";
  display: block;
  height: 0.21rem;
  position: absolute;
  bottom: -14px;
  width: 100%;
  left: 0;
  background-color: var(--color-blue);
}

.notification-list {
  display: none;
  width: 315px;
  height: 608px;
  position: absolute;
  outline: 1px solid var(--color-new-red);
  z-index: 2;
  bottom: 100%;
  left: calc(50%);
  transform: translateX(-50%);
  top: 40px;
  cursor: default;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(8px);
  background: var(--color-new-modalProfile);
}

.navigation-avatar-wrapper {
  position: relative;
}

.avatar-list {
  display: none;
  width: 216px;
  height: 288px;
  position: absolute;
  outline: 1px solid var(--color-new-red);
  z-index: 2;
  /* background-color: var(--color-new-blue); */
  top: 40px;
  bottom: 100%;
  /* left: calc(111%); */
  transform: translateX(-45%);
  background-color: var(--color-new-modalProfile);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.notification-show {
  display: block;
}

.notification-list-items {
  height: 96%;
  list-style: none;
  padding: 0 1rem;
  overflow: auto;
}

.notification-list-items::-webkit-scrollbar,
.avatar-content-container::-webkit-scrollbar {
  width: 5px;
}

.notification-list-items::-webkit-scrollbar-track,
.avatar-content-container::-webkit-scrollbar-track {
  background-color: #fff;
}

.notification-list-items::-webkit-scrollbar-thumb,
.avatar-content-container::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll-bar);
  border-radius: 20px;
  border: 1px solid #fff;
}

.notification-list-items li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-white-100);
  padding: 0.81rem 0;
  cursor: pointer;
}

.notification-list-items li:first-child {
  padding-top: 0;
}

.notification-avatar {
  width: 1.8rem;
  margin-right: 1rem;
}

.notification-content-title>* {
  font-size: 0.8rem;
}

.avatar-content-container {
  padding: 25px 18px;
  overflow-y: auto;
  height: 100%;
  padding-top: 0;
}

.user-and-notif-container {
  display: flex;
  align-items: center;
}

.notification-name {
  color: var(--color-black-400);
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  /* margin-right: 5px; */
}

.notification-date {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--color-new-yellow);
  margin-top: 4px;
}

.accept-req-notification {
  margin-top: 7px;
}

.avatar-content-top {
  text-align: center;
}

.avatar-dropdown-content {
  color: var(--color-gray-100);
  color: var(--color-black-400);
  padding-bottom: 0.8rem;
}

.nav-upgrade-dropdown {
  background: none;
  border: 1px solid var(--color-black-400);
  padding: 0.5rem;
  width: 80%;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

.register-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-dropdown-link {
  color: var(--color-blue);
  font-weight: 500;
  font-size: 1rem;
}

.avatar-list-items {
  list-style: none;
}

.avatar-list-items li {
  margin: 1rem 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  cursor: pointer;
}

.btn-sign-in {
  cursor: pointer;
}

.login-warning {
  margin-bottom: 2rem;
}

.password-field .error-txt {
  position: absolute;
}

.logo-container {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.logo {
  background-image: url("./assets/header/logo.png");
  width: 40px;
  height: 43px;
  margin: 1px 0;
}

.logo-container:hover>.logo-txt {
  transform: translateX(-100rem);
}

.logo-container:hover>.logo {
  transform: translateX(3rem) scale(1.1) rotate(360deg);
  background-image: url("./assets/header/logo1.png");
  background-size: 39px 41px;
  /* margin: 1px 0; */
}

.nav-card .Read {
  color: var(--color-heading-new-red);
}

.nav-card .Watch {
  color: var(--color-heading-new-orange);
}

.nav-card .Listen {
  color: var(--color-heading-new-lightblue);
}

.nav-card .Do {
  color: var(--color-heading-new-green);
}

.nav-card .Topics {
  color: var(--color-white-universal);
}

.nav-card .News {
  color: var(--color-heading-new-purple);
}

.read-title-banner.Community {
  background-color: var(--color-new-cyan-200);
}

.nav-card {
  overflow: hidden;
}

.logo-container>* {
  transition: transform 0.5s ease-in-out;
}

.nav-card>* {
  transition: transform 0.1s ease-in-out;
}

.nav-card:hover>img {
  transform: translateX(1.5rem) scale(1.2);
  padding: 2px 0;
}

.nav-card:hover>span {
  transform: translateX(-100rem);
}

.nav-card>* {
  margin: 0 2px;
}

@media screen and (min-width: 1000px) {
  .right-navigation>* {
    margin: 0 0.8rem;
  }

  header {
    padding: 12px 57px;
  }

  .leftNavigation,
  .search-ico {
    display: block;
  }

  .logo-burger-container {
    margin-right: 32px;
  }

  .leftNavigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
  }

  .leftNavigation>* {
    margin-right: 0.51rem;
  }

  .nav-card {
    display: flex;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
  }

  .nav-card span {
    font-family: var(--font-barlow);
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    font-style: normal;
    text-transform: uppercase;
  }

  .nav-upgrade {
    display: inline;
  }

  .btn-sign-in {
    border-right: 1px solid var(--color-gray);
    padding: 0 22px;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
    text-transform: capitalize;
  }
}

@media screen and (min-width: 1450px) {
  header {
    padding: 8px 0;
  }
}

/* end of navbar */

.sidebar {
  height: 100%;
  margin: 0;
  position: fixed;
  z-index: 1000;
  left: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  width: 100%;
  transform: translateX(-100%);
  max-width: 100% !important;
  color: var(--color-new-yellow);
}

.comment-sidebar-container {
  top: 0;
  height: 100%;
  margin: 0;
  position: fixed;
  z-index: 10;
  right: 0;
  /* overflow: hidden; */
  transition: all 0.3s ease-in-out;
  width: 700px;
  transform: translateX(100%);
  max-width: 100% !important;
  /* color: var(--color-new-yellow); */
}

.main-side-nav .leftNavigation-sidebar {
  display: flex;
  flex-direction: column;
}

#mp_tm_side_menu_container_id {
  height: 100%;
}

.author-buttons-container {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.main-side-nav .nav-card-side {
  margin: 0.6rem 0;
  display: flex;
  align-items: center;
}

.main-side-nav .nav-card-side span {
  font-weight: 600;
  font-size: 1.37rem;
  margin-left: 0.4rem;
}

.burger-container-img {
  cursor: pointer;
}

.main-side-nav .leftNavigation-sidebar-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  margin-right: 10px;
}

.main-side-nav {
  width: auto;
  height: 100%;
  background: var(--color-new-blue);
  top: 0;
  position: absolute;
  overflow: auto;
}

.comment-side-nav {
  right: 0;
  float: right;
  width: 100%;
}

@media screen and (min-width:600px) {
  .main-side-nav {
    width: 400px;
  }

  .comment-side-nav {
    width: 700px;
  }

}

.main-side-nav .sidebar-title {
  margin: 1rem 0;
}

.main-side-nav .menu-item-has-children {
  position: relative;
}

.menu-item {
  transition: all 0.3s ease-in-out;
}

.menu-item a:hover~.sidebar-more {
  filter: brightness(0) invert(1);
}

.menu-item a:hover {
  color: var(--color-white-universal);
  background-color: var(--color-new-red);
}

.main-side-nav .menu-item-has-children img {
  position: absolute;
  top: 0px;
  right: 0;
  /* margin: auto; */
  margin-top: 0.4rem;
}

.main-side-nav .menu-item-has-children ul {
  height: 0;
  overflow: hidden;
}

.main-side-nav .side-nav-visible {
  height: auto !important;
}

.remove-blur-bg {
  filter: blur(0px);
}

.main-side-nav .page_item {
  cursor: pointer;
}

.main-side-nav .page_item a {
  margin: 0.5rem 0;
  padding: 0.5rem 3rem;
  font-weight: 700;
  font-size: 1.37rem;
  display: inherit;
}

@media screen and (min-width:600px) {
  .main-side-nav .page_item a {
    padding: 0.5rem 5rem;
  }
}

.main-side-nav .side-nav-visible li a {
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  display: inherit;
}

.visible {
  transform: translateX(0) !important;
}

.blur-bg {
  transition: all 0.3s ease-in-out;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.main-side-nav .slider-content-wrapper {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.main-side-nav .sidebar-community-content,
.main-side-nav .sidebar-privacy-content {
  height: 0;
  overflow: hidden;
}

.main-side-nav .page_item,
.main-side-nav .sidebar-privacy-content h4 {
  font-weight: 500;
  /* padding: 0.6rem 0; */
  list-style: none;
}

.sidebar-more-visible {
  height: auto;
}

.sidebar-more {
  width: 2rem;
  margin-right: 2rem;
  transform: rotate(180deg);
  transition: all 0.3s ease-in;
}

.sidebar-rotate-back {
  transform: rotate(0deg) !important;
}

.no-scroll {
  overflow: hidden !important;
}

@media screen and (min-width: 1000px) {
  .main-side-nav .leftNavigation-sidebar {
    display: none;
  }
}

/* end of sidebar */

/* popup  */

.popup {
  z-index: 20;
  font-family: var(--font-barlow);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: var(--color-modalBack-green);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.popup-wrapper {
  margin: auto;
  position: relative;
  padding: 1rem 1.5rem;
}

@media screen and (min-width: 600px) {
  .popup-wrapper {
    padding: 1rem 6.5rem;
  }
}

.popup-wrapper-forgot {
  padding: 5rem 3rem;
}

.popcard {
  background: var(--color-new-blue);
  margin: 1rem auto;
  width: 90%;
  max-width: 600px;
  font-size: 1.2rem;
  animation: popup-sign 0.5s;
  position: relative;
  overflow: auto;
  border: 1px solid var(--color-gray);
  border-image: linear-gradient(var(--color-new-lightblue),
      var(--color-new-red),
      var(--color-new-green),
      var(--color-new-yellow)) 1;
  /* animation: spin 5s linear infinite; */
  /* -webkit-animation: spin 5s linear infinite; */
}

/* .popup-wrapper::before{
    border: 1px solid var(--color-gray);
} */
/* @-webkit-keyframes spin {
  from {transform: translate(-50%, -50%) rotate(0);}
  to   {transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes spin {
  from {transform: translate(-50%, -50%) rotate(0);}
  to   {transform: translate(-50%, -50%) rotate(360deg);}
}  */
.forgot-title {
  padding: 2rem 0;
  text-align: center;
  text-transform: capitalize;
}

.forgot-content {
  /* color: var(--color-gray-78); */
}

.forgot-email {
  display: block;
  width: 100%;
  margin: 1rem 0;
  padding: 0.5rem;
  border-radius: 9px;
  border: 1px solid var(--color-gray-50);
  padding: 1rem;
}

.captcha-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

@keyframes popup {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* signin modal content */
.close-modal {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.6rem;
  cursor: pointer;
  color: var(--color-new-green);
}

.signin-modal-title {
  padding: 45px 11px;
  text-align: center;
  font-size: 40px;
}

.signin-input {
  padding: 0.5rem;
  margin: 0.31rem 0;
  border: 1px solid var(--color-gray-50);
  width: 100%;
  border-radius: 5px;
  font-size: 18px;
}



.login-username input,
.login-password input {
  padding: 0.5rem;
  margin: 0.31rem 0;
  border: 1px solid var(--color-gray-50);
  width: 100%;
  border-radius: 5px;
}

@media screen and (min-width: 600px) {
  .signin-input {
    padding: 1rem !important;
  }

  .oAuth-box {
    padding: 0.6rem auto;
    justify-content: center;
  }

  .signin-terms {
    text-align: center;
  }
}

/* popup on error input */

.input-error {
  border: 3px solid var(--color-input-error);
  color: var(--color-input-error);
}

.error-txt {
  font-size: 13px;
  color: var(--color-input-error);
  /* position: absolute; */
}

.error-txt a {
  color: var(--color-new-cyan);
}

.login-submit input {
  display: block;
  padding: 0.8rem;
  width: 100%;
  margin: 0.8rem 0;
  background-color: var(--color-blue-275);
  border: none;
  color: var(--color-white-universal);
  border-radius: 5px;
  cursor: pointer;
}

.input-container {
  border: none;
}

.forgot-password {
  display: block;
  font-size: 0.8rem;
}

.author-info {
  font-family: var(--font-barlowCondensed);
}

.btn-modal {
  display: block;
  padding: 0.8rem;
  width: 100%;
  margin: 0.8rem 0;
  background-color: var(--color-new-login-btn);
  border: none;
  color: var(--color-white-universal);
  border-radius: 5px;
  cursor: pointer;
  text-shadow: 0px 0px 2px var(--color-white-universal);
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
}

.modal-or {
  display: flex;
  text-align: center;
  justify-content: center;
  margin: 1rem 0;
  color: var(--color-white-universal);
}

.oAuth-box {
  border: 1px solid var(--color-dark-true);
  border-radius: 5px;
  margin: 1rem 0;
  padding: 0.51rem 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-transform: capitalize;
  flex-wrap: wrap;
  background-color: var(--color-white-universal);
  color: black;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  justify-content: center;
}

.oAuth-box img {
  width: 2rem;
  height: 2rem;
}

.oAuth-box span {
  width: 13rem;
}

.signin-create-account {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-gray);
}

.signin-create-account span {
  color: var(--color-new-link-blue);
  font-weight: 700;
}

.signin-terms {
  margin: 1rem 0;
  font-size: 0.7rem;
  color: var(--color-gray);
}

.signin-terms span {
  font-weight: 700;
  cursor: pointer;
}

.modal-message {
  position: absolute;
  /* text-transform: capitalize; */
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  /* background-color: var(--color-new-lightblue); */
  top: 0;
  padding: 10px;
  font-size: 16px;
}

/* register modal notify */
.confirm-email {
  margin: 3rem 1rem;
  font-size: 2.5rem;
  /* color: var(--color-black-600); */
  text-transform: capitalize;
  text-align: center;
}

.confirm-email-p {
  text-align: center;
  margin: 2rem 0;
}

.password-field {
  position: relative;
}

.pass-eye-close {
  width: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

/* start of footer */
/* #footer::before {
  content: "";
  height: 2rem;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--color-new-cyan),
    var(--color-new-lightblue),
    var(--color-new-yellow),
    var(--color-new-red)
  );
  background-size: 200% 200%;
  display: block;
  animation: footerGradient 10s ease infinite;
}
@keyframes footerGradient {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 150%;
  }
  100% {
    background-position: 0% 100%;
  }
} */
/* .darkmode #footer::before {
  display: none;
} */
#footer {
  background-color: var(--color-black-footer);
}

.footer-wrapper {
  color: var(--color-white-universal);
  padding: 30px 30px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  flex-direction: column;
  padding-bottom: 0;
}

.top-footer-content {
  padding-bottom: 27px;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  flex-wrap: wrap;
  min-width: 250px;
}

.top-footer-content>* {
  margin-right: 10px;
}

.left-footer-content {
  display: flex;
  flex-direction: column;
  flex: 2;
}

.footer-logo {
  margin-bottom: 21px;
  width: 100px;
}

.footer-desc {
  color: var(--color-gray);
  font-size: 1rem;
  max-width: 533px;
  font-style: normal;
  font-weight: 400;
  /* font-size: 14px; */
  /* line-height: 17px; */
}

.center-footer-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

.right-footer-content {
  flex: 1;
  min-width: 200px;
}

.center-footer-content ul,
.right-footer-content ul {
  list-style: none;
}

.right-footer-content .menu-item li {
  list-style: none;
}

.center-footer-content h1,
.right-footer-content h1 {
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-gray);
}

.center-footer-content li,
.right-footer-content li {
  margin: 0.3rem 0;
}

.center-footer-content ul,
.right-footer-content ul {
  font-size: 1rem;
  color: var(--color-gray);
}

.footer-copy {
  color: var(--color-gray);
}

.social-icons>* {
  margin: 0 0.5rem;
  width: 1.5rem;
}

.bottom-footer-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 16px 0;
}

@media screen and (min-width: 500px) {
  .footer-wrapper {
    padding: 30px 60px;
    padding-bottom: 0;
  }
}

@media screen and (min-width: 1450px) {
  .footer-wrapper {
    margin: auto;
    padding: 30px 0;
    padding-bottom: 0;
    max-width: 1440px;
  }
}

/* end of footer */
/* 404 section */
.page-404-wrapper {
  max-width: 1440px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-404 {
  margin: 36px 0;
  max-width: 100%;
}

.button-404 {
  padding: 14px 33px;
  text-transform: capitalize;
  color: #fff;
  border-radius: 5px;
  border: 1px solid var(--color-new-red);
  font-size: 20px;
  background-color: var(--color-new-red);
  margin-bottom: 69px;
  cursor: pointer;
}

/* -------------------------------------------------------loader------------------------------------- */
.loader-container {
  max-width: 250px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  right: 0;
  padding: 10px;
  z-index: 999;
  gap: 10px;
  top: 3rem;
  transform: translate(101%, 0);
  transition: all ease-in-out 0.3s;
  border-radius: 5px 0px 0px 5px;
  backdrop-filter: blur(15px);
  background-color: #4169e14d;
}

.show-loader {
  transform: translate(0%);
}

.loader-container p {
  color: var(--color-new-purple);
  font-family: var(--font-turretRoad);
  font-weight: 600;
}

.loading-container {
  height: 48px;
  width: 48px;
  color: var(--color-new-purple);
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  animation: animeCircleSpin 4s ease-in-out infinite reverse;
}

.loading-container::after {
  content: "";
  border: 4px solid;
  position: absolute;
  left: 10px;
  top: 4px;
  border-radius: inherit;
}

.loading-container div {
  height: 50%;
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  border: 1px solid;
  border-radius: 50%;
  animation: animeCircleSpin 3s ease-in-out infinite;
}

.loading-container div::before {
  height: 0;
  width: 0;
  content: "";
  border-radius: 50%;
  display: block;
}

.loading-container div::before {
  border: 10px solid;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}

@keyframes animeCircleSpin {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(720deg);
  }

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


/* -------------------------------------------------------notification------------------------------------- */

.mp-notification {
  background-color: var(--color-new-modal-green-200);
  color: var(--color-white-universal);
  display: grid;
  padding: 0rem;
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 1;
  animation: slide-up 0.3s;
}

.mp-notification-content {
  overflow-wrap: break-word;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  place-self: center;
}

.close-mp-notification {
  overflow-wrap: break-word;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  place-self: end;
  cursor: pointer;
  padding: 0.8rem 2rem;
}

.notification-error {
  background-color: var(--color-new-red-100);
}

.comment-emoji-lists {
  transition: all 0.1s ease-in-out;
  width: 1rem;
  display: inline-block;
}

.comment-emoji-lists:hover {
  transform: scale(1.5);
}

.comment-emoji-lists:nth-child(6) {
  /* margin-bottom: 2rem; */
}

.comment-emoji-lists.add_emoji {
  margin: 0px 3px;
  cursor: pointer;
}

.comment-emoji-lists svg {
  transform: scale(2) !important;
}



.emoji-list-comment-container {
  position: absolute;
  display: inline !important;
  flex-direction: column;
  padding: 0.2rem 0.7rem;
  display: flex;
  gap: 1rem;
  transform: scale(0);
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  transform-origin: bottom center;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  left: 20%;
}

.show-comment-interaction-emoji {
  transform: scale(1) translate(-50%, 0%);
  left: 50%;
}

@media screen and (min-width: 768px) {
  .show-comment-interaction-emoji {
    transform: scale(1);
    left: 20%;
    margin-bottom: 5rem;
  }
}

.disable-comment-interactions {
  pointer-events: none;
  cursor: default;
  opacity: 0.4;
}

.content-interaction,
.comment-reactions {
  cursor: pointer;
  color: var(--color-white-universal);
  display: flex;
  padding-block: 10px;
  margin-left: 10px;
}