body {
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  background-color: rgb(10, 37, 82);
  font-family: 'Fira Sans', sans-serif;
}
*, *::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
::-webkit-scrollbar, scrollbar-width {
display: none;
}
#bleAppWrapper {
  min-width: 100vw;
  min-height: 100vh;
  position: fixed;
  background-color: rgb(232, 228, 226);
}
.outOfBound {
  transition: transform 200ms !important;
  transform: translateX(100vw);
}
input:focus, textarea:focus, select:focus, button:focus {
    outline: none;
}
img.imgFull {
  width: 100%;
}
.disableClick {
  pointer-events: none;
}
/*************************
* U I   E L E M E N T S *
*************************/
.lightButton {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  color: #0a2552;
  background-image: linear-gradient(to bottom, #F8F8F8 0%, #DEDEDE 100%);
  border: none;
  padding: 0.5em;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0px 0.15em 0px #bababa, 0em 0.3em 0.3em rgba(4,16,36,0.5);
}
.lightButton:active {
  transform: translateY(0.15em);
  box-shadow: 0px 0em 0px #bababa;
}
.rounded {
  border-radius: 5em;
}
/*************************
* M E N U   L A Y O U T *
*************************/
#topBarWrapper {
    height: 10vh;
    overflow: hidden;
    position: fixed;
    width: 100vw;
    background-color: #0a2552;
    z-index: 2;
}
#logoBar, #hamMenu {
  max-height: 10vh;
}
#menuItems ul {
  text-align: right;
  margin: 0;
}
#menuItems li {
  line-height: 1em;
  font-family: 'Fira Sans', sans-serif;
  display: inline-block;
  color: white;
  padding: 0 2.5em;
  cursor: pointer;
}
#menuItems li img {
  height: 1.5em;
  width: auto;
}
/***************************
* L O G I N   L A Y O U T *
***************************/
#loginWrapper {
    z-index: 400;
    min-height: 100vh;
    width: 100vw;
    background-color: #0a2552;
    position: fixed;
    padding-top: 10vh;
    /* display: none; /*DEBUG*/ */
}
#loginForm form input {
  margin-bottom: 7vh;
  width: 100%;
}
#signup {
  color: white;
  font-size: 1em;
  text-align: center;
}
#signup span {
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}
#signup span:hover, #signup:active {
  text-decoration: none;
}
#loginForm form input, #registerForm form input {
  margin-bottom: 1vh;
  width: 100%;
  padding: 0.2em;
  font-size: 1.2em;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 0.2em solid white;
  color: white;
  transition: border-color 750ms;
}
#loginForm form input::placeholder, #registerForm form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}
#loginForm form input:focus, #registerForm form input:focus {
  border-color: rgb(0, 188, 212);
}
.validationMessage {
  display: block;
  color: rgb(0, 188, 212) !important;
  min-height: 0.8em;
  font-size: 0.8em;
  color: white;
  margin-bottom: 4vh;
}
.validationMessage.error {
  color: rgb(244, 67, 54) !important;
}
.validationError {
  border-color: rgb(244, 67, 54) !important;
}
.validationOkay {
  border-color: rgb(76, 175, 80) !important;
}
/*********************************************
* M O D E   S E L E C T I O N   L A Y O U T *
********************************************/
#modeSelectionWrapper {
  position: fixed;
  top: 10vh;
  width: 100vw;
  height: 90vh;
  overflow-y: scroll;
  background-color: rgb(232, 228, 226);
}
#modeSelectionWrapper h2 {
  font-family: 'Lato', sans-serif;
  font-size: 3em;
  color: rgb(10, 37, 82);
}
.modeCard {
  background-image: linear-gradient(to bottom, #F8F8F8 0%, #DEDEDE 100%);
  border: none;
  margin: 0 10vh 5vh 0;
  cursor: pointer;
  overflow: hidden;
  /* box-shadow: 0em 0.15em 0em rgb(0, 188, 212); */
  box-shadow: 0em 0.1em 0.3em rgba(4,16,36,0.35);
  border-radius: 0.3em;
}
.modeCard:hover {
  border: none;
  transition: all 250ms;
  /* box-shadow: 0em 0.3em 1em rgb(0, 188, 212); */
  box-shadow: 0em 0.2em 0.7em rgba(255, 255, 255, 0.7);
  transform: scale(1.02) translateY(-0.1em);
}
.modeCard:active {
  border: none;
  transition: all 250ms;
  /* box-shadow: 0em 0.1em 0.5em rgba(0, 188, 212, 1); */
  box-shadow: 0em 0.1em 0.2em rgba(255, 255, 255, 0.3);
  transform: scale(0.98) translateY(0.1em);
}
.modeCard img {
  width: 100%;
  height: auto;
  display: block;
}
/*********************************************
* M O D E   S E L E C T I O N   L A Y O U T *
********************************************/
#reviewDataWrapper {
  position: fixed;
  top: 10vh;
  width: 100vw;
  height: 90vh;
  overflow-y: scroll;
  background-color: rgb(232, 228, 226);
}
#reviewDataWrapper h2 {
  font-family: 'Lato', sans-serif;
  font-size: 3em;
  color: rgb(10, 37, 82);
}
#dataReviewMenu {
  background-color: rgb(10, 37, 82);
  height: 8vh;
}
.dataReviewItem {
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}
.dataReviewItem.active {
  border-bottom: 0.4em solid white;
}
#dataReviewMain {
  height: 69vh;
  flex-direction: column;
}
#reviewSearch img {
  width: 10%;
  height: auto;
  margin-bottom: -2.5%;
}
#reviewSearch input {
  margin-top: 1.5vh;
  width: 90%;
  padding: 0.2em;
  font-size: 1.2em;
  background: none;
  border: none;
  border-bottom: 0.2em solid rgb(10, 37, 82);
  color: rgb(10, 37, 82);
  transition: border-color 750ms;
}
#reviewSearch input::placeholder {
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
}
#reviewSearch input:focus {
  border-color: rgb(0, 188, 212);
}
#reviewMeasuresWrapper {
  overflow-y: scroll;
}
#allFiltered, #measureNotFound {
  color: #0a2552;
  font-family: 'Lato', sans-serif;
}
.reviewMeasureCard {
  background: white;
  padding: 1em;
  border-radius: 0.5em;
  margin-bottom: 1.8em !important;
  box-shadow: 0em 0.1em 0.3em rgba(4,16,36,0.35);
  cursor: pointer;
}
.selectedMeas {
  background: rgb(203, 231, 231);
}
.reviewMeasureCard p {
  font-family: 'Lato', sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  color: #0a2552;
  margin: 0;
  text-transform: uppercase;
}
.reviewMeasureCard h4 {
  font-size: 1.1em;
  margin: 0.2em 0 0 0;
}
.reviewMeasureCard h4 img {
  height: 1.2em;
  width: auto;
  margin-bottom: -0.2em;
}
.reviewMeasureCard h4 span {
  color: #8eb2f1;
  font-size: 0.8em;
}
.more img {
  width: 50%;
}
.measOption img {
}
#reviewChartsWrapper {
  height: inherit;
}
#myReviewChartWrapper {
  background-color: rgba(255,255,255,1);
  border-radius: 0.5em;
  overflow: hidden;
  flex-grow: 1;
}
#reviewChartTitle {
  font-family: 'Lato', sans-serif;
  font-size: 2em;
  color: rgb(10, 37, 82);
  margin: 0 0 0.2em 0;
}
#reviewDecisionWrapper {
  height: 13vh;
  font-size: 1.4em;
}
#reviewDecisionWrapper button {
  border: none;
  color: #0a2552;
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 0.2em;
  box-shadow: 0em 0.1em 0.3em rgba(4,16,36,0.35);
}
#reviewDataDownload, #applyFilterByDate {
  background-image: linear-gradient(to bottom, rgb(139, 208, 208) 0%, rgb(103, 193, 193) 100%);
}
#closeFilterByDate {
  background: none;
  box-shadow: none !important;
}
#filterByDateReviewData, #resetFilterByDate, #selectAllReviewData, #unselectAllReviewData {
  /* background-image: linear-gradient(to bottom, #F8F8F8 0%, #DEDEDE 100%); */
  width: 13vh;
  background: none;
  box-shadow: 0 0 0 !important;
}
#calendarWrapper {
  height: inherit;
}
#calendarWrapper h3 {
  font-family: 'Lato', sans-serif;
  font-size: 2em;
  color: rgb(10, 37, 82);
  margin: 0 0 0.2em 0;
}
#calendarWrapper input {
  width: 100%;
  padding: 0.2em;
  font-size: 1.2em;
  background: none;
  border: none;
  border-bottom: 0.2em solid rgb(10, 37, 82);
  color: rgb(10, 37, 82);
  transition: border-color 750ms;
}
#calendarWrapper input:focus {
  border-color: rgb(0, 188, 212);
}
#calendarWrapper input::placeholder {
  color: rgba(0, 0, 0, 0.7);
  font-style: italic;
}
.myCalendar.pika-single {
  position: absolute !important;
  width: 100%;
  border: none;
  border-radius: 0.5em;
  font-family: 'Lato', sans-serif;
}
.myCalendar .pika-button {
  text-align: center;
}
.myCalendar .is-today .pika-button {
  color: rgb(0, 188, 212);
  font-weight: bold;
}
.myCalendar .is-selected .pika-button {
  background: rgb(10, 37, 82);
  box-shadow: 0 0 0;
}
.myCalendar .pika-title .pika-label {
  color: rgb(10, 37, 82);
}
.myCalendar .pika-select-month, .myCalendar .pika-select-year {
  cursor: default;
  pointer-events: none;
}
.myCalendar .pika-lendar {
  width: calc(100% - 16px);
}
/*******************************************
* M A I N   A C T I V I T Y   L A Y O U T *
******************************************/
#mainActivityWrapper {
  position: fixed;
  top: 10vh;
  width: 100vw;
  min-height: 90vh;
  background-color: rgb(232, 228, 226);
  border-left: 8.3vw solid #0a2552;
  border-right: 8.3vw solid #0a2552;
  /* display: none; /*DEBUG*/ */
}
#sideMenu {
  background-color: #0a2552;
}
#sideMenuLogo, #sideMenu > div {
  top: -13vh;
  margin-bottom: 2vh;
}
.sideCard {
  background-color: rgb(250, 250, 250);
  border-radius: 0.5em;
  box-shadow: 0em 0.1em 0em rgb(179,179,179), 0em 0.3em 0.5em rgba(4,16,36,0.5);
}
.sideCard h3 {
  font-family: 'Lato', sans-serif;
  color: #0a2552;
}
#graphPanel {
  height: 76vh;
}
#infoPanel .currentMeasure, #infoPanel .previousMeasure {
  margin-bottom: 0.5em;
  font-size: 0.8em;
}
#buttonPanel {
  height: 13vh;
  font-size: 1.4em;
}
#dataDecisionWrapper button, #liveActionsWrapper button, #submitNotesForSaveWrapper button, #submitNotesForDownloadWrapper button {
  border: none;
  color: #0a2552;
  font-size: 1.5em;
  cursor: pointer;
  border-radius: 0.2em;
  box-shadow: 0em 0.1em 0.3em rgba(4,16,36,0.35);
}
#saveData, #resumeMeasure, #yesNotesSave, #yesNotesDownload {
  background-image: linear-gradient(to bottom, rgb(139, 208, 208) 0%, rgb(103, 193, 193) 100%);
}
#discardData, #downloadData {
  /* background-image: linear-gradient(to bottom, #F8F8F8 0%, #DEDEDE 100%); */
  width: 13vh;
  background: none;
  box-shadow: 0 0 0 !important;
}
#pauseMeasure {
  background-image: linear-gradient(to bottom, rgb(247, 192, 110) 0%, rgb(246, 178, 77) 100%);
}
#stopMeasure {
  background-image: linear-gradient(to bottom, rgb(227, 99, 103) 0%, rgb(220, 53, 59) 100%);
}
#noNotesDownload, #noNotesSave {
  background-image: linear-gradient(to bottom, #F8F8F8 0%, #DEDEDE 100%);
}
#graphPanel h2 {
  font-family: 'Lato', sans-serif;
  font-size: 3em;
  color: rgb(10, 37, 82);
}
#graphPanel h3 {
  font-family: 'Lato', sans-serif;
  font-size: 2em;
  color: rgb(10, 37, 82);
  height: 10vh;
  margin-bottom: 0;
}
#sampleName {
  margin-bottom: 1vh;
  width: 80%;
  padding: 0.2em;
  font-size: 1.5em;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 0.2em solid rgb(10, 37, 82);
  color: rgb(10, 37, 82);
  transition: border-color 750ms;
}
#sampleName::placeholder {
  color: rgb(154, 136, 126);
  font-style: italic;
}
#sampleName:focus {
  border-color: rgb(0, 188, 212);
}
#startMeasureWrapper {
  padding: 0.5em 0;
}
#startMeasure {
  background-image: linear-gradient(to bottom, rgb(247, 192, 110) 0%, rgb(246, 178, 77) 100%);
  border: none;
  color: #0a2552;
  font-size: 1.5em;
  cursor: pointer;
  border-radius: 0.3em;
  box-shadow: 0em 0.1em 0.3em rgba(4,16,36,0.35);
}
#loadingIndicator {
  transition: width 200ms;
  width: 0;
  background-color: rgb(0, 188, 212);
  box-shadow: 0em -0.1em 0.2em rgba(0, 188, 212,1);
}
#myChartWrapper, #myNotesWrapper {
  height: 66vh;
  background-color: rgba(255,255,255,1);
  border-radius: 0.5em;
  overflow: hidden;
}
#myNotesWrapper textarea {
  width: 100%;
  height: 100%;
  border: none;
  padding: 1em;
  color: rgb(10, 37, 82);
  font-size: 1.3em;
}
/*****************************************************
* E X P E R I M E N T A L   S T U D Y   L A Y O U T *
****************************************************/
#experimentalStudyWrapper {
  position: fixed;
  top: 10vh;
  width: 100vw;
  height: 90vh;
  overflow-y: scroll;
  background-color: rgb(232, 228, 226);
}
#experimentalStudyWrapper h2 {
  font-family: 'Lato', sans-serif;
  font-size: 3em;
  color: rgb(10, 37, 82);
}
.studyCard {
  /* background-image: linear-gradient(to bottom, #F8F8F8 0%, #DEDEDE 100%); */
  background-image: linear-gradient(to bottom, rgb(247, 192, 110) 0%, rgb(246, 178, 77) 100%);
  border: none;
  color: #0a2552;
  font-size: 1.5em;
  padding: 1.5em;
  margin-bottom: 10vh;
  cursor: pointer;
  border-radius: 0.3em;
  box-shadow: 0em 0.1em 0.3em rgba(4,16,36,0.35);
}
.studyCard:hover {
  transition: all 250ms;
  /* box-shadow: 0em 0.1em 0.5em rgba(0, 188, 212, 1); */
  box-shadow: 0em 0.2em 0.7em rgba(255, 255, 255, 0.7);
  transform: scale(1.04) translateY(-0.1em);
}
.studyCard:active {
  transition: all 250ms;
  /* box-shadow: 0em 0.1em 0.5em rgba(0, 188, 212, 1); */
  box-shadow: 0em 0.1em 0.2em rgba(255, 255, 255, 0.3);
  transform: scale(0.98) translateY(0.1em);
}
/*****************************************
* D E V I C E   S T U D Y   L A Y O U T *
****************************************/
#deviceSelectionWrapper {
  position: fixed;
  top: 10vh;
  width: 100vw;
  height: 90vh;
  overflow-y: scroll;
  background-color: rgb(232, 228, 226);
}
#deviceSelectionWrapper h2 {
  font-family: 'Lato', sans-serif;
  font-size: 3em;
  color: rgb(10, 37, 82);
}
.deviceCard {
  background-image: linear-gradient(to bottom, #F8F8F8 0%, #DEDEDE 100%);
  border: none;
  margin: 0 10vh 5vh 0;
  cursor: pointer;
  overflow: hidden;
  /* box-shadow: 0em 0.15em 0em rgb(0, 188, 212); */
  box-shadow: 0em 0.1em 0.3em rgba(4,16,36,0.35);
  border-radius: 0.3em;
}
.deviceCard:hover {
  border: none;
  transition: all 250ms;
  /* box-shadow: 0em 0.3em 1em rgb(0, 188, 212); */
  box-shadow: 0em 0.2em 0.7em rgba(255, 255, 255, 0.7);
  transform: scale(1.02) translateY(-0.1em);
}
.deviceCard:active {
  border: none;
  transition: all 250ms;
  /* box-shadow: 0em 0.1em 0.5em rgba(0, 188, 212, 1); */
  box-shadow: 0em 0.1em 0.2em rgba(255, 255, 255, 0.3);
  transform: scale(0.98) translateY(0.1em);
}
.deviceCard img {
  width: 100%;
  height: auto;
  display: block;
}
/***************************
* M O D A L   L A Y O U T *
**************************/
#modalWrapper {
  position: fixed;
  z-index: 500;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.55);
}
#modalWrapper h4{
  margin-bottom: 0;
}
#modalWrapper p{
  margin-top: 0;
  padding-top: 0;
}
#modalWrapper button {
  margin: 1.33em auto;
}
#modalWrapper > div {
  margin-top: -10vh;
}
#alert {
  background-color: rgb(250, 250, 250);
  border-radius: 0.5em;
  box-shadow: 0em 0.3em 0.5em rgba(4,16,36,0.5);
}
/*************************************************
* F I X E S   F O R   L A Y O U T   I S S U E S *
************************************************/
/*FIX FOR DESKTOP AND TABLET*/
@media (min-width: 768px) {
      .desktopHidden {
        display: none;
      }
      .lightButton {
        padding: 0.3em;
      }
      #hamMenu {
        margin-left: 0;
      }
      .resizeLogo img {
        width: 70%;
        margin-left: 15%;
      }
      #graphPanel h3 {
        margin: 0;
      }
      #dataDecisionWrapper button, #liveActionsWrapper button, #submitNotesForSaveWrapper button, #submitNotesForDownloadWrapper button {
        align-self: center;
        vertical-align: middle;
      }
      #discardData, #downloadData, #filterByDataReviewData, #selectAllReviewData, #unselectAllReviewData {
        font-size: 1.2em !important;
      }
      #discardData img, #downloadData img, #filterByDataReviewData img, #selectAllReviewData img, #unselectAllReviewData img {
        width: 30%;
      }
}
/*FIX FOR MOBILE*/
@media (max-width: 768px) {
      .mobileHidden {
        display: none;
      }
      #topBarWrapper {
        /* border-radius: 0 0 1em 1em; */
      }
      #menuItems li {
        display: block;
        font-size: 1.4em;
        line-height: 3em;
        padding: 0;
      }
      #menuItems li img {
        height: 1.5em;
        margin-left: 0.5em;
      }
      #mainActivityWrapper {
        border: none;
      }
      #graphPanel {
        height: 76vh;
      }
      #myChartWrapper, #myNotesWrapper {
        height: 91.667vw;
      }
      #buttonPanel, #reviewDecisionWrapper {
        height: 13vh;
        font-size: 1.1em;
      }
      #dataDecisionWrapper button span, #reviewDecisionWrapper button span {
        display: none;
      }
      #dataDecisionWrapper img, #reviewDecisionWrapper img {
        width: 8vh;
        height: auto;
      }
      #deviceCards, #modeCards {
        flex-wrap: wrap;
        justify-content: center;
      }
      .deviceCard, .modeCard {
        margin-right: 0;
      }
}
/*****************************
* U I   A N I M A T I O N S *
****************************/
.hidden {
  display: none;
}
.transparent {
  opacity: 0;
}
.animate {
  transition: all 600ms;
}
.blur {
  filter: blur(0.3em);
  overflow: hidden;
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; }
}
.popIn {
  -webkit-animation-name: popIn;
  animation-name: popIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
@keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(1.08, 1.08, 1.08);
    transform: scale3d(1.08, 1.08, 1.08); }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
}
.blink {
    -webkit-animation-name: blink;
    animation-name: blink;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@keyframes blink {
    0% {
      opacity: 1; }
    25% {
      opacity: 0; }
    50% {
      opacity: 1; }
    75% {
      opacity: 0; }
    100% {
      opacity: 1; }
}
.holdActiveStart {
    -webkit-animation-name: holdActive;
    animation-name: holdActive;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@keyframes holdActive {
    0% {
      background-color: rgb(255, 255, 255); }
    25% {
      background-color: rgb(210, 224, 249); }
    50% {
      background-color: rgb(255, 255, 255); }
    75% {
      background-color: rgb(210, 224, 249); }
    100% {
      background-color: rgb(255, 255, 255); }
}