#ozCalcApp {
  --calc-black: #0a0a0a;
  --calc-green: #a1cc3d;
  --calc-dark-green: #368b57;
}

#ozCalcApp header {
  margin: -2rem -2rem 2rem -2rem;
  padding: 1rem;
  background: var(--calc-black);

}
  #ozCalcApp header h1 {
    margin: 1px 2rem;
    color: #fff; }

[v-cloak] > * {
  visibility: hidden; }

[v-cloak]::before {
  content: "Calculator Loading..."; }

h1.calculator {
  background: #0a0a0a;
  color: #fff;
  padding: 0.5em;
  margin-bottom: 1em; }

#ozCalcApp p {
  padding-bottom: 1em; }

.ozcalc-options {
  max-width: 70rem; }
  .ozcalc-options h2 {
    display: flex;
    background: #f3f6f9;
    padding: 0.4em 1em;
    line-height: 32px;
    font-size: 1em;
    font-size: 1rem;
    margin-bottom: 0.5em;
    margin-bottom: 0.5rem;
  }
    .ozcalc-options h2 span {
      display: inline-block;
      font-weight: normal;
      color: #517da2;
      margin: 0 1rem;
    }
    .ozcalc-options h2 img {
      display: inline-block;
      height: 100%;
      width: auto;
      padding: 0;
      transition: all 0.3s;
    }
    .ozcalc-options h2.active img {
      transform: rotate(90deg);
    }

.option-set {
  text-align: center; }
  .option-set button {
    display: inline-block;
    padding: 0.7rem 1rem;
    margin: 1rem 0.7rem;
    border-radius: 3px;
    font-weight: bold;
    border: none;
    background: var(--calc-black);
    color: #f4f5f7;
  }
    .option-set button.active {
      background: var(--calc-dark-green); }
    .option-set button.w9 {
      width: 13em;
      width: 9rem; }

.option-set.left {
  text-align: left; }

@media screen and (max-width: 768px) {
  .option-set button {
    margin: 1rem 0.2rem; } }

section.ozcalc-photos p {
  margin-top: 0;
  padding-left: 4px; }

section.ozcalc-photos p.calc-warn {
  background: #436c90;
  color: #fff;
  font-weight: bold;
  padding: 1rem !important;
  margin-bottom: 2rem;
  max-width: 800px; }

.ozcalc-photos-inner img {
  padding: 5px;
  background: transparent;
  max-width: 100%;
  height: auto; }

div.ozcalc-photos-inner {
  display: flex;
  flex-wrap: wrap; }

div.ozcalc-photos-inner > div {
  max-width: 100%;
  padding: 0.4rem;
  color: #8C93A0;
}
  div.ozcalc-photos-inner > div.active {
    color: var(--calc-dark-green);
    font-weight: bold;
  }

  div.ozcalc-photos-inner > div.active img {
    background: var(--calc-green);
  }

@media screen and (min-width: 640px) {
  div.ozcalc-photos-inner > div {
    max-width: 48%; } }

@media screen and (min-width: 960px) {
  div.ozcalc-photos-inner > div {
    max-width: 24%; } }

.ozcalc-big input {
  padding: 0.5em;
  border: 1px solid #496277;
  font-weight: bold;
  max-width: 4rem; }

input.short {
  min-width: 3rem !important;
  max-width: 4rem !important; }

.ozcalc-area {
  margin-top: -0.5em;
  margin-top: -0.5rem;
  background: #dae3ec;
  font-weight: bold;
  padding: 1rem;
  text-align: center; }

#ozCalcApp .ozcalc-area p {
  padding-bottom: 0; }

section.ozcalc-estimate {
  text-align: center;
  max-width: 40rem;
  margin: 2rem auto; }
  section.ozcalc-estimate div.output {
    display: flex; }
    section.ozcalc-estimate div.output h2, section.ozcalc-estimate div.output output {
      margin: 0;
      padding: 1rem 0.3rem;
      font-size: 1rem; }
    section.ozcalc-estimate div.output h2 {
      background: #517da2;
      color: #f4f5f7;
      width: 50%; }
    section.ozcalc-estimate div.output output {
      font-weight: bold;
      width: 50%;
      background: #f4f5f7; }

div.after-price {
  background: #294761;
  color: #f4f5f7;
  padding: 2rem 1rem 1rem 2rem; }
  div.after-price h3 {
    color: #f4f5f7; }
  div.after-price form {
    text-align: left; }
  div.after-price label {
    display: block; }
  div.after-price input {
    min-width: 50%;
    padding: 0.3rem; }
  div.after-price .ozc-row {
    margin-bottom: 1rem; }

.form-errors {
  margin: 2rem -1rem 2rem -2rem;
  padding: 1rem;
  text-align: left;
  background: #1d1d1d;
  color: #e6c28d; }

ul.clauses {
  list-style: square;
  text-align: left; }
  ul.clauses li {
    line-height: 200%; }

.ozcalc-notification {
  background: #66839bff;
  color: #f4f5f7;
  padding: 1em 1em 0 1em;
  padding: 1rem 1rem 0 1rem;
  margin-bottom: 2em;
  margin-bottom: 2rem; }

.debug p {
  border-bottom: 1px solid #888;
  max-width: 20rem; }

.debug strong {
  display: inline-block;
  width: 5.2rem;
  margin-right: 1em; }

.ozcalc-fade-enter-active, .ozcalc-fade-leave-active {
  transition: opacity 0.6s; }

.ozcalc-fade-enter, .ozcalc-fade-leave-to {
  opacity: 0; }