@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&family=Roboto+Condensed&display=swap");

/*!*color palette:*/

/*off-white: rgb(253, 238, 207)*/

/*menu background dark: rgb(48, 44, 41)*/

/*menu background light: rgb(60, 57, 52)*/

/*item background: rgb(38, 34, 33)*/

/*button gray: rgb(126, 114, 102)*/

/*selected red: rgb(150, 78, 61)*/

/*Level text color: rgb(117, 107, 94)*/

/*Positive stat color: rgb(153, 204, 255)*/

/*negative stat color: rgb(255, 64, 64)*/

/*quality colors:*/

/*Normal: rgb(178, 178, 178)*/

/*NormalBG: rgba(178, 178, 178, 0.2)*/

/*Unique: rgb(255, 215, 0)*/

/*UniqueBG: rgba(255, 215, 0, 0.2)*/

/*Vintage: rgb(71, 98, 145)*/

/*VintageBG: rgba(71, 98, 145, 0.2)*/

/*Genuine: rgb(77, 116, 85)*/

/*GenuineBG: rgba(77, 116, 85, 0.2)*/

/*Strange: rgb(207, 106, 50)*/

/*StrangeBG: rgba(207, 106, 50, 0.2)*/

/*Unusual: rgb(134, 80, 172)*/

/*UnusualBG: rgba(134, 80, 172, 0.2)*/

/*Haunted: rgb(56, 243, 171)*/

/*HauntedBG: rgba(56, 243, 171, 0.2)*/

/*Collector's: rgb(170, 0, 0)*/

/*Collector'sBG: rgba(170, 0, 0, 0.2)*/

/*Decorated: rgb(250, 250, 250)*/

/*DecoratedBG: rgba(250, 250, 250, 0.2)*/

/*Community / Self-Made: rgb(112, 176, 74)*/

/*CommunityBG / Self-MadeBG: rgba(112, 176, 74, 0.2)*/

/*Valve: rgb(165, 15, 121)*/

/*ValveBG: rgba(165, 15, 121, 0.2)*/

/**!*/

/*.Unique {*/

/*    border-color: rgb(255, 215, 0);*/

/*}*/

/*.Unique h2 {*/

/*    color: rgb(255, 215, 0);*/

/*}*/

/*.Unique:hover:not(h2) {*/

/*    background-color: rgba(255, 215, 0, 0.2);*/

/*}*/

/*.Strange {*/

/*    border-color: rgb(207, 106, 50);*/

/*}*/

/*.Strange h2 {*/

/*    color: rgb(207, 106, 50);*/

/*}*/

/*.Strange:hover:not(h2) {*/

/*    background-color: rgba(207, 106, 50, 0.2);*/

/*}*/

/*.Vintage {*/

/*    border-color: rgb(71, 98, 145);*/

/*}*/

/*.Vintage h2 {*/

/*    color: rgb(71, 98, 145);*/

/*}*/

/*.Vintage:hover:not(h2) {*/

/*    background-color: rgba(71, 98, 145, 0.2);*/

/*}*/

/*.Normal {*/

/*    border-color: rgb(178, 178, 178);*/

/*}*/

/*.Normal h2 {*/

/*    color: rgb(178, 178, 178);*/

/*}*/

/*.Normal:hover:not(h2) {*/

/*    background-color: rgba(178, 178, 178, 0.2);*/

/*}*/

/*.Unusual {*/

/*    border-color: rgb(134, 80, 172);*/

/*}*/

/*.Unusual h2 {*/

/*    color: rgb(134, 80, 172);*/

/*}*/

/*.Unusual:hover:not(h2) {*/

/*    background-color: rgba(134, 80, 172, 0.2);*/

/*}*/

/*@font-face {*/

/*    font-family: TF2Build;*/

/*    src: url("../includes/fonts/tf2build.ttf");*/

/*}*/

/*@font-face {*/

/*    font-family: TF2Secondary;*/

/*    src: url("../includes/fonts/TF2secondary.ttf");*/

/*}*/

/*body {*/

/*    margin: 0;*/

/*    min-height: 100vh;*/

/*    background: rgb(48, 44, 41);*/

/*    color: rgb(253, 238, 207);*/

/*    font-family: TF2Build, sans-serif;*/

/*    text-align: center;*/

/*    box-sizing: border-box;*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    justify-content: space-between;*/

/*}*/

/*div > img {*/

/*    width: 100%;*/

/*    object-fit: cover;*/

/*}*/

/*main {*/

/*    padding: 0 15vw 5vh;*/

/*}*/

/*nav,*/

/*footer {*/

/*    height: 10vh;*/

/*    padding: 0 5vw;*/

/*    background: rgb(60, 57, 52);*/

/*    align-items: center;*/

/*    gap: 1vw;*/

/*}*/

/*nav {*/

/*    border-bottom: solid rgb(126, 114, 102) 6px;*/

/*    display: flex;*/

/*    justify-content: flex-end;*/

/*}*/

/*footer {*/

/*    border-top: solid rgb(126, 114, 102) 6px;*/

/*    display: flex;*/

/*    justify-content: flex-start;*/

/*}*/

/*a:not(#card) {*/

/*    background: rgb(126, 114, 102);*/

/*    border-radius: 8px;*/

/*    text-decoration: none;*/

/*    color: rgb(253, 238, 207);*/

/*    padding: 1vw;*/

/*}*/

/*a:hover:not(#card) {*/

/*    background: rgb(150, 78, 61);*/

/*}*/

/*#card {*/

/*    text-decoration: none;*/

/*    color: rgb(253, 238, 207);*/

/*}*/

/*p,*/

/*p > div {*/

/*    font-family: TF2Secondary, sans-serif;*/

/*}*/

/*p #lessImportant {*/

/*    color: rgb(117, 107, 94);*/

/*}*/

/*div .positive {*/

/*    color: rgb(153, 204, 255);*/

/*}*/

/*div .negative {*/

/*    color: rgb(255, 64, 64);*/

/*}*/

/*main > div {*/

/*    margin: 5vh 0;*/

/*    display: flex;*/

/*    gap: 1vw;*/

/*    flex-wrap: wrap;*/

/*    align-items: center;*/

/*}*/

/*article {*/

/*    background: rgb(38, 34, 33);*/

/*    padding: 1vw;*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    align-items: center;*/

/*    justify-content: space-between;*/

/*    width: 19vw;*/

/*    height: 50vh;*/

/*    border: solid 3px rgb(178, 178, 178);*/

/*}*/

/*article > div {*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    justify-content: space-between;*/

/*}*/

/*#img-cont {*/

/*    width: 75%*/

/*}*/

/*article > div:nth-child(3) > div {*/

/*    display: flex;*/

/*    gap: 1vw;*/

/*    justify-content: center;*/

/*}*/

/*.single {*/

/*    margin: auto;*/

/*    width: 50%;*/

/*}*/

/*#details {*/

/*    display: flex;*/

/*    max-height: 60vh;*/

/*    gap: 5vw;*/

/*    align-items: center;*/

/*}*/

/*main#delete {*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    max-height: 60vh;*/

/*    gap: 5vw;*/

/*    align-items: center;*/

/*}*/

/*input#delete {*/

/*    font-family: TF2Build, sans-serif;*/

/*    border: none;*/

/*    width: 30vw;*/

/*    font-size: 2rem;*/

/*    background-color: rgb(126, 114, 102);*/

/*    border-radius: 5px;*/

/*}*/

/*input#delete:hover {*/

/*    background-color: rgb(255, 64, 64);*/

/*    cursor: pointer;*/

/*}*/

/*input[type=submit] {*/

/*    font-family: TF2Build, sans-serif;*/

/*    border: solid 3px rgb(153, 204, 255);*/

/*    font-size: 1rem;*/

/*    background: rgb(126, 114, 102);*/

/*    border-radius: 8px;*/

/*    text-decoration: none;*/

/*    color: rgb(253, 238, 207);*/

/*    padding: 1vw;*/

/*}*/

/*input[type=submit]:hover {*/

/*    background: rgb(150, 78, 61);*/

/*    cursor: pointer;*/

/*}*/

/*form {*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    align-items: center;*/

/*    gap: 3vh;*/

/*}*/

/*form > div {*/

/*    display: flex;*/

/*    flex-direction: row;*/

/*    gap: 1vw;*/

/*    justify-content: space-evenly;*/

/*    align-items: stretch;*/

/*}*/

/*form > div > div {*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    justify-content: space-evenly;*/

/*}*/

/*form > div > div:last-child {*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    flex-wrap: wrap;*/

/*    justify-content: space-evenly;*/

/*}*/

/*form > div > div:last-child > div {*/

/*    border-bottom: solid 2px rgb(126, 114, 102);*/

/*}*/

/*form > div > div > div {*/

/*    display: flex;*/

/*    justify-content: space-between;*/

/*    align-items: baseline;*/

/*    gap: 1vw;*/

/*    padding: 0.5vw;*/

/*}*/

/*input[type=text],*/

/*input[type=checkbox],*/

/*input[type=password],*/

/*select,*/

/*textarea {*/

/*    border-radius: 8px;*/

/*    border: solid 2px rgb(126, 114, 102);*/

/*    font-family: TF2Secondary, sans-serif;*/

/*    font-size: 1rem;*/

/*    background-color: rgb(38, 34, 33);*/

/*    color: rgb(253, 238, 207);*/

/*    padding: 0.3vw;*/

/*}*/

/*main#delete > section > form {*/

/*    display: flex;*/

/*    flex-direction: column;*/

/*    gap: 1vw;*/

/*    align-items: stretch;*/

/*}*/

/*main#delete > section > form > div {*/

/*    display: flex;*/

/*    justify-content: space-between;*/

/*}*/

body {
  font-family: "Merriweather", serif !important;
  font-family: "Roboto Condensed", sans-serif !important;
}

h1 {
  font-size: 40px;
  font-weight: 400;
}

main {
  min-height: 80vh;
  padding: 0 15vw 5vh;
}

.is-warning {
  background-color: #ebc43d !important;
}

.has-background-warning {
  background-color: #b69525 !important;
}

.home_main {
  background-image: url(https://img.freepik.com/free-vector/frame-with-dogs-vector-white-background_53876-127700.jpg?size=626&ext=jpg&ga=GA1.1.1412446893.1704931200&semt=ais);
  background-position: center;
  background-size: cover;
  height: 80vh;
}

.home_main h1 {
  padding-top: 15vh;
  padding-bottom: 5vh;
}

.home_main .buttons {
  margin: 0 20vw;
}

#submit_id {
  margin-top: 25px;
}

.register_new_account {
  padding-bottom: 5vh;
}

.existing_account_section {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.existing_account_section a {
  color: #b79729;
}

.column.is-one-third .login-head {
  margin-top: 50%;
}

.column.is-one-third .login-form {
  margin-top: 2vh;
}

form input[type="submit"] {
  background-color: #faab00 !important;
  font-family: "Merriweather", serif !important;
  font-family: "Roboto Condensed", sans-serif !important;
  font-weight: 400 !important;
}

.column.is-one-third .dog-head h1 {
  margin-top: 5vh !important;
}

.add-dog-form input[type="date"],
.add-dog-form input[type="text"] {
  max-width: 216px;
}

.add-dog-form .field {
  margin-top: 15px;
}

.column.is-one-third .add-dog-form textarea {
  width: 100%;
}

.main_container {
  margin: 0 15vw;
  min-height: 80vh;
}

.title_profile {
  margin-top: 15vh;
  color: #b79729;
  font-weight: bold;
  font-size: larger;
  width: 200px;
}

.title_honden {
  color: #b79729;
  font-weight: bold;
  font-size: larger;
  width: 200px;
  margin-top: -3vh;
}

.profile_info {
  display: flex;
  gap: 5vw;
}

.profile_table {
  margin-top: 2vh;
  display: flex;
  height: 200px;
}

.profile_table td {
  width: 200px;
  font-weight: bold;
}

.profile_table_dog thead {
  font-weight: bold;
}

.td_comment {
  width: 160px;
}

.buttons_profile_page {
  margin-top: 2vh;
}

.trashbin_div {
  background-image: url("../includes/images/trashbin_icon.svg");
  background-size: cover;
  background-position: center;
  width: 50px;
  height: 50px;
}

.edit_div {
  background-image: url("../includes/images/edit_icon.svg");
  background-size: cover;
  background-position: center;
  width: 50px;
  height: 50px;
}

.reservation_div {
  background-image: url("../includes/images/reserveer_icon.svg");
  background-size: cover;
  background-position: center;
  width: 50px;
  height: 50px;
}

.title_admin {
  margin-top: 8vh;
  color: #b79729;
  font-weight: bold;
  font-size: 40px;
  text-align: center;
}

#clientlist_button {
  margin-top: 3vh;
}

.p404 {
  margin-top: 30vh;
}

footer {
  /*position: fixed;*/
  /*left: 0;*/
  /*bottom: 0;*/
  /*width: 100%;*/
  /*color: white;*/
}

.title_reservation_create {
  margin-top: 2vh;
  margin-bottom: 2vh;
  font-weight: bold;
  font-size: 40px;
  text-align: center;
}

.column.is-one-third .add-reservation-form textarea {
  width: 100%;
}

.date-time {
  width: 100%;
  height: 5vh;
  border: black solid 1px;
  border-radius: 5px;
}

.dog_checkbox {
  margin-bottom: 5px;
}

.info_message {
  margin: 6vh 15vw;
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.error_list {
  text-align: center;
}

#profile_picture {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#button_list {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.error_message {
  display: flex;
  justify-content: center;
}

@media (max-width: 770px) {
  .container {
    padding: 0 10vw;
  }
}

@media (width <=475px) {
  .main_container,
  .container {
    margin: 0 5vw;
  }
  .table-container {
    overflow-x: auto;
  }
}