.wrp-media-file-ui {
  width: fit-content;
  height: auto;
  margin: auto; }
  .wrp-media-file-ui .cntnt-media-file-ui {
    width: 160px;
    height: 160px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0px 4px 4px 0px rgba(80, 80, 80, 0.180392);
    position: relative; }
    .wrp-media-file-ui .cntnt-media-file-ui .label-media-file-ui {
      width: 100%;
      height: 100%;
      cursor: pointer;
      border-radius: 100px;
      overflow: hidden;
      display: block; }
    .wrp-media-file-ui .cntnt-media-file-ui .img-media-file-ui {
      width: 100%;
      height: 100%;
      object-fit: cover;
      padding: 5px;
      border-radius: 300px; }
    .wrp-media-file-ui .cntnt-media-file-ui .loading-media-file-ui {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      width: 32px;
      height: 32px;
      margin: auto; }
    .wrp-media-file-ui .cntnt-media-file-ui .action-media-file-ui {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      bottom: 0;
      top: auto;
      width: 100%;
      max-width: 80%;
      margin: auto;
      left: 0;
      right: 0; }
      .wrp-media-file-ui .cntnt-media-file-ui .action-media-file-ui .bt-icon-media-file-ui {
        border: none;
        font-size: 14px;
        color: #16283c;
        outline: none;
        background: #ffffff;
        box-shadow: none;
        width: 24px;
        height: 24px;
        padding: 0;
        text-align: center;
        margin: 0;
        border-radius: 120px;
        box-shadow: 0px 4px 4px 0px rgba(80, 80, 80, 0.180392);
        cursor: pointer; }
        .wrp-media-file-ui .cntnt-media-file-ui .action-media-file-ui .bt-icon-media-file-ui .icon {
          vertical-align: sub; }
  .wrp-media-file-ui .txt-error-media-file-ui {
    font-size: 12px;
    color: #dc3545;
    font-weight: 500;
    text-align: center; }
  .wrp-media-file-ui[data-mode="default"] .txt-error-media-file-ui {
    display: block; }
  .wrp-media-file-ui[data-mode="default"] .loading-media-file-ui {
    display: none; }
  .wrp-media-file-ui[data-mode="default"] .img-media-file-ui {
    display: block; }
  .wrp-media-file-ui[data-mode="default"] .action-media-file-ui .bt-delete-media-file-ui {
    display: none; }
  .wrp-media-file-ui[data-mode="normal"] .txt-error-media-file-ui {
    display: none; }
  .wrp-media-file-ui[data-mode="normal"] .loading-media-file-ui {
    display: none; }
  .wrp-media-file-ui[data-mode="normal"] .img-media-file-ui {
    display: block; }
  .wrp-media-file-ui[data-mode="loading"] .txt-error-media-file-ui {
    display: none; }
  .wrp-media-file-ui[data-mode="loading"] .loading-media-file-ui {
    display: block; }
  .wrp-media-file-ui[data-mode="loading"] .label-media-file-ui {
    display: none; }
  .wrp-media-file-ui[data-mode="loading"] .action-media-file-ui {
    display: none; }
  .wrp-media-file-ui[data-mode="error"] .txt-error-media-file-ui {
    display: block; }
  .wrp-media-file-ui[data-mode="error"] .loading-media-file-ui {
    display: none; }

.d-none {
  display: none; }

.wrp-upload-media-multiple {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: #f1f3f5;
  border-radius: 10px;
  padding: 20px;
  align-items: center;
  margin-bottom: 20px;
  width: 100%; }
  .wrp-upload-media-multiple .itm-media-multiple {
    width: 100%;
    max-width: calc(25% - 8px);
    height: 220px;
    position: relative;
    box-shadow: 0px 4px 4px 0px rgba(80, 80, 80, 0.1); }
    .wrp-upload-media-multiple .itm-media-multiple .content-media-multiple {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
      outline: none;
      border: none;
      padding: 0;
      cursor: pointer; }
      .wrp-upload-media-multiple .itm-media-multiple .content-media-multiple .wrp-img-media-multiple {
        width: 100%;
        height: 100%; }
        .wrp-upload-media-multiple .itm-media-multiple .content-media-multiple .wrp-img-media-multiple .img-media-multiple {
          width: 100%;
          height: 100%;
          object-fit: cover; }
    .wrp-upload-media-multiple .itm-media-multiple .info-media-multiple {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: fit-content;
      padding: 15px 15px;
      background: linear-gradient(1deg, #1A3C51, rgba(26, 60, 81, 0.878431), rgba(26, 60, 81, 0.6), transparent);
      border-radius: 0px 0px 10px 10px; }
      .wrp-upload-media-multiple .itm-media-multiple .info-media-multiple .title-media-multiple {
        align-items: center;
        gap: 5px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: white;
        font-size: 14px;
        text-align: left; }
        .wrp-upload-media-multiple .itm-media-multiple .info-media-multiple .title-media-multiple .icon {
          width: 20px;
          height: 20px;
          color: white;
          vertical-align: sub;
          margin-right: 7px; }
    .wrp-upload-media-multiple .itm-media-multiple .bt-media-multiple {
      position: absolute;
      top: -5px;
      right: -5px;
      background: #1a3c51d7;
      padding: 0;
      width: 25px;
      height: 25px;
      border-radius: 50px;
      outline: none;
      border: none;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center; }
      .wrp-upload-media-multiple .itm-media-multiple .bt-media-multiple .icon {
        color: white;
        width: 14px;
        height: 14px;
        font-size: 12px; }
    .wrp-upload-media-multiple .itm-media-multiple .bt-full-screen-media-multiple {
      display: none;
      background: transparent;
      position: absolute;
      top: 14px;
      right: 10px; }
      .wrp-upload-media-multiple .itm-media-multiple .bt-full-screen-media-multiple .icon {
        width: 24px;
        height: 24px;
        color: white; }
    .wrp-upload-media-multiple .itm-media-multiple.full-screen-media-multiple {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background: rgba(0, 0, 0, 0.726);
      max-width: none;
      max-height: none;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center; }
      .wrp-upload-media-multiple .itm-media-multiple.full-screen-media-multiple .content-media-multiple {
        width: 80%;
        height: auto;
        max-height: 85%;
        pointer-events: none; }
      .wrp-upload-media-multiple .itm-media-multiple.full-screen-media-multiple .info-media-multiple {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 10px;
        padding-right: 40px;
        background: transparent; }
      .wrp-upload-media-multiple .itm-media-multiple.full-screen-media-multiple .bt-media-multiple {
        display: none; }
      .wrp-upload-media-multiple .itm-media-multiple.full-screen-media-multiple .bt-full-screen-media-multiple {
        display: block; }
  .wrp-upload-media-multiple .upload-media-multiple-bt {
    width: 100%;
    max-width: calc(25% - 8px);
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed rgba(93, 123, 145, 0.5);
    border-radius: 10px;
    box-shadow: 0px 4px 4px 0px rgba(80, 80, 80, 0.1);
    margin: 0;
    cursor: pointer; }
    .wrp-upload-media-multiple .upload-media-multiple-bt .icon {
      width: 100px;
      height: 100px;
      color: rgba(26, 60, 81, 0.65098); }
  .wrp-upload-media-multiple .loading-upload-media-multiple {
    width: 100%;
    max-width: calc(25% - 8px);
    height: 220px;
    background: transparent;
    border: none;
    position: relative;
    display: none; }
    .wrp-upload-media-multiple .loading-upload-media-multiple.show-loading-upload-media-multiple {
      display: block; }
    .wrp-upload-media-multiple .loading-upload-media-multiple .wrp-spiner {
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }
      .wrp-upload-media-multiple .loading-upload-media-multiple .wrp-spiner .spinner-ui {
        border: 4px solid #c1c1c1;
        border-top: 4px solid #23272b;
        border-bottom: 4px solid #23272b;
        border-right: 4px solid #23272b; }

.material-symbols-light--upload-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.616 19q-.691 0-1.153-.462T5 17.384v-1.923q0-.213.143-.356t.357-.144t.357.144t.143.356v1.923q0 .231.192.424t.423.192h10.77q.23 0 .423-.192t.192-.424v-1.923q0-.213.143-.356t.357-.144t.357.144t.143.356v1.923q0 .691-.462 1.153T17.384 19zM11.5 6.927L9.529 8.898q-.146.146-.347.153t-.366-.159q-.16-.165-.163-.353q-.003-.189.163-.354l2.618-2.62q.132-.13.268-.183q.137-.053.298-.053t.298.053t.268.184l2.618 2.619q.147.146.154.344q.006.198-.153.363q-.166.166-.357.169t-.357-.163L12.5 6.927v8.15q0 .214-.143.357t-.357.143t-.357-.143t-.143-.357z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%; }

/*# sourceMappingURL=ui-ulpoad-media.css.map */