:root {
    /* Colors */
    --brand-primary: rgb(4, 53, 122);
    --brand-primary-light: rgb(40, 92, 165);
    --brand-secondary: rgb(141, 127, 102);
    --brand-secondary-light: rgb(159, 145, 121);
    --brand-tertiary: rgb(248, 251, 255);
    --black: rgb(23, 23, 23);
    --grey: rgb(126, 126, 126);
    --white: rgb(252, 252, 252);

    /* Spacing */
    --space-xl: 200px;
    --space-lg: 128px;
    --space-md: 64px;
    --space-sm: 32px;
    --space-xs: 16px;
    --space-sidebar: 40px;

    /* Radius */
    --b-radius-lg: 32px;
    --b-radius-md: 16px;
    --b-radius-sm: 8px;
    --b-radius-xs: 4px;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Poppins", Helvetica, sans-serif;
    line-height: 1.5;
    font-size: 0.875em;
    overflow-y: scroll;
}

input, select, textarea {
    width: 100%;
    border: 2px solid var(--brand-primary);
    border-radius: var(--b-radius-xs);
    padding: 0.5em;
    background: white;
    font-family: "Poppins", sans-serif;
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

textarea {
    max-width: 100%;
}

fieldset {
    padding: 0;
    border: none;
}

label {
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.875em;
    color: var(--brand-primary);
}

dialog {
   border: none;
   max-width: 640px;
}

img { height: auto; width: 100%; max-width:100%; }

a {
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    margin-top: 0;
    color: var(--brand-primary);
}

h1 { font-size: clamp(2em, 5vw + 2rem, 3em);  font-weight: 900;}
h2 { font-size: clamp(1.875em, 5vw + 1rem, 2.75em);  font-weight: 900; }
h3 { font-size: clamp(1.75em, 5vw + 1rem, 2.5em); font-weight: 600; }
h4 { font-size: clamp(1.75em, 5vw + 1rem, 2em); font-weight: 400; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.25em; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;}
p { margin: 0 0 1em; }
.body-display {font-size: 1.15em;}
.body-caption {font-size: 0.875em;}
ul {
    list-style: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Poppins", Helvetica, sans-serif;
}

ul ul,
ol ol,
ul ol,
ol ul {
    margin-top: 0.5rem;
}

ul+*,
ol+* {
    margin-top: 1.5rem;
}

ul li { position: relative; padding-left: 24px; }

li+li {
    margin-top: 0.5em;
}

 /* Layout */

.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-rev { flex-wrap: wrap-reverse;}

.flex-1-1 { flex-basis: 100%; }
.flex-3-4 { flex-basis: 75%; }
.flex-2-3 { flex-basis: 66.666666%; }
.flex-1-2 { flex-basis: 50%; }
.flex-1-3 { flex-basis: 33.333333%; }
.flex-1-4 { flex-basis: 25%; }

.ac { align-items: center; }
.afs { align-items: flex-start; }
.afe { align-items: flex-end; }
.jcc { justify-content: center; }
.jsb { justify-content: space-between; }
.jsa { justify-content: space-around; }
.jfe { justify-content: flex-end; }
.jfs { justify-content: flex-start; }
.jse { justify-content: space-evenly; }
.flex-self-end {align-self: flex-end;}
.row-rev { flex-direction: row-reverse; }
.gap-lg { gap:var(--space-lg)}
.gap-md { gap: var(--space-md)}
.gap-sm {gap:var(--space-sm)}
.gap-xs { gap:var(--space-xs)}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-upper { text-transform: uppercase; }

.text-primary { color: var(--brand-primary); }
.text-secondary { color: var(--brand-secondary); }
.text-white { color: var(--white); }
.text-grey { color: var(--grey);}
.text-black { color: var(--black); }
.title-underline { border-bottom: 1px solid var(--brand-primary);
padding-bottom: 16px;}


.bg-primary { background-color: var(--brand-primary); }
.bg-secondary { background-color: var(--brand-secondary); }
.bg-black { background-color: var(--black); }
.bg-grey { background-color: var(--grey);}
.bg-white { background-color: var(--white); }

.container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.c-1800 { max-width: 1800px; }
.c-1600 { max-width: 1600px; }
.c-1400 { max-width: 1400px; }
.c-1300 { max-width: 1300px; }
.c-1200 { max-width: 1200px; }
.c-1100 { max-width: 1100px; }
.c-1000 { max-width: 1000px; }
.c-800 { max-width: 800px; }
.c-700 { max-width: 700px; }
.c-600 { max-width: 600px; }
.c-500 { max-width: 500px; }
.c-400 { max-width: 400px; }

.p-tb-xxl {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
}

.p-tb-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.p-tb-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.p-tb-sm {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-xs {
    margin-bottom: var(--space-xs);
}

.mb-0 {
    margin: 0;
}

.sr-only {
    visibility: hidden;
}

.nowrap {
    white-space:nowrap;
}

/* COMPONENTS */

.button,
input[type=submit], button {
    display: inline-block;
    padding: 0.25em 1em;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--white);
    background: var(--brand-secondary);
    text-align: center;
    font-size: 1.25em;
    cursor: pointer;
    border: none;
    text-decoration: none;
    margin-bottom: var(--space-sm);
    opacity: 1;
    transition: 0.2s linear;
    border-radius: 0;
    width: initial;
}

input[type=submit].button--secondary, .button--secondary  {
   background: var(--brand-primary);
}

.button:hover,
input[type=submit]:hover, button:hover {
    background: var(--brand-secondary-light);
    text-decoration: none;
}

.button--secondary:hover {
    background: var(--brand-primary-light);
    text-decoration: none;
}

.button--grey {
    background: #979797;
    color: white;
}

.button--grey:hover {
    background: #979797;
    color: white;
}

.button--small {
    padding: 8px;
    border: 1px solid var(--brand-primary);
    border-radius: var(--b-radius-xs);
    background: var(--white);
    font-size: 0.875em;
    font-weight: 400;
    color: var(--black);
    margin: 0;
    text-decoration: none;
    white-space: nowrap;
}

.button--small i {
    color: var(--brand-primary);
    transition: 0.2s linear;
}

.button--small:hover i {
    color: white;
}

.button--small:hover, .button--small:active, .button--small:focus {
    background: var(--brand-primary);
    color: white;
}

.link {
    font-weight: 600;
    text-decoration: none;
    margin: 0 1em;
}

.link:hover {
    text-decoration: underline;
}

.box--notice {
    border: 2px solid var(--brand-primary);
    border-radius: var(--b-radius-xs);
    background: var(--white);
    color: var(--brand-primary);
    padding: 2em;
    margin-bottom: var(--space-sm)
}

.box--notice p {
    margin: 0;
}

/* HEADER */
.sidebar {
    background: var(--brand-tertiary);
    width: 320px;
    position: sticky;
    top: 0;
    height: 100vh;
}

main {
    flex: 1;
}

.logo {
    width: 100%;
    padding: var(--space-sidebar);
}

.sidebar ul li {
    padding: 0;
    margin: 0;
}

.notification {
    background: red;
    color: white;
    border-radius: var(--b-radius-xs);
    font-weight: 600;
border-radius: var(--b-radius-lg);
font-size: 0.875em;
padding: 0 8px;
margin-left: var(--space-sidebar);
}

.sidebar ul li a, a.logout {
    display: block;
    padding: var(--space-xs) var(--space-sidebar);
    font-weight: 500;
    font-size: 1.25em;
    text-decoration: none;
    color: var(--grey);
}

.sidebar ul li a:hover, a.logout:hover, .sidebar ul li a.active {
background: #C8DFFF;
color: var(--text-primary);

}

.sidebar .copyright {
    padding: var(--space-sidebar);
    font-size: 0.875em;
}

.sidebar .copyright p {
    margin: 0;
}
/* Pages */

.section--intro {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.page-header {
    margin-bottom: var(--space-md);
}

.page-header h1, .page-header button {margin: 0; }

.login input[type=submit] {
    margin-bottom: 0;
}

p.error-msg {
    color: #a00;
}

/* Email Dropdown Button */

  .dropdown {
      position: relative;
      width: 165px;
  }

  .dropdown-toggle {
      width: 100%;
      display: flex;
      justify-content: space-between;
  }

  .dropdown-toggle i {
      margin-left: var(--space-sm);
      line-height: 1.5;
  }

  .dropdown-menu {
    position: absolute;
    background: var(--brand-tertiary);
    right: 0;
    width: 100%;
    opacity: 1;
    transform-origin: top right;
    transition: all 200ms;
  }

  .dropdown-menu:not(.open) {
    visibility: hidden;
    opacity: 0;
    transform: scale(0, 1);
  }

  .dropdown-menu li {
      width: 100%;
      padding: 0;
  }

  .dropdown-menu>li>a {
      display: block;
      padding: var(--space-xs) var(--space-xs);
      clear: both;
      font-weight: 400;
      line-height: 1.42857143;
      color: #333;
      white-space: nowrap;
      text-decoration:none;
      background:transparent;
      border:0;
  }
  .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
      color: var(--brand-primary);
      text-decoration: none;
      background-color: #C8DFFF;
  }

  .dropdown-menu > li > a.warn:hover {
    background-color: #ff0000;
    color: #ffffff;
  }

/* ------------------------ */

.single-aside {
    flex: 0 0 300px;
}

.aside__secondary .button {
    display: block;
    width: 100%;
    margin-bottom: var(--space-xs);
}

.aside__secondary .button--approve {
    background: var(--brand-primary);
}

.aside__secondary .button--deny {
    background: red;
}

.log__box {
    overflow-y: scroll;
    max-height: 300px;
}

.log__row {
    border-bottom: 1px solid var(--grey);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.log__row .log__time {
    font-weight: 600;
    font-style: italic;
}

.customer__tab {
    display: flex;
    align-items: center;
}

ul.customer__tab + * {
    margin-top: 0;
}

.customer__tab li {
    padding: 0;
}

.customer__tab li+li {
    margin: 0;
}

.customer__tab a {
    cursor: pointer;
    font-size: 1.25em;
    padding: var(--space-xs);
    border: 2px solid var(--brand-primary);
}

.customer__tab li:nth-child(n + 2) a {
    border-left: none;
}

.customer__tab a:hover, .customer__tab a.selected {
    background: var(--brand-primary);
    color: white;
    text-decoration: none;
}

.tab__actions {
    margin-bottom: var(--space-xs);
}

.customer__meta {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.customer__meta a {
    font-weight: 400;
}

.meta__label {
    display: block;
    font-weight: 600;
    color: var(--brand-primary);
}

.meta__date {
    display: block;
    font-size: 0.875em;
    font-style: italic;
}


/* FORM */

.form--split {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs);
}

.form--split span {
    flex: 1;
}

.register-items {
    background: var(--brand-tertiary);
    padding: var(--space-sm);
}

.register-items__single:not(:first-of-type) {
    padding-top: var(--space-sm);
    margin: var(--space-sm) 0;
    border-top: 1px solid var(--grey);
}

form .input__small {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 10%;
}

label .form-required {
    display: inline-block;
    color: red;
}

.filter .filter--buttons input, .filter .filter--buttons a.button {
    white-space: nowrap;
    margin: 0;
}

.filter .filter--buttons {
    gap: var(--space-sm);
    margin: 1.5em 0 0 0;
    align-self: flex-start;
}


/* TABLES */

table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

table thead {
    background: var(--brand-primary);
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .875em;
}

table tbody tr {
    border-bottom: 1px solid var(--grey);
}

table tbody tr.inactive {
    background-color: #e0e0e2;
}

table thead tr th, table tbody tr td {
    padding: 16px 16px 16px 0;
}

table thead tr th:first-of-type, table tbody tr td:first-of-type {
    padding-left: 16px;
}

table input {
    margin: 0;
}

table a {
    font-weight: 400;
}

table summary {
    cursor: pointer;
}

table details[open] > summary{
    padding-bottom: var(--space-xs);
    transition: 0.2s ease-in;
}

th.check-col {
    min-width: 30px;
    text-align: center;
    cursor: pointer;
}

th.grade-col, th.qty-col, th.status-col {
    text-align: center;
}

.table__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}

.table__actions a{
    cursor: pointer;
}

.customer__table th.info-col {
    width: 20%;
}

.customer__table td {
    vertical-align: top;
}

/*.customer__table tr.not-pending {
    background-color: #e0e0e2;
}*/

.customer__status thead {
    color: var(--black);
    background: none;
    text-align: center;
}

.customer__status thead tr th {
    padding: 0 var(--space-xs);
}

.customer__status tbody tr td {
    padding: var(--space-xs);
}

.customer__status tbody tr td {
    border-bottom: none;
}

.customer__status thead th:first-of-type, table.customer__status tbody td:first-of-type {
    padding-left: 0;
}

.customer__status thead th:last-of-type, table.customer__status tbody td:last-of-type {
    padding-right: 0;
}


.status {
    display: block;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    color: white;
}

.status--grey {
    background: grey;
}

.status--red, .priority--3 {
    background: red;
}

.status--yellow, .priority--2 {
    background: #f7c631;
}

.status--green, .priority--1 {
    background: green;
}

.status--blue {
    background: var(--brand-primary);
}

.status--blue-light {
    background: var(--brand-primary-light);
}

@media screen and (max-width: 845px) {

    input, select, textarea { 
        font-size: 1.25em;
    }

    .register__section { 
        flex-direction: column;
    }

    aside.sidebar { 
        height: unset;
        width: 100%;
        flex-direction: row;
        align-items: center;
        order: 2;
    }

    aside.sidebar .logo { 
        max-width: 200px;
    }
    
    .form--split { 
        flex-direction: column;
        gap: 0;
    }

    .sidebar .copyright {
        padding: var(--space-xs);
        flex: 2;
    }
    .sidebar__section--top { 
        flex: 1; 
    }

    .sidebar__section--top .logo { 
        padding: var(--space-xs);
    }
      .section--intro { 
        margin-top: var(--space-xs);
        margin-bottom: var(--space-xs);
    }

}


@media screen and (max-width: 1500px) {

    .inner__container {
        flex-wrap: wrap-reverse;
    }

    .single-aside {
        flex: unset;
        display: flex;
        align-items: flex-start;
        width: 100%;
        justify-content: space-between;
    }

    .aside__secondary, .customer__status {
        flex-basis: 40%;
    }

}






.hidden {
    display: none !important;
}

/* Remove spinners from number inputs */
input[type="number"]:not(.spinner)::-webkit-outer-spin-button,
input[type="number"]:not(.spinner)::-webkit-inner-spin-button {
    display: none;
    margin: 0;
}

input[type="number"]:not(.spinner) {
    appearance: textfield;
}

tr.confirm-delete {
    background-color: #f00;
    color: #000;
}

#wait-dialog {
    background-color: rgba(255, 255, 255, 1);
    color: #04357a;
    text-shadow: 0 0 5px #fff;
    text-align: center;
    padding: 25px;
    border-radius: 50%;
    overflow: hidden;
    outline: none;
    box-shadow: 0 0 10px #aaa;
}

#wait-dialog i.fa-spin {
    font-size: 100px;
}

#wait-dialog p {
    margin: 20px 0 0 0;
}