* {
    margin: 0;
    padding: 0;
}

h1 {
    font-weight: bolder;
    font-size: 3em;
    padding: 1em;
    text-align: center;
    margin: 20px auto; /* Vertical  Horizontal */
}


h2 {
    font-size: .7em;
    height: auto;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px;
    box-sizing: border-box; /* Add this */
}

h3 {
    font-size: 1.4em;
    font-weight: bolder;
    height: 40px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    padding-top: 5px;
    padding-bottom: 10px;
    text-align: center;
    box-sizing: border-box; /* Add this */
}

h4 {
    font-palette:dark;
    color: red;
    font-size: 1em;
    padding: 1em;
    text-align: center;
    margin: 5px auto; /* Vertical  Horizontal */
    box-sizing: border-box; /* Add this */
}

h1, h2, h3, h4, h5, h6, p {
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    border-width: medium;
    border-color: red;
    box-sizing: border-box; /* Add this */
}

.mainh1 {
    height: auto;
    background-color: initial;
    margin: 10px; /* Vertical  Horizontal */
    font-family: Algerian;
    font-weight: bolder;
    color: darkviolet;
    font-size: 4em;
    align-content:center;
    align-items:center;
    text-align: center;
    margin: 5px; /* Vertical  Horizontal */
}

.mainh2 {
    height: auto;
    background-color: initial;
    margin: 10px; /* Vertical  Horizontal */
    font-family: Arial;
    font-weight: bolder;
    color: blue;
    font-size: 2.5em;
    align-content:center;
    align-items:center;
    text-align: center;
    margin: 5px; /* Vertical  Horizontal */
}

.apph1 {
    height: auto;
    background-color: initial;
    margin: 10px; /* Vertical  Horizontal */
    font-family: Algerian;
    font-weight: bolder;
    color: darkviolet;
    font-size: 3em;
    align-content: center;
    align-items: center;
    text-align: center;
    margin: 5px; /* Vertical  Horizontal */
}

.apph2 {
    height: auto;
    background-color: initial;
    margin: 10px; /* Vertical  Horizontal */
    font-family: Arial;
    font-weight: bolder;
    color: blue;
    font-size: 2em;
    align-content: center;
    align-items: center;
    text-align: center;
    margin: 5px; /* Vertical  Horizontal */
}

.crudh1 {
    height: 40px;
    background-color: initial;
    margin: 1px; /* Vertical  Horizontal */
    font-family: Arial;
    font-weight: bolder;
    color: blue;
    font-size: 2em;
    align-content: center;
    align-items: center;
    text-align: center;
    margin: 1px; /* Vertical  Horizontal */
}
.menu {
    height: auto;
    background-color: lightblue;
    justify-content: center;
    align-items: center;
    display: flex
}

button {
font-weight: bold;
background-color:aqua;
color: royalblue;
border: 2px;
border-radius: 3px;
padding: 10px 10px;
cursor: pointer;
margin: 5px;
}

.crudbutton {
    font-weight: bold;
    background-color: aqua;
    color: royalblue;
    border: 1px;
    padding:0px;
    cursor: pointer;
    margin: 1px;
}

.menu button:hover {
    background-color: #76AEED;
}

.menu button:active {
    background-color: #407FC7;
}

.logo {
    height: 100px;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: : center;
}

img {
    width: 300px;
}
.pics {
    object-fit: scale-down;
    width: 280px;
    height: auto;
}
.picColumn {
    height: auto;
    width: 290px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}


.logo_pic {
    width: 200px;
    display: block;
}

strong, em {
    margin: 5px;
}

body {
    color: #414141; /* Dark gray */
    background-color: #EEEEEE; /* Light gray */
    font-size: 14px;
}

page {

}

.header {
    height: auto;
    background-color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px;
    box-sizing: border-box; /* Add this */
}

.customer_head {
    height: auto;
    display: flex;
    background-color: white;
    margin: 10px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-wrap: wrap;
    flex-direction: row;
    box-sizing: border-box; /* Add this */
}

.todslogos
{
    font-size: 16px;
    font-weight: bolder;
    padding-right: 5px;
}
.selectcolumn {
    height: 50px;
    width: auto;
    display: flex;
    background-color: white;
    margin: 0px 0px; /* Vertical  Horizontal */
    flex-direction: column;
    align-items: left;
    text-align: left;
    box-sizing: border-box; /* Add this */
}

.logo_section {
    height: auto;
    display: flex;
    background-color: initial;
    margin: 10px; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Add this */
    flex-wrap: wrap;
}

.header_section {
    height: auto;
    display: flex;
    background-color: initial;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    box-sizing: border-box; /* Add this */
}

.row_section {
    height: auto;
    display: flex;
    background-color: initial;
    margin: 1px; /* Vertical  Horizontal */
    padding: 1px;
    flex-direction: row;
    justify-content: space-around;
    box-sizing: border-box; /* Add this */
}

.structurerow {
    height: auto;
    display: flex;
    background-color: white;
    margin: 1px; /* Vertical  Horizontal */
    padding: 1px;
    flex-direction: row;
    justify-content: space-around;
    border: 2px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.structureviewrow {
    height: auto;
    display: flex;
    background-color: white;
    margin: 1px; /* Vertical  Horizontal */
    padding: 1px;
    flex-direction: row;
    justify-content: space-around;
    border: 2px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.workordereditrow {
    height: auto;
    display: flex;
    background-color: white;
    margin: 1px; /* Vertical  Horizontal */
    padding: 1px;
    flex-direction: row;
    justify-content: space-around;
    border: 2px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.woeditcolumn1 {
    height: auto;
    width: 400px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.woeditcolumn2 {
    height: auto;
    width: 325px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.woeditcolumn3 {
    height: auto;
    width: 275px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.woeditcolumn4 {
    height: auto;
    width: 225px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}

.gridrow_section {
    height: auto;
    display: flex;
    font-family: Arial;
    font-weight: bolder;
    color: darkblue;
    font-size: 10px;
    background-color: white;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    justify-items: center;
    margin: 0px 3px 0px 3px;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box; /* Add this */
}

.gridcolumn {
    width: auto;
    font-family: Arial;
    font-weight: bolder;
    color: black;
    font-size: 10px;
    background-color: white;
    text-align: center;
    justify-content: center;
    justify-items: center;
    margin: 0px 3px 0px 3px;
    padding: 0px 0px 0px 0px;
}

.column_section {
    height: auto;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    box-sizing: border-box; /* Add this */
}


.entryblock {
    display: flex;
    width: 500px;
    height: auto;
    padding-bottom: 10px;
}



.fieldblock {
    display: flex;
    width: 200px;
    text-align: left;
}

.datainput {
    width: 90px;
    font-weight: bolder;
    box-sizing: border-box; /* Add this */
}
.datainput {
    width: 90px;
    font-weight: bolder;
    box-sizing: border-box; /* Add this */
}
.textarea {
    min-width: 500px;
    max-width: 500px;
    min-height: 100px;
    max-height: 200px;
}
.wotextarea {
    min-width: 375px;
    max-width: 375x;
    min-height: 100px;
}

.structure_section1 {
    height: auto;
    width: 600px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    font-size: 12.0pt;
    font-weight: bolder;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.structureview1 {
    height: auto;
    width: 225px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.structureview2 {
    height: auto;
    width: 325px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    font-weight: bolder;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.structureview3 {
    height: auto;
    width: 250px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}
.structureview4 {
    height: auto;
    width: 350px;
    display: flex;
    background-color: white;
    margin: 5px auto; /* Vertical  Horizontal */
    padding: 5px;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}

.structurepdfshow {
    width: 575px;
    height: 500px;
    background-color: white;
}

.structure_section2 {
    height: auto;
    width: 575px;
    display: flex;
    background-color: white;
    margin: 5px;
    flex-direction: column;
    text-align: left;
    border: 1px solid #5D6063; /* Dark gray */
    box-sizing: border-box; /* Add this */
}

.structureentryblock {
    margin: 3px 5px 3px 5px;
    display: flex;
    width: 575px;
    height: auto;
}

.structurenameblock {
    display: flex;
    width: 150px;
    text-align: left;
    font-weight: bolder;
}
.structurenameview {
    display: flex;
    width: 150px;
    text-align: left;
    color: blue;
    font-size: 10.0pt;
    font-weight: bolder;
}
.wonameview {
    display: flex;
    width: 150px;
    text-align: left;
    color: blue;
    font-size: 10.0pt;
    font-weight: bolder;
}
.structuredatablock {
    display: flex;
    width: 125px;
    text-align: left;
    font-weight: bolder;
    font-size: 10.0pt;
    margin-right:2px;
}
.wodatablock {
    display: flex;
    width: 125px;
    text-align: left;
    font-weight: bolder;
    font-size: 10.0pt;
}

.structureselectblock {
    width: auto;
    font-size: 10.0pt;
    font-weight: bold;
    box-sizing: border-box; /* Add this */
}

.crudrowsection {
    height: auto;
    display: flex;
    background-color: initial;
    margin: 1px; /* Vertical  Horizontal */
    padding: 1px;
    flex-direction: row;
    justify-content: space-around;
    box-sizing: border-box; /* Add this */
}


.footer_section {
    height: auto;
    display: flex;
    background-color: white;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    box-sizing: border-box; /* Add this */
}



.column_section textarea {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    border: 2px solid #D6D9DC;
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 7px;
    box-sizing: border-box;
}

.pdfshow {
    width: 650px;
    height: 650px;
    background-color: white;
}
.woeditpdfshow {
    width: 325px;
    height: 425px;
    background-color: white;
}

.logopics {
    border: 1px solid #fff;
    width: 200px;
    height: 150px;
}

.logopics1 {
    margin-left:300px;
    border: 1px solid #fff;
    width: 200px;
    height: 150px;
}

.logopics2 {
    margin-right:300px;
    border: 1px solid #fff;
    width: 200px;
    height: 150px;
}

.mainpics {
    object-fit: scale-down;
    width: 325px;
    height: auto;
}

.pictitle {
    display: flex;
    font-weight: bolder;
    background-color:aqua;
    color:aqua;
}

.sr-only {
    sr-only position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.input-label {
    width: 50%;
    padding: 1px;
    background-color: yellow;
    font-family: Arial;
    font-palette:dark;
    font-size:large;
    color: darkblue;
    border-radius: 1px;
    cursor: pointer;
}
.input-label2 {
    width: 100%;
    padding: 1px;
    background-color: yellow;
    font-family: Arial;
    font-palette: dark;
    font-size: large;
    color: darkblue;
    border-radius: 1px;
    cursor: pointer;
}

.inputfile-label {
    padding: 1px;
    background-color: red;
    font-family: Arial;
    font-palette: dark;
    font-size: large;
    color: white;
    border-radius: 1px;
    cursor: pointer;
}

.gray {
    color: gray;
    font-weight: bolder
}

.white {
    color: white;
    font-weight: bolder
}

.red {
    color: indianred;
    font-weight: bolder
}
.orange {
    color: orange;
    font-weight: bolder
}
.purple {
    color: mediumpurple;
    font-weight: bolder
}
.green {
    color: lightgreen;
    font-weight: bolder
}

.yellow {
    color: yellow;
    font-weight: bolder
}

.simple-box-green {
    font-color: green;
    background-color: green;
    padding: 1px;
    text-align: center;
    border: 1px solid #5D6063; /* Dark gray */
    border-radius: 2px;
    height: 13px;
    width: 16px;
    padding-left: 14px;
    margin-left: 20px;
    margin-right: 10px;
}

.simple-box-red {
    font-color: red;
    background-color: red;
    font-weight: 0;
    padding: 1px;
    text-align: center;
    border: 1px solid #5D6063; /* Dark gray */
    border-radius: 2px;
    height: 13px;
    width: 16px;
    padding-left: 14px;
    margin-left: 20px;
    margin-right: 10px;
}

.simple-box-yellow {
    font-color: yellow;
    background-color: yellow;
    font-weight: bold;
    padding: 1px;
    text-align: center;
    border: 1px solid #5D6063; /* Dark gray */
    border-radius: 2px;
    height: 13px;
    width: 16px;
    padding-left: 14px;
    margin-left: 20px;
    margin-right: 10px;
}