:root {   
  --bg-color:245, 244, 249;
  --bg-color-secondary:255,255,255;  
  --bg-color-tertiary:243, 245, 247;
  --primary-color:148, 180, 71;
  --primary-color-darker:129, 159, 62;
  --primary-color-lighter:167, 205, 82;
  --secondary-color:59, 82, 134;
  --secondary-color-darker:51, 69, 115;
  --secondary-color-lighter:60, 81, 136;
  --tertiary-color:203, 229, 78;
  --quaternary-color:92, 167, 160;
  --chart-steady-state-color:186,216,61;
  --chart-steady-state-color-darker:148, 180, 71;
  
  --checkmark-background:lightgrey; /*#e9ecef;*/

  --primary-font: 'Roboto', sans-serif;
  --header-font: 'Raleway', sans-serif;
  --title-text-size: 2.6rem;
  --subtitle-text-size: 1.25rem;
  --summary-text-size: 0.8rem;
  --standard-text-size: 0.875rem;

}

body {
  padding-top: 0rem;
  background-color: rgb(var(--bg-color));
  font-family: var(--primary-font);
  line-height: 1.2;
}
.summaryRow  {
  margin-bottom: 0.1rem;
}

#inputColumn {
  padding-left:0;
  padding-right:0;
  min-height:100vh;  
  box-shadow: 0 0 10px lightgray;
  /*overflow:auto;*/
}
#poweredBy {
  font-size: 0.6rem;
  float: right;
}

.table { 
  margin-bottom: 0;
}
.divider {
  margin-top:0.8rem;
  margin-bottom:0.8rem;
  width: 25%;
  height: 4px;
  
}
.divider-secondary {
  border: 1px solid rgb(var(--secondary-color));
  background-color: rgb(var(--secondary-color));
}
.divider-tertiary {
  border: 1px solid rgb(var(--tertiary-color));
  background-color: rgb(var(--tertiary-color));
}
.divider-quaternary {
  border: 1px solid rgb(var(--quaternary-color));
  background-color: rgb(var(--quaternary-color));
}

#mainTitle {
  font-family: var(--primary-font);
  font-weight: 700;
  padding-bottom: 1.2rem;
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--primary-color));
  font-size: var(--standard-text-size);
  padding-left:1.5rem;
  padding-right:1rem;
}
#mainTitle > h1 {
  font-family: var(--header-font);
  font-weight: 800;
  font-size: var(--title-text-size);
  line-height:1.1;
  padding-top: 3rem;
  margin-bottom: 0.25rem;
}
#mainTitle > .subTitle {
  font-size: var(--subtitle-text-size);
  font-weight: 700;
  font-family: var(--header-font);
}
#mainTitle > .subTitle2 {  
  font-weight: 700;
  font-family: var(--header-font);
  margin-top: 0.1rem;
  display: block;
}
label {
  margin-bottom: 0.1rem;  
}
.form-group {
  margin-bottom: 0.5rem;
}
.form-group > label {
  font-weight: 700;
}
button {
  font-family: var(--primary-font);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.calculation-progress {
  background-color: var(--bg-color);
  height: 2px;
  margin-top:0.7rem;
  margin-bottom: 0.7rem;
}

#fullDisclaimerModal {
  font-weight: 400;
  font-family: var(--header-font);
  color: #666;
}

.calculation-progress-bar {  
  background-color: rgb(var(--primary-color));
  /*width: 0%;*/
}

.loadingContainer {
  background-color: var(--bg-color);
  margin-top:0.5rem;
  margin-bottom: 0.5rem;
}

.loadingSpinner {
  margin-top: -0.7rem;
  margin-bottom: -0.7rem;  
  text-align: center;
}
.loadingSpinner .spinner-border {
  
  color: rgb(var(--primary-color));
}

#progressContainer {  
  height:20px;
  position: relative;
  margin: 0.75rem 2rem;
}

.custom-progress {
  background-color: var(--checkmark-background);
  position:absolute;  
  top:9px;
  width:50%;  
  height: 2px;
}
#progressDisplay1 {
  left:0;  
}
#progressDisplay2 {
  right:0;  
}

.custom-progress-bar {  
  background-color: rgb(var(--primary-color));
  width: 0%;
}

.checkmark {
  border-radius: 12px;
  fill: rgb(var(--bg-color-secondary));  
  background-color: var(--checkmark-background);
  position:absolute;  
  top:0;
  z-index: 10;
}
#checkMark1 {  
  left:0;  
}
#checkMark2 {
  left: 47%;
}
#checkMark3 {
  right:0;  
}

#inputCards {
  box-shadow: 0 0 10px lightgrey;
  border-radius:0.25rem;
}

#inputParameters {
  padding-left:1.6rem;
  padding-right:1.6rem;  
}

.card-body {
  font-family: var(--primary-font);  
  font-weight: 400;
  padding:1rem 0.75rem;
  font-size: var(--standard-text-size);
}
.card-header {
  font-family: var(--header-font);
  font-weight: 700;  
  font-size: 1.1rem;
  padding: 0.7rem 1.25rem;
  border-bottom:0;
  background-color: rgb(var(--bg-color-tertiary));
}

#patientInfoCard {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#drugLevelsCard {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#patientInfoSummary, #doseHistorySummary, #drugLevelsSummary {
  font-size: var(--summary-text-size);  
  color:#666;
}

.btn-custom-radio {
  color: #999;
  border-color: #999;
  background-color: #fff;
  font-size: var(--standard-text-size);
  font-family: var(--primary-font);  
  font-weight: 700;
  border-radius: 0.2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 0;
}

.btn-custom-radio.focus {
  border-color:rgb(var(--primary-color-lighter));
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-lighter), 0.5);
}

.btn-custom-radio:not(.disabled):hover {
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--primary-color));  
  border-color: rgb(var(--primary-color));
}
.btn-custom-radio.active {
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--primary-color));  
}
.btn-custom-radio.disabled:hover {
  color: #999;
}
.btn-custom-radio.active.disabled:hover {
  color: rgb(var(--bg-color-secondary));
}


.btn-custom-radio-secondary {
  color: #999;
  border-color: #999;
  background-color: #fff;
  font-size: var(--standard-text-size);
  font-family: var(--secondary-font);  
  font-weight: 700;
  border-radius: 0.2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 0;
}

.btn-custom-radio-secondary.focus {
  border-color:rgb(var(--secondary-color-lighter));
  box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color-lighter), 0.5);
}

.btn-custom-radio-secondary:hover {
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--secondary-color));  
  border-color: rgb(var(--secondary-color));
}
.btn-custom-radio-secondary.active {
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--secondary-color));  
  border-color: rgb(var(--secondary-color));
}

.btn_inputColumnSecondary {
  color: rgb(var(--primary-color));
  border-color: rgb(var(--primary-color));
  background-color: #fff;
  font-size: var(--standard-text-size);
  font-family: var(--primary-font);
  font-weight: 700;
  /*line-height: 1.5rem;*/
  border-radius: 0.4rem;
  padding-left:1rem;
  padding-right:1rem;

  margin-bottom: 0;
}

.btn_inputColumnSecondary:hover {
  color: rgb(var(--primary-color));
  border-color: rgb(var(--primary-color));
  background-color: rgb(var(--bg-color-secondary));
}

.btn_inputColumnPrimary {
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--primary-color));
  font-size: var(--standard-text-size);
  font-family: var(--primary-font);
  font-weight: 700;
  /*line-height: 1.5rem;*/
  border-radius: 0.3rem;
}

.btn_inputColumnPrimary:hover:not([disabled]) {
  background-color: rgb(var(--primary-color-darker));  
}
.btn_inputColumnPrimary:hover {  
  color:rgb(var(--bg-color-secondary));
}

.btn_outputColumnPrimary {
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--secondary-color));
  font-size: var(--standard-text-size);
  font-family: var(--primary-font);
  font-weight: 700;
  /*line-height: 1.5rem;*/
  border-radius: 0.3rem;
}
.btn_outputColumnPrimary:hover {
  background-color: rgb(var(--secondary-color-darker));
  color:rgb(var(--bg-color-secondary));
}

.btn_outputColumnSecondary {
  color: rgb(var(--secondary-color));
  border-color: rgb(var(--secondary-color));
  background-color:rgb(var(--bg-color-secondary));
  font-size: var(--standard-text-size);
  font-family: var(--primary-font);
  font-weight: 700;
  /*line-height: 1.5rem;*/
  border-radius: 0.3rem;    
}

.btn_outputColumnSecondary:hover:not(.inactiveButtons) {
  color: rgb(var(--bg-color-secondary));  
  background-color: rgb(var(--secondary-color));
}

.btn_outputColumnSecondary.inactiveButtons {
  color: rgb(var(--bg-color-secondary));  
  border-width: 0;

}
.custom-control {
  min-height: 0rem;
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {  
  border-color:rgb(var(--primary-color-lighter));
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-lighter), 0.5);
}
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
  border-color:rgb(var(--primary-color-lighter));
  background-color:rgba(var(--primary-color-lighter), 0.4); 
}

.custom-control-input:active ~ .custom-control-label::before {
  color: rgb(var(--bg-color-secondary));
  background-color: var(--primary-color-lighter);
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: rgb(var(--bg-color-secondary));
  border-color: rgb(var(--primary-color));
  background-color: rgb(var(--primary-color));  
}


.css-checkbox .custom-control-input~.custom-control-label::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke='currentColor' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' class=''%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");  

}

.renalReplacementLabel {
  font-size: 0.75rem;
}

#btn_clearAll {
  width: 85%;
  margin: 1.5rem auto;    
}

#outputColumn {
  margin-left: 1.5rem;
  margin-right:2rem;
  margin-top: 3rem;
  line-height: 1.3;
  font-size: var(--standard-text-size);
}
#outputColumn h6 {
  font-family: var(--header-font);
  font-weight: 700;
  font-size:1.2rem;
  margin-bottom: 0.8rem;
}
#targetDoseForm {
  padding-left: 0.3rem;
}

#target_row {
  background-color: white;  
  padding-top: 1.2rem;
  
  padding-left: 1rem;
  padding-right: 1rem;
  /*margin-right:2rem;*/
  box-shadow: 0 0 10px lightgray;
  border-radius: 20px;
  /*max-height: 21rem;*/
  /*overflow-y:auto;*/
  margin-bottom: 1.5rem;
}
.target_badge {
  /*display: inline-block;*/
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--primary-color));
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  font-weight: 700;  
}

#pk_chart_row {
  background-color: white;
  /*margin-right: 2rem;  */
  border-radius: 20px;  
  /*margin-top: 1.2rem;*/
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1.5rem;
  
}
#info_row {
  /*margin-right: 2rem;*/
  margin-top: 1.2rem;
  padding-left: 1rem;
  padding-right: 1rem; 
  margin-bottom: 1.5rem;
}

#calcDose {
  /*font-size: 1rem;*/
  font-weight: 700;
  /*height: 75%;*/
  padding-bottom: 0.5rem;
}
#calcDose > * input { 
  display:inline-block;
}

#calcDose > table {
  height: 100%;
}

#calcDose button {
  width: 100%;
  margin: 0 auto;
}

#predictedPK table {
  color:#333;
}
#info_row > * table {
  color:#333;
}
#info_row > * h6 {
  color:#333;
}

#currentDose {
  padding-top: 0.5rem;
  font-size: 0.8rem;  
}
#currentDose > table {
  color: #666;
}
#currentDose > h6 {
  font-size: 1rem;
}


#chartContainer {
  
  padding-bottom: 0.75rem;
  width:100%;
}

ul.list-unstyled {
  margin-bottom:0
}

/*#currentDose_pk_summary {
  white-space: nowrap;
}*/

.nav-link {
  padding: 0.1rem 1rem;
  background-color: #f5f4f9;
  color: #495057;
}
.nav-link:hover {
  color: #000;
}
.nav-link.active {
  font-weight: bold;
}

#dosingFrequencies-tabContent > * table {
  text-align: center;
  margin-bottom: 0;
}
#dosingFrequencies-tabContent > * table > thead>tr>th {
  line-height: 1;
  padding:0.7rem;
  font-weight: 400;
  border:0;
}

#dosingFrequencies-tabContent > * table > tbody>tr>td {
  vertical-align: middle;
}

.tableSelectButtons {
  /*width: 65%;  */
  width:5rem;
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--secondary-color));
  font-size: var(--standard-text-size);
  font-family: var(--primary-font);
  font-weight: 700;
  border-radius: 0.4rem;
}
.tableSelectButtons:hover {  
  color:rgb(var(--bg-color-secondary));
  background-color: rgb(var(--secondary-color-darker));
}

.doseOptionSelectedRow {
  background-color: rgba(var(--secondary-color), 0.1);  
}
.selectedButton {
  font-weight: 400;
  background-color: rgba(var(--secondary-color-lighter), 0.4);
}
.selectedButton:hover {  
  color:rgb(var(--bg-color-secondary));
  background-color: rgba(var(--secondary-color-lighter), 0.4);
}

/*
#predicted_pk_model > a[target="_blank"]:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}*/

.inactiveText {
  color: #999999 !important ;
}
.inactiveButtons {
  background-color: #999999;
  border-width: 0;
}
.inactiveButtons:hover {
  background-color: #999999;
}

#outputColumn > * input {  /* #outputColumn > * input:not(:focus) */
  text-align: right;
}

.form-control:focus {
  border-color:rgb(var(--primary-color-lighter));
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-lighter), 0.5);
}

.bootstrap-datetimepicker-widget table td.active, 
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
  background-color: rgb(var(--primary-color));
}
.bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: rgb(var(--primary-color));
}
.bootstrap-datetimepicker-widget .datepicker-months thead .picker-switch {
  cursor: default;
  pointer-events: none;
}

.input-group-text {
  color: rgb(var(--primary-color));
  background-color: rgb(var(--bg-color-secondary));
  font-size: .875rem;
  padding: 0.25rem 0.4rem;
  border-radius: 0.2rem;
}

#extraStuff {
  position: fixed;
  right: 2rem;
  bottom: 0;
  padding:0.1rem 0.3rem;
  margin-bottom:0.5rem;
  box-shadow: 0 0 10px 0 lightgray;
  background-color: rgb(var(--bg-color));
  font-size:0.875rem;
}

.css-checkbox {
  display: none;
}

.fa-plus {
  background-color: rgb(var(--primary-color));
  text-align:center;
  padding-top:2px;
  border-radius: 0.25rem;
  color: rgb(var(--bg-color-secondary));
  height: 17px;
  width:17px;
  padding-left: 2px;
  padding-right: 2px;
}
.fa-minus {
  background-color: rgb(var(--bg-color-secondary));
  display: none;
  text-align:center;
  border-radius: 0.25rem;
  color: rgb(var(--primary-color));
  height: 17px;
  width:17px;
  padding-top:1px;
  border: 1px solid #ccc;
}
.css-checkbox:checked + .css-label .fa-minus {
  display: inline-block;
}
.css-checkbox:checked + .css-label .fa-plus {
  display: none;
}

/*
#drugLevelsSummary_measurement1Hours, #drugLevelsSummary_measurement2Hours {
  display: none;
}*/

.suggestedDoseInvalid {
  width: 100%;
margin-top: .25rem;
font-size: 80%;
color: #dc3545;
font-family: var(--primary-font);
font-weight: 400;
display: none;
}

.glowInvalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
}

.glowInvalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
}

#btn_editTarget {
  margin-bottom: 0;
line-height: 1.1rem;
font-size: 0.8rem;
margin-left: 0.25rem;
}

#editTargetSection {  
  font-size: 0.8rem;
}
.editTargetButton {
  line-height: 1;
}

#btn_editMIC {
  font-weight: 400;
  font-size: 0.8rem;
}

.badge-suggestedDose {
  color: rgb(var(--bg-color-secondary));
  background-color: rgb(var(--quaternary-color));
}
.doseOption-suggestedRow {
  background-color: rgba(var(--quaternary-color), 0.1);
}

.tableSelectButton-suggested {
  /*width: 65%;  */
  width:6rem;
  color: rgb(var(--bg-color-secondary));
  /*background-color: rgb(112,187,180);*/
  background-color: rgb(var(--quaternary-color));
  font-size: var(--standard-text-size);
  font-family: var(--primary-font);
  font-weight: 700;
  border-radius: 1rem;
}
.tableSelectButton-suggested:hover {  
  color:rgb(var(--bg-color-secondary));
  /*background-color: rgb(112,187,180);*/
  background-color: rgb(var(--quaternary-color));
}

.invalidGlobalParameterButton:hover {
  background-color: rgb(var(--bg-color-secondary));
  color: rgb(var(--secondary-color));
}

.btn_dropDown {  
  border: 1px solid #ced4da;
  background-color:rgb(var(--bg-color-secondary));
}
.btn_dropDown:focus {
  border-color:rgb(var(--primary-color-lighter));
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-lighter), 0.5); 
}

.alert-banner {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}