:root {
    --cub-card-color: #142f40;
    --heading-color: #e7efc9;
    --main-content-bg-color: #4c592e;
    --selection-color: #6a8c37;
    --sub-content-bg-color: #7F8c51;
    --site-bg-color: #d9c2ad;
    --card-radius: 25px;

    /* Input variables */
    --border-radius: 0.15em;
    --border: 0.1em solid currentColor;
    --control-size: 1.15em;
}

body {
    background-color: var(--site-bg-color);
}

.content {
    padding: 1em 1em 3em;
    background-color: var(--site-bg-color);
}

.content-head {
    color: var(--heading-color);
    padding: 0.5em;
    background-color: var(--main-content-bg-color);
    margin-top: 0;
    margin-bottom: 0;
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
}

.content-head-findings {
    color: var(--heading-color);
    padding: 0.5em;
    background-color: var(--main-content-bg-color);
    margin-top: 0;
    margin-bottom: 0;
}

.content-section {
    margin-top: 2em;
    margin-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
}

.content-subhead {
    color: var(--heading-color);
    background-color: var(--sub-content-bg-color);
    margin: 0;
    padding: 0.5em;
    padding-left: 1em;
    border-bottom: 1px;
    border-color: var(--main-content-bg-color)
}

.content-subhead2 {
    color: var(--heading-color);
    background-color: var(--sub-content-bg-color);
    margin: 0;
    padding: 0.2em;
    padding-left: 3em;
}

.content-subsection {
    padding-left: 4em;
    margin-top: 1em;
    padding-bottom: 0.5em;
}

.content-subsection2 {
    margin-top: 1em;
    padding-left: 6em;
    padding-bottom: 0.5em;
}

.COR {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 0.1em solid var(--main-content-bg-color);
    border-radius: var(--card-radius);
}

.COR > .content-head {
    padding: 0.25em;
    padding-left: 1em;
}

.cub-content-subhead {
    color: var(--heading-color);
    background-color: var(--cub-card-color);
    margin: 0;
    padding: 0.25em;
    padding-left: 1em;
}

.fullwidth {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.is-center {
    text-align: center;
}

.legalagree {
    display: grid;
    justify-content: center;
}

.main {
    border: 0.1em solid var(--main-content-bg-color);
    border-radius: var(--card-radius);
    width: 90%;
    margin: 5%;
    margin-top: 1%; 
}

.numeric > .pure-u-lg-2-5 {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}

p {
    margin-top: 0;
}

.packcomposition {
    border: 0.1em solid var(--cub-card-color);
    border-radius: var(--card-radius);
    margin: 1em;
}

.packcomposition > .content-head {
    background-color: var(--cub-card-color);
    padding: 0.25em;
}

.troopcomposition {
    border: 0.1em solid var(--main-content-bg-color);
    border-radius: var(--card-radius);
    margin: 1em;    
}

.troopcomposition > .content-head {
    padding: .25em
}

.troop-content-subhead {
    color: var(--heading-color);
    background-color: var(--sub-content-bg-color);
    margin: 0;
    padding: 0.25em;
    padding-left: 1em;
}

li {
    margin-top: 0.5em;
}

/* ul {
    margin: 0;
} */

/* From https://moderncss.dev/pure-css-custom-checkbox-style/ */

.selection {
    line-height: 1.1;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em; 
}

input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: var(--border);
    border-radius: var(--border-radius);
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

.selection + .selection {
    margin-top: 1em;
}

.content-subsection + .selection {
    margin-top: 1em;
}

.content-subsection2 + .selection {
    margin-top: 1em;
}

strong + .selection {
    margin-top: 1em;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.85em;
    height: 0.85em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--selection-color);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* From: https://nikitahl.com/number-input-with-custom-buttons */

/* WebKit and Blink */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  margin: 0;
  height: var(--control-size);
  width: 2em;
  border: var(--border);
  border-radius: var(--border-radius);
  padding: 2px 8px;
  text-align: center;
}

.value-control {
    width: var(--control-size);
    height: var(--control-size);
    margin: 0 8px;
    background: transparent;
    border: var(--border);
    border-radius: var(--border-radius);
    color: #3b3b3b;
    cursor: pointer;
  }
  
  .value-control:hover {
    background: #eee;
  }
  
  .value-control:active {
    background: #ddd;
  }
  
  .value-input:hover {
    border-color: #777;
  }