:root {
  --plain-white: 255, 255, 255;
  --plain-black: 0, 0, 0;
  --plain-grey: 112, 112, 112;
  --primary-1: 113, 101, 227;
  --primary-2: 79, 67, 145;
  --primary-3: 228, 222, 255;
  --primary-4: 245, 247, 250;
  --primary-5: 136, 136, 245;
  --secondary-1: 43, 216, 233;
  --secondary-2: 127, 227, 236;
  --secondary-3: 134, 129, 158;
  --secondary-4: 235, 235, 240;
  --typography-1: 69, 61, 77;
  --typography-2: 141, 141, 141;
  --typography-3: 138, 150, 163;
  --error: 254, 88, 88;
  --warning: 255, 192, 35;
  --success: 38, 196, 38;
  --info: 47, 134, 235;
  --rgb-white: rgba(var(--plain-white));
  --rgb-black: rgba(var(--plain-black));
  --rgb-grey: rgba(var(--plain-grey));
  --transparent: transparent;
  --rgb-primary-1: rgba(var(--primary-1));
  --rgb-primary-2: rgba(var(--primary-2));
  --rgb-primary-3: rgba(var(--primary-3));
  --rgb-primary-4: rgba(var(--primary-4));
  --rgb-primary-5: rgba(var(--primary-5));
  --rgb-secondary-1: rgba(var(--secondary-1));
  --rgb-secondary-2: rgba(var(--secondary-2));
  --rgb-secondary-3: rgba(var(--secondary-3));
  --rgb-secondary-4: rgba(var(--secondary-4));
  --rgb-typography-1: rgba(var(--typography-1));
  --rgb-typography-2: rgba(var(--typography-2));
  --rgb-typography-3: rgba(var(--typography-3));
  --rgb-error: rgba(var(--error));
  --rgb-warning: rgba(var(--warning));
  --rgb-success: rgba(var(--success));
  --rgb-info: rgba(var(--info));
  --thin: 100;
  --extra-light: 200;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --black: 900;
  --base-font-size-value: 10;
  --base-font-size: calc(var(--base-font-size-value) * 1px);
  --fs-11: 1.1rem;
  --fs-12: 1.2rem;
  --fs-13: 1.3rem;
  --fs-14: 1.4rem;
  --fs-15: 1.5rem;
  --fs-16: 1.6rem;
  --fs-17: 1.7rem;
  --fs-18: 1.8rem;
  --fs-19: 1.9rem;
  --fs-22: 2.2rem;
  --fs-24: 2.4rem;
  --fs-26: 2.6rem;
  --fs-32: 3.2rem;
  --fs-54: 5.4rem; }

* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: var(--base-font-size); }

body {
  --header-height: 7.5rem;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: column;
  -webkit-box-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: var(--fs-16);
  background-color: var(--rgb-primary-4); }
  @media only screen and (max-width: 576px) {
    body {
      --header-height: 7.3rem; } }

body,
input,
textarea,
button,
select {
  font-family: "Poppins", sans-serif; }

input:focus,
button:focus,
textarea:focus,
select:focus {
  outline: none; }

img,
video,
figure,
picture,
iframe {
  max-width: 100%; }

::-webkit-scrollbar {
  width: 1rem; }
  ::-webkit-scrollbar-thumb {
    background: var(--rgb-secondary-3);
    border: solid var(--rgb-white);
    border-block-width: 0.2rem;
    border-inline-width: 0.1rem;
    border-radius: 1rem; }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--rgb-primary-2); }

.ripple-effect span {
  -webkit-animation: var(--animation);
  animation: var(--animation); }

.header__search input, .header__list :is(img, svg), .header__profile img, .header__avatar, .new-post button, .new-post button :is(img, svg), .sidebar button, .profile-meta :is(img, .icon), .profile-meta span, .modal__file label.image-wrapper, .modal__file img, .modal__file .delete-image svg, .modal__navigation button :is(img, svg), .modal__privacy, .input__title, .input__description, .radio__item, .post__img img, .comment__header span, .comment__img, .comment__img img, .comment__btn, .banner__img, .setting__item, .setting-profile__banner, .setting-profile__img, .setting-profile__banner img, .setting-profile__img img, .subscription table svg, .login__input svg, .login__social, .login__social :is(img, svg) {
  display: block; }

.header__search, [class^="btn"], .menu, .new-post, .sidebar, .profile-meta:is(a), .profile-meta.notify, .modal__inner, .modal__file, .modal__file img, .text__input, .loader__container, .post, .banner, .login__input input {
  border-radius: var(--box-border-radius, 1rem); }

.header, .menu, .new-post, .sidebar, .modal__inner, .loader__container, .post, .banner, .login__wrapper {
  background-color: var(--box-background, var(--rgb-white)); }

.header, .new-post, .sidebar, .modal__inner, .loader__container, .login__wrapper {
  padding: var(--box-padding); }

.header__list :is(a, button), .header__avatar, .new-post .profile-meta + button, .modal__back, .modal__file .delete-image, .modal__pagination button, .modal__navigation button, .modal__privacy, .post__meta button, .post__footer :is(button, span):not([class^="btn"]), .comment__btn, .banner__meta button, .banner__nav :is(button, a), .setting__item, .subscription__tab :is(a, button), .subscription table button, .login__input :is(span, button), .login__social {
  background-color: unset; }

.header__list :is(a, button), .header__avatar, .new-post .profile-meta + button, .modal__back, .modal__file .delete-image, .modal__pagination button, .modal__navigation button, .modal__privacy, .post__meta button, .post__footer :is(button, span):not([class^="btn"]), .comment__btn, .banner__meta button, .banner__nav :is(button, a), .setting__item, .subscription__tab :is(a, button), .subscription table button, .login__input :is(span, button), .login__social, .new-post button {
  border: none; }

.header__list :is(a, button), .login__or {
  isolation: isolate; }

.header__list, .menu__list {
  list-style: none; }

button, .header__search, [class^="btn"], .new-post .profile-meta button, .new-post button, .sidebar button, .modal__back, .modal__file, .modal__file label.image-wrapper, .modal__file .delete-image, .modal__footer button:last-child, .modal__privacy, .modal__add-photo, .radio__item, .setting-profile__banner, .setting-profile__img {
  cursor: pointer; }

.header__list :is(img, svg), .ripple-effect span, .modal__file .delete-image svg, .modal__navigation, .modal__privacy svg, .login__input :is(span, button):not(.icon-password) {
  pointer-events: none; }

.header__mobile-logo, .header__back, .header__search, .header__list > li, .header__list :is(a, button), .header__profile, .ripple-effect, .menu__list, .menu__btn, .modal__file, .modal__file div.image-wrapper, .text__input-main, .radio__item, .loader, .post__meta, .setting-profile__banner, .setting-profile__img, .login__input, .login__or, .alert {
  position: relative; }

.header__back, .header__list :is(a, button), .header__profile img, .header__avatar, .ripple-effect span, .profile-meta > a, .profile-meta :is(img, .icon), .modal__back, .modal__file .delete-image, .modal__pagination button, .modal__navigation button, .radio__item .profile-meta::before, .radio__item .profile-meta::after, .loader::before, .loader::after, .comment__img, .comment__img img, .setting-profile__img, .subscription table button {
  border-radius: 50%; }

.header__logo, .header__list :is(img, svg), .header__profile img, .new-post button :is(img, svg), .modal__navigation button :is(img, svg), .login__social :is(img, svg) {
  user-select: none; }

.header__back, .header__search::after, .header__list :is(a, button), .header__profile img, .profile-meta :is(img, .icon), .modal__back, .modal__pagination button, .modal__navigation button, .radio__item .profile-meta::before, .radio__item .profile-meta::after, .loader, .loader::before, .loader::after, .comment__img, .comment__img img, .setting-profile__img, .login__meta span, .alert::after {
  width: var(--square);
  height: var(--square); }

.footer__secondary, .sidebar h2, .modal h2, .setting__heading, .subscription__tab :is(a, button), .subscription__text, .setting-verify, .login__heading, .login__meta p, .login__or {
  text-align: center; }

.sidebar button:hover, .login__meta a:hover {
  text-decoration: underline; }

.new-post .profile-meta button {
  text-align: start; }

.header__logo, [class^="btn"][class*="uppercase"], .sidebar button {
  text-transform: uppercase; }

.header, .menu, .new-post, .sidebar, .modal__inner, .loader__container, .post, .banner, .login__wrapper, .login__social, .alert {
  -webkit-box-shadow: var(--box-shadow, 0px 0.3rem 0.6rem var(--rgb-secondary-4));
  box-shadow: var(--box-shadow, 0px 0.3rem 0.6rem var(--rgb-secondary-4)); }

.header__list :is(a, button), .profile-meta .icon, .modal__navigation button {
  display: -ms-grid;
  display: grid;
  place-content: var(--place-content, center); }

.header__container, .header__mobile-logo, .header__list, .main__content, [class^="btn"], .menu__item a, .menu__btn a, .profile-meta, .modal__footer, :is(.label__half, .label__full), .post__header, .post__footer, .post__footer :is(button, span), .comment, .comment__header, .banner__body, .banner__btns, .banner__link, .banner__nav, .setting, .subscription__tab, .subscription table .action, .login__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: var(--align-items);
  -ms-flex-align: var(--align-items);
  align-items: var(--align-items);
  -webkit-box-pack: var(--justify-content);
  -ms-flex-pack: var(--justify-content);
  justify-content: var(--justify-content);
  gap: var(--gap);
  -webkit-box-orient: var(--flex-direction);
  -webkit-box-direction: var(--flex-direction);
  -ms-flex-direction: var(--flex-direction);
  flex-direction: var(--flex-direction);
  -ms-flex-wrap: var(--flex-wrap);
  flex-wrap: var(--flex-wrap); }

.header__logo, .header__avatar, .ripple-effect, .new-post button, .sidebar button, .profile-meta:is(a), .profile-meta > a, .profile-meta.notify, .modal__back, .modal__file .delete-image, .modal__privacy, .post__meta button, .post__footer :is(button, span), .comment__header, .comment__img, .subscription table button, .login__input button {
  outline-offset: 0.2rem; }
  :is(.header__logo, .header__avatar, .ripple-effect, .new-post button, .sidebar button, .profile-meta:is(a), .profile-meta > a, .profile-meta.notify, .modal__back, .modal__file .delete-image, .modal__privacy, .post__meta button, .post__footer :is(button, span), .comment__header, .comment__img, .subscription table button, .login__input button):focus:not(:hover) {
    outline: 0.2rem solid var(--rgb-primary-1); }

.header__search input::-webkit-input-placeholder, .text__input::-webkit-input-placeholder {
  color: var(--placeholder-color);
  opacity: var(--placeholder-opacity); }

.header__search input::-moz-placeholder, .text__input::-moz-placeholder {
  color: var(--placeholder-color);
  opacity: var(--placeholder-opacity); }

.header__search input:-ms-input-placeholder, .text__input:-ms-input-placeholder {
  color: var(--placeholder-color);
  opacity: var(--placeholder-opacity); }

.header__search input::-ms-input-placeholder, .text__input::-ms-input-placeholder {
  color: var(--placeholder-color);
  opacity: var(--placeholder-opacity); }

.header__search input::placeholder, .text__input::placeholder {
  color: var(--placeholder-color);
  opacity: var(--placeholder-opacity); }

.header__profile img, .profile-meta :is(img, .icon), .comment__img img, .setting-profile__banner img, .setting-profile__img img {
  object-fit: -o-cover;
  object-fit: cover;
  object-position: -o-center;
  object-position: center; }

.ripple-effect span, .skip-btn, .menu.active, .modal__inner, .modal__navigation button + button, .radio__item .profile-meta::after, .loader::after {
  -webkit-transform: var(--transform);
  -ms-transform: var(--transform);
  transform: var(--transform); }

.header__logo, .header__back, .header__search, .header__search::after, .header__list :is(a, button), [class^="btn"], .menu, .menu__item a, .menu__btn a, .new-post .profile-meta button, .profile-meta.notify, .modal, .modal__overlay, .modal__inner, .modal__pagination button, .modal__navigation button, .text__input, .radio__item .profile-meta, .radio__item .profile-meta::after, .post__footer button:not([class^="btn"]), .banner__meta button, .banner__link, .banner__link path, .banner__nav :is(button, a), .setting__item, .setting-profile__banner::after, .setting-profile__img::after, .subscription__tab :is(a, button), .subscription table button {
  -webkit-transition: all var(--transition, 0.2s);
  -o-transition: all var(--transition, 0.2s);
  transition: all var(--transition, 0.2s); }

.menu, .text__input, :is(.label__half, .label__full) span, .comment__header span:last-child, .alert, .alert h3 {
  font-size: var(--fs-13);
  font-weight: var(--light);
  color: var(--rgb-typography-1); }

.footer__copyright, .input__description, .post__meta time, .post__content p, .comment__body p, .comment__header span:first-child, .subscription__text, .subscription table td {
  font-size: var(--fs-14);
  font-weight: var(--regular);
  color: var(--rgb-typography-1); }

.input__title, .post__content h4, .banner__nav :is(button, a), .subscription__tab :is(a, button) {
  font-size: var(--fs-16);
  font-weight: var(--medium);
  color: var(--rgb-typography-1); }

@keyframes animate {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5; }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0; } }

@keyframes bigcircle {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes smallcircle {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }

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

[class^="container"] {
  --container-width: 96.8rem;
  --container-padding: 1.5rem;
  width: Min(calc(var(--container-width) + var(--container-padding) * 2), 100%);
  margin-inline: auto;
  padding-inline: var(--container-padding); }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1;
  width: 100%;
  height: var(--header-height);
  --box-padding: 1.4rem 0rem;
  --box-shadow: 0 0.2rem 0.7rem rgba(var(--plain-black), 0.1); }
  .header__container {
    --align-items: center; }
  .header__mobile-logo {
    --logo-margin: 3.23rem;
    --back-btn-dimension: 3.5rem;
    display: contents; }
    @media only screen and (max-width: 880px) {
      .header__mobile-logo {
        --logo-margin: 1.5rem;
        position: relative;
        --align-items: center; } }
    @media only screen and (max-width: 485px) {
      .header__mobile-logo {
        position: static; } }
  .header__logo {
    margin-inline-end: var(--logo-margin);
    font-size: var(--fs-32);
    font-weight: var(--extra-bold);
    line-height: 1.4066;
    -webkit-box-ordinal-group: -1;
    -ms-flex-order: -1;
    order: -1; }
    @media only screen and (max-width: 880px) {
      .header__logo {
        margin-inline-start: -4rem; } }
  .header__back {
    --square: var(--back-btn-dimension);
    -webkit-box-ordinal-group: -2;
    -ms-flex-order: -2;
    order: -2;
    display: none;
    margin-inline-end: 0.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='1em' height='1em' class='a8c37x1j ms05siws hwsy1cff b7h9ocf4 em6zcovv jnigpg78 odw8uiq3'%3E%3Cg fill-rule='evenodd' transform='translate(-446 -350)'%3E%3Cg fill-rule='%23453d4d'%3E%3Cpath d='M100.249 201.999a1 1 0 0 0-1.415-1.415l-5.208 5.209a1 1 0 0 0 0 1.414l5.208 5.209A1 1 0 0 0 100.25 211l-4.501-4.501 4.5-4.501z' transform='translate(355 153.5)'%3E%3C/path%3E%3Cpath d='M107.666 205.5H94.855a1 1 0 1 0 0 2h12.813a1 1 0 1 0 0-2z' transform='translate(355 153.5)'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/20px 20px no-repeat; }
    @media only screen and (max-width: 880px) {
      .header__back {
        display: block;
        opacity: 0; } }
    .header__back:hover {
      background-color: var(--rgb-secondary-4); }
  .header__search {
    width: Min(35.3rem, 100%);
    padding: 1.25rem 2rem 1.25rem 5.1rem;
    background-color: var(--rgb-primary-4); }
    .header__search::after {
      --square: 1.72rem;
      content: "";
      position: absolute;
      inset: 0 auto 0 2.2rem;
      margin: auto;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.322' height='17.322' viewBox='0 0 17.322 17.322'%3E%3Cpath id='icon-search' d='M13.181,13.181l3.727,3.727M15.044,8.522A6.522,6.522,0,1,1,8.522,2,6.522,6.522,0,0,1,15.044,8.522Z' transform='translate(-1 -1)' fill='none' stroke='%23453d4d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E") center no-repeat; }
      @media only screen and (max-width: 880px) {
        .header__search::after {
          inset: 0; } }
    .header__search input {
      --placeholder-color: var(--rgb-typography-1);
      width: 100%;
      height: 2rem;
      font-size: var(--fs-14);
      font-weight: var(--light);
      background-color: var(--transparent);
      border: none; }
      @media only screen and (max-width: 880px) {
        .header__search input {
          opacity: 0; } }
    @media only screen and (max-width: 880px) {
      .header__search {
        --search-dimensions: 3.5rem;
        position: absolute;
        inset: 0 calc(-1 * var(--search-dimensions)) 0 auto;
        width: var(--search-dimensions);
        height: var(--search-dimensions);
        -ms-display: grid;
        display: grid;
        place-content: var(--place-content, center);
        margin: auto;
        padding: 0;
        border-radius: 50%; } }
    @media only screen and (max-width: 485px) {
      .header__search {
        position: absolute;
        inset: 0 auto 0 195px; } }
    .header__search:focus-within {
      padding-inline-start: 2rem; }
      .header__search:focus-within::after {
        opacity: 0; }
      @media only screen and (max-width: 880px) {
        .header__search:focus-within {
          --place-content: center start;
          width: 21.5rem;
          padding: 1.25rem 2rem;
          border-radius: 5rem; }
          .header__search:focus-within input {
            opacity: 1; }
          .header__search:focus-within ~ .header__logo {
            margin-inline-start: 0;
            visibility: hidden;
            opacity: 0; }
          .header__search:focus-within ~ .header__back {
            opacity: 1; } }
      @media only screen and (max-width: 485px) {
        .header__search:focus-within {
          position: absolute;
          inset: 0 var(--container-padding) 0 auto;
          z-index: 2;
          width: calc(
 98% - (var(--container-padding) * 2) - var(--back-btn-dimension));
          height: 4rem; } }
  .header__nav {
    margin-inline: auto 3.7rem; }
    @media only screen and (max-width: 576px) {
      .header__nav {
        margin-inline-end: 1rem; } }
  .header__list {
    --align-items: center;
    --gap: 2.2rem; }
    @media only screen and (max-width: 576px) {
      .header__list {
        --gap: 1rem; } }
    @media only screen and (max-width: 450px) {
      .header__list {
        display: none; } }
    .header__list :is(a, button) {
      --square: 4rem; }
      .header__list :is(a, button):hover {
        background-color: var(--rgb-secondary-4); }
    @media only screen and (max-width: 576px) {
      .header__list :is(img, svg) {
        width: 15px;
        aspect-ratio: 1/1; } }
  .header__profile img {
    --square: 4.7rem; }
    @media only screen and (max-width: 576px) {
      .header__profile img {
        --square: 4rem; } }

.footer {
  margin-block-start: auto; }
  .footer .container {
    --container-width: 120rem; }
  .footer__secondary {
    padding: 1.55rem 1.5rem;
    background-color: var(--rgb-secondary-3); }
  .footer__copyright {
    --rgb-typography-1: var(--rgb-white); }

main {
  margin-block-start: calc(var(--header-height) + 5rem); }
  @media only screen and (max-width: 991px) {
    main .container {
      --container-padding: 0; } }

.main {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: calc(67.36621% - 0.75rem) calc(32.63379% - 0.75rem);
  grid-template-columns: calc(67.36621% - 0.75rem) calc(32.63379% - 0.75rem);
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  gap: 1.5rem; }
  @media only screen and (max-width: 991px) {
    .main {
      display: block; } }
  .main__banner {
    -ms-grid-column-span: span 2;
    grid-column-end: span 2; }
  .main__content {
    --gap: 1.6rem;
    -webkit-box-orient: column;
    -webkit-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
    @media only screen and (max-width: 991px) {
      .main__content {
        max-width: 63rem;
        margin: auto; } }

.ripple-effect {
  overflow: hidden; }
  .ripple-effect span {
    --transform: translate(-50%, -50%);
    --animation: animate 0.5s linear infinite;
    position: absolute;
    background: var(--rgb-secondary-3); }

.text-btn {
  background-color: unset;
  border: none; }

.skip-btn {
  --transform: translateX(-249px);
  position: absolute;
  inset: 1rem auto auto 1rem;
  z-index: 3; }
  .skip-btn:focus {
    --transform: translateX(0); }

[class^="btn"] {
  --align-items: center;
  --justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--btn-padding, 1.1rem 5.6rem);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  color: var(--btn-color);
  background-color: var(--btn-background);
  border: 0.1rem solid var(--btn-border);
  border-radius: var(--btn-border-radius); }
  [class^="btn"][class*="fs-18"] {
    font-size: var(--fs-18); }
  [class^="btn"][class*="fs-16"] {
    font-size: var(--fs-16); }
  [class^="btn"][class*="fs-14"] {
    font-size: var(--fs-14); }
  [class^="btn"][class*="fs-13"] {
    font-size: var(--fs-13); }
  [class^="btn"][class*="regular"] {
    --btn-font-weight: var(--regular); }
  [class^="btn"][class*="medium"] {
    --btn-font-weight: var(--medium); }
  [class^="btn"][class*="radius-10"] {
    --btn-border-radius: 1rem; }
  [class^="btn"][class*="radius-5"] {
    --btn-border-radius: 0.5rem; }
  [class^="btn"][class*="primary"] {
    --btn-color: var(--rgb-white);
    --btn-background: var(--rgb-secondary-3);
    --btn-border: var(--rgb-secondary-3); }
    [class^="btn"][class*="primary"][class*="error"] {
      --rgb-secondary-3: var(--rgb-error); }
    [class^="btn"][class*="primary"][class*="warning"] {
      --rgb-secondary-3: var(--rgb-warning); }
    [class^="btn"][class*="primary"][class*="success"] {
      --rgb-secondary-3: var(--rgb-success); }
    [class^="btn"][class*="primary"]:not([disabled]):hover {
      --btn-color: var(--rgb-secondary-3);
      --btn-background: var(--rgb-white);
      --btn-border: var(--rgb-secondary-3); }
  [class^="btn"][class*="secondary"] {
    --btn-color: var(--rgb-secondary-3);
    --btn-background: var(--rgb-white);
    --btn-border: var(--rgb-secondary-3); }
    [class^="btn"][class*="secondary"]:not([disabled]):hover {
      --btn-color: var(--rgb-white);
      --btn-background: var(--rgb-secondary-3);
      --btn-border: var(--rgb-secondary-3); }
  [class^="btn"][disabled] {
    --btn-background: rgba(var(--typography-1), 0.43);
    --btn-border: var(--rgb-typography-1);
    cursor: not-allowed; }

.menu {
  --align-items: center;
  position: absolute;
  inset: 6.2rem auto auto -0.7rem;
  width: 21.7rem;
  --box-shadow: 0.1rem 0 0.4rem rgba(var(--plain-black), 0.16);
  opacity: 0;
  visibility: hidden; }
  @media only screen and (max-width: 1330px) {
    .menu {
      inset-inline: auto -0.7rem; } }
  .menu.active {
    inset-block-start: 7.2rem;
    opacity: 1;
    visibility: visible; }
  .menu::before {
    content: "";
    position: absolute;
    inset: -1.5rem auto 0 2.2rem;
    width: 1.8rem;
    height: 1.5rem;
    background-color: rgba(var(--primary-1), 0.2);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
    @media only screen and (max-width: 1330px) {
      .menu::before {
        inset-inline: auto 2.2rem; } }
  .menu__list {
    z-index: 2;
    padding: 0.4rem; }
  @media only screen and (min-width: 451px) {
    .menu__item.hidden {
      display: none; } }
  .menu__item a {
    --gap: 1.2rem;
    width: 100%;
    padding: 0.8rem 1.7rem;
    border-radius: 1rem; }
    .menu__item a:hover {
      background-color: rgba(var(--primary-1), 0.1); }
  .menu__item:first-child a {
    border-radius: 1rem 1rem 0 0; }
  .menu__btn {
    z-index: 2;
    margin: 0 0.4rem 0.4rem;
    padding-block-start: 0.4rem;
    border-block-start: 1px solid rgba(var(--secondary-3), 0.2); }
    .menu__btn a {
      --gap: 1.2rem;
      width: 100%;
      padding: 1rem 1.7rem 0.6rem 1.7rem;
      border-radius: 0 0 1rem 1rem; }
      .menu__btn a:hover {
        background-color: rgba(var(--primary-1), 0.1); }
  .menu__overlay {
    position: fixed;
    inset: 0;
    z-index: 1; }

.new-post {
  --box-padding: 1.2rem 1.97rem 1.42rem 2.3rem;
  --box-border-radius: 0 0 1rem 1rem; }
  .new-post .profile-meta {
    --gap: 1.43rem;
    margin-block-end: 1.2rem;
    padding-block-end: 1.3rem;
    border-block-end: 1px solid rgba(var(--secondary-3), 0.2); }
    .new-post .profile-meta button {
      width: 100%;
      padding: 1.8rem 1.57rem;
      background-color: var(--rgb-primary-4);
      border-radius: 1rem; }
      .new-post .profile-meta button:hover, .new-post .profile-meta button:focus {
        background-color: var(--rgb-secondary-4); }

.sidebar {
  border: 0.02rem solid rgba(var(--plain-grey), 0.2);
  --box-padding: 3.3rem 0.92rem 3.4rem; }
  @media only screen and (max-width: 991px) {
    .sidebar {
      display: none; } }
  .sidebar h2 {
    margin-block-end: 3.9rem;
    font-size: var(--fs-22); }
  .sidebar button {
    margin: 4.2rem auto 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content; }

.profile-meta {
  --align-items: center;
  --gap: 0.8rem; }
  .profile-meta + .profile-meta {
    margin-block-start: 1rem; }
  .profile-meta.notify {
    padding: 0.56rem 1.38rem; }
    .profile-meta.notify:hover, .profile-meta.notify:focus {
      background-color: rgba(var(--primary-5), 0.3); }
  .profile-meta :is(img, .icon) {
    border: 0.3rem solid var(--rgb-white); }
  .profile-meta .icon {
    background-color: var(--rgb-secondary-3); }
  .profile-meta h3 {
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: 1.412; }
  .profile-meta span {
    margin-block-start: -0.2rem;
    font-size: var(--fs-14); }
  .profile-meta.extra-small {
    --square: 5rem;
    --font-size: var(--fs-13);
    --font-weight: var(--regular); }
  .profile-meta.small {
    --square: 6rem;
    --font-size: var(--fs-17);
    --font-weight: var(--semi-bold); }
  .profile-meta.big {
    --square: 6.7rem;
    --font-size: var(--fs-19);
    --font-weight: var(--bold); }
  .profile-meta.extra-large {
    --align-items: flex-start;
    --gap: 2.1rem;
    --square: 18.3rem;
    --font-size: var(--fs-32);
    --font-weight: var(--bold);
    -webkit-box-orient: column;
    -webkit-box-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
    .profile-meta.extra-large span {
      font-size: var(--fs-18); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  opacity: 0; }
  .modal.active {
    visibility: visible;
    opacity: 1; }
    .modal.active .modal__inner {
      --transform: translateY(0rem); }
  .modal__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--rgb-black);
    opacity: 70%; }
  .modal__inner {
    --transform: translateY(-2rem);
    --box-padding: 1.2rem 1.8rem 2.5rem;
    --box-shadow-inset: 0 0.3rem 0.6rem;
    --box-shadow-clr: rgba(var(--plain-black), 0.16);
    z-index: 1;
    width: Min(56rem, calc(100% - 1.5rem));
    max-height: calc(100% - (5rem * 2));
    margin: 5rem auto auto;
    --box-padding: 1.2rem 1.8rem 2.5rem;
    --box-shadow: 0 0.3rem 0.6rem rgba(var(--plain-black), 0.16);
    overflow: auto; }
  .modal h2 {
    padding-block-end: 1.3rem;
    margin-block-end: 2.1rem;
    border-block-end: 0.1rem solid rgba(var(--secondary-3), 0.2); }
  .modal__back {
    --square: 3.45rem;
    position: absolute;
    inset: 1.2rem auto auto 1.9rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.233' height='14.759' viewBox='0 0 15.233 14.759'%3E%3Cpath id='icon-left-arrow-white' d='M15.233,6.034H5.71L9.777,2.094,7.616,0,0,7.38l7.616,7.38,2.161-2.094L5.71,8.725h9.523Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
    background-color: var(--rgb-secondary-3); }
  .modal__file {
    padding: 1rem;
    background-color: var(--rgb-primary-4);
    border: 0.1rem solid rgba(var(--secondary-3), 0.3); }
    .modal__file input {
      position: absolute;
      opacity: 0;
      right: 0; }
      .modal__file input:focus + :is(img, label) {
        outline-offset: 2px;
        outline: 2px solid var(--rgb-primary-1); }
    .modal__file .file-btn {
      display: none; }
    .modal__file img {
      width: 100%; }
    .modal__file div.image-wrapper {
      cursor: default; }
    .modal__file .delete-image {
      position: absolute;
      inset: 1rem auto auto 1rem; }
    .modal__file.active :is(.modal__add-photo, .file-btn) {
      display: block; }
  .modal__pagination {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.8rem;
    margin-block-start: 1rem; }
    .modal__pagination button {
      --square: 1rem;
      border: 0.1rem solid var(--rgb-secondary-3); }
      .modal__pagination button.active {
        background-color: var(--rgb-secondary-3); }
  .modal__navigation {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 90%;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    margin: auto; }
    .modal__navigation button {
      --square: 3.2rem;
      background-color: var(--rgb-white);
      border: 0.1rem solid var(--rgb-grey);
      pointer-events: all; }
      .modal__navigation button:not(:disabled):hover {
        background-color: var(--rgb-secondary-4); }
      .modal__navigation button:disabled {
        opacity: 50%;
        cursor: default; }
      .modal__navigation button + button {
        --transform: rotate(180deg); }
  .modal__footer {
    --align-items: center;
    margin-block-start: 2.4rem; }
    .modal__footer button:last-child {
      margin-inline-start: auto; }
  .modal__add-photo {
    position: absolute;
    inset: 2.2rem 2.2rem auto auto;
    z-index: 1;
    display: none;
    padding: 0.4rem 1.04rem;
    font-size: var(--fs-12);
    color: var(--rgb-typography-1);
    background-color: var(--rgb-white);
    border: 1px solid var(--rgb-primary-1);
    border-radius: 0.5rem; }
  .modal__input {
    margin-block-start: 1.04rem; }

.input__dollar {
  padding-inline-start: 3.5rem; }

.input__title, .input__description {
  width: 100%; }

.input__title {
  margin-block-start: 2.5rem;
  padding-block-end: 1rem;
  border-width: 0px 0px 0.1rem 0px;
  border-color: rgba(var(--secondary-3), 0.4); }
  .input__title::-webkit-input-placeholder {
    color: var(--rgb-typography-1);
    opacity: 1; }
  .input__title::-moz-placeholder {
    color: var(--rgb-typography-1);
    opacity: 1; }
  .input__title:-ms-input-placeholder {
    color: var(--rgb-typography-1);
    opacity: 1; }
  .input__title::-ms-input-placeholder {
    color: var(--rgb-typography-1);
    opacity: 1; }
  .input__title::placeholder {
    color: var(--rgb-typography-1);
    opacity: 1; }

.input__description {
  min-height: 7.9rem;
  max-height: 30rem;
  resize: vertical;
  margin-block: 1rem;
  border: none; }

.text__input {
  --placeholder-color: var(--rgb-secondary-3);
  width: 100%;
  max-height: 15rem;
  padding: 1.05rem 1.7rem;
  font-weight: var(--medium);
  color: var(--rgb-black);
  border: 0.1rem solid var(--rgb-secondary-3);
  outline: 0.1rem solid transparent;
  resize: vertical; }
  .text__input::-webkit-input-placeholder {
    font-weight: var(--light);
    color: var(--rgb-secondary-3); }
  .text__input::-moz-placeholder {
    font-weight: var(--light);
    color: var(--rgb-secondary-3); }
  .text__input:-ms-input-placeholder {
    font-weight: var(--light);
    color: var(--rgb-secondary-3); }
  .text__input::-ms-input-placeholder {
    font-weight: var(--light);
    color: var(--rgb-secondary-3); }
  .text__input::placeholder {
    font-weight: var(--light);
    color: var(--rgb-secondary-3); }
  .text__input:hover, .text__input:focus {
    outline: 0.1rem solid var(--rgb-secondary-3); }

.text__input-main {
  font-size: var(--fs-24); }
  .text__input-main::before {
    content: "$";
    position: absolute;
    inset: 0 auto 0 1.6rem;
    display: table;
    margin: auto;
    font-weight: var(--semi-bold);
    color: var(--rgb-secondary-3); }
  .text__input-main input {
    padding-inline-start: 3.5rem;
    font-size: var(--fs-24); }

.radio__listing {
  margin-block-start: 3.9rem; }
  .radio__listing h3 {
    font-size: var(--fs-18);
    font-weight: var(--regular); }
  .radio__listing input {
    position: absolute;
    opacity: 0; }

.radio__item {
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: 0.1rem solid rgba(var(--secondary-3), 0.2); }
  .radio__item .profile-meta {
    padding: 0.78rem 1.15rem;
    border-radius: 0.5rem; }
    .radio__item .profile-meta::before, .radio__item .profile-meta::after {
      content: "";
      position: absolute;
      inset: 0 2.7rem 0 auto;
      margin: auto; }
    .radio__item .profile-meta::before {
      --square: 2.1rem;
      border: 0.3rem solid var(--rgb-secondary-3); }
    .radio__item .profile-meta::after {
      --transform: translateX(-0.6rem);
      --square: 1.5rem;
      background-color: var(--rgb-secondary-3);
      opacity: 0; }
    .radio__item .profile-meta:hover,
    input:focus + .radio__item .profile-meta {
      background-color: rgba(var(--primary-1), 0.1); }
    .radio__item .profile-meta div:first-child h3 {
      font-weight: var(--semi-bold);
      color: var(--rgb-typography-1); }
  input:checked + .radio__item .profile-meta::after {
    opacity: 1; }

:is(.label__half, .label__full) {
  --justify-content: flex-start;
  --gap: 0.4rem;
  --flex-direction: column-reverse; }
  :is(.label__half, .label__full) span {
    --light: var(--medium); }
  :is(.label__half, .label__full) :is(input, textarea)[required] + span::after {
    content: "*"; }
  :is(.label__half, .label__full) input[type="submit"] {
    position: absolute;
    opacity: 0; }
    :is(.label__half, .label__full) input[type="submit"]:focus + label {
      outline: 0.2rem solid var(--rgb-primary-1); }
  :is(.label__half, .label__full) textarea {
    min-height: 12.8rem; }
  :is(.label__half, .label__full) label {
    --btn-padding: 0.7rem 3.5rem;
    margin-block-start: 1rem;
    margin-inline-start: auto; }

.label__full {
  -ms-grid-column-span: span var(--column);
  grid-column-end: span var(--column); }

.loader {
  --square: 2.5rem;
  --loader-square: var(--square);
  display: -ms-grid;
  display: grid; }
  .loader::before, .loader::after {
    content: "";
    position: absolute;
    inset: 0; }
  .loader::before {
    --square: calc(var(--loader-square) - 1);
    border: 0.1rem solid var(--rgb-secondary-3);
    border-color: var(--rgb-secondary-3) transparent var(--rgb-secondary-3) var(--rgb-secondary-3);
    animation: bigcircle 1.2s linear infinite; }
  .loader::after {
    --square: 50%;
    --transform: rotate(117deg);
    margin: auto;
    border: 0.1rem solid var(--rgb-secondary-3);
    border-color: var(--rgb-secondary-3) var(--rgb-secondary-3) transparent var(--rgb-secondary-3);
    animation: smallcircle 1.2s linear infinite; }
  .loader.block {
    margin: auto; }
  .loader__container {
    margin-block-end: 3rem;
    --box-padding: 2rem; }

.post__header {
  --justify-content: space-between;
  --gap: 2rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 1.6rem 2.06rem 2.3rem 1.9rem; }

.post__meta {
  margin-block-start: 1.3rem; }
  .post__meta button {
    margin-inline-start: 1.3rem; }
  .post__meta .menu {
    width: 15rem;
    inset: 4.7rem -2rem auto auto; }
    .post__meta .menu::before {
      inset-inline: auto 2.2rem; }

.post__content {
  padding-inline-start: 0.5rem; }
  .post__content h4 {
    margin-block-end: 1.7rem; }

.post__img {
  background-color: var(--rgb-secondary-4); }
  .post__img img {
    max-height: 60rem;
    margin: auto; }

.post__footer {
  --gap: 5rem;
  padding: 2.3rem 2.6rem 2rem; }
  .post__footer :is(button, span) {
    --align-items: center;
    --gap: 0.6rem; }
    .post__footer :is(button, span):last-child {
      margin-inline-start: auto; }
  .post__footer button:not([class^="btn"]):hover {
    color: var(--rgb-primary-1); }
    .post__footer button:not([class^="btn"]):hover path {
      fill: var(--rgb-primary-1);
      stroke: var(--rgb-primary-1); }
  .post__footer button[class^="btn"] {
    --btn-padding: 0.95rem 3.15rem;
    margin: auto; }

.comment {
  --align-items: flex-start;
  --gap: 1.25rem;
  --btn-padding: 0.4rem 2.2rem; }
  .comment:first-child {
    margin-inline: 2rem; }
    .comment:first-child,
    .comment:first-child + .comment {
      padding-block-start: 2.4rem;
      border-block-start: 0.1rem solid rgba(var(--secondary-3), 0.2); }
  .comment + .comment {
    padding-inline: 2rem; }
  .comment__wrapper {
    padding-block-end: 2rem; }
  .comment__body {
    padding-block-end: 1.4rem;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%; }
    .comment__body textarea {
      min-height: 10rem;
      resize: vertical;
      max-height: 20rem; }
    .comment__body button {
      margin-block-start: 1.8rem;
      margin-inline-start: auto; }
  .comment__header {
    --align-items: flex-end;
    margin-block-end: 0.8rem;
    padding-block-start: 0.5rem; }
    .comment__header span:first-child {
      --regular: var(--medium);
      margin-inline-end: 1.25rem; }
    .comment__header span:last-child {
      --fs-13: var(--fs-11);
      --rgb-typography-1: var(--rgb-typography-3); }
  .comment__img {
    --square: 4.8rem; }
  .comment__btn {
    margin: auto; }

.banner {
  overflow: hidden; }
  .banner__img {
    aspect-ratio: 694/184; }
  .banner__body {
    --align-items: flex-start;
    --justify-content: space-between;
    --gap: 1.5rem;
    --flex-wrap: wrap;
    padding: 2.2rem 4rem 0 3rem; }
    .banner__body [class^="btn"] {
      --btn-padding: 0.9rem 3.4rem;
      --rgb-secondary-3: var(--rgb-typography-1); }
  .banner__profile {
    margin-block-start: -14.5rem; }
  .banner__btns {
    --gap: 1.5rem; }
  .banner__text {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-weight: var(--light); }
  .banner__meta {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%; }
    .banner__meta button:hover {
      color: var(--rgb-primary-1); }
    .banner__meta button span {
      margin-inline-end: 0.8rem;
      font-size: var(--fs-26);
      font-weight: var(--semi-bold); }
    .banner__meta button + button {
      margin-inline-start: 5.4rem; }
  .banner__link {
    --align-items: center;
    --gap: 0.98rem; }
    .banner__link:hover {
      color: var(--rgb-primary-1); }
      .banner__link:hover path {
        fill: var(--rgb-primary-1); }
  .banner__nav {
    --justify-content: flex-start;
    --gap: 5rem;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    border-block-start: 0.1rem solid var(--rgb-grey); }
    .banner__nav :is(button, a) {
      --medium: var(--regular);
      padding-block: 1.5rem 1.3rem;
      border-block-end: 0.2rem solid transparent;
      opacity: 50%; }
      .banner__nav :is(button, a):hover, .banner__nav :is(button, a).active {
        border-block-end-color: var(--rgb-grey);
        opacity: 1; }

.setting {
  margin-block-end: 4rem;
  background-color: var(--rgb-white); }
  .setting__nav {
    width: Max(18.6rem, 25%);
    border-inline-end: 1px solid rgba(var(--secondary-3), 0.2); }
  .setting__item {
    width: 100%;
    padding: 1rem 3rem;
    font-size: var(--fs-16);
    text-align: start;
    border-inline-start: 0.2rem solid transparent;
    opacity: 80%; }
    .setting__item[disabled] {
      color: inherit;
      cursor: default; }
    .setting__item:not(:first-child) {
      margin-block-start: 1.2rem; }
    .setting__item:not([disabled]):hover, .setting__item:not([disabled]):focus {
      outline: none; }
    .setting__item:not([disabled]):hover {
      opacity: 1;
      border-inline-start-color: var(--rgb-secondary-3); }
    .setting__item.active {
      background-color: rgba(var(--primary-1), 0.1);
      border-inline-start-color: var(--rgb-secondary-3); }
    .setting__item:focus {
      background-color: rgba(var(--primary-1), 0.3); }
  .setting__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-block-end: 4rem; }
  .setting__heading {
    margin-block: 3.8rem 4.5rem; }

.setting-profile__banner, .setting-profile__img {
  overflow: hidden; }
  .setting-profile__banner::after, .setting-profile__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(./img/dummy-banner-img.png) center/cover;
    opacity: 0%; }
  .setting-profile__banner:hover::after, .setting-profile__img:hover::after {
    opacity: 90%; }
  .setting-profile__banner input, .setting-profile__img input {
    position: absolute;
    opacity: 0; }
    .setting-profile__banner input:focus + img, .setting-profile__img input:focus + img {
      outline: 0.2rem dashed rgba(var(--plain-white), 0.6);
      outline-offset: -1rem; }
  .setting-profile__banner img, .setting-profile__img img {
    width: 100%;
    aspect-ratio: 694/184; }

.setting-profile__img {
  --square: 13.4rem;
  margin-block-start: -6.7rem;
  margin-inline-start: 3rem; }

.setting-profile__wrapper {
  max-width: 57rem;
  margin-inline: auto;
  padding-inline: 1.5rem; }

.setting-profile__field {
  --column: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat(var(--column), 1fr);
  grid-template-columns: repeat(var(--column), 1fr);
  gap: 0.9rem 0.8rem;
  margin-block-start: 1.7rem; }

.subscription__tab {
  margin-inline: 4.5rem;
  margin-block-end: 3.5rem; }
  .subscription__tab :is(a, button) {
    width: 100%;
    padding-block: 0.7rem 1.55rem;
    font-weight: var(--regular);
    border-block-end: 0.1rem solid rgba(var(--secondary-3), 0.2); }
    .subscription__tab :is(a, button):hover {
      border-block-end-color: var(--rgb-black);
      outline: none; }
    .subscription__tab :is(a, button):focus {
      background-color: rgba(var(--primary-1), 0.3);
      outline: none; }
    .subscription__tab :is(a, button).active {
      font-weight: var(--medium);
      border-block-end-color: var(--rgb-black); }

.subscription table {
  width: calc(100% - (4.5rem * 2));
  margin-inline: 4.55rem;
  border-collapse: collapse; }
  .subscription table td {
    padding-block: 1.56rem;
    border-block-end: 0.1rem solid rgba(var(--secondary-3), 0.2); }
  .subscription table .action {
    --align-items: center;
    --justify-content: center;
    --gap: 0.7rem; }
  .subscription table button {
    padding: 0.5rem; }
    .subscription table button:hover {
      background-color: var(--rgb-secondary-4); }

.setting-verify img {
  margin-block-start: 5rem; }

.setting-verify h2 {
  margin-block: 2.3rem 2.8rem; }

.setting-verify p + p {
  margin-block: 0.65rem 2.8rem; }

.setting-verify :is(a, button) {
  --rgb-secondary-3: var(--rgb-black);
  margin-inline: auto;
  margin-block-end: 5rem; }

.login {
  margin-block: 5rem; }
  .login__wrapper {
    --box-padding: 7rem 3rem 10rem;
    --box-shadow: 0px 0.3rem 0.6rem rgba(var(--plain-black), 0.16); }
  .login__inner {
    max-width: 34.4rem;
    margin-inline: auto; }
  .login__heading {
    margin-block-end: 2rem;
    font-size: var(--fs-54); }
  .login__input {
    margin-block-end: 2rem; }
    .login__input input {
      --box-border-radius: 1rem;
      width: 100%;
      padding: 1rem 2rem;
      color: var(--rgb-secondary-3);
      border: 0.2rem solid var(--rgb-secondary-3); }
      .login__input input::-webkit-input-placeholder {
        opacity: 0.5; }
      .login__input input::-moz-placeholder {
        opacity: 0.5; }
      .login__input input:-ms-input-placeholder {
        opacity: 0.5; }
      .login__input input::-ms-input-placeholder {
        opacity: 0.5; }
      .login__input input::placeholder {
        opacity: 0.5; }
    .login__input :is(span, button) {
      position: absolute;
      inset: 0 2rem 0 auto;
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      margin: auto; }
  .login__button {
    --rgb-secondary-3: var(--rgb-black);
    width: 100%; }
  .login__meta {
    margin-block-start: 3.5rem;
    --align-items: center;
    --justify-content: center; }
    .login__meta a {
      color: var(--rgb-secondary-3); }
    .login__meta span {
      --square: 0.2rem;
      margin-inline: 1.4rem;
      background-color: var(--rgb-secondary-3); }
    .login__meta p {
      color: var(--rgb-secondary-3); }
  .login__or {
    margin-block: 2rem 2.3rem;
    font-size: var(--fs-18);
    color: var(--rgb-secondary-3); }
    .login__or::before, .login__or::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1; }
    .login__or::before {
      inset-block-start: 1.4rem;
      width: 100%;
      border-block-start: 0.1rem solid var(--rgb-grey); }
    .login__or::after {
      width: 6.4rem;
      height: 100%;
      margin: auto;
      background-color: var(--rgb-white); }
  .login__social {
    --box-shadow: 0 0 0.6rem rgba(var(--plain-black), 0.16);
    margin-block-start: 2rem;
    border-radius: 5rem; }
    .login__social :is(img, svg) {
      max-width: 100%;
      height: auto; }

.notification {
  --box-shadow: 0.1rem 0.6rem 0.6rem rgba(var(--plain-black), 0.16);
  inset-inline: auto -0.7rem;
  width: 44rem;
  padding-block-start: 2rem; }
  .notification::before {
    inset-inline: auto 2.2rem; }
  .notification .menu__list {
    max-height: 40rem;
    overflow: auto; }
  .notification .menu__item {
    margin-block-end: 1rem; }
    .notification .menu__item a {
      height: auto;
      padding-block: 0.5rem; }
  .notification .profile-meta {
    --gap: 1rem; }
    .notification .profile-meta h3 {
      margin-block-end: 0.2rem; }
      .notification .profile-meta h3 span {
        display: inline-block;
        font-weight: var(--medium); }
      .notification .profile-meta h3 + span {
        font-size: var(--fs-12);
        color: var(--rgb-typography-2); }
  .notification .menu__btn a {
    --justify-content: center; }

.alert {
  position: fixed;
  inset: 9rem 1.4rem auto auto;
  z-index: 2;
  --box-shadow: 0 0.3rem 0.6rem rgba(var(--plain-black), 0.16);
  border-radius: 0.5rem;
  width: Min(44rem, 100%);
  padding-block: 1.2rem;
  padding-inline: 8.6rem 3rem;
  background-color: var(--rgb-white); }
  .alert::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 1rem;
    background-color: var(--alert-clr);
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem; }
  .alert::after {
    --square: 3.6rem;
    content: "";
    position: absolute;
    inset: 0 auto 0 3rem;
    margin: auto; }
  .alert h3 {
    --light: var(--medium); }
  .alert p {
    margin-block-start: -0.2rem;
    --fs-13: var(--fs-12); }
  .alert.success {
    --alert-clr: var(--rgb-success); }
    .alert.success::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg id='icon-alert-success' transform='translate(-21444.447 1132.554)'%3E%3Cg id='Ellipse_26' data-name='Ellipse 26' transform='translate(21444.447 -1132.554)' fill='%2347d764' stroke='%2347d764' stroke-width='3'%3E%3Ccircle cx='18' cy='18' r='18' stroke='none'/%3E%3Ccircle cx='18' cy='18' r='16.5' fill='none'/%3E%3C/g%3E%3Cpath id='Path_201' data-name='Path 201' d='M21493.377-1077.633l3.389,3.389,8.639-8.639' transform='translate(-36.839 -36.071)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A"); }
  .alert.info {
    --alert-clr: var(--rgb-info); }
    .alert.info::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg id='icon-alert-info' transform='translate(-21444.447 1132.554)'%3E%3Cg id='Ellipse_26' data-name='Ellipse 26' transform='translate(21444.447 -1132.554)' fill='%232f86eb' stroke='%232f86eb' stroke-width='3'%3E%3Ccircle cx='18' cy='18' r='18' stroke='none'/%3E%3Ccircle cx='18' cy='18' r='16.5' fill='none'/%3E%3C/g%3E%3Cpath id='Path_207' data-name='Path 207' d='M2.455-6.976a1.012,1.012,0,0,1-.745-.3A.991.991,0,0,1,1.408-8a1.048,1.048,0,0,1,.31-.772,1.006,1.006,0,0,1,.736-.31,1.027,1.027,0,0,1,.772.3A1.074,1.074,0,0,1,3.519-8a.986.986,0,0,1-.31.718A1.027,1.027,0,0,1,2.455-6.976ZM.486,3.367A2.641,2.641,0,0,1,.574,2.6a1.174,1.174,0,0,0,.967-.328A2.067,2.067,0,0,0,1.8,1.061V-2.452a2.381,2.381,0,0,0-.089-.727.667.667,0,0,0-.373-.4,2.152,2.152,0,0,0-.869-.133,1.2,1.2,0,0,1,.16-.656,5.853,5.853,0,0,0,1.26-.2A3.544,3.544,0,0,0,3-4.971q.39.124.39.71V1.061a2.261,2.261,0,0,0,.231,1.215.929.929,0,0,0,.816.328,2.756,2.756,0,0,1,.089.763q-.923-.053-2-.053Q1.373,3.314.486,3.367Z' transform='translate(21459.479 -1111.968)' fill='%23fff' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); }
  .alert.warning {
    --alert-clr: var(--rgb-warning); }
    .alert.warning::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg id='icon-alert-warning' transform='translate(2423.326 -7847)'%3E%3Cg id='Ellipse_28' data-name='Ellipse 28' transform='translate(-2423.326 7847)' fill='%23ffc023' stroke='%23ffc023' stroke-width='3'%3E%3Ccircle cx='18' cy='18' r='18' stroke='none'/%3E%3Ccircle cx='18' cy='18' r='16.5' fill='none'/%3E%3C/g%3E%3Crect id='Rectangle_741' data-name='Rectangle 741' width='3' height='9' rx='1.5' transform='translate(-2406.826 7858)' fill='%23fff'/%3E%3Ccircle id='Ellipse_27' data-name='Ellipse 27' cx='2' cy='2' r='2' transform='translate(-2407.326 7868)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }
  .alert.error {
    --alert-clr: var(--rgb-error); }
    .alert.error::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg id='icon-alert-error' transform='translate(-21445.453 1124.546)'%3E%3Cg id='Ellipse_26' data-name='Ellipse 26' transform='translate(21445.453 -1124.546)' fill='%23fe5858' stroke='%23fe5858' stroke-width='3'%3E%3Cellipse cx='18' cy='18' rx='18' ry='18' stroke='none'/%3E%3Cellipse cx='18' cy='18' rx='16.5' ry='16.5' fill='none'/%3E%3C/g%3E%3Cpath id='Path_202' data-name='Path 202' d='M17824.9-2839.97l11.316,11.317' transform='translate(3632.924 1727.793)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3Cpath id='Path_203' data-name='Path 203' d='M0,0,11.317,11.317' transform='translate(21469.139 -1112.177) rotate(90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E"); }