*,
html {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body .refreshLineContainer {
  width: 20rem;
  height: 4px;
  background-color: #e0e0e0;
  overflow: hidden;
  border-radius: 0 0 1rem 1rem;
}
body .refreshLineContainer #refreshLine {
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.2s linear;
  width: 100%;
}
body main {
  width: 90vw;
  margin: 0 0 5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body main article {
  width: 100%;
  margin: 0.5rem;
  padding: 0.5rem;
}
body main article h1 {
  font-size: 3rem;
  font-weight: lighter;
  color: black;
}
body main article h2 {
  font-size: 2.5rem;
  font-weight: lighter;
  color: black;
}
body main article h3 {
  font-size: 2.25rem;
  font-weight: lighter;
  color: black;
}
body main article p {
  font-size: 1.5rem;
  color: black;
}
body main article a {
  font-size: 1rem;
  font-weight: lighter;
  color: black;
  text-decoration: none;
}
body main article div.compLinks {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
body main article div.compLinks div.compLink {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0.5rem;
  background-color: aliceblue;
  border-radius: 1rem;
  box-shadow: inset 0px 0px 7px 2px rgb(226, 237, 245);
}
body main article div.compLinks div.compLink a {
  margin: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  transition-duration: 0.2s;
}
body main article div.compLinks div.compLink a:hover {
  color: gray;
}
body main article div.showHeader {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  gap: 1.5rem;
}
body main article div.showHeader p {
  margin-right: -1rem;
  font-size: 1rem;
  font-weight: lighter;
  color: black;
}
body main article div.showHeader button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  transition: all 0.7s ease-in-out;
}
body main article div.showHeader button:hover {
  cursor: pointer;
  transform: rotate(-450deg);
}
body main article div.showHeader label.toggleTabletModeSwitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
body main article div.showHeader label.toggleTabletModeSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}
body main article div.showHeader label.toggleTabletModeSwitch span.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
body main article div.showHeader label.toggleTabletModeSwitch span.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
body main article div.showHeader label.toggleTabletModeSwitch input:checked + span.slider {
  background-color: #2196f3;
}
body main article div.showHeader label.toggleTabletModeSwitch input:focus + span.slider {
  box-shadow: 0 0 1px #2196f3;
}
body main article div.showHeader label.toggleTabletModeSwitch input:checked + span.slider:before {
  transform: translateX(26px);
}
body main article div.showHeader form.deleteCompForm {
  margin-left: auto;
}
body main article div.showHeader form.deleteCompForm input.delete-button {
  background-color: #dc3545;
  color: white;
  font-weight: bold;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: 0.2s;
}
body main article div.showHeader form.deleteCompForm input.delete-button:hover {
  background-color: #c82333;
}
body main article div.showHeader form.deleteUserForm {
  margin-left: auto;
}
body main article div.showHeader form.deleteUserForm input.delete-button {
  background-color: #dc3545;
  color: white;
  font-weight: bold;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: 0.2s;
}
body main article div.showHeader form.deleteUserForm input.delete-button:hover {
  background-color: #c82333;
}
body main article div.showHeader form.logOutUserForm input.log-out-button {
  background-color: #0f03bb;
  color: white;
  font-weight: bold;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: 0.2s;
}
body main article div.showHeader form.logOutUserForm input.log-out-buttonn:hover {
  background-color: #0b02a9;
}
body main article .line {
  border-bottom: 1px solid black;
  margin: 2rem 0rem 0rem 0rem;
}
body main article div.show {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}
body main article div.show div {
  width: 100%;
  height: 8rem;
  margin: 0;
  padding: 0;
  display: grid;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  grid-template-columns: 6rem 8rem auto 2rem;
  grid-template-areas: "message startNR values next";
}
body main article div.show div div.listMessage {
  grid-area: message;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
body main article div.show div div.listMessage p {
  font-size: x-large;
}
body main article div.show div div.listStartNR {
  grid-area: startNR;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
body main article div.show div div.listStartNR p {
  font-size: 5rem;
}
body main article div.show div div.listValues {
  width: auto;
  grid-area: values;
  border-radius: 1rem;
  display: grid;
  grid-template-columns: 5fr 3fr 10fr;
  align-items: center;
}
body main article div.show div div.listValues p {
  font-size: xx-large;
  padding: 0.5rem;
}
body main article div.show div div.next {
  grid-area: next;
  display: flex;
  justify-content: center;
  align-items: center;
}
body main article div.show div div.next form {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
body main article div.show div div.next form input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  color: black;
  cursor: pointer;
  transition-duration: 0.2s;
  font-size: 2rem;
}
body main article div.show div div.next form input:hover {
  color: gray;
}
body main article div.smallShow {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0;
  gap: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
body main article div.smallShow div {
  width: 10rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body main article div.smallShow div p.divStartNR {
  font-size: 3rem;
  margin: 0;
  padding: 0;
}
body main article div.miniShow {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0;
  gap: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
body main article div.miniShow div {
  width: 5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
body main article div.miniShow div p {
  font-size: 2rem;
}
body main article .editCompForms {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}
body main article .editCompForms form.editCompForm {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
body main article .editCompForms form.editCompForm label {
  text-align: right;
}
body main article .editCompForms form.editCompForm input {
  width: 10rem;
}
body main article table.showAllDogsTable {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 1.125rem;
}
body main article table.showAllDogsTable input {
  padding: 0.25rem;
}
body main article table.showAllDogsTable input.submitButton {
  border: none;
}
body main article table.showAllDogsTable tr {
  transition: 0.2s;
}
body main article table.showAllDogsTable tr th {
  padding: 0.5rem;
  text-align: left;
  background-color: rgba(11, 117, 78, 0.8784313725);
  color: white;
}
body main article table.showAllDogsTable tr td {
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.2);
}
body main article table.showAllDogsTable tr td form input.moveButton {
  color: black;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: 0.2s;
}
body main article table.showAllDogsTable tr td form input.moveButton:hover {
  color: #737373;
}
body main article table.showAllDogsTable tr td.tdStartNr {
  font-weight: bold;
  font-size: x-large;
}
body main article table.showAllDogsTable tr td form.sendLast input {
  margin: 0;
  padding: 0;
  background-color: transparent;
  font-size: 1.25rem;
  transition: 0.2s;
}
body main article table.showAllDogsTable tr td form.sendLast input:hover {
  color: #737373;
}
body main article table.showAllDogsTable tr:hover {
  background-color: #ddd;
}
body main article #toggleDogForm {
  width: 5rem;
  margin-top: 1.5rem;
  font-size: large;
}
body main article #newDogForm {
  display: none;
  margin-top: 1.5rem;
  gap: 1.5rem;
}
body main article div.userLogin {
  width: 40rem;
  height: 35rem;
  margin: 5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  justify-self: center;
  align-items: center;
  align-self: center;
  gap: 3rem;
  border-radius: 2rem;
  box-shadow: inset 0px 0px 7px 2px rgb(226, 237, 245);
  background-color: aliceblue;
}
body main article div.userLogin h1 {
  font-size: 10rem;
  font-weight: lighter;
  color: black;
}
body main article div.userLogin form.loginForm {
  width: 80%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  justify-content: center;
  gap: 1rem;
}
body main article div.userLogin form.loginForm div {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: row;
  justify-content: space-between;
}
body main article div.userLogin form.loginForm div label {
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  color: black;
}
body main article div.userLogin form.loginForm input {
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  color: black;
}
body main article div.userManagement {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 5rem;
}
body main article div.userManagement .showAdminView {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #148614;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: 0.2s;
}
body main article div.userManagement .showAdminView a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
body main article div.userManagement .showAdminView:hover {
  background-color: #0f6f0f;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

.state0 {
  background-color: rgb(255, 255, 180);
  box-shadow: inset 0px 0px 7px 2px rgb(232, 232, 151);
}

.state1 {
  background-color: rgb(180, 255, 180);
  box-shadow: inset 0px 0px 7px 2px rgb(150, 231, 150);
}

.state2 {
  background-color: rgb(255, 201, 201);
  box-shadow: inset 0px 0px 7px 2px rgb(235, 160, 160);
}

#todaysEvent,
#upcomingEvents {
  margin: 1.5rem 0 2rem 0;
  padding: 1.5rem 2rem;
  background: #f8fafc;
  border-radius: 1rem;
  min-width: 300px;
  max-width: 900px;
  overflow-x: auto;
}
#todaysEvent table,
#upcomingEvents table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  font-size: 1.1rem;
}
#todaysEvent th,
#todaysEvent td,
#upcomingEvents th,
#upcomingEvents td {
  padding: 0.75rem 1rem;
  text-align: left;
}
#todaysEvent th,
#upcomingEvents th {
  background: rgba(11, 117, 78, 0.8784313725);
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid #e1e1e1;
  text-decoration: none;
}
#todaysEvent th a,
#upcomingEvents th a {
  color: #ffffff;
  text-decoration: none;
}
#todaysEvent tr,
#upcomingEvents tr {
  border-bottom: 1px solid #eaeaea;
  transition: background 0.2s;
}
#todaysEvent tr:nth-child(even),
#upcomingEvents tr:nth-child(even) {
  background: #f3f7fa;
}
#todaysEvent tr:hover,
#upcomingEvents tr:hover {
  background: #e6f7ff;
}
#todaysEvent td,
#upcomingEvents td {
  color: #222;
}

/* Optional: style any links inside the tables */
#todaysEvent a,
#upcomingEvents a {
  color: #0b754e;
  text-decoration: underline;
  transition: color 0.2s;
}

#todaysEvent a:hover,
#upcomingEvents a:hover {
  color: #148614;
}/*# sourceMappingURL=style.css.map */