html, body, * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Fira Sans', sans-serif;
}

.bodyClass {
    padding-top: 45px;
}

body, p {
    color: #424242;
}

h1, h2, h3, h2 a {
    color: #0d355a;
    font-family: 'Lora', serif;
}

h1 {
    margin: .6em 0;
}

h2 {
    margin: 0 0 1em;
}

p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.spnQuestionBar {
    font-size: 14pt;
}

table {
    width: 100%;
}

.tdHr {
    font-size: 10pt;
}

.tdCal {
    font-size: 8pt;
}

.videoMuscleName {
    font-size: 10pt;
    font-weight: bold;
    color: maroon;
}

.wrgLabelHide {
    font-size: 14pt;
    color: blue;
    background-color: blue;
}

.wrgLabelShow {
    font-size: 24pt;
    color: yellow;
    background-color: blue;
}

.mapnodemaster {
    text-decoration: underline;
}

.tipImage {
    display: none;
}

.swiperChecklistExplanation {
    text-align: left;
    background-color: yellow;
    color: black;
    padding-left: 5px;
}

.dayCountWrong {
    background-color: pink;
    color: black;
    padding: 0px 8px 0px 8px;
}

.dayCountRight {
    background-color: lightgreen;
    color: black;
    padding: 0px 8px 0px 8px;
}

.closeBtn {
    margin-top: 20px;
}
button {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    background: initial;
}

path {
    transition: .2s ease;
}

.cf:after {
    content: '';
    display: table;
    clear: both;
}

.wrapper {
    width: 100%;
    padding: 0 10px;
    max-width: 840px;
    margin: 0 auto;
}

.wrapperMobile {
    width: 100%;
    padding: 0 10px;
    max-width: 370px;
    margin: 0 auto;
}

.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 9999;
    background: #d2f1ed; }

    .header .wrapper {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        justify-content: space-between;
        height: 100%; }

.nav {
    display: block;
    margin-left: auto;
}

.menu {
    margin: 10px;
}

.menu a {
    display: block;
    padding: 5px 10px;
    box-shadow: none;
}

.menu-item {
    list-style: none;
}

@media (max-width: 900px) {
    .nav {
        text-align: center;
    }
    .menu {
        margin: 0 0 80px;
    }
    .menu-item {
        font-size: 22px;
        font-weight: 300;
    }
    .menu-item a {
        padding: 10px 0;
    }
}

.hamburger__container {
    display: block;
    float: right;
    padding: 1rem;
    margin: -1rem;
    cursor: pointer;
    margin-left: auto;
}

.hamburger {
    width: 1.20rem;
    height: 0.9375rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: rotate(0deg); }
.hamburger i {
    display: block;
    position: absolute;
    width: 100%;
    height: 0.1875rem;
    background: #424242;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger i:nth-of-type(1) {
    top: 0;
    transform-origin: left center; }
.hamburger i:nth-of-type(2) {
    top: 0.375rem;
    transform-origin: left center; }
.hamburger i:nth-of-type(3) {
    top: 0.75rem;
    transform-origin: left center; }
.hamburger.open i:nth-of-type(1) {
    transform: rotate(45deg) translate(0, -0.0625rem); }
.hamburger.open i:nth-of-type(2) {
    opacity: 0;
    width: 0%; }
.hamburger.open i:nth-of-type(3) {
    transform: rotate(-45deg) translate(0, 0.0625rem); }

.code {
    font-weight: 400;
    font-family: monospace,monospace;
    padding: 0 8px;
    background: #e0e0e0;
}

.content {
    padding: 0px 5px;
}

#content {
    opacity: 0.7;
}

.details {
    display: inline-block;
    background: #f3f3f3;
    color: #9c9c9c;
    margin: 1em 0;
    font-weight: 300;
    padding: 6px;
}

.details a {
    font-weight: 400;
    color: #9c9c9c;
}
.details a:hover {
    color: #424242;
}

.footer {
    background: #d8d8d2;
    padding: 25px 0 20px;
}

.footer p {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    font-size: 18px;
    color: #616161;
}

.footer .coffee {
    font-size: 26px;
    margin: 0 5px;
}

.footer p svg {
    width: 22px;
    height: 20px;
    margin: 0 7px;
}

.footer p a {
    display: flex;
    box-shadow: none; }

    .footer p a:hover svg path[fill="#424242"] {
        fill: #fff; }

.footer p a svg {
    width: 120px;
    height: 100%;
}


@media (max-width: 10000px) {
    html.noscroll {
        overflow: hidden;
    }

    body.noscroll {
        overflow: visible;
        height: 100%;
    }

    .logo, .hamburger__container {
        position: relative;
        z-index: 9999;
        background: rgba(210,241,237, 0.3);
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: #d2f1ed;
        opacity: 0;
        transition: opacity .3s ease;
    }

    .open {
        opacity: 1;
        right: 0;
    }

    .nav__container {
        position: absolute;
        padding: 80px 20px 30px;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* These 2 below are all the magic: */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 10000px) {

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

    .mobile {
        display: none;
    }
}

.loginInput {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 24px;
  }

.buttonLogin {
    /* position: relative; */
    border: none;
    font-size: 18px;
    color: #FFFFFF;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.buttonLogin50 {
    /* position: relative; */
    border: none;
    font-size: 18px;
    color: #FFFFFF;
    padding: 10px;
    width: 49%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.buttonSVG {
    /* position: relative; */
    border: none;
    font-size: 2pt;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
    height: 60px;
}

.buttonSVGHighlighter {
    /* position: relative; */
    border: none;
    font-size: 18pt;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.buttonAnswer {
    /* position: relative; */
    border: none;
    font-size: 18pt;
    color: #FFFFFF;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.buttonAnswerVideo {
    /* position: relative; */
    border: none;
    font-size: 48pt;
    color: #FFFFFF;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.buttonAnswerSingle {
    /* position: relative; */
    border: none;
    font-size: 48pt;
    color: #FFFFFF;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-top: 50px;
}

.redBg {
    background-color: red;
}

.btnAnswerHide {
    /* position: relative; */
    border: none;
    font-size: 18pt;
    color: white;
    background-color: blue;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.btnAnswerShow {
    color:yellow;
}

.btnAnswerGreen {
    /* position: relative; */
    border: none;
    font-size: 18pt;
    color: white;
    background-color: green;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.btnAnswerPink {
    /* position: relative; */
    border: none;
    font-size: 18pt;
    color: black;
    background-color: pink;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.orangeHighlighter {
    background-color:white;
    color:orange;
}

.blueHighlighter {
    background-color:white;
    color:blue;
}

.redHighlighter {
    background-color:white;
    color:red;
}

.orangeBg {
    background-color:orange;
}

.orangeSVGBg {
    background-color:orange;
    color:orange;
}

.redSVGBg {
    background-color:red;
    color:red;
}

.purpleBg {
    background-color:purple;
}

.oliveBg {
    background-color:olive;
}
.oliveSVGBg {
    background-color:olive;
    color:olive;
}

.yellowBg {
    background-color:yellow;
}

.dodgerblueBg {
    background-color:dodgerblue;
}
.blueBg {
    background-color:blue;
}

.blueSVGBg {
    background-color:blue;
    color:blue;
}

.greenBg {
    background-color:green;
}

.lblQuestion {
    font-size:24pt;
    color: black;
}

.lblQuestionVideoSlides {
    font-size:54pt;
    color: black;
}

.icongrey {
    color: grey;
}

.icongreen {
    color: green;
}

.iconred {
    color: red;
}

.iconBlue {
    color: blue;
}

.iconOrangeRed {
    color: orangered;
}

.buttonHeatMap {
    /* position: relative; */
    border: none;
    font-size: 18px;
    color: #FFFFFF;
    padding: 10px;
    width: 100%;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 95%; /* Could be more or less, depending on screen size */
    max-width: 830px;
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 2px;
    font-size: 17px;
    width: 25%;
  }

  .tablink100 {
    color: black;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 2px 14px 2px;
    font-size: 17px;
    width: 100%;
  }

  .mode100 {
    color: black;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 2px 14px 2px;
    font-size: 17px;
    width: 100%;
  }


  /* Style the tab content (and add height:100% for full page content) */
  .tabcontent {
    /* display: none; */
    padding: 25px 1px 50px 1px;
    height: 100%;
  }

  /******  Accordion  ******/
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-bottom: 5px;
  }
  
  
  .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .accordion.active:after {
      content: "\2212";
    }
  
  .panel {
    padding: 0 5px;
    background-color: white;    
    overflow: hidden;
    height: 0px;
    transition: height 0.2s ease-out;
  }
  /* end accordion */
  
  .YouTubeContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}