@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap";
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: auto;
  scrollbar-color: #ccc #fff;
  -webkit-tap-highlight-color: transparent; }
  *::-webkit-scrollbar {
    width: 8px; }
  *::-webkit-scrollbar-track {
    background: transparent; }
  *::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border: 4px solid transparent; }
  *::before, *::after {
    box-sizing: border-box; }
  * > img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none; }
  * .skeleton {
    color: transparent !important; }

.alert {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 15px 25px;
  border-radius: 30px;
  background: #fff;
  color: #000;
  opacity: 0;
  visibility: hidden;
  z-index: 9999999;
  text-align: center;
  font-size: 16px;
  transition: 300ms all;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.4);
  cursor: default; }
  .alert.active {
    top: 20px;
    opacity: 1;
    visibility: visible; }
  @media (max-width: 540px) {
    .alert {
      padding: 15px 20px; } }

html,
body {
  height: 100%; }

body,
input,
textarea,
select,
button {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.workspace {
  background: #0f0f1b !important;
  color: #fff !important; }
  @media (max-width: 1215px) {
    .workspace {
      padding: 0 20px; } }

.container {
  max-width: 1200px;
  margin: 0 auto; }

.header-workspace .container {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 25px auto; }
  .header-workspace .container a .nn {
    font-size: 24px;
    font-weight: 600;
    color: #fff; }
    @media (max-width: 500px) {
      .header-workspace .container a .nn {
        font-size: 22px; } }
  .header-workspace .container p {
    background: red;
    border-radius: 5px;
    padding: 2px 5px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
    margin: 3px 0 0 5px;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none; }
  .header-workspace .container .user-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #20202f;
    margin-left: auto;
    border-radius: 10px;
    padding: 6px 15px;
    cursor: pointer;
    transition: 200ms all;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    position: relative; }
    .header-workspace .container .user-login .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 7px;
      position: relative; }
      .header-workspace .container .user-login .avatar .skeleton::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        animation: skeleton-loading 1s linear infinite alternate;
        width: 100%;
        height: 100%;
        border-radius: 10px; }
      .header-workspace .container .user-login .avatar .skeleton + img {
        opacity: 0; }
      .header-workspace .container .user-login .avatar img {
        width: 100%; }
    .header-workspace .container .user-login h2 {
      display: flex;
      flex-direction: column;
      align-items: flex-start; }
      .header-workspace .container .user-login h2 span {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        position: relative; }
        .header-workspace .container .user-login h2 span.skeleton::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          animation: skeleton-loading 1s linear infinite alternate;
          width: 100%;
          height: 10px;
          border-radius: 15px; }
        .header-workspace .container .user-login h2 span:last-child {
          font-size: 12px;
          margin-top: -1px;
          color: rgba(255, 255, 255, 0.5); }
    .header-workspace .container .user-login:hover {
      background: #262638;
      transition: 100ms all; }

.popup-share {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: none; }
  .popup-share .popup-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 55px;
    width: 600px;
    border-radius: 15px;
    background: #171727; }
    .popup-share .popup-inner i {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 39px;
      height: 39px;
      border-radius: 50%;
      display: grid;
      cursor: pointer;
      place-items: center;
      background: rgba(255, 255, 255, 0.03);
      transition: 300ms all; }
      .popup-share .popup-inner i svg {
        width: 27px;
        height: 27px; }
      .popup-share .popup-inner i:hover {
        background: rgba(255, 255, 255, 0.1);
        transition: 300ms ease-in; }
    .popup-share .popup-inner h2 {
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 25px; }
    .popup-share .popup-inner ul {
      display: flex;
      align-items: center;
      border-radius: 5px;
      padding: 5px;
      margin-bottom: 40px;
      width: 100%;
      background: #1e1e2e; }
      .popup-share .popup-inner ul li {
        flex: 1;
        text-align: center;
        margin: 0 5px;
        border-right: 1px solid rgba(255, 255, 255, 0.05); }
        .popup-share .popup-inner ul li a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          border-radius: 4px;
          padding: 7px 15px;
          font-size: 15px;
          font-weight: 500;
          color: #fff;
          transition: 300ms border-color ease-in; }
          .popup-share .popup-inner ul li a img {
            width: 20px;
            margin-right: 10px; }
        .popup-share .popup-inner ul li:last-child {
          border: 0; }
    .popup-share .popup-inner h6 {
      font-size: 16px;
      font-weight: 700;
      color: #828a92;
      margin-bottom: 10px; }
    .popup-share .popup-inner .input {
      width: 100%;
      position: relative; }
      .popup-share .popup-inner .input input {
        width: 100%;
        height: 57px;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: transparent;
        border-radius: 5px;
        padding: 0 15px;
        font-size: 16px;
        cursor: default; }
        .popup-share .popup-inner .input input:focus {
          outline: none; }
      .popup-share .popup-inner .input button {
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
        border: none;
        background: #171727;
        border-radius: 0 5px 5px 0;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
        padding: 0 20px 0 5px;
        color: #505ed4;
        font-size: 14px;
        font-weight: bold; }
    @media (max-width: 510px) {
      .popup-share .popup-inner {
        padding: 25px 30px; }
        .popup-share .popup-inner ul li:last-child {
          display: none; }
        .popup-share .popup-inner ul li:nth-child(2) {
          border: 0; } }
  .popup-share.active {
    display: flex; }

.popup-messages {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center; }
  .popup-messages .popup-messages-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 600px;
    max-height: 750px;
    padding: 50px;
    border-radius: 15px;
    background: #171727;
    overflow-y: auto; }
    @media (max-width: 700px) {
      .popup-messages .popup-messages-inner {
        width: 100%;
        height: 100%;
        padding: 20px;
        border-radius: 0; }
        .popup-messages .popup-messages-inner .bottom {
          margin-top: auto; }
        .popup-messages .popup-messages-inner .comments {
          max-height: 100% !important; }
          .popup-messages .popup-messages-inner .comments .comment:first-child {
            margin-top: 40px !important; } }
    .popup-messages .popup-messages-inner i {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 39px;
      height: 39px;
      border-radius: 50%;
      display: grid;
      z-index: 1;
      cursor: pointer;
      place-items: center;
      background: rgba(255, 255, 255, 0.03);
      transition: 300ms all; }
      .popup-messages .popup-messages-inner i svg {
        width: 27px;
        height: 27px; }
      .popup-messages .popup-messages-inner i:hover {
        background: rgba(255, 255, 255, 0.1);
        transition: 300ms ease-in; }
    .popup-messages .popup-messages-inner .comments {
      position: relative;
      padding: 0 5px;
      margin-bottom: 20px;
      width: 100%;
      max-height: 400px; }
      .popup-messages .popup-messages-inner .comments .comment {
        position: relative;
        padding: 20px;
        background: #000;
        margin-top: 15px;
        border-radius: 5px;
        overflow: hidden; }
        .popup-messages .popup-messages-inner .comments .comment .top-side {
          display: flex;
          align-items: center; }
          .popup-messages .popup-messages-inner .comments .comment .top-side .avatar {
            position: relative;
            width: 35px;
            height: 35px;
            margin-right: 10px; }
            .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .edit-avatar {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background-image: linear-gradient(315deg, rgba(255, 207, 223, 0.5) 0%, rgba(176, 243, 241, 0.5) 74%);
              cursor: pointer; }
              .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .edit-avatar svg {
                transition: 300ms all; }
              .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .edit-avatar:hover svg {
                transform: scale(1.1) rotate(5deg);
                transition: 300ms all; }
              .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .edit-avatar:focus svg {
                transform: scale(1.1) rotate(5deg);
                transition: 300ms all; }
            .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0;
              left: 30px;
              width: 0;
              height: 35px;
              border-radius: 50px;
              background: #fff;
              box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
              overflow: hidden;
              z-index: -999;
              padding: 0 10px;
              opacity: 0;
              visibility: hidden;
              transition: 300ms all; }
              .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                width: 100%; }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input {
                  display: none; }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji1:checked ~ li label[for="memoji1"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji2:checked ~ li label[for="memoji2"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji3:checked ~ li label[for="memoji3"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji4:checked ~ li label[for="memoji4"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji5:checked ~ li label[for="memoji5"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji6:checked ~ li label[for="memoji6"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji7:checked ~ li label[for="memoji7"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji8:checked ~ li label[for="memoji8"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji9:checked ~ li label[for="memoji9"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji10:checked ~ li label[for="memoji10"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji11:checked ~ li label[for="memoji11"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji12:checked ~ li label[for="memoji12"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji13:checked ~ li label[for="memoji13"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul input#memoji14:checked ~ li label[for="memoji14"] img {
                  transform: scale(1.1); }
                .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul li label {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 100%;
                  cursor: pointer; }
                  .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul li label img {
                    width: 30px;
                    transition: 200ms transform; }
                  .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .avatar-gallery ul li label:hover img {
                    transform: scale(1.1);
                    transition: 200ms transform; }
            .popup-messages .popup-messages-inner .comments .comment .top-side .avatar:focus-within .edit-avatar + .avatar-gallery {
              visibility: visible;
              opacity: 1;
              left: 40px;
              z-index: 999;
              width: 155px;
              transition: 300ms all; }
            .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .edit-avatar ~ .ua {
              cursor: pointer; }
            .popup-messages .popup-messages-inner .comments .comment .top-side .avatar .ua {
              width: 100%;
              border-radius: 50%; }
          .popup-messages .popup-messages-inner .comments .comment .top-side .details {
            display: flex;
            align-items: center;
            height: 35px; }
            @media (max-width: 400px) {
              .popup-messages .popup-messages-inner .comments .comment .top-side .details {
                flex-direction: column;
                align-items: flex-start;
                justify-content: center; }
                .popup-messages .popup-messages-inner .comments .comment .top-side .details span.time {
                  font-size: 12px !important;
                  margin: 0 !important; }
                  .popup-messages .popup-messages-inner .comments .comment .top-side .details span.time::before {
                    display: none; } }
            .popup-messages .popup-messages-inner .comments .comment .top-side .details .personal {
              display: flex;
              align-items: center; }
            .popup-messages .popup-messages-inner .comments .comment .top-side .details span {
              color: #fff;
              font-size: 16px;
              font-weight: 700;
              margin-right: 5px;
              text-transform: capitalize; }
              .popup-messages .popup-messages-inner .comments .comment .top-side .details span.time {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.5);
                text-transform: none;
                margin: 0 0 1px 6px;
                position: relative; }
                .popup-messages .popup-messages-inner .comments .comment .top-side .details span.time::before {
                  content: "";
                  position: absolute;
                  width: 0.093rem;
                  height: 14px;
                  background: rgba(255, 255, 255, 0.5);
                  top: 50%;
                  transform: translateY(-50%);
                  left: -6px; }
              .popup-messages .popup-messages-inner .comments .comment .top-side .details span.surname {
                text-transform: uppercase; }
        .popup-messages .popup-messages-inner .comments .comment .message {
          padding: 10px 0 0;
          overflow: hidden; }
          .popup-messages .popup-messages-inner .comments .comment .message textarea {
            display: none;
            width: 100%;
            max-width: 100%;
            height: 80px;
            max-height: 80px;
            resize: none;
            background: #101010;
            border-radius: 5px;
            padding: 10px;
            border: 0;
            color: #fff; }
            .popup-messages .popup-messages-inner .comments .comment .message textarea.active {
              display: block; }
          .popup-messages .popup-messages-inner .comments .comment .message span {
            font-size: 14px;
            font-weight: 400;
            color: #fff; }
        .popup-messages .popup-messages-inner .comments .comment > button {
          border: 0; }
        .popup-messages .popup-messages-inner .comments .comment .delete-comment {
          display: grid;
          place-items: center;
          position: absolute;
          top: 15px;
          right: 55px;
          background: transparent;
          width: 33px;
          height: 33px;
          cursor: pointer;
          border-radius: 10px;
          transition: 300ms all; }
          .popup-messages .popup-messages-inner .comments .comment .delete-comment:hover {
            background: #4e1f1f;
            transition: 300ms all; }
          .popup-messages .popup-messages-inner .comments .comment .delete-comment:hover svg {
            transition: 150ms all;
            fill: #ff1c1c; }
          .popup-messages .popup-messages-inner .comments .comment .delete-comment:hover svg .cap {
            animation: shakeAnimation 700ms 1; }
          .popup-messages .popup-messages-inner .comments .comment .delete-comment svg {
            width: 21px;
            height: 21px;
            fill: #77889a;
            transition: 150ms all; }

@keyframes shakeAnimation {
  0% {
    transform: translate(0px, 0) rotate(-2deg); }
  15% {
    transform: translate(1px, -1px) rotate(2deg); }
  30% {
    transform: translate(-2px, -1px) rotate(-2deg); }
  45% {
    transform: translate(3px, -1px) rotate(2deg); }
  60% {
    transform: translate(-4px, -1px) rotate(-2deg); }
  75% {
    transform: translate(0, 0) rotate(-2deg); } }
          .popup-messages .popup-messages-inner .comments .comment .delete-comment.deleting svg {
            display: none; }
          .popup-messages .popup-messages-inner .comments .comment .delete-comment.deleting::after {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            margin: auto;
            border: 3px solid transparent;
            border-top-color: #409fff;
            border-radius: 50%;
            animation: button-loading-spinner 1s ease infinite; }

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn); }
  to {
    transform: rotate(1turn); } }
          .popup-messages .popup-messages-inner .comments .comment .delete-comment:disabled {
            opacity: 0.4;
            cursor: not-allowed; }
            .popup-messages .popup-messages-inner .comments .comment .delete-comment:disabled:hover {
              background: #431515;
              transition: 300ms all; }
            .popup-messages .popup-messages-inner .comments .comment .delete-comment:disabled:hover svg {
              transition: 150ms all;
              fill: #c51818; }
            .popup-messages .popup-messages-inner .comments .comment .delete-comment:disabled:hover svg .cap {
              animation: none; }
        .popup-messages .popup-messages-inner .comments .comment .edit-comment {
          display: grid;
          place-items: center;
          position: absolute;
          top: 15px;
          right: 15px;
          background: transparent;
          width: 33px;
          height: 33px;
          cursor: pointer;
          border-radius: 10px;
          transition: 300ms all; }
          .popup-messages .popup-messages-inner .comments .comment .edit-comment:hover {
            background: #4e271f;
            transition: 300ms all; }
          .popup-messages .popup-messages-inner .comments .comment .edit-comment:hover svg {
            transition: 150ms all;
            fill: #ff8e3b; }
          .popup-messages .popup-messages-inner .comments .comment .edit-comment svg {
            width: 21px;
            height: 21px;
            fill: #77889a;
            transition: 150ms all; }
        .popup-messages .popup-messages-inner .comments .comment .save-comment {
          display: grid;
          place-items: center;
          position: absolute;
          top: 15px;
          right: 15px;
          background: transparent;
          width: 33px;
          height: 33px;
          cursor: pointer;
          border-radius: 10px;
          transition: 300ms all; }
          .popup-messages .popup-messages-inner .comments .comment .save-comment:disabled {
            opacity: 0.4;
            cursor: not-allowed; }
            .popup-messages .popup-messages-inner .comments .comment .save-comment:disabled:hover {
              background: #431515;
              transition: 300ms all; }
            .popup-messages .popup-messages-inner .comments .comment .save-comment:disabled:hover svg {
              transition: 150ms all;
              fill: #c51818; }
          .popup-messages .popup-messages-inner .comments .comment .save-comment:hover {
            background: #154329;
            transition: 300ms all; }
          .popup-messages .popup-messages-inner .comments .comment .save-comment:hover svg {
            transition: 150ms all;
            fill: #18c56c; }
          .popup-messages .popup-messages-inner .comments .comment .save-comment svg {
            width: 21px;
            height: 21px;
            fill: #77889a;
            transition: 150ms all; }
          .popup-messages .popup-messages-inner .comments .comment .save-comment.saving svg {
            display: none; }
          .popup-messages .popup-messages-inner .comments .comment .save-comment.saving::after {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            margin: auto;
            border: 3px solid transparent;
            border-top-color: #1daf00;
            border-radius: 50%;
            animation: button-loading-spinner 1s ease infinite; }

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn); }
  to {
    transform: rotate(1turn); } }
        .popup-messages .popup-messages-inner .comments .comment:first-child {
          margin: 0; }
      .popup-messages .popup-messages-inner .comments .no-comment {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background: #1f1f33;
        border-radius: 5px;
        padding: 25px;
        width: 100%;
        height: 100%; }
        .popup-messages .popup-messages-inner .comments .no-comment .cat img {
          width: 100%;
          cursor: grab;
          object-fit: cover; }
          .popup-messages .popup-messages-inner .comments .no-comment .cat img:active {
            cursor: grabbing; }
        .popup-messages .popup-messages-inner .comments .no-comment span {
          font-size: 28px;
          font-weight: 700;
          margin-top: 5px;
          cursor: default; }
      .popup-messages .popup-messages-inner .comments::-webkit-scrollbar {
        width: 2px;
        background: transparent; }
    .popup-messages .popup-messages-inner .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%; }
      .popup-messages .popup-messages-inner .bottom form {
        width: 100%;
        height: 100%; }
        .popup-messages .popup-messages-inner .bottom form ul {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%; }
          .popup-messages .popup-messages-inner .bottom form ul li {
            width: 100%; }
            .popup-messages .popup-messages-inner .bottom form ul li label {
              padding: 10px;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: flex-start; }
              .popup-messages .popup-messages-inner .bottom form ul li label span {
                font-size: 15px;
                font-weight: 600;
                margin-bottom: 5px; }
              .popup-messages .popup-messages-inner .bottom form ul li label input {
                width: 100%;
                height: 100%;
                font-size: 15px;
                font-weight: 600;
                border-radius: 5px;
                padding: 5px 10px;
                border: none; }
        .popup-messages .popup-messages-inner .bottom form .last {
          display: block;
          padding: 5px 10px 10px; }
          .popup-messages .popup-messages-inner .bottom form .last span {
            font-size: 15px;
            font-weight: 600; }
          .popup-messages .popup-messages-inner .bottom form .last textarea {
            width: 100%;
            height: 120px;
            resize: none;
            margin-top: 5px;
            font-size: 15px;
            font-weight: 600;
            padding: 10px;
            border: none;
            border-radius: 5px; }
            .popup-messages .popup-messages-inner .bottom form .last textarea:focus {
              outline: none; }
        .popup-messages .popup-messages-inner .bottom form .ark {
          display: flex;
          align-items: center; }
          .popup-messages .popup-messages-inner .bottom form .ark .messageLimit {
            margin-left: auto;
            display: block;
            margin-right: 10px;
            color: #fff;
            font-weight: 700;
            font-size: 14px; }
          .popup-messages .popup-messages-inner .bottom form .ark button {
            display: block;
            margin: 0 10px 0 0;
            padding: 7px 15px;
            font-size: 14px;
            font-weight: 600;
            border: 0;
            border-radius: 5px;
            cursor: pointer; }
          .popup-messages .popup-messages-inner .bottom form .ark .comm-avatar {
            margin-left: 10px; }
            .popup-messages .popup-messages-inner .bottom form .ark .comm-avatar img {
              width: 32px;
              border-radius: 50%; }
  .popup-messages.active {
    display: flex; }

.post-detail {
  margin: 30px 0; }
  .post-detail .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%; }
    .post-detail .container .post-photos {
      display: flex;
      flex-direction: column;
      width: calc(100% - 430px);
      height: 100%;
      position: relative;
      border-radius: 5px;
      padding: 15px;
      background: #171727; }
      .post-detail .container .post-photos .cover-blur {
        background: linear-gradient(to bottom, transparent, #171727);
        width: 100%;
        height: calc(100% - 60px);
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0; }
      .post-detail .container .post-photos .cover {
        height: 100%; }
        .post-detail .container .post-photos .cover img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px 5px 0 0; }
      .post-detail .container .post-photos .actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto -5px 0; }
        .post-detail .container .post-photos .actions a {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          width: 100%;
          margin: 10px 5px 0;
          color: #fff;
          background: #232332;
          font-weight: 500;
          border-radius: 5px; }
          .post-detail .container .post-photos .actions a.download {
            background: #242486; }
          .post-detail .container .post-photos .actions a img {
            width: 12px;
            margin-right: 8px; }
    .post-detail .container .post-sidebar {
      display: flex;
      flex-direction: column;
      width: 400px;
      height: 100%; }
      .post-detail .container .post-sidebar h3 {
        font-size: 26px;
        font-weight: bold;
        line-height: 35px;
        color: #fff; }
        @media (max-width: 402px) {
          .post-detail .container .post-sidebar h3 {
            font-size: 24px; } }
      .post-detail .container .post-sidebar .date {
        display: block;
        font-size: 16px;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.5); }
      .post-detail .container .post-sidebar .share {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        padding: 3px 15px;
        font-weight: 500;
        font-size: 14px;
        background: #181824;
        border: 1px solid #232333;
        border-radius: 5px;
        cursor: pointer;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none; }
        .post-detail .container .post-sidebar .share svg {
          margin-right: 8px;
          width: 15px;
          height: 14px; }
      .post-detail .container .post-sidebar .keywords {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-top: 1px solid #242424;
        border-bottom: 1px solid #242424;
        margin: 12px 0;
        padding: 15px 0 10px;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none; }
        .post-detail .container .post-sidebar .keywords span {
          background: #181824;
          border: 1px solid #232333;
          color: rgba(255, 255, 255, 0.5);
          margin: 0 5px 5px 0;
          padding: 5px 15px;
          font-size: 15px;
          cursor: default;
          border-radius: 20px; }
      .post-detail .container .post-sidebar .color-palette {
        background: #171727;
        padding: 20px 20px 15px;
        border-radius: 5px; }
        .post-detail .container .post-sidebar .color-palette h4 {
          font-size: 20px;
          font-weight: 500;
          color: #fff;
          margin-bottom: 20px; }
        .post-detail .container .post-sidebar .color-palette ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between; }
          .post-detail .container .post-sidebar .color-palette ul li {
            width: calc(50% - 5px);
            margin-bottom: 10px; }
            @media (max-width: 402px) {
              .post-detail .container .post-sidebar .color-palette ul li {
                width: 100%; } }
            .post-detail .container .post-sidebar .color-palette ul li a {
              display: flex;
              align-items: center;
              padding: 0 10px;
              background: #232332;
              border-radius: 40px;
              height: 40px;
              transition: 100ms ease-out;
              cursor: pointer;
              -webkit-user-drag: none;
              user-select: none;
              -moz-user-select: none;
              -webkit-user-select: none;
              -ms-user-select: none; }
              .post-detail .container .post-sidebar .color-palette ul li a:hover {
                background: #2d2d3f;
                transition: 100ms ease; }
              .post-detail .container .post-sidebar .color-palette ul li a i {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                border: 2px solid #fff; }
              .post-detail .container .post-sidebar .color-palette ul li a span {
                margin-left: 10px;
                color: #fff;
                font-size: 16px;
                font-weight: 500;
                line-height: 21px;
                text-transform: uppercase; }
      .post-detail .container .post-sidebar .social {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        border-radius: 5px;
        padding: 20px 0;
        background: #171727; }
        .post-detail .container .post-sidebar .social .inner {
          width: 100%;
          margin-bottom: 10px;
          text-align: center; }
          .post-detail .container .post-sidebar .social .inner p {
            font-weight: 200;
            font-size: 18px;
            color: #fff; }
            .post-detail .container .post-sidebar .social .inner p span {
              font-weight: 700; }
        .post-detail .container .post-sidebar .social .bottom {
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid rgba(255, 255, 255, 0.04);
          padding: 10px 0 0;
          width: 100%;
          gap: 20px; }
          .post-detail .container .post-sidebar .social .bottom a {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            position: relative;
            -webkit-user-drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none; }
            .post-detail .container .post-sidebar .social .bottom a .icon {
              display: grid;
              place-items: center;
              position: relative;
              width: 30px;
              height: 30px;
              border-radius: 10px; }
              .post-detail .container .post-sidebar .social .bottom a .icon svg {
                width: 24px;
                height: 24px;
                fill: #77889a; }
            .post-detail .container .post-sidebar .social .bottom a[data-tooltip] {
              position: relative; }
              .post-detail .container .post-sidebar .social .bottom a[data-tooltip]::before {
                content: attr(data-tooltip);
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, -100%);
                background: #2d88ff;
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                white-space: nowrap;
                padding: 3px 10px;
                border-radius: 2px;
                opacity: 0;
                visibility: hidden;
                transition: 250ms all; }
              .post-detail .container .post-sidebar .social .bottom a[data-tooltip]:hover::before {
                top: -5px;
                opacity: 1;
                visibility: visible;
                transition: 300ms all; }
            .post-detail .container .post-sidebar .social .bottom a.active .icon {
              background: #154329; }
            .post-detail .container .post-sidebar .social .bottom a.active .icon svg {
              fill: #18c56c; }
            .post-detail .container .post-sidebar .social .bottom a.active .count {
              color: #18c56c; }
            .post-detail .container .post-sidebar .social .bottom a:hover .icon {
              background: #154329; }
            .post-detail .container .post-sidebar .social .bottom a:hover .icon svg {
              fill: #18c56c; }
            .post-detail .container .post-sidebar .social .bottom a:hover .count {
              color: #18c56c; }
            .post-detail .container .post-sidebar .social .bottom a.comments:hover:hover .icon {
              background: #431536; }
            .post-detail .container .post-sidebar .social .bottom a.comments:hover:hover .icon svg {
              fill: #cf0c77; }
            .post-detail .container .post-sidebar .social .bottom a.comments:hover:hover .count {
              color: #cf0c77; }
            .post-detail .container .post-sidebar .social .bottom a .count {
              font-size: 16px;
              font-weight: 700;
              color: #77889a; }
  @media (max-width: 1025px) {
    .post-detail .container {
      flex-direction: column-reverse; }
      .post-detail .container .post-photos {
        width: 100%;
        overflow: hidden; }
      .post-detail .container .post-sidebar {
        width: 100%; }
      .post-detail .container .post-sidebar {
        height: auto;
        margin-bottom: 30px;
        margin-left: 0; } }

.codes .container {
  overflow: hidden; }
  .codes .container input {
    display: none !important;
    position: absolute;
    left: -9999px; }
  .codes .container input#tab_html:checked ~ .code-tab label[for="tab_html"] {
    color: #fff;
    background: #171727;
    border-radius: 5px 0 0 0; }
  .codes .container input#tab_js:checked ~ .code-tab label[for="tab_js"] {
    color: #fff;
    background: #171727; }
  .codes .container input#tab_css:checked ~ .code-tab label[for="tab_css"] {
    color: #fff;
    background: #171727; }
  .codes .container input#tab_scss:checked ~ .code-tab label[for="tab_scss"] {
    color: #fff;
    background: #171727; }
  .codes .container input[name="tab"]#tab_html:checked ~ #code_html {
    display: block; }
  .codes .container input[name="tab"]#tab_js:checked ~ #code_js {
    display: block; }
  .codes .container input[name="tab"]#tab_css:checked ~ #code_css {
    display: block; }
  .codes .container input[name="tab"]#tab_scss:checked ~ #code_scss {
    display: block; }
  .codes .container .code-tab {
    display: flex;
    align-items: center;
    background: #20202f;
    border-radius: 5px 5px 0 0; }
    .codes .container .code-tab label {
      display: flex;
      align-items: center;
      line-height: 50px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.4);
      font-size: 14px;
      font-weight: 700;
      padding: 0 25px;
      letter-spacing: 1px;
      height: 50px;
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none; }
  .codes .container .code-pre {
    display: none;
    position: relative; }
    .codes .container .code-pre pre {
      height: 400px;
      overflow-x: auto;
      border-radius: 0 0 5px 5px;
      margin-bottom: 100px; }
      .codes .container .code-pre pre[class*="language-"] {
        padding: 1em 1.5rem;
        margin: 0;
        border-radius: 0 0 5px 5px;
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        background: #171727;
        min-height: 400px;
        overflow: hidden; }
        .codes .container .code-pre pre[class*="language-"] code {
          display: block; }
      .codes .container .code-pre pre[class*="language-"] code {
        transform: translate(-90px, -42px);
        margin-bottom: -100px; }
      .codes .container .code-pre pre[class*="language-"].language-html code {
        transform: translate(-90px, -90px) !important; }
      .codes .container .code-pre pre[class*="language-"].language-js code {
        transform: translate(-90px, -65px) !important; }
    .codes .container .code-pre label {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      cursor: pointer;
      font-size: 16px;
      font-weight: 700;
      padding: 60px 20px 20px;
      border-radius: 0 0 5px 5px;
      background: linear-gradient(to bottom, transparent, rgba(23, 23, 39, 0.9), #171727); }
    .codes .container .code-pre input[type="checkbox"]:checked + pre {
      height: auto;
      overflow-x: auto; }
    .codes .container .code-pre input[type="checkbox"]:checked ~ label {
      display: none; }

.footer {
  margin-top: auto;
  padding: 40px 0;
  background: linear-gradient(to top, #171727 0, transparent 60%); }
  .footer .container {
    color: #52525c;
    font-weight: 600;
    font-size: 16px; }
    .footer .container a {
      color: #fff;
      text-decoration: none; }
    .footer .container span {
      display: block;
      margin-bottom: 5px; }
  @media (max-width: 1215px) {
    .footer {
      margin: auto -20px; }
      .footer .container {
        padding: 0 20px; } }

/* Main Page */
body {
  display: flex;
  flex-direction: column;
  background: #0f0f1b !important;
  color: #fff !important; }
  @media (max-width: 1230px) {
    body {
      padding: 0 20px; } }

main .swiper {
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
  overflow: initial; }
  main .swiper .swiper-wrapper .swiper-slide .list,
  main .swiper .swiper-wrapper .swiper-slide .list-responsive,
  main .swiper .swiper-wrapper .swiper-slide .list-desktop,
  main .swiper .swiper-wrapper .swiper-slide .list-mobile {
    opacity: 0;
    transition: 300ms all;
    display: none; }
  main .swiper .swiper-wrapper .swiper-slide-active .list,
  main .swiper .swiper-wrapper .swiper-slide-active .list-responsive,
  main .swiper .swiper-wrapper .swiper-slide-active .list-desktop,
  main .swiper .swiper-wrapper .swiper-slide-active .list-mobile {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    opacity: 1;
    transition: 300ms all; }
    main .swiper .swiper-wrapper .swiper-slide-active .list .card,
    main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card,
    main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card,
    main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card {
      display: flex;
      width: calc(100% / 3 - 30px);
      margin: 15px;
      flex-direction: column;
      align-items: center;
      border-radius: 10px;
      position: relative;
      background: #1e1e31;
      overflow: hidden;
      padding: 15px;
      transition: 300ms all; }
      main .swiper .swiper-wrapper .swiper-slide-active .list .card .description,
      main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card .description,
      main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card .description,
      main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card .description {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 12px 0;
        text-align: center; }
        main .swiper .swiper-wrapper .swiper-slide-active .list .card .description span,
        main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card .description span,
        main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card .description span,
        main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card .description span {
          font-size: 18px;
          color: #fff;
          font-weight: 600;
          margin-bottom: 5px; }
          main .swiper .swiper-wrapper .swiper-slide-active .list .card .description span.skeleton::before,
          main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card .description span.skeleton::before,
          main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card .description span.skeleton::before,
          main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card .description span.skeleton::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            animation: skeleton-loading 1s linear infinite alternate;
            width: 100%;
            height: 22px;
            border-radius: 15px; }
        main .swiper .swiper-wrapper .swiper-slide-active .list .card .description p,
        main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card .description p,
        main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card .description p,
        main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card .description p {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.4); }
      main .swiper .swiper-wrapper .swiper-slide-active .list .card img,
      main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card img,
      main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card img,
      main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card img {
        width: 100%;
        max-height: 200px;
        min-height: 200px;
        border-radius: 10px;
        object-fit: cover; }
      main .swiper .swiper-wrapper .swiper-slide-active .list .card .bottom,
      main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card .bottom,
      main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card .bottom,
      main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card .bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        color: #fff;
        width: 100%;
        margin-top: auto;
        padding: 15px 0; }
        main .swiper .swiper-wrapper .swiper-slide-active .list .card .bottom button,
        main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card .bottom button,
        main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card .bottom button,
        main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card .bottom button {
          cursor: pointer;
          background: #28283b;
          border-radius: 40px;
          color: #fff;
          height: 40px;
          font-weight: 500;
          font-size: 16px;
          width: 100%;
          transition: 300ms all;
          margin-bottom: -15px;
          background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(95.5deg, rgba(15, 53, 255, 0.3) 12.82%, rgba(255, 72, 181, 0.3) 41.96%, rgba(15, 53, 255, 0.08) 75.06%, rgba(15, 53, 255, 0.11) 107.66%);
          background-size: 400% 400%;
          box-shadow: #1e1e2e 1px 100px 1px inset;
          border: 2px solid transparent; }
          main .swiper .swiper-wrapper .swiper-slide-active .list .card .bottom button:hover,
          main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card .bottom button:hover,
          main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card .bottom button:hover,
          main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card .bottom button:hover {
            box-shadow: rgba(30, 30, 46, 0.7) 1px 100px 1px inset;
            transition: 300ms all; }
      main .swiper .swiper-wrapper .swiper-slide-active .list .card:hover,
      main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card:hover,
      main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card:hover,
      main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card:hover {
        transform: scale(1.02);
        transition: 300ms all; }
      main .swiper .swiper-wrapper .swiper-slide-active .list .card:hover .bottom button,
      main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card:hover .bottom button,
      main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card:hover .bottom button,
      main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card:hover .bottom button {
        animation: liquid 4.5s ease infinite; }
      @media (max-width: 900px) {
        main .swiper .swiper-wrapper .swiper-slide-active .list .card,
        main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card,
        main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card,
        main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card {
          width: calc(100% / 2 - 30px); } }
      @media (max-width: 480px) {
        main .swiper .swiper-wrapper .swiper-slide-active .list .card,
        main .swiper .swiper-wrapper .swiper-slide-active .list-responsive .card,
        main .swiper .swiper-wrapper .swiper-slide-active .list-desktop .card,
        main .swiper .swiper-wrapper .swiper-slide-active .list-mobile .card {
          width: calc(100% / 1 - 30px); } }
  main .swiper .swiper-pagination {
    position: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; }
    main .swiper .swiper-pagination .swiper-pagination-bullet {
      position: relative;
      height: auto;
      width: auto;
      cursor: pointer;
      background: #28283b;
      border-radius: 40px;
      color: rgba(255, 255, 255, 0.6);
      opacity: 0.5;
      text-align: center;
      padding: 5px 15px;
      margin: 0 5px 10px 0;
      font-weight: 500;
      font-size: 16px;
      transition: 300ms all;
      background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(95.5deg, rgba(15, 53, 255, 0.3) 12.82%, rgba(255, 72, 181, 0.3) 41.96%, rgba(15, 53, 255, 0.08) 75.06%, rgba(15, 53, 255, 0.11) 107.66%);
      background-size: 400% 400%;
      box-shadow: #1e1e2e 1px 100px 1px inset;
      border: 2px solid transparent;
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none; }
      main .swiper .swiper-pagination .swiper-pagination-bullet.skeleton {
        border: 2px solid transparent;
        opacity: 1;
        background-image: none; }
      main .swiper .swiper-pagination .swiper-pagination-bullet.skeleton::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        animation: skeleton-loading 1s linear infinite alternate;
        width: 100%;
        height: 100%;
        border-radius: 40px; }
      main .swiper .swiper-pagination .swiper-pagination-bullet:hover {
        transition: 300ms all;
        color: white;
        opacity: 0.75;
        box-shadow: rgba(30, 30, 46, 0.85) 1px 100px 1px inset; }
    main .swiper .swiper-pagination .swiper-pagination-bullet-active {
      transition: 300ms all;
      color: white;
      opacity: 1;
      box-shadow: rgba(30, 30, 46, 0.85) 1px 100px 1px inset;
      animation: liquid 5s ease infinite; }

@keyframes liquid {
  0% {
    background-position: 0% 2%; }
  50% {
    background-position: 100% 99%; }
  100% {
    background-position: 0% 2%; } }

span {
  position: relative; }
  span.skeleton::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    animation: skeleton-loading 1s linear infinite alternate;
    width: 100%;
    height: 22px;
    border-radius: 15px; }

p {
  position: relative; }
  p.skeleton::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    animation: skeleton-loading 1s linear infinite alternate;
    width: 100%;
    height: 22px;
    border-radius: 15px; }

.image {
  position: relative;
  width: 100%; }
  .image .skeleton::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    animation: skeleton-loading 1s linear infinite alternate;
    width: 100%;
    height: 100%;
    border-radius: 10px; }
  .image .skeleton + img {
    opacity: 0; }

button {
  position: relative; }
  button.skeleton::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    animation: skeleton-loading 1s linear infinite alternate;
    width: 100%;
    height: 100%;
    border-radius: 40px; }
  button.skeleton {
    border: 0 !important; }

footer {
  margin-top: auto;
  padding: 70px 0 30px;
  background: linear-gradient(to top, #171727 0, transparent 60%); }
  footer .container {
    color: #52525c;
    font-weight: 600;
    font-size: 16px; }
    footer .container a {
      color: #fff;
      text-decoration: none; }
    footer .container span {
      display: block;
      margin-bottom: 5px; }
  @media (max-width: 1230px) {
    footer {
      margin: auto -20px 0; }
      footer .container {
        padding: 0 20px; } }

@keyframes skeleton-loading {
  0% {
    background: #444455; }
  100% {
    background: #5c5c79; } }