@import "../_common-style/navbar";
@import "../_common-style/sidebar";
@import "../_common-style/footer";

// Body
.content-group {
  min-height: var(--min-body-height);

  .content-actions {
    .add-hostel-btn {
      background-color: transparent;
      border: 1px solid var(--primary-color);
      color: var(--primary-color);
      font-weight: 600;

      &:hover {
        background-color: var(--primary-color);
        color: var(--white-color);
      }
    }
  }

  .content-body {
    padding: 16px 16px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

    .hostel-list__header {
      font-size: 2.8rem;
      font-weight: 700;
      margin: 8px 0 24px;
    }
  }
}

.hostel-list__items {
  overflow-x: auto;
}

// Table
.hostel-table {
  width: 100%;
  min-width: 600px;

  .hostel-table__body {
    .hostel-table__body-link {
      .hostel-table__body-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        .hostel-table__body-link-detail,
        .hostel-table__body-btn-edit {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 100%;
          font-size: 2.4rem;
          background-color: transparent;
          height: 100%;
        }

        .hostel-table__body-link-detail {
          color: #008000;

          &:hover {
            color: #00b900;
          }
        }

        .hostel-table__body-btn-edit {
          color: var(--error-color);

          &:hover {
            color: rgb(255, 126, 126);
          }
        }
      }
    }
  }
}

.dataTables_length {
  margin-bottom: 24px;
}

.dataTables_paginate, .dataTables_info {
  padding-top: 20px !important;
}

// Model
.edit-hostel-model {
  .modal-content {
    padding: 8px 16px;
    border-radius: 6px;
  }
}

// Upload file
.upload-file-section {
  .upload-wrapper {
    padding: 16px 16px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

    .form-control {
      font-size: 2rem;
    }
  }

  h1 {
    font-size: 2.4rem;
    font-weight: 600;
    margin: 8px 0 16px 0;
    letter-spacing: 0.02em;
  }

  h3.success {
    color: #008000;
  }

  h3.failed {
    color: rgb(208, 0, 0);
  }
}
