body { font-family: "Poppins", sans-serif; font-size: 14px;  letter-spacing: 1px; background-color: #f1f3f4; color: #000;  }
* { box-sizing: border-box; padding: 0; margin: 0; }
.col { max-width: 99%; clear: both; margin: 0 auto; }
.col-2 { width: 48%; display: inline-block; vertical-align: top; padding: 7px; }
.col-3 { width: 30%; display: inline-block; vertical-align: top; }
.top-line { clear: both; width: 100%; background-color: #477596; color: #fff; line-height: 40px; height: 40px; font-weight: 700; }
.top-line-options { display: inline-block; width: 100px; border-right: 1px solid #436885; text-align: center; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.content-window { display: block; margin: 0 auto; max-width: 90%; padding: 50px 0; }
#buttonCss { width: 100px; height: 40px; padding: 3px; margin: 3px; }
h5 { color: red; }
.pad5 { padding: 5px; }

.customer-window { margin: 20px; padding: 50px; line-height: 25px; font-size: 20px; }
.cyanBack { background-color: #e0f9f7; padding: 0 3px; width: 300px; line-height: 40px; vertical-align: top;  }
#h50 { height: 50px; line-height: 50px;  }
.padSides { text-underline-offset: 2px; }
.header-line { clear: both; width: 100%; background-color: #006599; height: 70px; }
.header-top-line { width: 96%; height: 35px; color: #fff; line-height: 35px; padding: 0 35px;  }
.header-bottom-line { width: 80%; float: right; background-color: #7c909b; height: 35px; text-align: right; line-height: 35px; color: #fff; }
.padSides { padding: 0 20px; }
.float-right { float: right; }
.float-left { float: left;  }
#whiteFont { color: #fff; }

textarea { width: 300px; height: 150px; resize: none; }
input[type=button], input[type=reset] { margin-top: 20px; width: 60%; height: 40px; line-height: 40px; text-transform: uppercase; }
input[type=password] { font-family: "Poppins", sans-serif; font-weight: 400; font-size: 12px; background-image: url('img/locked-padlock.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; }
#serviceLocation { height: 50px; line-height: 50px; width: 500px; }
#greenButton { background-color: #7db00e; padding: 5px; color: #fff; margin: 10px; }
.adminOptions { padding: 3px; padding-left: 30px; font-size: 10px; line-height: 12px; height: 12px; }
.customerCreation { width: 60%; margin: 50px auto; border-radius: 3px; border: 1px solid #eaeaea; }
.customer-content { width: auto; display: inline-block; padding-right: 13px; border: 1px solid; padding: 9px; vertical-align: top; font-size: 10px; }
.customer-leftside, .customer-rightside { display: inline-block; vertical-align: top; line-height: 30px; height: 30px; margin: 3px; }
.customer-leftside { width: 200px; }
.checkAnswerBox { border: 1px solid; width: 50px; margin: 3px; display: inline-block; }
.jobCard { width: 20%; margin: 50px auto; padding: 50px !important;  }
a { color: #000; text-decoration: none; }
#whiteFont { color: white; }
.middleEditCustomer { clear: both; width: 60%; margin: 0 auto; vertical-align: top; }
.whiteBox { background-color: #fff; width: 80%; margin: 0 auto; padding: 3px; text-transform: uppercase;  }
.customer-profile-bar { display: inline-block; padding: 8px; background-color: #fff; height: 500px; vertical-align: top; width: 330px; }
.customer-profile-content { display: inline-block; vertical-align: top; }
.noteBox { background-color: #fff; width: 48%; display: inline-block; height: 100px; width: 400px; color: #333; margin: 0 20px; }
.works-blue-header { background-color: #477596; line-height: 30px; height: 30px; color: #fff; margin-top: 10px; }
.works-header { display: inline-block; vertical-align: top; padding: 0 50px; }
.works-subheader { font-weight: 700; height: 25px; line-height: 25px; border-bottom: 3px solid #ccc; }
.works-display { background-color: #fff; border: 2px solid #eaeaea; border-radius: 5px; margin: 10px 30px; padding: 9px; }
#businessLink { color: #000; font-size: 24px; }
#editButtons { background-color: grey; width: 75px; height: 30px; font-weight: 700; }
#greenGlow { color: #000; font-weight: 700;  line-height: 30px; }
#greenGlow:hover { color:green; border-bottom: 1px solid green;  }
#blackFont { color: #000; font-weight: 700; }
#redFont { color: red; }
.joblist-options { display: inline-block; padding: 10px; border: 1px solid #333; }
.pd20 { padding: 20px; }
.joblist-border { border-radius: 15px; border: 1px solid #333; width: 95%; margin: 0 auto; overflow: hidden;  }
.column { display: inline-block; vertical-align: top; }
.blue-background { background-color: #006599; color: #fff; }
.lightblue-box { background-color: #006599; padding: 7px; border: 2px solid #eaeaea; color: #fff; font-size: 16px; }
.hide, .div_content { display: none; }
.pad20 { padding: 20px; }
.moveOver { padding-left: 25px; }
.bold { font-weight: 700; }
.selection-menu { clear: both; width: 300px; display: inline-block; vertical-align: top; line-height: 30px; height: 30px; }
.selection-options { display: inline-block; }
.loginBox { background-color: #fff; border-radius: 15px; border: 1px solid #000; width: 20%; margin: 100px auto;  }
p { margin: 0; }
.customer-fullwidth { clear: both; width: 100%; font-size: 14px; background-color: #b9d9ee; height: 40px; line-height: 40px; border: 1px solid; padding: 7px; }
.customer-listing { clear: both; width: 100%; font-size: 14px;   height: 40px; line-height: 40px; border-bottom: 1px solid #bcbecd; border: 1px solid; padding: 7px; background-color: #fff; }
.customer-listing:hover { background-color: #f4f4f4; color: #fff; }
.box200 { width: 200px; border: 1px solid #000; box-shadow: 5px 10px 10px #888888; padding: 13px; margin: 13px; font-size: 16px; }
.adminBox { width: 50%; margin: 50px auto; text-align: center; box-shadow: 5px 10px 10px #888888; border: 1px solid #333; border-radius: 3px; padding: 13px; }
.customer-listing a { color: #000; }
.wd100 { width: 100px; }
.wd150 { width: 150px; }
.wd200 { width: 200px; }
.wd250 { width: 250px; }
.wd50 { width: 50px; }
.wd300 { width: 360px; }
.wd500 { width: 500px; }
.wd50 { text-align: center; }
.hd50 { height: 50px; line-height: 50px; }
.hd90 { height: 90px; line-height: 90px; }
.bd { border: 1px solid #000; padding: 2px; }
#blue, .blueFont { color: #477596; font-weight: bold;}
#fullButton { width: 100%; height: 50px; line-height: 50px; text-align: center; background-color: #006599;  border: 2px solid #eaeaea; color: #fff; font-size: 16px;}
.customer-info-line { width: 100%; clear: both; height: 40px; line-height: 40px; background-color: #eeeeee; color: #000; padding-left: 20px; border-bottom: 1px solid #ddd; }
.customerLeft-Side { height: 100vh; width: 350px; display: inline-block; padding-left: 20px; background-color: #fff; }
.customerRight-Side { height: 100vh;  width: 70%; float: right; display: inline-block; }
.information-line { height: 33px; line-height: 33px; clear: both; }
.note-window { border: 1px solid #333; background-color: #fff; color: #000; display: inline-block; margin: 30px; width: 30%; height: 100px; padding: 13px; }
.content-whiteBox { border-radius: 13px; border: 1px solid #ddd; background-color: #fff; color: #000; width: 90%; margin: 20px 0; }
.content-header-line { background-color: #477596; color: #fff; font-weight: 700; height: 30px; line-height: 30px; padding-left: 5px; text-transform: uppercase; font-size: 12px; }
.content-date, .content-next-visit { display: inline-block; width: 100px; padding: 0 3px; }
.content-description { display: inline-block; width: 400px;  padding: 0 3px; }
.float-right { float: right; }
.contentBox-subheader { height: 30px; line-height: 30px; padding: 0 10px; }
.contentBox { text-align: left; margin: 20px 0; }
.content-listing { height: 30px; line-height: 30px; }
.content-listing:hover { background-color: #ffffcd; }
.div1, .div2, .div3 { display: none; }
.content, #other-questions { display: none; }