body {
      font-family:   'Roboto', san-serif;
      font-size:     16px;
   }
   
   a:visited {
      color:                  #14717b;
   }
   
   a {
      color:                  #204496;
   }
   
   .color-inherit {
      color:                  inherit !important;
   }
   
   .w-60 {
      width:                  60%;
   }
   .text-pre {
      white-space:            pre;
   }
   .list-no-bullets {
      list-style-type:        none;
   }
   .cursor-pointer {
      cursor:                 pointer;
   }
   .connected-button {
      background-color:       #072b48;
      color:                  white;
      padding:                .1em .8em;
      text-align:             center;
      border-radius:          3px;
   }
   
   .plain-links a {
      text-decoration:        none;
   }
   .close-button {
      width:                  46px;
      height:                 46px;
      border:                 none;
      cursor:                 pointer;
   }
   .close-button button {
      border:                 none;
   }
   .new-lettering {
      color:                  #007450;
      font-style:             italic;
      font-weight:            bold;
      text-transform:         uppercase;
      
   }
   .contact-us-heading {
      color:                  #007450;
      font-size:              1.1em;
      margin-left:            1.6em;
      margin-bottom:          1.8em;
   } 
   .contact-us-list {
      list-style-type:        none;
   }

   .contact-us-list li {
      font-style:             italic;
   }

   .contact-us-list li p {
      font-style:             normal;
      margin-left:            2em;
   }
   
   .page-heading-background {
      background-color:       #e9eee9;
   }
   
   .white-background {
      background-color:       #fff;
   }
   
   .page-background {
      background-color:       #0a596c;
   }
   .heading-green {
      color:                  #637672
   }
   .lesson-section-blue, .log-text-blue {
      color:                  #0a596c;
   }
   #video-section {
      margin-left:            -1.8em;
      text-align:             center;
   }
   .aya-blue {
      color:                  #072B48;
   }
   .aya-turquoise-bg {
      background-color:       #0b596d;
   }
   .aya-green-bg {
      background-color:       #8dd809;
   }
   .aya-blue-bg {
      background-color:       #D6F7FF;
   }
   .aya-message-box {
      background-color:       #d1f2ed;
   }
   .aya-error-box-bg {
      background-color:       pink;
   }
   .aya-error-box-lh {
      line-height:            1.2
   }
      
   .heading-gray {
      color:                  #3C6B76;
   }
   .blue-circle {
      background-color:       #D6F7FF;
      width:                  110px;
      height:                 110px;
      border-radius:          50%;
      display:                flex;
      align-items:            center;
      justify-content:        center;
      font-size:              2.5em;
   }
   .blue-circle-title {
      margin-top:             .2em;
      line-height:            1.1;
   }
   .data-box {
      margin:                 1em;
      padding:                .2em;
      color:                  #3c6b76;
      background-color:       white;
      border-radius:          8px;
      position:               relative;
   }
   
   @media (max-width: 600px) {
      .data-box {
         width:                  320px;
      }
   }
   @media (min-width: 600px) {
      .data-box {
         width:                  480px;
      }
   }
   .data-box-title {
      text-transform:         uppercase;
      font-size:              .8em;
      font-weight:            bold;
   }
   .data-box-icon {
      position:               absolute;
      top:                    10px;
      right:                  10px;
   }
   .data-box-lettering-lg {
      font-size:              1.5em;
   }
   .data-box-lettering-sm {
      font-style:             italic;
   }
   .truncated-text {
      height:                 4em;
      overflow-x:             hidden;
      overflow-y:             hidden;
      line-height:            1.4;
   }
   .log-h1 {
      font-size:              1em;
   }
   .log-h2 {
      font-size:              1.1em;
   }
   .log-h3 {
      font-size:              .875em;
   }
   .log-sc-category {
      color:                  #0a596c;
      font-weight:            bold;
   }
   .log-sc-food {
      color:                  #0a596c;
   }
   .log-sc-cancel {
      cursor:                 pointer;
      position:               absolute;
      right:                  20px;
      top:                    10px;
      font-size:              2em;
      color:                  #4d4d4d;
   }
   .log-delete-sc {
      cursor:                 pointer;
   }
   .log-sc-choice-column {
      width:                  60%;
   }
   .log-sc-section {
      border-top-color:       #ebf5ff;
      border-top-width:       10px;
      border-top-style:       solid;
      padding:                1em;
   }
   .log-sc-text {
   }
   .log-sc-separator-top {
      border-top:             solid 1px #8dd807;
   }
   .log-sc-separator-bottom {
      border-bottom:          solid 1px #8dd807;
   }
   .log-next-button, .log-submit-button {
      color:                  white;
      background-color:       #072b48;
      border-radius:          .5em;
      cursor:                 pointer;
      font-size:              1.2em;
      padding:                .2em 1em;
   }
   .log-outline-button {
      color:                  #072b48;
      background-color:       white;
      border:                 solid 3px #072b48;
      border-radius:          .5em;
      cursor:                 pointer;
      font-size:              1.2em;
      padding:                .2em 1.15em;
   }
   .log-radio-toggle {
   }
   .log-radio-empty, .log-radio-selected {
      cursor:                 pointer;
   }
   .log-st-total {
      font-size:              2em;
      height:                 50px;
      width:                  125px;
      border:                 solid 3px #d0d0d0;
   }
   .log-st-control {
      cursor:                 pointer;
   }
   #log-congrats {
      width:                  100%;
      background-color:       #bff067;
      font-size:              1.2em;
      padding:                1em;
      text-align:             center;
   }
   #log-notes textarea {
      border:                 solid 3px #d0d0d0;
      border-radius:          10px;
      padding:                1em;
   }
   
   
/* problem solver styling */
   .ps-prev-week-header {
      background-color:       #072b48;
      color:                  white;
      cursor:                 pointer;
   }
   .ps-input-review {
      background-color:       #f5f5f5;
      border-radius:          5px;
   }
   .ps-page-title-separator {
      width:                  100%;
      height:                 2em;
      background-color:       #eaf5ff;
   }
   .ps-week-list li:last-child div.lesson-menu-item {
      border-bottom:          none;
   }
   .ps-input-ta {
      border:                 #ddd 3px solid;
      border-radius:          8px;
      padding:                5px;
   }
   .ps-required-warning {
      color:                  red;
      padding:                .5em 1em;
      background-color:       #f5f5f5;
   }

/* */   
   .program-week-bar {
      background-color:       #314f67;
      color:                  white;
      font-style:             italic;
   }
   
   .yellow-top-bar {
      background-color:       #ff9300;
      height:                 .1em;
   }
   .menu-bar {
      background-color:       #072b48;
   }
   .menu-item {
      color:                  #acb8c2;
      display:                inline-block;
      width:                  71px;
      text-align:             center;
      cursor:                 pointer;
   }
   .menu-item img path {
      fill:                   #acb8c2;
   }
   .menu-active {
      color:                  white;
   }
   .menu-active img svg g path {
      fill:                   #fff;
   }
   .menu-toggle-button {
      width:                  172px;
      padding:                .2em .1em;
      margin:                 .2em .3em;
      text-align:             center;
      background-color:       #8196A2;
      color:                  white;
      border-radius:          8px;
      cursor:                 pointer;
      border-bottom:          solid 4px #647672;
   }
   .menu-toggle-button.active {
      background-color:       #314F67;
      border-bottom:          solid 4px #072B48;
   }
   .lessons-content, .log-content {
      max-width:              600px;
      margin:                 auto;
      background-color:       white;
      border-radius:          8px;
      position:               relative;
   }
   .lesson-heading-bar {
      color:                  white;
      background-color:       #072B48;
      padding:                .5em 2em;
   }
   .lesson-menu-item {
      border-bottom:          solid black 1px;
      padding:                .5em .2em;
   }
   .list-item-button {
      cursor:                 pointer;
   }
   .lesson-icon.active img {
      border:                 solid 4px #ff9300;
      border-radius:          50%;
   }
   .lesson-icon {
      width:                  5em;
      text-align:             center;
      cursor:                 pointer;
   }
   .lesson-icon-caption {
      margin-top:             .4em;
      line-height:            1.2
   }
   .aya-button {
      padding:                .2em .8em;
      margin:                 .2em .3em;
      text-align:             center;
      color:                  white;
      border-radius:          .8em;
      cursor:                 pointer;
      background-color:       #314F67;
      border-bottom:          solid 4px #072B48;
   }
   
   .read-lesson-list {
      list-style-position:    inside;
      margin-left:            -2.5em;
   }
   .read-lesson-list .list-item {
      background-color:       #EBF5FF;
      margin:                 .2em .2em 1em .2em;
      padding:                1em 2em .01em 2em;
      border-radius:          .8em;
   }
   .read-lesson-list .item-title {
      font-weight:            bold;
      display:                inline-block;
   }
   .read-lesson-list .item-body {
      color:                  #121212;
      padding-bottom:         1em;
   }
   .skills-lesson-list .item-body .skills-para {
      background-color:       white;
      margin:                 .2em 1em 1em 1em;
      padding:                1em;
      border-radius:          .8em;
   }
   .skills-lesson-list .list-item {
      background-color:       #EBF5FF;
      margin-bottom:          1em;
   }
   .skills-lesson-list .item-title {
      color:                  white;
      background-color:       #314F67;
      border-radius:          .3em;
      text-transform:         uppercase;
      font-weight:            bold;
      padding:                1em;
      cursor:                 pointer;
      
   }
   .skills-lesson-list, .solutions-lesson-list  {
      list-style:             none;
      margin-left:            -2.5em;
   }
   .skills-lesson-list .open-item,
   .skills-lesson-list .close-item {
      text-transform:         none;
      font-style:             italic;
      margin-left:            1em;
      font-weight:            normal;
   }
   
   .skills-lesson-list .list-item.active .open-item {
      display:                none;
   }
   .skills-lesson-list .list-item:not(.active) .close-item {
      display:                none;
   }
   .skills-lesson-list .list-item:not(.active) .item-body {
      display:                none;
   }
   .solutions-lesson-list .list-item {
      display:                flex;
      justify-content:        flex-start;
      margin-bottom:          2em;
   }
   .solutions-lesson-list .list-item .item-title {
      font-weight:            bold;
   }
   
   .solutions-lesson-list .list-item .item-col1 {
      padding:                1em;
   }
   .solutions-lesson-list .list-item .item-col2 {
      padding:                1em 1em 1em 0;
   }
   .solutions-lesson-list .list-item:nth-child(odd) {
      background-color:       #EBF5FF;
      border-radius:          .6em;
   }
   .solutions-hunger-table .table-row {
      display:                flex;
      justify-content:        flex-start;
   }
   .solutions-hunger-table hr {
      color:                  #567081;
      margin-top:             0;
      margin-bottom:          0;
   }
   .solutions-hunger-table .table-row .row-col1 {
      padding:                1em;
      color:                  #0A596C;
      text-justify:           right;
   }
   .solutions-hunger-table .table-row .row-col2 {
      padding:                1em 1em 1em 0;
   }
   .solutions-green {
      background-color:       #f3ffe3;
   }
   
   /* feedback page styles  */
   .summary-table {
      display:                table;
      border-collapse:        collapse;
   }
   .summary-tr {
      display:                table-row;
   }
   .summary-tr:not(:last-child) {
      border-bottom:          1px solid #072b48;
   }
   .summary-th {
   }
   .summary-th, .summary-td {
      display:                table-cell;
      text-align:             center;
      padding:                .2em;
   }
   .summary-td {
   }
   .summary-td-green {
      background-color:       #d1f2ed;
   }
   .summary-th:not(:last-child), .summary-td:not(:last-child) {
      border-right:           1px solid #072b48;
   }
   
   /* admin page styles */
   .admin-menu-list, .admin-submenu-list {
      list-style-type:         none;
   }
   .admin-menu-list>li {
      color:                   #8dd809;
   }
   .admin-menu-list h2 {
      margin-bottom:           0;
   }
   .admin-submenu-list {
      margin-left:             2em;
   }
   .admin-button {
      border-radius:          3px;
   }
   .admin-icon {
      cursor:                 pointer;
      color:                  #8dd809;
   }
   .admin-icon-danger {
      color:                  #dc3545;
   }
   .admin-input-area {
      padding-top:            0.5em;
      padding-left:           1em;
      display:                flex;
      justify-content:        start;
      background-color:       #f8faff;
   }
   .admin-input-label {
      display:                inline-block;
      width:                  17em;
      font-weight:            bold;
   }
   .admin-input-control {
      background-color:       #D6F7FF;
      display:                inline-block;
      padding:                .5em;
      margin-left:            1em;
   }
   .admin-input-select {
      background-color:       white;
      padding:                .3em .8em;
   }
   .admin-input-option {
      font-family:            sans-serif;
      background-color:       #f8faff;
   }
   .admin-compute-button {
      cursor:                 pointer;
      font-size:              .8em;
      font-weight:            normal;
      color:                  blue;
   }
   .required-indicator {
      font-weight:            bold;
      color:                  red;
   }
   .required-missing-indicator, .error-box-color {
      background-color:       pink;
   }
   .admin-ppt-menu {
      background-color:       #072B48;
      color:                  white;
   }
   .admin-ppt-menu .menu-row {
      align-items:            center;
      margin-top:             .3em;
      height:                 4em;
   }
   .admin-ppt-menu .menu-row.active {
      border:                 3px solid white;
      border-radius:          8px;
      background-color:       white;
      color:                  #072B48;
   }
   .admin-ppt-menu .menu-icon {
      width:                  1.5em;
      text-align:             center;
      font-size:              2em;
      
   }
   .admin-ppt-menu .menu-caption {
      text-align:             center;
      width:                  4em;
      margin-left:            .2em;
      margin-right:           .2em;
   }
   
   /* rules UI ****/
   .expr-column, .expr-cell, .rule-row-head {
      cursor:                 pointer;
   }
   .expr-cell {
      border-left:            solid 1px #aaa;
      border-right:           solid 1px #aaa;
   }
   
   /* rotate expr column headers from
      https://css-tricks.com/rotated-table-column-headers/
    */
   th.expr-column {
      height:                 100px;
      white-space:            nowrap;
   }
   div.expr-column-rotated {
      transform:              rotate(315deg);
      width:                  30px;
   }
   div.expr-column-rotated > span {
      padding:                5px 10px;
   }
   
   th.expr-column:hover, td.expr-cell:hover {
      color:                  white;
      background-color:       #6c757d !important;
      border-color:           #6c757d;
   }