html {
  height: 100%;
  width: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
}

body {
  height: 0px;
  width: 400px;
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  min-height: 100vh; /* Ensure a minimum height of the viewport */
  flex-direction: column;
  margin-left: 0px; /* Adjust this value to match the width of your sidebar */
  padding: 0px;
}

header {
  width: 400px;
  height: 35px;
  margin: 0px 0 0px 0px;
  padding: 0px 0px;
  background: #507CE0;
  color: #003a4a;
  border-right-style: hidden;
  border-bottom-style: hidden;
  border-top-style: hidden;
}

.footer {
  bottom: 0;
  /* position: fixed;  /* this places the footer at the bottom of the viewport */
  width: 400px;
  height: 10px;
  margin: 0px 0 0px 0px;
  padding: 10px 10px;
  background: #507CE0;
  color: #003a4a;
  text-align: left;
  border: 0px solid white;
  border-right-style: hidden;
  border-bottom-style: hidden;
  border-top-style: hidden;
}

header h1 {
  /* top 4 added by assistant to shift teh header text
  position: absolute;*/
  top: 0;  /* Adjust vertically as needed */
  left: 0px;  /* Start from the right edge of the sidebar */
  z-index: 1; /* This will bring your h1 to the front */

  margin: 0;
  padding: 6px;
  font-size: 18px;
  color: #507CE0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
}

h2 {
  margin: 0;
  padding: 0px;
  font-size: 28px;
  /*color: #49bd99;*/
  /*color: #003a4a;*/
  color: #507CE0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
}

.button-right {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}

.required{
  color: #cc3353;
  margin-left: 1px;
  padding: 3px;
  font-weight: bolder;
}

#content {
  width: 100%;
  min-height: 500px;
  padding: 0 10px;
}


input[type="submit"] {
  background-color: #507CE0;
  color: #ffffff;
  padding: 0px 0px;
  height:40px;
  width:160px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 2px 10px;
  cursor: pointer;
  border-radius: 15px;
  -webkit-border-radius: 10px;
}

button {
  background: none!important;
  border: none;
  align-self: right;
  align-content: right;
  padding: 0!important;
  margin: 2px 0px;
  font-family: arial, sans-serif;
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

.mymessage {
  color: red;
 }

.actions {
  margin-bottom: 1em;
}

.session-message {
  color: red;
  font-size: 25px;
  margin-left: 10px;
}

.large_notes_field {
  padding: 3px;
  border-radius: 2px;
  border-color: #507CE0;
  outline: none;
  background-color:white;
  resize: none;
  /*font-size: 15px;*/
  /*font-size: 18px;
  font-family: Verdana, Arial, Helvetica, sans-serif;*/
  /*font-family: inherit;*/
  /*font-family: Arial;*/
  font: normal .9em Arial, Verdana, sans-serif;
}

.large_notes_field:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

fieldset{
  position:relative;
}

.fieldset-legend {
  font-size: 2em; /* Adjust the font size as needed */
  color: #507CE0;
  font-weight: bold;
  /* Add any other styles you want for the legend */
}

.list-view-link {
  color: #507CE0;
  text-align: center;
  display: grid;
   text-decoration: underline !important;
   font-size: 15px;
 }

 .fieldset-legend-small {
    font-size: 0.8em; /* Adjust the font size as needed */
   color: #507ce0;
   font-weight: normal;
   /* Add any other styles you want for the legend */
 }

.text-date {
  width: 100px;
  border: #507CE0 solid 1.2px;
  height: 22px;
}
.text-date:focus {
  border-color: #0000ff; /* Change this to the desired color */
}
.datepicker {
  width: 100px;
  border: #507CE0 solid 1.2px;
  height: 18px;
}
.datepicker:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.timepicker {
  text-align: left;
  width: 50px;
  border: #507CE0 solid 1.2px;
  height: 18px;
}

.timepicker:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.checkbox {
  width: 16px;
  border: #507CE0 solid 1.2px;
  margin-top: 5px; /* Adjust this value as needed */
  margin-left: 20px; /* Adjust this value as needed */
  height: 16px;
}

.checkbox:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.inputContainer {
  display: flex;
  align-items: center;
}
.dateContainer {
  margin-right: 10px; /* Adjust this value as needed */
}

.input-container {
  position: relative;
}

.text-NoExpiry {
  position: absolute;
  background-color: white;
  top: 0;
  left: 100%; /*  Position it to the right of the input */
  margin-left: 2px;  /* Adjust this value to set the desired gap */
  color: #507CE0;
  margin-top: 5px; /* Adjust this value as needed */
  font-style: italic;
  white-space: nowrap; /* Prevent text from wrapping */
  width: 600px; /* Set a specific width for the comment */
}

.text-number {
  width: 50px;
  border: #507CE0 solid 1.2px;
  height: 22px;
}
.text-number:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.text-money {
  width: 80px;
  border: #507CE0 solid 1.2px;
  height: 22px;
}
.text-money:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

main {
  flex: 1;
}

.text-name {
  width: 200px;
  background-color: white;
  border: #507CE0 solid 1.2px;
  height: 22px;
}
.text-name:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.text-email {
  width: 300px;
  background-color: white;
  border: #507CE0 solid 1.2px;
  height: 22px;
}
.text-email:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.text-description {
  width: 400px;
  background-color: white;
  border: #507CE0 solid 1.2px;
  height: 22px;
}
.text-description:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.text-description-block {
  width: 570px;
  border: #507CE0 solid 1.2px;
  background-color: white;
  height: 44px;
}
.text-description-block:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

.input-container {
  position: relative;
}

.text-comments {
  position: absolute;
  background-color: white;
  top: 0;
  left: 100%; /*  Position it to the right of the input */
  margin-left: 10px;  /* Adjust this value to set the desired gap */
  color: #507CE0;
  font-style: italic;
  white-space: nowrap; /* Prevent text from wrapping */
  width: 600px; /* Set a specific width for the comment */
}

.combo-fields {
  background-color: white;
  border-radius: 2px;
  color: #000000;
  height: 22px;
  border: #507CE0 solid 1.2px;
  /*-webkit-appearance: none; !* Override default iOS styling *!*/
  /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M10 0L5 6l-5-6z" fill="%23000000" /></svg>');*/
  /*background-repeat: no-repeat;*/
  /*background-position: right 0px center;*/
  padding-right: 30px; /* Make some space to the right of text to fit the arrow */
}

.combo-fields:focus {
  border-color: #0000ff; /* Change this to the desired color */
}

select {
  background-color: white;
}

#table_options ,th ,td {
  /*width: 920px;*/
  border-collapse: collapse;
  border-style: hidden;
  /*border: 2px solid black;*/
  /*border-collapse: collapse;*/
}

table {
  border-collapse: collapse;
  vertical-align: top;
}

 hr {
   position: relative;
   border: 0;
   border-top: 1px solid #507CE0; /* set color here */
   width: 650px; /* set width here */
   margin-left: 180px; /* set left position here */
   margin-top: 30px;
   margin-bottom: 3px;
 }


table.list {
  width: 80%;
}

table.default_list tr td {
  border: 1px solid #507CE0;
  text-align: Left;
}

table.default_list tr th {
  border: 1px solid #507CE0;
  background: #507CE0;
  color: white;
  text-align: Left;

}

dl {
  clear: both;
  overflow: hidden;
  margin: 0.5em 0;
}

.form-row {
  /* section added to place fields on the same line */
  display: flex;
  align-items: center;
}

dt {
  float: left;
  font-weight: normal;
  width: 120px;
  /*  margin-right: 10px; Adjust the margin as needed */
}

dd {
  float: left;
  margin-left: 0em;

}

#operations {
  clear: both;
  margin: 1em 0 1em 75px;
}

/* Errors */

.errors {
  display: inline-block;
  border: 2px solid red;
  color: red;
  padding: 1em;
  margin-bottom: 1em;
  margin-left: 0px;
}

.errors ul {
  margin-bottom: 0;
  padding-left: 1em;
}

/* Session Messages */

#message {
  color: #0055DD;
  background: white;
  font-weight: bold;
  font-size: 20px;
  /*border: 2px solid #0055DD;*/
  padding: .5em 0px;
  /*margin: 1em 30px;*/
  width: 90px;
}