centurion_erp/app/project-static/content.css

/*******************************************************************************

refactored

*******************************************************************************/


#content-body form div label {
  display: inline-block;
  line-height: inherit;
  text-align: right;
  width: 200px;
}


#content-body form div .helptext {
  color: #999;
  display: inline;
  font-size: 12px;

}

#content-body form div input[type=text],
#content-body form div select {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: inherit;
  height: 30px;
  line-height: inherit;
  width: 400px;
}

#content-body form#dynamic-form {
  align-content: center;
  align-items: center;
  justify-content: center;
  line-height: 30px;
  padding: 10px;
  /* text-align: center; */
  text-align: right;
  width: 650px;
}


#content-body form#dynamic-form div {
  align-items: center;
  display: block;
  line-height: inherit;
  justify-content: center;
  padding: 5px;
  text-align: center;
  width: 100%;
}



input[type=button],
input[type=submit] {
  background-color: #177ee6;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  height: 30px;
  margin: 10px;
}




/* Style the navigation tabs at the top of a content page */
.content-navigation-tabs {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  /* background-color: #f1f1f1; */
  width: 100%;
  text-align: left;
  padding: 0px;
  margin: 0px
}


.content-navigation-tabs-link {
  border: 0px;
  margin: none;
  padding: none;
}

/* Style the buttons that are used to open the tab content */
.content-navigation-tabs button {
  display: inline;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: inherit;
  color: #6a6e73;
}


/* Change background color of buttons on hover */
.content-navigation-tabs button:hover {
  /* background-color: #ddd; */
  border-bottom: 3px solid #ccc;
}


/* Create an active/current tablink class */
.content-navigation-tabs button.active {
  /* background-color: #ccc; */
  border-bottom: 3px solid #177ee6;
}



/* Style content for each tab */
.content-tab {
  width: 100%;
  display: none;
  padding-bottom: 0px;
  border: none;
  border-top: none;
}

.content-tab hr {
  border: none;
  border-top: 1px solid #ccc;
}

.content-tab pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Style for section fields on details page */
.detail-view-field {
  display: unset;
  height: 30px;
  line-height: 30px;
  padding: 0px 20px 40px 20px;

}

.detail-view-field label {
  display: inline-block;
  font-weight: bold;
  width: 200px;
  margin: 10px;
  height: 30px;
  line-height: 30px;

}

.detail-view-field span {
  display: inline-block;
  width: 340px;
  margin: 10px;
  border-bottom: 1px solid #ccc;
  height: 30px;
  line-height: 30px;

}











/*******************************************************************************

EoF refactored

*******************************************************************************/


main section a {

  color: #177ee6;
  text-decoration: none;

}

main section a:visited {

  color: #177ee6;
  text-decoration: none;

}

article div {
  /* background-color: #ff0000; */
  justify-content: center;
  width: 100%;
  /* display: block; */
  display: flex;
  flex-wrap: wrap;
}



input[type=checkbox] {
  visibility: hidden;
  font-size: 20px;
}

input[type=checkbox]:after,
input[type=checkbox]::after {
  content: " ";
  background-color: #177ee6;
  display: inline-block;
  text-align: center;
  color: #fff;
  height: 20px;
  line-height: 20px;
  width: 20px;
  visibility: visible;
  border-radius: 15px;
}

input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
  content: "\2714";
}





table {
  width: 100%;
  text-align: center;
}

tr {
  height: 30px;
}

td {
  border-bottom: 1px solid #ccc;
  padding: 20px;
}

section .content-header {
  display: flex;
  /* background-color: #08f008; */
  align-items: center;
  width: 100%;
  justify-content: space-evenly;
  padding: 0px;
  min-height: 120px;

}

section .content-header fieldset {
  /* background-color: #0851f0; */
  width: 350px;
  padding: 0px;
  border: none;

}

section .content-header fieldset label {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
}


section .content-header fieldset input {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
}

.comments {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 10px -20px -50px -20px;
  width: auto;
}

.comment {
  background-color: #fff;
  margin: 10px 5px 10px 5px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #e6dcdc;
}

.comment-header {
  text-align: left;
  font-size: 12px;
  color: #999;
  margin: 0px;
  padding: 2px;
  height: 30px;
}

.comment-header svg {
  fill: #999;
  height: 100%;
  margin: auto 0 auto 0;
}

.comment-header span {
  line-height: auto;
  margin: auto;
  margin: auto 10px auto 2px;
}

.comment-body {
  display:inline-block;
  padding: 10px 5px 10px 20px;
}

.comment-footer {
  color: #999;
  font-size: 12px;
  padding: 2px;
  width: 100%;
}

.comment-footer svg {
  fill: #999;
  height: 100%;
  margin: auto 0 auto 0;
}

.comment-footer span {
  line-height: auto;
  margin: auto 10px auto 2px;

}