.upload {
  position: absolute;
  top: 380px;
  max-width: 1347px;
  width: 100%;
  z-index: 40;
  padding: 60px 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  backdrop-filter: blur(9px);
  background: rgba(20, 20, 20, 0.5);
}

.upload.short {
  max-width: 858px;
  top: 450px;
  padding: 0;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  background: transparent;
}
.upload.short .upload-wrapper {
  width: 100%;
  z-index: 40;
}

.upload-wrapper {
  position: relative;
  z-index: 41;
}

.upload-disable {
  display: none;
}

.upload-container.disable .upload-area, .upload-container.disable .upload-link-area, .upload-container.disable .final-window {
  display: none !important;
}
.upload-container.disable .upload-window {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.upload-container.disable .upload-title {
  max-width: 540px;
  text-align: center;
}
.upload-container.disable p {
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.upload-container.disable .upload-disable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.upload-wrapper.result {
  max-width: 858px;
}
.upload-wrapper.result .upload-misc {
  display: none;
}
.upload-wrapper.result .upload-container {
  height: 231px;
}
.upload-wrapper.result .upload-header {
  justify-content: center;
}

.upload-h1 {
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 600;
  font-size: 40px;
  line-height: 130%;
  margin-bottom: 22px;
  color: #fff;
  z-index: 5;
}
.upload-h1:after {
  position: absolute;
  content: "";
  background: url("../assets/img/upload-h1.png") no-repeat center;
  width: 1408px;
  height: 1034px;
  z-index: -1;
  user-select: none;
  pointer-events: none;
}

#uploadLoader {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 55;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  background: #1E2428;
  border-radius: 12px;
  font-size: 40px;
}
#uploadLoader:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: url("../assets/img/upload-left.webp") no-repeat;
  width: 683px;
  height: 356px;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
#uploadLoader:after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  background: url("../assets/img/upload-right.webp") no-repeat right;
  width: 683px;
  height: 356px;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
#uploadLoader .loader-title {
  font-size: 20px;
  font-weight: 600;
}
#uploadLoader .loader-p {
  font-size: 14px;
  margin: 12px 0 33px 0;
}
#uploadLoader .loader-circle {
  width: 45px;
  height: 45px;
  margin: 0 auto 0 auto;
  animation: spin 1s linear infinite;
}
#uploadLoader .loader-circle svg {
  width: 100%;
  height: 100%;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#uploadOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

#uploadOverlay.show {
  opacity: 1;
  pointer-events: auto;
}

.upload-wrapper.result-link .file-data {
  display: none;
}
.upload-wrapper.result-link .link-data {
  display: flex;
}

.upload-wrapper.final {
  max-width: 858px;
}
.upload-wrapper.final .upload-misc--2 {
  display: flex;
}
.upload-wrapper.final .upload-container {
  height: 275px;
}

.final-error {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  height: 100%;
}
.final-error p {
  margin: 12px 0 33px 0;
  font-size: 14px;
  text-align: center;
}
.final-error .upload-btn {
  margin: 0 auto 0 auto;
}

.final-error-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
}

.link-data {
  display: none;
  align-items: center;
  gap: 4px;
  color: #898989;
  font-size: 14px;
}

.upload-misc {
  display: flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  right: -40px;
  top: 8px;
  border-radius: 61px;
  background: #5CB24B;
  transform: rotate(6deg);
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  padding: 8px 16px;
  z-index: 51;
}

.upload-misc--2 {
  display: none;
  align-items: center;
  gap: 16px;
  position: absolute;
  right: -100px;
  top: 50px;
  border-radius: 50px;
  background: #6C58E5;
  transform: rotate(6deg);
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  padding: 8px 13px;
  z-index: 51;
  text-align: center;
}

.upload-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.inputTypeBtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #898989;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.inputTypeBtn svg path {
  fill: #898989;
  transition: 0.3s ease-in-out;
}
.inputTypeBtn:before {
  position: absolute;
  bottom: -6px;
  left: 0;
  content: "";
  width: 0px;
  height: 3px;
  background: #fff;
  transition: 0.3s ease-in-out;
  opacity: 0;
}

.inputTypeBtn.active {
  color: #fff;
  fill: #fff;
}
.inputTypeBtn.active:before {
  opacity: 1;
  width: 100%;
}

.upload-container {
  position: relative;
  padding: 16px;
  box-sizing: border-box;
  background: #1E2428;
  height: 365px;
  border-radius: 12px;
}

.dragover:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: rgba(28, 34, 38, 0.6);
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
}

.upload-window {
  position: relative;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.upload-window:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: url("../assets/img/upload-left.webp") no-repeat;
  width: 683px;
  height: 356px;
  pointer-events: none;
  user-select: none;
}
.upload-window:after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  background: url("../assets/img/upload-right.webp") no-repeat right;
  width: 683px;
  height: 356px;
  pointer-events: none;
  user-select: none;
}

.upload-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-area, .upload-link-area {
  position: relative;
  border: 2px dashed #bdbdbd;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: auto;
  z-index: 1;
}
.upload-area p, .upload-link-area p {
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: #fff;
}

.upload-link-area {
  border: none;
  flex-direction: column;
}

.link-input {
  max-width: 480px;
  width: 100%;
  position: relative;
  gap: 16px;
  margin: 24px auto 34px auto;
  border-radius: 8px;
  border: 1px solid transparent;
}
.link-input input {
  border-radius: 8px;
  outline: none;
  background: #272F33;
  padding: 16px 20px;
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  max-width: 480px;
  color: #fff;
  font-size: 14px;
  border: none;
}
.link-input input::placeholder {
  color: #898989;
  font-size: 14px;
}

.link-input.error {
  border: 1px solid #E95570;
}

.upload-link-area .upload-title {
  margin: 16px 0 0 0;
}
.upload-link-area button {
  max-width: 272px;
  width: 100%;
  height: 45px;
  border-radius: 16px;
  font-size: 16px;
  margin: 12px auto 0 auto;
}

.link-err {
  display: none;
  position: absolute;
  bottom: -20px;
  left: 0;
  color: #E95570;
  font-size: 14px;
}

.upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #454545;
  margin: auto;
}
.upload-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  color: #fff;
  margin: 16px auto 12px auto;
}

.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 12px auto;
  border: none;
  padding: 12px 24px;
  box-sizing: border-box;
  background: #F8F8F8;
  font-size: 16px;
  color: #151B1F;
  font-weight: 600;
  border-radius: 16px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.upload-btn:hover {
  color: #fff;
  background: rgb(243, 40, 122);
}

.upload-btn.pink {
  background: rgb(243, 40, 122);
  color: #fff;
}
.upload-btn.pink:hover {
  color: #000;
  background: #fff;
}

.result-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.result-btns button {
  margin: 32px 0 0 0;
}

.upload-formats-btn {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: #898989;
  cursor: pointer;
}
.upload-formats-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #475967;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
}

.upload-file-result {
  display: none;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  height: 200px;
  padding: 24px 45px;
  z-index: 40;
}

.file-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.file {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #454545;
  flex: none;
}

.file-name {
  font-size: 16px;
  color: #fff;
  line-height: 130%;
  margin-bottom: 2px;
}

.file-data {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #898989;
  font-size: 14px;
}

.file-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.file-url {
  display: none;
  align-items: center;
  gap: 4px;
  color: #898989;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.file-size {
  display: flex;
  align-items: center;
  gap: 4px;
}

.file-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.file-btns div {
  cursor: pointer;
}

.transcribe-setting {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #fff;
}

.file-del {
  display: flex;
}

.audio-icon.hidden {
  display: none;
}

.video-icon.hidden {
  display: none;
}

.link-icon.hidden {
  display: none;
}

.final-window {
  display: none;
  position: relative;
  z-index: 40;
  flex-direction: column;
  padding: 24px 30px;
}
.final-window .upload-btn {
  background: rgb(243, 40, 122);
  color: #fff;
  margin: 18px auto 0 auto;
}
.final-window .upload-btn:hover {
  color: #000;
  background: #fff;
}

.final-title {
  font-size: 20px;
  color: #fff;
}

.final-text-wrapper {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.final-text-wrapper:before {
  position: absolute;
  width: 100%;
  height: 75px;
  border-radius: 10px;
  content: "";
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
}

.final-text {
  font-size: 16px;
  color: #fff;
  line-height: 130%;
  user-select: none;
  pointer-events: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.final-sub-text {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 12px 0 17px 0;
  font-size: 14px;
  color: #898989;
}
.final-sub-text img {
  margin-right: 10px;
}

.formats-modal {
  position: absolute;
  bottom: -100px;
  right: 120px;
  color: #fff;
  font-size: 20px;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.3s ease-in-out;
  z-index: 50;
}

#linkModal {
  bottom: -30px;
  right: 180px;
}

#fileModal {
  bottom: -150px;
  right: 110px;
}
#fileModal .title {
  display: flex;
  align-items: center;
  gap: 6px;
}

#backModal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 52;
  width: 100%;
  height: 100%;
}
#backModal:before {
  position: fixed;
  width: 100vw;
  height: 100vh;
  content: "";
  background: #171b1f;
  opacity: 0.7;
  z-index: -1;
}
#backModal .formats-modal-wrapper {
  height: 283px;
}
#backModal .title {
  margin-bottom: 0;
}
#backModal .formats {
  margin: 20px 0;
}
#backModal .upload-btn {
  margin: 0 auto;
}

#linkModal.show {
  user-select: unset;
  pointer-events: unset;
  opacity: 1;
  transform: translateY(0);
}

#fileModal.show {
  user-select: unset;
  pointer-events: unset;
  opacity: 1;
  transform: translateY(0);
}

#backModal.show {
  user-select: unset;
  pointer-events: unset;
  opacity: 1;
  transform: translateY(0);
}

#newFileModal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
}
#newFileModal:before {
  position: fixed;
  width: 100vw;
  height: 100vh;
  content: "";
  background: #171b1f;
  opacity: 0.7;
  z-index: -1;
}
#newFileModal .formats-modal-wrapper {
  height: 300px;
}
#newFileModal .upload-btn {
  margin: 20px 0;
}
#newFileModal .upload-btn:last-child {
  margin: 0;
}
#newFileModal #delBackBtn {
  background: #F3287A !important;
  color: #fff;
}
#newFileModal #delBackBtn:hover {
  background: #fff !important;
  color: #F3287A;
}

#newFileModal.show {
  user-select: unset;
  pointer-events: unset;
  opacity: 1;
  transform: translateY(0);
}

.formats-modal-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
  box-sizing: border-box;
  max-width: 385px;
  width: 100%;
  height: 224px;
  border-radius: 12px;
  background: #1c2226 url("../assets/img/formats-bg.png") no-repeat center/cover;
}
.formats-modal-wrapper .title {
  font-weight: 600;
  margin-bottom: 8px;
}
.formats-modal-wrapper .formats {
  margin-bottom: 16px;
}
.formats-modal-wrapper .format {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  margin-bottom: 8px;
}
.formats-modal-wrapper .format img {
  margin: 0 5px 0 5px;
}

#newTabModal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  text-align: center;
}
#newTabModal .formats-modal-wrapper {
  height: 300px;
}
#newTabModal:before {
  position: fixed;
  width: 100vw;
  height: 100vh;
  content: "";
  background: #171b1f;
  opacity: 0.7;
  z-index: -1;
}
#newTabModal .btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
#newTabModal .btns button {
  width: 100%;
  margin-bottom: 0;
}
#newTabModal .btns button:last-child {
  background: #F3287A !important;
  color: #fff;
}
#newTabModal .btns button:last-child:hover {
  background: #fff !important;
  color: #F3287A;
}

#newTabModal.show {
  user-select: unset;
  pointer-events: unset;
  opacity: 1;
  transform: translateY(0);
}

#linkModal .formats-modal-wrapper {
  height: 160px;
}

.setting-modal {
  position: absolute;
  top: 145px;
  right: -95px;
  max-width: 275px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 -8px 60px 0 rgba(11, 13, 14, 0.5);
  background: #2C3135;
  opacity: 0;
  transform: translateY(-10px);
  user-select: none;
  pointer-events: none;
  transition: 0.3s ease-in-out;
  z-index: 51;
}

.setting-modal.show {
  opacity: 1;
  transform: translateY(0);
  user-select: unset;
  pointer-events: unset;
}

.dropdown-options {
  display: none;
}

.accordion {
  font-size: 14px;
  color: #fff;
}

.dropdown-selected {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  height: 36px;
  position: relative;
  box-sizing: border-box;
  border-bottom: 1px solid #454545;
  cursor: pointer;
}
.dropdown-selected:after {
  position: absolute;
  right: 13px;
  top: 13px;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" fill="none" viewBox="0 0 16 9"><path d="M15 1L8 8L1 1" stroke="%23F8F8F8" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  width: 16px;
  height: 9px;
  transition: 0.1s ease-in-out;
}

.dropdown-selected.show:after {
  transform: rotate(180deg);
}

#langList {
  overflow-y: scroll;
  height: 144px;
}
#langList::-webkit-scrollbar {
  width: 10px;
}
#langList::-webkit-scrollbar-track {
  background: #444444;
}
#langList::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 20px;
  border: 2px solid #444444;
}
#langList div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  cursor: pointer;
  border-bottom: 1px solid #454545;
  transition: 0.3s ease-in-out;
}
#langList div:hover {
  background: #444444;
}
#langList div:last-child {
  border-bottom: none;
}
#langList div img {
  width: 12px;
  height: 12px;
}

.search-input {
  position: relative;
  width: 100%;
}
.search-input:before {
  position: absolute;
  top: 12px;
  left: 6px;
  content: "";
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.24387 1.12329C4.15113 1.12329 3.10314 1.55739 2.33046 2.3301C1.55778 3.10282 1.12369 4.15084 1.12369 5.24362C1.12369 6.3364 1.55778 7.38442 2.33046 8.15714C3.10314 8.92985 4.15113 9.36395 5.24387 9.36395C6.33661 9.36395 7.38459 8.92985 8.15728 8.15714C8.92996 7.38442 9.36405 6.3364 9.36405 5.24362C9.36405 4.15084 8.92996 3.10282 8.15728 2.3301C7.38459 1.55739 6.33661 1.12329 5.24387 1.12329ZM1.21054e-08 5.24362C7.0745e-05 4.40507 0.201224 3.57877 0.586586 2.83402C0.971948 2.08927 1.53028 1.4478 2.21475 0.963414C2.89922 0.479027 3.68986 0.16585 4.52036 0.0501543C5.35086 -0.0655417 6.19699 0.0196169 6.98778 0.298487C7.77857 0.577357 8.49096 1.04181 9.06519 1.65287C9.63941 2.26394 10.0587 3.00381 10.288 3.81041C10.5172 4.61701 10.5497 5.46683 10.3827 6.28858C10.2156 7.11032 9.85401 7.88004 9.32809 8.53314L11.8212 11.0271C11.8764 11.0785 11.9207 11.1405 11.9514 11.2095C11.9821 11.2784 11.9986 11.3528 11.9999 11.4282C12.0012 11.5037 11.9874 11.5786 11.9591 11.6486C11.9309 11.7185 11.8888 11.7821 11.8354 11.8354C11.7821 11.8888 11.7185 11.9308 11.6486 11.9591C11.5786 11.9874 11.5037 12.0012 11.4282 11.9999C11.3528 11.9986 11.2784 11.9821 11.2095 11.9514C11.1406 11.9207 11.0785 11.8764 11.0271 11.8212L8.53327 9.328C7.76283 9.94858 6.83257 10.3386 5.84992 10.4529C4.86726 10.5672 3.87231 10.4013 2.97998 9.97416C2.08764 9.54705 1.33432 8.87622 0.807012 8.03916C0.279708 7.20209 -6.7195e-05 6.23294 1.21054e-08 5.24362Z" fill="%23F8F8F8"/></svg>');
}
.search-input input {
  height: 36px;
  padding: 0 8px 0 26px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid #454545;
  background: transparent;
  color: #fff;
}

.custom-radio div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
  height: 36px;
  border-bottom: 1px solid #454545;
  padding: 0 8px;
  cursor: pointer;
}
.custom-radio div:last-child {
  border-bottom: none;
}
.custom-radio div:before {
  position: relative;
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #898989;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
}
.custom-radio div:after {
  position: absolute;
  left: 13px;
  content: "";
  width: 6px;
  height: 6px;
  background: #F3287A;
  border-radius: 50%;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.custom-radio .active:before {
  border: 2px solid #F3287A;
}
.custom-radio .active:after {
  opacity: 1;
}

.uploadMobile {
  display: none;
}

.landing__background-video__wrapper {
  bottom: -240px;
}

.how-it-work {
  padding: 220px 0 80px;
}

@media screen and (max-height: 800px) {
  .how-it-work {
    padding: 500px 10px 80px;
  }
}
@media screen and (max-height: 830px) {
  .landing__background-video__wrapper {
    bottom: -40px;
  }
}
@media screen and (max-height: 770px) {
  .landing__background-video__wrapper {
    bottom: -100px;
  }
}
@media screen and (max-height: 700px) {
  .landing__background-video__wrapper {
    bottom: -140px;
  }
  .how-it-work {
    padding: 600px 10px 80px;
  }
}
@media screen and (max-width: 1440px) {
  .landing__background-video__wrapper {
    bottom: -340px;
  }
  .how-it-work {
    padding: 200px 0 80px;
  }
}
@media screen and (max-width: 1280px) {
  .upload {
    max-width: 1100px;
    padding: 40px 30px;
  }
}
@media screen and (max-width: 1280px) and (max-height: 630px) {
  .how-it-work {
    padding: 250px 10px 80px;
  }
  .landing__background-video__wrapper {
    bottom: -190px;
  }
}
@media screen and (max-width: 1280px) {
  #fileModal {
    bottom: -80px;
    right: 80px;
  }
  #fileModal .formats-modal-wrapper {
    font-size: 16px;
    padding: 18px;
    max-width: 300px;
    height: 200px;
  }
  #linkModal {
    bottom: -20px;
    right: 160px;
  }
  #linkModal .formats-modal-wrapper {
    font-size: 16px;
    padding: 18px;
    max-width: 300px;
  }
  #linkModal .formats-modal-wrapper .format {
    font-size: 16px;
  }
}
@media screen and (max-width: 1024px) {
  .upload-misc--2 {
    font-size: 14px;
    right: -40px;
  }
  .upload {
    max-width: 95%;
    padding: 40px 20px;
  }
  .upload-misc {
    transform: rotate(4deg);
    right: -10px;
    top: 46px;
  }
  #fileModal {
    right: 60px;
  }
  #linkModal {
    right: 5px;
  }
}
@media screen and (max-width: 768px) {
  .upload {
    max-width: 95%;
    top: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    background: transparent;
  }
  .upload-header {
    width: 100%;
    overflow-x: scroll;
    height: 60px;
    box-sizing: border-box;
  }
  .upload-header .inputTypeBtn {
    text-wrap: nowrap;
  }
  .upload-wrapper.result .upload-header {
    justify-content: unset;
  }
  .upload-wrapper {
    width: 100%;
  }
  .final-error {
    padding: 24px 30px;
  }
  .upload-h1 {
    max-width: 400px;
  }
  .how-it-work {
    max-width: 95%;
  }
  .landing__advantages {
    padding: 0 0 60px;
  }
  .upload-h1 {
    font-size: 32px;
    text-align: center;
  }
  .upload-misc {
    padding: 6px 9px;
    font-size: 10px;
    gap: 6px;
    top: -145px;
    max-width: 158px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .upload-misc svg {
    width: 15px;
    height: 15px;
  }
  .upload-misc--2 {
    padding: 6px 9px;
    font-size: 12px;
    gap: 6px;
    right: 2px;
    top: 60px;
    transform: rotate(5deg);
  }
  .upload-misc--2 svg {
    width: 20px;
    height: 20px;
  }
  .inputTypeBtn {
    flex-direction: column;
  }
  .inputTypeBtn svg {
    width: 20px;
    height: 20px;
  }
  .formats-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }
  .landing__background-video__wrapper {
    bottom: -80px;
  }
  #fileModal.show {
    pointer-events: none;
  }
  #linkModal.show {
    pointer-events: none;
  }
  .formats-modal-wrapper {
    max-width: 95% !important;
    font-size: 17px !important;
    padding: 44px;
  }
  #fileModal {
    bottom: 28px;
  }
  #fileModal .formats-modal-wrapper {
    padding: 28px;
  }
  #linkModal {
    bottom: 0;
  }
  #linkModal .formats-modal-wrapper {
    padding: 28px;
  }
  .upload-area {
    border: none;
  }
  .upload-window {
    background: url("../assets/img/uploud-mobile-bg.png") no-repeat center/cover;
  }
  .upload-window:before {
    display: none;
  }
  .upload-window:after {
    display: none;
  }
  .uploadDesktop {
    display: none;
  }
  .uploadMobile {
    display: block;
  }
  .upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    margin: 0 auto;
  }
  .upload-icon svg {
    width: 22px;
    height: 22px;
  }
  .upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    gap: 4px;
    margin: 24px 0 8px 0;
    max-width: 100%;
    width: 100%;
    background: #F3287A;
    color: #fff;
    border-radius: 12px;
  }
  .upload-btn svg {
    margin-top: 2px;
  }
  .upload-btn:hover {
    background: #F3287A;
    color: #fff;
  }
  .upload-area, .upload-link-area {
    padding: 24px 12px;
  }
  .upload-container {
    padding: 0;
    height: 288px;
  }
  .upload-container.link-container {
    height: 320px;
  }
  .upload-formats-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    width: 100%;
    background: #F8F8F8;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #151B1F;
  }
  .upload-formats-btn span {
    order: -1;
    width: 18px;
    height: 18px;
    background: #151B1F;
    color: #F8F8F8;
    font-size: 10px;
    margin-top: -2px;
  }
  .link-input {
    margin: 24px 0;
  }
  .link-input input {
    background: #343e43;
  }
  .upload-link-area button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    gap: 4px;
    margin: 0 0 8px 0;
    max-width: 100%;
    width: 100%;
    background: #F3287A;
    color: #fff;
    border-radius: 12px;
  }
  .upload-link-area button svg {
    margin-top: 2px;
  }
  .upload-link-area button:hover {
    background: #F3287A;
    color: #fff;
  }
  .link-btns {
    display: flex;
    flex-direction: column;
  }
  .link-btns #checkLinkButton {
    order: -1;
  }
  .upload-file-result {
    padding: 24px 12px;
    height: auto;
  }
  .result-btns {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  .result-btns button {
    margin: 0;
  }
  .result-btns button:first-child {
    margin-top: 24px;
    height: 53px;
  }
  .result-btns button:nth-child(2), .result-btns button:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    color: #000;
    height: 40px;
  }
  .result-btns button:nth-child(2) svg, .result-btns button:nth-child(3) svg {
    width: 20px;
    height: 20px;
  }
  .upload-wrapper.result .upload-container {
    height: 250px;
    max-width: 95%;
    margin: auto;
  }
  .upload-wrapper.result .upload-misc {
    display: flex;
  }
  .setting-modal {
    top: 80px;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 90%;
  }
  .custom-radio div {
    height: 48px;
  }
  #uploadLoader {
    background: #1E2428 url("../assets/img/uploud-mobile-bg.png") no-repeat center/cover;
  }
  #uploadLoader:before, #uploadLoader:after {
    display: none;
  }
  #backModal .upload-btn {
    background: #fff;
    color: #000;
  }
}/*# sourceMappingURL=upload.css.map */