main {
  padding: 0;
  margin: 0;
  background: linear-gradient(31deg, #000 19.54%, #1b1230 100%);
}
main .h1-title {
  font-size: 32px;
  line-height: 120%;
}
@media (min-width:992px) {
  main .h1-title {
    font-size: 40px;
  }
}
@media (min-width:1280px) {
  main .h1-title {
    font-size: 48px;
  }
}
@media (min-width:1600px) {
  main .h1-title {
    font-size: 56px;
  }
}
main .h2-title {
  font-size: 32px;
  line-height: 120%;
}
@media (min-width:1280px) {
  main .h2-title {
    font-size: 40px;
  }
}
@media (min-width:1600px) {
  main .h2-title {
    font-size: 48px;
  }
}
main .btn-submit {
  padding: 1px !important;
  border-radius: 31px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  border: none;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 150% !important;
  color: #fff;
  overflow: hidden;
}
main .btn-submit:hover {
  color: #fff !important;
}
main .btn-submit > div:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px 23px;
  background: linear-gradient(90deg, #a27aff 0%, #ff6aa8 51.5%, #ff9637 100%);
  border-radius: 30px;
}

.modal {
  background: rgba(0, 0, 0, 0.8);
}
.modal .modal-dialog {
  margin-right: auto;
  margin-left: auto;
}
.modal .modal-content {
  background-color: transparent;
  border: none;
}
.modal .close-icon {
  z-index: 10;
  position: absolute;
  content: "";
  top: 3px;
  right: 3px;
  width: 32px;
  height: 32px;
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9993 29.3337C23.3631 29.3337 29.3327 23.3641 29.3327 16.0003C29.3327 8.63653 23.3631 2.66699 15.9993 2.66699C8.63555 2.66699 2.66602 8.63653 2.66602 16.0003C2.66602 23.3641 8.63555 29.3337 15.9993 29.3337Z" fill="white" fill-opacity="0.3"/><path d="M19.771 12.2285L12.2285 19.771" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.2285 12.2285L19.771 19.771" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 100% 100%;
}
@media (min-width:1280px) {
  .modal .close-icon {
    top: -38px;
    right: -38px;
    width: 48px;
    height: 48px;
    background-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="white" fill-opacity="0.3"/><path d="M29.6574 18.3438L18.3438 29.6574" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3438 18.3438L29.6574 29.6574" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 100% 100%;
  }
}

#rulesModal .modal-dialog {
  max-width: 100%;
}
@media (min-width:1280px) {
  #rulesModal .modal-dialog {
    max-width: 924px;
  }
}
#rulesModal .modal-content {
  padding-right: 16px;
  padding-left: 16px;
  border-radius: 12px;
}
@media (min-width:768px) {
  #rulesModal .modal-content {
    padding-right: 24px;
    padding-left: 24px;
  }
}
@media (min-width:1280px) {
  #rulesModal .modal-content {
    padding-right: 0;
    padding-left: 0;
    border-radius: 24px;
  }
}
#rulesModal .modal-body {
  padding: 16px 8px 8px;
  background: linear-gradient(0deg, rgba(153, 175, 255, 0) 0%, rgba(153, 175, 255, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
@media (min-width:1280px) {
  #rulesModal .modal-body {
    padding: 24px 38px 40px;
    border-radius: 24px;
  }
}
#rulesModal .modal-body .modal-title {
  font-size: 16px;
  line-height: 150%;
}
@media (min-width:1280px) {
  #rulesModal .modal-body .modal-title {
    font-size: 24px;
  }
}
#rulesModal .rules-cont {
  padding: 24px 0 0 16px;
  background: linear-gradient(0deg, rgba(153, 175, 255, 0) 0%, rgba(153, 175, 255, 0.1) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
@media (min-width:1280px) {
  #rulesModal .rules-cont {
    padding: 24px;
  }
}
#rulesModal .rules-cont .rules-detail {
  height: 536px;
  padding-right: 16px;
  overflow-y: auto;
}
@media (min-width:1280px) {
  #rulesModal .rules-cont .rules-detail {
    height: 350px;
    padding-right: 23px;
  }
}
#rulesModal .rules-cont .rules-detail::-webkit-scrollbar {
  width: 5px;
}
@media (min-width:1280px) {
  #rulesModal .rules-cont .rules-detail::-webkit-scrollbar {
    width: 7px;
  }
}
#rulesModal .rules-cont .rules-detail::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 11px;
}
#rulesModal .rules-cont .rules-detail::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 34px;
}
#rulesModal .rules-cont .list-rules {
  font-size: 14px;
  line-height: 32px;
  color: #bcbcbc;
}
#rulesModal .rules-cont .list-rules li:not(:last-child) {
  margin-bottom: 24px;
}
#rulesModal .rules-cont .list-rules span {
  font-weight: 700;
  color: #fff;
}
#rulesModal .rules-cont .list-rules p {
  margin-bottom: 0;
}

#uploadInfoModal .modal-dialog {
  max-width: 358px;
}
@media (min-width:768px) {
  #uploadInfoModal .modal-dialog {
    max-width: 500px;
  }
}
@media (min-width:1280px) {
  #uploadInfoModal .modal-dialog {
    max-width: 1004px;
  }
}
#uploadInfoModal .modal-body {
  padding: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(153, 175, 255, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
@media (min-width:1280px) {
  #uploadInfoModal .modal-body {
    padding: 12px;
    border-radius: 24px;
  }
}

#materialUploadForm {
  padding-bottom: 12px;
}
@media (min-width:1280px) {
  #materialUploadForm {
    padding-bottom: 0;
  }
}
#materialUploadForm .left {
  width: 100%;
}
@media (min-width:1280px) {
  #materialUploadForm .left {
    max-width: 568px;
    margin-right: 12px;
  }
}
#materialUploadForm .upload-files-box {
  min-height: 203px;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0px 350px 98px 0px rgba(0, 0, 0, 0), 0px 224px 89px 0px rgba(0, 0, 0, 0.03), 0px 126px 76px 0px rgba(0, 0, 0, 0.12), 0px 56px 56px 0px rgba(0, 0, 0, 0.2), 0px 14px 31px 0px rgba(0, 0, 0, 0.23);
}
@media (min-width:1280px) {
  #materialUploadForm .upload-files-box {
    min-height: 312px;
  }
}
#materialUploadForm .before-files,
#materialUploadForm .after-files {
  cursor: pointer;
  position: relative;
  flex-basis: 50%;
  padding: 13px 17px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
#materialUploadForm .before-files:hover,
#materialUploadForm .after-files:hover {
  background: rgba(255, 255, 255, 0.5);
}
@media (min-width:1280px) {
  #materialUploadForm .before-files:hover .choose-files svg g,
  #materialUploadForm .after-files:hover .choose-files svg g {
    opacity: 1;
  }
}
#materialUploadForm .before-files .tag,
#materialUploadForm .after-files .tag {
  position: relative;
  z-index: 10;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
#materialUploadForm .before-files .choose-files,
#materialUploadForm .after-files .choose-files {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#materialUploadForm .before-files .choose-files svg g,
#materialUploadForm .after-files .choose-files svg g {
  opacity: 1;
}
@media (min-width:1280px) {
  #materialUploadForm .before-files .choose-files svg g,
  #materialUploadForm .after-files .choose-files svg g {
    opacity: 0.2;
  }
}
#materialUploadForm .before-files .cropped-image,
#materialUploadForm .after-files .cropped-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#materialUploadForm .before-files .re-upload-btn,
#materialUploadForm .after-files .re-upload-btn {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  height: 28px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 17px;
  border: none;
  font-size: 16px;
  line-height: 150%;
  color: #fff;
}
@media (min-width:1280px) {
  #materialUploadForm .before-files .re-upload-btn,
  #materialUploadForm .after-files .re-upload-btn {
    bottom: 35px;
  }
}
#materialUploadForm .before-files .re-upload-btn svg,
#materialUploadForm .after-files .re-upload-btn svg {
  margin-left: 7px;
}
#materialUploadForm .before-files {
  border-right: 1px solid #000;
}
#materialUploadForm .personal-info-box {
  padding: 0 12px;
  margin-top: 12px;
  margin-bottom: 12px;
}
@media (min-width:1280px) {
  #materialUploadForm .personal-info-box {
    padding: 0;
    margin-top: 0;
  }
}
#materialUploadForm .login-info {
  max-width: 70px;
  width: 100%;
  margin-right: 8px;
}
@media (min-width:1280px) {
  #materialUploadForm .login-info {
    margin-right: 12px;
  }
}
#materialUploadForm #fotorAccount-login-active {
  margin-right: 8px;
}
@media (min-width:1280px) {
  #materialUploadForm #fotorAccount-login-active {
    margin-right: 12px;
  }
}
#materialUploadForm .userAvatar {
  width: 36px;
  height: 36px;
  border-radius: 25px;
  border: 0.643px solid #fff;
  background: #88b7e5;
}
#materialUploadForm .userName {
  max-width: 100%;
  width: 100%;
  padding: 2px 8px;
  margin-top: 8px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  overflow: hidden;
}
@media (min-width:1280px) {
  #materialUploadForm .userName {
    margin-top: 10px;
  }
}
#materialUploadForm .userName:hover {
  background: rgba(255, 255, 255, 0.15);
}
#materialUploadForm #fotorAccount-login-active .header-content-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 1430px;
  margin: 0 auto;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap {
  display: flex;
  align-items: start;
  z-index: 9999;
  position: relative;
  height: auto;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap:hover .avatage-fix-guide-wrap {
  height: fit-content;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap img {
  width: 36px;
  height: 36px;
  border-radius: 25px;
  border: 0.643px solid #fff;
  background: #88b7e5;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .userName {
  max-width: 70px;
  width: 100%;
  padding: 2px 8px;
  font-size: 14px;
  line-height: 160%;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide-wrap {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-12%);
  height: 0;
  overflow: hidden;
  transition: all 0.2s;
  z-index: 1000;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide {
  list-style: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #222 0%, #000 12.59%, #000 100%);
  padding: 28px 7px 20px;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide .avatage-fix-guide-item-1 {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide .avatage-fix-guide-item-1 img {
  width: 36px;
  height: 36px;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide .avatage-fix-guide-item-1 span {
  margin-left: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide .item {
  display: flex;
  align-items: center;
  min-height: 44px;
  height: 30px;
  padding: 0 30px 0 16px;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
  opacity: 0.8;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide .item:not(:last-child(1)) {
  margin-top: 4px;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide .item:hover {
  background: #222;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  opacity: 1;
}
#materialUploadForm #fotorAccount-login-active .avatage-wrap .avatage-fix-guide .item span {
  display: block;
  width: -moz-max-content;
  width: max-content;
  margin-left: 16px;
}
#materialUploadForm #storyText {
  border-radius: 0 0 12px 12px;
}
#materialUploadForm .titleErrorTips,
#materialUploadForm .storyErrorTips {
  left: 0;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 150%;
  color: #ff4229;
}
#materialUploadForm .titleErrorTips {
  bottom: -16px;
}
@media (min-width:768px) {
  #materialUploadForm .titleErrorTips {
    bottom: -14px;
  }
}
@media (min-width:1280px) {
  #materialUploadForm .titleErrorTips {
    bottom: -16px;
  }
}
#materialUploadForm .storyErrorTips {
  bottom: -15px;
}
#materialUploadForm .form-control {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
#materialUploadForm .form-control::-moz-placeholder {
  vertical-align: top;
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  line-height: 160%;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .form-control::placeholder {
  vertical-align: top;
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  line-height: 160%;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .error-text {
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 150%;
  color: #ff4229;
  white-space: nowrap;
}
#materialUploadForm .share-to-social {
  margin-top: 38px;
}
#materialUploadForm .share-to-social .list-media a:hover svg rect,
#materialUploadForm .share-to-social .list-media a:hover svg path {
  fill-opacity: 1;
}
#materialUploadForm .right {
  padding: 0 12px;
  margin-bottom: 10px;
}
@media (min-width:1280px) {
  #materialUploadForm .right {
    padding: 0;
    margin-bottom: 0;
    max-width: 400px;
  }
}
#materialUploadForm .right .scroll-cont {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-right: 12px;
  overflow-y: auto;
}
#materialUploadForm .right .scroll-cont::-webkit-scrollbar {
  width: 7px;
}
#materialUploadForm .right .scroll-cont::-webkit-scrollbar-thumb {
  border-radius: 11px;
  background: #fff;
}
#materialUploadForm .right .scroll-cont::-webkit-scrollbar-track {
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.05);
}
@media (min-width:1280px) {
  #materialUploadForm .right .scroll-cont {
    padding-right: 0;
    overflow-y: unset;
  }
}
#materialUploadForm .right .right-item {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
}
#materialUploadForm .right .right-item:not(:last-child) {
  margin-bottom: 10px;
}
@media (min-width:1280px) {
  #materialUploadForm .right .right-item:not(:last-child) {
    margin-bottom: 12px;
  }
}
#materialUploadForm .right .right-item .tag-error-tips {
  bottom: -15px;
  left: 4px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 150%;
  color: #ff4229;
  white-space: nowrap;
}
#materialUploadForm .top-title {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px 12px 0 0;
  line-height: 150%;
}
#materialUploadForm .required-icon {
  color: #fb0;
}
#materialUploadForm .tag-select-box #selectCont {
  position: relative;
  width: 100%;
}
#materialUploadForm .tag-select-box #searchTags,
#materialUploadForm .tag-select-box #optionsContainer,
#materialUploadForm .tag-select-box #bottomTips {
  position: absolute;
  width: 100%;
  z-index: 52;
}
#materialUploadForm .tag-select-box #selectedOption {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  max-width: 100%;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.2) !important;
  background-image: url("data:image/svg+xml, %3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.625 6.85254L7 9.47754L4.375 6.85254' stroke='white' stroke-width='0.954545' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: right 0.75rem center;
  border: none;
  border-radius: 0 0 12px 12px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .tag-select-box #selectedOption.expand {
  background-image: url("data:image/svg+xml, %3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.625 7.14746L7 4.52246L4.375 7.14746' stroke='white' stroke-width='0.954545' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  border-radius: 0;
}
#materialUploadForm .tag-select-box #selectedOption .placeholder {
  display: inline-block;
}
#materialUploadForm .tag-select-box .tag-width {
  max-width: 365px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#materialUploadForm .tag-select-box .truncate .selected-title {
  display: inline-block;
}
#materialUploadForm .tag-select-box .truncate .selected-title:not(:last-child) {
  margin-right: 6px;
}
#materialUploadForm .tag-select-box #optionsContainer {
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 380px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.8);
}
#materialUploadForm .tag-select-box #optionsContainer::-webkit-scrollbar {
  width: 4px;
}
#materialUploadForm .tag-select-box #optionsContainer::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 11px;
}
#materialUploadForm .tag-select-box #optionsContainer::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 34px;
}
#materialUploadForm .tag-select-box .tag-option {
  position: relative;
  cursor: pointer;
  width: 100%;
  padding: 12px;
  background-color: inherit;
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.7);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
#materialUploadForm .tag-select-box .tag-option:hover {
  background-color: #222;
  cursor: pointer;
}
#materialUploadForm .tag-select-box .tag-option.active {
  background-color: #222;
}
#materialUploadForm .tag-select-box .tag-option.active::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml, %3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.58203 11.0003L9.16536 15.5837L18.332 6.41699' stroke='white' stroke-width='1.83333' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}
#materialUploadForm .tag-select-box .no-content-tips {
  padding: 12px;
  background-color: inherit;
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .tag-select-box .search-tags {
  top: 100%;
  left: 0;
  padding: 8px 12px;
  background: #1b1b1b;
}
#materialUploadForm .tag-select-box .search-tags svg {
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}
#materialUploadForm .tag-select-box .search-tags .form-control {
  padding: 0 32px;
  border-radius: 0;
  background: inherit;
}
#materialUploadForm .tag-select-box .search-tags .form-control::-moz-placeholder {
  font-size: 14px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .tag-select-box .search-tags .form-control::placeholder {
  font-size: 14px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .tag-select-box .search-tags .form-control:hover:not(:focus) {
  border-color: #1b1b1b;
}
#materialUploadForm .tag-select-box .search-tags .form-control:focus {
  border-color: #1b1b1b;
}
#materialUploadForm .tag-select-box .bottom-tips {
  z-index: 10;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 5px 12px;
  background: #222;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0 0 12px 12px;
  color: #fb0;
}
#materialUploadForm .event-select-box #eventSelectCont {
  position: relative;
  width: 100%;
}
#materialUploadForm .event-select-box #eventSelectedOption {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  max-width: 100%;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.2) !important;
  background-image: url("data:image/svg+xml, %3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.625 6.85254L7 9.47754L4.375 6.85254' stroke='white' stroke-width='0.954545' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: right 0.75rem center;
  border: none;
  border-radius: 0 0 12px 12px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .event-select-box #eventSelectedOption.expand {
  background-image: url("data:image/svg+xml, %3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.625 7.14746L7 4.52246L4.375 7.14746' stroke='white' stroke-width='0.954545' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  border-radius: 0;
}
#materialUploadForm .event-select-box #eventSelectedOption .placeholder {
  display: inline-block;
}
#materialUploadForm .event-select-box .tag-width {
  max-width: 365px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#materialUploadForm .event-select-box .truncate .selected-title {
  display: inline-block;
}
#materialUploadForm .event-select-box .truncate .selected-title:not(:last-child) {
  margin-right: 6px;
}
#materialUploadForm .event-select-box #eventOptionsContainer {
  position: absolute;
  z-index: 51;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 380px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 0 12px 12px;
}
#materialUploadForm .event-select-box #eventOptionsContainer::-webkit-scrollbar {
  width: 4px;
}
#materialUploadForm .event-select-box #eventOptionsContainer::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 11px;
}
#materialUploadForm .event-select-box #eventOptionsContainer::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 34px;
}
#materialUploadForm .event-select-box .event-option-item {
  position: relative;
  cursor: pointer;
  width: 100%;
  padding: 12px;
  background-color: inherit;
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.7);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
#materialUploadForm .event-select-box .event-option-item:hover {
  background-color: #222;
  cursor: pointer;
}
#materialUploadForm .event-select-box .event-option-item.active {
  background-color: #222;
}
#materialUploadForm .event-select-box .event-option-item.active::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml, %3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.58203 11.0003L9.16536 15.5837L18.332 6.41699' stroke='white' stroke-width='1.83333' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}
#materialUploadForm .info-box .info-cont {
  padding: 8px 8px 8px 12px;
}
#materialUploadForm .info-box .info-cont .info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
#materialUploadForm .info-box .info-cont .info-item:not(:last-child) {
  margin-bottom: 8px;
}
#materialUploadForm .info-box .info-cont .p-name {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.7);
}
#materialUploadForm .info-box .info-cont .form-control {
  max-width: 154px;
  width: 100%;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  text-align: start;
}
@media (min-width:1280px) {
  #materialUploadForm .info-box .info-cont .form-control {
    max-width: 230px;
  }
}
#materialUploadForm .info-box .info-cont .form-control[name=before_resolution],
#materialUploadForm .info-box .info-cont .form-control[name=after_resolution],
#materialUploadForm .info-box .info-cont .form-control[name=date] {
  border: none;
  background: transparent;
}
#materialUploadForm .info-box .info-box-select {
  position: relative;
  max-width: 154px;
  width: 100%;
}
@media (min-width:1280px) {
  #materialUploadForm .info-box .info-box-select {
    max-width: 230px;
  }
}
#materialUploadForm .info-box .info-box-form-select {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 7px 12px;
  background-color: rgba(255, 255, 255, 0.05) !important;
  background-image: url("data:image/svg+xml, %3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.625 6.85254L7 9.47754L4.375 6.85254' stroke='white' stroke-width='0.954545' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: right 0.75rem center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 100%;
  color: #fff;
}
#materialUploadForm .info-box .info-box-form-select.expand {
  background-image: url("data:image/svg+xml, %3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.625 7.14746L7 4.52246L4.375 7.14746' stroke='white' stroke-width='0.954545' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  border-radius: 4px 4px 0 0;
}
#materialUploadForm .info-box .info-box-form-select .placeholder {
  display: inline-block;
}
#materialUploadForm .info-box .info-box-options-cont {
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 0 12px 12px;
}
#materialUploadForm .info-box .info-box-options-cont.model-style-options-cont {
  max-height: 190px;
  overflow-y: auto;
}
#materialUploadForm .info-box .info-box-options-cont.model-style-options-cont::-webkit-scrollbar {
  width: 4px;
}
#materialUploadForm .info-box .info-box-options-cont.model-style-options-cont::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 11px;
}
#materialUploadForm .info-box .info-box-options-cont.model-style-options-cont::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 34px;
}
#materialUploadForm .info-box .info-box-option-item {
  position: relative;
  cursor: pointer;
  width: 100%;
  padding: 12px;
  background-color: inherit;
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.7);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
#materialUploadForm .info-box .info-box-option-item:last-child {
  border-radius: 0 0 12px 12px;
}
#materialUploadForm .info-box .info-box-option-item:hover {
  background-color: #222;
  cursor: pointer;
}
#materialUploadForm .info-box .info-box-option-item.active {
  background-color: #222;
}
#materialUploadForm .info-box .info-box-option-item.active::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml, %3csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.58203 11.0003L9.16536 15.5837L18.332 6.41699' stroke='white' stroke-width='1.83333' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}
#materialUploadForm .photo-story-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#materialUploadForm .photo-story-box .text-box {
  flex-grow: 1;
}
#materialUploadForm .photo-story-box .form-control {
  width: 100%;
  height: 100%;
  padding: 6px 12px;
  border-radius: 0;
  resize: none;
}

#cropperModal {
  display: none;
  z-index: 1060;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.1);
}
#cropperModal .modal-dialog {
  max-width: 600px;
  width: 80%;
  min-height: unset;
  margin: 6% auto;
  background: rgb(255, 255, 255);
  border-radius: 12px;
  box-shadow: 0px 350px 98px 0px rgba(0, 0, 0, 0), 0px 224px 89px 0px rgba(0, 0, 0, 0.03), 0px 126px 76px 0px rgba(0, 0, 0, 0.12), 0px 56px 56px 0px rgba(0, 0, 0, 0.2), 0px 14px 31px 0px rgba(0, 0, 0, 0.23);
}
#cropperModal .modal-content {
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#cropperModal .modal-header {
  width: 100%;
  border: none;
}
#cropperModal .modal-footer {
  border: none;
}
#cropperModal .modal-footer .btn {
  justify-content: center;
  min-width: 150px;
}

#postDetailsModal .modal-dialog {
  max-width: 358px;
}
@media (min-width:1280px) {
  #postDetailsModal .modal-dialog {
    max-width: 926px;
  }
}
#postDetailsModal .modal-body {
  padding: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(153, 175, 255, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
@media (min-width:1280px) {
  #postDetailsModal .modal-body {
    padding: 10px 12px;
    border-radius: 24px;
  }
}
#postDetailsModal .left {
  width: 100%;
  margin-bottom: 12px;
}
@media (min-width:1280px) {
  #postDetailsModal .left {
    margin-right: 12px;
    margin-bottom: 0;
  }
}
#postDetailsModal .detail-files-box {
  cursor: pointer;
  height: 203px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 350px 98px 0px rgba(0, 0, 0, 0), 0px 224px 89px 0px rgba(0, 0, 0, 0.03), 0px 126px 76px 0px rgba(0, 0, 0, 0.12), 0px 56px 56px 0px rgba(0, 0, 0, 0.2), 0px 14px 31px 0px rgba(0, 0, 0, 0.23);
}
@media (min-width:992px) {
  #postDetailsModal .detail-files-box {
    height: 260px;
  }
}
@media (min-width:1280px) {
  #postDetailsModal .detail-files-box {
    height: 240px;
  }
}
@media (min-width:1600px) {
  #postDetailsModal .detail-files-box {
    height: 312px;
  }
}
#postDetailsModal .detail-files-before,
#postDetailsModal .detail-files-after {
  z-index: 1;
  position: relative;
  flex-basis: 50%;
  padding: 13px 17px;
}
#postDetailsModal .detail-files-before img,
#postDetailsModal .detail-files-after img {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#postDetailsModal .detail-files-before .tag,
#postDetailsModal .detail-files-after .tag {
  width: -moz-fit-content;
  width: fit-content;
  height: 22px;
  padding: 2px 10px;
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
#postDetailsModal .author-data {
  z-index: 3;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  margin-bottom: 8px;
}
@media (min-width:1280px) {
  #postDetailsModal .author-data {
    padding: 0;
    margin-bottom: 16px;
  }
}
#postDetailsModal .author-info {
  display: flex;
  align-items: center;
  width: 100%;
}
#postDetailsModal .author-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
#postDetailsModal .author-info span {
  margin-left: 12px;
  font-size: 14px;
  line-height: 150%;
  color: #fff;
}
#postDetailsModal .behaviour-cont {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
#postDetailsModal .behaviour-cont .item {
  position: relative;
  display: flex;
  align-items: center;
}
#postDetailsModal .behaviour-cont .item.like-item {
  cursor: pointer;
}
#postDetailsModal .behaviour-cont .item.like-item .click-like {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("https://images.hitpaw.com/hitpaw-2024/content-hub/like-icon-default.png");
  background-size: 100% 100%;
  text-decoration: none;
}
#postDetailsModal .behaviour-cont .item.like-item .click-like.active {
  background-image: url("https://images.hitpaw.com/hitpaw-2024/content-hub/like-icon-active.png");
}
#postDetailsModal .behaviour-cont .item .icon-share:hover + .media-list {
  display: block;
  opacity: 1;
}
#postDetailsModal .behaviour-cont .item:not(:last-child) {
  margin-right: 10px;
}
#postDetailsModal .behaviour-cont .item svg {
  width: 22px;
}
#postDetailsModal .behaviour-cont .item span {
  margin-left: 4px;
  font-size: 14px;
  line-height: 150%;
  color: #fff;
}
#postDetailsModal .behaviour-cont .media-list {
  z-index: 6;
  position: absolute;
  display: none;
  opacity: 0;
  top: -42px;
  right: 0;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  transition: opacity 0.3s;
}
#postDetailsModal .behaviour-cont .media-list:hover {
  display: block;
  opacity: 1;
}
#postDetailsModal .behaviour-cont .media-list .media-item:not(:last-child) {
  margin-right: 8px;
}
#postDetailsModal .behaviour-cont .media-list .media-item img {
  width: 24px;
  height: 24px;
}
#postDetailsModal .text-box {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  margin-bottom: 8px;
}
@media (min-width:1280px) {
  #postDetailsModal .text-box {
    padding: 0;
  }
}
#postDetailsModal .detail-title-text {
  max-width: 293px;
  width: 100%;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 150%;
  color: #fff;
}
@media (min-width:1280px) {
  #postDetailsModal .detail-title-text {
    max-width: 424px;
  }
}
#postDetailsModal .list-detail-tags {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 12px;
  margin-bottom: 0;
  margin-left: -2px;
}
@media (min-width:1280px) {
  #postDetailsModal .list-detail-tags {
    padding: 0;
  }
}
#postDetailsModal .list-detail-tags li {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 8px;
  margin: 2px;
  border-radius: 29px;
  background: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
#postDetailsModal .right {
  width: 100%;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  overflow-y: auto;
}
@media (min-width:1280px) {
  #postDetailsModal .right {
    max-width: 320px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    overflow-y: unset;
  }
}
#postDetailsModal .right-details {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
#postDetailsModal .right-details.detail-info-box {
  margin-bottom: 12px;
}
#postDetailsModal .right-details .box-title {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 16px;
  line-height: 150%;
  color: #fff;
}
#postDetailsModal .right-details .list-detail-info {
  margin-bottom: 0;
}
#postDetailsModal .right-details .list-detail-info li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
#postDetailsModal .right-details .list-detail-info li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#postDetailsModal .right-details .list-detail-info .info-params-item {
  font-size: 14px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.7);
}
#postDetailsModal .right-details .list-detail-info .info-params-data {
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 23px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 100%;
  color: #fff;
  text-align: center;
}
#postDetailsModal .right-details .photo-story-text {
  max-height: 150px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 160%;
  color: #fff;
  overflow-y: auto;
}
#postDetailsModal .right-details .photo-story-text::-webkit-scrollbar {
  width: 5px;
}
@media (min-width:1280px) {
  #postDetailsModal .right-details .photo-story-text::-webkit-scrollbar {
    width: 7px;
  }
}
#postDetailsModal .right-details .photo-story-text::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 11px;
}
#postDetailsModal .right-details .photo-story-text::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 34px;
}

#successPromptModal .modal-dialog {
  max-width: 100%;
}
@media (min-width:1280px) {
  #successPromptModal .modal-dialog {
    max-width: 633px;
  }
}
#successPromptModal .modal-content {
  border-radius: 12px;
}
@media (min-width:768px) {
  #successPromptModal .modal-content {
    padding-right: 24px;
    padding-left: 24px;
  }
}
@media (min-width:1280px) {
  #successPromptModal .modal-content {
    padding-right: 0;
    padding-left: 0;
    border-radius: 24px;
  }
}
#successPromptModal .modal-body {
  padding: 0 24px;
  background: linear-gradient(0deg, rgba(153, 175, 255, 0) 0%, rgba(153, 175, 255, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
@media (min-width:1280px) {
  #successPromptModal .modal-body {
    padding: 44px 28px;
    border-radius: 24px;
  }
}
#successPromptModal .modal-body .text-cont {
  max-width: 577px;
}
#successPromptModal .modal-body .success-icon {
  width: 60px;
  height: 60px;
}
#successPromptModal .modal-body .modal-title {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
}
#successPromptModal .modal-body .p-text {
  margin-bottom: 64px;
}
@media (min-width:1280px) {
  #successPromptModal .modal-body .p-text {
    margin-bottom: 112px;
  }
}

#loginTipsModal .modal-dialog {
  max-width: 100%;
}
@media (min-width:1280px) {
  #loginTipsModal .modal-dialog {
    max-width: 633px;
  }
}
#loginTipsModal .modal-content {
  border-radius: 12px;
}
@media (min-width:768px) {
  #loginTipsModal .modal-content {
    padding-right: 24px;
    padding-left: 24px;
  }
}
@media (min-width:1280px) {
  #loginTipsModal .modal-content {
    padding-right: 0;
    padding-left: 0;
    border-radius: 24px;
  }
}
#loginTipsModal .modal-body {
  padding: 60px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(153, 175, 255, 0.3) 100%);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
@media (min-width:1280px) {
  #loginTipsModal .modal-body {
    padding: 29px 28px 37px;
    border-radius: 24px;
  }
}
#loginTipsModal .modal-body .p-text {
  margin-bottom: 80px;
  font-size: 24px;
  line-height: 120%;
}
@media (min-width:1280px) {
  #loginTipsModal .modal-body .p-text {
    margin-bottom: 120px;
  }
}
#loginTipsModal .modal-body .btn-submit {
  min-width: 150px;
}

#imgFormatTipsModal .modal-dialog,
#fileSizeTipsModal .modal-dialog,
#tagsSelectedTipsModal .modal-dialog,
#reUploadTipsModal .modal-dialog,
#failedUploadTipsModal .modal-dialog,
#cropperNotInitialisedModal .modal-dialog {
  max-width: 100%;
}
@media (min-width:1280px) {
  #imgFormatTipsModal .modal-dialog,
  #fileSizeTipsModal .modal-dialog,
  #tagsSelectedTipsModal .modal-dialog,
  #reUploadTipsModal .modal-dialog,
  #failedUploadTipsModal .modal-dialog,
  #cropperNotInitialisedModal .modal-dialog {
    max-width: 633px;
  }
}
#imgFormatTipsModal .modal-content,
#fileSizeTipsModal .modal-content,
#tagsSelectedTipsModal .modal-content,
#reUploadTipsModal .modal-content,
#failedUploadTipsModal .modal-content,
#cropperNotInitialisedModal .modal-content {
  border-radius: 12px;
}
@media (min-width:768px) {
  #imgFormatTipsModal .modal-content,
  #fileSizeTipsModal .modal-content,
  #tagsSelectedTipsModal .modal-content,
  #reUploadTipsModal .modal-content,
  #failedUploadTipsModal .modal-content,
  #cropperNotInitialisedModal .modal-content {
    padding-right: 24px;
    padding-left: 24px;
  }
}
@media (min-width:1280px) {
  #imgFormatTipsModal .modal-content,
  #fileSizeTipsModal .modal-content,
  #tagsSelectedTipsModal .modal-content,
  #reUploadTipsModal .modal-content,
  #failedUploadTipsModal .modal-content,
  #cropperNotInitialisedModal .modal-content {
    padding-right: 0;
    padding-left: 0;
    border-radius: 24px;
  }
}
#imgFormatTipsModal .modal-body,
#fileSizeTipsModal .modal-body,
#tagsSelectedTipsModal .modal-body,
#reUploadTipsModal .modal-body,
#failedUploadTipsModal .modal-body,
#cropperNotInitialisedModal .modal-body {
  padding: 60px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(153, 175, 255, 0.3) 100%);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
@media (min-width:1280px) {
  #imgFormatTipsModal .modal-body,
  #fileSizeTipsModal .modal-body,
  #tagsSelectedTipsModal .modal-body,
  #reUploadTipsModal .modal-body,
  #failedUploadTipsModal .modal-body,
  #cropperNotInitialisedModal .modal-body {
    padding: 44px 28px 59px;
    border-radius: 24px;
  }
}
#imgFormatTipsModal .modal-body .p-text,
#fileSizeTipsModal .modal-body .p-text,
#tagsSelectedTipsModal .modal-body .p-text,
#reUploadTipsModal .modal-body .p-text,
#failedUploadTipsModal .modal-body .p-text,
#cropperNotInitialisedModal .modal-body .p-text {
  margin-bottom: 80px;
  font-size: 14px;
  line-height: 150%;
}
@media (min-width:1280px) {
  #imgFormatTipsModal .modal-body .p-text,
  #fileSizeTipsModal .modal-body .p-text,
  #tagsSelectedTipsModal .modal-body .p-text,
  #reUploadTipsModal .modal-body .p-text,
  #failedUploadTipsModal .modal-body .p-text,
  #cropperNotInitialisedModal .modal-body .p-text {
    margin-bottom: 120px;
  }
}
#imgFormatTipsModal .modal-body .btn-submit,
#fileSizeTipsModal .modal-body .btn-submit,
#tagsSelectedTipsModal .modal-body .btn-submit,
#reUploadTipsModal .modal-body .btn-submit,
#failedUploadTipsModal .modal-body .btn-submit,
#cropperNotInitialisedModal .modal-body .btn-submit {
  min-width: 150px;
}

.sec-1 {
  z-index: 1;
  position: relative;
  padding: 96px 16px 0;
  overflow: hidden;
}
@media (min-width:1280px) {
  .sec-1 {
    padding: 100px 0 32px;
  }
}
@media (min-width:1600px) {
  .sec-1 {
    padding: 120px 0 40px;
  }
}
.sec-1 .aperture {
  z-index: -1;
  top: -80%;
  left: -2%;
  width: 1590px;
  height: 1340px;
  background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/aperture-bg.png");
  background-size: 100% 100%;
}
.sec-1 .h1-title {
  margin-bottom: 24px;
}
@media (min-width:1280px) {
  .sec-1 .h1-title {
    margin-bottom: 32px;
  }
}
@media (min-width:1600px) {
  .sec-1 .h1-title {
    margin-bottom: 40px;
  }
}
.sec-1 .prizes-info-cont {
  width: 100%;
  padding: 1px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
}
@media (min-width:1280px) {
  .sec-1 .prizes-info-cont {
    max-width: 1248px;
    border-radius: 36px;
  }
}
@media (min-width:1600px) {
  .sec-1 .prizes-info-cont {
    max-width: 1848px;
  }
}
.sec-1 .prizes-info-cont .inside-bg {
  height: 100%;
  padding: 24px 0 0;
  background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/prizes-info-cont-bg-mb.png") no-repeat center/cover;
  border-radius: 11px;
  overflow: hidden;
}
@media (min-width:768px) {
  .sec-1 .prizes-info-cont .inside-bg {
    overflow: unset;
  }
}
@media (min-width:992px) {
  .sec-1 .prizes-info-cont .inside-bg {
    padding: 24px 40px;
    background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/prizes-info-cont-bg.png") no-repeat center/cover;
  }
}
@media (min-width:1280px) {
  .sec-1 .prizes-info-cont .inside-bg {
    padding: 28px 0 0 130px;
    border-radius: 35px;
  }
}
@media (min-width:1600px) {
  .sec-1 .prizes-info-cont .inside-bg {
    padding: 28px 0 0 172px;
  }
}
.sec-1 .prizes-info-cont .inside-bg .left {
  width: 100%;
}
@media (min-width:1280px) {
  .sec-1 .prizes-info-cont .inside-bg .left {
    max-width: 540px;
  }
}
@media (min-width:1600px) {
  .sec-1 .prizes-info-cont .inside-bg .left {
    margin-right: 212px;
  }
}
.sec-1 .prizes-info-cont .inside-bg .right {
  z-index: -1;
}
@media (min-width:768px) {
  .sec-1 .prizes-info-cont .inside-bg .right {
    z-index: unset;
  }
}
@media (min-width:1600px) {
  .sec-1 .prizes-info-cont .inside-bg .right {
    margin-top: -78px;
  }
}
.sec-1 .prizes-info-cont .inside-bg .right img {
  margin-top: -245px;
}
@media (min-width:768px) {
  .sec-1 .prizes-info-cont .inside-bg .right img {
    margin-top: 0;
  }
}
.sec-1 .prizes-info-cont .prizes-list {
  padding: 0 16px;
}
@media (min-width:768px) {
  .sec-1 .prizes-info-cont .prizes-list {
    padding: 0 24px;
  }
}
@media (min-width:1280px) {
  .sec-1 .prizes-info-cont .prizes-list {
    padding: 0;
  }
}
.sec-1 .prizes-info-cont .prizes-list li {
  padding: 2px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  line-height: 150%;
}
@media (min-width:1280px) {
  .sec-1 .prizes-info-cont .prizes-list li {
    padding: 2px 14px;
    border-radius: 50px;
    font-size: 16px;
  }
}
.sec-1 .prizes-info-cont .prizes-list li:not(:last-child) {
  margin-bottom: 8px;
}
.sec-1 .prizes-info-cont .prizes-list li span {
  margin-left: 6px;
}
.sec-1 .prizes-info-cont .countdown-cell {
  width: 48px;
  height: 48px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.4);
}
.sec-1 .prizes-info-cont .countdown-cell:not(:last-child) {
  margin-right: 15px;
}
.sec-1 .prizes-info-cont .countdown-cell .time-num {
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #fff;
}
.sec-1 .prizes-info-cont .countdown-cell .time-unit {
  font-size: 12px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.5);
}

.sec-2 {
  height: auto;
  padding: 32px 0 64px;
  transition: height 0.3s ease;
  overflow: hidden;
}
@media (min-width:1280px) {
  .sec-2 {
    padding: 40px 0 80px;
  }
}
.sec-2 .post-container {
  z-index: 1;
  width: 100%;
  padding: 50px 16px 0;
  overflow: hidden;
}
@media (min-width:992px) {
  .sec-2 .post-container {
    padding: 64px 16px 0;
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}
@media (min-width:1280px) {
  .sec-2 .post-container {
    max-width: 1248px;
  }
}
@media (min-width:1600px) {
  .sec-2 .post-container {
    max-width: 1848px;
  }
}
.sec-2 .post-container::after {
  z-index: -1;
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 464px;
  background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/post-container-top-bg.webp") no-repeat center/cover;
}
.sec-2 .search-box {
  margin-bottom: 12px;
}
.sec-2 .search-box .input-group {
  max-width: 570px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 36px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.sec-2 .search-box .mg-icon {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}
.sec-2 .search-box input {
  padding: 7px 64px;
  background: transparent;
  border: none;
  border-radius: 36px !important;
  color: #fff;
}
.sec-2 .search-box input::-moz-placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.7);
}
.sec-2 .search-box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.7);
}
@media (min-width:1280px) {
  .sec-2 .search-box input::-moz-placeholder {
    font-size: 18px;
  }
  .sec-2 .search-box input::placeholder {
    font-size: 18px;
  }
}
.sec-2 .search-box input:-webkit-autofill {
  background-color: #000 !important;
}
.sec-2 .keyword-tags {
  margin-bottom: 64px;
}
@media (min-width:1280px) {
  .sec-2 .keyword-tags {
    margin-bottom: 36px;
  }
}
.sec-2 .keyword-tags .swiper-button-prev,
.sec-2 .keyword-tags .swiper-button-next {
  max-width: 19px;
  width: 100%;
  height: 56px;
  margin-top: unset;
  border-radius: 52px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.1) inset;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.6);
}
@media (min-width:1280px) {
  .sec-2 .keyword-tags .swiper-button-prev,
  .sec-2 .keyword-tags .swiper-button-next {
    max-width: 55px;
    height: 26px;
  }
}
.sec-2 .keyword-tags .swiper-button-prev::after,
.sec-2 .keyword-tags .swiper-button-next::after {
  display: none;
}
.sec-2 .keyword-tags .swiper-button-prev:not(.swiper-button-disabled):hover,
.sec-2 .keyword-tags .swiper-button-next:not(.swiper-button-disabled):hover {
  background: rgba(255, 255, 255, 0.15);
}
.sec-2 .keyword-tags .swiper-button-prev.swiper-button-disabled,
.sec-2 .keyword-tags .swiper-button-next.swiper-button-disabled {
  opacity: 0.2;
}
.sec-2 .keyword-tags .swiper-button-prev {
  margin-right: 8px;
}
@media (min-width:992px) {
  .sec-2 .keyword-tags .swiper-button-prev {
    margin-right: 12px;
  }
}
.sec-2 .keyword-tags .swiper-button-next {
  margin-left: 8px;
}
@media (min-width:992px) {
  .sec-2 .keyword-tags .swiper-button-next {
    margin-left: 12px;
  }
}
.sec-2 .keyword-tags .keywordTags {
  max-width: 304px;
  margin: 0 8px;
}
@media (min-width:992px) {
  .sec-2 .keyword-tags .keywordTags {
    max-width: 950px;
    margin: 0 12px;
  }
}
.sec-2 .keyword-tags .keywordTags .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-2 .keyword-tags .tag-item {
  cursor: pointer;
  width: 100%;
  height: 24px;
  padding: 1px 16px;
  border-radius: 52px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.1) inset;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 12px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.sec-2 .keyword-tags .tag-item span {
  display: inline-block;
  width: 100%;
}
@media (min-width:1280px) {
  .sec-2 .keyword-tags .tag-item {
    font-size: 14px;
  }
}
.sec-2 .keyword-tags .tag-item:hover {
  background: rgba(255, 255, 255, 0.15);
}
.sec-2 .filter-box {
  z-index: 10;
  position: relative;
  margin-bottom: 12px;
}
@media (min-width:1280px) {
  .sec-2 .filter-box {
    margin-bottom: 0;
    margin-left: 12px;
  }
}
@media (min-width:1600px) {
  .sec-2 .filter-box {
    margin-left: 18px;
  }
}
.sec-2 .filter-box .filter-item {
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: -5px 0px 10px 0px rgba(255, 255, 255, 0.1) inset;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 14px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.7);
}
.sec-2 .filter-box .filter-item a {
  text-decoration: none;
  color: inherit;
}
.sec-2 .filter-box .event-select-box {
  position: relative;
  max-width: 210px;
  width: 100%;
  margin-right: 12px;
}
.sec-2 .filter-box .event-select-box:not(.eventWidth.expand) {
  border-radius: 52px;
}
.sec-2 .filter-box .event-select-box .eventWidth {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px 24px;
  border-radius: 52px;
  background-image: url("data:image/svg+xml, <svg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.44977 10.9517L11.3731 7.25913C11.8059 6.85183 11.5176 6.125 10.9233 6.125L3.07666 6.125C2.48237 6.125 2.19413 6.85183 2.62689 7.25913L6.55023 10.9517C6.80292 11.1895 7.19708 11.1895 7.44977 10.9517Z' fill='white' fill-opacity='0.7'/></svg>");
  background-repeat: no-repeat;
  background-size: 15px 14px;
  background-position: right 1.5rem center;
}
.sec-2 .filter-box .event-select-box .eventWidth.expand {
  background-image: url("data:image/svg+xml, <svg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.57477 6.54831L11.4981 10.2409C11.9309 10.6482 11.6426 11.375 11.0483 11.375L3.20166 11.375C2.60737 11.375 2.31913 10.6482 2.75189 10.2409L6.67523 6.54831C6.92792 6.31049 7.32208 6.31049 7.57477 6.54831Z' fill='white' fill-opacity='0.7'/></svg>");
  border-radius: 18px 18px 0 0;
}
.sec-2 .filter-box .event-select-box .placeholder {
  display: inline-block;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-2 .filter-box .event-select-box .eventOptionsCont {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 185px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 0 18px 18px;
}
.sec-2 .filter-box .event-select-box .eventOptionsCont::-webkit-scrollbar {
  width: 4px;
}
.sec-2 .filter-box .event-select-box .eventOptionsCont::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 11px;
}
.sec-2 .filter-box .event-select-box .eventOptionsCont::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 34px;
}
.sec-2 .filter-box .event-select-box .event-option {
  cursor: pointer;
  padding: 8px 12px;
  background-color: inherit;
  color: rgba(255, 255, 255, 0.5);
}
.sec-2 .filter-box .event-select-box .event-option:hover {
  background-color: #222;
}
.sec-2 .filter-box .rank-box {
  padding: 5px 24px;
  border-radius: 52px;
}
.sec-2 #post-items-container {
  height: auto;
  transition: height 0.3s ease;
  overflow: hidden;
}
.sec-2 .no-content {
  padding: 64px 0;
  margin: 0 auto;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.sec-2 .post-item {
  z-index: 1;
  display: block;
  position: relative;
  width: 100%;
  margin: 12px auto;
  transition: height 0.3s;
}
@media (min-width:768px) {
  .sec-2 .post-item {
    width: 46%;
    margin: 14px;
  }
}
@media (min-width:1280px) {
  .sec-2 .post-item {
    width: 31.1%;
    margin: 12px;
  }
}
@media (min-width:1600px) {
  .sec-2 .post-item {
    margin: 16px;
  }
}
@media (min-width:1920px) {
  .sec-2 .post-item {
    width: 31.3%;
    margin: 18px;
  }
}
.sec-2 .post-item.hidden {
  display: none;
}
@media (min-width:1280px) {
  .sec-2 .post-item:hover .hide-content {
    display: block;
    opacity: 1;
  }
}
.sec-2 .post-item .hide-content {
  cursor: pointer;
  display: none;
  opacity: 0;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 322px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 25%, #000 100%);
}
@media (min-width:1280px) {
  .sec-2 .post-item .hide-content {
    padding: 105px 61px 24px;
  }
}
.sec-2 .post-item .hide-content .btn-view {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  height: 40px;
  padding: 8px 24px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 52px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: -5px 0px 10px 0px rgba(255, 255, 255, 0.1) inset;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 14px;
  line-height: 100%;
  color: #fff;
  text-decoration: none;
}
.sec-2 .post-item .hide-content .hide-text-box {
  position: relative;
  margin-top: 68px;
}
.sec-2 .post-item .hide-content .hide-title-text {
  max-width: 390px;
  font-size: 14px;
  line-height: 150%;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sec-2 .post-item .hide-content .jump-link {
  position: absolute;
  top: 0;
  right: 0;
}
.sec-2 .post-item .hide-content .event-tag-list {
  display: flex;
  margin-bottom: 0;
}
.sec-2 .post-item .hide-content .event-tag-list li {
  height: 21px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 29px;
  font-size: 14px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sec-2 .post-item .hide-content .event-tag-list li:not(:last-child) {
  max-width: 80px;
  width: 100%;
  margin-right: 4px;
}
.sec-2 .post-item .hide-content .event-tag-list li.li-ellipsis {
  padding: 0;
  background: transparent;
}
.sec-2 .post-item .compare-cont {
  cursor: pointer;
  height: 203px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 350px 98px 0px rgba(0, 0, 0, 0), 0px 224px 89px 0px rgba(0, 0, 0, 0.03), 0px 126px 76px 0px rgba(0, 0, 0, 0.12), 0px 56px 56px 0px rgba(0, 0, 0, 0.2), 0px 14px 31px 0px rgba(0, 0, 0, 0.23);
}
@media (min-width:992px) {
  .sec-2 .post-item .compare-cont {
    height: 260px;
  }
}
@media (min-width:1280px) {
  .sec-2 .post-item .compare-cont {
    height: 240px;
  }
}
@media (min-width:1600px) {
  .sec-2 .post-item .compare-cont {
    height: 322px;
  }
}
.sec-2 .post-item .compare-before,
.sec-2 .post-item .compare-after {
  z-index: 1;
  position: relative;
  flex-basis: 50%;
  padding: 13px 17px;
}
.sec-2 .post-item .compare-before img,
.sec-2 .post-item .compare-after img {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.sec-2 .post-item .compare-before .tag,
.sec-2 .post-item .compare-after .tag {
  width: -moz-fit-content;
  width: fit-content;
  height: 22px;
  padding: 2px 10px;
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.sec-2 .post-item .author-data {
  z-index: 3;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.sec-2 .post-item .author-info {
  display: flex;
  align-items: center;
  width: 100%;
}
.sec-2 .post-item .author-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.sec-2 .post-item .author-info span {
  margin-left: 12px;
  font-size: 14px;
  line-height: 150%;
  color: #fff;
}
.sec-2 .post-item .behaviour-cont {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.sec-2 .post-item .behaviour-cont .item {
  position: relative;
  display: flex;
  align-items: center;
}
.sec-2 .post-item .behaviour-cont .item.like-item {
  cursor: pointer;
}
.sec-2 .post-item .behaviour-cont .item.like-item .click-like {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("https://images.hitpaw.com/hitpaw-2024/content-hub/like-icon-default.png");
  background-size: 100% 100%;
  text-decoration: none;
}
.sec-2 .post-item .behaviour-cont .item.like-item .click-like.active {
  background-image: url("https://images.hitpaw.com/hitpaw-2024/content-hub/like-icon-active.png");
}
.sec-2 .post-item .behaviour-cont .item .icon-share:hover + .media-list {
  display: block;
  opacity: 1;
}
.sec-2 .post-item .behaviour-cont .item:not(:last-child) {
  margin-right: 10px;
}
.sec-2 .post-item .behaviour-cont .item svg {
  width: 22px;
}
.sec-2 .post-item .behaviour-cont .item span {
  margin-left: 4px;
  font-size: 14px;
  line-height: 150%;
  color: #fff;
}
.sec-2 .post-item .behaviour-cont .media-list {
  z-index: 6;
  position: absolute;
  display: none;
  opacity: 0;
  top: -42px;
  right: 0;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  transition: opacity 0.3s;
}
.sec-2 .post-item .behaviour-cont .media-list:hover {
  display: block;
  opacity: 1;
}
.sec-2 .post-item .behaviour-cont .media-list .media-item:not(:last-child) {
  margin-right: 8px;
}
.sec-2 .post-item .behaviour-cont .media-list .media-item img {
  width: 24px;
  height: 24px;
}
.sec-2 .see-more {
  display: none;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 24px;
  margin-top: 11px;
  margin-right: auto;
  margin-left: auto;
  font-size: 16px;
  line-height: 150%;
}
@media (min-width:1280px) {
  .sec-2 .see-more {
    margin-top: 36px;
    margin-bottom: 26px;
  }
}
.sec-2 .see-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sec-2 .see-more:disabled svg path {
  fill: #000;
}
.sec-2 .see-more:focus {
  color: #6b57ff;
}

.sec-3 {
  padding-bottom: 32px;
}
@media (min-width:768px) {
  .sec-3 {
    padding-bottom: 64px;
  }
}
@media (min-width:992px) {
  .sec-3 {
    padding-bottom: 160px;
  }
}
@media (min-width:1280px) {
  .sec-3 {
    padding-bottom: 40px;
  }
}
.sec-3 .ranking-container {
  width: 100%;
  height: 527px;
  padding: 32px 16px 16px;
  background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/ranking-container-bg-mb.webp") no-repeat center/cover;
}
@media (min-width:768px) {
  .sec-3 .ranking-container {
    background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/ranking-container-bg.webp") no-repeat center/cover;
  }
}
@media (min-width:1280px) {
  .sec-3 .ranking-container {
    max-width: 1248px;
    height: 760px;
    padding: 56px 64px 0;
  }
}
@media (min-width:1600px) {
  .sec-3 .ranking-container {
    max-width: 1848px;
    padding: 64px 190px 0;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-rank {
    padding: 36px;
    margin-top: 56px;
    border-radius: 60px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, rgba(21, 16, 31, 0.2) 0%, rgba(21, 16, 31, 0) 100%);
  }
}
.sec-3 .creators-item {
  width: 100%;
  padding: 26px 12px 0;
  background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/creators-item-bg-mb.webp") no-repeat center/cover, rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
}
@media (min-width:768px) {
  .sec-3 .creators-item {
    background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/creators-item-bg.webp") no-repeat center/cover, rgba(255, 255, 255, 0.02);
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item {
    padding: 40px 34px 0;
    border-radius: 36px;
  }
  .sec-3 .creators-item:not(:last-child) {
    margin-right: 36px;
  }
}
.sec-3 .creators-item .creators-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 120%;
  color: #fff;
}
@media (min-width:1280px) {
  .sec-3 .creators-item .creators-title {
    font-size: 24px;
    line-height: 150%;
  }
}
.sec-3 .creators-item .podium {
  margin-top: 194px;
  margin-bottom: -9px;
}
@media (min-width:768px) {
  .sec-3 .creators-item .podium {
    margin-top: 140px;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item .podium {
    margin-top: 254px;
    margin-bottom: -24px;
  }
}
.sec-3 .creators-item .first-place,
.sec-3 .creators-item .second-place,
.sec-3 .creators-item .third-place {
  position: absolute;
}
.sec-3 .creators-item .first-place .rank-num,
.sec-3 .creators-item .second-place .rank-num,
.sec-3 .creators-item .third-place .rank-num {
  z-index: 1;
  position: absolute;
}
.sec-3 .creators-item .first-place .rank-num span,
.sec-3 .creators-item .second-place .rank-num span,
.sec-3 .creators-item .third-place .rank-num span {
  text-align: center;
  text-transform: capitalize;
  background: linear-gradient(180deg, #d4f2ff 24.19%, rgba(255, 255, 255, 0) 73.12%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec-3 .creators-item .first-place {
  top: -80%;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width:768px) {
  .sec-3 .creators-item .first-place {
    top: -40%;
  }
}
@media (min-width:992px) {
  .sec-3 .creators-item .first-place {
    top: -30%;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item .first-place {
    top: -90%;
  }
}
@media (min-width:1600px) {
  .sec-3 .creators-item .first-place {
    top: -75%;
  }
}
@media (min-width:1920px) {
  .sec-3 .creators-item .first-place {
    top: -65%;
  }
}
.sec-3 .creators-item .first-place .rank-num {
  top: -38px;
}
@media (min-width:768px) {
  .sec-3 .creators-item .first-place .rank-num {
    top: -40px;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item .first-place .rank-num {
    top: -70px;
  }
}
@media (min-width:1600px) {
  .sec-3 .creators-item .first-place .rank-num {
    top: -68px;
  }
}
.sec-3 .creators-item .first-place .rank-num span {
  font-size: 37px;
  font-weight: 700;
  line-height: 150%;
}
@media (min-width:1280px) {
  .sec-3 .creators-item .first-place .rank-num span {
    font-size: 62px;
  }
}
.sec-3 .creators-item .second-place,
.sec-3 .creators-item .third-place {
  top: -60%;
}
@media (min-width:768px) {
  .sec-3 .creators-item .second-place,
  .sec-3 .creators-item .third-place {
    top: -16%;
  }
}
@media (min-width:992px) {
  .sec-3 .creators-item .second-place,
  .sec-3 .creators-item .third-place {
    top: -6%;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item .second-place,
  .sec-3 .creators-item .third-place {
    top: -66%;
  }
}
@media (min-width:1600px) {
  .sec-3 .creators-item .second-place,
  .sec-3 .creators-item .third-place {
    top: -52%;
  }
}
@media (min-width:1920px) {
  .sec-3 .creators-item .second-place,
  .sec-3 .creators-item .third-place {
    top: -42%;
  }
}
.sec-3 .creators-item .second-place .rank-num,
.sec-3 .creators-item .third-place .rank-num {
  top: -38px;
}
@media (min-width:768px) {
  .sec-3 .creators-item .second-place .rank-num,
  .sec-3 .creators-item .third-place .rank-num {
    top: -40px;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item .second-place .rank-num,
  .sec-3 .creators-item .third-place .rank-num {
    top: -48px;
  }
}
.sec-3 .creators-item .second-place .rank-num span,
.sec-3 .creators-item .third-place .rank-num span {
  font-size: 37px;
  font-weight: 700;
  line-height: 150%;
}
@media (min-width:1280px) {
  .sec-3 .creators-item .second-place .rank-num span,
  .sec-3 .creators-item .third-place .rank-num span {
    font-size: 44px;
  }
}
.sec-3 .creators-item .second-place {
  left: 4%;
}
@media (min-width:768px) {
  .sec-3 .creators-item .second-place {
    left: 11.5%;
  }
}
@media (min-width:992px) {
  .sec-3 .creators-item .second-place {
    left: 13%;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item .second-place {
    left: 6%;
  }
}
@media (min-width:1600px) {
  .sec-3 .creators-item .second-place {
    left: 9.5%;
  }
}
.sec-3 .creators-item .third-place {
  right: 4%;
}
@media (min-width:768px) {
  .sec-3 .creators-item .third-place {
    right: 11.5%;
  }
}
@media (min-width:992px) {
  .sec-3 .creators-item .third-place {
    right: 13%;
  }
}
@media (min-width:1280px) {
  .sec-3 .creators-item .third-place {
    right: 6%;
  }
}
@media (min-width:1600px) {
  .sec-3 .creators-item .third-place {
    right: 9.5%;
  }
}
.sec-3 .creators-item .user-avatar {
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50px;
  border: 0.9px solid #fff;
  background: #88b7e5;
}
@media (min-width:1280px) {
  .sec-3 .creators-item .user-avatar {
    width: 80px;
    height: 80px;
    border: 1.429px solid #fff;
  }
}
.sec-3 .creators-item .user-name {
  max-width: 84px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (min-width:1280px) {
  .sec-3 .creators-item .user-name {
    max-width: 95px;
    font-size: 16px;
  }
}
.sec-3 #creator-tab {
  margin-top: 32px;
}
.sec-3 #creator-tab .tab-link {
  min-width: 144px;
  padding: 4px 24px;
  border-radius: 52px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: -5px 0px 10px 0px rgba(255, 255, 255, 0.1) inset;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 14px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.sec-3 #creator-tab .tab-link.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.sec-3 #creator-tab .tab-link:not(:last-child) {
  margin-right: 12px;
}

.sec-4 {
  padding: 32px 16px;
}
@media (min-width:1280px) {
  .sec-4 {
    padding: 40px 0;
  }
}
.sec-4 .main-container {
  width: 100%;
  height: 475px;
  padding-top: 32px;
  background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/sec-4-bg-mb.webp") no-repeat center/cover;
}
@media (min-width:992px) {
  .sec-4 .main-container {
    padding-top: 64px;
  }
}
@media (min-width:1280px) {
  .sec-4 .main-container {
    padding-top: 100px;
    padding-left: 295px;
    background: url("https://images.hitpaw.com/hitpaw-2024/content-hub/sec-4-bg.webp") no-repeat center/cover;
  }
}
@media (min-width:1600px) {
  .sec-4 .main-container {
    padding-top: 130px;
    padding-left: 427px;
  }
}
.sec-4 .main-container .btn.btn-md {
  height: 40px;
  padding: 0 27px;
}
.sec-4 .main-container .btn.btn-white {
  color: #000;
}

.sec-5 {
  position: relative;
  padding: 32px 0 64px;
}
@media (min-width:1280px) {
  .sec-5 {
    padding: 40px 0 80px;
  }
}
.sec-5::after {
  position: absolute;
  content: "";
  bottom: -64px;
  left: 0;
  width: 100%;
  height: 64px;
  background: #000;
}
.sec-5 .main-container {
  width: 100%;
  padding: 48px 24px;
  background: #000928 url("https://images.hitpaw.com/hitpaw-2024/content-hub/create-unlimited-possibilities-bg-mb.webp") no-repeat center/cover;
}
@media (min-width:992px) {
  .sec-5 .main-container {
    max-width: 960px;
    background: #000928 url("https://images.hitpaw.com/hitpaw-2024/content-hub/create-unlimited-possibilities-bg.webp") no-repeat center/cover;
    border-radius: 64px;
  }
}
@media (min-width:1280px) {
  .sec-5 .main-container {
    max-width: 1224px;
    padding: 80px 0;
  }
}
@media (min-width:1600px) {
  .sec-5 .main-container {
    max-width: 1504px;
    padding: 100px 0;
  }
}
.sec-5 .main-container .content {
  max-width: 780px;
}
.sec-5 .main-container .logo {
  width: 76px;
}
@media (min-width:1280px) {
  .sec-5 .main-container .logo {
    width: 112px;
  }
}
@media (min-width:1600px) {
  .sec-5 .main-container .h2-title {
    font-size: 40px;
  }
}
.sec-5 .main-container .p-text {
  font-size: 16px;
  line-height: 24px;
}
@media (min-width:1280px) {
  .sec-5 .main-container .p-text {
    font-size: 18px;
    line-height: 26px;
  }
}