.greeting h1 {
  text-align: center;
  margin: 36px 0;
  color: #003566;
}
.table {
  background-color: white;
  border: 1px solid #ddd;
  margin-bottom: 2rem;
  border-radius: 4px;
  border-collapse: collapse;
  overflow: hidden;
}
.table-operations {
  width: 60%;
  margin: 0 auto 32px;
}
.table-operations__filter {
  float: left;
}
.table-operations__serach {
  float: right;
}

.table-operations input,
.table-operations select {
  width: 30rem;
  padding: 6px 16px;
  border-radius: 5px;
  border: 1px solid #aaa;
  outline-color: 1px solid #415a77;
}

.table-operations input {
  font-size: 1.4rem;
}

.table__row--head .table__title {
  font-size: 1.4rem;
  font-weight: 600;
  background-color: #415a77;
  color: #e0e1dd;
  text-transform: uppercase;
  border: 1px solid #ddd;
  letter-spacing: 1px;
  padding: 1.5rem;
  cursor: pointer;
}
.table__row--head .table__title:hover {
  background-color: #375271;
}

.table__row--head .table__title img {
  width: 1.5rem;
  height: 1.6rem;
  vertical-align: middle;
}

.table__row .table__data {
  font-size: 1.5rem;
  padding: 1rem 1.5rem;
  color: #081420;
  border: 1px solid #ddd;
  border-bottom: 1px solid #e0e1dd;
  text-align: center;
}
.table__row:nth-child(even) {
  background-color: #f7f7f7;
}
.course {
  display: inline-block;
  font-size: 1.2rem;
  margin: 2px;
  background-color: #e0e1dd;
  color: #1b263b;
  padding: 2px 8px;
  border-radius: 4px;
}

.table__actions .btn:not(:last-child) {
  margin-bottom: 8px;
  margin-right: 8px;
}
.btn--add {
  font-size: 1.8rem;
  padding: 8px 18px;
  background-color: #2b9929;
  margin-bottom: 3rem;
}
.btn--add:hover {
  background-color: #0e8f0b;
}
.btn--edit {
  background-color: #219ebc;
}
.btn--edit:hover {
  background-color: #0b89a9;
}
.btn--delete {
  background-color: #f11;
}
.btn--delete:hover {
  background-color: #d60e0e;
}

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  background-color: white;
  padding: 3rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.modal-student-form {
  width: 70%;
}
.modal-delete {
  width: 50rem;
}
.modal-title {
  margin-bottom: 1.4rem;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}
.close-modal {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  font-size: 5rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}
.modal-form {
  margin-top: 3.6rem;
}
.input-box {
  margin-bottom: 2rem;
}
.input-box .error {
  display: inline-block;
  color: #f11;
  text-wrap: wrap;
}
.input-box label {
  display: inline-block;
  width: 12rem;
  font-size: 1.6rem;
}
.input-box .form-input,
.input-box select {
  width: 50%;
  font-size: 1.6rem;
  padding: 6px 12px;
  border: 1px solid #333;
  outline: 0;
  border-radius: 4px;
  margin-right: 1rem;
}

.form-controls {
  margin-top: 4rem;
}
.form-cancel,
.form-delete,
.form-create {
  float: right;
  font-size: 1.6rem;
  padding: 8px 18px;
  letter-spacing: 0.9px;
  border: 1px solid #777;
  border-radius: 4px;
}
.form-cancel {
  margin-right: 2rem;
  background-color: #eee;
}
.form-create {
  background-color: #448643;
  color: #fff;
}
.form-delete {
  background-color: #f11;
  color: #fff;
}
.form-cancel:hover {
  background-color: #ddd9d9;
}
.form-create:hover {
  background-color: #2b9929;
}

.delete-message {
  font-size: 1.8rem;
  margin-left: 1rem;
  margin-bottom: 4rem;
}

.checkbox-group {
  display: inline-block;
  width: 50%;
  max-height: 15rem;
  padding: 1.4rem 1.8rem;
  vertical-align: middle;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow-y: auto;
}

.checkbox-item {
  margin-bottom: 1rem;
}

.checkbox-item:last-child {
  margin: 0;
}

.checkbox-item label {
  display: inline;
}

.checkbox-item input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #fca311;
}

#course-description {
  vertical-align: middle;
}

/*  */
.no-data-found {
  text-align: center;
  padding: 2rem 1.8rem;
}