* {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.s1 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 12pt;
}

.s2 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
}

.s3 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 8pt;
}

.verdana8 {
    color: #231F20;
    font-family: "Verdana", sans-serif;
    font-style: normal;
    font-weight: bolder;
    text-decoration: none;
    font-size: 8pt;
}


.s4 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
}

p {
    color: #231F20;
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 6pt;
    margin: 0pt;
}

.s5 {
    color: #231F20;
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 6pt;
}

.s6 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 8pt;
}

.s7 {
    color: black;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
}

.s8 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 6pt;
}

.s9 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 6pt;
}

.s10 {
    color: black;
    font-family: "Times New Roman", serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
}

.s11 {
    color: black;
    font-family: "Times New Roman", serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
    vertical-align: -2pt;
}

.s12 {
    color: #231F20;
    font-family: "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 12pt;
}

.s13 {
    color: #231F20;
    font-family: "Times New Roman", serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 12pt;
    vertical-align: -7pt;
}

.s14 {
    color: #231F20;
    font-family: "Times New Roman", serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 12pt;
    vertical-align: 2pt;
}

.s15 {
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 8pt;
    vertical-align: 2pt;
}

li {
    display: block;
}

#l1 {
    padding-left: 0pt;
    counter-reset: c1 1;
}

#l1>li>*:first-child:before {
    counter-increment: c1;
    content: counter(c1, decimal)". ";
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
}

#l1>li:first-child>*:first-child:before {
    counter-increment: c1 0;
}

#l2 {
    padding-left: 0pt;
    counter-reset: d1 4;
}

#l2>li>*:first-child:before {
    counter-increment: d1;
    content: counter(d1, decimal)". ";
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
}

#l2>li:first-child>*:first-child:before {
    counter-increment: d1 0;
}

li {
    display: block;
}

#l3 {
    padding-left: 0pt;
    counter-reset: d1 5;
}

#l3>li>*:first-child:before {
    counter-increment: d1;
    content: counter(d1, decimal)". ";
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 10pt;
}

#l3>li:first-child>*:first-child:before {
    counter-increment: d1 0;
}

table,
tbody {
    vertical-align: top;
    overflow: visible;
}

.range-6-10, .acidity-list, .body-list, .clean-cup-list, .sweetness-list {
    display: flex;
    flex-direction:row ; /*  column; */
    justify-content: space-between;
    /*writing-mode: :sideways-lr;*/
    width:-webkit-fill-available;
    color: #231F20;
    font-family: "Arial Black", sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 8pt;
}
option {
    padding: 0;
}

input[type="range"] {
    width:-webkit-fill-available;
    margin: 0;
}


/* -- From form.php */
main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.outer {
    display: grid;
    grid-template-columns: 768px;
    grid-template-rows: 1080px;
    scroll-behavior: auto;
}

/*.outer {
    display: grid;
    min-width: 100vw;
}
*/
.coffee-quality-control-checklist {
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 256px);
}

.green-coffee-inspection {
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: 224px 96px 64px repeat(3, 128px);
    border-style: solid;
    border-width: 2px;
    border-left: hidden;
    border-right: hidden;
    border-bottom: hidden;
}

.roasting {
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, 384px);
}

.roasting-process-checks {
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 128px);
    border-style: solid;
    border-width: 2px;
    border-left: hidden;
    border-bottom: hidden;
}

.post-roast-quality-check {
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(1, 384px);
    border-style: solid;
    border-width: 2px;
    border-left: hidden;
    border-right: hidden;
    border-bottom: hidden;
}

.cupping {
    padding: 0px;
    display: grid;
    gap: 0;
    /* column-gap: 20px; */
    /* row-gap: 10px; */
    grid-template-columns: repeat(7, 109px);
    border-style: solid;
    border-width: 2px;
    border-left: hidden;
    border-right: hidden;
    border-bottom: hidden;
}

.packaging {
    padding: 0px;
    padding-top: 7px;
    display: grid;
    gap: 0;
    /* column-gap: 20px;
    row-gap: 10px; */
    /* grid-template-columns: 256px repeat(4, 128px); */
    /* grid-template-columns: 432px repeat(4, 84px); */
    grid-template-columns: 288px repeat(5, 96px);
    border-style: solid;
    border-width: 2px;
    border-left: hidden;
    border-right: hidden;
    border-bottom: hidden;
}

.final-approval {
    padding: 10px;
    display: grid;
    gap: 0;
    /* column-gap: 20px;
    row-gap: 10px; */
    grid-template-columns: repeat(5, 153.6px);
    border-style: solid;
    border-width: 2px;
    border-left: hidden;
    border-right: hidden;
    border-bottom: hidden;
}

.grid-cell {
    width: -webkit-fill-available;
    margin: 2px;
}
.cell-required {
    border-style: solid;
    border-width: -2px;
    /* border-spacing: -2px; */
    border-color: crimson;
}

.grid-cell-center {
    width: -webkit-fill-available;
    margin: 0;
    text-align: center;
}

.v-small {
    color: #231F20;
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 6pt;
    margin: 0pt;
}

.grid-cell-flex-center {
    width: -webkit-fill-available;
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 12px; */
}


/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    /* width: 15rem; */

    width:-webkit-fill-available;
    position: relative;
    top: -10px;
    height:2px;
}

/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: rgb(115, 115, 115);
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    /*margin-top: -12px;*/
    /* Centers thumb on the track */

    /*custom styles*/
    background-color: rgb(50, 50, 50);
    height: 1.0rem;
    /* 2rem;*/
    width: 0.3rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
    border: 1px solid #053a5f;
    outline: 3px solid #053a5f;
    outline-offset: 0.125rem;
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
    border: none;
    /*Removes extra border that FF applies*/
    border-radius: 0;
    /*Removes default border-radius that FF applies*/

    /*custom styles*/
    background-color: #5cd5eb;
    height: 2rem;
    width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
    border: 1px solid #053a5f;
    outline: 3px solid #053a5f;
    outline-offset: 0.125rem;
}

.range-val {
    position: relative;
    top: 0px;
    left: 40px;
    color: black;
    z-index: 1;
    background: white;
    width: 30px;
    border-style:solid;
    border-radius:3px;
    border-width:1px;
    text-align: center;
    height: 10px;
}

.weight-cell {
    border-style:solid;
    border-width: 1px;
    margin-bottom: 5px;
}
