/* Global variables. */
:root {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* Default (light) theme */
  --bg: #fff;
  --text: #212121;
  --text-light: #585858;
  --border: #d8dae1;
  --accent: #0d47a1;
}

html {
  /* Set the font globally */
  font-family: var(--sans-font);
}

/* Make the body a nice central block */
body {
    color: var(--text);
    background: linear-gradient(#e6d8a2, #fff);
    font-size: 1.15rem;
    line-height: 1.5;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
    padding-bottom: 10px;
}

/* Make the header bg full width, but the content inline with body */
body > header {
  border-bottom: 1px solid #a37943;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color:#fff;
  background: linear-gradient(#907959, #f0df9a);
}

body > header h1 {
  max-width: 1200px;
  font-family: serif;
  font-size: 2rem;
  margin: 0;
}

/* Add a little padding to ensure spacing is correct between content and nav */
main {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 0.5rem;
}

body > footer {
  margin-top: 1rem;
  text-align: center;
  border-top: 1px solid var(--border);
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 0;
  font-size: x-small;
  color:#fff;
  background: linear-gradient(#907959, #f0df9a);
}

/* Format headers */
h1 {
  font-size: 3rem;
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
  line-height: 1.1;
}

/* Reduce header size on mobile */
@media only screen and (max-width: 720px) {
  h1 {
    font-size: 2.5rem;
  }
  body > header h1 {
      font-size: 0.875rem;
      line-height: 1.25rem;
  }
}

button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border: none;
  border-radius: 5px;
  background: var(--accent);
  font-size: 1rem;
  color: var(--bg);
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
}

button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
  filter: brightness(1.4);
  cursor: pointer;
}

/* Format navigation */
nav {
  font-size: 1rem;
  line-height: 2;
  padding: 1rem 0 0 0;
  text-align: center;
}

/* Format tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}
tr {
  border: 1px solid #f0df9a;
}
td,
th {
  text-align: left;
  padding: 0.5rem;
}

th {
  color: #fff;
  background: linear-gradient(to right, #907959, #f0df9a);
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Format forms */
textarea,
select,
input {
  font-size: inherit;
  font-family: inherit;
  padding: 0.5rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: none;
  box-sizing: border-box;
}
textarea,
input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
select {
    width: auto;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: bottom;
  position: relative;
  margin: 0.1rem;
  width: auto;
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent);
}

input[type="checkbox"]:checked::after {
  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
  content: " ";
  width: 0.1em;
  height: 0.25em;
  border-radius: 0;
  position: absolute;
  top: 0.05em;
  left: 0.18em;
  background: transparent;
  border-right: solid var(--bg) 0.08em;
  border-bottom: solid var(--bg) 0.08em;
  font-size: 1.8em;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  /* creates a colored circle for the checked radio button  */
  content: " ";
  width: 0.25em;
  height: 0.25em;
  border-radius: 100%;
  position: absolute;
  top: 0.125em;
  background: var(--bg);
  left: 0.125em;
  font-size: 32px;
}

/* Make the textarea wider than other inputs */
textarea {
  width: 100%;
}

@media only screen and (max-width: 720px) {
    select,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"] {
        padding: 0.25rem;
    }
    input {
      width: 100%;
    }
    td {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}


.text-gray {
    color: gray;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.inline-block {
    display: inline-block;
}
.border-b {
    border-bottom: 1px solid var(--border);;
}
.flex {
    display: flex;
}
.flex-wrap {
    flex-wrap: wrap;
}
.grow {
    flex-grow: 1;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.text-center {
    text-align: center;
}
.mr-1 {
    margin-right: 0.25rem;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.w-12 {
    width: 3rem;
}
.w-20 {
    width: 5rem;
}
.w-24 {
    width: 6rem;
}
.w-32 {
    width: 8rem;
}
.min-w-24 {
    min-width: 6rem;
}
.max-w-sm {
    max-width: 24rem;
}
.w-1\/2 {
    width: 50%;
}
.w-auto {
    width: auto;
}
.tag-red {
    width: fit-content;
    color: #fff;
    background-color: red;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0 0.25rem;
    margin: 0 0.25rem;
    border-radius: 0.25rem;
    border-bottom: 1px solid #907959;
}
.btn_label {
    user-select: none;
    border: 2px solid #888;
    background: linear-gradient(#f0df9a, #907959);
    font-size: 1rem;
    color: var(--bg);
    padding: 0.7rem 0.9rem;
    margin: 0.5rem 0;
    cursor: pointer;
}
.rounded-l-full {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}
.rounded-r-full {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}
.flash {
    padding: 1rem;
    margin-bottom: 1rem;
    color: #617ea9;
    background: #ddefff;
    border-radius: 4px;
}

.tabs{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}
.tabs .tab_label {
    user-select: none;
	margin-right: 3px;
	order: -1;
	border-radius: 9999px;
    border: 2px solid #888;
	color: #fff;
	background: linear-gradient(#f0df9a, #907959);
	cursor: pointer;
    width: 1.8rem;
    height: 1.8rem;
    text-align: center;
}
.tabs input[name="tab_item"] {
	display: none;
}
#tab_content_1,
#tab_content_2,
#tab_content_3,
#tab_content_4,
#tab_content_5 {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
input:checked + .tab_label {
	color: #fff;
	background: #cb44cb;
}
#tab_1:checked ~ #tab_content_1,
#tab_2:checked ~ #tab_content_2,
#tab_3:checked ~ #tab_content_3,
#tab_4:checked ~ #tab_content_4,
#tab_5:checked ~ #tab_content_5 {
	padding: 15px;
	height: auto;
	overflow: auto;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	transition: .5s opacity;
	opacity: 1;
}