@use '../variables.scss' as vars;

.bottom-panel {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.tab-panel {
  width: 100%;
  height: 100%;
  min-height: 200px;
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
}

.MuiDataGrid-row:nth-child(even) {
  background-color: #f9f9f9;
}

.MuiDataGrid-columnHeaderTitle {
  font-weight: bold !important;
}

.grid-cell {
  display: flex;
}

.grid-text {
  font-size: 14px !important;
  align-self: center;
}

.red-cell-text {
  color: red;
  font-weight: 600;
  font-size: larger;
}

.groups-tags-dialog {
  margin: 1rem;
}

.MuiTabs-flexContainer {
  align-items: start !important;
}

.MuiTab-root {
  text-transform: none !important;
}

.MuiBadge-badge {
  top: 13 !important;
  border: 2px solid white !important;
  padding: 0 4px !important;
}

.row {
  display: flex;
  flex-direction: row;

  @media (max-width: map-get(vars.$breakpoints, lg)) {
    flex-direction: column;
  }

  &.fixed {
    flex-direction: row !important;
  }
}

.w95 {
  width: 95% !important;
}

.control {
  margin: 0.35rem !important;
  margin-left: 0 !important;
  width: 33%;

  @media (max-width: map-get(vars.$breakpoints, lg)) {
    width: auto;
    margin-bottom: 0.75rem !important;
  }

  &.w50 {
    width: 50%;

    @media (max-width: map-get(vars.$breakpoints, lg)) {
      width: auto;
    }
  }

  &.w100 {
    width: 100%;

    @media (max-width: map-get(vars.$breakpoints, lg)) {
      width: auto;
    }
  }
}

.box {
  padding: 0.2rem;
}

.approval-row {
  margin-bottom: 1rem;
  width: 100% !important;

  @media (max-width: map-get(vars.$breakpoints, lg)) {
    margin-bottom: 2rem;
  }

  .row {
    width: 50%;

    @media (max-width: map-get(vars.$breakpoints, lg)) {
      width: auto;
    }

    .control {
      width: 100%;
    }
  }
}

.approval-row:nth-of-type(even) {
  background-color: white;
}

.popup {
  margin: 1.5rem;
  overflow-y: auto;
}

.button {
  margin-right: 0.5rem !important;
}

.drawer-item-selected {
  border-left: 0.2rem solid !important;
  background-color: vars.$main-color !important;
  color: #ffffff !important;

  .MuiSvgIcon-root {
    color: #ffffff !important;
  }
}