/* VARIABLE DEFINITIONS */
:root {
    --primary: #79aec8;
    --secondary: #417690;
    --accent: #f5dd5d;
    --primary-fg: #fff;
  
    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;
  
    --header-color: #ffc;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);
  
    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--primary);
  
    --link-fg: #447e9b;
    --link-hover-color: #036;
    --link-selected-fg: #5b80b2;
  
    --hairline-color: #e8e8e8;
    --border-color: #ccc;
  
    --error-fg: #ba2121;
  
    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;
  
    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;
  
    --button-fg: #fff;
    --button-bg: var(--primary);
    --button-hover-bg: #609ab6;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #205067;
    --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
    --close-button-hover-bg: #747474;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;
  
    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --primary: #264b5d;
      --primary-fg: #eee;
  
      --body-fg: #eeeeee;
      --body-bg: #121212;
      --body-quiet-color: #e0e0e0;
      --body-loud-color: #ffffff;
  
      --breadcrumbs-link-fg: #e0e0e0;
      --breadcrumbs-bg: var(--primary);
  
      --link-fg: #81d4fa;
      --link-hover-color: #4ac1f7;
      --link-selected-fg: #6f94c6;
  
      --hairline-color: #272727;
      --border-color: #353535;
  
      --error-fg: #e35f5f;
      --message-success-bg: #006b1b;
      --message-warning-bg: #583305;
      --message-error-bg: #570808;
  
      --darkened-bg: #212121;
      --selected-bg: #1b1b1b;
      --selected-row: #00363a;
  
      --close-button-bg: #333333;
      --close-button-hover-bg: #666666;
    }
  }

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

body {
    background: #F1F1F1;
}

table {
    border-spacing: 0;
}

.card-auth {
    width: 400px;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

.card-profile {
    max-width: 800px;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

.card-title {
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.card-body {
    padding: 2rem;
}

.form-auth {
    width: 100%;
}

.form-label-group {
    margin-bottom: 1rem;
}

.form-label-group input {
    border-radius: 2rem;
}

.button {
    width: 150px;
}

.btn {
    font-size: 80%;
    border-radius: 5rem;
    font-weight: bold;
}

.profile_table {
    width: 100%;
    border: 1px solid #D1DBEB;
    border-radius: 8px;
    border-collapse: separate;
    overflow: hidden;
}

.profile_table .header {
    width: 200px;
    padding: 16px 24px;
    text-align: left;
    background: #F1F5FA;
}

.profile_table .data {
    padding: 16px 24px;
}

.form_wrap {
    display: grid;
    gap: 16px;
}

.form_wrap-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-control:focus {
    box-shadow: none;
}

/* base */

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* store */

.storelist img {
    height: 150px;
    object-fit: contain;
}

/* staff */

.stafflist img {
    height: 250px;
    object-fit: contain;
}

/* calendar */

.calendar img {
    height: 150px;
    object-fit: contain;
}

/* booking */

.card-booking {
    max-width: 800px;
}

.booking_table {
    width: 100%;
    border: 1px solid #D1DBEB;
    border-radius: 8px;
    border-collapse: separate;
    overflow: hidden;
}

.booking_table .header {
    width: 200px;
    padding: 16px 24px;
    text-align: left;
    background: #F1F5FA;
}

.booking_table .data {
    padding: 16px 24px;
}

.form_wrap {
    display: grid;
    gap: 16px;
}

.form_wrap__2col {
    grid-template-columns: repeat(2, 1fr);
}

/* mypage */

.mypage img {
    height: 150px;
    object-fit: contain;
}

/* MESSAGES & ERRORS */

ul.messagelist {
    padding: 0;
    margin: 0;
}

ul.messagelist li {
    display: block;
    font-weight: 400;
    font-size: 13px;
    padding: 10px 10px 10px 65px;
    margin: 0 0 10px 0;
    background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
    background-size: 16px auto;
    color: var(--body-fg);
}

ul.messagelist li.warning {
    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
    background-size: 14px auto;
}

ul.messagelist li.error {
    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
    background-size: 16px auto;
}

.errornote {
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    color: var(--error-fg);
    border: 1px solid var(--error-fg);
    border-radius: 4px;
    background-color: var(--body-bg);
    background-position: 5px 12px;
    overflow-wrap: break-word;
}

ul.errorlist {
    margin: 0 0 4px;
    padding: 0;
    color: var(--error-fg);
    background: var(--body-bg);
}

ul.errorlist li {
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

ul.errorlist li:first-child {
    margin-top: 0;
}

ul.errorlist li a {
    color: inherit;
    text-decoration: underline;
}

td ul.errorlist {
    margin: 0;
    padding: 0;
}

td ul.errorlist li {
    margin: 0;
}

.form-row.errors {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--hairline-color);
    background: none;
}

.form-row.errors ul.errorlist li {
    padding-left: 0;
}

.errors input, .errors select, .errors textarea,
td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
    border: 1px solid var(--error-fg);
}

.description {
    font-size: 12px;
    padding: 5px 0 0 12px;
}

@media only screen and (min-width: 1px) and (max-width: 480px) {
    h1 {
        font-size: 1.4rem;
    }

    .navbar {
        padding: 0 10px;
    }
}