html {
    /* font: 18px Arial, Helvetica, Tahoma, Verdana, sans-serif; */
    font-family: system-ui, -apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 18px;
    line-height: 1.50;
}

.body {
    background-color: #fff;
    /* background-color: lightgray; */
    padding: 0.5rem;
    border-radius: 1rem;
    display: flex;
    flex-flow: column wrap;
    align-content: center;
}

.title {
    color: rgb(122,0,14);
    font-size: 1.5rem;
    font-weight: 600;
}

input[type=text], input[type=date], input[type=password], input[type=time], input[type=email] {
    border: solid 2px #000;
    border-radius: 0.4rem;
    padding: 0.2rem 0.4rem;
}

input[type=text]:focus {
    background-color: bisque;
    outline: none;
    border-color: rgb(122,0,14);
}

input[type=password] {
    /* Do not use the three lines below - causes Safari issues */
    /*-webkit-touch-callout: none;*/
    /*-webkit-user-select: none;*/
    /*-khtml-user-select: none;*/
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type=button], input[type=submit], button {
    background-color: rgb(239,239,239);
    border-radius: 0.4rem;
    border: solid 1px #000;
    padding: 0.2rem 0.4rem;
}

input[type=submit]:hover, input[type=button]:hover, button:hover {
    background-color: bisque;
    border-color: rgb(122,0,14);
}

input[type=submit]:active, input[type=button]:active, button:active,
input[type=submit]:focus, input[type=button]:focus, button:focus
{
    background-color: rgb(239,239,239);
    border-color: #000;
}

select {
    border: solid 2px #000;
    background-color: aquamarine;
    /*border-radius: 0.4rem;*/
}

/* Table Defaults */
table {
    /* border: solid 1px #000; */
    border-spacing: 0;
    overflow: hidden;
    border-collapse: collapse;
}

    table th {
        color: #000;
        background-color: lightsteelblue;
        font-weight: bold;
        padding: 0.2rem;
        text-align: center;
        /* border-left: solid 1px #000; */
        border: solid 1px #000;
    }

    table td {
        /* border-top: solid 1px #000; */
        /* border-left: solid 1px #000; */
        border: solid 1px #000;
        padding: 0.2rem;
        empty-cells: show;
    }

.repairB {
    display: inline-block;
}

.repairB th {
    text-align: left;
}

.repairB tr td:last-child {
    max-width: 30rem;
}

.repairS {
    display: none;
}

.repairS th {
    text-align: left;
}

.joblistB, .divtbl2 {
    display: inline-block;
}

.joblistS th, .joblistS td {
    text-align: left;
}

.joblistS, .divtbl2 {
    display: none;
}

.joblistS td div {
    display: flex;
    gap: 0.5rem 0.5rem;
    flex-flow: row wrap;
    align-content: center;
}

.joblistS td div span {
    width: 1.5rem;
    height: 1.5rem;
    /* background-color: lightpink; */
    text-align: center;
}

.blankrow {
    height:1.5rem;
    border: none;
}

@media only screen and (max-width:650px) {
    html {
        font-size: 18px;
    }

    .repairB, .joblistB, .divtbl1 {
        display: none;
    }

    .repairS, .joblistS, .divtbl2 {
        display: inline-block;
    }
}

.stageList {
    display: flex;
    gap: 1rem 1rem;
    flex-flow: row wrap;
    align-content: center;
}    

.stage {
    /* border: solid 1px #000; */
    position: relative;
    background-color: rgb(248, 249, 250);
    border-top: solid 1px rgb(200, 200, 200);
    border-left: solid 3px rgb(122,0,14);
    border-bottom: solid 3px rgb(200, 200, 200);
    border-right: solid 2px rgb(200, 200, 200);
    border-radius: 0.4rem;
    padding: 0.2rem 0.4rem;
    width: 6rem;
    height: 6rem;
    text-align: center;
}

.chev {
    display: inline-block; 
    border-right: 3px solid #3b3b3b; 
    border-bottom: 3px solid #3b3b3b; 
    width: 0.8rem; 
    height: 0.8rem; 
    transform: rotate(-45deg);
}

.chev1 {
    position: absolute;
    bottom: 0.6rem;
    right:1rem;
}

.chev2 {
    position: absolute;
    bottom: 0.6rem;
    right:0.6rem;
}

.tick {
    display: inline-block; 
    border-right: 3px solid #3b3b3b; 
    border-bottom: 3px solid #3b3b3b; 
    width: 0.6rem; 
    height: 1.2rem; 
    transform: rotate(30deg);
}

.tick1 {
    position: absolute;
    bottom: 0.5rem;
    right:1.1rem;
}

.tick2 {
    position: absolute;
    bottom: 0.5rem;
    right:0.7rem;
}

.photoList {
    display: flex;
    gap: 1rem 1rem;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
} 

.pTable td > div {
    width: 10rem;
    vertical-align: top;
    text-align: center;
}

.photo {
    max-width: 10rem;
    max-height: 10rem;
    cursor: pointer;
}

.bigphoto {
    width: 100%;
}

.sigtable {
    max-width: min(100%, 30rem);
}

.sig {
    width: min(100%, 20rem);
}

.overflowxauto {
    overflow-x: auto;
}

.tal {
    text-align: left;
}

.tac {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.ml05 {
    margin-left: 0.5rem;
}

.ml10 {
    margin-left: 1rem;
}

.mr05 {
    margin-right: 0.5rem;
}

.mr20 {
    margin-right: 2rem;
}

.mr15 {
    margin-right: 1.5rem;
}

.mr10 {
    margin-right: 1rem;
}

.mt05 {
    margin-top: 0.5rem;
}

.mt10 {
    margin-top: 1rem;
}

.mb05 {
    margin-bottom: 0.5rem;
}

.mb10 {
    margin-bottom: 1rem;
}

.w1 {
    width: 1rem;
}

.w2 {
    width: 2rem;
}

.w3 {
    width: 3rem;
}

.w5 {
    width: 5rem;
}

.w10 {
    width: 10rem;
}

.w15 {
    width: 15rem;
}

.w20 {
    width: min(100%, 20rem);
}

.w30 {
    width: 30rem;
}

.w100p {
    width: 100%;
}

.scol {
    color: rgb(153,0,0);
}

.h4 {
    height: 4rem;
}

.h5 {
    height: 5rem;
}

.h6 {
    height: 6rem;
}

/* Background colors */
.bcLGN {
    background-color: lightgreen;
}

.bcLPK {
    background-color: lightpink;
}

.bcLSB {
    background-color: lightsteelblue;
}

.bcRD {
    background-color: red;
}

.bcOR {
    background-color: orange;
}

.bcYL {
    background-color: yellow;
}

.bcGN {
    background-color: green;
}

.bcBL {
    background-color: dodgerblue;
}

.bcPPL {
    background-color: purple;
}

.bcAQ {
    background-color: aqua;
}

.bcLGY {
    background-color: rgb(220, 220, 220);
}

.colRD {
    color: red;
}

.colGN {
    color: green;
}

.colWH {
    color: white;
}

.warn {
    display: inline-block;
    background-color: red;
    color: white;
    padding: 0.3rem;
}

.fbGN {
    margin-top: 1rem;
    color: green;
}

.fbRD {
    margin-top: 1rem;
    color: red;
}

.hide {
    display: none;
}

.pointer {
    cursor: pointer;
}

/* Table links */
.linkDiv:hover {
    background-color: aquamarine;
    cursor: pointer;
}

/* Please Wait */
.loader {
    background-color: white;
    box-sizing: border-box;
    border: 3px solid rgb(153,0,0);
    border-radius: 0.5rem;
    width: 12rem;
    min-height: 10rem;
    z-index: 2;
    box-shadow: rgba(0,0,0,0.2) 0.4rem 0.4rem 0.2rem;
    position: fixed;
    top: 40vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    padding: 1rem;
    text-align: center;
}

    .loader > div {
        font-weight: bold;
        color: rgb(153,0,0);
    }

    .loader > img {
        height: 4rem;
        margin-top: 1rem;
    }

/* Custom Radio Buttons & Checkboxes */
/* The container */
.container {
    /*display: block;*/
    position: relative;
    padding-left: 1.3rem;
    margin-right: 1rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1rem;
    width: 1rem;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: rgb(153,0,0);
}

/* When the radio button is checked, add Sentex color background */
.container input:checked ~ .checkmark {
    background-color: rgb(153,0,0);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 0.25rem;
    left: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: white;
}

/* Create a custom checkbox */
.cbmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1rem;
    width: 1rem;
    background-color: #fff;
    border: 1px solid rgb(153,0,0);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .cbmark {
    background-color: rgb(153,0,0);
}

/* When the checkbox is checked, add Sentex color background */
.container input:checked ~ .cbmark {
    background-color: rgb(153,0,0);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.cbmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the tick when checked */
.container input:checked ~ .cbmark:after {
    display: block;
}

/* Style the tick */
.container .cbmark:after {
    top: 0.1rem;
    left: 0.3rem;
    width: 0.25rem;
    height: 0.5rem;
    border: solid white;
    border-width: 0 0.2rem 0.2rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}