body {
    background-color: #6d695c;
    background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: 70px 120px;
}

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#admin {
    height: 100%;
    display: block;
    position: relative;
    left: 50%;
    transform: translate(-50%,0);
    width: 400px;
    border: 2px solid black;
    overflow: hidden;
}
#user {
    height: 100%;
    display: block;
    position: relative;
    left: 50%;
    transform: translate(-50%,0);
    width: 400px;
    border: 2px solid black;
    overflow: hidden;
    background-color: #dddddd;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23eeeeee' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}
#adminPage {
    width: 100%;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
}
#userPage {
    width: 100%;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
}
#adminControls {
    position: relative;
    height: 35px;
    margin-top: 10px;
}

#adminTop {
    height: 160px;
    border-bottom: 2px solid red;
    padding: 0 15px;
    background-image: linear-gradient(150deg, #d3d3d3 25%, #d3d3df 25%, #d3d3df 33.33%, #d3dfd3 33.33%, #d3dfd3 41.67%, #dfd3d3 41.67%, #dfd3d3 50%, #d3d3d3 50%, #d3d3d3 75%, #d3d3df 75%, #d3d3df 83.33%, #d3dfd3 83.33%, #d3dfd3 91.67%, #dfd3d3 91.67%, #dfd3d3 100%);
    background-size: 12.00px 6.93px;
}
#userTop {
    background-color:lightgray;
    text-align:center;
    font-size:x-large;
    border-bottom:6px groove blue;
}

#adminBottom {
    height: calc(-160px + 100vh);
     background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313;
  background-size: 20px 20px;
}

.message1 {
    background-color: black;
    text-align: center;
    border-bottom: 2px solid red;
    height: 50px;
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    font-size: larger;
    line-height: 50px;
    color: white;
}

button.logout {
    width: 125px;
    height: 31px;
    background-color: lightblue;
    border-radius: 20px;
}

#logout {
    float: left;
    text-align: center;
    border-radius: 10px;
    border: 1px solid black;
    background-color: lightblue;
    height: 31px;
}

#logout a {
    display: block;
    width: 100px;
    position: relative;
    color: black;
}

#banner, #banner2 {
    display: inline-block;
    width: 100%;
}

#banner h2 {
    width: 50%;
    display: inline-block;
}

#adminwelcome {
    text-align: center;
    font-size: xx-large;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0 1px 0 #ccc, 0 1px 0 #c9c9c9, 0 1px 0 #bbb, 0 2px 0 #b9b9b9, 0 2px 0 #aaa, 0 3px 1px rgba(0,0,0,.1), 0 0 3px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.2);
    font-weight: 600;
    color: #fff;
}
#userwelcome {
    text-align: center;
    color: blue;
    font-size: xx-large;
    font-weight: 600;
}
#adminBanner {
    text-align: center;
    color: black;
    font-size: xx-large;
    font-weight: 400;
}
#userBanner {
    text-align: center;
    color: blue;
    font-size: xx-large;
    font-weight: 600;
}
#mainContent {
    height: 100%;
    position: relative;
    display: inline-grid;
}

#displayed, #displayed2 {
    position: relative;
    text-align: left;
    width: 100%;
    overflow: auto;
    overflow-y: auto;
    -ms-overflow-style:scrollbar;
    overflow-x: hidden;
    height: calc(100%);
    background-image: linear-gradient(0deg, #f2f2f2 5%, #f8faff 5%, #f8faff 35%, #fcfcff 35%, #fcfcff 40%, #fff 40%, #fff 45%, #fff 45%, #fff 50%, #f2f2f2 50%, #f2f2f2 55%, #f8faff 55%, #f8faff 85%, #fcfcff 85%, #fcfcff 90%, #fff 90%, #fff 95%, #fff 95%, #fff 100%);
    background-size: 20.00px 20.00px;
}
#displayed {
    display: block;
}
#displayed2 {
    display: none;
}
#adminPage table>thead {
    position: sticky;
    top: 0;
}

table.tb_red, table.tb_green, table.tb_yellow  {
    width:100%;
    border-left: 2px solid black;
    border-bottom: 2px solid red;
}

.tb_red tr:nth-child(odd), .tb_yellow tr:nth-child(odd), .tb_green tr:nth-child(odd) {
    background-color:linen;
}
.tb_red th, .tb_yellow th, .tb_green th {
    padding: 5px;
}
.tb_red th {
    background-color: red;
}
.tb_green th {
    background-color: green;
}
.tb_yellow th {
    background-color: yellow;
}
.tb_red tr:nth-child(even) {
    background-color: #ffbbbb;
}
.tb_yellow tr:nth-child(even) {
    background-color: lightyellow;
}
.tb_green tr:nth-child(even) {
    background-color: #bbeebb;
}

#adminSelect {
    float: right;
    position: relative;
    width: 60%;
    text-align: right;
}

table.siteMembers, table.responseLog {
    border: 2px black solid;
    width:100%;
}
.siteMembers>table>caption, .responselog>table>caption {
    caption-side: top;
    margin-left: 20px;
}
.siteMembers>thead {
    background-color:navy;
    color: white;
}
.responseLog>thead {
    background-color:blue;
    color: white;
}
#adminPage th {
    padding-left: 20px;
    color: white;
}
.siteMembers th:nth-of-type(3) {
    padding-left: 10px;
}
.siteMembers>tbody>tr:nth-child(even) {
    background-color:#ddf;
}
.siteMembers>tbody>tr:nth-child(odd) {
    background-color:#ccccee;
}
.siteMembers tbody>tr {
    border-bottom: 1px solid black;
    color: black;
}
.responseLog tbody>tr {
    border-bottom: 1px solid darkgray;
}
.siteMembers td {
    padding: 0 10px 0 10px;
    text-align: left;
    color: black;
}
.responseLog th {
    padding-left: 20px;
    text-align:left;
}

.red>thead {
    background-color: red;
}
.red>tbody {
    background-color: #ffbbbb;
}

.signupbutton {
    float: right;
    background-color: #0069d9;
    color: white;
    font-size: xx-large;
    width: 150px;
    border-radius: 30px;
    border: 3px;
    margin-bottom: 10px;
    position: relative;
    top: -220px;
}

#userInfo, #notificationSettings {
    height: 100%;
    border-bottom: 4px solid red;
}

#userInfo input {
    width:90%;
    background-color:lightgrey;
}
#userInfo #id {
    background-color:#aaa
}
#userInfo label {
    margin:10px 30px 0 0;
    width: 130px;
    color: blue;
}
#userInfo input[type="checkbox"]:not(#pharmacist) {
    left: 80px;
    transform: translate(0,-22px);
}
#userInfo input[id="pharmacist"] {
    transform: translate(105px,-22px)
}
#userInfo input[type="checkbox"] {
    position:relative;
    display:inline-block;
    width: 16px;
    height: 16px;
    outline-style:solid;
    outline-width:thin;
    outline-color:lightblue;
}
#userEditFormButtons {
    width: 90%;
    left: 50%;
    transform:translate(-50%,0);
    position: relative;
    margin-top: 30px;
}
#userInfo input[id="submit"] {
    background-color: green;
    color: white;
    width: 150px;
    position: absolute;
    right: 0;
}
#userInfo input[id="cancel"] {
    width:100px;
    background-color:#f55;
    color:black;
}
#userEdit input#comments {
    left:50%;
    position:relative;
    transform:translate(-50%,0);
    background-color:black;
    color:white;
}
.form {
    display: inline-block;
}
.form-signin, .form-signup {
  max-width: 800px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signup .form-signup-heading,
.form-signin .checkbox, .form-signup .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox, .form-signup .checkbox{
  font-weight: normal;
}
.form-signin .form-control, .form-signup .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.form-signin .form-control:focus, .form-signup .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"], .form-signup input[type="text"] {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form-signin input[type="password"], .form-signup input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.form-signin .btn, .form-signup .btn  {
  margin-bottom: 10px;
}

#buttons {
    text-align: center;
}

.stoplight {
    font-size: large;
    color: black;
    vertical-align: top;
    padding: 0 40px 0 40px;
    display: inline-block;
    border: 2px black solid;
    line-height: normal;
    width: 190px;
    height: 190px;
    font-weight: 600;
    border-radius: 50%;
    margin: 5px 50px;
}

.green {
    background-color: green;
}
.yellow {
    background-color: yellow;
}
.red {
    background-color: red;
}

.clearFloats {
    clear: both;
}

.newDate {
	border-top: 5px solid #000;
}
#response {
    width: 100%;
    background-color: white;
}
#msg {
    width:90%;
    color: red;
    height:60px;
}
#userInfo input[type="button"]:not(#updateEmail) {
    margin: 10px 0 0 0;
    position: relative;
    background-color: lightblue;
    border-radius: 20px;
    color: black;
}
#userEdit select {
    margin:10px 0 0 0
}
input#updateEmail {
    background-color:lightblue;
    width: 80px;
    border-radius: 15px;
    position: fixed;
    left:275px;
    height: 24px;
    vertical-align: bottom;
    line-height: 20px;
    display: none;
}
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.switchLabel {
    text-align: center;
    display: inline-block;
    position: relative;
    font-weight: 600;
    color: blue;
}
#userInfo label.switch {
    margin: 10px 0 0 0;
}
#enable_sms, #enable_email {
    width: 33%;
    display: inline-block;
    text-align: center;
    position: relative;
    margin: 15px 30px 15px 30px;
}
#mainControls {
    border-bottom: 3px red ridge;
}
#topMsg, #notificationSettings {
    font-size: larger;
    color:red;
    text-align: center;
    font-weight:700;
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
}
#mainSettings {
    padding-top: 15px;
}
#mainNotificationOptions {
    width: 100%;
}
#mainNotificationOptions legend {
    padding-top: 15px;
}
#mainNotificationOptions fieldset{
    width: 100%;
    position:absolute;
}
#mainNotificationOptions input[type="button"] {
    width:30%;
    display:inline;
    color:black;
    border: 3px dashed lightgray;
}
#mainNotificationOptions input[type="button"]:nth-of-type(1) {
    background-color: #ff6565;
}
#mainNotificationOptions input[type="button"]:nth-of-type(2) {
    background-color: #ffff7e;
}
#mainNotificationOptions input[type="button"]:nth-of-type(3) {
    background-color: #7ebf7e;
}
#saveComOpts {
    display:inline-block;
    position:relative;
    bottom:-150px;
    background-color:lightblue;
    width:90%;
    border-radius:20px;
    border:2px lightgrey solid;
}
#leftOptions {
    float: left;
    width:48%;
}
#rightOptions {
    float:right;
    width:48%;
}
#rightOptions li, #leftOptions li {
    position:relative;
    height:40px;
}
#userEdit>#comments {
    margin-top:15px;
}
#myList {
    width: 80%;
    float: right;
}
#membersList li {
    height:40px;
    position:relative;
    width:100%;
}
#membersList input[type="checkbox"] {
    position:absolute;
    visibility:hidden;
}
#membersList {
    position: relative;
    border-top: 2px ridge red;
}
#groups div {
    width: 25%;
    margin: 15px;
    float: left;
    text-align: center;
    position: relative;
    padding-top: 6px;
    border-radius: 25px;
}
div.rowPick {
    border-bottom:1px solid black;
    display:block;
    position:relative;
    line-height:2;
}
#membersList label.selected {
    padding-left: 50px;
}
#membersList label {
    width: 100%;
    margin: unset;
    padding-left: 100px;
    transition: all 750ms;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}
#groups {
    margin:0 2%;
    vertical-align:middle;
}
#groups #red {
    background-color:red;
}
#groups #yellow {
    background-color:yellow;
}
#groups #green {
    background-color:green;
}
#groups input[type="checkbox"] {
    visibility:hidden;
    position:absolute;
}
.pharmacist{
    color:blue;
    font-weight: 600;
}
button.admin {
    background-color:lightblue;
    top:500px;
    transform:translate(-50%,0);
}
#bottomBar {
    border-bottom:blue 6px groove;
    top:470px;
    transform:translate(-50%,0);
    position:relative;
    width:100%;
}
#adminPage th:hover {
    cursor:default;
}
.active div {
    background-color:black;
    border-radius:50%;
    width:6px;
    height:6px;
    display:inline-block;
}
#reportTable.responseLog th:nth-of-type(1), #reportTable.daily th:nth-of-type(1) {
    width:4px;
    padding:0 5px;
    position:relative;
}
#reportTable.indReport th:nth-of-type(2), #reportTable.indReport td:nth-of-type(2) {
    width: 25%;
    padding: 0;
}
#reportTable.indReport th:nth-of-type(1) {
    width: 75%;
    padding-left:45px;
}
#reportTable.indReport td:nth-of-type(1) {
    padding-left:15px;
}
#reportTable.responseLog .active, #reportTable.daily .active {
    color: black;
}
#reportTable.indReport {
    width:100%;
}
#reportTable.indReport thead {
    background:blue;
    display:none;
}
#reportTable.indReport td {
    color:black;
}
#reportTable.indReport tr {
    border-bottom: 2px solid 
}
#reportTable.indReport caption {
    caption-side: top;
    font-size: x-large;
    color: white;
    background: black;
    border-bottom: 2px red ridge;
    text-align: center;
    padding: 7px 0;
}
#reportTable.indReport th {
    font-weight:400;
    padding-top:2px;
}