//File Field Component
.file-filed {
  .card {
    width: 12rem;
    height: 12rem;

    .card-body {
      .preview {
        height: 11.4rem;
        width: 100%;
        background-repeat: no-repeat;
        background-origin: inherit;
        background-size: cover;
      }

      .remove-btn {
        top: -11px;
        right: -8px;
        font-size: 2rem;
        padding: 0;
        margin: 0;
        background: $red;
        line-height: 0;
        color: $white;
        border-radius: 50%;
      }
    }

    .card-text {
      font-size: 10px;
    }
  }

  margin-bottom: 15px;
  position: relative;

  .reset-field {
    position: absolute;
    bottom: 0;
  }

  .file-extension {
    display: flex;
    justify-content: center;
  }
}

//Multi file filed
.multi-file-filed {
  .card {
    .card-body {
      .preview {
        background-repeat: no-repeat;
        background-origin: inherit;
        background-size: cover;
      }

      .remove-btn {
        top: -11px;
        right: -8px;
        font-size: 2rem;
        padding: 0;
        margin: 0;
        background: red;
        line-height: 0;
        color: white;
        border-radius: 50%;
      }
    }

    .card-text {
      font-size: 10px;
    }
  }
}

.multi-file-filed {
  cursor: pointer;

  .file-name {
    background: rgba(0, 0, 0, 0.5);
    color: $white;
  }

  &.selected {
    border: 4px solid $red;
  }

  .file-extension {
    display: flex;
    justify-content: center;
  }

  .dropdown-toggle::after {
    display: none;
  }
}

.w-192 {
  width: 192px !important;
  height: 192px !important;
}

@media (max-width: 575px) {
  .offcanvas.w-50 {
    width: 100% !important;
  }
}

.file-field-offcanvas {
  .close-btn {
    position: absolute;
    left: -54px;
    top: 10px;
    border-color: $white;
    color: white;
  }
}