/* supplements CSS */

/*Custom header icon color and icon */
.page-supplements .text .pt_supplements:before {
  background: #7bc24d;
  content: '\f06c';
  font: normal normal normal 45px/1 FontAwesome;
}

.pt_supplements .supplements {
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 8px 8px 8px 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pt_supplements h2 {
  border-bottom: solid 1px #A2A3A5;
  padding: 12px;
  text-align: center;

}

.page-supplements .pt_supplements h2:last-child {
  margin-top: 20px;
}

.supplements.expired .expires {
  color: #c00;
}

.supplements.soon .expires {
  color: #F60;
}

.supplements .future-start-date {
	color:initial;
}

.alt {
  background-color: #efefef;
}

.supplements .supplement_name {
  cursor: pointer;
  overflow: hidden;
  padding: 0 10px;
  width: calc(25% - 15px);
  padding-right: 15px;
}

.supplements_header {
  color: #A2A3A5;
}

.supplements a {
  color: #598cbf;
  overflow: hidden;
  padding-left: 10px;
  width: 200px;
  text-decoration: underline
}

.supplements a:hover {
  font-weight: bold;
}

.supplements .amount {
  overflow: hidden;
  width: calc(25% - 15px);
}

.supplements .expires {
  width: 170px;
}

.supplements .actions {
  margin-right: 6px;
  margin: 0px auto;
  text-align: center;
  width: 120px
}

.supplements .generated {
  color: #999999;
  float: left;
  font-size: 10px;
}

.supplements .description {
  flex-basis: 100%; /* display on it's own line */
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 8px 8px 8px 8px;
  clear: left;
  margin: 8px;
  padding: 8px;
  position: relative;
  top: 8px;
  display: none;
}

.none {
  text-align: center;
  padding: 5px;
}

/* option/display for "I'm not taking any medications" */
.pt_supplements_none_checkbox {
  margin: 10px 5px;
  padding: 5px 7px;
  border: solid 1px #d8d8d8;
  border-radius: 8px;
  background-color: #FFF;
  display: block;
  text-align:center;
}

.pt_supplements_none_checkbox input {
  margin:0 5px;
}

.pt_supplements_none_checkbox.pt_supplements_none_checkbox_disabled {
  background-color: inherit;
  border: none;
  opacity: 0.7;
}

#supplements_loading_block {
  padding: 15px;
}

/* SEARCH FOR SUPPS */

.ui-menu {
  max-width: 500px;
}

.ui-menu .sup-0 {
  font-size: 12px;
  border-top: 1px solid #d3d3d3;
}

.ui-menu .sup-0 .supplement_strength {
  display: block;
  cursor: pointer;
  font-style: normal;
}

/* ADD SUPPS */

.add_supplement>div {
  padding: 15px;
}

.draggable form:not(.questionnaire_form).supplement_add_box_form2,
.draggable form:not(.questionnaire_form).add_supplement_to_database {
  padding: 0;
  border: 0;
  background-color: transparent;
}

/*hide label on desktop */
.supplements label {
  display: none
}

.older-supplement-rxs {
  border-top: 1px solid #e0e0e0;
  margin-top: 10px;
  padding-left: 35px;
  padding-top: 10px;
}

.older-supplement-rxs .actions {
  display: none
}

/************* Supplement free-text note (config option to show this) *****************/

div.pt_supplement_note {
  padding: 3px 10px;
  font-size: 14px;
  margin: 10px 0;
  font-style: italic;
}

div.pt_supplement_note.empty_supplement_note {
  opacity: 0.6;
}

/********************* Refill/Discontinue/pending request buttons **************************/

.pt_supplements .button.refill:before {
  content: '\F021';
  color: #156F4A;
}

.pt_supplements .button.remove:before {
  content: '\F057';
  color: #c00;
}

.pt_supplements .button.refill:before,
.pt_supplements .button.remove:before {
  visibility: visible;
  display: inline-block;
  font: normal normal normal 25px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  transition: all .2s
}

.pt_supplements .button.remove:hover,
.pt_supplements .button.refill:hover {
  background-color: transparent;
}

.pt_supplements .button.remove:hover:before {
  color: #e64d4d;
}

.pt_supplements .button.refill:hover:before {
  color: #58a22b;
}

.pt_supplements .button.refill {
  margin-left: 12px;
}

.pt_supplements .button.remove,
.pt_supplements .button.refill {
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent;
  width: auto;
  height: auto;
  min-width: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pt_supplements .past_supplements .button.supplement_refill {
  right: 0;
}

.pt_supplements .button.refill_pending:before,
.pt_supplements .button.removal_pending:before {
  color: #f99c50;
  content: '\f017';
  margin-right: 4px
}

.pt_supplements .button.refill_pending,
.pt_supplements .button.removal_pending {
  color: #ab612f;
  text-align: left;
  margin-left: 2px;
  width: 100%
}

.pt_supplements .button.refill_pending:hover:before,
.pt_supplements .button.removal_pending:hover:before {
  color: #f99c50;
}

.pt_supplements .button.refill_pending:after,
.pt_supplements .button.removal_pending:after {
  color: #f99c50;
  float: left;
  padding: 5px;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.08em;
  font-weight: normal;
}

.pt_supplements .button.refill span,
.pt_supplements .button.remove span {
  display: none;
}

.pt_supplements .button.remove span {
  color: #f10400;
}

.pt_supplements .button.refill span {
  color: #156F4A;
}

.supplements {
  position: relative;
}

.pt_supplements .past_supplements .button.remove.supplement_remove {
  display: none;
}

.page-supplements .alt {
  background-color: white;
}

.draggable form.portal_refill_supplement_form {
  padding: 15px 20px;
}

/* EXPANDED REGIMEN */
.pt_supplements .daily-regimen-button-wrapper {
	text-align:center;
	padding:10px;
}

.pt_supplements button.expand-supplement-regimen:before {
	content: '\f017';
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	transition: all .2s;
	margin-right:5px;
}

.pt_supplements .supplement-expanded-regimen {
	padding: 10px;
}

.pt_supplements .supplement-expanded-regimen span.time-label {
	font-size:15px;
	display:block;
}

.pt_supplements .supplement-expanded-regimen span.time-supplements {
	display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.pt_supplements .supplement-expanded-regimen .regimen-supplement-name {
	color: #A2A3A5;
}

.pt_supplements .supplement-expanded-regimen label {
	padding:3px 10px;
}

/*********** RESPONSIVE *****************/

@media screen and (max-width: 600px) {

  .pt_supplements .button.remove,
  .pt_supplements .button.refill {
    position: relative;
    right: 0;
    display: inline-block;
    float: none;
    width: auto;
  }

  .supplements label {
    display: inline-block;
    margin-right: 10px;
    color: #424242;
    font-weight: bold;
  }

  .pt_supplements .supplements.supplements_header {
    display: none
  }

  .supplements .supplement_name,
  .supplements .amount,
  .supplements .expires,
  .supplements .actions {
    width: auto;
  }



  .supplements .supplement_name {
    padding-left: 0;
  }

  .supplements:not(.supplements_header) .actions {
    text-align: left;
  }

  .pt_supplements .supplements {
    border-bottom: solid 1px #f7f7f7;
    display: block
  }

  .supplements:last-child {
    border-bottom: none
  }

  .pt_supplements .button.refill span,
  .pt_supplements .button.remove span {
    display: inline-block;
  }

  .pt_supplements .button.refill:before,
  .pt_supplements .button.remove:before {
    margin-right: 5px;
  }
}


/*********** PRINT *****************/

@media print {
  .supplements .actions {
    display: none
  }

  .page-supplements .pt_supplements h2 {
    text-align: left
  }
	
  .pt_supplements button.expand-supplement-regimen {
    display: none
  }
}