@charset "utf-8"; 

/* Font for the signature */
@import url('https://fonts.googleapis.com/css2?family=Calligraffitti&display=swap');
/* Font for the checkin form */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
/* Font for the printout */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --colorA1: #A4A7C5;
    --colorA2: #7479A3;
    --colorA3: #4E5588; /* Border/accent color */
    --colorA4: #333A70;
    --colorA5: #1C2356; /* Border for interactable fields */
    
    --colorB1: #98AFBA;
    --colorB2: #668696;
    --colorB3: #436A7D;
    --colorB4: #2A5367;
    --colorB5: #143C4F;

    --colorC1: black; /* Main font color */
    --colorC2: white; /* Background color */

    --colorD1: #FFCDCD;
    --colorD2: #ED9D9D;
    --colorD3: #C66464;
    --colorD4: #A13C3C;
    --colorD5: #7D1B1B;
}

* > h1, * > h2, * > h3, * > p, * > a, * > ul > li, * > ol > li, * > div, * > input
{
  font-family: "Quicksand", "Helvetica", sans-serif;
  font-weight: 570;
  line-height:1.5;
  word-wrap: break-word;
  color: var(--colorC1);
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: var(--colorC2);
}

* > a, * > a:hover, * > a:visited {
    text-decoration: none;
}

* > ul, * > ol {
    margin-left: 2.5rem;
}

body {
    text-align: center;
    background-color: var(--colorC2);
}

* {
    box-sizing: border-box;
}

* > span {
    font-style: italic;
}

.no-i {
    font-style: normal;
}

/* ============================== Checkin form ============================== */

/* ----- Main elements ----- */

#checkin {
    width: 100%;
    text-align: left;
    margin-bottom: 20vh;
}

#checkin-title {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
}

#checkin-title > img {
    width: 100%;
}

.ci-double-container {
    width: 100%;
    display: grid;
}

@media only screen and (min-width: 981px) {
    .ci-double-container {
        grid-template-columns: 50% 50%;
    }
}

@media only screen and (max-width: 980px) {
    .ci-double-container {
        grid-template-columns: 100%;
    }
}

.ci-section-title {
    font-weight: normal;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    margin-bottom: 5px;
}

@media only screen and (min-width: 981px) {
    .ci-section-title {
        font-size: 2vw;
    }
}

@media only screen and (max-width: 980px) {
    .ci-section-title {
        font-size: 3.5vw;
    }
}

.ci-section {
    width: 90%;
    margin-left: 5%;
    padding: 5px;
}

.ci-double-section {
    display: grid;
    width: 90%;
}

@media only screen and (min-width: 721px) {
    .ci-double-section {
        grid-template-columns: 50% 50%;
    }
}

@media only screen and (max-width: 720px) {
    .ci-double-section {
        grid-template-columns: 100%;
    }
}

@media only screen and (min-width: 981px) {
    #ci-instructions {
        font-size: 1.2vw;
    }
}

@media only screen and (max-width: 980px) {
    #ci-instructions {
        font-size: 1.6vw;
    }
}

@media only screen and (max-width: 720px) {
    #ci-instructions {
        font-size: 2vw;
    }
}

#author-note {
    width: 100%;
    text-align: center;
    color: var(--colorC1);
    margin-top: 5vh;
    margin-bottom: 5vh;
}

@media only screen and (min-width: 981px) {
    #author-note {
        font-size: 0.8vw;
    }
}

@media only screen and (max-width: 980px) {
    #author-note {
        font-size: 1.3vw;
    }
}

/* ----- Meta information ----- */

.ci-meta-row {
    width: 100%;
    display: grid;
    grid-template-columns: 10% 90%;
}

.ci-meta-icon {
    text-align: center;
}

.ci-meta-icon > img {
    width: 60%;
}

.ci-meta-form {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    display: grid;
}

.ci-meta-input > select, input {
    border: solid 2px var(--colorA5);
    border-radius: 5px;
    padding: 5px;
    background-color: var(--colorC2);
    width: 90%;
    margin-right: 10%;
    margin-top: 0;
}

@media only screen and (min-width: 981px) {
    .ci-meta-form {
        grid-template-columns: 33% 33% 33%;
    }
    .ci-meta-input > p {
        font-size: 1.1vw;
    }
    .ci-meta-input > select, input{
        font-size: 1.2vw;
    }
}

@media only screen and (max-width: 980px) {
    .ci-meta-form {
        grid-template-columns: 100%;
    }
    .ci-meta-input > p {
        font-size: 1.8vw;
    }
    .ci-meta-input > select, input{
        font-size: 1.8vw;
    }
}

.ci-meta-notes {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    display: grid;
    grid-template-columns: 100%;
}

/* ----- Pre-inspection ----- */

#ci-section-inspection, #ci-section-inspection-2 {
    width: 100%;
}

.ci-inspect-row {
    width: 90%;
    display: grid;
}

.ci-inspect-row > p, .cir-title {
    margin-left: 10px;
    margin-bottom: 0;
    margin-top: 0;
}

@media only screen and (min-width: 981px) {
    .ci-inspect-row > p, .cir-title {
        font-size: 1.1vw;
    }
}

@media only screen and (max-width: 980px) {
    .ci-inspect-row > p, .cir-title {
        font-size: 1.7vw;
    }
}

@media only screen and (max-width: 720px) {
    .ci-inspect-row > p, .cir-title {
        font-size: 2.2vw;
    }
}

/* For selection inspections */
.ci-inspect-options {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin-bottom: 0;
    margin-top: 0;
}

.ci-selected, .ci-deselected {
    width: 90%;
    margin-right: 5%;
    margin-top: 0;
    border: solid 2px var(--colorD1);
    border-radius: 5px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    transition: 0.1s;
}

@media only screen and (min-width: 981px) {
    .ci-selected, .ci-deselected {
        font-size: 0.9vw;
    }
}

@media only screen and (max-width: 980px) {
    .ci-selected, .ci-deselected {
        font-size: 1.6vw;
    }
}

@media only screen and (max-width: 720px) {
    .ci-selected, .ci-deselected {
        font-size: 2vw;
    }
}

.ci-selected {
    background-color: var(--colorD5);
    border-color:  var(--colorD5);
    color: var(--colorC2);
}

.ci-deselected {
    background-color: var(--colorD1);
    color: var(--colorC1);
}

.ci-deselected:hover {
    background-color: var(--colorD2);
    border-color: var(--colorD2);
    color: var(--colorC1);
    transition: 0.1s;
}

/* For text input inspections */
.ci-inspect-input {
    width: 100%;
    display: grid;
    grid-template-columns: 12% 30%;
}

.ci-inspect-input > input {
    width: 100%;
    margin-left: 0;
    border: solid 2px var(--colorD5);
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

.ci-inspect-input > p {
    text-align: left;
    margin-left: 5px;
}

@media only screen and (min-width: 981px) {
    .ci-inspect-input > input, .ci-inspect-input > p {
        font-size: 1vw;
    }
}

@media only screen and (max-width: 980px) {
    .ci-inspect-input > input, .ci-inspect-input > p {
        font-size: 1.6vw;
    }
}

@media only screen and (max-width: 720px) {
    .ci-inspect-input > input, .ci-inspect-input > p {
        font-size: 2vw;
    }
}

/* ----- Repairs ----- */
#ci-section-repairs, #ci-section-repairs-2 {
    width: 90%;
    margin-left: 0;
    margin-right: 10%;
}

.cst-hide {
    color: var(--colorC2);
}

.cir-single, .cir-options, .cir-input {
    display: grid;
    margin-top: 0;
    margin-bottom: 0;
}

.cir-single {
    grid-template-columns: 100%;
}

.cir-options {
    width: 90%;
    grid-template-columns: 33% 33% 33%;
}

.cir-input {
    grid-template-columns: 25% 70%;
}

.cir-selected, .cir-deselected {
    width: 90%;
    margin-right: 5%;
    margin-top: 0;
    border: solid 2px var(--colorB1);
    border-radius: 5px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    transition: 0.1s;
}

@media only screen and (min-width: 981px) {
    .cir-selected, .cir-deselected {
        font-size: 0.9vw;
    }
}

@media only screen and (max-width: 980px) {
    .cir-selected, .cir-deselected {
        font-size: 1.6vw;
    }
}

@media only screen and (max-width: 720px) {
    .cir-selected, .cir-deselected {
        font-size: 2vw;
    }
}

.cir-selected {
    background-color: var(--colorB5);
    border-color:  var(--colorB5);
    color: var(--colorC2);
}

.cir-deselected {
    background-color: var(--colorB1);
    color: var(--colorC1);
}

.cir-deselected:hover {
    background-color: var(--colorB2);
    border-color: var(--colorB2);
    color: var(--colorC1);
    transition: 0.1s;
}

.cir-options {
    border: solid 2px var(--colorB1);
    background-color: var(--colorB1);
    border-radius: 5px;
    padding: 2px;
    margin-bottom: 8px;
}

.cir-options > div {
    width: 100%;
    margin: 0;
    border-top: solid 2px var(--colorB1);
    border-bottom: solid 2px var(--colorB1);
    border-radius: 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: 0.1s;
}

@media only screen and (min-width: 981px) {
    .cir-options > div {
        font-size: 0.8vw;
    }
}

@media only screen and (max-width: 980px) {
    .cir-options > div {
        font-size: 1.5vw;
    }
}

@media only screen and (max-width: 720px) {
    .cir-options > div {
        font-size: 1.9vw;
    }
}

.cir-input > input {
    width: 100%;
    margin-left: 0;
    font-size: 1vw;
    border: solid 2px var(--colorB5);
    border-radius: 5px;
    padding: 0;
    text-align: center;
}

@media only screen and (min-width: 981px) {
    .cir-input > input {
        font-size: 1vw;
    }
}

@media only screen and (max-width: 980px) {
    .cir-input > input {
        font-size: 1.6vw;
    }
}

@media only screen and (max-width: 720px) {
    .cir-input > input {
        font-size: 2vw;
    }
}



/* ----- Submit button ----- */
#submit {
    margin-top: 20px;
    border: solid 2px var(--colorA5);
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

#submit:hover {
    background-color: var(--colorA1);
    color: var(--colorA5);
    transition: 0.1s;
}

@media only screen and (min-width: 981px) {
    #submit {
        font-size: 1.8vw;
        width: 30%;
        margin-left: 35%;
        margin-right: 35%;
    }
}

@media only screen and (max-width: 980px) {
    #submit {
        font-size: 2.2vw;
        width: 40%;
        margin-left: 30%;
        margin-right: 30%;
    }
}

@media only screen and (max-width: 720px) {
    #submit {
        font-size: 3vw;
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
    }
}

/* ============================== Error messages ============================== */
.ci-error {
    text-align: center;
    color: var(--colorC2);
    background-color: var(--colorD5);
    border: solid 5px var(--colorD5);
    border-radius: 3px;
}

@media only screen and (min-width: 981px) {
    .ci-error {
        font-size: 1.2vw;
        width: 30%;
        margin-left: 35%;
        margin-right: 35%;
    }
}

@media only screen and (max-width: 980px) {
    .ci-error {
        font-size: 1.6vw;
        width: 40%;
        margin-left: 30%;
        margin-right: 30%;
    }
}

@media only screen and (max-width: 720px) {
    .ci-error {
        font-size: 2vw;
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
    }
}

/* ============================== Palette, just for fun ============================== */
.palette {
    width: 100%;
    display: grid;
    grid-template-columns: 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6% 6.6%;
    height: 5px;
}

.palette > div {
    height: 5px;
}

.A1 { background-color: var(--colorA1);}
.A2 { background-color: var(--colorA2);}
.A3 { background-color: var(--colorA3);}
.A4 { background-color: var(--colorA4);}
.A5 { background-color: var(--colorA5);}

.B1 { background-color: var(--colorB1);}
.B2 { background-color: var(--colorB2);}
.B3 { background-color: var(--colorB3);}
.B4 { background-color: var(--colorB4);}
.B5 { background-color: var(--colorB5);}

.D1 { background-color: var(--colorD1);}
.D2 { background-color: var(--colorD2);}
.D3 { background-color: var(--colorD3);}
.D4 { background-color: var(--colorD4);}
.D5 { background-color: var(--colorD5);}

/* ============================== What gets printed ============================== */

#printout {
    width: 1125px;
    margin-left: calc((100vw - 1125px) / 2);
    margin-right: calc((100vw - 1125px) / 2);
}

#printout * {
    font-family: "Mulish", "Arial", sans-serif;
}

@media print {
    #printout {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

#header {
    width: 100%;
    display: grid;
    grid-template-columns: 25% 75%;
}

#header > img {
    text-align: left;
    margin-bottom: 20px;
}

#header > h1 {
    text-align: right;
    font-size: 25px;
    margin-bottom: 20px;
}

#header > img {
    width: 100%;
}

#meta-info {
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 1px black;

}

.mi-column {
    text-align: left;
    width: 100%;
    font-size: 9px;
    border-right: solid 1px black;
    margin: 0;
}

.mi-column > p {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

#diag-notes {
    width: 100%;
    text-align: left;
}

#diag-notes > p {
    font-size: 9px;
    margin-top: 0;
    margin-bottom: 0;
}

.section-header {
    text-align: center;
    background-color: black;
    color: white;
    height: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.section-header > h3 {
    font-size: 14px;
    font-weight: normal;
    margin-top: 5px;
    padding-top: 5px;
    background-color: black;
    color: white;
}

#inspection {
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    display: grid;
    grid-template-columns: 30% 30% 40%;
}

.inspect-column {
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 1px black;
}

.inspect-column > div {
    text-align: left;
}

.ic-external-border > div {
    border-right: solid 1px black;
}

.ir-even, .ir-even > p {
    background-color: white;
}

.ir-odd, .ir-odd > p {
    background-color: lightgray;
}

.ir-even, .ir-odd {
    height: 20px;
    font-size: 9px;
    padding: 2px;
    margin: 0;
}

.ir-even > *, .ir-odd > * {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.ir-bold > p {
    font-weight:bold !important;
}

#qr-code {
    text-align: center;
}

#qr-code > img {
    width: 50px;
}

#qr-code > p {
    font-size: 10px;
    margin-top: 0;
}

#disclaimer {
    text-align: center;
    font-size: 8px;
}

#signature {
    width: 90%;
    margin-right: 5%;
    text-align: right;
    font-size: 12px;
}

#tech-signature {
    font-size: 20px;
    font-family: "Calligraffitti", cursive;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline;
}

#print-instructions {
    text-align: center;
    color: var(--colorC2);
    background-color: var(--colorD5);
    border: solid 5px var(--colorD5);
    border-radius: 3px;
}

#print-and-save {
    width: 30%;
    margin-left: 35%;
    margin-left: 35%;
    background-color: black;
    color: white;
    border: solid 3px black;
    border-radius: 3px;
    font-size: 1.5rem;
    cursor: pointer;
}

#print-and-save:hover {
    background-color: white;
    color: black;
    transition: 0.1s;
}

@media print {
    #print-and-save {
        display: none;
    }
    #print-instructions {
        display: none;
    }
}