:root {
  --file-container-bg: #eeeeee;
  --file-bg: #f8f8f8;
  --file-border-color: #606060;
  --file-rounded: 6px;
  --file-color: #2b2b2b;
  --table-border-color: #dbdbdb;
  --delete-button-bg: #f53636;
  --delete-button-color: #ffffff;
  --font-size: 15px;
  --font-family: "Roboto Condensed";
  --shadow: 0px 8px 15px -8px rgba(0, 0, 0, 0.5);
}

.file-container {
  width: 100%;
  font-family: var(--font-family);
  .file-upload {
    width: 100%;
    display: flex;
    background-color: var(--file-container-bg);
    border-radius: var(--file-rounded);
    transition: all 0.3s;
    &:hover {
      //box-shadow: var(--shadow);
    }

    > div {
      width: 100%;
      background-color: var(--file-bg);
      padding: 15px 0;
      margin: 10px;
      border-radius: 6px;
      border: 0px dashed var(--file-border-color);
      text-align: center;
      cursor: pointer;
      > i {
        font-size: 3.125em;
        color: var(--file-color);
      }

      > p,
      span,
      div {
        font-size: var(--font-size);
        /*line-height: 30px;*/
        margin: 0px;
        color: var(--file-color);
      }

      > div {
        width: max-content;
        padding: 3px 10px;
        margin: 0 auto;
        border: 1px solid var(--file-border-color);
        border-radius: 6px;
        background: #2b2b2b;
        color: white;
        /* padding: 5px 10px; */
        margin-top: 10px;
        cursor: pointer;
      }

      > div:hover {
        opacity: 0.7;
      }
    }
  }

  > table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size);
    margin-top: 20px;
    & th,
    td {
      border-bottom: 1px solid var(--table-border-color);
      padding: 8px;
      text-align: left;
    }

    > tbody {
      > tr {
        > td {
          &:nth-child(1) {
            font-weight: bold;
          }

          &:nth-child(2) {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 1px;
          }

          &:nth-child(3) {
            text-align: center;
          }

          > img {
            border-radius: 5px;
            box-shadow: var(--shadow);
          }

          &.no-file {
            text-align: center;
            font-weight: normal;
          }

          > i {
            font-size: 1.125em;
          }
        }
      }
    }

    & button {
      background-color: var(--delete-button-bg);
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &:hover {
        //box-shadow: var(--shadow);
      }

      > i {
        color: var(--delete-button-color);
        font-size: 1.125em;
      }
    }
  }
}