/* dynkids.css */

body {
   font-family:                  Lato, Regular;
   font-size:                    22px;
   margin:                       0;
   line-height:                  1.6;
}
.dynkids-h1, .dynkids-h2, .dynkids-h3, .dynkids-h4 {
   font-family:                  museo-slab, serif;
   /* font-style:                   normal; */
   font-weight:                  500;
   line-height:                  1.2;
}
.dynkids-link {
   cursor:                       pointer;
   display:                      inline;
}
@media (max-width:   1023px) {
   body {
      font-size:                 32px;
   }
   .dynkids-h1 {
      font-size:                 36px;
   }
}
@media (max-width:   767px) {
   .dynkids-wide-only {
      display:                   none;
   }
}
@media (min-width:   768px) {
   .dynkids-narrow-only {
      display:                   none;
   }
}

/* **********/
body, html {
   width:                        100%;
}
a, .dynkids-link {
   color:                        #442769;
   text-decoration:              underline;
   cursor:                       pointer;
}
/*
   dynkids-turquoise #28C5E6
   dynkids-purple rgb(68,39,105)
 */
.dynkids-purple {
   color:                        #442769;
}
.dynkids-turquoise  {
   color:                        #28C5E6;
}
.dynkids-action-color {
   color:                        #28C5E6;
}

.dynkids-title {
   font-family:         museo-slab, serif;
   font-style:          normal;
   font-weight:         500;
   font-size:           48px;
   text-align:          center;
   line-height:         1.2;
   margin-top:          10px;
}
.top-bar {
   width:               100%;
   height:              4px;
   background-color:    rgb(40,197,230)
}
.header-margined-area, .footer-margined-area {
   max-width:           1024px;
   margin:              auto;
   padding-left:        15px;
   padding-right:       15px;
   padding-top:         10px;
}
.public-nav-menu-block {
   text-align:          right;
   color:               #442769;
   float:               right;
   position:            relative;
   height:              102px; /* height of logo */
}

.public-nav-menu-block a {
   text-decoration:     none;
}
.public-nav-menu-bar {
}
.public-nav-menu-lang {
}
/* languages */

.dynkids-lang-button {
   display:             inline-block;
   cursor:              pointer;
}
.dynkids-lang-button.active {
   background:          rgb(95, 155, 206);
   color:               white;
   border-radius:       5%;
   padding:             5px;
}
@media (max-width:   399px) {
   .public-nav-menu-lang {
      display:          none;
   }
   .public-nav-menu-lang-mobile {
      margin:           10px auto;
      display:          block;
   }
}
@media (min-width:   400px) {
   .public-nav-menu-lang {
      position:            absolute;
      width:               300px;
      bottom:              3px;
      right:               0;
   }
   .public-nav-menu-lang-mobile {
      display:          none;
   }
}

.dynkids-logo {
   text-align:          left;
   display:             inline-block;
}
.dynkids-header {
   width:               100%;
   position:            fixed;
   overflow:            hidden;
   top:                 0;
   z-index:             3;
   background-color:    white;
}
.dynkids-header-spacer-tall, .dynkids-header-spacer-short {
   width:               100%;
}
@media (min-width:   1024px) {
   .dynkids-header-spacer-tall {
      height:              190px;
   }
   .dynkids-header-spacer-short {
      height:              119px;
   }
   .header-menu-band {
      background-color:    rgb(68,39,105);
      color:               white;
      width:               100%;
      font-family:         museo-slab, serif;
      font-style:          normal;
      font-weight:         500;
      font-size:           1em;
      text-transform:      uppercase;
      line-height:         1.2;
      /*
      padding-top:         10px;
      padding-bottom:      10px;
      */
   }
   .header-menu-band a {
      color:               white;
      text-decoration:     none;
   }
   .header-menu-band .dynkids-narrow-margined {
      text-align:          center;
   }
}
ul.dynkids-narrow-margined {
   list-style:             none;
}
@media (max-width:   1023px) {
   .dynkids-logo {
      width:               340px;
      height:              170px;
   }
   .dynkids-logo img {
      width:               100%;
   }
   .public-nav-menu-block {
      height:              160px; /* height of logo */
   }
   .dynkids-header-spacer-tall {
      height:              370px;
   }
   .dynkids-header-spacer-short {
      height:              180px;
   }
   .header-menu-mobile {
      background-color:             rgb(68,39,105);
      color:                        white;
      padding-top:                  3px;
      padding-bottom:               3px;
      
   }
   .header-menu-button {
      background-color:             #28C5E6;
      color:                        white;
      margin:                       10px auto;
      padding:                      3px;
      font-size:                    1.5em;
      width:                        160px;
      cursor:                       pointer;
      text-align:                   center;
   }
   .header-menu-button img {
      height:                       25px;
      margin-left:                  10px;
   }
   .header-menu-icon-open {
      transform:                    rotate(180deg);
   }
   .header-menu-band {
      display:                      none;
      width:                        100%;
      background-color:             #28c5e6;
      margin-left:                  auto;
      margin-right:                 auto;
      text-align:                   left;
      margin-top:                   -15px;
   }
   .header-menu-band.header-menu-show {
      display:                      block;
      height:                       2000px;
      font-size:                    1.5em;
   }
}

.header-menu-item {
}
.header-menu-item a {
   text-decoration:              none;
}
.public-nav-menu-bar .current-item {
   font-weight:                  bold;
}
.header-menu-item, .header-menu-item a {
   color:                        white;
}
.header-menu-subitem {
   z-index:                      1;  /* hack for wierd DataTables problem */
}

.current-header-menu-item,
.current-header-menu-item.header-menu-item  > a,
.header-menu-item:hover,
.header-menu-item a:hover,
.header-menu-subitem-item:hover {
   font-weight:                  bold;
}
li.current-header-menu-item {
   font-weight:                  bold;
}

.header-menu-subitem { /* technique from http://www.htmldog.com/articles/suckerfish/dropdowns/ */
   position:                     absolute;
   left:                         -9999px;
   background-color:             #263E67;
   line-height:                  2;
   padding-left:                 10px;
   padding-right:                10px;
   padding-top:                  15px;
}
.header-menu-item a, .header-menu-subitem a {
   text-decoration:              none;
   color:                        white;
   padding:                      5px 0;
   
}
.header-menu-subitem li {
   list-style:                   none;
}

.header-content {
	/* padding:          10px; */
   margin:                       auto;
   max-width:                    768px;
}

.header-logo a {
   text-decoration:              none;
   font-size:                    2em;
}
.header-logo-tag img {
	height:                       30px;
   margin-top:                   20px;
   margin-left:                  20px;
   vertical-align:               bottom;
   max-width:                    705px;
}

ul.header-menu {
   margin-bottom:                2px;
   padding-right:                10px;
   padding-bottom:               20px;
   text-transform:               uppercase;
   list-style-type:              none;
   font-size:                    .98em;
}
.header-menu-wide {
   background-color:             #263E67;
   text-transform:               uppercase;
   color:                        white;
}
.header-menu li {
   padding-top:                  20px;
}
@media (max-width: 1023px) {
   ul.header-menu {
      text-align:                   left;
      margin-top:                   15px;
   }
}

@media (max-width: 1023px) {
   html, body, .dynkids-page-div {
      height:           100%;
   }
   
   .dynkids-page-content {
      /* see sticky footer solution:
         https://css-tricks.com/couple-takes-sticky-footer/       */
      margin-bottom:   -360px;               /* height of footer */
      min-height:      calc(100% - 340px);   /* subtract height of header plus fudge */
   }
   .dynkids-footer-shim {
      height:           400px;
   }
}

@media (min-width: 1024px) {
   html, body, .dynkids-page-div {
      height:           100%;
   }
   .dynkids-page-content {
      /* see sticky footer solution:
         https://css-tricks.com/couple-takes-sticky-footer/       */
      margin-bottom:   -330px;               /* height of footer */
      min-height:      calc(100% - 215px);   /* subtract height of header plus fudge */
   }
   .header-margined-area {
      height:           108px;
   }
   .dynkids-footer-shim {
      height:           330px;
   }
   .header-logo-mobile {
      display:          none;
   }
   .header-logo, .header-menu-wide {
      display:          inline-block;
   }
   .header-menu-wide {
      width:            100%;
   }
   .header-menu-button {
      display:          none;
   }
   ul.header-menu {
      text-align:                   center;
      width:                        70%;
      /* padding-top:                  20px; */
   }
   .header-menu, .header-menu-item {
      display:          inline-block;
   }
   .header-menu-list {
      display:                      table;
      margin-left:                  auto;
      margin-right:                 auto;
      font-size:                    .98em;
      text-align:                   center;
      width:                        100%;
   }
   .header-menu-item:not(:first-child):before {
      /* margin-top:       20px; */
      content:          "\00a0\00a0|\00a0\00a0";
   }
   .header-menu-item:hover .header-menu-subitem {
      color:            #489BD5;
      margin-left:      -5px;
   }
   .header-menu-subitem a:hover {
      color:            #489BD5;
   }
   .header-menu-item:hover .header-menu-subitem {
      left:             auto;
      background-color: #263E67;
      /* width:            300px; */
      margin-top:       2px;
   }
   .header-menu-icon {
      display:          none;
   }
}
.dynkids-footer-tagline { 
   color:                        #442769;
   font-size:                    1.5em;
   text-align:                   center;
   width:                        100%;
   font-style:                   italic;
   font-family:                  museo-slab, serif;
   margin-top:                   30px;
}
.dynkids-footer {
   background-color:             #C4C4C4;
   width:                        100%;
   /*
   padding-left:                 20px;
   padding-right:                20px;
   */
   margin-top:                   10px;
   padding-bottom:               10px;
}
.dynkids-footer-row {
   display:                      flex;
   flex-wrap:                    wrap;
   justify-content:              space-around;
}
.dynkids-footer-row-item {
   margin-top:                   20px;
}
@media (max-width:   1023px) {
   .SPH-Dallas_Logo {
      width:                     150px;
   }  
}
.dynkids-copyright {
   font-size:                    .8em;
}
.dynkids-footer-row-item img {
   width:                        100%;
}

/*** home page *****/
.home-hero-band {
   background-color:    rgb(68,39,105);
   width:               100%;
   color:               white;
   padding-bottom:      30px;
   padding-top:         15px;
}
.dynkids-narrow-margined {
   max-width:           768px;
   margin:              auto;
   padding-left:        10px;
   padding-right:       10px;
}
.dynkids-wide-margined {
   max-width:           978px;
   margin:              auto;
   padding-left:        15px;
   padding-right:       15px;
}
.dynkids-hero-img-container {
   display:             flex;
   justify-content:     center;
}
.dynkids-hero-img {
   display:             inline-block;
}
.dynkids-hero-img img {
   width:               100%;
   z-index:             2;
}      

.dynkids-lead {
         color:                  #442769;
         font-weight:            bold;
}
/*************/
/* accordions */

.dynkids-accordion-header {
   padding:                      10px;
   background-color:             #442769;
   color:                        white;
}
.dynkids-accordion-header h3 {
   margin-top:                   5px;
   margin-bottom:                5px;
}

.dynkids-accordion {
   position:                     relative;
   width:                        100%;
   margin-top:                   10px;
}

.dashboard-accordion {
   text-align:                   left;
   margin-top:                   10px;
   margin-bottom:                10px;
   cursor:                       pointer;
}
.dashboard-accordion.in_progress  .dashboard-accordion-title-box {
   background-color:             rgb(40,197,230);  /* turqouise */
   color:                        white;
}
.dashboard-accordion.available .dashboard-accordion-title-box,
.dashboard-accordion.complete .dashboard-accordion-title-box  {
   background-color:             #dcf5fa;          /* light blue */
   color:                        #442769;
}
.dashboard-accordion.unavailable .dashboard-accordion-title-box {
   background-color:             rgb(206,199,216); /* light purple */
   color:                        #442769;          /* dark purple */
}
/* hide the accordion body unless accordion is in progress */
.dashboard-accordion .dashboard-accordion-body {
   display:                      none;
}
.dashboard-accordion.in_progress .dashboard-accordion-body {
   display:                      block;
}

.dynkids-accordion {
   position:                     relative;
   width:                        100%;
   border:                       2px solid #F0F0F0;
   margin-top:                   10px;
   z-index:                      1;
}
.dynkids-accordion-header {
   display:                      flex;
   justify-content:              space-between;
   align-content:                center;
   color:                        #FFFFFF;
   background-color:             #442769;
   padding:                      0 20px;
   cursor:                       pointer;
}
.dynkids-accordion-text {
}

.dashboard-accordion.unavailable {
   cursor:                      not-allowed;
}
.dynkids-accordion-button {
   font-size:                    2.5em;
   font-weight:                  bold;
   color:                        white;
   cursor:                       pointer;
   height:                       1.5em;
   width:                        1.5em;
   /*
   line-height:                  1;
   background-color:             rgb(72,155,213);
   border-radius:                .75em;
   border:                       1px solid white;
   margin:                       auto;
   */
   text-align:                   center;
}
.dashboard-accordion-button {
   float:                        right;
   font-weight:                  bold;
   font-style:                   normal;
   height:                       1.5em;
   width:                        1.5em;
   /*
   font-size:                    2.5em;
   line-height:                  1;
   color:                        white;
   background-color:             rgb(72,155,213);
   border-radius:                .75em;
   border:                       1px solid white;
   margin:                       auto;
   text-align:                   center;
   */
}

.dashboard-accordion.accordion-open .dashboard-accordion-button::before,
.dynkids-accordion.accordion-open .dynkids-accordion-button::before {
   content:                      "\2013";
}
.dashboard-accordion:not(.accordion-open)  .dashboard-accordion-button::before,
.dynkids-accordion:not(.accordion-open)  .dynkids-accordion-button::before {
   content:                      "+";
}
.dynkids-accordion-body, .dynkids-accordion-header-bar, .dynkids-accordion-header-body {
   padding:                      10px;
   overflow:                     auto;
}
.dashboard-accordion:not(.accordion-open) .dashboard-accordion-body,
.dynkids-accordion:not(.accordion-open) .dynkids-accordion-body {
   display:                      none;
}
.dashboard-accordion.accordion-open .dashboard-accordion-body,
.dynkids-accordion.accordion-open .dynkids-accordion-body {
   display:                      block;
}

/****** end of accordions ***/

.margined-area {
   margin:                       auto;
   max-width:                    768px;
}

.breadcrumb-link {
   text-decoration:              none;
   margin-left:                  10px;
   margin-right:                 10px;
}
a.button {
   -webkit-appearance:           button;
   -moz-appearance:              button;
   appearance:                   button;
   text-decoration:              none;
   color:                        initial;
   background-color:             #489BD5;
   padding:                      5px;
}
.comma-sep-list-element:not(:first-child):before {
   content:                      ", "
}
.dynkids-plain-page-div {
   width:                        100%;
   text-align:                   center;
   border-bottom:                solid black 120px;
   height:                       calc(100% - 130px);
   overflow:                     hidden;
}
@media (min-width: 1024px) {
   .desktop-vertical-align-middle {
      position:         relative;
      top:              50%;
      transform:        translateY(-50%);
   }
}
#skiptocontent a {
    padding:                     6px;
    position:                    absolute;
    top:                         -50px;
    left:                        0px;
    color:                       black;
    border-right:                1px solid white;
    border-bottom:               1px solid white;
    border-bottom-right-radius:  8px;
    background:                  transparent;
    -webkit-transition:          top 1s ease-out, background 1s linear;
    transition:                  top 1s ease-out, background 1s linear;
    z-index:                     100;
}
#skiptocontent a:focus {
	position:                     absolute;
	left:                         0;
	top:                          0;
	background:                   #BF1722;
	outline:                      0;	
	-webkit-transition:           top .1s ease-in, background .5s linear;
    transition:                  top .1s ease-in, background .5s linear;
}
/* header and footer */
/*
/*.dynkids-page-header {
/*   color:                        white;
/*   background-color:             black;
/*   max-width:                    1280px;
/*   margin-left:                  auto;
/*   margin-right:                 auto;
/*}
/*.dynkids-page-header a {
/*   color:                        white;
/*}
/*.header-logo {
/*   padding:                      10px;
/*   margin-left:                  10px;
/*}
/*.header-super-menu {
/*   float:                        right;
/*}
/*.header-super-menu-list {
/*}
/*.header-super-menu-item {
/*   list-style:                   none;
/*   display:                      inline-block;
/*   cursor:                       pointer;
/*   margin-top:                   20px;
/*   vertical-align:               top;
/*}
/*.header-super-menu-item:not(:first-child) {
/*   margin-top:                   20px;
/*}
/*.header-super-menu-item a {
/*}
/*.header-super-menu-item img {
/*   margin-left:                  10px;
/*   vertical-align:               middle;
/*}
/*.header-super-menu-label {
/*   display:                      inline-block;
/*   text-transform:               uppercase;
/*}
/*.sidebar-area {
/*   display:                      inline-block;
/*   vertical-align:               top;
/*   height:                       100%;
/*   width:                        200px;
/*   background-color:             black;
/*   color:                        white;
/*}
/*.content-area {
/*   display:                      inline-block;
/*   height:                       100%;
/*   width:                        calc(100% - 100px); /* allow for width of sidebar */
/*   width:                        calc(100% - 205px); /* allow for width of sidebar */
/*}
/*@media (min-width: 1024px) {
/*   .page-footer {
/*      height:           290px;
/*   }
/*}
/*.page-footer {
/*   /* margin-top:                   20px; */
/*   height:                       100px;
/*   background-color:             black;
/*   max-width:                    1024px;
/*   margin-left:                  auto;
/*   margin-right:                 auto;
/*}
/*.footer-row {
/*   margin:                       auto;
/*   max-width:                    768px;
/*}
/*.footer-logo-row-text {
/*   width:                        calc(100% - 246px); /* width minus logo width */
/*   margin-left:                  10px;
/*   vertical-align:               top;
/*}
/*.footer-band {
/*   background-color:             #489BD5;
/*   height:                       50px;
/*   width:                        100%;
/*}
*/
.message-area:empty {
   display:                      none;
}
.message-area {
   background-color:             pink;
   padding:                      5px;
   -webkit-transition:           top 1s ease-out, background 1s linear;
   transition:                   top 1s ease-out, background 1s linear;
}
.login-content {
   
}
.login-heading {
   font-weight:                  bold;
   text-transform:               uppercase;
   font-size:                    3.5em;
}
.login-form-area {
   text-align:                   left;
}
.login-form-label {
   /* width:                        150px; */
   font-weight:                  bold;
   font-size:                    1.2em;
   display:                      block;
}
.login-form-label:not(:first-child) {
   margin-top:                   20px;
}
.login-form-input  {
   display:                      block;
   margin-top:                   10px;
}
.login-form-input input {
   font-size:                    1em;
   line-height:                  2;
   padding:                      5px;
   width:                        100%;
   border:                       solid 2px lightgray;
}
.login-button-area {
   text-align:                   right;
}
.login-button {
   text-align:                   center;
   background:                   rgb(95, 155, 206);
   color:                        white;
   width:                        140px;
   margin:                       40px auto 0;
   padding:                      3px;
   margin-bottom:                10px;
   cursor:                       pointer;
   display:                      inline-block;
}
.login-forgot {
   display:                      inline-block;
   text-decoration:              none;
   font-style:                   italic;
   margin-left:                  40px;
}
.password-mismatch-warning {
   border:                       4px solid red;
}
.dynkids-page-content {
   /* max-width:                    1280px; */
   margin-left:                  auto;
   margin-right:                 auto;
}
.dynkids-plain-page-content {
   height:                       100%;
   max-width:                    500px;
   margin-left:                  auto;
   margin-right:                 auto;
}
.plain-footer {
   height:                       100px;
   width:                        100%;
   background-color:             black;
}
.dynkids-button {
   padding:                      5px;
   margin:                       10px;
   background-color:             #263E67;
   color:                        white;
   cursor:                       pointer;
}
.dashboard-button-row {
   margin-left:                  auto;
   margin-right:                 auto;
}
.dashboard-button {
   display:                      inline-block;
   height:                       200px;
   width:                        200px;
   text-align:                   center;
   vertical-align:               top;
   border:                       solid black 1px;
   font-weight:                  bold;
   line-height:                  1.3;
   cursor:                       pointer;
}
.dashboard-button:not(:first-child) {
   margin-left:                  30px;
}
.dashboard-button img {
   margin-top:                   30px;
}
.dynkids-action-button, .dynkids-quiz-submit, .dynkids-survey-submit, .lesson-next-button, .dynkids-button  {
   color:                        white;
   font-size:                    2em;
   font-family:                  museo-slab, serif;
   background-color:             #28C5E6;
   cursor:                       pointer;
   padding:                      20px;
   display:                      inline;
   border-radius:                2px;
   box-shadow:                   5px 5px 5px lightgray;
}
.lesson-next-button.hidden, .dynkids-quiz-submit.hidden, .dynkids-survey-submit.hidden {
   display:                      none;
}
/*****
  view list
 */
.view-list-table-head-cell {
   text-align:                   left;
}
.view-list-table-cell {
   padding:                      0 2px 0 5px;
}
.view-list-table-cell-action {
   color:                        blue;
   cursor:                       pointer;
}



/*****
  edit form
 */

.edit-form {
   margin:                       20px;
   
}

.edit-form-note-symbol {
   font-size:                    1.5em;
   color:                        red;
   vertical-align:               middle;
}
.edit-field {
}

.edit-field:not(first-child), .view-field:not(first-child) {
   margin-top:                   20px;
}

.edit-field-label, .view-field-label  {
   display:                      inline-block;
   background-color:             rgb(102,153,204);
   height:                       30px;
   line-height:                  30px;
   width:                        160px;
   color:                        white;
   padding:                      5px;
   vertical-align:               top;
}

.edit-field-input, .edit-field-value, .view-field-value, .file-upload-input, .view-image-upload-field {
   display:                      inline-block;
   margin-left:                  10px;
}
.edit-field input[type="text"] {
   line-height:                  2;
   padding:                      5px;
}

.edit-field select {
   height:                       40px;
   padding:                      5px;
   line-height:                  20px;}

.edit-multivalue-field-input, .view-multivalue-field-values  {
   /* display:                      inline-block; */
   vertical-align:               top;
   margin-left:                  10px;
}
.edit-multivalue-field-choice {
}

div.inline-radio, div.inline-radio div {
   display:                      inline-block;
}
.edit-content-field-input {
   display:                      inline-block;
   margin-left:                  10px;
   padding:                      5px;
   width:                        450px;
   border:                       1px solid gray;
}
.view-image-upload-field  {
   display:                      inline-block;
}
.view-image-upload-field img {
   height:                       150px;
}
.cms-content {
   min-height:                   1em;
}
.view-content-field {
   margin:                       10px 30px;
   padding:                      5px;
   border:                       1px solid gray;
}

.panel-icon {
   display:                      inline-block;
}
.panel-icon.rotate-open img {
   transform:                    rotate(-90deg);
}
.admin-content {
   margin-left:                  10px;
   margin-right:                 10px;
}
.admin-content-heading {
   background-color:             black;
   color:                        white;
   width:                        100%;
   padding-left:                 10px;
}
/* participant management */
.participants-table-header th {
   font-size:                    .7em;
   padding-left:                 5px;
}
.participants-table-row {
   font-size:                    .7em;
}
.participants-table-row:nth-child(even) td:not(:first-child) {
   background-color:             #eee;
}
.participants-table-row td {
   margin-left:                  3px;
   padding:                      3px;
}
.participants-table-row td:nth-child(n+3):nth-child(-n+20) {
   border-left:                  solid 1px gray;
   padding-left:                 5px;
}
/*
.participant-edit-button, .participant-delete-button {
   padding:                      2px;
   margin-right:                 3px;
   background-color:             black;
   color:                        white;
   text-align:                   center;
   cursor:                       pointer;
   display:                      inline-block;
   margin:                       2px;
}
.participant-add-button {
   background-color:             black;
   color:                        white;
   width:                        140px;
   margin-left:                  40px;
   text-transform:               uppercase;
   text-align:                   center;
   font-size:                    .7em;
   line-height:                  3;
   cursor:                       pointer;
}
*/
.participant-add-button, .participant-edit-button, .participant-delete-button, .participant-reset-button {
   font-size:                    1.2em;
   color:                        #28c2e6;
   text-align:                   center;
   cursor:                       pointer;
   display:                      inline-block;
}

.modal-participant-edit-field {
   text-align:                   left;
}
input[type=date].form-control.modal-participant-input {
   line-height:                  1;
}
input.modal-participant-input:invalid {
  background-color:              #fff0f0;
}


/***** admin testing  *****/
.testing-panel-area {
   margin-top:                   40px;
   padding-bottom:               20px;
   display:                      flex;
   align-items:                  stretch;
}
.testing-right-panel, .testing-left-panel {
   background-color:             #eef;
   padding:                      10px;
   vertical-align:               top;
}
.testing-computed-value, .testing-computed-value-narrow {
   margin:                       10px;
   padding:                      5px;
   border:                       2px solid lightgray;
   font-style:                   italic;
}
.testing-computed-value {
   width:                        300px;
}
.testing-computed-value-narrow {
   width:                        150px;
}
#state {
   font-size:                    12px;
   white-space:                  pre;
   word-wrap:                    break-word;
   font-family:                  monospace;
}
.testing-form-section {
   margin-top:                   20px;
}
.testing-form-section-header {
}
.testing-form-action {
   color:                        #28C5E6;
   margin-left:                  20px;
   cursor:                       pointer;
}
.testing-input-area {
   font-size:                    1em;
   margin-left:                  20px;
}
.testing-input-select {
   font-size:                    1em;
   padding:                      10px;
}
.testing-input, .testing-input-narrow  {
   font-size:                    1em;
   padding:                      10px;
   margin:                       10px;
}
.testing-input-narrow {
   width:                        150px;
}
.testing-radio-element {
   cursor:                       pointer;
}
.testing-radio-button {
   height:                       20px;
   width:                        20px;
   border-radius:                12px;
   border:                       solid black 2px;
   display:                      inline-block;
   vertical-align:               middle;
   margin:                       10px;
}
.testing-tracking-section {
   border:                       2px solid lightgray;
   margin-top:                   30px;
   padding:                      5px;
}
#testing-tracking-week-date {
   padding:                      8px;
   font-size:                    1em;
}
.testing-tracking-results-table {
   border:                       solid lightgray 1px;
   font-size:                    .7em;
}
.testing-tracking-results-table thead th {
   width:                        40px;
}
.testing-tracking-results-table tbody td {
   text-align:                   center;
}
.testing-tracking-results-table tbody th {
   text-align:                   right;
}
.testing-tracking-results-table tbody tr {
   border-top:                   solid lightgray 1px;
}
.testing-tracking-results-table tbody label {
}
/******** module content */

.dashboard-module-row, .dashboard-section-row {
   margin:                       auto;
   display:                      flex;
   justify-content:              space-around;
   flex-wrap:                    wrap;
   align-items:                  flex-start;
}
.blue-band {
   background-color:             #dcf5fa;
}
.turquoise-band {
   background-color:             #28c5e6;
}
.turquoise-border {
   border:                       solid 2px #28c5e6;
}

/***** dashboard */
.dashboard-module-box, .tracking-module-box {
   margin:                       20px auto;
   width:                        285px;
   text-align:                   center;
   background-color:             white;
}
.dashboard-module-box {
   margin-top:                   20px;
   border:                       solid 3px #442769;
   padding:                      10px;
   margin-bottom:                20px;
}
.dashboard-module-box-title {
   font-family:                  museo-slab;
   font-size:                    .8em;
   color:                        #442769;
}
.dashboard-module-icon  {
}
.dashboard-module {
   display:                      inline-block;
   width:                        25%;
}
.dashboard-accordion-title-box {
   font-size:                    .8em;
   font-style:                   italic;
   height:                       40px;
   line-height:                  40px;
   padding-left:                 10px;
}
.dashboard-lesson {
   margin-top:                   5px;
   font-size:                    .7em;
}
.dashboard-lesson a {
   vertical-align:               top;
   text-decoration:              none;
}
.visit-checkmark {
   display:                      inline-block;
}
.visit-checkmark-hide {
   visibility:                   hidden;
}

.module-content-link, .module-lesson-link {
   text-decoration:              none;
}
.dashboard-section-row, .dashboard-lesson-list {
   font-size:                    .7em;
}
.dashboard-section-icon {
   display:                      inline-block;
   cursor:                       pointer;
}
.dashboard-lesson-list-area {
   
}
.dashboard-lesson-list {
   list-style:                   none;
   padding-left:                 3px;
}

@media (max-width: 1023px) {
   .dashboard-accordion-title-box {
      font-size:                    1.2em;
      height:                       50px;
      line-height:                  50px;
   }
   .dashboard-module-box-title {
      font-size:                    1.4em;
   }
   .dashboard-module-icon  {
      width:                        250px;
      margin:                       auto;
   }
   .dashboard-module-icon  img {
      width:                        100%;
   }
   .dashboard-lesson {
      font-size:                    1.1em;
   }
   .dashboard-module-row, .dashboard-section-row {
      margin:                       0 auto;
   }
   .dashboard-module-box, .tracking-module-box {
      width:                        80%;
   }
}
/****** Lessons ****/
.dynkids-lesson-h1 {
   font-family:                  museo-slab, serif;
   /* font-style:                   normal; */
   font-weight:                  500;
   font-size:                    1em;
   line-height:                  0;
   display:                      inline;
   color:                        #442769;
}
.dynkids-lesson-ol {
   margin-left:                  40px;
}
.dynkids-lesson-ol li {
   margin-top:                   10px;
}
ol.right-paren-alpha-list, ol.right-paren-numeric-list {
  counter-reset:                 list;
}
ol.right-paren-alpha-list > li, ol.right-paren-numeric-list > li {
  list-style:                    none;
  margin-top:                    20px;
}
ol.right-paren-alpha-list > li > ol, ol.right-paren-numeric-list > li > ol{
  margin-left:                   40px;
}
ol.right-paren-alpha-list > li:before {
  content:                       counter(list, lower-alpha) ") ";
  counter-increment:             list;
}
ol.right-paren-numeric-list > li:before {
  content:                       counter(list, decimal) ") ";
  counter-increment:             list;
}

.lesson-heading, .lesson-heading-icon, .recipe-heading {
   display:                      inline-block;
}
.lesson-heading {
}
.recipe-heading, .resource-heading {
   vertical-align:               top;
   margin-top:                   20px;
}
.lesson-heading-icon {
   padding:                      20px 10px 10px 0;
}
.lesson-banded-graphic {
   border-top:                   solid 10px #442769;
   border-bottom:                solid 10px #442769;
   background-color:             #E8F8FC;
   color:                        #442769;
   font-family:                  museo-slab, serif;
}
.lesson-graphic {
   display:                      flex;
   flex-wrap:                    wrap;
   justify-content:              space-around;
   align-items:                  center;
}
.lesson-graphic .lesson-graphic-text {
   display:                      inline-block;
}
.lesson-graphic-heading {
   /* width:                        200px; */
   text-align:                   center;
   padding:                      15px;
   vertical-align:               top;
}
.lesson-graphic-heading h1 {
   line-height:                  1;
}
.lesson-graphic-text  {
   max-width:                    500px;
}
.lesson-graphic-graphic img {
   width:                        100%;
}
.lesson-family {
   width:                        100%;
   text-align:                   center;
}
.lesson-family img {
   width:                        100%;
}
blockquote {
   color:                        #442769;
   font-style:                   italic;
   /* margin:                       0 5px 0 5px; */
}
blockquote footer {
   text-align:                   right;
}
.big-lead-in {
   font-size:                    1.5em;
   font-weight:                  bold;
   margin-right:                 5px;
   line-height:                  .7;
}
.dynkids-pa-highlight {
   color:                        #442769;
   font-size:                    1.1em;
   font-weight:                  bold;
}
p.dynkids-headed-list, h2.dynkids-headed-list, h3.dynkids-headed-list {
   margin-bottom:                0;
}
ul.dynkids-headed-list, ol.dynkids-headed-list {
   margin-top:                   0;
}
.nutition-label img {
   display:                      inline-block;
   width:                        220px;
}
/****** survey styles */
/* see dynkids-survey.css */

/****** quiz styles */
.dynkids-quiz {
   margin-top:                   20px;
   margin-bottom:                20px;
   border-top:                   solid gray 1px;
   padding-top:                  10px;
}
.dynkids-quiz-question {
   margin-top:                   50px;
}
.dynkids-quiz-question-text {
   font-size:                    1.2em;
}
.dynkids-quiz-choice-list {
   margin-left:                  20px;
}
.dynkids-quiz-choice, .dynkids-quiz-multi-choice {
   margin-top:                   10px;
   padding:                      10px 40px 10px 50px;
   position:                     relative;
}
.dynkids-quiz-choice:not(.answered):hover,
.dynkids-quiz-multi-choice:not(.answered):hover {
   background-color:             darkgray;
}
.dynkids-quiz-choice:not(.answered),
.dynkids-quiz-multi-choice:not(.answered) {
   cursor:                       pointer;
}
.dynkids-quiz-choice:not(.answered),
.dynkids-quiz-multi-choice:not(.answered) {
   background-color:             lightblue;
}
.dynkids-quiz-choice.answered, .dynkids-quiz-multi-choice.answered {
   background-color:             lightgray;
}
.dynkids-quiz-choice.answered.dynkids-quiz-correct-ans.chosen,
.dynkids-quiz-multi-choice.answered.dynkids-quiz-correct-ans.chosen {
   color:                        white;
   font-weight:                  bold;
   background-color:             lightgreen;
}
.dynkids-quiz-choice.answered.dynkids-quiz-correct-ans:not(.chosen),
.dynkids-quiz-multi-choice.answered.dynkids-quiz-correct-ans:not(.chosen) {
   color:                        darkgreen;
   font-weight:                  bold;
}
.dynkids-quiz-choice.answered.chosen:not(.dynkids-quiz-correct-ans),
.dynkids-quiz-multi-choice.answered.chosen:not(.dynkids-quiz-correct-ans) {
   background-color:             pink;
   color:                        white;
   font-weight:                  bold;
}
.dynkids-quiz-choice.answered:not(.chosen):not(.dynkids-quiz-correct-ans),
.dynkids-quiz-multi-choice.answered:not(.chosen):not(.dynkids-quiz-correct-ans) {
   background-color:             lightgray;
   color:                        gray;
}
.dynkids-quiz-question-explanation {
   margin-top:                   20px;
   padding:                      10px 10px 10px 30px;
   background-color:             #eef;
}
.incorrect-choice-x, .correct-choice-check, .chosen-check {
   height:                       15px;
   width:                        15px;
   position:                     absolute;
   top:                          5px;
   right:                        5px;
   margin-right:                 10px;
}
.incorrect-choice-x::before {
   content:                      "X";
}
.correct-choice-check::before, .chosen-check::before {
   content:                      "\2713\0020";
   /* other possible check mark choices
   content:                      "\2714\0020";
   content:                      "\2611\0020";
   */
}

/***** certificates **/
.certificate-bg-top, .certificate-bg-bottom {
   width:                        100%;
   height:                       50%;
}
.certificate-bg-top {
   background-image:             url(/images/certificate-top-bg-image.png); 
   /* background-color:             #44256b;    /* purple */
}
.certificate-bg-bottom {
   background-color:             #39619e;
}
.certificate-inset {
   position:                     absolute;
   top:                          .75in;
   left:                         .75in;
   height:                       7in;
   width:                        9.5in;
   background-color:             white;
   margin-left:                  auto;
   margin-right:                 auto;
}
.certificate-logo {
   margin-left:                  auto;
   margin-right:                 auto;
   margin-top:                   .3in;
}
.certificate-logo {
   width:                        5.2in;
}
.certificate-logo img {
   width:                        100%;
}
.certificate-left-text, .certificate-right-module-logo {
   display:                      inline-block;
}
.certificate-left-text {
   width:                        60%;
   text-align:                   center;
   font-size:                    28px;
   font-weight:                  bold;
   padding:                      .1in;
   vertical-align:               top;
   margin-top:                   .15in;
}
.certificate-participant-name {
   color:                        #28C5E6;    /* turquoise */
   line-height:                  2;
   font-size:                    40px;
   text-transform:               uppercase;
}
.certificate-right-module-logo {
   width:                        36%;
}
.certificate-right-module-logo img {
   width:                        100%;
}
.certificate-top-left-finial,
.certificate-top-right-finial,
.certificate-bottom-left-finial,
.certificate-bottom-right-finial {
   position:                     absolute;
   height:                       .27in;
   width:                        .27in;
}
.certificate-top-left-finial {
   top:                          .15in;
   left:                         .15in;
   border-left:                  solid black 8px;
   border-top:                   solid black 8px;
}
.certificate-top-right-finial {
   top:                          .15in;
   right:                        .15in;
   border-right:                 solid black 8px;
   border-top:                   solid black 8px;
}
.certificate-bottom-left-finial {
   bottom:                       .15in;
   left:                         .15in;
   border-left:                  solid black 8px;
   border-bottom:                solid black 8px;
}
.certificate-bottom-right-finial {
   bottom:                       .15in;
   right:                        .15in;
   border-right:                 solid black 8px;
   border-bottom:                solid black 8px;
}
.certificate-print-button, .dynkids-modal-print-button {
   position:                     absolute;
   right:                        .7in;
   top:                          .06in;
   background-color:             white;
   color:                        #28C5E6;    /* turquoise */
   text-align:                   center;
   width:                        1in;
   padding-left:                 .1in;
   padding-right:                .1in;
   border-radius:                .2in;
   cursor:                       pointer;
   font-size:                    40px;
   line-height:                  1.2;
   padding-top:                  .04in;
   padding-bottom:               .05in;
}
.dynkids-modal-print-button {
   box-shadow:                   2px 2px 2px 1px #28C5E6;    /* turquoise */
}
/***** printable **/
.letter-size-page {
   width:                        11in  !important;
   height:                       8.5in !important;
   font-size:                    107%  !important;
   overflow:                     hidden;
   page-break-after:             always;
}

/***** modals **/   /* https://css-tricks.com/considerations-styling-modal/ */
.dynkids-modal {
   position:                     fixed;
   top:                          0;
   left:                         50%;
   transform:                    translate(-50%, 0);
   z-index:                      1010;
}
.dynkids-modal.closed {
   display:                      none;
}
.dynkids-modal-overlay {
   z-index:                      1000;
   background-color:             gray;
   opacity:                      .7;
   position:                     fixed;
   top:                          0;
   left:                         0;
   width:                        100%;
   height:                       100%;
}
.dynkids-modal-dismiss::after {
   content:                      "\2715";
}
.dynkids-modal-dismiss {
   position:                     absolute;
   top:                          15px;
   right:                        15px;
   font-size:                    40px;
   line-height:                  1;
   cursor:                       pointer;
   text-shadow:                  1px 1px 2px #28C5E6;    /* turquoise */ 
   color:                        #28C5E6;    /* turquoise */
   font-weight:                  bold;
}
#printable-area {
   background-color:             white;
   padding:                      30px;
}
#printable-area-content {
}
.dynkids-printable-border {
   border:                       5px solid #eee;
   padding:                      10px;
}

@media screen {
   #printable-area-content .dynkids-printable {
      height:                    calc(100vh - 100px);
      overflow-y:                auto;
   }
}

@media print {
   html, body {
      height:                    100vh;
      margin:                    0 !important; 
      padding:                   0 !important;
      overflow:                  hidden;
   }
   body {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust:        exact !important;
   }
   body * {
      visibility:                hidden;
   }
   .no-print {
      display:                   none !important;
   }
   .active-printable, .active-printable * {
      visibility:                visible;
   }
   .active-printable {
      position:                  absolute;
      top:                       0;
      left:                      0;
      transform:                 none;
      margin:                    0;
   }
   #printable-area {
      break-after:               avoid;
      font-size:                 12px;     
   }
   .print-page-break {
      clear:                     both;
      page-break-before:         always;
      display:                   block;
   }
}

/****** Tracking and Goals ***/
.tracking-h1 {
   font-size:                    1em;
}
.tracking-heading {
   width:                        150px;
}
.tracking-module-icon  {
   width:                        100px;
   text-align:                   center;
   margin-left:                  auto;
   margin-right:                 auto;
}
.tracking-module-icon img {
   width:                        100%;
}
.tracking-module-box-title {
   font-family:                  museo-slab;
   /* font-size:                    .7em; */
   line-height:                  1.2;
   color:                        #442769;
}
.tracking-modules-box, .tracking-weekdays-box {
   display:                      flex;
   flex-wrap:                    nowrap;
   justify-content:              center;
}
.tracking-modules-box {
   max-width:                    480px;
   margin-bottom:                20px;
}
.tracking-weekdays-box {
   margin-top:                   10px;
}
.tracking-weekday, .tracking-day-status {
   width:                        60px;
   text-align:                   center;
   box-sizing:                   border-box;
}
.tracking-day-status {
   display:                      inline-block;
}
.tracking-weekday.day-selectable:hover, .tracking-weekday.day-selected {
   border:                       1px solid #28C5E6; /* turquoise */
}
.tracking-weekday.day-selectable, .tracking-weekday.day-selected {
   cursor:                       pointer;
}
.tracking-weekday-label {
   font-size:                    .8em;
   text-transform:               uppercase;
}
.tracking-weekday-icon {
   
}
.tracking-section {
   border:                       2px solid lightgray;
   margin-top:                   30px;
}
.tracking-section-header {
   background-color:             #442769;
   padding:                      10px;
}
.tracking-section-header h2 {
   margin:                       0;
}
.tracking-section-body {
   margin:                       20px 10px;
}
.tracking-goal-statement {
   text-align:                   center;
   margin-top:                   30px;
   font-family:                  museo-slab, serif;
   color:                        rgb(88, 120, 170)
}
.track-now-button {
   margin:                       20px auto;
   font-family:                  museo-slab, serif;
   text-align:                   center;
   width:                        6em;
   height:                       6em;
   color:                        white;
   background-color:             #28C5E6; /* turquoise */
   border-radius:                3em;
}
.track-now-button  div {
   padding:                      15px 5px;
   line-height:                  1.3;
   font-size:                    1.2em;
}
.track-now-button  img {
   width:                        30%;
   margin-top:                   5px;
}
.tracking-week-nav-box {
   margin-top:                   30px;
   width:                        100%;
   border:                       solid #aaa 2px;
}
.week-nav-button, .week-nav-dates {
   display:                      inline-block;
}
.week-nav-button {
   margin:                       5px 10px;
   background-color:             #28C5E6;
   color:                        white;
   font-size:                    1.2em;
   line-height:                  1.2;
   padding:                      0 5px;
   cursor:                       pointer;
}
.week-nav-dates {
   color:                        #888;
   /* width:                        200px; */
   font-size:                    .8em;
   vertical-align:               top;
   padding-top:                  5px;
}
.feedback-bar {
   fill:                         lightblue;
}
.feedback-goal-line {
   stroke:                       #28C5E6; /* turquoise */
   stroke-width:                 2;
}
.feedback-scale-text {
}
.feedback-day-bar-text {
   font-family:                  monospace sans-serif;
   text-transform:               uppercase;
   fill:                         gray;
   font-size:                    16px;
}
.feedback-goal-rect {
   fill:                         #442769;
}
.tracking-legend-section {
   display:                      flex;
   justify-content:              space-around;
   flex-wrap:                    wrap;
   padding:                      10px;
   background-color:             #dcf5fa;    /* light blue */
   margin-left:                  auto;
   margin-right:                 0;
}
.tracking-legend-icon {
   display:                      inline-block;
   margin-top:                   5px;
}
.tracking-legend-text {
   display:                      inline-block;
   vertical-align:               top;
}