/* HEADER */
header.gr-header {
  -ms-grid-row: 1;
}
header.gr-header.core-header.light {
    background: #fff;
}

header.gr-header.core-header a.console-link {
  display: block;
}

.actions {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    align-items: center;
}

.actions .gr-btn.icon-btn-18 {
    margin-left: 5px;
    padding: 8px 12px !important;
}

.gr-pagination button:hover:disabled span svg {
  fill: #D9D9D9;
}

@media (max-width: 640px) {
    .gr-header .name {
        display: none;
    }
    .actions .gr-btn.icon-btn-18 {
        margin-left: 15px;
    }
    .nameicon {
        margin-left: -10px;
    }
}

@media (min-width: 640px) {
    .gr-header .nameicon {
        display: none;
    }
}

@media(max-width: 460px) {
  .actions .gr-btn.icon-btn-18 {
    padding: 0 !important;
  }
}

h1, h2, h3, h4, h5, h6,
p, ul li, ul, li, span, label {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #252525;
}

/* LANDING PAGE */
.landing-page-3A {
  display: flex;
  flex-direction: row;
}

.landing-page-3A img {
  width: 70%;
}

.landing-page-3A h1 {
  width: calc(100% - 30px);
  color: #fff;
  margin-left: 15px;
  font-size: 2rem;
  line-height: 1.2;
  font-family: "Open Sans";
  font-weight: 100;
  font-style: normal;
  padding-bottom: 15px;
}

.actions-get-started {
  width: 335px;
  height: 285px;
  background-color: #4F5759;
  margin-top: 50px;
}

.landing-page {
  display: flex;
}

.button-combo h2 {
  color: #fff;
  margin-left: 15px;
  font-size: 1.4rem;
  line-height: 1.1;
  font-family: "Open Sans";
  font-weight: 100;
  font-style: normal;
}

.landing-pg-action {
  background-color: #fff;
  border-radius: 2px;
  color: #006F8D;
  margin-top: -5px;
  width: calc(100% - 24px);
}

span.pearson-icon {
  display: none;
}

@media (max-width: 1024px) {
  .landing-page-3A img {
    width: 64%;
  }
}

@media (max-width: 768px) {
  .landing-page-3A img {
    width: 48%;
  }
}

@media (max-width: 414px) {
  .landing-page-3A {
    display: flex;
    flex-direction: column-reverse;
    padding-left: 100px;
  }
  .landing-page-3A img {
    width: 72%;
  }
}

@media (max-width: 320px) {
  .landing-page-3A {
    padding-left: 0;
  }
  span.pearson-icon {
    display: block;
  }
  span.pearson-logo {
    display: none;
  }
  .landing-page-3A img {
    margin-left: 40px;
  }
  .actions-get-started {
    width: 300px;
    margin-left: 10px;
    margin-top: 15px;
  }
  .landing-page-3A img {
    width: 80%;
    margin-top: 20px;
    margin-bottom: -20px;
  }
}

.landing-page.group > a {
  display: inline-flex;
  margin-top: 10px;
}

span.product-label::before {
  content: '|';
  font-size: 1.35rem;
  font-weight: 300;
  padding: 0 0.2125em 0 0.2325em;
}

.mda-logo-typography {
    font-size: 1.575rem;
    font-weight: 600;
    color: #333;
    padding: 0;
    -webkit-transform: translateY(0.125rem);
    transform: translateY(0.125rem);
}

span.mda-brand-clr-02-landing {
    margin-left: -5px;
}

span.mda-brand-clr-03-landing {
    margin-left: -5px;
}

/* Landing page ends */



/* SVGs */
#pe-icons-sprite {
  display: none;
}

.underline {
  text-decoration: underline;
}

.gr-grid-container {
  display: block;
  max-width: 1280px;
  margin: auto;
  width: 100%;
}

/* FOCUS */
:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: 2px solid #0B73DA !important;
  outline-offset: 4px !important;
}

.add-focus:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 2px solid #0B73DA;
  outline-offset: 4px;
}

.gr-select:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 4px #1977D4;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #1977D4;
}

.de-link {
  color: #252525;
}

/* SKIP TO MAIN CONTENT BTN */
#skip-link
 {
	display: block;
	position: absolute;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	overflow: hidden;
 }

#skip-link:focus {
	position: relative;
  clip: unset;
  width: 202px;
  height: 36px;
  background-color: #047a9c;
  border: 1px solid #047a9c;
  color: #fff;
  display: inline-flex;

  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-pack: center;
    -ms-flex-pack: center;
  min-width: 152px;
  padding: 8px 24px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 22px;
  position: relative;
  margin: 12px;
	z-index: 1001;
  text-decoration: none;
  white-space: nowrap;
}

/* PAGINATION */
.gr-pagination button span {
  background-color: #fff;
}

/* DETAILS SUMMARY ACC*/
details {
  position: relative;
}

details > summary::-webkit-details-marker {
  display: none;
}

summary {
  display: block;
  cursor: pointer;
}

.report-settings details > summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Ecollapse-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -340.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='collapse-24'%3E%3Cg transform='translate(500.000000, 240.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,7.2642591 L12.6772745,7.264279 C12.6872407,7.27343586 12.6971852,7.28297167 12.7071068,7.29289322 L19.7071068,14.2928932 C20.0976311,14.6834175 20.0976311,15.3165825 19.7071068,15.7071068 C19.3165825,16.0976311 18.6834175,16.0976311 18.2928932,15.7071068 L12,9.41421356 L5.70710678,15.7071068 C5.31658249,16.0976311 4.68341751,16.0976311 4.29289322,15.7071068 C3.90236893,15.3165825 3.90236893,14.6834175 4.29289322,14.2928932 L11.2928932,7.29289322 C11.6736274,6.91215906 12.2849891,6.90261436 12.6772865,7.2642591 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 1.5em;
  font-weight: bold;
  padding: 0;
  text-align: center;
  width: 22px;
  height: 22px;
  fill: #252525;
  color: #252525;
}

.report-settings details h2 {
  margin-left: 28px;
}

details[open] summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Eexpand-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -380.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='expand-24'%3E%3Cg transform='translate(500.000000, 280.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,16.7357409 C12.2849891,17.0973856 11.6736274,17.0878409 11.2928932,16.7071068 L4.29289322,9.70710678 C3.90236893,9.31658249 3.90236893,8.68341751 4.29289322,8.29289322 C4.68341751,7.90236893 5.31658249,7.90236893 5.70710678,8.29289322 L12,14.5857864 L18.2928932,8.29289322 C18.6834175,7.90236893 19.3165825,7.90236893 19.7071068,8.29289322 C20.0976311,8.68341751 20.0976311,9.31658249 19.7071068,9.70710678 L12.7071068,16.7071068 C12.6971852,16.7170283 12.6872407,16.7265641 12.6772745,16.735721 L12.6772865,16.7357409 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  fill: #252525;
  color: #252525;
}

/* TABLE */
table {
  min-width: 640px;
  margin-bottom: 0;
}
table.pe-proto thead {
  background-color: #e9e9e9;
  border: 1px solid #d9d9d9;
}
table.pe-proto tr {
  border-bottom: 1px solid #d9d9d9;
}
table.pe-proto tr:nth-child(even) {
  background-color: #f5f5f5;
}
table.pe-proto th {
  padding: em(12) em(20);
  border-right: 1px solid #d9d9d9;
}
table.pe-proto th.sortable svg {
  transform: rotate(90deg);
}
table.pe-proto td {
  padding: em(14) em(20);
  vertical-align: middle;
}
table.pe-proto.small th, table.pe-proto.small td {
  padding: 5px 20px;
}
table thead {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
table thead th {
  padding: 1em 20px;
}
table tbody {
  border-bottom: 1px solid #d9d9d9;
}
table tbody td, table tbody th {
  padding: 1em 20px;
}
table tbody th {
  font-weight: 400;
}
table tbody[data-match="true"] .no-match {
  display: none;
}
table.hoverable tbody tr:hover, table.selectable tbody tr:hover {
  background-color: #e9e9e9;
  cursor: pointer;
}
table.sortable .sort-btn {
  border: 0;
  background-color: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
table.sortable th:hover {
  background-color: #e9e9e9;
}
table.sortable th .up, table.sortable th .down {
  display: none;
}
table.selectable .selected {
  background-color: #daf0ed;
  outline: 1px solid #19a6a4;
}
table.selectable .selected:hover {
  outline: 1px solid #047a9c;
}
.table-with-controls .controls {
  margin-bottom: 28px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-box-pack: end;
    -ms-flex-pack: end;
}
@media (max-width: 480px) {
  .table-with-controls .controls {
    flex-direction: column;
    -webkit-flex-flow: column;
  }
}
.table-with-controls .controls .control:first-child {
  margin-right: 1em;
}
@media (max-width: 480px) {
  .table-with-controls .controls .control:first-child {
    margin-right: 0;
  }
}
@media (max-width: 480px) {
  .table-with-controls .controls .control:last-child .basic-input svg {
    right: 13px;
  }
}
.responsive-table {
  margin-bottom: 35px;
}
@media (max-width: 640px) {
  .responsive-table {
    overflow: scroll;
  }
}

.font-16 {
  font-size: 16px !important;
}

.semibold {
  font-weight: 600;
}

.asterisk {
  font-size: 24px;
  font-weight: bold;
  color: #c44341;
  vertical-align: middle;
  line-height: 18px;
}

a {
  text-decoration: none;
}

main {
  grid-column: 1/13;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 2;
  margin-top: -20px;
}

.max-content-width {
  display: block;
  position: relative;
  padding: 0 50px 0 50px;
  text-align:center;
  -ms-grid-row: 3;
  background-color: #fff;
  margin-top: 15px;
}

#tabSlider-01.tab-slider {
  background-color: #252525;
}

/* TITLE BAR */
.title-bar {
    width: 100%;
    text-align: center !important;
    margin-bottom: 8px;
}

.title-bar > h1 {
    font-weight: 300;
    font-size: 24px;
    margin: auto;
    text-align: center;
    width: 170px;
}

.title-bar > h1 span.mda-brand-clr-01 {
    color: #005A71;
}

.title-bar > h1 span.mda-brand-clr-02 {
    color: #008334;
}



/* TABS */
.gr-tabbed-navigation .active .tab-action {
  font-weight: 600;
}
.gr-tabbed-navigation .tab-action {
  margin: 0.5em 2.2em;
}

@media (max-width: 900px) {
  .gr-tabbed-navigation .tab-action {
    margin: 0.5em 1em;
  }
}
@media (max-width: 653px) {
  .max-content-width {
    padding: 1em 10px 10px 10px !important;
  }
}

@media (max-width: 500px) {
  .max-content-width {
    padding: 1em 0 0 0 !important;
  }
  .gr-tabbed-navigation .tab-action {
    margin: 0.5em 0.5em;
  }
}

@media (max-width: 450px) {
  .gr-tabbed-navigation .tab-action {
    margin: 0.5em 0.25em;
  }
}

@media (max-width: 320px) {
  .gr-tabbed-navigation.light {
    height: 100%;
  }
}

/* MODAL */
.dialog-overlay {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

.dialog {
  z-index: 3;
}

.dialog-overlay[aria-hidden="true"],
.dialog[aria-hidden="true"] {
  display: none;
}

.dialog-overlay:not([aria-hidden="true"]),
.dialog:not([aria-hidden="true"]) {
  display: block;
}

/* SELECT */
.gr-select-container svg {
  pointer-events: none;
}

/* ALERT */
.gr-alert {
  position: absolute;
  top: 30px;
  left: 100px;
  z-index: 1;
}

.gr-alert.positive-alert svg {
  fill: #19A5A3;
}

.gr-alert .content-container {
  display: flex;
}

.gr-alert .error {
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16);
  padding: 8px;
  border: 1px solid #c7c7c7;
  border-left: 3px solid #DB0020;
  margin-bottom: 1em;
  max-width: 580px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 10;
  background: white;
}

.gr-alert .error .icon-text-container {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
}

.gr-alert .error svg.icon-18.alert {
  fill: #DB0020;
}

.alert-activity-level svg.icon-18.alert {
  fill: #19A5A3;
}

.gr-alert p {
  margin-top: 0;
  margin-bottom: 40px;
}

.gr-alert h4 {
  font-size: 16px;
  font-weight: 400;
}

a.icon-link svg,
a.icon-link-long svg {
  vertical-align: middle;
  padding-right: 1px;
  fill: #047a9c;
}

a.icon-link {
  font-size: 16px;
  font-weight: 600;
}

/* FROM INSTRUCTOR STYLE SHEET */
/* TOGGLE */
.card.myClass-container .toggle-container {
  width: 80px;
  position: absolute;
  top: 16px;
  right: 16px;
}

.gr-toggle {
  background: #c7c7c7;
}

.filter-container {
  margin-top: 33px;
  margin-bottom: 8px;
}

@media (max-width: 591px) {
  .filter-left {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
      -ms-flex-flow: row wrap;
  }
  .filter-left a.icon-link {
    margin-left: 0;
    margin-top: 5px;
  }
  .filter-right .download-btn {
    margin-left: 0;
    margin-top: 3px;
  }
}

.change-class-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: -14px;
}

.change-class {
  margin-top: -12px;
  margin-left: 12px;
}

@media(max-width: 900px) {
  .change-class-container {
    display: flex;
    flex-direction: column;
  }
  .change-class {
    margin-top: 0;
    margin-left: 0;
  }
}


/* SELECT INPUT */
.gr-select-container {
  width: 220px;
}

.course-id-input {
  width: 220px;
}

button.cancel {
  min-width: 93px;
  margin-left: 0;
}

button.join-course {
  min-width: 123px;
  margin-left: 0;
}

.filter-left {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  vertical-align: middle;
  justify-content: flex-start;
}

.filter-left a.icon-link {
  height: 32px;
  margin-top: 24px;
  margin-left: 16px;
}

.filter-left a.icon-link svg {
  vertical-align: middle;
  padding-right: 1px;
  fill: #047a9c;
}

.filter-right {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  vertical-align: middle;
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  margin-top: -65px;
}

.filter-right .download-btn {
  margin-top: 24px;
}

@media (max-width: 1000px) {
  .filter-right {
    margin-top: 0;
    justify-content: flex-start;
    -webkit-box-pack: start;
  -ms-flex-pack: start;
    flex-wrap: wrap;
  }
  .filter-right .download-btn {
    margin-top: 25px;
    margin-left: 16px;
  }
}

@media (max-width: 550px) {
  .filter-right .download-btn {
    margin-top: 70px;
    margin-left: -220px;
  }
  .filter-left a.icon-link {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 10px;
  }
}

/* MyClass Table */
.myClass-data {
  width: 100%;
  margin: 1em auto;
  border-collapse: collapse;
  white-space: nowrap;
}

.myClass-data th {
  text-align: left;
}

.myClass-data .sortable-icon svg.icon-18 {
  vertical-align: middle;
}

.myClass-data table {
  margin-bottom: 0;
  position: relative;
}

.special-row:hover {
  background-color: #fff !important;
  cursor: default !important;
}

th.button-cell:hover {
  background-color: #fff !important;
}

.myClass-data th {
  max-width: 387px;
}

.myClass-data .gr-btn.t-delete-btn {
  margin-left: 0;
  min-width: 91px;
  height: 36px;
}

.myClass-data .t-students .gr-checkbox {
  margin-bottom: 0;
}

.responsive-table {
  overflow: scroll;
}

.myClass-data th.t-my-food-ls span.sortable-icon {
  padding-right: 6px;
}

.myClass-data th.t-my-plate span.sortable-icon {
  padding-right: 32px;
}

@media (max-width: 1024px) {

  .myClass-data th {
    max-width: 110px;
  }

  button.sort-btn {
    width: 100%;
    display: flex;
    display: -ms-flexbox;
  }

  .myClass-data span.truncation {
    overflow: hidden;
    text-overflow: clip;
    background: -webkit-linear-gradient(left,#252525 80%, #fff);
    background: -moz-linear-gradient(left,#252525 80%, #fff);
    background: -o-linear-gradient(left,#252525 80%, #fff);
    background: linear-gradient(left,#252525 80%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

    flex: 1;
  }

  .myClass-data th.t-students, tr.t-students {
    max-width: 180px;
  }

  .myClass-data th.t-students, tr.t-students span.sortable-icon {
    padding-right: 75px;
  }

}

td.submitted li {
  list-style-type: none;
  margin-right: 40px;
}

td.submitted li:first-child {
  margin-left: -40px;
}

ul.submitted {
  display: flex;
  display: -webkit-box;
    display: -ms-flexbox;
  justify-content: flex-start;
  -webkit-box-pack: start;
    -ms-flex-pack: start;
  margin-top: -1px;
}

@media (max-width: 1003px) {
  .myClass-data span.t-trow-trunc {
    max-width: 80px;
    overflow: hidden;
    text-overflow: clip;
    background: -webkit-linear-gradient(left,#252525 70%, #fff);
    background: -moz-linear-gradient(left,#252525 70%, #fff);
    background: -o-linear-gradient(left,#252525 70%, #fff);
    background: linear-gradient(left,#252525 70%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

@media (max-width: 650px) {
  .myClass-data span.truncation {
    max-width: 60px;
  }

}

/* Pagination */
nav.gr-pagination.myClass {
  display: flex;
  display: -webkit-box;
    display: -ms-flexbox;
}

/* .gr-tabbed-navigation.light.manage-courses {
  margin-top: 20px;
} */

.manage-courses-container h3 {
  font-size: 16px;
  margin: 40px 0 12px 0;
}

.manage-courses-container
.gr-form-element
.gr-checkbox,
.create-new-course-container
.gr-form-element
.gr-checkbox {
  margin-top: 24px;
}

.manage-courses-container fieldset,
.create-new-course-container fieldset
 {
  border: none;
  margin-left: -10px;
}

.manage-courses-container a,
.create-new-course-container a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.29 !important;
  margin-top: 4px;
}

.manage-courses-container span,
.create-new-course-container span {
  display: block;
  font-size: 14px;
  line-height: 18px;
  margin-top: 3px;
}

.manage-courses-container
fieldset.myClass-report-categories{
  margin-top: 32px !important;
}

.manage-courses-container
.myClass-report-categories legend {
  font-size: 18px;
  font-weight:600;
  color:#252525;
}

.manage-courses-container
.myClass-report-categories
.first-checkbox {
  margin-top: -10px;
}

.button-row.download-print {
  display: flex;
  display: -webkit-box;
    display: -ms-flexbox;
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}

nav.gr-pagination.student-pagination {
  display: flex;
  display: -webkit-box;
    display: -ms-flexbox;
  margin-top: 25px;
}

.student-submissions-container {
  display: flex;
  display: -webkit-box;
    display: -ms-flexbox;
}

.student-submissions-container .report-days-container {
  display: block;
  margin-right: 70px;
}

@media (max-width: 620px) {
  .student-submissions-container {
    overflow: scroll;
  }
}

.student-submissions-container .report-days-container h3 {
  height: 16px;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #6a7070;
  white-space: nowrap;
}

.student-submissions-container p.report-days-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  line-height: 1.29 !important;
  color: #252525 !important;
}

.card-container.instructor-comments {
  margin-top: 20px;
}

label.gr-label.instructor-comments-input {
  color: #252525;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 10px;
}

.card-container.student-report {
  margin-top: 20px;
}

.card-container
.student-report
.button-row
.download-print {
  display: flex;
  display: -webkit-box;
    display: -ms-flexbox;
  justify-content: flex-end;
  -webkit-box-pack: end;
    -ms-flex-pack: end;
}

@media(max-width: 720px) {
  .gr-tabbed-navigation.manage-courses {
    height: 74px;
  }
  .gr-tabbed-navigation.manage-courses li.tab-item {
    max-width: 210px;
    padding-top: 18px;
  }
}

@media(max-width: 560px) {
  ul.tab-list.manage-courses {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
  }
  .gr-tabbed-navigation.manage-courses {
    height: 74px;
  }
  .gr-tabbed-navigation.manage-courses li.tab-item {
    padding-top: 8px;
  }
  .gr-tabbed-navigation.manage-courses li.tab-item {
   max-width: 110px;
  }
}

@media(max-width: 380px) {
  .gr-tabbed-navigation.manage-courses li.tab-item {
    max-width: 70px;
    padding-top: 18px;
    margin-top: -18px;
  }
}

.manage-courses.button-row,
.create-course.button-row {
  margin-top: 42px;
}

.manage-courses button.gr-btn.cancel-btn,
.create-course button.gr-btn.cancel-btn {
  margin-left: 0;
  height: 36px;
}

.manage-courses button.gr-btn.save-btn,
.create-course button.gr-btn.create-course-btn  {
  margin-left: -6px;
  height: 36px;
}

.divider.basic-settings {
  margin-top: -15px;
}

.gr-form-element.manage-courses.course-name,
.gr-form-element.create-course {
  width: 240px;
  margin-bottom: 32px;
}

.hide-delete-settings-container {
  margin-top: 23px;
}

.hide-delete-settings-container .button-row {
  margin-top: -12px;
}

.hide-delete-settings-container button.gr-btn.hide-btn {
  margin-left: 0;
  height: 36px;
}

.hide-delete-settings-container button.gr-btn.delete-btn {
  margin-left: -6px;
  height: 36px;
}

.time-zone-settings-container {
  margin-top: 20px;
  display: flex;
  display: -webkit-flex;
    display: -ms-flexbox;
  flex-direction: row;
  -webkit-flex-flow: row;
  position: relative;
  align-items: flex-start;
  -webkit-align-items: start;
  -ms-align-items: start;
  margin-bottom: 42px;
}

.time-zone-settings-container .gr-select-container.location {
  width: 144px;
}

.time-zone-settings-container .gr-form-element.time-zone {
  margin-left: 12px;
}

.time-zone-settings-container .gr-select-container.time-zone {
  width: 240px;
}

.time-zone-settings-container button.gr-btn.set-time-btn {
  height: 36px;
  margin-top: 18px;
  width: 93px !important;
  min-width: 120px;
  margin-left: 12px;
}

/* .time-zone-settings-container p.later-release-directive {
  position: absolute;
  display: block;
  color: #d0021b;
  font-style: italic;
  font-size: 12px;
  top: 25px;
  left: 532px;
  white-space: nowrap;
} */

/* p.later-release-directive.hide {
  display: none;
} */

.create-new-course-container h3.create-course {
  font-size: 16px;
  font-weight: 400;
  margin-top: 24px;
}

.create-new-course-container p.course-id-input {
  font-size: 12px;
  color: #6a7070;
  margin-top: -2px;
  width: 380px;
}

@media (max-width: 604px) {
  .create-new-course-container p.course-id-input {
    width: 260px;
  }
}

@media (max-width: 918px) {
  .time-zone-settings-container {
    flex-wrap: wrap;
  }
  .time-zone-settings-container p.later-release-directive {
    white-space: wrap;
    left: 5px;
    top: 45px;
  }
}

@media (max-width: 566px) {
  button.gr-btn.delete-btn.primary {
    margin-top: -5px;
  }
  .time-zone-settings-container .gr-select-container.time-zone {
    margin-left: -12px;
  }
  .time-zone-settings-container button.gr-btn.set-time-btn {
    margin-left: 0;
    margin-top: 9px;
  }
}

.gr-form-element.report {
  display: flex;
  flex-direction: column;
  -webkit-flex-flow: column;
}

/* REPORTS 504 */
@media(max-width: 1025px) {
  th.sort.t-student-rep {
    min-width: 460px;
  }
}

@media(max-width: 720px) {
  .card .myClass-container h2 {
    width: 400px;
  }
}

/* REPORTS */
.report-settings-url {
  display: flex;
  flex-direction: row;
  -webkit-flex-flow: row;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}

.report-settings-url .icon-link {
  margin-top: 15px;
}

.gr-alert.first-start-alert {
  top: 350px;
  left: 300px;
  z-index: 5000;
}

@media (max-width: 900px) {
  .gr-alert.first-start-alert {
    top: 350px;
    left: 200px;
  }
}

@media (max-width: 720px) {
  .gr-alert.first-start-alert {
    top: 200px;
    left: 50px;
    max-width: 450px;
  }
}

@media (max-width: 400px) {
  .gr-alert.first-start-alert {
    max-width: 300px;
  }
}

@media (max-width: 320px) {
  .gr-alert.first-start-alert {
    top: 200px;
    left: 50px;
    max-width: 220px;
  }
}

/* FROM STUDENT STYLE SHEET */
/* REPORTS */
.select-reports {
  position: relative;
}
.select-reports .icon-link {
  position: absolute;
  top: -10px;
  right: 5px;
  font-size: 16px;
  font-weight: 600;
}


.select-reports a.icon-link-long {
  position: absolute;
  top: -5px;
  right: 0;
  font-size: 16px;
  font-weight: 600;
}

.select-reports
a.icon-link-long
.de-link {
  font-weight: 400;
}

.select-reports p.select-reports-directive {
  margin-top: -10px;
  margin-bottom: 20px;
}

.report-settings p {
  margin-top: -10px;
  line-height: 16px;
}

.report-settings-container {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}

.report-settings-container
.gr-select-container {
  width: 178px;
  margin-right: 15px;

}

.cc-report-settings {
  font-size: 18px;
  width: 180px;
  position: absolute;
  top: 0;
}

.button-row-center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 620px) {
  .report-settings-container {
      flex-wrap: wrap;
  }
}

.card-container.report-view {
  margin-top: 24px;
}

.instruction-macro {
  display: flex;
  flex-direction: row;
  justify-content: space-between !important;
}

.btn-group-container-macro {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 150px;
}

button.print-macro {
  height: 32px;
  min-width: 82px;
}

/* REPORT BTNS */
.report-view .btn-group-container {
  padding: 0;
  margin: 0;
}

@media (max-width: 320px) {
  .gr-alert {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 1;
  }
  .btn-group-container-macro {
    width: 200px;
    height: 36px;
  }
  .instruction-macro {
    flex-direction: column;
    margin-bottom: 30px;
  }
}

@media (max-width: 300px) {
  .gr-btn {
      min-width: 140px;
  }
  .btn-group.right-side,
  .btn-group.left-side {
      margin-left: -30px;
  }
}

.report-view .btn-group.left-side ul {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  margin-left: -40px;
  margin-top: -80px;
}

.report-view .btn-group.left-side .gr-btn {
  margin-top: 20px;
}

button.gr-btn.submit-btn {
  margin-right: 0;
}
button.gr-btn.download-btn {
  margin-right: 0;
}

button.gr-btn.email-btn {
  margin-right: 0;
}

.report-view .btn-group.right-side ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  margin-right: -10px;
}

.report-view .gr-select-container {
  width: 88px;
}

@media (max-width: 1170px) {
  .report-view .btn-group.right-side ul {
      justify-content: center;
      margin-right: 0;
  }
  .report-view .btn-group.left-side ul {
      margin-top: 0px;
      justify-content: center;
      margin-left: 0;
  }
}

@media (max-width: 950px) {
  .report-view .btn-group.right-side ul
   {
      flex-wrap: wrap;
  }
  .select-reports a.icon-link-long {
      width: 150px;
  }
}

@media (max-width: 720px) {
  .collapsed-card-container {
      display: flex;
      flex-wrap: wrap;
  }
}

@media (max-width: 650px) {
  .select-reports a.icon-link-long {
      position: relative;
  }
  .select-reports .icon-link {
      position: relative;
  }
}

@media (max-width: 484px) {
  .report-view .btn-group.left-side ul
   {
      flex-wrap: wrap;
      margin-top: -10px;
  }
}

/* Report comparisions*/
.report-settings
.container-comparison-report {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.report-settings
.container-comparison-profile {
  min-width: 140px;
  width: 140px;
  height: 50px;
  margin-top: 15px;
  margin-right: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.report-settings
.container-comparison-profile
.profile-label {
  font-size: 12px;
  line-height: 16px;
  color: #6A7070;
  display: block;
}

.report-settings
.container-comparison-report
.container-comparison-profile
.compare-profile-select {
  margin-top: -2px;
  min-width: 140px;
}

.profile-select {
  width: 159px;
}

@media (max-width: 660px) {
  .report-settings
  .container-comparison-report {
      flex-wrap: wrap;
  }
}

@media (max-width: 450px) {
  .report-settings-container {
      width: 150px;
  }
  .report-settings-container
  .dropdown-checkboxes {
      min-width: 200px;
  }
}

@media (max-width: 320px) {
  .report-settings-container
  .dropdown-checkboxes {
      min-width: 170px;
  }

  .report-settings-container
  .dropdown-menu {
      min-width: 170px;
  }
}

/* PROFILE */
.profile-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  z-index: 0;
}

/* NEW CSS HERO profiles_100_test1 */
.hero-image {
  z-index: -10;
}

h2.profile-title {
  margin-top: 36px;
  margin-bottom: 22px;
  font-size: 20px;
  text-align: left;
  line-height: 1.3;
  letter-spacing: normal;
}
p.profile {
  font-size: 18px;
  line-height: 1.33;
  margin-bottom: -10px;
}
p.profile-list {
  font-size: 18px;
  line-height: 1.33;
  margin-top: 20px;
}
.profile {
  font-size: 18px;
  line-height: 1.33;
}
ul.profile li {
  font-size: 18px;
  line-height: 1.33;
  margin-left: -10px;
}
button.create-profile {
  margin-top: 40px;
  margin-left: 85px;
}


@media (max-width: 1045px) {
  .hero-image-profile {
      background-image: url("../images/hero_image_profile_sm.jpg");
      background-position: 320px 250px;
      margin-bottom: -190px;
  }

}

@media (max-width: 940px) {
  .hero-image-profile {
      background-image: url("../images/hero_image_profile_xs.jpg");
      background-position: 320px 320px;
      margin-bottom: -280px;
  }
  .hero-text-profile {
      width: 75%;
      margin: 0 50px;
  }
  button.create-profile {
      margin-left: 50px;
  }
}

@media (max-width: 888px) {
  .hero-image-profile {
      background-position: 300px 430px;
      margin-bottom: -200px;
  }
  .hero-text-profile {
      width: 50%;
  }
}

@media (max-width: 720px) {
  .hero-image-profile {
      background-position: 240px 430px;
  }
}

@media (max-width: 640px) {
  .hero-image-profile {
      background-position: 120px 460px;
      margin-bottom: -170px;
  }
  .hero-text-profile {
      width: 40%;
  }
}


@media (max-width: 580px) {
  .hero-image-profile {
      background-size: 0 0;
      margin-bottom: -280px;
  }
  .hero-text-profile {
      width: 36%;
  }
}

@media (max-width: 580px) {
  .hero-text-profile {
      width: 28%;
  }
  h2.profile-title {
      font-size: 16px;
  }
  p.profile {
      font-size: 14px;
  }
  p.profile-list {
      font-size: 14px;
  }
  ul.profile li {
      font-size: 14px;
  }
}

@media (max-width: 400px) {
  .hero-image-profile {
      margin-bottom: -340px;
  }
  .hero-text-profile {
      width: 26%;
  }
}

@media (max-width: 320px) {
  .hero-image-profile {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 28px;
  }
  .hero-text-profile {
      width: 16%;
  }
}

/* CREATE PROFILE */
.create-profile {
  width: 80%;
  margin: 24px;
}

h2.create-profile {
  margin-top: 0;
  font-size: 20px;
  font-weight: 400;
}

p.create-profile {
  font-size: 16px;
  margin-top: -12px;
  margin-bottom: 0;
}

.create-profile-form {
  margin: 24px 24px 0 24px;
  width: 100%;
}

.create-profile-form h3 {
  font-size: 18px;
  color: #252525;
  line-height: 1.33;
  font-weight: 400;
}

.create-profile-form
.gr-form-element {
  width: 240px;
  margin-bottom: 32px;
}

.gr-form-element.basic-info {
  margin-top: -5px !important;
}

.gr-form-element.basic-info-gender {
  margin-top: -3px !important;
}

button.gr-btn.icon-btn-18.info-gender {
  margin-top: 11px !important;
  margin-left: -24px;
  position: relative;
}

.gr-coachmark-container.coachmark-gender {
  width: 422px;
  position: absolute;
  top: 190px;
  left: 44px;
}

.gr-coachmark-container.coachmark-gender .coachmark {
  width: 422px;
}

.gr-coachmark-container.coachmark-gender h3 {
  font-size: 14px;
  font-weight: 600;
}

.coachmark-gender p {
  margin-top: -10px !important;
}

@media (max-width: 768px) {
  button#gender-info-trigger {
    margin-top: 10px !important;
    margin-left: -30px;
  }
  .gr-coachmark-container.coachmark-gender {
    top: 205px;
    left: 40px;
  }
}

@media (max-width: 720px) {
  button#gender-info-trigger {
    margin-top: 10px !important;
    margin-left: -30px;
  }
  .gr-coachmark-container.coachmark-gender {
    top: 205px;
    left: 40px;
  }
}

@media (max-width: 565px) {
  button#gender-info-trigger {
    margin-top: 10px !important;
    margin-left: -30px;
  }
  .gr-coachmark-container.coachmark-gender {
    top: 205px;
    left: 108px;
  }
}

@media (max-width: 320px) {
  .gr-coachmark-container.coachmark-gender {
      width: 200px;
      top: 60px;
      left: 130px;
  }
  .gr-coachmark-container.coachmark-gender .coachmark {
      width: 200px;
  }
}

.input-info-combo {
  margin-bottom: 32px;
  display: flex;
  flex-direction: row;
}

.profile-ht {
  margin-top: -36px;
}

.metric-height {
  margin-bottom: 32px;
}

.metric-height-checkbox {
  color: #252525;
}

.gender-data {
  width: 240px;
}

.group-input-height {
  display: flex;
  margin-top: -40px;
}

.gr-form-element.height-input-ft {
  width: 64px;
  margin-right: 32px;
}

.gr-form-element.height-input-in {
  width: 64px;
}

.profile-wt {
  margin-top: 32px;
}

input#basicInput {
  text-align: right;
}

.gr-form-element.profile-wt-input.target-wt-input {
  margin-top: -20px !important;
}

input#target-weight-input {
  text-align: right;
}

p.target-wt-info {
  width: 398px;
  font-size: 12px;
  color: #6a7070;
  margin-top: -22px;
}

.gr-form-element.profile-wt-input {
  width: 72px;
  margin-top: -36px !important;
}

.profile-wt-input label {
  width: 107px;
}

.wt-goals {
  /* margin-top: 24px; */
  margin-top: -5px;
}


p.profile-instruction {
  margin-top: -15px;
}

.activity-level {
  margin-top: 41px;
}

.activity-level legend {
  font-size:18px;
  color:#252525;
}

.activity-level .gr-radio {
  margin-top: 25px;
}

.activity-level label {
  width: 516px;
  color:#252525;
}

@media (max-width: 770px) {
  .activity-level label {
      width: 416px;
      word-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .activity-level label {
      width: 316px;
  }
  button#gender-info-trigger {
    margin-top: 10px !important;
    margin-left: -30px;
  }
  .coachmark-gender {
    margin-left: -70px;
    margin-top: 26px;
  }
}

@media (max-width: 565px) {
  button#gender-info-trigger {
    margin-top: 10px !important;
    margin-left: -30px;
  }
  .coachmark-gender {
    margin-left: -70px;
    margin-top: 46px;
  }
}

@media (max-width: 500px) {
  .activity-level label {
      width: 250px;
  }
}

@media (max-width: 320px) {
  .gr-form-element.basic-info {
      width: 200px;
  }
  .gr-form-element.basic-info-gender {
      width: 170px;
  }
  button#gender-info-trigger {
    margin-top: 10px !important;
    margin-left: 40px !important;
  }
  .coachmark-gender {
    margin-left: 0;
    margin-top: 5px;
  }
  .create-profile {
      width: 200px;
  }
  .basic-info {
      width: 190px;
      margin-top: -10px;
  }
  .basic-info-gender {
      width: 190px;
      margin-top: -10px;
  }
  button.gr-btn.icon-btn-18.info-gender {
      margin-top: 11px;
  }
  .gr-form-element.metric-height {
      margin-top: -41px;
  }
  .height-input-ft {
      margin-top: 15px;
  }
  .height-input-in {
      margin-top: 15px;
  }
  .profile-wt {
      margin-top: 15px;
  }
  .gr-form-element.profile-wt-input {
      margin-top: -15px;
  }
  .gr-form-element.wt-goals {
      margin-top: -15px;
  }
  .activity-level label {
      width: 200px;
  }
}



.questionaire {
  background-color:#5E6464;
  width: 451px;
  height: 36px;
  margin-top: -5px;
  margin-left: 28px;
  margin-bottom: 48px;
  padding-top: 2px;
}

.questionaire p {
  color: white;
  margin: 0;
  padding: 5px 5px 5px 18px;
}

.questionaire a {
  color: #d1effc;
}

a.light-focus:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: 2px solid #CDE4F4 !important;
  outline-offset: 4px !important;
}

@media (max-width: 670px) {
  .questionaire {
      width: 400px;
      word-wrap: wrap;
      height: 54px;
  }
}

@media (max-width: 600px) {
  .questionaire {
      width: 300px;
  }
}

@media (max-width: 500px) {
  .questionaire {
      width: 250px;
  }
}

@media (max-width: 320px) {
  .questionaire {
      width: 180px;
      height: 78px;
  }
}

.create-profile-form {
  width: 100%;
}

.create-profile-form
.gr-form-element {
  margin-top:41px;
}

legend.select-avatar-instruction {
  font-size: 18px;
  color: #252525;
}

.gr-form-element.avatar-container {
  width: 100%;
  margin-top: 41px;
  margin-bottom: 0;
}

@media (max-width: 920px) {
  p.select-avatar-instruction {
      width: 90%;
  }
}

@media (max-width: 880px) {
  p.select-avatar-instruction {
      width: 70%;
  }
}

@media (max-width: 780px) {
  p.select-avatar-instruction {
      width: 60%;
  }
}

@media (max-width: 670px) {
  p.select-avatar-instruction {
      width: 55%;
  }
}

@media (max-width: 600px) {
  p.select-avatar-instruction {
      width: 45%;
  }
}

@media (max-width: 500px) {
  p.select-avatar-instruction {
      width: 35%;
  }
}

@media (max-width: 320px) {
  p.select-avatar-instruction {
      width: 190px;
  }
}


/* AVATARS */
.avatar-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* min-width: 130%; */
  min-width: 1034px;
}

@media (max-width: 1090px) {
  .avatar-row {
      min-width: 90%;
      width: 76%;
  }
}

@media (max-width: 760px) {
  .avatar-row {
      min-width: 480px;
      width: 50%;
  }
}

@media (max-width: 600px) {
  .avatar-row {
      min-width: 350px;
      width: 50%;
  }
}

@media (max-width: 420px) {
  .avatar-row {
      min-width: 280px;
      width: 50%;
  }
  .avatar-radio-selector {
      margin-right: -20px;
  }
}

@media (max-width: 320px) {
  .avatar-row {
      min-width: 250px;
      width: 30%;
  }
}

.avatar-row {
  max-width: 800px;
}

.avatar-row img {
  width: 72px;
  height: 72px;
  margin-right: 48px;
  margin-bottom: 41px;
}

.avatar-radio-selector {
  border: 0;
  position: relative;
  padding: 0;
}

.avatar_radio_item {
  position: absolute;
  right: 48.5px;
  top: 8px;
  opacity: 0;
}

.avatar-radio-selector input:checked + label:after {
  position: absolute;
  top: 4px;
  left: 54px;
  height: 20px;
  width: 20px;
  display: block;
  content: '';
  background: url(../images/icons/check-sm-18-uxf-white.svg) no-repeat;
  background-size: 18px 18px;
  background-position: center;
  background-color: #da0474;
  border: 1px solid #fff;
  fill: #fff !important;
  border-radius: 50%;
}

.avatar-radio-selector input:focus + label:after {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: 2px solid #0B73DA !important;
  outline-offset: 4px !important;
}

.create-new-profile-btn-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.create-new-profile-btn-row button {
  max-height: 36px;
}

.create-new-profile-btn-row
.create-new-profile-btn {
  min-width: 138px;
}

@media (max-width: 620px) {
  .avatar-btns {
      flex-wrap: wrap;

  }
  p.target-wt-info {
      max-width: 290px;
  }
}

@media (max-width: 320px) {
  p.target-wt-info {
      max-width: 190px;
  }
}


/* Activity Level */
.activity-level-page {
  margin-left: 24px;
  margin-right: 24px;
}



legend.gr-label.activity-level-q {
  font-size: 12px;
  height: 24px;
  max-width: 1034px;
  line-height: 16px;
  color: #252525;
  font-size: 14px;
  display: block;
  line-height: 1.71;
  height: 100%;
}

.last-radio-btn {
  margin-bottom: 32px;
}

.create-new-profile-btn-row
.identify-activity-btn {
  min-width: 201px;
  height: 36px;
}

p.results-explanation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -2px;
  font-size: 14px;
  color: #252525;
  line-height: 1.71;
}

@media (max-width: 490px) {
  .create-new-profile-btn-row {
    flex-wrap: wrap;
    margin-left: -25px;
  }
}

.gr-alert.alert-activity-level {
  position: relative;
  width: 580px;
  margin-top: -30px;
  margin-left: -100px;
}

@media (max-width: 700px) {
  .gr-alert.alert-activity-level {
      width: 450px;
  }
}

@media (max-width: 550px) {
  .gr-alert.alert-activity-level {
      width: 380px;
  }
}

@media (max-width: 550px) {
  .gr-alert.alert-activity-level {
      width: 200px;
  }
}


/* CONTENT */
.core-content-container {
  width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  -ms-grid-row: 4;
}

.card-container.myClass-container {
  width: -webkit-calc(100% - 48px);
  width:    -moz-calc(100% - 48px);
  width:         calc(100% - 48px);
  margin: 24px;

  -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.card.myClass-container {
  padding: 16px;
  height: 100%;
  position: relative;
}

.card.myClass-container h2,
.card-container.myClass-container h2 {
  color: #252525;
  font-size: 18px;
  font-weight: 600;
}

/* Subnav Back */
.card.sub-nav-back {
  padding: 0;
}

@media(max-width: 320px) {
  .card.sub-nav-back {
    width: 240px;
  }
  .card.profile-card-fw {
    width: 200px;
  }
  .card-container.myClass-container .card {
    width: 200px;
  }
}

button.gr-btn.sub-nav-back {
  min-width: 100px !important;
  border: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 16px;
  margin-right: 0;
}

.button-label {
  vertical-align: 6px;
  padding-left: 5px !important;
}

/* Avatar */
.card-container.profile-card {
  width: 240px;
  margin-top: 4px;
  margin-left: 24px;
}

.profile-card .card {
  height: 81px;
  background-color: #fff;
  position: relative;
}

.profile-card img {
  width: 65px;
  margin-top: -5px;
  margin-left: -10px;
}

.profile-card .clip-circle {
  clip-path: circle(28px at center);
}

.profile-card .card-data-container {
  display: flex;
  position: absolute;
  top: 10px;
  left: 78px;
  width: 90px;
}

.profile-card .name-label {
  width: 34px;
  height: 16px;
  font-family: OpenSans;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  color: #6a7070;
}

.profile-card .name {
  width: 90px;
  height: 18px;
  font-family: OpenSans;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: center;
  color: #252525;
  white-space: nowrap;
}

.profile-card-settings {
  position: absolute;
  right: 5px;
  top: 5px;
}

.profile-card-settings svg {
  fill:#6a7070;
}

.profile-settings-icon {
  width: 24px !important;
  height: 24px !important;
  border: none;
  padding: 5px;
}

/* Profile full-width */
.card.profile-card-fw {
  width: -webkit-calc(100% - 48px);
  width:    -moz-calc(100% - 48px);
  width:         calc(100% - 48px);
  height: 54px;
  margin: 24px;
}

.profile-card-fw .clip-circle {
  border-radius: 50%;
}

.profile-card-fw img.clip-circle.pearson-illustrated-avatar {
  width: 30px;
  height: 30px;
  margin-top: 17px;
}

.profile-fw-container {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin-top: -22px;
}
.profile-fw-left {
  display:flex;
}
.profile-fw-right {
  display:flex;
}
.profile-plan {
  display: flex;
  list-style: none;
}

.profile-link {
  padding-left: 15px;
  padding-top: 2px;
  font-size: 18px;
}

.profile-plan li {
  margin-left: 48px;
}

@media (max-width: 820px) {
  .card.profile-card-fw {
    height: 90px;
  }
  .profile-fw-container {
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    padding-top: 5px;
  }
  .profile-fw-right {
    margin-top: -30px;
    margin-left: -84px;
  }
}

@media (max-width: 540px) {
  .card.profile-card-fw {
    height: 124px;
  }
  .profile-plan {
    display: block;
  }
}

@media (max-width: 320px) {
  .card.profile-card-fw {
    height: 130px;
    width: 200px;
  }
  a.profile-link {
    white-space: nowrap;
  }
}

.report-iframe {
  width: 100%;
  margin-top: 30px;
  overflow: scroll;
  border: none;
}

.divider span {
  background-color: #c7c7c7;
  display: inline-block;
  padding: 0 1px;
  min-height: 2px;
  width: calc(100vw - 473px);
  max-width: 473px;
  min-width: 240px;
  margin: 12px 0 14px 0;
  overflow: hidden;
}

.full-width-divider span {
  background-color: #c7c7c7;
  display: inline-block;
  padding: 0 1px;
  min-height: 2px;
  width: 100%;
  margin: 12px 0 14px 0;
  overflow: hidden;
}

.reports.dashboards-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-flow: row;
  flex-grow: 2;
  margin-top: 26px;
}

.reports.dashboards-container .dashboard-first {
  margin-right: 30px;
}

.reports-header-container {
  position: relative;
}

.reports-header-container h3 {
  font-size: 18px;
  color: #252525;
}

nav.reports-header-container {
 position: absolute;
 top: -10px;
 right: 0;
}

@media (max-width: 620px) {
  nav.reports-header-container {
    position: relative;
    margin-bottom: 20px;
   }
}

/* REPORTS */
ul.reports-list {
  list-style: none;
}

ul.reports-list {
  list-style: none;
}

ul.reports-list li {
  margin-left: -39px;
}

ul.reports-list a {
  text-decoration: none;
}

ul.reports-list p {
  margin-top: 3px;
}

ul.reports-list.first {
  margin-top: -8px;
}

ul.reports-list li.last {
  margin-bottom: 24px;
}

.gr-select-container #selectComparison {
  width: 140px;
}

.compare-profile-select .gr-select-container {
  width: 140px;
}

/* DROPDOWN multiselect */
div#choiceListDays {
  position: absolute;
  z-index: 3;
  max-height: 328px;
  /* height: 100%; */
  height: 56.25vw;

  top: 134px;
  left: 0;
}

div#choiceListDaysCompare {
  position: absolute;
  z-index: 3;
  max-height: 328px;
  height: 56.25vw;
  top: 168px;
  left: 176px;
}

div#choiceListMeals {
  position: absolute;
  z-index: 3;
  max-height: 218px;

  left: 210px;
  top: 134px;
}

div#choiceListMealsCompare {
  position: absolute;
  z-index: 3;
  max-height: 218px;

  left: 386px;
  top: 168px;
}

div#choiceListDays02 {
  position: absolute;
  z-index: 2;
  max-height: 328px;
  height: 100%;
}

div#choiceListDays02Compare {
  position: absolute;
  z-index: 2;
  max-height: 328px;
  height: 100%;

  left: 174px;
  top: 270px;
}

div#choiceListMeals02 {
  position: absolute;
  z-index: 2;
  max-height: 218px;
  height: 100%;
}

div#choiceListMeals02Compare {
  position: absolute;
  z-index: 2;
  max-height: 218px;
  height: 100%;

  left: 385px;
  top: 270px;
}

@media(max-width: 768px) {
  div#choiceListDays {
    top: 150px;
  }
  div#choiceListMeals {
    top: 150px;
  }
}

@media(max-width: 562px) {
  div#choiceListDays {
    top: 177px;
  }
  div#choiceListMeals {
    top: 249px;
    left: 0;
  }
}

@media(max-width: 320px) {
  div#choiceListDays {
    top: 236px;
    height: 100%;
  }
  div#choiceListMeals {
    top: 308px;
  }
}

.dropdown-checkboxes {
  border: 1px solid #c7c7c7;
  color: #252525;
}

.dropdown-checkboxes svg.icon-24.close-state,
.dropdown-checkboxes svg.icon-24.open-state {
  fill: #6A7070;
}

input[type="checkbox"]:indeterminate ~span {
  background-color:#047A9C;
  border:#047A9C;
  border-radius:2px !important;
  width: 21px !important;
  height: 21px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Ehr-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-360.000000, -1340.000000)'%3E%3Cg id='text-ed' transform='translate(60.000000, 1220.000000)'%3E%3Cg id='Icons/Text-Editor/hr-24' transform='translate(300.000000, 120.000000)'%3E%3Cg id='hr-24'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M3,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,13 L3,13 C2.44771525,13 2,12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 Z' id='icon' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  fill:white;
  background-position: -1px -1px;
  margin-left: -1px;
}

input[type="checkbox"]:indeterminate ~span svg {
  width: 20px;
}

.selected-days,
.selected-meals {
  font-size: 12px;
  line-height: 16px;
  color: #6A7070;
  display: block;
  margin-bottom: 4px;
}

button.dropdown-checkboxes {
  min-width: 178px;
  height: 36px;
  margin: 0 32px 0 0;
  border-radius: 4px;
  text-align: left;
  display: inline-flex;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  align-items: flex-start;
  -webkit-align-items: start;
  -ms-align-items: start;
  align-content: flex-start;
  -webkit-align-content: start;
  -ms-align-content: start;
  vertical-align: middle;
  padding: 6px 10px 5px 10px;
  font-size: 14px;
}

button.dropdown-checkboxes
span#daysList,
button.dropdown-checkboxes
span#mealsList,
button.dropdown-checkboxes
span#mealsListCompare,
button.dropdown-checkboxes
span#daysList02,
button.dropdown-checkboxes
span#daysList02Compare,
button.dropdown-checkboxes
span#mealsList02,
button.dropdown-checkboxes
span#mealsList02Compare {
  padding-top: 4px;
}

button.dropdown-checkboxes
span#daysListCompare {
  padding-top: 4px;
}

fieldset.dropdown-checkboxes {
  border: none;
  padding-left: 0;
  margin-left: 0;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #C7C7C7;
  width: 178px;
  padding: 15px;
  height: 100%;
}

.gr-checkbox.parent-checkbox {
  border-bottom: 1px solid#d9d9d9;
  padding-bottom: 10px;
}

@media (max-width: 790px) {
  .report-settings-container {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 565px) {
  div#choiceListDaysCompare {
    top: 264px;
    left: 0;
  }
  div#choiceListMealsCompare {
    top: 264px;
    left: 210px;
  }
  div#choiceListDays02Compare {
    top: 432px;
    left: 0;
  }
  div#choiceListMeals02Compare {
    top: 432px;
    left: 210px;
  }
}

@media (max-width: 562px) {
  .button-row-center {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 320px) {
  .card.sub-nav-back {
    width: 318px;
  }
  button.gr-btn.sub-nav-back {
    max-width: 200px;
  }
  .card.profile-card-fw {
    height: 130px;
    width: 275px;
  }
  .card-container.myClass-container .card {
    width: 275px !important;
  }
  div#choiceListDaysCompare {
    top: 298px;
    left: 0;
    height: 100%;
  }
  div#choiceListMealsCompare {
    top: 369px;
    left: 0;
  }
  div#choiceListDays02Compare {
    top: 534px;
    left: 0;
  }
  div#choiceListMeals02Compare {
    top: 607px;
    left: 0;
  }
}

@media (max-width: 300px) {
  button.dropdown-checkboxes,
  button#update-report-btn {
    min-width: 140px;
  }
  span#daysList,
  span#mealsList {
    white-space: nowrap;
    width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dropdown-menu,
  fieldset.dropdown-checkboxes {
    width: 140px;
  }
  .button-row-center {
    align-items: center !important;
    justify-content: center !important;
  }
}

/* EMAIL Dialog */
textarea::-webkit-input-placeholder {
  color: #6a7070;
}

textarea:-moz-placeholder { /* Firefox 18- */
  color: #6a7070;
}

textarea::-moz-placeholder {  /* Firefox 19+ */
  color: #6a7070;
}

textarea:-ms-input-placeholder {
  color: #6a7070;
}

textarea::placeholder {
  color: #6a7070;
}

textarea {
  color: #252525;
}

.email-popup {
  z-index: 10;
  width: 600px;
  height: 747px;
  border: 1px solid #C7C7C7;
  position: absolute;
  background-color: white;
  top: 480px;
  right: 110px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.email-popup
.email-content-container
.email-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #C7C7C7;
  height: 65px;
  padding-left: 20px;
  padding-right:20px;
}

.email-popup
.email-content-container
.email-title-01 {
  margin-top:5px;
}

.email-popup
.email-content-container
.email-icon {
  vertical-align: top;
  margin-right: 10px;
}

.email-popup
.email-content-container
.email-icon svg {
  fill:#6a7070;
}

.email-popup
.email-title-02
.close-title button {
  margin-top: 8px;
}

.email-popup
.email-btn-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0 20px;
  width: 540px;
}

.email-meta {
  width: 540px;
  margin: 0 20px;
}

.email-meta .email-field-to,
.email-meta .email-field-from,
.email-meta .email-field-subject {
  border-bottom: 1px solid #c7c7c7;
  padding: 8px 0;
}

.email-popup
.email-meta
input#input-to {
  width: 93%;
  border: none;
  margin-left:5px;
}

.email-popup
.email-meta
input#input-from {
  width: 89%;
  border: none;
  margin-left: 5px;
}

.email-popup
.email-meta
input#input-subject {
  width: 87%;
  border: none;
  margin-left: 5px;
}

.email-input-container .email-input {
  margin-top: 26px;
}

label.email-input {
  font-size: 14px;
  font-weight: 600;
  color:#252525;
}

.email-input .email-content-report .last {
  margin-bottom: 28px;
}

.email-input-container .email-content-report p {
  margin-top:-15px;
}

.email-input-container
.email-content-report
span.time-period {
  margin-right: 12px;
}

.attachment-icon svg {
  fill:#6a7070;
  width: 16px;
  vertical-align: bottom;
  transform: rotate(15deg);
}

.email-popup
.email-btn-row button {
  min-width: 110px;
}

@media (max-width: 800px) {
  .email-popup {
    width: 480px;
  }
  .email-meta {
    width: 400px;
  }
  .email-btn-row {
    width: 400px !important;
    margin: 0 20px !important;
  }

  .email-field-to,
  .email-field-from,
  .email-field-subject {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
  }

}

@media (max-width: 600px) {
  .email-popup {
    width: 320px;
    height: 910px;
  }
  .email-meta {
    width: 260px;
  }
  .email-btn-row {
    width: 280px !important;
    margin: 0 20px !important;
  }
}

@media (max-width: 550px) {
  .email-input-container .email-content-report span.time-period {
    margin-right: 8px;
  }
  .email-btn-row {
    width: 250px !important;
    margin: 0 20px !important;
  }
  .email-popup {
    height: 890px;

  }
}

@media (max-width: 400px) {
  .email-popup {
    right: 30px;
  }
}

@media (max-width: 320px) {
  .email-popup {
    right: 0;
    width: 240px;
  }
  .email-meta {
    width: 200px;
  }
  .email-input-container {
    width: 200px;
  }
  p.email-content-report {
    width: 200px;
  }
  .email-popup .email-btn-row {
    width: 200px;
    margin-left: 10px !important;
    width: 200px !important;
  }
  .email-popup .email-btn-row button {
    min-width: 90px;
  }
}


/* ANNOTATIONS Dialog */
.annotations-popup {
  z-index: 10;
  width: 600px;
  height: 360px;
  border: 1px solid #C7C7C7;
  position: absolute;
  background-color: white;
  top: 480px;
  right: 110px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.annotations-popup
.annotations-content-container
.annotations-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #C7C7C7;
  height: 65px;
  padding-left: 20px;
  padding-right:20px;
}

.annotations-popup
.annotations-content-container
.annotations-title-01 {
  margin-top:5px;
}

.annotations-popup
.annotations-content-container
.annotation-icon {
  vertical-align: top;
  margin-right: 10px;
}

.annotations-popup
.annotations-content-container
.annotation-icon svg {
  fill:#6a7070;
}

.annotations-popup
.annotations-title-02
.close-title button {
  margin-top: 8px;
}

.annotations-popup
.report-title-note {
  padding-left: 20px;
  padding-right:20px;
}

.annotations-popup
.annotations-input {
  padding-left: 20px;
  padding-right: 20px;
}

.annotations-popup
.annotations-btn-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-right: 10px;
}

.annotations-popup
.annotations-btn-row button {
  min-width: 110px;
}

.report-annotations {
  width: 100%;
  background-color: #f5f5f5;
  padding: 5px;
}

.report-annotations span {
  margin: 5px;
}

.report-annotations p {
  margin-left: 35px;
  margin-right: 35px;
}

@media (max-width: 800px) {
  .annotations-popup {
    width: 490px;
  }
}

@media (max-width: 600px) {
  .annotations-popup {
    width: 320px;
  }
  .annotations-btn-row {
    width: 280px !important;
    margin: 0 20px !important;
  }
}

@media (max-width: 400px) {
  .annotations-popup {
    right: 30px;
  }
}

@media (max-width: 320px) {
  .annotations-popup {
    width: 200px;
    right: 10px;
  }
  .annotations-popup .annotations-btn-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 10px;
    width: 200px !important;
    margin-left: 0 !important;
  }
  .annotations-popup .annotations-btn-row button {
    min-width: 70px;
  }
}



/* NEUTRAL POPUP */
.gr-alert .neutral {
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16);
  padding: 8px;
  border: 1px solid #c7c7c7;
  margin-bottom: 1em;
  max-width: 580px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 10;
  background: white;
}

.gr-alert .neutral h2.popup-title {
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: normal;
  color: #252525;
}

/* PROFILE POPUP */
.gr-alert.profile-popup {
  position: absolute;
  top: 300px;
  left: 400px;
  z-index: 100;
}

@media (max-width: 1050px) {
  .gr-alert.profile-popup {
      left: 200px;
  }
}

@media (max-width: 801px) {
  .gr-alert.profile-popup {
      left: 110px;
  }
}

@media (max-width: 720px) {
  .gr-alert.profile-popup {
      left: 90px;
  }
}

@media (max-width: 620px) {
  .gr-alert.profile-popup {
      left: 20px;
  }
}

/* ---------------------------------*/
/* Breakpoints for MDA */
@media (max-width: 768px) {
  main {
    width: 768px;
  }
}

@media (max-width: 720px) {
  main {
    width: 720px;
  }
}

@media (max-width: 565px) {
  main {
    width: 565px;
  }
}

@media (max-width: 320px) {
  main {
    width: 320px;
  }
}

/* RESPONSIVE GRID */
@media (min-width: 887px) {
    main {
        grid-column: 1/13;
        -ms-grid-column: 1;
        -ms-grid-column-span: 12;
    }
}

@media (max-width: 886px) {
    main {
        grid-column: 1/9;
        -ms-grid-column: 1;
        -ms-grid-column-span: 8;
    }
}

/*** PROFILE SECTION ***/
.hero-text {
  z-index: 5;
  position: absolute;
  margin-top: -280px;
  padding-left: 100px;
  padding-right: 100px;
  width: 900px;
}

.gr-btn.primary.create-profile {
  width: 36px;
  height: 32px;
  margin-left: 0;
}

.hero-image-fw {
  z-index: -10;
  margin-bottom: 0;
  margin-top: 300px;
  height: 750px;
}

footer {
  background-color: #f5f5f5 !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

footer.light.footer-hero {
  height: 100%;
  padding-top: 36px;
}

footer.light.footer-hero ul {
  background: rgba(255, 255, 255, 0.5);
  padding: 5px 0 5px 8px;
}

footer.light.footer-hero p {
  background: rgba(255, 255, 255, 0.5);
  padding: 5px 8px 5px 0;
}

.hero-image-xs {
  display: none;
}

@media (max-width: 1300px) {
  footer.light.footer-hero {
      margin-top: -12px;
  }
}

@media (max-width: 1200px) {
  .hero-image-fw {
      margin-top: 340px;
  }
  .hero-text {
      margin-top: -320px;
  }
  footer.light.footer-hero {
      margin-top: -70px;
  }
}

@media (max-width: 1080px) {
  footer {
    width: 1080px;
  }
}

@media (max-width: 1100px) {
  .hero-image-fw {
      height: 690px;
  }
  footer.light.footer-hero {
      margin-top: -80px;
  }
}

@media (max-width: 1000px) {
  .hero-text {
      width: 970px;
  }
  .hero-image-fw {
      height: 640px;
  }
  footer.light.footer-hero {
      margin-top: -95px;
  }
}

@media (max-width: 900px) {
    .hero-text {
        width: 860px;
    }
    .hero-image-fw {
        height: 500px;
    }
    footer.light.footer-hero ul {
        padding-top: 5px;
    }
    footer.light.footer-hero p {
        padding: 0 8px 0px 8px;
    }
    footer.light li {
        margin-bottom: 0 !important;
    }
    footer.light.footer-hero ul {
        padding: 5px 0 0 8px;
    }
    .hero-text {
        width: 970px;
    }
}

@media (max-width: 800px) {
  .hero-text {
      width: 750px;
      margin-top: -480px !important;
  }
  .hero-image-fw {
      display: none;
  }
  .hero-image-xs {
      display: block;
      height: 401px;
  }
  .hero-image-xs {
      margin-top: 490px;
  }
  footer.light.footer-hero {
      margin-top: 250px;
  }
  footer.light.footer-hero ul {
      background: none;
  }
  footer.light.footer-hero p {
      background: none;
  }
}

@media (max-width: 768px) {
  footer {
    width: 768px;
  }
}

@media (max-width: 720px) {
  .hero-text {
      width: 690px;
      margin-top: -480px !important;
  }
  .hero-image-xs img {
      margin-top: 40px;
  }
  footer.light.footer-hero {
      margin-top: 210px;
  }
  footer {
    width: 720px;
  }
}

@media (max-width: 700px) {
  .hero-text {
      width: 640px;
      margin-top: -630px !important;
  }
  .hero-image-xs {
      margin-top: 640px;
  }
  .hero-image-xs img {
      margin-top: -60px;
  }
  footer.light.footer-hero {
      margin-top: 90px;
  }
  footer .links {
    padding-top: 15px;
  }
}

@media (max-width: 600px) {
  .hero-text {
      width: 560px;
      padding-left: 50px;
      padding-right: 70px;
  }
  .hero-image-xs img {
      margin-top: -50px;
  }
  footer.light.footer-hero {
      margin-top: 10px;
      background-color: #f5f5f5;
  }
}

@media (max-width: 565px) {
  footer {
    width: 565px;
  }
}


@media (max-width: 500px) {
  .hero-text {
      width: 450px;
      padding-left: 50px;
      padding-right: 70px;
  }
  .hero-image-xs img {
      margin-top: -130px;
  }
  footer.light.footer-hero {
      margin-top: -160px;
  }
}

@media (max-width: 420px) {
  .hero-text {
      width: 360px;
      padding-left: 40px;
      padding-right: 40px;
  }
  .hero-image-xs img {
      margin-top: -80px;
  }
  .footer-hero {
      margin-top: -180px;
  }
}

@media (max-width: 400px) {
  .hero-text {
      width: 350px;
      padding-left: 50px;
      padding-right: 50px;
  }
  .hero-image-xs img {
      margin-top: -60px;
  }
  footer.light.footer-hero {
      margin-top: -180px;
  }
}

@media (max-width: 320px) {
  .hero-text {
      width: 220px;
      padding-left: 30px;
      padding-right: 10px;
  }
  .hero-image-xs img {
      margin-top: 90px;
  }
  footer.light.footer-hero {
    margin-top: -100px;
  }
  footer {
    width: 320px;
  }
}

/* Exploration of illustration above footer */
.hero-imageF-fw-g {
  display: block;
  margin-top: 230px !important;
}
.hero-imageF-xs-g {
  display: none;
}
.hero-imageF-fw-g img {
  margin-top: 50px;
  margin-bottom: -25px;
}
.hero-textF {
  z-index: 5;
  position: absolute;
  top: 180px;
  left: 100px;
  width: 1000px;
}
footer.light.footer-heroF {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .hero-textF {
    width: 900px;
  }
  .hero-imageF-fw-g img {
    margin-top: 100px;
  }
}
@media (max-width: 1024px) {
  .hero-textF {
    width: 820px;
  }
}
@media (max-width: 1000px) {
  .hero-textF {
      width: 800px;
  }
}
@media (max-width: 900px) {
  .hero-textF {
      width: 700px;
  }
  .hero-imageF-fw-g img {
    margin-top: 150px;
  }
}
@media (max-width: 768px) {
  .hero-textF {
    width: 580px;
  }
  .hero-imageF-fw-g img {
    margin-top: 205px;
  }
}
@media (max-width: 720px) {
  .hero-textF {
    width: 550px;
  }
  .hero-imageF-fw-g img {
    margin-top: 220px;
  }
}
@media (max-width: 600px) {
  .hero-textF {
    width: 400px;
  }
  .hero-imageF-fw-g img {
    margin-top: 290px;
  }
  .hero-imageF-fw-g {
    display: none;
  }
  .hero-imageF-xs-g {
    display: block;
    margin-top: 550px !important;
  }
  .hero-imageF-xs-g img {
    margin-top: 24px;
  }
  .footer-heroF {
    background-color: #f5f5f5 !important;
  }
  .footer-bg {
    background-color: #f5f5f5 !important;
  }
}
@media (max-width: 562px) {
  .hero-imageF-xs-g img {
    margin-top: -100px;
  }
}
@media (max-width: 500px) {
  .hero-textF {
    margin-left: -20px;
    width: 360px;
  }
  .hero-imageF-xs-g {
    margin-top: 490px !important;
  }
}
@media (max-width: 411px) {
  .hero-textF {
    width: 270px;
  }
  .hero-imageF-xs-g img {
    margin-top: 80px;
  }
}
@media (max-width: 400px) {
  .hero-textF {
    margin-left: -20px;
    width: 260px;
  }
  .hero-imageF-xs-g img {
    margin-top: 62px;
  }
}
@media (max-width: 375px) {
  .hero-textF {
    width: 240px;
  }
  .hero-imageF-xs-g img {
    margin-top: 110px;
  }

}
@media (max-width: 360px) {
  .hero-textF {
    width: 200px;
  }
  .hero-imageF-xs-g img {
    margin-top: 180px;
  }
  .hero-imageF-xs-g img {
    margin-top: 190px;
  }
}

@media (max-width: 320px) {
  .hero-textF {
    margin-left: -40px;
    width: 200px;
  }
  .hero-imageF-xs-g img {
    margin-top: 178px;
  }
}

.footer-bg {
  background-color: #ecf2f1 !important;
  height: 30px;
  z-index: -12;
  position: absolute;
  bottom: 20px;
  margin-top: -24px;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  margin-bottom: -4px;
}

footer.light.footer-heroF {
  background-color: #ecf2f1 !important;
  margin-top: -8px;
}

footer.light.footer-heroF a {
  color: #1E496C;
}

footer.light.footer-heroF p.copyright {
  color: #1E496C;
}

#my-account-trigger {
  position: relative;
  border: none !important;
  background-color: #ffffff !important;
}

#my-account-panel {
  position: absolute;
  width: 320px;
  height: 286px;
  box-shadow: 0 3px 5px 0 rgba(199, 199, 199, 0.7);
  border: solid 1px #d9d9d9;
  background-color: #ffffff;
  z-index: 50;
  /* right: 40px; */
  right: 1px;
  top: 60px;
}

.my-account-title {
  padding: 15px 30px 0 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid #d9d9d9;
  margin: 0 30px;
  padding-left: 0;
  padding-right: 0;
}

.my-account-title h2 {
  width: 114px;
  height: 26px;
  font-family: OpenSans;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  color: #252525;
}

.menu-links ul li {
  list-style: none;
  margin-left: 0;
  padding: 8px;
}

button.gr-btn.primary.rect-btn {
  margin-top: 10px;
  height: 36px;
  border-radius: 2px;
  color: #fff;
  min-width: 230px;
}

.master-profile-card {
  list-style-type: none;
}

.card-container.master-profile-card {
  margin: 24px 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  min-width: 1032px;
  flex-wrap: wrap;
  -webkit-box-shadow: none;
  box-shadow: none;
  -ms-grid-column-span: 4;
}

.card-container.master-profile-card .card {
  width: 328px;
  height: 538px;
  border-radius: 4px;
  min-width: 328px;
  margin-right: 24px;
  margin-bottom: 24px;
}

.master-profile-card.card {
  z-index: 3 !important;
}

@media (max-width: 830px) {
  .card-container.master-profile-card {
    min-width: 400px;
  }
}

@media (max-width: 600px) {
  footer.light.footer-heroF {
    background-color: #f5f5f5 !important;
    margin-top: -8px;
  }
}

@media (max-width: 320px) {
  .card-container.master-profile-card {
    min-width: 300px;
  }
  .card-container.master-profile-card .card {
    width: 190px !important;
    height: 100%;
    min-width: 190px;
    margin-left: 0;
  }
  .master-profile-card li.card {
    margin-left: -12px !important;
  }
}

.master-profile-btn-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 14px;
}

.avatar-master-profile-btn {
  background-color: transparent !important;
  border: none !important;
  margin-top: -16px;
  margin-left: 0;
  width: 56px;
  display: flex;
  flex-direction: row;
  padding: 0;
  position: relative;
}

.avatar-master-profile-btn span {
  width: 37px;
  height: 16px;
  font-family: OpenSans;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #6a7070;
}

.avatar-radio-selector img {
  border: solid 1px #6a7070;
  border-radius: 50%;
}

.avatar-selected img {
  border: 2px solid #6a7070;
}

.avatar-master-profile-btn img {
  width: 50px;
  height: 50px;
  margin-top: 16px;
  margin-left: -38px;
  border: solid 2px #6a7070;
  border-radius: 50%;
}

.avatar-master-profile-btn::after {
  position: absolute;
  right: 0;
  height: 18px;
  width: 18px;
  display: block;
  content: '';
  background: url(../images/icons/check-sm-18-uxf-white.svg) no-repeat;
  background-position: center;
  background-color: #da0474;
  border: 1px solid #fff;
  fill: #fff !important;
  border-radius: 50%;
  top: 14px;
}

.avatar-label {
  width: 516px;
  color: #252525;
}

.inactive-avatar-master-profile-btn {
  background-color: transparent !important;
  border: none !important;
  margin-top: -16px;
  margin-left: 0;
  width: 56px;
  display: flex;
  flex-direction: row;
  padding: 0;
  position: relative;
}

.inactive-avatar-master-profile-btn span {
  width: 37px;
  height: 16px;
  font-family: OpenSans;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #6a7070;
}

.inactive-avatar-master-profile-btn img {
  width: 50px;
  height: 50px;
  margin-top: 16px;
  margin-left: -38px;
  border: solid 2px #6a7070;
  border-radius: 50%;
}

.master-profile-more-btn {
  background-color: transparent;
  border: none;
  position: relative;
}

.master-profile-more-btn svg.icon-24 {
  fill: #6a7070;
}

.master-profile-more-btn {
  margin-top: -18px;
  width: 44px;
  height: 44px;
}

/* profile_102 */
.profile-more-menu {
  position: relative;
}

.profile-more-menu ul {
  position: absolute;
  list-style: none;
  width: 116px;
  height: 176px;
  background-color: #fff;
  border: 1px solid #c7c7c7;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  top: 0;
  right: 0;
}

.profile-more-menu.middle ul {
  position: absolute;
  list-style: none;
  width: 116px;
  height: 176px;
  background-color: #fff;
  border: 1px solid #c7c7c7;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  top: 0;
  right: 0;
}

@media (max-width: 820px) {
  .profile-more-menu.middle ul {
    top: 0;
    right: 0;
  }
}

@media (max-width: 320px) {
  ul.card-container.master-profile-card li.card {
    min-width: 266px;
  }
}

.profile-more-menu button {
  background-color: transparent;
  border: none;
  width: 100px;
  text-align: left;
  margin: 0 0 0 -33px;
  padding: 3px;
  margin-top: 10px;
}

.master-profile-meta dl {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.master-profile-meta {
  display: flex;
  flex-direction: column;
  margin: 20px 0 0 0;
}

.master-profile-meta-label {
  margin-top: -4px;
}

dt.master-profile-meta-label {
  width: 200px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #6a7070;
}

dd.master-profile-meta-value {
  width: 200px;
  font-family: OpenSans;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  color: #252525;
  margin: 4px 0 5px 0;
  padding-bottom: 16px;
}

@media (max-width: 320px) {
  .master-profile-meta-label {
    max-width: 180px;
  }
}

.master-profile-container {
  position: relative;
}
.master-profile-landing-img {
  width: 480px;
  position: absolute;
  top: 165px;
  right: 60px;
}

.create-new-profiles {
  width: calc(100% - 96px);
  height: 100%;
  border-top: solid 1px #ccc8c8;
  margin-left: 48px;
}

.create-new-profiles p {
  font-size: 16px;
  margin-top: -8px;
}

.create-new-profiles button {
  margin-left: 0;
}

@media (max-width: 950px) {
  .master-profile-landing-img {
    width: 300px;
  }
}

@media (max-width: 781px) {
  .master-profile-landing-img {
    display: none;
  }
}

@media (max-width: 720px) {
  .master-profile-landing-img {
    width: 240px;
  }
}

@media (max-width: 700px) {
  .master-profile-landing-img {
    display: none;
  }
}

@media (max-width: 320px) {
  .create-new-profiles {
    width: 266px;
    margin-left: 30px;
  }
  .create-new-profiles button {
    width: 190px;
    margin-left: 26px;
  }
}

.alert-profile-completion {
  z-index: 500;
}
.alert-profile-completion svg.icon-18.alert {
  fill: #19A5A3;
}

.inline-alert-container {
  display: flex;
}

.inline-alert-container svg {
  fill: #DB0020;
}

.inlineAlertContent p {
  padding: 5px;
  color: #DB0020;
}

.profile-progress-container {
  z-index: 1;
  position: absolute;
  left: 362px;
}

#slidingCard {
  position: absolute;
  transition: width 350ms ease-in-out;
  left: 68px;
}

#pp-tracker-dialog-move {
  position: absolute;
  display: none;
  left: 100px;
  opacity: 0;
}

#slidingClose {
  position: absolute;
  transition: width 350ms ease-in-out;
  left: 362px;
  opacity: 100%;
}

@media(max-width: 562px) {
  #slidingClose {
    left: 40px;
    top: 562px;
  }
}

@media(max-width: 320px) {
  #slidingClose {
    left: 40px;
    top: 582px;
  }
}

.profile-progress-titlebar {
  display: flex;
  justify-content: space-between;
}

button.close-progress-card {
  margin-bottom: 20px !important;
}

.profile-progress-titlebar h2 {
  width: 201px;
  height: 18px;
  font-family: OpenSans;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  color: #252525;
  padding-top: 8px;

  margin-top: 32px;
}

p.pp-legend {
  margin-top: -24px !important;
}

p.pp-legend.wAvgOn {
  margin-top: -30px !important;
}

.pp-tracker-container {
  width: 100%;
  height: 100%;
}

.pp-tracker-container p {
  margin-top: -6px;
  width: 296px;
  height: 32px;
  font-family: OpenSans;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #252525;
}

.progress-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 10px;
}

.pp-tracker-container
.gr-pagination .day-pagination {
  font-size: 14px;
  margin: 0;
}

.gr-toggle {
  background: #c7c7c7;
}

.progress-tracker {
  margin-left: -4px;
}

.progress-tracker table {
  height: 320px;
}

table.profile-progress {
  width: 100%;
  min-width: 300px;
  max-width: 100%;
  margin-bottom: 35px;
  border-collapse: collapse;
  margin-left: -6px;
}

table.profile-progress thead th {
  padding: 1em 8px;
}
table.profile-progress thead th {
  vertical-align: bottom;
  border-top: 0px none;
}
table.profile-progress th,
table.profile-progress td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  text-align: left;
}

th.t-tracker-nutrient,
td.t-tracker-nutrient {
  width: 56px !important;
  padding-left: 8px;
  padding-right: 8px;
}

th.t-tracker-actual,
td.t-tracker-actual {
  width: 10%;
  padding-left: 8px;
  padding-right: 8px;
  text-align: right !important;
}

th.t-tracker-goal,
td.t-tracker-goal {
  width: 40%;
  padding-left: 8px;
  padding-right: 8px;
  text-align: right !important;
  white-space: nowrap;
}

th.t-tracker-percent-goal,
td.t-tracker-percent-goal {
  width: 40%;
  padding-left: 8px;
  padding-right: 8px;
}

.t-bold {
  font-weight: 600;
}

th.t-tracker-nutrient.tall-cell,
td.t-tracker-actual.tall-cell,
td.t-tracker-goal.tall-cell {
  padding-top: 26px;
}

@media (max-width: 768px) {
  li.card.profile-progress-container {
    margin-left: 0;
  }
}

@media (max-width: 400px) {
  .pp-tracker-container p {
    min-width: 270px !important;
    width: 270px;
  }
}

@media (max-width: 320px) {
  .pp-tracker-container p {
    margin-top: 15px;
    min-width: 170px !important;
    width: 170px;
  }
  .progress-controls {
    margin-top: 40px;
    flex-wrap: wrap;
  }
}

#pp-cal-no-avg {
  margin-top: -4px;
}

.pp-cal-score-overlay {
  z-index: 3;
  font-size: 13px;
  margin-top: -43px;
  margin-left: 14px;
  font-kerning: -5px;
}

.pp-cal-score-overlay.two-digits {
  margin-left: 18px;
}

.pp-cal-score-overlay.one-digit {
  margin-left: 22px;
}

.pp-cal-score-overlay.over {
  color: #d0021b;
  font-weight: 600;
}

.progress-controls.average {
  margin-top: 10px;
}

.day01-07 h4 {
    margin-top: 20px;
}

.pp-chart-legend-symbol {
  margin-left: 56px;
  margin-top: -15px;
}

.gr-alert.profiles-tracker-alert {
  z-index: 3;
  width: 232px;
  margin-top: 170px;
  margin-left: 368px;
}

@media (max-width: 796px) {
  li.card.profile-progress-container {
    margin-left: 0;
  }
  .gr-alert.profiles-tracker-alert {
    margin-top: 724px;
    margin-left: 44px;
  }
}

@media (max-width: 320px) {
  li.card.profile-progress-container {
    margin-left: 0;
  }
  .gr-alert.profiles-tracker-alert {
    margin-top: 764px;
    margin-left: -52px;
  }
}

.create-new-profile-btn {
  background-color: white;
}

.create-new-profile-btn:hover {
  background-color: white;
}

.create-new-profile-btn:focus:after {
  background-color: white;
}

.group-input-height {
  margin-top: -20px;
}

.profile-wt {
  margin-top: 60px;
}

#height-metric {
  margin-top: -10px !important;
}

#weight-metric {
  padding-top: 30px;
}

li.card.profile-progress-container {
  transition: all 0.4s ease-in-out;
}


/*** DIET TRACKER SECTION ***/
.diet-container ul,
.activity-container ul {
  list-style: none;
  margin-top: 25px;
  margin-left: -15px;
  display: flex;
  flex-direction: row;
  min-width: 1048px;
  width: 100%;
  flex-wrap: wrap;
}

.diet-t-card,
.activity-t-card {
  width: 100%;
  max-width: 602px;
  /* max-height: 1354px; */
  max-height: 1250px;
}

.diet-t-card .card,
.activity-t-card .card {
  height: 100%;
  min-width: 602px;
}

.w-no-search-results .card {
  min-height: 770px;
}

.w-10-search-results .card {
  min-height: 860px;
}

.w-20-search-results .card {
  /* min-height: 1354px; */
  min-height: 1250px;
}

.dt-search-filter-list {
  padding-top: 3px;
}

@media(max-width: 1280px) {
  .diet-t-card,
  .activity-t-card {
    width: 100%;
    max-width: 505px;
  }
  .diet-t-card .card,
  .activity-t-card .card {
    min-height: 1100px;
    height: 100%;
    min-width: 505px;
  }
  .diet-t-card.w-no-search-results .card,
  .activity-t-card.w-no-search-results .card {
    min-height: 800px;
  }

}

@media(max-width: 1280px) {
  .diet-t-card .card,
  .activity-t-card .card {
    min-height: 800px;
  }
}

@media(max-width: 565px) {
  .diet-t-card.w-10-search-results,
  .activity-t-card.w-10-search-results {
    overflow: visible;
  }
}

.diet-container li:last-of-type,
.activity-container li:last-of-type {
  margin-left: 24px;
}

.diet-t-header,
.activity-t-header {
  display: flex;
  justify-content: space-between;
}

.diet-t-tips {
  display: flex;
  flex-direction: row;
  height: 27px;
  margin-top: 14px;
}


.tips-icon {
  width: 24px;
}

img.tips-icon {
  vertical-align: bottom;
  padding-right: 4px;
}

/* .tips-url {
  padding-top: 5px;
  padding-left: 8px;
} */

/* #tabOneBtnDiet {
  width: 48px;
  white-space: nowrap;
}

#tabTwoBtnDiet {
  width: 81px;
  white-space: nowrap;
}

#tabThreeBtnDiet {
  width: 79px;
  white-space: nowrap;
}

#tabFourBtnDiet {
  width: 89px;
  white-space: nowrap;
} */

.diet-t-btn {
  white-space: nowrap;
  margin: 0.5em 1.6em !important;
}

.tab-list.diet-t-tabs {
  border: 1px solid green;
}

.diet-t-tabs li.tab-item {
  margin: 0.1em -12px !important;
}

.step-01-content {
  margin-top: 24px;
}

.select-meal {
  width: 118px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.add-food,
.add-activity {
  justify-content: flex-end;
  margin-right: -12px;
}

.dt-search-container.activity-quick-select {
  margin-top: -30px;
}

.flex-row.add-activity.activity-tracker {
  justify-content: space-between;
}

#deleteActivityBtn {
  min-width: 93px;
}

.add-to-diet-btn {
  margin-top: 20px;
  margin-left: -4px;
}

button.gr-btn.add-to-diet-btn {
  width: 123px !important;
  max-width: 123px !important;
}

.d-tracker-search-filter {
  display: flex;
  margin-top: 46px;
  justify-content: flex-start;
  text-align: left;
}

.d-tracker-search {
  width: 226px;
  position: relative;
  text-align: left;
}

.d-tracker-search-icon {
  fill: #6A7070;
  position: absolute;
}

button.gr-btn.icon-btn-18.search-btn {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 25px;
  right: 8px;
}

datalist.foodlist {
  max-height: 753px;
  overflow: hidden;
  height: 100%;
}

.d-tracker-filter {
  width: 159px;
  margin-left: 25px;
  position: relative;
}

input#dTrackerInput,
input#dTrackerInputMobile {
  text-align: left;
}

[list].d-tracker-search-input::-webkit-calendar-picker-indicator {
  display: none;
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


@media (max-width: 720px) {
  .datalist#foodlist {
    display: none;
  }
  .datalist.foodlist {
    height: 450px;
  }
  .foodlist-mobile {
    display: none;
  }
}

@media (max-width: 562px) {
  .diet-container ul {
    min-width: 550px;
    width: 100%;
  }
  .diet-container .card {
    min-height: 100%;
    height: 100%;
    min-width: 400px !important;
    width: 400px;
  }
  .diet-t-btn {
    margin-right: 20px;
  }
  button.gr-btn.icon-btn-18.search-btn {
    margin-top: 15px;
  }
  .gr-form-element.d-tracker-filter {
    margin-top: 14px;
  }
  .d-tracker-search-filter {
    flex-wrap: wrap;
  }
  button.gr-btn.icon-btn-18.search-btn {
    margin-top: 0;
  }
  .gr-form-element.d-tracker-filter {
    margin-left: 0;
  }
}

@media (max-width: 320px) {
  .diet-container ul {
    min-width: 250px;
    width: 100%;
    margin-left: -20px;
  }
  .diet-container .card {
    min-height: 100%;
    height: 100%;
    min-width: 200px !important;
    width: 280px;
  }
  .activity-container ul {
    min-width: 250px;
    width: 100%;
    margin-left: -20px;
  }
  .activity-container .card {
    min-height: 100%;
    height: 100%;
    min-width: 200px !important;
    width: 280px;
  }
  .activity-table.responsive-table {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    max-width: 250px !important;
    width: 250px !important;
    padding-left: 15px;
  }
  th.activity-col.daily-activity {
    padding-left: 5px !important;
  }
  .diet-t-btn {
    margin-right: 20px;
  }
  .flex-row.add-food {
    flex-wrap: wrap !important;
  }
  .flex-row.add-activity {
    flex-wrap: wrap;
  }
  .flex-row button {
    margin-left: 0;
  }
  .d-tracker-search-filter {
    flex-wrap: wrap;
  }
  .profile-container {
    padding: 10px;
  }
  .d-tracker-filter {
    width: 150px;
  }
}

.d-tracker-alert {
  margin-top: 34px;
}

#inlineAlertText .d-tracker-alert {
  margin-top: -50px;
}

.d-tracker-alert svg {
  width: 24px;
  height: 24px;
  margin-top: -2px;
}

p#inlineAlertText.d-tracker-alert {
  margin-top: -7px;
  margin-left: 5px;
}

.day-edit {
  margin: 0.5em 0.9em !important;
}

.editable-tabs li {
  display: flex;
  z-index: 5;
}

button.day-edit {
  padding-bottom: 20px;
  height: 33px;
}

.tab-rt-rule {
  border-right: 1px solid #ccc8c8;
  height: 21px;
  margin-top: 10px;
}

.edit-tab svg {
  fill: #6a7070;
}


 .step-2-tools {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin-top: 24px; */
  margin-top: 8px;
  width: 100%;
}

.step-2-tools button {
  height: 34px;
}

.step-2-delete {
  width: 93px;
  min-width: 93px;
  margin-top: 20px;
}

.step-2-right {
  display: flex;
  flex-direction: row;
  width: 358px;
  justify-content: space-between;
}

@media (max-width: 1280px) {
  .step-2-right {
    margin-left: 30px;
  }
}

.step-2-select-days {
  width: 159px;
  min-width: 159px;
}

.step-2-add-to-days {
  width: 136px;
  min-width: 136px;
  margin-top: 20px;
}

.gr-btn.step-2-add-to-days {
  margin-right:0;
}

@media (max-width: 562px) {
  .step-2-tools {
    flex-wrap: wrap;
  }
  .step-2-right {
    flex-wrap: wrap;
  }
  .step-2-delete {
    margin-left: 0;
  }
}

@media (max-width: 320px) {
  .step-2-add-to-days {
    margin-left: 0;
  }
}

fieldset.d-t-meals,
fieldset.t-activity {
  padding: 0;
  border: none;
  margin-bottom: -32px;
}

.diet-t-breakfast details,
.diet-t-lunch details,
.diet-t-dinner details,
.diet-t-snack details,
.diet-t-totalCal details {
  position: relative;
}

.diet-t-breakfast details > summary:before,
.diet-t-lunch details > summary:before,
.diet-t-dinner details > summary:before,
.diet-t-snack details > summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Ecollapse-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -340.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='collapse-24'%3E%3Cg transform='translate(500.000000, 240.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,7.2642591 L12.6772745,7.264279 C12.6872407,7.27343586 12.6971852,7.28297167 12.7071068,7.29289322 L19.7071068,14.2928932 C20.0976311,14.6834175 20.0976311,15.3165825 19.7071068,15.7071068 C19.3165825,16.0976311 18.6834175,16.0976311 18.2928932,15.7071068 L12,9.41421356 L5.70710678,15.7071068 C5.31658249,16.0976311 4.68341751,16.0976311 4.29289322,15.7071068 C3.90236893,15.3165825 3.90236893,14.6834175 4.29289322,14.2928932 L11.2928932,7.29289322 C11.6736274,6.91215906 12.2849891,6.90261436 12.6772865,7.2642591 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  width: 22px;
  height: 22px;
  fill: #252525;
  color: #252525;
}

.diet-t-totalCal details > summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Ecollapse-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -340.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='collapse-24'%3E%3Cg transform='translate(500.000000, 240.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,7.2642591 L12.6772745,7.264279 C12.6872407,7.27343586 12.6971852,7.28297167 12.7071068,7.29289322 L19.7071068,14.2928932 C20.0976311,14.6834175 20.0976311,15.3165825 19.7071068,15.7071068 C19.3165825,16.0976311 18.6834175,16.0976311 18.2928932,15.7071068 L12,9.41421356 L5.70710678,15.7071068 C5.31658249,16.0976311 4.68341751,16.0976311 4.29289322,15.7071068 C3.90236893,15.3165825 3.90236893,14.6834175 4.29289322,14.2928932 L11.2928932,7.29289322 C11.6736274,6.91215906 12.2849891,6.90261436 12.6772865,7.2642591 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  width: 22px;
  height: 22px;
  fill: #252525;
  color: #252525;
}

.diet-t-breakfast details[open] summary:before,
.diet-t-lunch details[open] summary:before,
.diet-t-dinner details[open] summary:before,
.diet-t-snack details[open] summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Eexpand-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -380.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='expand-24'%3E%3Cg transform='translate(500.000000, 280.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,16.7357409 C12.2849891,17.0973856 11.6736274,17.0878409 11.2928932,16.7071068 L4.29289322,9.70710678 C3.90236893,9.31658249 3.90236893,8.68341751 4.29289322,8.29289322 C4.68341751,7.90236893 5.31658249,7.90236893 5.70710678,8.29289322 L12,14.5857864 L18.2928932,8.29289322 C18.6834175,7.90236893 19.3165825,7.90236893 19.7071068,8.29289322 C20.0976311,8.68341751 20.0976311,9.31658249 19.7071068,9.70710678 L12.7071068,16.7071068 C12.6971852,16.7170283 12.6872407,16.7265641 12.6772745,16.735721 L12.6772865,16.7357409 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  fill: #252525;
  color: #252525;
}

.diet-t-totalCal details[open] summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Eexpand-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -380.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='expand-24'%3E%3Cg transform='translate(500.000000, 280.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,16.7357409 C12.2849891,17.0973856 11.6736274,17.0878409 11.2928932,16.7071068 L4.29289322,9.70710678 C3.90236893,9.31658249 3.90236893,8.68341751 4.29289322,8.29289322 C4.68341751,7.90236893 5.31658249,7.90236893 5.70710678,8.29289322 L12,14.5857864 L18.2928932,8.29289322 C18.6834175,7.90236893 19.3165825,7.90236893 19.7071068,8.29289322 C20.0976311,8.68341751 20.0976311,9.31658249 19.7071068,9.70710678 L12.7071068,16.7071068 C12.6971852,16.7170283 12.6872407,16.7265641 12.6772745,16.735721 L12.6772865,16.7357409 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  fill: #252525;
  color: #252525;
}

.diet-t-totalCal details[open] summary:before .totalCal-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
}

.meals-row {
  display: flex;
  flex-direction: row;
  padding: 5px;
  margin-bottom: 10px;
  height: 34px;
  font-size: 16px;
  line-height: 1.63;
  font-weight: 600;
}

.meals-row:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline-offset: 0 !important;
  outline: 2px solid #0B73DA !important;
  border-left: 2px solid #0B73DA;
  border-right: 2px solid #0B73DA;
  border-bottom: 2px solid #0B73DA;
  outline: 0 !important;
}

.meals-row:focus:first-child {
  border-top: 2px solid #0B73DA;
}

summary.meals-row {
  cursor: pointer;
}

.diet-t-meals-container {
  margin-top: 28px;
  max-height: 540px;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}

.diet-t-meals-container details {
  margin-bottom: 22px;
}

.meal-label {
  padding-left: 35px;
}

.cal-label {
  padding-left: 25px;
}

.diet-t-totalCal {
  width: 264px;
  margin-left: 280px;
  margin-top: 30px;
}

.total-cal-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.63;
  margin-bottom: 12px;
}

.totalCal-val {
  text-align: right;
}

fieldset.t-activity {
  margin-top: 50px;
}

table.d-meal-table,
table.activity-table {
  min-width: 0;
  width: 100%;

  margin-top: -10px;
  margin-left: -10px;
  border-collapse: collapse;
}

.d-meal-table table tbody td, table tbody th {
  padding: 0.5em 12px;
}

.meal-table-h,
.activity-table-h {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #c7c7c7;
}

.d-meal-table th {
  font-weight: 400 !important;
}

.activity-table-h.amt-col-activity {
  padding-left: 0;
}

.activity-table-h.unit-col-activity {
  padding-left: 0;
}

.gr-select.unit-col-activity {
  width: 92px;
  padding: 0 8px;
}

.activity-table-h.amt-col.myRecipes {
  padding-left: 2px;
  text-align: left;
}

.activity-table-h.unit-col.myRecipes {
  padding-left: 2px;
  text-align: left;
}

.d-meal-table tr:last-child {
  border-bottom: 1px solid #fff;
}

.food-col-th,
.activity-col-th {
  padding-left: 10px;
}

.food-col .gr-checkbox input[type=checkbox] ~ label,
.activity-col .gr-checkbox input[type=checkbox] ~ label {
  min-width: 180px !important;
}

.food-col label,
.activity-col label {
  overflow: hidden;
  text-overflow: clip;
  background: -webkit-linear-gradient(left,#252525 80%, #fff);
  background: -moz-linear-gradient(left,#252525 80%, #fff);
  background: -o-linear-gradient(left,#252525 80%, #fff);
  background: linear-gradient(left,#252525 80%, #fff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: left;
  max-height: 22px;
}

th.food-col[scope=row] {
  padding-top: 20px;
  /* padding-left: 8px; */
  padding-left: 10px;
}

.amt-col input,
.amt-col-activity input {
  width: 45px;
  text-align: right;
}

td.amt-col,
td.amt-col-activity {
  padding: .2em 2px;
}

td.unit-col,
td.unit-col-activity {
  padding: .2em 2px;
}

th.activity-col.daily-activity {
  padding-top: 0;
}

.amt-col-activity span {
  vertical-align: -16px;
}

button#info-daily-activity {
  vertical-align: middle;
  padding: 0;
  position: relative;
}

.gr-coachmark-container.info-adl {
  margin-top: -260px;
  margin-left: 25px;
  position: absolute;
}

div#adlDialog.gr-coachmark-container.info-adl::after {
  display: none;
}

td.amt-col-activity,
td.unit-col-activity,
td.cal-col-activity {
  border-bottom: 1px solid #fff;
}

.gr-select-container.unit-col,
.gr-select-container.unit-col-activity {
  width: 92px;
}

th.cal-col,
td.cal-col-activity {
  text-align: right;
}

td.cal-col {
  width: 30px !important;
}

.cal-col-th {
  padding-right: 20px !important;
  text-align: right;
}

span.empty-row {
  padding-left: 10px;
  margin-top: -10px !important;
  font-style: italic;
}

@media (max-width: 1280px) {
  table.d-meal-table {
    min-width: 0;
    width: 100%;
    margin-left: -10px;
  }
  .diet-t-totalCal {
    margin-left: 200px;
  }
}

@media (max-width: 565px) {
  .gr-alert.manage-courses.diet-tracker-alert {
    left: 30px;
    right: 30px;
  }
}

@media (max-width: 320px) {
  .gr-alert.manage-courses.diet-tracker-alert {
    width: 270px !important;
    left: 15px;
    right: 20px;
  }
  .diet-t-totalCal {
    width: 230px;
    margin-left: 6px;
  }
}

.gr-tooltip:after {
  position: absolute;
  bottom: -12px;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #252525;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  z-index: 2;
}

#inp_01 {
  position: relative;
}

#tooltip_amt {
  position: absolute;
  /* top: 40px; */
  top: 52px;
  /* left: 245px; */
  left: 300px;
  z-index: 2;
}

#sel_01 {
  position: relative;
}

#tooltip_unit {
  position: absolute;
  /* top: 40px; */
  top: 52px;
  /* left: 360px; */
  left: 380px;
  z-index: 2;
}

#inp_02 {
  position: relative;
}

#tooltip_amt02 {
  position: absolute;
  top: 112px;
  left: 245px;
  z-index: 2;
}

#sel_02 {
  position: relative;
}

#tooltip_unit02 {
  position: absolute;
  top: 112px;
  left: 360px;
  z-index: 2;
}

.card.profile-card-fw.diet-tracker {
  max-width: 1280px;
}

@media(max-width: 1280px) {
  #tooltip_amt {
    top: 40px;
    left: 205px;
  }
  #tooltip_unit {
    top: 40px;
    left: 300px;
  }
  #tooltip_amt02 {
    top: 136px;
    left: 205px;
  }
  #tooltip_unit02 {
    position: absolute;
    top: 136px;
    left: 300px;
    z-index: 2;
  }
}

@media(max-width: 768px) {
  .dt-search-container {
    overflow-x: visible;
  }
  .last-card {
    margin-left: -25px;
    margin-top: 24px;
  }
}

@media(max-width: 720px) {
  .dt-search-container {
    display: block;
    overflow: visible;
  }
}

@media(max-width: 565px) {
  .diet-t-card,
  .activity-t-card {
    width: 100%;
    max-width: 505px;
  }
  .diet-t-card .card,
  .activity-t-card .card {
    min-height: 812px;
    height: 100%;
    min-width: 505px;
  }
  .diet-t-meals-container {
    overflow-x: visible !important;
  }
  .dt-search-container {
    display: block;
    overflow: auto;
    margin-left: 0;
  }
}

@media(max-width: 320px) {
  .diet-t-card,
  .activity-t-card {
    max-width: 505px;
  }
  .diet-t-card .card,
  .activity-t-card .card {
    min-width: 505px;
  }
  .diet-t-meals-container {
    display: block;
    overflow-x: auto !important;
    white-space: nowrap;
  }
  .dt-search-container {
    display: block;
    overflow-x: scroll;
    margin-left: -15px;
  }
}

.gr-coachmark-container.diet-t-search-tip {
  position: relative;
}

.gr-coachmark-container.diet-t-search-tip
.coachmark {
  position: absolute;
  left: 585px;
  top: -120px;
}

.gr-coachmark-container::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #CAEFEE transparent transparent;
  top: -45px;
  left: 565px;
  z-index: 1;
}

.gr-coachmark-container.diet-t-search-tip
.coachmark
.content {
  width: 423px;
  height: 100%;
  max-height: 400px;
}

.help-container {
  display: flex;
  margin-left: 10px;
}

a.help-container {
  width: 145px;
  left: -5px;
  margin-top: 2px !important;
  text-decoration: none;
}

a.coachmark-help-link {
  color: #252525;
}

a.coachmark-help-link:hover,
a.coachmark-help-link:focus {
  text-decoration: underline;
}

.d-tracker-help-icon {
  fill:#6A7070;
  width: 18px;
  margin-right: 5px;
  margin-left: -10px;
}

.help-container-2 {
  display: flex;
  margin-left: 10px;
}

a.help-container-2 {
  width: 145px;
  left: -5px;
  margin-top: 2px !important;
  text-decoration: none;
}

a.coachmark-help-link-2 {
  color: #252525;
}

a.coachmark-help-link-2:hover,
a.coachmark-help-link-2:focus {
  text-decoration: underline;
}

a.coachmark-help-link-2 {
  padding-left: 10px;
  margin-left: -8px;
}

@media(max-width: 1280px) {
  .gr-coachmark-container.diet-t-search-tip
  .coachmark {
    left: 485px;
  }
  .gr-coachmark-container::after {
    left: 465px;
  }
}

@media(max-width: 768px) {
  .gr-coachmark-container.diet-t-search-tip
  .coachmark {
    left: 60px;
    top: -18px;
  }
  .gr-coachmark-container::after {
    top: -38px;
    left: 455px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #CAEFEE transparent;
  }
}

@media(max-width: 320px) {
  .gr-coachmark-container.diet-t-search-tip
  .coachmark {
    left: 60px;
    top: -18px;
  }
  .gr-coachmark-container.diet-t-search-tip
  .coachmark
  .content {
    width: 230px;
    height: 400px;
    height: 610px;
    position: absolute;
    left: -30px;
    top: -60px;
    min-height: 500px;
  }
  .gr-coachmark-container.diet-t-search-tip
  .coachmark
  .content
  .title-container {
    display: block;
    width: 80%;
    margin-bottom: -2em;
  }
  button#closeSearchTip {
    float: right;
    top: -80px;
    right: -50px;
  }
  .gr-coachmark-container::after {
    display: none;
  }
}

.gr-coachmark-container.diet-t-days-tip {
  position: relative;
}

.gr-coachmark-container.diet-t-days-tip
.coachmark {
  position: absolute;
  left: 80px;
  top: -120px;
}

.gr-coachmark-container.diet-t-days-tip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #CAEFEE;
  top: -45px;
  left: 502px;
  z-index: 1;
}

.gr-coachmark-container.diet-t-days-tip
.coachmark
.content {
  width: 423px;
  height: 445px;
}

a.help-container-2 {
  width: 145px;
  left: -5px;
  margin-top: 10px !important;
  text-decoration: none;
}

span.coachmark-help-link-2:hover {
  text-decoration: none;
}

.d-tracker-help-icon {
  fill:#6A7070;
  width: 18px;
  margin-right: 5px;
  margin-left: -10px;
  vertical-align: top;
  padding: 0;
}

span.help-text {
  margin-left: -5px;
}

a.coachmark-help-link {
  padding-left: 9px;
  margin-left: -8px;
}

.coachmark-help-link
.onboarding-first a {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
}

.coachmark-help-link
.onboarding-first span {
  overflow: hidden;
}

span.coachmark-help-link-2 {
  vertical-align: 6px;
  margin-right: 5px;
  margin-top: -5px;
  text-decoration: underline;
}

@media(max-width: 1280px) {
  .gr-coachmark-container.diet-t-days-tip
  .coachmark {
    left: -20px;
  }
  .gr-coachmark-container.diet-t-days-tip::after {
    left: 402px;
  }
}

@media(max-width: 768px) {
  .gr-coachmark-container.diet-t-days-tip
  .coachmark {
    left: 60px;
    top: -18px;
  }
  .gr-coachmark-container.diet-t-days-tip::after {
    top: -38px;
    left: 455px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #CAEFEE transparent;
  }
}

@media(max-width: 320px) {
  .gr-coachmark-container.diet-t-days-tip
  .coachmark {
    left: 60px;
    top: -18px;
  }
  .gr-coachmark-container.diet-t-days-tip
  .coachmark
  .content {
    width: 230px;
    height: 400px;
    height: 580px;
    position: absolute;
    left: -30px;
    top: -60px;
  }
  .gr-coachmark-container::after {
    display: none;
  }
}

.diet-edit-icon {
  fill: #6a7070;
  vertical-align: -6px;
  margin-right: -2px;
}

/* SEARCH RESULTS */

.d-meal-table, table thead th {
  padding: 1em 20px;
}

.diet-t-search-results {
  width: 100%;
  margin-top: 20px;
}

@media(max-width: 480px) {
  .diet-t-search-results {
    margin-top: 80px;
  }
}

.diet-t-search-results h3 {
  font-size: 16px;
}

.diet-t-search-value {
  color: #6a7070;
  font-size: 12px;
  font-weight: 400;
  margin-left: 5px;
}

fieldset.dt-search-results {
  padding: 0;
  border: none;
  margin-bottom: -32px;
}

.food-col-s .gr-checkbox input[type=checkbox] ~ label {
  /* min-width: 180px !important; */
  min-width: 300px !important;
}

.activity-col-s .gr-checkbox input[type=checkbox] ~ label {
  width: 100%;
  min-width: 500px !important;
  overflow: visible;
}

th.activity-col-s.short-row {
  border-bottom: 1px solid #fff;
}

th.food-col-s[scope=col],
th.activity-col-s[scope=col] {
  padding-left: 12px;
}

th.food-col-s[scope=row],
th.activity-col-s[scope=row] {
  padding-top: 20px;
  padding-bottom: 0;
}

.serving-col-s input,
.detail-col-s input {
  width: 55px;
  text-align: left;
}

.gr-select-container.cal-col-s {
  width: 40px;
}

th.cal-col-s,
td.cal-col-s {
  text-align: right;
  padding: 3px;
}

th.info-col-s,
td.info-col-s {
  width: 24px !important;
  text-align: right;
}

th.info-col-s {
  padding-right: 2px;
}

td.info-col-s {
  display: flex;
  margin-right: 10px;
}

.info-col-s button {
  padding: 19px 12px;
}

th.food-col-s.short-row,
td.serving-col-s.short-row,
td.cal-col-s.short-row,
td.info-col-s.short-row,
th.activity-col-s.short-row {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -10px;
}

.dt-search-result-pagination {
  display: flex;
}


.food-col-s label,
.activity-col-s label {
  overflow: hidden;
  text-overflow: clip;
  background: -webkit-linear-gradient(left,#252525 80%, #fff);
  background: -moz-linear-gradient(left,#252525 80%, #fff);
  background: -o-linear-gradient(left,#252525 80%, #fff);
  background: linear-gradient(left,#252525 80%, #fff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: left;
  max-height: 22px;
}

.w-20-search-results .card {
  min-height: 1276px;
}

@media(max-width: 320px) {
  fieldset.dt-search-results {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 250px !important;
    width: 100% !important;
  }
  table.responsive-table.dt-search-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 250px !important;
    width: 100% !important;
  }
  .card-container.activity-t-card.w-20-search-results.last-card .card {
    margin-top: 325px;
  }
}

span.dt-search-filters {
  font-size: 12px;
  line-height: 16px;
  color: #6A7070;
  display: block;
  margin-bottom: 4px;
}

span.dt-search-filter-list {
  padding-top: 3px;
}

div.dt-search-filter {
  position: absolute;
  z-index: 3;
  max-height: 260px;
  height: 56.25vw;
  left: 0;
}

div#choiceListSearch {
  top: 0;
  margin-top: -5px;
}

@media(max-width: 320px) {
  .d-tracker-filter {
    margin-bottom: 60px;
  }
}

.step-2-days-container.d-tracker-filter {
  margin-left: 10px;
}

button#selectedDaysdt {
  min-width: 158px !important;
}

button.gr-btn.step-2-add-to-days {
  min-width: 120px !important;
  width: 120px;
  padding: 8px 10px;
}

span.selected-days-dt {
  font-size: 12px;
  line-height: 16px;
  color: #6A7070;
  display: block;
  margin-bottom: 4px;
}

span.dt-days-filter-list {
  padding-top: 3px;
}

.d-tracker-days-filter {
  position: relative;
}

div.dt-days {
  position: absolute;
  z-index: 3;
  max-height: 260px;
}

.dropdown-container.dt-days.refine-diet {
  /* margin-left: 68px; */
  margin-left: 160px;
}

@media(max-width: 1280px) {
  .dropdown-container.dt-days.refine-diet {
    margin-left: 28px;
  }
}

div#choiceListDaysdt {
  top: 0;
  margin-top: -5px;
  width: 160px;
}

span#daysListdt {
  margin-top: -1px;
  white-space: nowrap;
  letter-spacing: -0.25px;
}

#selectedDaysdt svg {
  margin-top: -2px;
}

.gr-input.error-class {
  border: 1px solid #db0020;
}

select.error-class {
  border: 1px solid #db0020;
}

.inline-alert-container.d-error-alert-row {
  align-items: center !important;
  margin: -38px 0 -38px 28px;
}

.inlineAlertContent.activity {
  margin-top: -20px;
}

#error-activity {
  margin-left: 21px;
}

.activity-error-alert-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 5px;
}

.alert-row-svg.activity {
  fill: #DB0020;
}

.inlineAlertContent.activity > span {
  font-size: 12px;
  color: #DB0020;
  letter-spacing: -0.5px;
}

.d-tracker-alert-row p {
  font-size: 12px;
  width: 470px;
}

svg.icon-18.alert-row-svg {
  margin-top: -21px;
}

table.totCalTable {
  max-width: 240px;
  min-width: 240px;
  min-width: 0;
  font-size: 12px;
  margin-left: -12px;
}

.totCalTable, table thead th {
  padding: 1px 2px;
  font-size: 12px;
}

th.totalCal-td-header {
  width: 80px;
  font-size: 12px;
  padding: 0 0 2px 0;
}

.totalCal-th-header,
.totalCal-th-cal,
.totalCal-th-carb,
.totalCal-th-pro,
.totalCal-th-fat {
  border-top: 1px solid #ccc8c8;
  padding-left: 0;
}

.totalCal-th-cal,
.totalCal-td-cal {
  width: 50px;
  font-size: 12px;
  padding: 0 6px 2px 6x;
  text-align: right;
}

.totalCal-th-cal {
  padding-left: 20px;
  text-align: left;
  padding-top: 10px;
}

.totalCal-th-carb,
.totalCal-td-carb {
  width: 40px;
  font-size: 12px;
  padding: 0 6px 2px 6px;
  text-align: right;
}

.totalCal-th-carb {
  text-align: left;
  padding-left: 12px;
}

.totalCal-th-pro,
.totalCal-td-pro {
  width: 40px;
  font-size: 12px;
  padding: 0 6px 2px 6px;
  text-align: right;
}

.totalCal-th-pro {
  text-align: left;
  padding-left: 20px;
}

.totalCal-th-fat,
.totalCal-td-fat
 {
  font-size: 12px;
  padding-top: 10px;
}

.totalCal-th-fat {
  padding-left: 16px;
  text-align: left;
}

.dropdown-container.dt-days {
  width: 150px;
}

@media(max-width: 1280px) {
  div.dt-days {
    margin-left: 0;
  }
}

@media(max-width: 320px) {
  div.dt-days {
    margin-left: 0;
    margin-top: 10px;
  }
  .d-tracker-days-filter {
    margin-bottom: 60px;
  }
  svg.icon-18.alert-row-svg {
    margin-top: 0;
  }
  table.d-meal-table.responsive-table {
    margin-left: 5px;
  }
}

li.tab-item.day-tabs:last-of-type {
  margin-left: 0;
}

/* EDITABLE TABS */
.gr-tabbed-navigation.dt-tabs {
  position: relative;
  max-width: 580px;
  width: 100%;
  margin-top: 0 !important;
  padding-top: 15px;
}

.dt-tabsF {
  position: relative !important;
}

li.tab-item.dayF {
  margin-left: -24px;
}

button#addedTab-2 {
  margin-left: 8px;
}

.gr-tabbed-navigation.gr-tabbed-navigation-f.dt-tabsF {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* #addTabWrapper {
  display: flex;
  flex-direction: row;
  height: 40px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
} */

#ulAddDay {
  min-width: 0;
  display: flex;
}

#tabsToolbarF {
  display: flex;
  right: 0;
  height: 50px;
  flex-direction: row;
  align-items: flex-start;
  margin: 0;
  padding: 0 0 0 2px;
  flex: 1;
  justify-content: space-between;
}

#addTabBtnF {
  top: 8px;
  margin-right: 0;
  padding-right: 0;
  width: 28px;
  height: 28px;
  border-left: 1px solid #a9a9a9 !important;
  border-radius: 0;
}

#addTabBtnF svg {
  fill: #6A7070;
}

#addTabBtnF:active svg {
  fill: #047A9C;
}

#editTabBtnF,
#saveTabBtnF {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 8px;
  width: 28px;
  height: 28px;
}

.dayF {
  margin-top: -1px;
}

#liF-1 {
  margin-left: -8px;
}

.dayF.tab-action {
  margin: 0.5em 1.4em;
}

.hideTabs {
  display: none !important;
}

.showTabs {
  display: block !important;
}

.newSlider {
  border-bottom: 3px solid #19A5A3 !important;
}

.gr-form-element.edit-days-tab {
  display: block;
  position: relative;
  margin-top: -24px
}

li.tab-itemAdd.dayF {
  margin-left: -24px;
}

.gr-tabbed-navigation.gr-tabbed-navigation-f.dt-tabsF {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
}

#addTabWrapper {
  display: flex;
  flex-direction: row;
  height: 40px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
}

@media(max-width: 536px) {
  .gr-tabbed-navigation.gr-tabbed-navigation-f.dt-tabsF {
    height: 100%;
  }
}

@media(max-width: 320px) {
  #addTabWrapper {
    height: 100% !important;
  }
}

#ulAddDay {
  min-width: 0;
  display: flex;
}

#tabsToolbarF {
  display: flex;
  right: 0;
  height: 50px;
  flex-direction: row;
  align-items: flex-start;
  margin: 0;
  padding: 0 0 0 2px;
  flex: 1;
  justify-content: space-between;
}

#addTabBtnF {
  top: 8px;
  margin-right: 0;
  padding-right: 0;
  width: 28px;
  height: 28px;
  border-left: 1px solid #a9a9a9 !important;
  border-radius: 0;
}

#addTabBtnF svg {
  fill: #6A7070;
}

#addTabBtnF:active svg {
  fill: #047A9C;
}

#editTabBtnF,
#saveTabBtnF {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 8px;
  width: 28px;
  height: 28px;
}

.dayF {
  margin-top: -1px;
}

#liF-1 {
  margin-left: -8px;
}

.dayF.tab-action {
  margin: 0.5em 1.4em;
}

@media(max-width: 536px) {
  .dayF.tab-action {
    margin: 0.5em 2.5em;
  }
}

.gr-form-element.edit-days-input {
  display: block;
  margin-top: -18px;
  margin-left: -18px;
}

.edit-days-input.edit {
  margin-right: 24px;
}

.gr-input.dt-editable-tab {
  width: 52px;
  padding: 0 4px;
  text-align: center;
}


#li-2 {
  margin-top: -16px;
  margin-left: -50px;
}


.gr-btn.icon-btn-18.addBtn.disabled {
  border-left: 1px solid #a9a9a9 !important;
}

.gr-btn.icon-btn-18.addBtn.disabled svg {
  fill: #6A7070;
}

/* ------- SERVING SIZE -------- */

.serving-size-container {
  width: 620px;
  margin: 40px auto;
}

.serving-size-container h1 {
  margin-bottom: 32px;
}

.serving-size {
  width: 616px;
}

.card-container.serving-size:not(.first) {
  margin-top: 16px;
}

/*-------------------------*/

img.serving-size-img-left {
  width: 140px;
  height: 154px;
}

img.serving-size-img-right {
  width: 108px;
  height: 130px;
}

.serving-size-c {
  display: flex;
  justify-content: space-between;
}

.serving-size-text {
  width: 320px;
  min-width: 320px;
  font-size: 14px;
}

.serving-size-text h2 {
  font-size: 18px;
}

.serving-size-text p {
  font-size: 16px;
}


@media(max-width: 565px) {
  .serving-size-container {
    margin-left: 25px;
    margin-right: 25px;
    width: 500px;
  }
  .serving-size {
    width: 500px;
  }
  .serving-size-c {
    width: 440px;
  }
  img.serving-size-img-left {
    width: 100px;
    height: 110px;
    margin-left: -8px;
  }
  img.serving-size-img-right {
    width: 88px;
    height: 106px;
    margin-right: 10px;
  }
  .serving-size-text {
    width: 280px;
    min-width: 280px;
    margin-left: 15px;
  }
}

@media(max-width: 320px) {
  .serving-size-text {
    margin-left: 0;
  }
  .serving-size {
    width: 280px;
    position: relative;
    height: 305px;
  }
  .serving-size-c {
    width: 280px;
  }
  img.serving-size-img-left {
    width: 90px;
    height: 99px;
    position: absolute;
    margin-top: 150px;
    left: 33px;
  }
  img.serving-size-img-right {
    width: 100px;
    height: 120px;
    position: absolute;
    margin-top: 150px;
    left: 153px;
  }
  .serving-size-text {
    width: 260px;
    min-width: 260px;
    margin-left: 0;
  }
}

.serving-size-container-left {
  margin-left: 24px;
}

/*------------- Quick Select ------------*/
.empty-row-qs {
  font-style: italic;
}

.serving-col-qs {
  padding: .2em 10px;
}

td.serving-col-qs {
  text-align: right;
  padding-right: 24px;
}

.cal-col-qs {
  padding: .2em 10px;
}

th.meal-table-h.info-col-qs {
  text-align: right;
}

td.info-col-qs.short-row {
  padding: .2em 6px .2em 20px;
}

th#th-serving-s-create-food {
  text-align: right;
}

th.meal-table-h.info-col-qs.myFood {
  text-align: left;
  padding-left: 32px;
}

@media(max-width: 767px) {
  td.info-col-qs.short-row {
    text-align: right;
  }
}

.meal-table-h.food-col-s.myFood {
  width: 70%;
}

.activity-table-h.activity-col-s {
  width: 100%;
}

.activity-col-s.default {
  font-style: italic;
  font-size: 12px;
}

.myFood {
  margin-top: 5px;
}

.myFood-btn-row-1 {
  border-bottom: 1px solid #c7c7c7;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.myFood-btn {
  min-width: 84px !important;
}

.myFood-btn-row-1,
.myFood-btn-row-2  {
  margin-left: -10px;
}

@media(max-width: 320px) {
  .top-margin {
    margin-top: -130px;
  }
}

.empty-create-food p {
  font-style: italic;
  margin-left: 10px;
}

.myFood-save {
  min-width: 121px;
  margin-left: 0;
}

.myFoodInput {
  width: 45px;
  margin-right: 8px;
}

.myFoodSelect {
  max-width: 112px;
}

/* Zeplin 203 */
.myFood-card {
  width: 505px;
}

.myFood-card.card {
  margin-top: 24px;
  margin-left: 24px;
  height: 100%;
}

.myFood-card h2 {
  font-size:14px;
}

.myFood-btn-row-3 {
  display: flex;
  justify-content: flex-end;
}

.gr-form-element.new-food-name {
  max-width: 228px;
}

.amt-row {
  display: flex;
  margin-top: 25px;
}

.gr-form-element.myFood-notes {
  margin-top: 22px;
  margin: 4px 0px;
  width: 228px;
}

.gr-form-element.myFood-notes textarea {
  min-width: 228px;
  max-width: 473px;
  width: 228px;
  max-height: 128px;
  height: 128px;
}

.myFood-basic-components {
  position: relative;
}

.myFood-basic-components details > summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Ecollapse-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -340.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='collapse-24'%3E%3Cg transform='translate(500.000000, 240.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,7.2642591 L12.6772745,7.264279 C12.6872407,7.27343586 12.6971852,7.28297167 12.7071068,7.29289322 L19.7071068,14.2928932 C20.0976311,14.6834175 20.0976311,15.3165825 19.7071068,15.7071068 C19.3165825,16.0976311 18.6834175,16.0976311 18.2928932,15.7071068 L12,9.41421356 L5.70710678,15.7071068 C5.31658249,16.0976311 4.68341751,16.0976311 4.29289322,15.7071068 C3.90236893,15.3165825 3.90236893,14.6834175 4.29289322,14.2928932 L11.2928932,7.29289322 C11.6736274,6.91215906 12.2849891,6.90261436 12.6772865,7.2642591 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  width: 22px;
  height: 22px;
  fill: #252525;
  color: #252525;
}

.myFood-basic-components details[open] summary:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Ctitle%3Eexpand-24%3C/title%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Gravity-Icons' transform='translate(-560.000000, -380.000000)'%3E%3Cg id='Icons' transform='translate(60.000000, 61.000000)'%3E%3Cg id='table'%3E%3Cg id='Lines' transform='translate(0.000000, 100.000000)'%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0.000000, 39.000000)' id='expand-24'%3E%3Cg transform='translate(500.000000, 280.000000)'%3E%3Crect id='trim' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Cpath d='M12.6772865,16.7357409 C12.2849891,17.0973856 11.6736274,17.0878409 11.2928932,16.7071068 L4.29289322,9.70710678 C3.90236893,9.31658249 3.90236893,8.68341751 4.29289322,8.29289322 C4.68341751,7.90236893 5.31658249,7.90236893 5.70710678,8.29289322 L12,14.5857864 L18.2928932,8.29289322 C18.6834175,7.90236893 19.3165825,7.90236893 19.7071068,8.29289322 C20.0976311,8.68341751 20.0976311,9.31658249 19.7071068,9.70710678 L12.7071068,16.7071068 C12.6971852,16.7170283 12.6872407,16.7265641 12.6772745,16.735721 L12.6772865,16.7357409 Z' id='icon' fill='%236A7070' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  fill: #252525;
  color: #252525;
}

.myFood-row {
  display: flex;
  flex-direction: row;
  padding: 5px;
  margin-bottom: 10px;
  height: 34px;
  font-size: 16px;
  line-height: 1.63;
  font-weight: 600;
}

.myFood-row:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline-offset: 0 !important;
  outline: 2px solid #0B73DA !important;
  border-left: 2px solid #0B73DA;
  border-right: 2px solid #0B73DA;
  border-bottom: 2px solid #0B73DA;
  outline: 0 !important;
}

.myFood-row:focus:first-child {
  border-top: 2px solid #0B73DA;
}

summary.myFood-row {
  cursor: pointer;
}

.myFood-label {
  padding-left: 25px;
}

fieldset.d-t-myFood {
  padding: 0;
  border: none;
  margin-bottom: -32px;
}

table.d-myFood-table {
  min-width: 490px;
  margin-top: -10px;
  margin-left: -10px;
  border-collapse: collapse;
}

.d-myFood-table table tbody td, table tbody th {
  padding: 0.5em 12px;
}

.activity-table table tbody td, table tbody th {
  /* padding: 1em 6px 0 6px; */
  padding: 1em 6px 0 6px;
  border-bottom: 1px solid #fff;
}

th.meal-table-h.food-col-s.myRecipe {
  width: 408px !important;
}

.meal-table-h.serving-col-s.myRecipe,
.serving-col-qs.myRecipe {
  padding-right: 0;
  width: 110px;
  text-align: center;
  padding-left: 45px;
}

.meal-table-h.cal-col-qs.myRecipe,
.cal-col-qs.myRecipe {
  padding-left: 0;
}

.d-myFood-table th {
  font-weight: 400 !important;
  text-align: left;
  padding-left: 2px;
}

.meal-table-h.info-col-qs.myRecipe,
.info-col-qs.myRecipe {
  text-align: left;
  padding-left: 32px;
}

.d-myFood-table tr:last-child {
  border-bottom: 1px solid #fff;
}

@media (max-width: 1280px) {
  table.d-myFood-table {
    min-width: 480px;
    margin-left: -10px;
  }
}

.d-myFood-table, table thead th {
  padding: 1em 20px;
}

@media(max-width: 320px) {
  div.dt-days {
    margin-left: 0;
    margin-top: 10px;
  }
  .d-tracker-days-filter {
    margin-bottom: 60px;
  }
  svg.icon-18.alert-row-svg {
    margin-top: 0;
  }
  table.d-myFood-table.responsive-table {
    margin-left: 5px;
  }
}

.myFood-table-h {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #c7c7c7;
}

th.myFood-table-h.info-col-qs {
  text-align: right;
  padding: .2em 20px .2em 0;
}

.myFood-col-th {
  padding-left: 10px;
}

.myFood-table-h {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #c7c7c7;
}

th.myFood-table-h.info-col-qs {
  text-align: right;
  padding: .2em 20px .2em 0;
}

.myFood-amt-col input {
  width: 45px;
  text-align: right;
}

td.myFood-amt-col {
  padding: 1px 2px;
}

td.myFood-unit-col {
  padding: 1px 2px;
}

.gr-select-container.myFood-unit-col {
  width: 92px;
}

td.myFood-cal-col {
  width: 30px !important;
}

div#myFood_tooltip_amt_01 {
  top: -74px;
  left: -10px;
}

div#myFood_tooltip_unit_01 {
  top: -74px;
  left: 0;
}

th.myFood-col-td {
  vertical-align: top;
  padding-top: 14px;
  width: 70px;
  padding-left: 15px;
}

td.myFood-amt-col {
  width: 70px;
}

.myFood-unit-col.single-unit-gram {
  vertical-align: top;
  padding-top: 14px;
  padding-left: 15px;
}

.subsequent-accordion {
  margin-top: 32px;
}

.myFood-btn-row-3.last {
  margin-bottom: 41px;
}

th.myFood-table-h.myFood-col-th {
  max-width: 200px !important;
  width: 200px;
  padding-left: 15px;
}

@media(max-width: 320px) {
  .myFood-card.card {
    margin-left: 20px;
    width: 280px;
  }
  .myFood-container {
    width: 280px;
    overflow-x: scroll;
  }
  th.myFood-table-h.myFood-col-th {
    max-width: 180px !important;
    width: 180px;
  }
}

/* My Recipe card */
.myRecipe-card {
  width: 505px;
  height: 100%;
}

.myRecipe-card.card {
  margin-top: 24px;
  margin-left: 24px;
  height: 100%;
}

.myRecipe-card h2 {
  font-size:14px;
}

.create-recipe-save-btn {
  margin-bottom: 40px;
}

@media(max-width: 320px) {
  .myRecipe-card.card {
    margin-left: 20px;
    width: 280px;
    overflow: scroll;
  }
}

.gr-form-element.recipe-name {
  max-width: 228px;
}

.diet-t-myRecipe-container {
  margin-top: 28px;
  max-height: 540px;
  height: 100%;
}

table.d-meal-table.responsive-table.myRecipe {
  min-width: 480px;
  height: 100%;
}

.recipe-col-th {
  text-align: left;
}

th.meal-table-h.info-col-s.myRecipe-h {
  padding-right: 25px !important;
}

th.food-col.myRecipe {
  vertical-align: top;
  padding-top: 15px;
}

.meal-table-h.info-col-s.myRecipe,
.info-col-s.myRecipe {
  margin-left: -15px !important;
}

td.cal-col.myRecipe {
  vertical-align: top;
}

td.info-col-s.myRecipeBtn {
  padding-top: 0;
  margin-left: -10px;
}

.myRecipe-total-calories {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-right: 10px;
}

.myRecipe-total-calories-label {
  margin-right: 107px;
}

.myRecipe-total-value {
  text-align: right;
}

.myRecipe-btn-row-1 {
  display: flex;
  justify-content: flex-start;
  margin-top: 32px;
  margin-bottom: 41px;
}

.myRecipe-search-container {
  border-bottom: 1px solid #c7c7c7;
}

.myRecipe-search-label {
  font-size: 14px;
  font-weight: 600;
}

.myRecipe-search-filter {
  display: flex;
  margin-top: 46px;
  justify-content: flex-start;
  text-align: left;
}

.myRecipe-search {
  width: 226px;
  position: relative;
  text-align: left;
  margin-top: 16px;
}

.myRecipe-search-icon {
  fill: #6A7070;
  position: absolute;
}

button.gr-btn.icon-btn-18.search-btn {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 25px;
  right: 8px;
  background-color: #fff;
}

[list].myRecipe-search-input::-webkit-calendar-picker-indicator {
  display: none;
}

.myRecipe-search-filter {
  flex-wrap: wrap;
}

.myRecipe-search-query {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.add-to-recipe-btn {
  height: 36px;
  margin-top: 36px;
}

@media(max-width: 320px) {
  .myRecipe-btn-row-1 {
    flex-wrap: wrap;
    margin-left: -10px;
  }
  .myRecipe-search-query {
    flex-wrap: wrap;
  }
}

.myRecipe-card ol {
  margin-bottom: 24px;
  margin-left: -24px;
}

.myRecipe-card h2 {
  font-size: 14px;
}

.myRecipe-card h3 {
  font-size: 14px;
}

.card.myRecipe-card {
  padding-bottom: 42px;
}

.myRecipe-rule {
  border-bottom: 2px solid #c7c7c7;
}

h2.nutrition-header {
  font-size: 18px;
  font-weight: 600;
}

.nutrition-list {
  display: flex;
  flex-direction: row;
}

p.nutrition-li-container {
  display: flex;
  flex-direction: column;
}

.nutrition-li-container:not(:first-child) {
  margin-left: 40px;
}

.nutrition-list-label {
  color: #6a7070;
  font-size: 12px;
}

.nutrition-list-value {
  margin-top: -12px;
}

.nutrition-li-container {
  margin-top: -18px;
  margin-bottom: 20px;
}

@media(max-width: 320px) {
  .nutrition-list {
    flex-direction: column;
  }
  .nutrition-li-container {
    margin-left: 0 !important;
  }
}

.save-edit {
  padding-top: 3px;
  margin-top: -1px;;
}

.basic-component-meta {
  display: flex;
  margin-left: 10px;
  margin-bottom: 24px;
}

.basic-component-data {
  font-size: 14px;
  line-height: 18px;
  width: 132px;
  text-align: left;
}

.basic-component-value {
  margin-right: 8px;
  text-align: right;
  width: 44px;
}

.basic-component-unit {
  text-align: left;
}

.recent-updates .card {
  margin: 24px;
}

.recent-updates {
  -webkit-box-shadow: none;
}

a.help-link-item {
  margin-top: 16px !important;
  margin-left: 40px;
  margin-bottom: 40px;
}

.recent-update-item {
  margin-top: 24px;
  margin-bottom: 32px;
}

/* Macronutrient charts v1: InfoVis Dashboard */
label.chart-macro {
  margin-top: 10px;
}

.card.reports-dc-charts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card.reports-dc-charts
.container-graph-tool {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.card.reports-dc-charts
.container-graph-tool h3 {
  font-family: 'Open Sans';
  font-size: 18px;
  font-weight: 300 !important;
  margin-left: 40px;
}
button.dashboard-settings {
  position: relative;
}

/* BAR CHART Styles */
.grid line {
  stroke: #d9d9d9;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width:0;
}

.tick text {
  fill: #252525;
  font-size: 10px;
  font-weight: 100;
}

.xlabel {
  padding-top: 0.5em;
}

.domain {
fill: none;
stroke: #d9d9d9;
shape-rendering: crispEdges;
}

.tick line {
  stroke: #d9d9d9;
}


.xlabel {
  font-size: 14px;
  font-weight: 400;
  fill: #252525;
  text-anchor: middle;
}

.ylabel {
  font-size: 14px;
  font-weight: 400;
  fill: #252525;
  text-anchor: middle;
}

.chart_title {
  font-size: 14px;
  font-weight: 700;
  fill: #252525;
  text-anchor: middle;
}

.data_values {
  text-anchor: middle;
  font-family: "Open Sans";
  font-size: 10px;
  /* font-weight: bold; */
  text-align: center;
  fill: #252525;
  text-anchor: middle;
}

.tooltip {
  position: absolute;
  background: #000;
  max-width: 60px;
  border-radius: 3px;
}


@media (max-width: 320px) {
  .btn-group-container {
    margin-left: -40px !important;
  }
  .card.reports-dc-charts
  .container-graph-tool h3 {
    margin-left: 10px;
  }
}

@media (max-width: 2000px) {
  .toggle-charts {
    display: block;
    opacity: 1;
  }
  .toggle-charts-fw {
    display: none;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-md {
    display: none;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-sm {
    display: none;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-xs {
    display: none;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .hide-charts {
    display: none;
    opacity: 0;
    height: auto;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
}
@media (max-width: 1215px) {
  .toggle-charts-fw {
    display: block;
    opacity: 1;
  }
  .toggle-charts {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-md {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-sm {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-xs {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .hide-charts {
    display: none;
    opacity: 0;
    height: auto;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .reports.dashboards-container {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
  }
  .card.reports-dc-charts {
    margin-top: 24px;
  }
  .card-container.dashboard-first {
    margin-top: -24px;
  }
  .card-container.report-view
  .card .btn-group-container {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1030px) {
  .toggle-charts-md {
    display: block;
    opacity: 1;
  }
  .toggle-charts {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-fw {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-sm {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-xs {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .hide-charts {
    display: none;
    opacity: 0;
    height: auto;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
}

@media (max-width: 738px) {
  .toggle-charts-sm {
    display: block;
    height: auto;
    opacity: 1;
  }
  .toggle-charts {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-fw {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-md {
    display: none;
    opacity: 0;
    transition: height 1250ms ease-in-out, opacity 2000ms ease-in-out;
  }
  .toggle-charts-xs {
    display: none;
    opacity: 0;
    transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
  }
  .hide-charts {
    display: none;
    height: auto;
    opacity: 0;
    transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
  }
}

@media (max-width: 436px) {
  .toggle-charts-xs {
    display: block;
    height: auto;
    opacity: 1;
  }
  .toggle-charts {
    display: none;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
  }
  .toggle-charts-fw {
    display: none;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
  }
  .toggle-charts-md {
    display: none;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
  }
  .toggle-charts-sm {
    display: none;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
  }
  .hide-charts {
    display: none;
	  height: 0;
	  opacity: 0;
	  overflow: hidden;
	  transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
  }
}

/* NEW d3 charts */
.goal-text {
  font-size: 12px;
  fill: #038238;
}

/* RESPONSIVE SUBNAV ANCHOR */
.card.sub-nav-anchor {
  padding: 0;
}

button.gr-btn.sub-nav-anchor {
  min-width: 100px !important;
  border: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 16px;
  margin-right: 0;
}

button.gr-btn.sub-nav-anchor svg {
  margin-left: 5px;
}

/* Add Food Anchor */
.card-container.sub-nav-anchor-up {
  margin-left: -24px;
  width: 505px;
}
.card.sub-nav-anchor-up {
  padding: 0;
}
.last-card.sub-nav-anchor-up {
  margin-top: 0;
}
button.gr-btn.sub-nav-anchor-up {
  min-width: 100px !important;
  border: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 16px;
  margin-right: 0;
}

button.gr-btn.sub-nav-anchor-up svg {
  margin-left: 5px;
}

.account-profile {
  color: #6A7070;
  font-weight: 400;
}

.tooltip-help {
  background-color: #252525;
  position: absolute;
  width: 74px;
  border-radius: 4px;
  top: 18px;
  margin-left: -70px;
  padding: 5px;
}

.tooltip-profiles {
  background-color: #252525;
  position: absolute;
  top: -40px;
  left: 260px;
  border-radius: 4px;
  width: 170px;
}

.tooltip-create-profile {
  background-color: #252525;
  width: 188px;
  border-radius: 4px;
  padding: 8px;
  margin-top: -12px;
}

.tooltip-help span,
.tooltip-profiles span,
.tooltip-create-profile span {
  width: 61px;
  height: 18px;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

.tooltip-help span {
  margin-left: 5px;
  padding: 5px 0 0 0 !important;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #252525;
  position: absolute;
  margin-top: -20px;
  margin-left: 77px;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #252525;
  position: absolute;
  top: -5px;
  left: 335px;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #252525;
  position: absolute;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid #252525;
  position: absolute;
}

img.onboarding-img {
  margin-top: 40px;
  height: 276px;
  margin-left: -50px;
  z-index: 100;
}

.gr-coachmark-container.diet-t-search-tip {
  display: block;
}

.coachmark.onboarding-01 {
  position: absolute;
  left: 110%;
  top: 90px;
  width: 752px;
  display: flex;
}

.title-container.onboarding-A {
  width: 100%;
  /* min-width: 407px; */
  min-width: 0;
}

h3.title-container.onboarding-A {
  font-size: 24px;
  margin-left: 25px;
}

.coachmark-link {
  margin-left: 30px;
}

.diet-text {
  font-size: 14px;
  line-height: 0.76 !important;
}

ol.onboarding-list {
  font-size: 16px;
}

li.onboarding-list {
  font-size: 16px !important;
}

svg.icon-24.d-tracker-help-icon.info-icon {
  width: 16px;
  margin-top: -1px;
  fill: #6A7070;
}

h4 {
  margin-left: 20px;
}

.row-icons {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: -30px;
  justify-content: center;
  margin-bottom: 25px;
  margin-top: -15px;
}

span.onboarding-text {
  font-size: 16px;
  margin-left: -4px;
  margin-top: -2px;
  color: #006885;
  font-weight: 400;
}

.onboarding-text {
  text-decoration: underline;
}

.onboarding-text:hover {
  text-decoration: none;
  cursor: pointer;
}

.onboarding-second {
  margin-left: 24px;
}

span.onboarding-text.second {
  vertical-align: bottom;
  margin-left: 2px;
}

/* span.onboarding-text.third {
  vertical-align: bottom;
  margin-left: 2px;
} */

img.light-bulb-onboarding {
  width: 18px;
}

.gr-coachmark-container::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #CAEFEE transparent transparent;
  z-index: 1;
}

.gr-coachmark-container button:not(.coach-link) {
  right: 60px;
  position: relative;
  top: 10px;
  margin: 0;
  width: 140px;
}

.onboarding-h3 {
  font-size: 24px !important;
}

.onboarding-h3 a {
  font-size: 24px !important;
  color: #1c5a72;
}

span#tipSearchLink {
  margin-left: 40px;
}

h3#dietSearchTip {
  margin-left: 20px;
}

.student-view-url {
  margin-top: -10px;
  margin-left: 20px;
  text-decoration: underline;
  font-weight: 400;
  margin-bottom: 20px;
  width: 120px;
  font-size: 16px;
}

.accessibility-url {
  color: #006885
}

.onboarding .gr-coachmark-container::after {
  display: none;
}

.onboarding .coachmark.onboarding-01 {
  left: 280px;
}

.onboarding .row-icons {
    display: flex;
    flex-direction: row;
    margin-left: 11px;
}

.onboarding-second {
  margin-left: 24px;
}

span.onboarding-text.second {
  vertical-align: 4px !important;
  margin-left: 2px;
}

.onboarding-second svg {
  fill: #6A7070;
  margin-top: 0;
}

.row-icons.onboarding-tips {
  z-index: 150;
  display: flex;
  justify-content: flex-start;
  width: 450px;
  margin-bottom: 28px;
  margin-left: 20px;
}

.target {
  margin-left: 5px;
}

button.gr-btn.icon-btn-24.add-focus.onboarding-media {
  width: 44px !important;
  height: 44px;
}

.close-quick-guide {
  z-index: 1000;
}

@media (max-width: 1080px) {
  .onboarding .coachmark.onboarding-01 {
    left: 50%;
  }
}

@media (max-width: 768px) {
  .onboarding .coachmark.onboarding-01 {
    left: 50%;
    width: 50%;
  }
  img.onboarding-img {
    display: none;
  }
  .row-icons {
    flex-direction: column !important;
  }
  .coachmark-help-link.onboarding-first {
    margin-left: 28px;
  }
  .row-icons.onboarding-tips {
    flex-direction: row !important;
    margin-left: -8px;
  }
  button#closeQuickGuide {
    z-index: 200;
  }
  button.onboarding-student {
    margin-left: -12px !important;
  }
}

@media (max-width: 480px) {
  .onboarding .coachmark.onboarding-01 {
    left: 15%;
    width: 50%;
  }
}

@media (max-width: 320px) {
  .onboarding .coachmark.onboarding-01 {
    left: 20px;
    box-shadow: none;
    filter: drop-shadow(0 0 3px #9e9d9d);
  }
  .onboarding .coachmark.onboarding-01 .content {
    width: 280px;
  }
  h3#dietSearchTip {
    margin-left: 5px;
    width: 240px;
    font-size: 24px !important;
  }
  .row-icons {
    width: 230px;
    flex-direction: column;
  }
  .coachmark-help-link.onboarding-first {
    margin-left: 60px;
  }
  .onboarding-second {
    margin-left: 50px;
  }
  .row-icons.onboarding-tips {
    flex-direction: column !important;
    width: 200px;
  }
  .coachmark-help-link.onboarding-first {
    /* margin-left: 36px; */
    margin-left: 28px;
  }
  .onboarding-second {
    margin-left: 28px;
  }
  button#closeQuickGuide {
    margin-left: -6px !important;
  }
  button.onboarding-student {
    margin-left: -12px !important;
  }
  .content.student {
    width: 280px;
  }
  button#closeQuickGuide.onboarding-student {
    margin-left: -10px !important;
  }
  button.gr-btn.icon-btn-24.add-focus.onboarding-media {
    width: 20px !important;
    height: 44px !important;
  }
  div.student-onboarding,
  div.instructor-onboarding {
    z-index: 1000;
  }
}

div.student-onboarding,
div.instructor-onboarding {
  z-index: 1000;
}

.onboarding-help-links {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.onboarding-tip-links {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
}

.onboarding-video-links {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0 !important;
}