* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.head {
  color: rgba(41, 46, 50, 0.8);
  padding-left: 10px;
  padding-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  margin-bottom: 10px;
  background-color: white;
}


.head {
  overflow: hidden;
  /* Hides anything that overflows the boundary of this element */
}

.head h2 {
  user-select: none;
  display: inline-block;
  /* Ensures that the element can be transformed */
  white-space: nowrap;
  /* Keeps the text on a single line */
  transform: translateX(-100%);
  /* Starts the text off-screen to the left */
  animation: slideIn 1.5s forwards;
  /* Adjust '2s' to control the speed of the animation */
}

.head div {
  display: inline-block;
  /* Ensures that the element can be transformed */
  white-space: nowrap;
  /* Keeps the text on a single line */
  transform: translateX(100%);
  /* Starts the text off-screen to the left */
  animation: slideInRight 1.5s forwards;
  /* Adjust '2s' to control the speed of the animation */
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    /* Start from off-screen left */
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    /* End at the normal position */
    opacity: 100;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    /* Start from off-screen left */
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    /* End at the normal position */
    opacity: 100;
  }
}


#topbar {
  display: flex;
  flex-direction: row;
  height: 57px;
  margin-bottom: 9px;
  animation: slideUp 1.5s forwards;
  gap: 10px;
  /* Adjust '2s' to control the speed of the animation */
}

@keyframes slideUp {
  from {
    transform: translateY(-100%);
    /* Start from off-screen left */
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    /* End at the normal position */
    opacity: 100;
  }
}

.restartButton {
  width: 60px;
  background-color: white;
  border: none;
  border: solid 1px rgba(94, 94, 94, 0.18);
  color: #000000a7;
  border-radius: 3px;
  cursor: pointer;
}

.restartButton:hover {
  color: #000000;
  background-color: rgb(243, 243, 243);
}


.transitionButton {
  background-color: #00a79d;
  color: white;
  font-weight: 100;
}




.example-radio-group {
  display: flex;
  flex-direction: column;
  margin: 15px 0;
  align-items: flex-start;
}

.example-radio-button {
  margin: 5px;
}




.mat-mdc-form-field+.mat-mdc-form-field {
  margin-left: 8px;
}

.mat-button-toggle-group .mat-button-toggle-button {
  height: 100% !important;
}

.toggleContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.5%;
  width: 100%;
}

.filterButton mat-icon {
  transform: scale(0.8);
  margin-right: -6px;
}

.detailsButton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70%;
  font-weight: 500;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  gap: 8px;
  user-select: none;
  padding-left: 10px;
}

.filterButton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70%;

  background-color: rgb(255, 255, 255);
  cursor: pointer;
  padding-left: 15px;
  padding-right: 15px;
  border: solid 1px rgba(0, 0, 0, 0.124);
  border-radius: 8px;
  font-weight: 500;
  gap: 3px;
  /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
}

.clearFilter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70%;

  background-color: rgb(255, 255, 255);
  cursor: pointer;
  padding-left: 15px;
  padding-right: 15px;
  border: solid 1px rgba(0, 0, 0, 0.124);
  border-radius: 8px;
  font-weight: 500;
  gap: 3px;
}

.clearFilter:hover {
  background-color: #ff370016;
}

.filterButton:hover {
  background-color: rgb(240, 240, 240);
}

.filterContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f5f5f5;
  border: solid rgba(0, 0, 0, 0.1) 1px;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  height: 60px;
  padding-left: 10px;
  padding-right: 15px;
  justify-content: space-between;
}

.left, .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  gap: 9px;
}


.split {
  height: 100%;
  border-right: solid 1px rgba(0, 0, 0, 0.124);
}

.filter {
  margin-top: 0.5%;
  margin-left: 1%;
}



.checkbox {
  margin: 0 0.5%;
}


.dateButton {
  height: 70%;
  width: 59px;
  background-color: rgb(255, 255, 255);
  border: solid 1px rgba(0, 0, 0, 0.124);
  border-radius: 0px 8px 8px 0px;
  border-left: none;
}

.dateButton mat-icon {
  transform: scale(0.8);
  opacity: 0.75;
  margin-right: 0px;
}

.dateButton:hover>mat-icon {
  opacity: 1;
}

.dateButton:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.editButton {
  height: 59px;
  width: 59px;
  background-color: rgba(0, 0, 0, 0.04);
  border: none;
  border-top-right-radius: 4px;
  margin-right: 15px;
}

.editButton:hover {
  height: 59px;
  width: 59px;
  background-color: rgba(0, 0, 0, 0.04);
  border-top-right-radius: 4px;
  background-color: rgba(0, 0, 0, 0.08);
}

.editButton:checked {
  height: 59px;
  width: 59px;
  background-color: rgba(0, 0, 0, 0.04);
  border-top-right-radius: 4px;
  background-color: red;
}

.deleteButton {
  height: 59px;
  width: 59px;
  background-color: rgba(0, 0, 0, 0.04);
  border-width: 1px;
  border: none;
  border-top-right-radius: 4px;
  margin-right: 15px;
  margin-left: -15px;
}

.deleteButton:hover {
  height: 59px;
  width: 59px;
  background-color: rgba(0, 0, 0, 0.04);
  border-width: 2px;
  border-top-right-radius: 4px;
  background-color: rgba(0, 0, 0, 0.08);
}

.deleteButton:checked {
  height: 59px;
  width: 59px;
  background-color: rgba(0, 0, 0, 0.04);
  border-width: 2px;
  border-top-right-radius: 4px;
  background-color: red;
}

/* .datePickerContainer{
  height: 20px;
  width: 400px;
 } */
/*
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #d56100;
}

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: #d56100;
} */

/* .mat-button-toggle{
  background-color: #306cee;
  color: #ffffff;
}

.mat-button-toggle:hover {
  background-color: transparent;
  color: #1100ff !important;
} */

.mat-button-toggle-checked {
  background-color: #ef6c00;
  color: white;
}

.dot-badge {
  background-color: #00a79d;
  color: #00a79d;
  width: 10x;
  /* Breitedes Punkts */
  height: 10px;
  /* Höhe des Punkts */
  border-radius: 50%;
  /* Rundung des Punkts */
}

/* ::ng-deep .mat-calendar{
  background: white;
} */

/* ::ng-deep .mat-calendar-body-label{ */
/* color: white; */
/* }

::ng-deep .mat-calendar-cell-content{
   color: #d56100;
} */