.home-tab-btn {
  cursor: pointer;
  width: 95%;
  box-sizing: border-box;
  padding: 0 15px;
  margin: 0 auto;
  border: none;
  border-radius: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--secondary-bg);
}
.home-tab-btn i {
  font-size: var(--icon-size);
}
.home-tab-btn p {
  font: var(--primary-font);
}

.loading-tab {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.practicals-list-div {
  flex-grow: 1;
  width: 100%;
  margin: 0;
  padding: 0 0 200px 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.practicals-list-class-header {
  margin: 0 auto 0 20px;
  align-self: flex-start;
  font: var(--secondary-header-font);
}

.practicals-list {
  margin: 10px 0 30px 0;
}

.practicals-list.grid-view {
  border-radius: 15px;
  gap: 20px;
}

.practicals-list.list-view button {
  cursor: pointer;
  height: var(--button-height);
  width: 100%;
  padding: 0 15px;
  border: none;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: var(--primary-font);
  background: var(--secondary-bg);
  transition: border-radius 0.2s ease;
}

.practicals-list.list-view button:active {
  border-radius: calc(var(--button-height)/2);
}

.practicals-list.grid-view button {
  cursor: pointer;
  height: var(--button-height-frid-view);
  width: 100%;
  padding: 0 15px;
  border: none;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  background: var(--secondary-bg);
}

.practicals-list p {
  font: var(--primary-font);
}
.practicals-list i {
  font-size: var(--icon-size);
}