.drop-area-wrapper {
  width: 100%;
  border: none; }
  .rtl .drop-area-wrapper .upload-instructions-popup {
    right: calc(100% + 12px); }
  .ltr .drop-area-wrapper .upload-instructions-popup {
    left: calc(100% + 12px); }
  @media (max-width: 1024px) {
    .drop-area-wrapper {
      margin: 22px 0;
      display: flex;
      flex-direction: column-reverse; } }
  .drop-area-wrapper .drop-area {
    width: 100%;
    height: 242px;
    margin-bottom: 28px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23B6B6B6FF' stroke-width='3' stroke-dasharray='10%2c 10' stroke-dashoffset='58' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .drop-area-wrapper .drop-area {
        border: 3px dashed #D6D6D6; } }
    @media (max-width: 1024px) {
      .drop-area-wrapper .drop-area {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        background-image: none; } }
    .drop-area-wrapper .drop-area.highlight {
      background-color: rgba(170, 170, 170, 0.12); }
    .drop-area-wrapper .drop-area label {
      margin-bottom: 0;
      position: relative;
      display: inline-flex;
      cursor: pointer;
      font-weight: 600; }
      .drop-area-wrapper .drop-area label input[type="file"] {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer; }
      .drop-area-wrapper .drop-area label button {
        z-index: 3; }
        @media (max-width: 1024px) {
          .drop-area-wrapper .drop-area label button {
            margin: 0; } }
      .drop-area-wrapper .drop-area label .upload-instructions-popup {
        display: none; }
        @media (max-width: 1024px) {
          .drop-area-wrapper .drop-area label .upload-instructions-popup {
            display: block;
            position: absolute;
            top: calc(50% - 12px);
            z-index: 1; }
            .drop-area-wrapper .drop-area label .upload-instructions-popup .instructions {
              display: block;
              width: 220px;
              height: auto;
              padding: 4px 11px 8px;
              color: #FFFFFF;
              background-color: #424242;
              border-radius: 2px;
              box-shadow: 1px 1px 18px 0 rgba(0, 0, 0, 0.34);
              position: absolute;
              top: calc(100% + 4px);
              left: 50%;
              transform: translateX(-50%);
              display: none; }
              .drop-area-wrapper .drop-area label .upload-instructions-popup .instructions::after {
                content: "";
                border-width: 6px;
                border-style: solid;
                border-color: transparent transparent #424242 transparent;
                position: absolute;
                bottom: calc(100% - 1px);
                left: calc(50% - 6px); }
            .drop-area-wrapper .drop-area label .upload-instructions-popup .icon-info {
              font-size: 1.25em;
              color: #707070; }
              .drop-area-wrapper .drop-area label .upload-instructions-popup .icon-info:hover ~ .instructions {
                display: block; } }
    @media (max-width: 1024px) {
      .drop-area-wrapper .drop-area .upload-instructions-text {
        display: none; } }
  .drop-area-wrapper .error-message {
    color: #FF3A00;
    display: none; }
  .drop-area-wrapper .added-file {
    display: flex;
    align-items: center;
    margin-bottom: 11px; }
    .drop-area-wrapper .added-file .icon-file {
      font-size: 1.5em;
      color: #424242; }
    .drop-area-wrapper .added-file .progress {
      margin: 0 14px; }
      @media (max-width: 320px) {
        .drop-area-wrapper .added-file .progress {
          width: 100%; } }
    .drop-area-wrapper .added-file .progress-bar {
      width: 254px;
      height: 5px;
      border-radius: 2.5px;
      background-color: #E3E3E3;
      position: relative; }
      @media (max-width: 320px) {
        .drop-area-wrapper .added-file .progress-bar {
          width: 100%; } }
      .drop-area-wrapper .added-file .progress-bar-filled {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #357875;
        width: 0px;
        height: 100%;
        border-radius: 2.5px; }
    .drop-area-wrapper .added-file .clear-upload {
      position: relative;
      width: 28px;
      height: 28px;
      padding: 6px;
      font-size: 15px;
      border-radius: 50%;
      background-color: #EAEAEA;
      border: none;
      top: 2px;
      left: 0px; }
      .drop-area-wrapper .added-file .clear-upload .icon-close {
        font-weight: bold; }