.file-field {
  --gap: 4.2666666667vw;
  --root-padding: 4.2666666667vw;
  --flex-direction: column;
  --border-radius: 5.8666666667vw;
  --align-items: flex-start;
}
@media (min-width: 720px) {
  .file-field {
    --gap: 1.25vw;
  }
}
@media (min-width: 720px) {
  .file-field {
    --root-padding: 1.25vw;
  }
}
@media (min-width: 720px) {
  .file-field {
    --flex-direction: row;
  }
}
@media (min-width: 720px) {
  .file-field {
    --border-radius: 1.71875vw;
  }
}
@media (min-width: 720px) {
  .file-field {
    --align-items: center;
  }
}
@media (min-width: 1281px) {
  .file-field {
    --gap: 0.8333333333vw;
  }
}
@media (min-width: 1281px) {
  .file-field {
    --root-padding: 0.8333333333vw;
  }
}
@media (min-width: 1281px) {
  .file-field {
    --flex-direction: row;
  }
}
@media (min-width: 1281px) {
  .file-field {
    --border-radius: 1.1458333333vw;
  }
}
@media (min-width: 1281px) {
  .file-field {
    --align-items: center;
  }
}
@media (min-width: 2400px) {
  .file-field {
    --gap: 20px;
  }
}
@media (min-width: 2400px) {
  .file-field {
    --root-padding: 20px;
  }
}
@media (min-width: 2400px) {
  .file-field {
    --flex-direction: row;
  }
}
@media (min-width: 2400px) {
  .file-field {
    --border-radius: 27.5px;
  }
}
@media (min-width: 2400px) {
  .file-field {
    --align-items: center;
  }
}
.file-field {
  display: flex;
  flex-direction: var(--flex-direction);
  gap: var(--gap);
  padding: var(--root-padding);
  border-radius: var(--border-radius);
  width: 100%;
  border: 1px dashed var(--color-elephant-bone);
  background-color: var(--color-clear-white);
  align-items: var(--align-items);
}
.file-field__input {
  display: none;
}
.file-field__content {
  --gap: 4.2666666667vw;
}
@media (min-width: 720px) {
  .file-field__content {
    --gap: 1.25vw;
  }
}
@media (min-width: 1281px) {
  .file-field__content {
    --gap: 0.8333333333vw;
  }
}
@media (min-width: 2400px) {
  .file-field__content {
    --gap: 20px;
  }
}
.file-field__content {
  display: flex;
  gap: var(--gap);
  width: 100%;
  align-items: center;
  position: relative;
}
.file-field__image {
  --border-radius: 2.1333333333vw;
  --width: 8.5333333333vw;
}
@media (min-width: 720px) {
  .file-field__image {
    --border-radius: 0.625vw;
  }
}
@media (min-width: 720px) {
  .file-field__image {
    --width: 2.5vw;
  }
}
@media (min-width: 1281px) {
  .file-field__image {
    --border-radius: 0.4166666667vw;
  }
}
@media (min-width: 1281px) {
  .file-field__image {
    --width: 1.6666666667vw;
  }
}
@media (min-width: 2400px) {
  .file-field__image {
    --border-radius: 10px;
  }
}
@media (min-width: 2400px) {
  .file-field__image {
    --width: 40px;
  }
}
.file-field__image {
  width: var(--width);
  height: var(--width);
  flex-shrink: 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}
.file-field__image_type_pdf {
  --padding: 1.0666666667vw;
}
@media (min-width: 720px) {
  .file-field__image_type_pdf {
    --padding: 0.3125vw;
  }
}
@media (min-width: 1281px) {
  .file-field__image_type_pdf {
    --padding: 0.2083333333vw;
  }
}
@media (min-width: 2400px) {
  .file-field__image_type_pdf {
    --padding: 5px;
  }
}
.file-field__image_type_pdf {
  background-color: #fa0f00;
  padding: var(--padding);
}
.file-field__image_type_pptx {
  border-radius: 0;
}
.file-field__icon {
  width: 100%;
  height: 100%;
}
.file-field__text {
  --height: 7.4666666667vw;
}
@media (min-width: 720px) {
  .file-field__text {
    --height: 3.125vw;
  }
}
@media (min-width: 1281px) {
  .file-field__text {
    --height: 2.0833333333vw;
  }
}
@media (min-width: 2400px) {
  .file-field__text {
    --height: 50px;
  }
}
.file-field__text {
  display: flex;
  align-items: center;
  height: var(--height);
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-field__file-size {
  color: var(--color-wetty-asphalt);
  flex-shrink: 0;
}
.file-field__button {
  --width: 100%;
}
@media (min-width: 720px) {
  .file-field__button {
    --width: 12.5vw;
  }
}
@media (min-width: 1281px) {
  .file-field__button {
    --width: 8.3333333333vw;
  }
}
@media (min-width: 2400px) {
  .file-field__button {
    --width: 200px;
  }
}
.file-field__button {
  width: var(--width);
  flex-shrink: 0;
}
.file-field__hint {
  top: calc(100% - var(--root-padding) / 2);
  right: var(--root-padding);
}
.file-field_selected {
  border: 1px solid var(--color-green-walley);
}
.file-field_error {
  border: 1px solid var(--color-error);
}
.file-field_big-photo .file-field__image {
  --width: 17.0666666667vw;
}
@media (min-width: 720px) {
  .file-field_big-photo .file-field__image {
    --width: 5vw;
  }
}
@media (min-width: 1281px) {
  .file-field_big-photo .file-field__image {
    --width: 3.3333333333vw;
  }
}
@media (min-width: 2400px) {
  .file-field_big-photo .file-field__image {
    --width: 80px;
  }
}
.file-field_big-photo .file-field__image {
  border-radius: 50%;
}