@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
/*!
 * reveal.js
 * http://lab.hakim.se/reveal-js
 * MIT licensed
 *
 * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
 */
/*********************************************
 * RESET STYLES
 *********************************************/
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
.reveal b, .reveal u, .reveal center,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
  display: block; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; }

body {
  position: relative;
  line-height: 1;
  background-color: #fff;
  color: #000; }

html:-webkit-full-screen-ancestor {
  background-color: inherit; }

html:-moz-full-screen-ancestor {
  background-color: inherit; }

/*********************************************
 * VIEW FRAGMENTS
 *********************************************/
.reveal .slides section .fragment {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease; }
  .reveal .slides section .fragment.visible {
    opacity: 1;
    visibility: visible; }

.reveal .slides section .fragment.grow {
  opacity: 1;
  visibility: visible; }
  .reveal .slides section .fragment.grow.visible {
    -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
            transform: scale(1.3); }

.reveal .slides section .fragment.shrink {
  opacity: 1;
  visibility: visible; }
  .reveal .slides section .fragment.shrink.visible {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7); }

.reveal .slides section .fragment.zoom-in {
  -webkit-transform: scale(0.1);
      -ms-transform: scale(0.1);
          transform: scale(0.1); }
  .reveal .slides section .fragment.zoom-in.visible {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none; }

.reveal .slides section .fragment.fade-out {
  opacity: 1;
  visibility: visible; }
  .reveal .slides section .fragment.fade-out.visible {
    opacity: 0;
    visibility: hidden; }

.reveal .slides section .fragment.semi-fade-out {
  opacity: 1;
  visibility: visible; }
  .reveal .slides section .fragment.semi-fade-out.visible {
    opacity: 0.5;
    visibility: visible; }

.reveal .slides section .fragment.strike {
  opacity: 1;
  visibility: visible; }
  .reveal .slides section .fragment.strike.visible {
    text-decoration: line-through; }

.reveal .slides section .fragment.current-visible {
  opacity: 0;
  visibility: hidden; }
  .reveal .slides section .fragment.current-visible.current-fragment {
    opacity: 1;
    visibility: visible; }

.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-current-green,
.reveal .slides section .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue {
  opacity: 1;
  visibility: visible; }

.reveal .slides section .fragment.highlight-red.visible {
  color: #ff2c2d; }

.reveal .slides section .fragment.highlight-green.visible {
  color: #17ff2e; }

.reveal .slides section .fragment.highlight-blue.visible {
  color: #1b91ff; }

.reveal .slides section .fragment.highlight-current-red.current-fragment {
  color: #ff2c2d; }

.reveal .slides section .fragment.highlight-current-green.current-fragment {
  color: #17ff2e; }

.reveal .slides section .fragment.highlight-current-blue.current-fragment {
  color: #1b91ff; }

/*********************************************
 * DEFAULT ELEMENT STYLES
 *********************************************/
/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
.reveal:after {
  content: '';
  font-style: italic; }

.reveal iframe {
  z-index: 1; }

/** Prevents layering issues in certain browser/transition combinations */
.reveal a {
  position: relative; }

.reveal .stretch {
  max-width: none;
  max-height: none; }

.reveal pre.stretch code {
  height: 100%;
  max-height: 100%;
  box-sizing: border-box; }

/*********************************************
 * CONTROLS
 *********************************************/
.reveal .controls {
  display: none;
  position: fixed;
  width: 110px;
  height: 110px;
  z-index: 30;
  right: 10px;
  bottom: 10px;
  -webkit-user-select: none; }

.reveal .controls button {
  padding: 0;
  position: absolute;
  opacity: 0.05;
  width: 0;
  height: 0;
  background-color: transparent;
  border: 12px solid transparent;
  -webkit-transform: scale(0.9999);
      -ms-transform: scale(0.9999);
          transform: scale(0.9999);
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent; }

.reveal .controls .enabled {
  opacity: 0.7;
  cursor: pointer; }

.reveal .controls .enabled:active {
  margin-top: 1px; }

.reveal .controls .navigate-left {
  top: 42px;
  border-right-width: 22px;
  border-right-color: #000; }

.reveal .controls .navigate-left.fragmented {
  opacity: 0.3; }

.reveal .controls .navigate-right {
  left: 74px;
  top: 42px;
  border-left-width: 22px;
  border-left-color: #000; }

.reveal .controls .navigate-right.fragmented {
  opacity: 0.3; }

.reveal .controls .navigate-up {
  left: 42px;
  border-bottom-width: 22px;
  border-bottom-color: #000; }

.reveal .controls .navigate-up.fragmented {
  opacity: 0.3; }

.reveal .controls .navigate-down {
  left: 42px;
  top: 74px;
  border-top-width: 22px;
  border-top-color: #000; }

.reveal .controls .navigate-down.fragmented {
  opacity: 0.3; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  position: fixed;
  display: none;
  height: 3px;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.2); }

.reveal .progress:after {
  content: '';
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  top: -20px; }

.reveal .progress span {
  display: block;
  height: 100%;
  width: 0px;
  background-color: #000;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
          transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

/*********************************************
 * SLIDE NUMBER
 *********************************************/
.reveal .slide-number {
  position: fixed;
  display: block;
  right: 8px;
  bottom: 8px;
  z-index: 31;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 5px; }

.reveal .slide-number-delimiter {
  margin: 0 3px; }

/*********************************************
 * SLIDES
 *********************************************/
.reveal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none; }

.reveal .slides {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: visible;
  z-index: 1;
  text-align: center;
  -webkit-perspective: 600px;
          perspective: 600px;
  -webkit-perspective-origin: 50% 40%;
          perspective-origin: 50% 40%; }

.reveal .slides > section {
  -ms-perspective: 600px; }

.reveal .slides > section,
.reveal .slides > section > section {
  display: none;
  position: absolute;
  width: 100%;
  padding: 20px 0px;
  z-index: 10;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
          transition: -ms-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
          transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms; }

.reveal[data-transition-speed="slow"] .slides section {
  -webkit-transition-duration: 1200ms;
          transition-duration: 1200ms; }

/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms; }

.reveal .slides section[data-transition-speed="slow"] {
  -webkit-transition-duration: 1200ms;
          transition-duration: 1200ms; }

.reveal .slides > section.stack {
  padding-top: 0;
  padding-bottom: 0; }

.reveal .slides > section.present,
.reveal .slides > section > section.present {
  display: block;
  z-index: 11;
  opacity: 1; }

.reveal.center,
.reveal.center .slides,
.reveal.center .slides section {
  min-height: 0 !important; }

/* Don't allow interaction with invisible slides */
.reveal .slides > section.future,
.reveal .slides > section > section.future,
.reveal .slides > section.past,
.reveal .slides > section > section.past {
  pointer-events: none; }

.reveal.overview .slides > section,
.reveal.overview .slides > section > section {
  pointer-events: auto; }

.reveal .slides > section.past,
.reveal .slides > section.future,
.reveal .slides > section > section.past,
.reveal .slides > section > section.future {
  opacity: 0; }

/*********************************************
 * Mixins for readability of transitions
 *********************************************/
/*********************************************
 * SLIDE TRANSITION
 * Aliased 'linear' for backwards compatibility
 *********************************************/
.reveal.slide section {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.reveal .slides > section[data-transition=slide].past,
.reveal .slides > section[data-transition~=slide-out].past,
.reveal.slide .slides > section:not([data-transition]).past {
  -webkit-transform: translate(-150%, 0);
      -ms-transform: translate(-150%, 0);
          transform: translate(-150%, 0); }

.reveal .slides > section[data-transition=slide].future,
.reveal .slides > section[data-transition~=slide-in].future,
.reveal.slide .slides > section:not([data-transition]).future {
  -webkit-transform: translate(150%, 0);
      -ms-transform: translate(150%, 0);
          transform: translate(150%, 0); }

.reveal .slides > section > section[data-transition=slide].past,
.reveal .slides > section > section[data-transition~=slide-out].past,
.reveal.slide .slides > section > section:not([data-transition]).past {
  -webkit-transform: translate(0, -150%);
      -ms-transform: translate(0, -150%);
          transform: translate(0, -150%); }

.reveal .slides > section > section[data-transition=slide].future,
.reveal .slides > section > section[data-transition~=slide-in].future,
.reveal.slide .slides > section > section:not([data-transition]).future {
  -webkit-transform: translate(0, 150%);
      -ms-transform: translate(0, 150%);
          transform: translate(0, 150%); }

.reveal.linear section {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.reveal .slides > section[data-transition=linear].past,
.reveal .slides > section[data-transition~=linear-out].past,
.reveal.linear .slides > section:not([data-transition]).past {
  -webkit-transform: translate(-150%, 0);
      -ms-transform: translate(-150%, 0);
          transform: translate(-150%, 0); }

.reveal .slides > section[data-transition=linear].future,
.reveal .slides > section[data-transition~=linear-in].future,
.reveal.linear .slides > section:not([data-transition]).future {
  -webkit-transform: translate(150%, 0);
      -ms-transform: translate(150%, 0);
          transform: translate(150%, 0); }

.reveal .slides > section > section[data-transition=linear].past,
.reveal .slides > section > section[data-transition~=linear-out].past,
.reveal.linear .slides > section > section:not([data-transition]).past {
  -webkit-transform: translate(0, -150%);
      -ms-transform: translate(0, -150%);
          transform: translate(0, -150%); }

.reveal .slides > section > section[data-transition=linear].future,
.reveal .slides > section > section[data-transition~=linear-in].future,
.reveal.linear .slides > section > section:not([data-transition]).future {
  -webkit-transform: translate(0, 150%);
      -ms-transform: translate(0, 150%);
          transform: translate(0, 150%); }

/*********************************************
 * CONVEX TRANSITION
 * Aliased 'default' for backwards compatibility
 *********************************************/
.reveal .slides > section[data-transition=default].past,
.reveal .slides > section[data-transition~=default-out].past,
.reveal.default .slides > section:not([data-transition]).past {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

.reveal .slides > section[data-transition=default].future,
.reveal .slides > section[data-transition~=default-in].future,
.reveal.default .slides > section:not([data-transition]).future {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

.reveal .slides > section > section[data-transition=default].past,
.reveal .slides > section > section[data-transition~=default-out].past,
.reveal.default .slides > section > section:not([data-transition]).past {
  -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
          transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }

.reveal .slides > section > section[data-transition=default].future,
.reveal .slides > section > section[data-transition~=default-in].future,
.reveal.default .slides > section > section:not([data-transition]).future {
  -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
          transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }

.reveal .slides > section[data-transition=convex].past,
.reveal .slides > section[data-transition~=convex-out].past,
.reveal.convex .slides > section:not([data-transition]).past {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

.reveal .slides > section[data-transition=convex].future,
.reveal .slides > section[data-transition~=convex-in].future,
.reveal.convex .slides > section:not([data-transition]).future {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

.reveal .slides > section > section[data-transition=convex].past,
.reveal .slides > section > section[data-transition~=convex-out].past,
.reveal.convex .slides > section > section:not([data-transition]).past {
  -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
          transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }

.reveal .slides > section > section[data-transition=convex].future,
.reveal .slides > section > section[data-transition~=convex-in].future,
.reveal.convex .slides > section > section:not([data-transition]).future {
  -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
          transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }

/*********************************************
 * CONCAVE TRANSITION
 *********************************************/
.reveal .slides > section[data-transition=concave].past,
.reveal .slides > section[data-transition~=concave-out].past,
.reveal.concave .slides > section:not([data-transition]).past {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }

.reveal .slides > section[data-transition=concave].future,
.reveal .slides > section[data-transition~=concave-in].future,
.reveal.concave .slides > section:not([data-transition]).future {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }

.reveal .slides > section > section[data-transition=concave].past,
.reveal .slides > section > section[data-transition~=concave-out].past,
.reveal.concave .slides > section > section:not([data-transition]).past {
  -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
          transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); }

.reveal .slides > section > section[data-transition=concave].future,
.reveal .slides > section > section[data-transition~=concave-in].future,
.reveal.concave .slides > section > section:not([data-transition]).future {
  -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
          transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }

/*********************************************
 * ZOOM TRANSITION
 *********************************************/
.reveal .slides section[data-transition=zoom],
.reveal.zoom .slides section:not([data-transition]) {
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease; }

.reveal .slides > section[data-transition=zoom].past,
.reveal .slides > section[data-transition~=zoom-out].past,
.reveal.zoom .slides > section:not([data-transition]).past {
  visibility: hidden;
  -webkit-transform: scale(16);
      -ms-transform: scale(16);
          transform: scale(16); }

.reveal .slides > section[data-transition=zoom].future,
.reveal .slides > section[data-transition~=zoom-in].future,
.reveal.zoom .slides > section:not([data-transition]).future {
  visibility: hidden;
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2); }

.reveal .slides > section > section[data-transition=zoom].past,
.reveal .slides > section > section[data-transition~=zoom-out].past,
.reveal.zoom .slides > section > section:not([data-transition]).past {
  -webkit-transform: translate(0, -150%);
      -ms-transform: translate(0, -150%);
          transform: translate(0, -150%); }

.reveal .slides > section > section[data-transition=zoom].future,
.reveal .slides > section > section[data-transition~=zoom-in].future,
.reveal.zoom .slides > section > section:not([data-transition]).future {
  -webkit-transform: translate(0, 150%);
      -ms-transform: translate(0, 150%);
          transform: translate(0, 150%); }

/*********************************************
 * CUBE TRANSITION
 *********************************************/
.reveal.cube .slides {
  -webkit-perspective: 1300px;
          perspective: 1300px; }

.reveal.cube .slides section {
  padding: 30px;
  min-height: 700px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-sizing: border-box; }

.reveal.center.cube .slides section {
  min-height: 0; }

.reveal.cube .slides section:not(.stack):before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  -webkit-transform: translateZ(-20px);
          transform: translateZ(-20px); }

.reveal.cube .slides section:not(.stack):after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  height: 30px;
  left: 5%;
  bottom: 0;
  background: none;
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateZ(-90px) rotateX(65deg);
          transform: translateZ(-90px) rotateX(65deg); }

.reveal.cube .slides > section.stack {
  padding: 0;
  background: none; }

.reveal.cube .slides > section.past {
  -webkit-transform-origin: 100% 0%;
      -ms-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
          transform: translate3d(-100%, 0, 0) rotateY(-90deg); }

.reveal.cube .slides > section.future {
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
          transform: translate3d(100%, 0, 0) rotateY(90deg); }

.reveal.cube .slides > section > section.past {
  -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
          transform: translate3d(0, -100%, 0) rotateX(90deg); }

.reveal.cube .slides > section > section.future {
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
          transform: translate3d(0, 100%, 0) rotateX(-90deg); }

/*********************************************
 * PAGE TRANSITION
 *********************************************/
.reveal.page .slides {
  -webkit-perspective-origin: 0% 50%;
          perspective-origin: 0% 50%;
  -webkit-perspective: 3000px;
          perspective: 3000px; }

.reveal.page .slides section {
  padding: 30px;
  min-height: 700px;
  box-sizing: border-box; }

.reveal.page .slides section.past {
  z-index: 12; }

.reveal.page .slides section:not(.stack):before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  -webkit-transform: translateZ(-20px);
          transform: translateZ(-20px); }

.reveal.page .slides section:not(.stack):after {
  content: '';
  position: absolute;
  display: block;
  width: 90%;
  height: 30px;
  left: 5%;
  bottom: 0;
  background: none;
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateZ(-90px) rotateX(65deg); }

.reveal.page .slides > section.stack {
  padding: 0;
  background: none; }

.reveal.page .slides > section.past {
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
          transform: translate3d(-40%, 0, 0) rotateY(-80deg); }

.reveal.page .slides > section.future {
  -webkit-transform-origin: 100% 0%;
      -ms-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

.reveal.page .slides > section > section.past {
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
          transform: translate3d(0, -40%, 0) rotateX(80deg); }

.reveal.page .slides > section > section.future {
  -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

/*********************************************
 * FADE TRANSITION
 *********************************************/
.reveal .slides section[data-transition=fade],
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides > section > section:not([data-transition]) {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s; }

.reveal.fade.overview .slides section,
.reveal.fade.overview .slides > section > section {
  -webkit-transition: none;
          transition: none; }

/*********************************************
 * NO TRANSITION
 *********************************************/
.reveal .slides section[data-transition=none],
.reveal.none .slides section:not([data-transition]) {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: none;
          transition: none; }

/*********************************************
 * PAUSED MODE
 *********************************************/
.reveal .pause-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  -webkit-transition: all 1s ease;
          transition: all 1s ease; }

.reveal.paused .pause-overlay {
  visibility: visible;
  opacity: 1; }

/*********************************************
 * FALLBACK
 *********************************************/
.no-transforms {
  overflow-y: auto; }

.no-transforms .reveal .slides {
  position: relative;
  width: 80%;
  height: auto !important;
  top: 0;
  left: 50%;
  margin: 0;
  text-align: center; }

.no-transforms .reveal .controls,
.no-transforms .reveal .progress {
  display: none !important; }

.no-transforms .reveal .slides section {
  display: block !important;
  opacity: 1 !important;
  position: relative !important;
  height: auto;
  min-height: 0;
  top: 0;
  left: -50%;
  margin: 70px 0;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none; }

.no-transforms .reveal .slides section section {
  left: 0; }

.reveal .no-transition,
.reveal .no-transition * {
  -webkit-transition: none !important;
          transition: none !important; }

/*********************************************
 * PER-SLIDE BACKGROUNDS
 *********************************************/
.reveal .backgrounds {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-perspective: 600px;
          perspective: 600px; }

.reveal .slide-background {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  background-color: transparent;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
          transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

.reveal .slide-background.stack {
  display: block; }

.reveal .slide-background.present {
  opacity: 1;
  visibility: visible; }

.print-pdf .reveal .slide-background {
  opacity: 1 !important;
  visibility: visible !important; }

/* Video backgrounds */
.reveal .slide-background video {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  top: 0;
  left: 0; }

/* Immediate transition style */
.reveal[data-background-transition=none] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=none] {
  -webkit-transition: none;
          transition: none; }

/* Slide */
.reveal[data-background-transition=slide] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=slide] {
  opacity: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.reveal[data-background-transition=slide] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=slide] {
  -webkit-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
          transform: translate(-100%, 0); }

.reveal[data-background-transition=slide] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=slide] {
  -webkit-transform: translate(100%, 0);
      -ms-transform: translate(100%, 0);
          transform: translate(100%, 0); }

.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] {
  -webkit-transform: translate(0, -100%);
      -ms-transform: translate(0, -100%);
          transform: translate(0, -100%); }

.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] {
  -webkit-transform: translate(0, 100%);
      -ms-transform: translate(0, 100%);
          transform: translate(0, 100%); }

/* Convex */
.reveal[data-background-transition=convex] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=convex] {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }

.reveal[data-background-transition=convex] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=convex] {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }

.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); }

.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); }

/* Concave */
.reveal[data-background-transition=concave] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=concave] {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }

.reveal[data-background-transition=concave] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=concave] {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }

.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); }

.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); }

/* Zoom */
.reveal[data-background-transition=zoom] > .backgrounds .slide-background,
.reveal > .backgrounds .slide-background[data-background-transition=zoom] {
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease; }

.reveal[data-background-transition=zoom] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=zoom] {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(16);
      -ms-transform: scale(16);
          transform: scale(16); }

.reveal[data-background-transition=zoom] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=zoom] {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2); }

.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(16);
      -ms-transform: scale(16);
          transform: scale(16); }

.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2); }

/* Global transition speed settings */
.reveal[data-transition-speed="fast"] > .backgrounds .slide-background {
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms; }

.reveal[data-transition-speed="slow"] > .backgrounds .slide-background {
  -webkit-transition-duration: 1200ms;
          transition-duration: 1200ms; }

/*********************************************
 * OVERVIEW
 *********************************************/
.reveal.overview {
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  -webkit-perspective: 700px;
          perspective: 700px; }
  .reveal.overview .slides section {
    height: 700px;
    opacity: 1 !important;
    overflow: hidden;
    visibility: visible !important;
    cursor: pointer;
    box-sizing: border-box; }
  .reveal.overview .slides section:hover,
  .reveal.overview .slides section.present {
    outline: 10px solid rgba(150, 150, 150, 0.4);
    outline-offset: 10px; }
  .reveal.overview .slides section .fragment {
    opacity: 1;
    -webkit-transition: none;
            transition: none; }
  .reveal.overview .slides section:after,
  .reveal.overview .slides section:before {
    display: none !important; }
  .reveal.overview .slides > section.stack {
    padding: 0;
    top: 0 !important;
    background: none;
    outline: none;
    overflow: visible; }
  .reveal.overview .backgrounds {
    -webkit-perspective: inherit;
            perspective: inherit; }
  .reveal.overview .backgrounds .slide-background {
    opacity: 1;
    visibility: visible;
    outline: 10px solid rgba(150, 150, 150, 0.1);
    outline-offset: 10px; }

.reveal.overview .slides section,
.reveal.overview-deactivating .slides section {
  -webkit-transition: none;
          transition: none; }

.reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background {
  -webkit-transition: none;
          transition: none; }

.reveal.overview-animated .slides {
  -webkit-transition: -webkit-transform 0.4s ease;
          transition: transform 0.4s ease; }

/*********************************************
 * RTL SUPPORT
 *********************************************/
.reveal.rtl .slides,
.reveal.rtl .slides h1,
.reveal.rtl .slides h2,
.reveal.rtl .slides h3,
.reveal.rtl .slides h4,
.reveal.rtl .slides h5,
.reveal.rtl .slides h6 {
  direction: rtl;
  font-family: sans-serif; }

.reveal.rtl pre,
.reveal.rtl code {
  direction: ltr; }

.reveal.rtl ol,
.reveal.rtl ul {
  text-align: right; }

.reveal.rtl .progress span {
  float: right; }

/*********************************************
 * PARALLAX BACKGROUND
 *********************************************/
.reveal.has-parallax-background .backgrounds {
  -webkit-transition: all 0.8s ease;
          transition: all 0.8s ease; }

/* Global transition speed settings */
.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms; }

.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
  -webkit-transition-duration: 1200ms;
          transition-duration: 1200ms; }

/*********************************************
 * LINK PREVIEW OVERLAY
 *********************************************/
.reveal .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease; }

.reveal .overlay.visible {
  opacity: 1;
  visibility: visible; }

.reveal .overlay .spinner {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  z-index: 10;
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
  visibility: visible;
  opacity: 0.6;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease; }

.reveal .overlay header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  z-index: 2;
  border-bottom: 1px solid #222; }

.reveal .overlay header a {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 0 10px;
  float: right;
  opacity: 0.6;
  box-sizing: border-box; }

.reveal .overlay header a:hover {
  opacity: 1; }

.reveal .overlay header a .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: 50% 50%;
  background-size: 100%;
  background-repeat: no-repeat; }

.reveal .overlay header a.close .icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }

.reveal .overlay header a.external .icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }

.reveal .overlay .viewport {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  left: 0; }

.reveal .overlay.overlay-preview .viewport iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease; }

.reveal .overlay.overlay-preview.loaded .viewport iframe {
  opacity: 1;
  visibility: visible; }

.reveal .overlay.overlay-preview.loaded .spinner {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2); }

.reveal .overlay.overlay-help .viewport {
  overflow: auto;
  color: #fff; }

.reveal .overlay.overlay-help .viewport .viewport-inner {
  width: 600px;
  margin: 0 auto;
  padding: 60px;
  text-align: center;
  letter-spacing: normal; }

.reveal .overlay.overlay-help .viewport .viewport-inner .title {
  font-size: 20px; }

.reveal .overlay.overlay-help .viewport .viewport-inner table {
  border: 1px solid #fff;
  border-collapse: collapse;
  font-size: 14px; }

.reveal .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
  width: 200px;
  padding: 10px;
  border: 1px solid #fff;
  vertical-align: middle; }

.reveal .overlay.overlay-help .viewport .viewport-inner table th {
  padding-top: 20px;
  padding-bottom: 20px; }

/*********************************************
 * PLAYBACK COMPONENT
 *********************************************/
.reveal .playback {
  position: fixed;
  left: 15px;
  bottom: 20px;
  z-index: 30;
  cursor: pointer;
  -webkit-transition: all 400ms ease;
          transition: all 400ms ease; }

.reveal.overview .playback {
  opacity: 0;
  visibility: hidden; }

/*********************************************
 * ROLLING LINKS
 *********************************************/
.reveal .roll {
  display: inline-block;
  line-height: 1.2;
  overflow: hidden;
  vertical-align: top;
  -webkit-perspective: 400px;
          perspective: 400px;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%; }

.reveal .roll:hover {
  background: none;
  text-shadow: none; }

.reveal .roll span {
  display: block;
  position: relative;
  padding: 0 2px;
  pointer-events: none;
  -webkit-transition: all 400ms ease;
          transition: all 400ms ease;
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.reveal .roll:hover span {
  background: rgba(0, 0, 0, 0.5);
  -webkit-transform: translate3d(0px, 0px, -45px) rotateX(90deg);
          transform: translate3d(0px, 0px, -45px) rotateX(90deg); }

.reveal .roll span:after {
  content: attr(data-title);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 2px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg);
          transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }

/*********************************************
 * SPEAKER NOTES
 *********************************************/
.reveal aside.notes {
  display: none; }

.reveal .speaker-notes {
  display: none;
  position: absolute;
  width: 70%;
  max-height: 15%;
  left: 15%;
  bottom: 26px;
  padding: 10px;
  z-index: 1;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  box-sizing: border-box;
  text-align: left;
  font-family: Helvetica, sans-serif;
  -webkit-overflow-scrolling: touch; }

.reveal .speaker-notes.visible:not(:empty) {
  display: block; }

@media screen and (max-width: 1024px) {
  .reveal .speaker-notes {
    font-size: 14px; } }

@media screen and (max-width: 600px) {
  .reveal .speaker-notes {
    width: 90%;
    left: 5%; } }

/*********************************************
 * ZOOM PLUGIN
 *********************************************/
.zoomed .reveal *,
.zoomed .reveal *:before,
.zoomed .reveal *:after {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important; }

.zoomed .reveal .progress,
.zoomed .reveal .controls {
  opacity: 0; }

.zoomed .reveal .roll span {
  background: none; }

.zoomed .reveal .roll span:after {
  visibility: hidden; }

/**
 * White theme for reveal.js. This is the opposite of the 'black' theme.
 *
 * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
 */
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
  color: #fff; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
  background: #fff;
  background-color: #fff; }

.reveal {
  font-family: 'Droid Serif', Helvetica, sans-serif;
  font-size: 24px;
  font-weight: normal;
  color: #222; }

::selection {
  color: #fff;
  background: #98bdef;
  text-shadow: none; }

.reveal .slides > section,
.reveal .slides > section > section {
  line-height: 1.3;
  font-weight: inherit;
  -moz-transform-style: flat;
}

.jrm-reveal-presentation {
    line-height : 1;
    overflow : hidden;
}

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #222;
  font-family: 'Yanone Kaffeesatz';
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  text-shadow: none;
  word-wrap: break-word; }

.reveal h1 {
  font-size: 2.5em;
  margin-bottom: 30px;
}

.reveal h2 {
  font-size: 1.6em; }

.reveal h3 {
  font-size: 1.3em; }

.reveal h4 {
  font-size: 1em; }

.reveal h1 {
  text-shadow: none; }

/*********************************************
 * OTHER
 *********************************************/
.reveal .footnote {
  font-family: 'Droid Serif', Helvetica, sans-serif;
  font-weight: normal;
  color: #222;
  font-size:0.7em;
}

.reveal .keyword {
    color: #0000FF;
}

.reveal .focus {
    color: #39C2F0;
}

.reveal p {
  margin: 20px 0;
  line-height: 1.3;
  color: #222;
}

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%; }

.reveal strong,
.reveal b {
  font-weight: bold; }

.reveal em {
  font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em;
}

.reveal ul li {
    margin-top : 20px;
}

.reveal ol li {
    margin-top : 20px;
}

.reveal ul ul li {
    margin-top : 10px;
}
.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul {
  list-style-type: square; }

.reveal ul ul ul {
  list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px; }

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal q,
.reveal blockquote {
  quotes: none; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  text-align: left;
  font-size: 0.55em;
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

.reveal code {
  font-family: monospace; }

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal; }

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0; }

.reveal table th {
  font-weight: bold; }

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tr:last-child td {
  border-bottom: none; }

.reveal sup {
  vertical-align: super; }

.reveal sub {
  vertical-align: sub; }

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #2a76dd;
  text-decoration: none;
  -webkit-transition: color 0.15s ease;
  -moz-transition: color 0.15s ease;
  transition: color 0.15s ease; }

.reveal a:hover {
  color: #6ca0e8;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #1a53a1; }

/*********************************************
 * IMAGES
 *********************************************/
.reveal img {
    margin-top : 15px;
}

.reveal a img {
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  transition: all 0.15s linear; }

.reveal a:hover img {
  background: rgba(255, 255, 255, 0.2);
  border-color: #2a76dd;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
  border-right-color: #2a76dd; }

.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
  border-left-color: #2a76dd; }

.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
  border-bottom-color: #2a76dd; }

.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
  border-top-color: #2a76dd; }

.reveal .controls .navigate-left.enabled:hover {
  border-right-color: #6ca0e8; }

.reveal .controls .navigate-right.enabled:hover {
  border-left-color: #6ca0e8; }

.reveal .controls .navigate-up.enabled:hover {
  border-bottom-color: #6ca0e8; }

.reveal .controls .navigate-down.enabled:hover {
  border-top-color: #6ca0e8; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2); }

.reveal .progress span {
  background: #2a76dd;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

.hljs-comment,
.hljs-quote {
  color: #998;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #0000FF;
  font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #008080;
}

.hljs-string,
.hljs-doctag {
  color: #d14;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: #900;
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-type,
.hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: #000080;
  font-weight: normal;
}

.hljs-regexp,
.hljs-link {
  color: #009926;
}

.hljs-symbol,
.hljs-bullet {
  color: #990073;
}

.hljs-built_in,
.hljs-builtin-name {
  color: #0086b3;
}

.hljs-meta {
  color: #999;
  font-weight: bold;
}

.hljs-deletion {
  background: #fdd;
}

.hljs-addition {
  background: #dfd;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.croppie-container{width:100%;height:100%}.croppie-container .cr-image{z-index:-1;position:absolute;top:0;left:0;transform-origin:0 0;max-height:none;max-width:none}.croppie-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1;width:100%;height:100%}.croppie-container .cr-resizer,.croppie-container .cr-viewport{position:absolute;border:2px solid #fff;margin:auto;top:0;bottom:0;right:0;left:0;box-shadow:0 0 2000px 2000px rgba(0,0,0,.5);z-index:0}.croppie-container .cr-resizer{z-index:2;box-shadow:none;pointer-events:none}.croppie-container .cr-resizer-horisontal,.croppie-container .cr-resizer-vertical{position:absolute;pointer-events:all}.croppie-container .cr-resizer-horisontal::after,.croppie-container .cr-resizer-vertical::after{display:block;position:absolute;box-sizing:border-box;border:1px solid #000;background:#fff;width:10px;height:10px;content:''}.croppie-container .cr-resizer-vertical{bottom:-5px;cursor:row-resize;width:100%;height:10px}.croppie-container .cr-resizer-vertical::after{left:50%;margin-left:-5px}.croppie-container .cr-resizer-horisontal{right:-5px;cursor:col-resize;width:10px;height:100%}.croppie-container .cr-resizer-horisontal::after{top:50%;margin-top:-5px}.croppie-container .cr-original-image{display:none}.croppie-container .cr-vp-circle{border-radius:50%}.croppie-container .cr-overlay{z-index:1;position:absolute;cursor:move;touch-action:none}.croppie-container .cr-slider-wrap{width:75%;margin:15px auto;text-align:center}.croppie-result{position:relative;overflow:hidden}.croppie-result img{position:absolute}.croppie-container .cr-image,.croppie-container .cr-overlay,.croppie-container .cr-viewport{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.cr-slider{-webkit-appearance:none;width:300px;max-width:100%;padding-top:8px;padding-bottom:8px;background-color:transparent}.cr-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:rgba(0,0,0,.5);border:0;border-radius:3px}.cr-slider::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px}.cr-slider:focus{outline:0}.cr-slider::-moz-range-track{width:100%;height:3px;background:rgba(0,0,0,.5);border:0;border-radius:3px}.cr-slider::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px}.cr-slider:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}.cr-slider::-ms-track{width:100%;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}.cr-slider::-ms-fill-lower{background:rgba(0,0,0,.5);border-radius:10px}.cr-slider::-ms-fill-upper{background:rgba(0,0,0,.5);border-radius:10px}.cr-slider::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:1px}.cr-slider:focus::-ms-fill-lower{background:rgba(0,0,0,.5)}.cr-slider:focus::-ms-fill-upper{background:rgba(0,0,0,.5)}.cr-rotate-controls{position:absolute;bottom:5px;left:5px;z-index:1}.cr-rotate-controls button{border:0;background:0 0}.cr-rotate-controls i:before{display:inline-block;font-style:normal;font-weight:900;font-size:22px}.cr-rotate-l i:before{content:'↺'}.cr-rotate-r i:before{content:'↻'}
/*# sourceMappingURL=croppie.min.css.map */
/* Cal-HeatMap CSS */

.cal-heatmap-container {
	display: block;
}

.graph
{
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

.graph-label
{
	fill: #999;
	font-size: 10px
}

.graph, .graph-legend rect {
	shape-rendering: crispedges
}

.graph-rect
{
	fill: #ededed
}

.graph-subdomain-group rect:hover
{
	stroke: #000;
	stroke-width: 1px
}

.subdomain-text {
	font-size: 8px;
	fill: #999;
	pointer-events: none
}

.hover_cursor:hover {
	cursor: pointer
}

.qi {
	background-color: #999;
	fill: #999
}

/*
Remove comment to apply this style to date with value equal to 0
.q0
{
	background-color: #fff;
	fill: #fff;
	stroke: #ededed
}
*/

.q1
{
	background-color: #dae289;
	fill: #dae289
}

.q2
{
	background-color: #cedb9c;
	fill: #9cc069
}

.q3
{
	background-color: #b5cf6b;
	fill: #669d45
}

.q4
{
	background-color: #637939;
	fill: #637939
}

.q5
{
	background-color: #3b6427;
	fill: #3b6427
}

rect.highlight
{
	stroke:#444;
	stroke-width:1
}

text.highlight
{
	fill: #444
}

rect.now
{
	stroke: red
}

text.now
{
	fill: red;
	font-weight: 800
}

.domain-background {
	fill: none;
	shape-rendering: crispedges
}

.ch-tooltip {
	padding: 10px;
	background: #222;
	color: #bbb;
	font-size: 12px;
	line-height: 1.4;
	width: 140px;
	position: absolute;
	z-index: 99999;
	text-align: center;
	border-radius: 2px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	display: none;
	box-sizing: border-box;
}

.ch-tooltip::after{
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	content: "";
	padding: 0;
	display: "block";
	bottom: -6px;
	left: 50%;
	margin-left: -6px;
    border-width: 6px 6px 0;
    border-top-color: #222;
}
/*------------------------------------------------------------------------
/* JuniorMind Platform Styles
/*----------------------------------------------------------------------*/

/*----------------------------------
/* Full Screen Grid
/*----------------------------------*/
.grid-full-screen {
    display: flex;
    flex-flow: column;
    height: 100vh;
}

/*------------------------------------------------------------------------
/* Header Styles
/*----------------------------------------------------------------------*/

/*----------------------------------
/* Default Header Grid
/*----------------------------------*/
.header-grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: min-content 1fr auto auto auto;
    align-items: center;
    padding: 5px 10px;
    border-bottom: thin solid #e4e4e4;
}

.message-badge {
    position: absolute;
    right: -40%;
    top: 40%;
    font-size: 50%;
    padding: .5em;
    border-radius: 99999px;
    line-height: .5em;
    color: white;
    background: #e86969;
    text-align: center;
    min-width: 0.5em;
    font-weight: bold;
}


html {
    overflow: initial;
}

body {
    margin : 0;
    padding : 0;
    line-height: initial;
    overflow: initial;
}

#header {
    width : 100%;
}

#header-top-artifact {
    width : 100%;
    height : 5px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: rgb(95, 95, 95);
    background-image: url(images/header-bg.png);
}

.jrm-logo {
    height : 28px;
}

#top-band-title {
    text-align : center;
    font-family: arial, serif;
    font-size: 16px;
    font-weight : bold;
    color: #5f5f5f;
    text-decoration: none;
}

.spacer {
    width: 25px;
}

/*------------------------------------------------------------------------
/* Dropdown button
/*----------------------------------------------------------------------*/

.dropdown-button-image-wrapper {
    float : left;
}

.jrm-icon {
    color : #39C2F0;
    line-height : 1;
}

.header-icon {
    font-size: 1.5em;
}

.jrm-icon-background {
    width : 20px;
    height : 20px;
    text-align : center;
}

.jrm-icon-background-large {
    width: 40px;
    height: 30px;
    text-align: center;
    padding-top: 10px;
}

.dropdown-button-image {
    padding-top: 1px;
    padding-left: 2px;
    width: 18px;
    height: 18px;
}

a .jrm-icon-background .jrm-icon:hover {
    color : #373737;
}

.dropdown-button:hover .dropdown-button-text {
    color : white;
}

.dropdown-button:hover .jrm-icon-background .jrm-icon {
    color: #373737;
}

.dropdown-button-text {
    margin-left : 5px;
    height : 20px;
    float : left;
    font-family: arial, serif;
    font-size: 14px;
    color: #5f5f5f;
    display: grid;
    align-items: end;
}

.dropdown-button:hover .dropdown-button-text {
    background-color : #39C2F0;
}

.dropdown-button:hover .dropdown-button-image {
    border-radius: 99px;
}

/*------------------------------------------------------------------------
/* Dropdown menu
/*----------------------------------------------------------------------*/

.dropdown-menu {
    display: inline-block;
    position: relative;
    min-width: 300px;
}

.dropdown-title {
    font-size: 24px;
    display: inherit;
}

.dropdown-title:hover {
    color: #39C2F0;
    cursor: pointer;
}

.down-image {
    font-size: 20px;
}

.dropdown-sections {
    display: none;
    width: 300px;
    min-height: 50px;
    max-height: 260px;
    overflow-x: hidden;
    padding-left: 0px;
    margin-top: 5px;
    list-style-type: none;
    position: absolute;
    background-color: #e0e0e0;
    z-index: 2;
    color: #000;
    border: 1px solid #ccc;
    border-color: rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    border-radius: 2px;
}

.dropdown-sections.open{
    display: block;
}

.section-header {
    font-size: 14px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #e0e0e0;
    width: 100%;
    position: relative;
    padding: 5px;
}

.section-items {
    display: inline-grid;
    width: 100%;
    padding: 0px;
    position: relative;
    background-color: white;
    z-index: 1;
}

.section-item {
    padding: 0px;
    text-decoration: none;
    display: block;
}

.menu-item {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: black;
    padding: 5px 5px;
    text-decoration: none;
    display: block;
}

.item-icon {
    color: #39c2f0;
    float: left;
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin-right: 5px;
    display: inline-block;
}

.menu-item:hover, .menu-item:hover .item-icon {
    transition: all 50ms;
    background-color: #39C2F0;
    color: white;
}

/*------------------------------------------------------------------------
/* User Settings
/*----------------------------------------------------------------------*/
.user-settings-content {
    height: 100%;
}

.user-settings-panel {
    padding: 20px 0px;
    position: relative;
    background-color: #fafafa;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height: calc(100% - 40px);
}

/*----------------------------------
/* Panel User Settings Grid
/*----------------------------------*/
.user-details-grid {
    display: grid;
    grid-gap: 0px;
    grid-template-rows: 50px 1fr;
    max-width: 790px;
    min-width: 300px;
    margin: auto;
    background-color: white;
    border-color: #c3c3c3;
    border-width: thin;
    border-style: solid;
    float: unset;
    height: 100%;
}

.user-details-grid .user-details-grid-item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    margin: 0px 20px;
    border-bottom: thin solid #e4e4e4;
}

.user-details-grid .user-details-grid-item:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
    float: unset;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    overflow-y: auto;
    overflow-x: auto;
}

.user-details-grid .user-details-grid-item:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
    overflow: hidden;
}

.user-details-options {
    font-weight: bold;
    color: #39C2F0;
}

.details-shown {
    color: #5f5f5f;
}

.user-details-separator {
    border-color: #c3c3c3;
    border-width: thin;
    border-left-style: solid;
    margin: 0px 5px;
}


.user-details-option:hover {
    cursor: pointer;
}

@media only screen and (max-width: 820px) {

    .user-settings-panel {
        padding: 0px;
    }

    .user-settings-panel .user-details-grid {
        height: calc(100% + 40px);
    }

    .user-details-grid {
        max-width: none;
        border-style: none;
        width: 100%;
        height: 100%;
    }
}

/*----------------------------------
/* Menu Grid
/*----------------------------------*/
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
    list-style-type: none;
    padding: 0px;
}

.menu-grid li {
    padding: 0px 10px;
}

/*----------------------------------
/* User Details Menu
/*----------------------------------*/
jrm-user-details-menu .menu-border {
    border-color: white;
    border-left: 5px #c3c3c3;
    border-width: thin;
    border-style: solid;
}

jrm-user-details-menu .menu-border:nth-of-type(1) {
    border-left:none;
}

jrm-user-details-menu a {
    font-size: 16px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    color: #39C2F0;
}

jrm-user-details-menu a:hover {
    font-size: 16px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    color:#5f5f5f;
}

jrm-user-details-menu .active-item {
    color: #5f5f5f;
}

/*----------------------------------
/* User Statistics info
/*----------------------------------*/
.statistics-link {
    color: #39C2F0;
}

.statistics-link:hover {
    cursor: pointer;
}

#statistics-unavailable{
    text-align: center;
}

.statistics-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(auto-fit, minmax(min-content, 10px));
    grid-gap: 5px;
    float: unset;
}

.calendar-statistics {
    border-color: #c3c3c3;
    border-width: thin;
    border-style: solid;
    padding: 10px;
}

.activity-legend {
    white-space: normal;
    padding: 0px;
}

.activity-legend span:nth-of-type(1){
    width: 10px;
    height: 10px;
    display: block;
    background: #39C2F0;
    float: left;
    margin-top: 3px;
    margin-right: 3px;
    margin-left: 20px;
}

.activity-legend span:nth-of-type(2) {
    display: block;
    margin-left: 35px;
}

.months-label {
    width: 100%;
    height: 20px;
    overflow:visible;
}

.stars-grid {
    display: grid;
    grid-gap: 5px;
    padding-top: 15px;
    float: unset;
    text-align: center;
}

.stars-grid div:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    color: #999;
}

.stars-grid div:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
    color: #999;
}

.stars-grid div:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
}

.cube-grid {
    display: grid;
    grid-gap: 7%;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 5px;
    float: unset;
    text-align: center;
}

.cube-grid .cube{
   border-color: #c3c3c3;
   border-width: thin;
   border-style: solid;
   padding: 15px 10px; 
}

.cube-grid .cube:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.cube-grid .cube:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

.cube-grid .cube:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
}

.cube-grid .cube-value {
    font-size: 35px;
    margin-bottom: 5px;
    margin-top: 0px;
}

.cube-grid .cube-key {
    margin: 0px;
    color:#999;
}

@media only screen and (max-width: 600px) {

    .cube-grid {
        grid-gap: 2%;
    }

    .cube-grid .cube{
        padding: 10px;
    }

    .cube-grid .cube-value {
        font-size: 30px;
    }

    .cube-grid .cube-key {
        font-size: 15px;
    }
}

@media only screen and (max-width: 360px) {

    .cube-grid .cube {
        padding: 5px;
    }

    .cube-grid .cube-value {
        font-size: 27px;
    }

    .cube-grid .cube-key, .stars-grid {
        font-size: 13px;
    }
}

/*----------------------------------
/* Calendar grid
/*----------------------------------*/
.calendar-grid {
    display: grid;
    grid-template-columns: 15px 1fr 15px;
    grid-template-rows: repeat(auto-fit, minmax(10px, max-content));
    grid-gap: 5px;
    float: unset;
    text-align: center;
}

.calendar-grid .calendar-month {
    grid-column: 2/ span 3;
    grid-row: 1;
}
.calendar-grid #previous-domain-selector {
    grid-column: 1;
    grid-row: 2;
}

.calendar-grid #heat-map {
    grid-column: 2;
    grid-row: 2;
}

.calendar-grid #next-domain-selector {
    grid-column: 3;
    grid-row: 2;
}

.navigation-button {
    transform: scale(3,8);
    height: 4px;
    color: #39C2F0;
}

.navigation-button:hover {
    color:#5f5f5f;
    cursor: pointer;
}

.calendar-dummy .calendar-loading {
    background: #efefef;
    height: 10px;
    margin-bottom: 2.2px;
    margin-left: 22px;
    margin-right: 22px;
    border-radius: 10px;
}

.calendar-dummy .calendar-loading:nth-of-type(9) {
    background: none;
    height: 20px;
}

.calendar-dummy .calendar-dummy-months {
    height: 25px;
    margin-left: 22px;
    margin-right: 22px;
}

.chart {
    margin-top: 5px;
    margin-bottom: 10px;
    border: solid;
    border-color: #c3c3c3;
    border-width: 1px;
    padding: 10px 15px 0px 15px;
    pointer-events: none;
}

.chart-title {
    margin-bottom: 5px;
    font-size: 13px;
}

.title-charts {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*----------------------------------
/* Message of the operation
/*----------------------------------*/
.operation-area {
    width: auto;
}

.msg-box-grid-true {
    background: #F1FFF1;
    color: #61bd4f;
}

.msg-box-grid-false {
    background: #ffe8e8;
    color: #e86969;
}

.operation-area i {
    width: 30px;
    text-align: center;
    padding: 4px;
    font-size: 20px;
}

.operation-area .hide-operation-msg {
    float: right;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}

/*----------------------------------
/* User settings info
/*----------------------------------*/
.user-information-grid {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: .4fr 1fr 90px;
    grid-template-rows: 40px;
    align-items: center;
    padding: 5px 10px;
}

.user-information-grid .information-grid-item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.user-information-grid .information-grid-item:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
    color: #9d9d9d;
    padding-left: 0px;
    border-bottom: none;
}

.user-information-grid .information-grid-item:nth-of-type(3) {
    grid-column: 3;
     grid-row: 1;
    text-align: right;
    color: #39C2F0;
    font-size: 13px;
}

@media only screen and (max-width: 650px) {

    .user-information-grid {
        grid-template-columns: 1fr 75px;
        grid-template-rows: 30px 30px;
    }

    .user-information-grid .information-grid-item:nth-of-type(2) {
        grid-column: 1 / span 2;
        grid-row: 2;
        padding-left: 10px;
        border-bottom: thin solid #e4e4e4;
    }

    .user-information-grid .information-grid-item:nth-of-type(3) {
        grid-column: 2;
        grid-row: 1;
    }
}

.user-information-grid:hover {
    cursor: pointer;
    background-color: #fafafa;
}

.user-information-grid:hover .edit-field-container {
    text-decoration: underline;
}

.user-information-grid:hover .fa-pencil {
    display:initial;
    color: #39C2F0;
}

@media only screen and (max-width: 450px) {

    .user-information-grid {
        grid-template-columns: 1fr 15px;
    }

    .edit-field-container .fa.fa-pencil {
        color: #39C2F0;
    }

    .edit-field-container span {
        display: none;
    }

    .user-information-grid:hover .fa-pencil {
        color: #373737;
    }
}

/*----------------------------------
/* User messages
/*----------------------------------*/

.messages-panel-grid h3 {
    margin-bottom: 15px;
}

.messages-title {
    font-size: medium;
    color: #5f5f5f;
}

.no-content {
    color: #9d9d9d;
    text-align: center;
    margin: 50px 0px;
    font-size: 14px;
}

.user-messages-panel {
    padding: 10px 0px 20px 0px;
    position: relative;
    background-color: #fafafa;
    font-family: arial, serif;
    height: calc(100% - 30px);
}

.messages-panel-grid {
    max-width: 790px;
    min-width: 300px;
    margin: auto;
    background-color: white;
    border-color: #c3c3c3;
    border-width: thin;
    border-style: solid;
    float: unset;
    height: 100%;
    padding: 10px;
    overflow: auto;
}

.user-messages-grid {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 1fr 70px;
    grid-template-rows: 30px 1fr;
    align-items: center;
    padding: 5px 0px;
    z-index: 0;
}

.user-messages-grid .messages-grid-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.user-messages-grid .messages-grid-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.user-messages-grid .messages-grid-item:nth-child(3) {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.user-messages-pair-grid {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 30px 170px 1fr 100px;
    grid-template-rows: 30px;
    align-items: center;
    padding: 5px 0px 5px 10px;
    grid-column: 3;
    grid-row: 1;
    font-size: 14px;
    z-index: 99;
}

.user-messages-pair-grid .messages-pair-grid-item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.user-messages-pair-grid .messages-pair-grid-item:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
}

.user-messages-pair-grid .messages-pair-grid-item:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0px;
    border-bottom: none;
    font-size: 14px;
}

.user-messages-pair-grid .messages-pair-grid-item:nth-of-type(4) {
    grid-column: 4;
    grid-row: 1;
    padding-left: 0px;
    border-bottom: none;
    font-size: 14px;
}

#message-read-icon {
    color: #39C2F0;
    padding-bottom: 3px;
}

#message-unread-icon {
    color: #0c7091;
    padding-bottom: 3px;
}

.edit-field-container {
    text-align: right;
    color: #39C2F0;
    font-size: 14px;
    padding-right: 10px;
}

.message-content {
    text-align: left;
    font-size: 13px;
    margin: 10px 25px;
}

.user-messages-grid:hover {
    cursor: pointer;
    background-color: #fafafa;
}

.user-messages-grid:hover #message-read-icon, .user-messages-grid:hover #message-unread-icon {
    color: #373737;
}

.user-messages-pair-grid:hover #read-btn {
    text-decoration: underline;
}

.user-messages-pair-grid:hover #message-icon i{
    display: initial;
}

.edit-field-container .fa{
    color: #39C2F0;
    display: none;
}

.edit-field-container:hover #delete-btn {
    text-decoration: underline;
}

.edit-field-container:hover .fa-trash {
    display: initial;
}

.confirmation {
    text-align: right;
}

.confirmation-grid {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 70px 1fr;
    grid-template-rows: 60px;
    align-items: center;
    padding: 5px 0px;
}

.confirmation .fa.fa-question-circle {
    text-align: center;
    color: #39C2F0;
    font-size: 60px;
}

.confirmation h1 {
    text-align: left;
    font-size: 18px;
    margin: 0px 20px;
    padding: 0px;
    line-height: 25px;
}

#problem-hints .confirmation h1 {
    text-align: left;
    font-size: 16px;
    margin: 0px 20px;
    padding: 0px;
    line-height: 25px;
}

.confirmation .jrm-button {
    width: 75px;
    text-align: center;
    display: inline-block;
    margin-left: 5px;
    margin-top: 25px;
    border-top: solid;
    border-top-width: 1px;
}

@media only screen and (max-width: 820px) {

    .user-messages-panel {
        padding: 0px;
        padding-right: 20px;
        padding-right: 10px;
        height: calc(100% - 10px);
    }
    .messages-panel-grid {
        max-width: none;
        border-style: none;
        width: 100%;
        height: 100%;
    }

    .messages-panel-grid .messages-panel-grid-item:nth-of-type(1) {
        padding-top: 41px;
    }
}

@media only screen and (max-width: 700px) {

    .user-messages-grid {
        grid-gap: 2px;
        grid-template-columns: 1fr 25px;
    }

    .edit-field-container .fa {
        display: initial;
    }

    .edit-field-container span {
        display: none;
    }

    .edit-field-container:hover .fa, .user-messages-pair-grid:hover #message-icon i {
        color: #373737;
    }
}

@media only screen and (max-width: 550px) {

    .user-messages-grid {
        grid-template-rows: 60px 1fr;
        border-bottom: thin solid #e4e4e4;
    }

    .user-messages-pair-grid {
        grid-template-columns: 30px 1fr 25px;
        grid-template-rows: 1fr 30px;
        grid-column: 3;
        grid-row: 2;
    }

    .user-messages-pair-grid .messages-pair-grid-item:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .user-messages-pair-grid .messages-pair-grid-item:nth-of-type(2) {
        grid-column: 2 / span 3;
        grid-row: 2;
        font-size: 12px;
        padding-bottom: 10px;
    }

    .user-messages-pair-grid .messages-pair-grid-item:nth-of-type(3) {
        grid-column: 2;
        grid-row: 1;
        font-size: 16px;
        padding-top:10px;
    }

    .user-messages-pair-grid .messages-pair-grid-item:nth-of-type(4) {
        grid-column: 3;
        grid-row: 1/ span 2;
    }
}

/*----------------------------------
/* User Setting Grid
/*----------------------------------*/
.user-edit-area {
    background-color: #f7f7f7;
    padding: 15px 5px;
}

.user-edit-area .p {
    padding-top: 5px;
    padding-bottom: 5px;
}

.user-edit-area input {
    margin-bottom: 0px;
}

.user-edit-area .jrm-button {
    width: 75px;
    text-align: center;
    display: inline-block;
    margin-left: 7px;
    margin-bottom: 5px;
    margin-top: 25px;
}

.user-setting-grid {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: .5fr 1fr;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-left: 7px;
    margin-right: 7px;
}

.user-setting-grid .setting-grid-item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.user-setting-grid .setting-grid-item:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
    color: #9d9d9d;
    padding-left: 0px;
}

@media only screen and (max-width: 650px) {

    .user-setting-grid {
        grid-template-columns: 1fr;
    }

    .user-setting-grid .setting-grid-item:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
        padding-left: 10px;
    }
}

@media only screen and (max-width: 380px) {

    .user-edit-area input {
        width: 100%;
    }
}

/*----------------------------------
/* User profile photo area
/*----------------------------------*/

.profile-photo {
    width: 115px;
    margin: auto;
    margin-bottom: 30px;
    position: relative;
    font-size: medium;
    text-align: center;
}

.profile-photo:hover {
    color: #373737;
    cursor: pointer;
    background-color: #fafafa;
}

.user-photo {
    width: 115px;
    height: 115px;
    font-size: 125px;
}

.photo-edit {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #39C2F0;
    text-align: left;
}

.photo-edit span {
    opacity: 0;
    margin-left: -5px;
}

.photo-edit i {
    color: white;
    opacity: 0.8;
    background-color: rgba(55,55,55,0.5);
    border-radius: 50%;
    padding: 5px;
    width: 15px;
    height: 15px;
    margin-left: 4.2px;
    margin-bottom: 4px;
}

.profile-photo:hover .photo-edit {
    background-color: rgba(55,55,55,0.5);
}

.profile-photo:hover span {
    opacity: 1;
    text-decoration: underline;
}

.profile-photo:hover i {
    opacity: 1;
    background-color: initial;
    color: #39C2F0;
}

.profile-photo-changer {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: rgba(224, 224, 224, 0.25);
    padding: 10px;
}

.profile-photo-changer .jrm-button {
    margin: 6px;
}

.jrm-button.save {
    width: 75px;
    text-align: center;
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 25px;
    margin-top: 25px;
}

.jrm-button.cancel {
    color: #39C2F0;
    cursor: pointer;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: #39C2F0;
    height: 29px;
}

.button-title {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0px;
    margin: 0px;
}

.jrm-button.save.snapshot {
    margin-left: 0px;
    margin-bottom: 0px;
}

.user-edit-area .jrm-button.cancel {
    width: 73px;
    text-align: center;
    display: inline-block;
    height: 29px;
}

.jrm-button.cancel:hover {
    border: #373737;
    border-style: solid;
    border-width: 1px;
}


/*------------------------------------------------------------------------
/* Dropdown popup
/*----------------------------------------------------------------------*/

.dropdown-box-grid {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 20px auto 1fr 20px;
    align-items: center;
    padding-top: 20px;
}

.dropdown-box-grid .box-grid-item:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-right: 20px;
}

.dropdown-box-grid .box-grid-item:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
}

.dropdown-box-grid .box-grid-item:nth-of-type(3) {
    grid-column: 3;
    grid-row: 2;
}

.dropdown-box-grid .box-grid-item:nth-of-type(4) {
    grid-column: 3;
    grid-row: 3;
    padding-top: 15px;
    padding-bottom: 15px;
    white-space: nowrap;
}

.dropdown-box-grid .box-grid-item:nth-of-type(5) {
    grid-column: 2;
    grid-row: 3;
    margin: auto;
    margin-top: 7px;
}

.dropdown-box-grid .box-grid-item:nth-of-type(6) {
    grid-column: 1/ span 4;
    grid-row: 4;
    background: #f7f7f7;
    border-top: thin solid #e4e4e4;
    padding: 20px;
}

.dropdown-box {
    margin: 30px 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-color: rgba(0,0,0,.2);
    color: #000;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    outline: none;
    overflow: hidden;
    position: absolute;
    right: 0;
    border-radius: 2px;
    z-index: 1000;
    display: none;
}

.open .dropdown-box {
    display : block;
}

.popup-title {
    font-size: 15px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: normal;
    color: rgb(16,16,16);
    white-space: nowrap;
}

.popup-subtitle {
    font-family: arial, serif;
    font-size: 14px;
    color: #5f5f5f;
}

.account-picture {
    width : 40px;
    height : 40px;
}

.user-profile-settings-button {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    color: #2a76dd;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.user-profile-settings-button:hover {
    color: #39C2F0;
    cursor: pointer;
}

#user-widget-star {
    padding-right: 20px;
}

#user-stars:hover {
    color: #39C2F0;
    cursor: pointer;
}

#logout {
    margin-left: auto;
}

/*------------------------------------------------------------------------
/* Reload page box
/*----------------------------------------------------------------------*/

.reload-page-box {
    position: fixed;
    bottom: 45px;
    right: 45px;
    border: 1px dotted darkgray;
    background-color: white;
    padding: 8px;
    z-index: 100;
    display: none;
}

    .reload-page-box.open {
        display: block;
    }

.reload-page-box-text {
    color: #817d7d;
    padding: 0px;
}

.reload-page-button {
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: white;
    cursor: pointer;
    padding: 3px;
    background-color: #e86969;
    width: 130px;
    text-align: center;
    line-height: 17px;
    margin-top: 5px;
}

.reload-page-button:hover {
    background-color: #8e0f0f;
}

/*------------------------------------------------------------------------
/* Modal popup box
/*----------------------------------------------------------------------*/

.modal-popup-box {
    position : fixed;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    background : rgba(0,0,0,0.6);
    z-index : 99999;
    display : none;
}

.modal-popup-box.open {
    display : block;
}

.popup-box-content-wrapper {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    width: 40%;
    position: relative;
}

.close-popup {
    position: absolute;
    top: 2px;
    right: 10px;
    transition: all 200ms;
    font-size: 28px;
    font-weight: bold;
    text-decoration: none;
    color: lightgray;
    cursor: pointer;
}

.close-popup:hover {
    color : #39C2F0;
}


/*------------------------------------------------------------------------
/* Layout Styles
/*----------------------------------------------------------------------*/

.column-full-screen {
    width: 97%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    overflow: hidden;
}

.column-half-screen {
    width: 47%;
    min-width: 300px;
    display: inline;
    float: left;
    position: relative;
    margin-left: 1.5%;
    margin-right : 1.5%;
    overflow: hidden;
}

.column-two-thirds-screen {
    width: 57%;
    min-width: 300px;
    display: inline;
    float: left;
    position: relative;
    margin-left: 1.5%;
    margin-right : 1.5%;
    overflow: hidden;
}

.column-one-third-screen {
    width: 37%;
    min-width: 300px;
    display: inline;
    float: left;
    position: relative;
    margin-left: 1.5%;
    margin-right : 1.5%;
    overflow: hidden;
}

.clear-float {
    clear: left;
}

.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

#prerequisites {
    margin-left : 10px;
}

#problems, #references {
    margin-left : 25px;
}

.mainview-default-template {
    height: 100%;
    overflow: auto;
}

/*------------------------------------------------------------------------
/* Tests content specific
/*----------------------------------------------------------------------*/

img[src*="lotto"], img[src*="permutations"] {
    max-height: 25px;
    margin: 20px 0px;
}

img[src*="overflow"] {
    width: 100%;
}

/*------------------------------------------------------------------------
/* Login and registration views
/*----------------------------------------------------------------------*/
#presentation-logo {
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    display: block;
}

#login-title, #operation-title {
    padding-top: 30px;
    text-align: center;
    margin-bottom: 35px;
}

#login-title-external {
    text-align: center;    
}

#registration-confirmation-title {
    margin-top: 20px;
}


#login-error {
    margin-top: 30px;
    margin-bottom: -20px;
    font-size : 16px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: normal;
    color : red;
    text-align: center;
}

#login-container {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
}

#registration-container {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#registration-confirmation-container {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

#login-form-left {
    width: 350px;
    float:left;
}

#login-form-right {
    width: 200px;
    float:left;
}


#signin {
    width: 130px;
    text-align: center;
}

.edit-user-button {
    width: 170px;
    text-align: center;
}

#start-courses {
    margin-left: auto;
    margin-right: auto;
}

#registration-retry {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#login-button {
    width: 130px;
    font-weight: 900;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    text-align: left;
}

#register-external, #cancel-registration {
    text-align: center;
    width: 150px;
    float: left;
    margin-right: 20px;
}

#registration-done a {
    text-decoration: none;
}

#auth-icon {
    width: 45px;
}

#remember-me-area {
    text-align: center;
    margin-top: 25px;
}

#remember-me-area input[type=button] {
    width: 16px;
    height: 16px;
    bottom: 2px;
}

#remember-me-area label {
    font-size: 16px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: rgb(16,16,16);
}

.accept-terms-area {
    margin-bottom: 25px;
}

.accept-terms-area p, .accept-terms-area label {
    padding-bottom: 0px;
}

.accept-terms-area a {
    color: #39C2F0;
}

/*------------------------------------------------------------------------
/* Forms
/*----------------------------------------------------------------------*/

input, select {
    border: 1px solid #e0e0e0;
    height: 30px;
    width: 300px;
    margin-bottom: 20px;
    padding-left: 5px;
    font-size :  14px;
    font-family : Arial, sans-serif;
}

input:hover, input:focus, select:hover, select:focus {
    border-color: #39C2F0;
    outline: initial;
}

input[type=checkbox]:focus, input[type=radio]:focus {
    outline-color: #39C2F0;
    outline-style: dotted;
}

.invalid-input, .invalid-input:focus, .invalid-input:hover {
    border-color: red;
    margin-bottom: 0px;
}

#invalid-input-message, #empty-input-message {
    color: red;
    margin-left: 10px;
}

input[type=checkbox] {
    position: relative;
    vertical-align: middle;
    bottom: 1px;
    width: 15px;
    height: 15px;
    margin: 0px;
}

input[type=radio] {
    position: relative;
    vertical-align: middle;
    bottom: 1px;
    width: 11px;
    height: 11px;
    margin: 0px;
}

textarea {
    border: 1px solid #e0e0e0;
    font-size: 14px;
    font-family: Arial, sans-serif;
    padding: 5px;
}

textarea:focus, textarea:hover {
    border-color: #39C2F0;
    outline : initial;
}

/*------------------------------------------------------------------------
/* Buttons
/*----------------------------------------------------------------------*/

.jrm-button {
    font-size: 16px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: 400;
    color: white;
    background-color: #39C2F0;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    width: 100px;
    height: 30px;
    line-height: 31px;
    text-align: center;
}

.jrm-button:hover {
	background-color:#373737;
}

/*------------------------------------------------------------------------
/* Home page
/*----------------------------------------------------------------------*/

.home-page-footer {
    width : 100%;
    margin-bottom : 15px;
    float : left;
}

.module-image-wrapper {
    min-width : 200px;
    max-width : 300px;
    margin-left : auto;
    margin-right : auto;
}

.module-summary-wrapper {
    width : auto;
    float : none;
    display : block;
    padding-right: 10px;
}

.module-image {
    height : 175px;
    margin-left : auto;
    margin-right : auto;
    display : block;
}

.module-start-button {
    width : 200px;
    text-align : center;
    margin-top : 30px;
    margin-bottom:30px; 
    font-size : 20px;
    height : 68px;
    margin-left : auto;
    margin-right : auto;
    display: table;
}

.module-title {
    display: table-cell;
    vertical-align: middle;
}

.module-section-title {
    margin-left : 15px;
    font-family : Arial, sans-serif;
    margin-top : 10px;
    font-size: 16px;
}

.module-list {
    font-size : 14px;
    font-family : Arial, sans-serif;
}

.module-list li {
    margin-left : 20px;
    margin-bottom : 15px;
    color : #5f5f5f;
}

.module-more-details {
    margin-top : 30px;
    margin-bottom: 10px;
    margin-left : 27px;
}

.module-details-wrapper {
    display : none;
}

.module-details-wrapper.open {
    display : block;
}

.module-lesson-item {
    width: 99%;
    float: left;
    background-color: rgba(224, 224, 224, 0.25);
    border: 1px solid rgba(224, 224, 224, 0.25);
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    min-height: 306px;
}

.column-half-screen .module-lesson-item {
    min-height: 320px;
}

.module-lesson-item.done {
    background-color: #F1FFF1;
    border: 1px solid #e7f5e7;
}

.module-lesson-item.done .module-title {
    font-family: "Lucida Sans Unicode", "Lucida Grande";
}

.module-lesson-item.done ul {
    position: absolute;
    margin: 0px;
}

.module-lesson-item.done .jrm-button{
    width: 150px;
    text-align: center;
    float: left;
    margin-top: 10px;
}

.module-lesson-item.done .module-image-wrapper {
    text-align: center;
}

.module-lesson-item.done .module-summary-wrapper {
    margin-left: 30px;
    margin-right: 10px;
    overflow: initial;
}

.module-lesson-item.done .dropdown-sections {
    min-height: 120px;
    width: 260px;
    position: absolute;
}

.module-lesson-item.done .dropdown-sections.open {
    display: initial;
}

.module-lesson-item.done .dropdown-menu {
    display: block;
}

.module-lesson-item.done .dropdown-title {
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0,0,0,.2);
    width: 250px;
    display: flex;
    justify-content: space-between;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    font-family: Arial, sans-serif;
}

.module-lesson-item.done .down-image {
    font-size: 14px;
    position: relative;
    top: 1.3px;
}

.module-lesson-item.done .module-section-title {
    font-size: 20px;
    font-family: Arial, sans-serif;
}

.module-lesson-item.done h4 {
    margin-bottom: 0px;
    font-family: Arial, sans-serif;
}

.module-lesson-item.done .correct-answer {
    top: 4px;
    left: 5px;
    position: relative;
}


/*------------------------------------------------------------------------
/* Error 500 page
/*----------------------------------------------------------------------*/
#error-500-page p, #error-500-page h1 {
    white-space: unset;
    text-align: center;
}

#error-500-page a {
    font-family: Arial, sans-serif;
    color: #39C2F0;
}

#error-500-page a:hover {
    color: #6ca0e8;
}

/*------------------------------------------------------------------------
/* Error 440 page
/*----------------------------------------------------------------------*/
#error-440-page p, #error-440-page h1 {
    white-space: unset;
    text-align: center;
}

#error-440-page a {
    font-family: Arial, sans-serif;
    color: #39C2F0;
}

#error-440-page a:hover {
    color: #6ca0e8;
}


/*------------------------------------------------------------------------
/* Evaluation view
/*----------------------------------------------------------------------*/

.problem-box {
    width : 97%;
    border-width : 1px;
    border-style : solid;
    border-color: #39C2F0;
    min-height : 100px;
    padding-left : 1%;
    padding-right : 1%;
    background-color : #eafaff;
}

.problem-box.disabled {
    border-color :  lightgray;
    background-color : white;
}

#evaluation-time-progress {
    width : 99%;
    margin-bottom : 30px;
}

#start-evaluation, #send-solution {
    width : 150px;
    margin-top : 59px; 
    text-align : center;
}

#send-question {
    width : 150px;
    text-align : center;
}

#send-question-label {
    margin-top:20px;
}

#send-file-title, #send-question-title {
    text-align : center;
}

#select-file {
    margin: 25px auto;
    width : 90%;
}

#close-send-file-popup {
    width: 150px;
    text-align: center;
    margin: 15px auto;
}

#question-text {
    resize: vertical;
    margin: 10px 2%;
    width: 96%;
    min-height: 100px;
}

#submit-question {
    width: 150px;
    text-align: center;
    margin: 10px auto;
}

#close-send-question-popup {
    width: 150px;
    text-align: center;
    margin-top: 15px;
    margin-bottom : 10px;
    margin-left: auto;
    margin-right: auto;
}

.question-sent-icon {
    float: left;
    color: #1FA67A;
    margin-right: 15px;
    padding-top: 12px;
}

.evaluation-error-icon {
    color: red;
    float: left;
    width: 25px;
}

.evaluation-passed-icon {
    color: #1FA67A;
    float: left;
    width: 25px;
}

.evaluation-done-msg {
    float: left;
    padding-right: 15px;
    width: calc(100% - 60px);
    padding-top: 0px;
}

.evaluation-done-link {
    cursor: pointer;
    color: #39C2F0;
    font-weight: bold;
}

/*------------------------------------------------------------------------
/* Quiz view
/*----------------------------------------------------------------------*/

.two-panels {
    padding-left: 9%;
    padding-right: 9%;
    width: 82% !important;
}

.two-panels .border-panel {
    height: calc(100% - 50px);
    margin-top: 25px;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
}

.quiz-data {
    margin: 12px 4%;
    width: 92%;
    min-height: 100px;
}

#quiz-progress {
    position: sticky;
    top: 97%;
    width: 96%;
    margin: 2%;
}

_:-ms-lang(x), _:-webkit-full-screen, #quiz-progress {
    position:relative;
    top: auto;
}

#quiz-right-side fieldset {
    border-width: 0;
    padding: 0;
    margin: 0;
}

#quiz-right-side span {
    padding-right: 10px;
}

.unordered-radio-list {
    list-style-type: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: normal;
}

.unordered-radio-list label{
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.multi-section-radio {
    padding-top: 12px;
    padding-bottom: 5px;
    font-weight: bold;
    text-align: left;
    color: #5f5f5f;
    display: block;
}

.single-section-radio {
    line-height: 30px;
}

.question-radio-button {
    white-space: unset;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
}

#options-body #inactive p {
    color: lightgray;
}

#radio-quiz {
    float:left;
}

.incomplete-answer-warning {
    color: #e86969;
    display: block;
    font-size: 14px;
}

.incomplete-answer-warning #incomplete-section {
    color: #5f5f5f;
    font-weight: bold;
}

.incorrect-answer, #not-processed-answer {
    color: #e86969;
    white-space: unset;
}

.correct-answer {
    color: #1FA67A;
    white-space: unset;
}

.pending-answer {
    color: #39c2f0;
    white-space: unset;
}

#feedback-body #md-content {
    padding: 10px 5px;
    text-align: left;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 20px;
    border-width: 1px;
    border-color: lightgray;
    border-style: solid;
}

.start-quiz-button {
    width: 150px;
    text-align: center;
    margin: auto;
    display: block;
}

.quiz-button {
    width: 175px;
    text-align: center;
    display: block;
    margin-top: 30px;
    margin-left: 0px;
    margin-bottom: 10px;
}

.quiz-button a, .quiz-button a:hover {
    color: white;
    font-size: 16px;
}

#consecutive-tries-message {
    color: #e86969;
}

#consecutive-tries-countdown {
    padding-top: 0px;
}

/*------------------------------------------------------------------------
/* Problems view
/*----------------------------------------------------------------------*/

.three-panels {
    padding-left: 5px;
    padding-right: 5px;
    width: calc(100% - 10px) !important;
}

.three-panels .border-panel {
    height: calc(100% - 15px);
    margin-top: 7.5px;
}

.problem-progress {
    margin-bottom: 24px;
}

.problem-button {
    width: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.problem-button#next-hint {
    margin-bottom: 10px;
}

.problem-icon {
    color: #39C2F0;
    padding-top: 2px;
    line-height: 1;
    float: left;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
}

.problem-hint-label {
    margin-left: 60px;
    margin-bottom: 20px;
}

.circled-number {
    display: inline-block;
    position: relative;
    top: -1px;
    left: 3px;
    height: 17px;
    width: 17px;
    line-height: 18px;
    border-radius: 30px;
    background-color: lightgray;
    text-align: center;
    font-size: 12px;
    font-family: Arial;
}

.requested-hints {
    margin-left: 15px;
}

.requested-hints #md-content ol {
    padding-left: 1em;
    margin-top: 0;
    font-family: Arial;
    color: #5f5f5f;
    font-size: 14px;
}

.hint-countdown-grid {
    display: grid;
    font-family: Arial, sans-serif;
    color: #5f5f5f;
    grid-template-columns: minmax(75px, 135px);
    grid-gap: 15px;
    align-items: center;
    padding: 12px 0px 12px 0px;
}

.hint-countdown-grid .hint-countdown-grid-item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    font-weight: bold;
}  

.hint-countdown-grid .hint-countdown-grid-item:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
}

.available-stars {
    padding-bottom: 12px;
    white-space: inherit;
}

#pending-icon {
    float: left;
    font-size: 25px;
    margin: 5px;
}

.problem-feedback p {
    padding-top: 5px;
    padding-bottom: 5px;
    white-space: normal;
}

.feedback-show-details {
    color: #39C2F0;
}

.feedback-link {
    color: #39C2F0;
    font-family: Arial, sans-serif;
}

.feedback-show-details:hover {
    cursor: pointer;
}

.problem-feedback .border-panel {
    border-color: #d3d3d3;
    width: calc(100% - 20px);
    padding: 10px;
    height: auto;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
}

.case-result-details {
    margin-left: 25px;
}

#case-result {
    white-space: pre-wrap;
}

.feedback-details .problem-panel {
    background: #f8f8f8;
    box-shadow: 0px 0px 2px 0px #888888;
}

.failed-feedback-panel {
    background: #ffe8e8;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
    margin-left: 25px;
}

.correct-solution .problem-button {
    width: 170px;
}

.text-inactive-true p, .text-inactive-true li, .text-inactive-true code {
    color: lightgray;
    filter: grayscale(100%);
}

/*------------------------------------------------------------------------
/* File upload
/*----------------------------------------------------------------------*/
.drop-area {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    border: 2px dashed lightgray;
}

.drop-area.hover {
    background-color: #eafaff;
}

.drop-area-text {
    font-size: 14px;
    text-align: center;
}

#browse-file {
    width: 180px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#browse-file-label {
    margin: auto;
}

.upload-error {
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: red;
    margin-top: 30px;
    margin-left: 5px;
    margin-right: 5px;
}

.input-file {
   display : none;
}

.input-file-label {
    padding-bottom: 4px;
    padding-top: 4px;
    padding-left: 20px;
    padding-right: 20px;
    margin: auto;
}

#upload-progress-area {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

.upload-file-icon {
    color: lightgray;
    padding-left: 4%;
    padding-top: 20px;
    float: left;
    width: 9%;
}

.upload-details {
    float: right;
    padding-right : 4%;
    width : 83%;
}

#upload-file-name {
    float: left;
    font-weight : bold;
}

#upload-file-size {
    float: left;
    padding-left: 15px;
}

#cancel-upload {
    float: right;
    font-size: 18px;
    padding-bottom : 0px;
    padding-top: 9px;
    cursor: pointer;
}

#progress-bar-container {
    clear : both;
}

#upload-percent {
    float : left;
}

#upload-speed {
    float: right;
}

.upload-done-icon {
    float: right;
    color: #1FA67A;
    padding-top: 12px;
}

.popup-box-content .preview-area {
    height: 300px;
    text-align: center;
}

.popup-box-content .preview-area .jrm-button.save{
    margin-left: 0px;
}

.popup-box-content .preview-area .jrm-button.cancel{
    width: 73px;
    text-align: center;
    display: inline-block;
    height: 29px;
}


.photo-upload .popup-box-content-wrapper {
    width: 28%;
}

.webcam-area {
    text-align: center;
}

.webcam {
    margin-left: auto;
    margin-right: auto;
}

.webcam-error {
    color: #e86969;
    font-size: medium;
}

.check-webcam {
    margin-top: 10px;
    color: #e86969;
    font-size: small;
}
.webcam-loading {
    color: gray;
    font-size: medium;
}

.allow-webcam {
    margin-top: 10px;
    color: gray;
    font-size: small;
}

.crop-area {
    height: calc(100% - 40px);
}

input[type=range] {
    height: 40px;
}

/*------------------------------------------------------------------------
/* Simple progress bar
/*----------------------------------------------------------------------*/
.simple-progresbar-backline {
    width: 100%;
    height: 5px;
    background-color: lightgray;
}

.progressbar-left-line {
    height : 5px;
    background-color : #39C2F0;
    float : left;
}

.progressbar-right-line {
    height : 5px;
    background-color : #f09494;
    float : right;
}

/*------------------------------------------------------------------------
/* Steps lesson progress bar
/*----------------------------------------------------------------------*/

.lesson-progress-area {
    margin-right: 20px;
    margin-left: 20px;
}

.lesson-progress-calendar {
    margin-top: 50px;
    margin-bottom: 50px;
}

.simple-lessonprogresbar-backline {
    width: 100%;
    height: 5px;
    background-color: #e86969;
}

.lesson-progressbar-right-line {
    background-color: #ffffffbf;
    float: right;
    height: 20px;
    position: relative;
    top: -15px;
}

.lesson-progress-0-line, .lesson-progress-1-line {
    height: 5px;
    background-color: #1FA67A;
    float: left;
}

.lesson-progress-2-line {
    height: 5px;
    background-color: #ffcb15;
    float: left;
}

.lesson-progress-3-line {
    height: 5px;
    background-color: #e86969;
    float: left;
}

.lesson-progress-bullet {
    width: 15px;
    height: 15px;
    float: right;
    position: relative;
    top: -5px;
    border-radius: 7px;
    left: 7.5px;
}

.lesson-progress-bullet-0 {
    background-color: #1FA67A;
}

.lesson-progress-bullet-1 {
    background-color: #ffcb15;
}

.lesson-progress-bullet-2 {
    background-color: #e86969;
}

.stars-area {
    color: #e6d70b;
}

.stars-icon {
    position: absolute;
    bottom: 20px;
    margin-left: -100%;
    display: block;
    width: 45px;
    text-align: center;
}

.star-icon {
    position: absolute;
    bottom: 20px;
    margin-left: -100%;
    width: 45px;
    text-align: center;
    display: none;
    font-size: 15px;
}

.stars-number-label {
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.finish-icon {
    z-index: 1;
    position: absolute;
    bottom: 10px;
    width: auto;
}

.days {
    display: grid;
    text-align: center;
    white-space: nowrap;
    margin-top: 10px;
    margin-left: -50%;
}

.lesson-progress-status {
    white-space: inherit;
}

.lesson-progress-status span{
     display: inline-block;
}

.lesson-progress-status #time{
    font-weight: bold;
}


.lesson-complete-status {
    color: #1FA67A;
}

@media only screen and (max-width: 500px) {

    .days {
        white-space: normal;
        margin-left: -25%;
    }

    .stars-icon {
        display: none;
    }

    .star-icon {
        display: block;
    }
}

/*------------------------------------------------------------------------
/* Steps progress bar
/*----------------------------------------------------------------------*/

.steps-progresbar-backline {
    width: 97%;
    height: 15px;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 180px;
    margin-top: 50px;
}

.steps-progressbar-left-line {
    height: 5px;
    background-color: #39C2F0;
    float: left;
}

.steps-progressbar-right-line {
    height: 5px;
    background-color: #D3D3D3;
    float: right;
}

.items-list {
    list-style-type: none;
    padding-left: 0;
}
.step-width {
    float: left;
}

.progress-bullet {
    width: 15px;
    height: 15px;
    float: right;
    position: relative;
    top: -10px;
    border-radius: 7px;
}

.progress-bullet-passed {
    background-color: #39C2F0;
}

.progress-bullet-passed:hover {
    background-color: #0c7091;
}

.progress-bullet-inactive {
    background-color: lightgray;
}

.progress-bullet-inactive:hover {
    background-color: dimgray;
}

.progress-bullet-active {
    background-color: #0c7091;
}

.bullet-arrow-frame {
    position: absolute;
    top: -15px;
    border-width: 8px;
    border-style: solid;
    border-color: dimgray transparent transparent transparent;
}

.bullet-arrow {
    z-index: 1;
    position: absolute;
    top: -17px;
    border-width: 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.bullet-ballon {
    position: absolute;
    bottom: 30px;
    left: 50%;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    width: 180px;
    background-color: white;
    border-color: dimgray;
}

.bullet-title {
    margin-left: 10px;
    padding-bottom: 3px;
    padding-top: 10px;
}

.bullet-description {
    margin-left: 10px;
    padding-bottom: 10px;
    padding-top: 3px;
    margin-right: 10px;
}

.bullet-description a{
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #39C2F0;
    font-weight:bold;
}

.ballon {
    position: absolute;
    left: 50%;
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    width: 260px;
    border-color: #39C2F0;
}

.ballon-title {
    margin-left: 10px;
    margin-bottom: 3px;
    margin-top: 10px;
}

.ballon-description {
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 3px;
    margin-right: 10px;
}

.progress-bullet-active:hover .ballon {
    border-color: #0c7091;
}

.progress-bullet-active:hover .ballon-arrow-frame {
    border-color: transparent transparent #0c7091 transparent;
}

.ballon-arrow-frame {
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #39C2F0 transparent;
}

.ballon-arrow {
    z-index: 1;
    position: absolute;
    top: 24px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

.ballon-button {
    width: 170px;
    text-align: center;
    margin: auto;
    margin-bottom: 10px;
}

.progress-percent {
    z-index: -1;
    position: relative;
    top: -22px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

.tooltip {
    display: none;
}

.progress-bullet:hover .tooltip {
    display: block;
}

/*------------------------------------------------------------------------
/* Headers, Pharagraphs and Text Styles
/*----------------------------------------------------------------------*/

h1 {
    margin-top: 0px;
    padding-top: 10px;
    margin-bottom : 20px;
    font-size : 24px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: 400;
    color : rgb(16,16,16);
}

h2 {
    position : relative;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size : 16px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: normal;
    color : rgb(16,16,16);
}

h3 {
    font-size: 18px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: normal;
    color: #5f5f5f;
}

h4 {
    font-size : 15px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: normal;
    color : rgb(16,16,16);
}

p, pre, label {
    font-size :  14px;
    font-family : Arial, sans-serif;
    color: #5f5f5f;
    margin: 0px;
    padding-top: 12px;
    padding-bottom: 12px;
    white-space:pre-wrap;
}

a {
    font-size : 14px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: normal;
    color : rgb(16,16,16);
    text-decoration: none;
    transition: color .5s;
}

a:hover {
    color: #39C2F0;
}

.footnote {
    padding-top: 40px;
    clear:both;
    text-align : center;
}

.footnote p {
    font-size :  15px;
}

.footnote a {
    font-size :  15px;
    font-family : Arial, sans-serif;
    color: #39C2F0;    
    text-decoration: underline;
}

.error-msg {
    color : red;
}

#reference_item a {
    font-size: 14px;
}

.title-and-subtitle h1 {
    padding-top: 15px;
    margin-bottom: 3px;
}

.title-and-subtitle p, .title-and-subtitle pre {
    padding-top: 0px;
}

.title-and-description-centered {
    margin-bottom: 25px;
    text-align: center;
}

.title-and-description-centered h1 {
    padding-top: 3%;
    margin-bottom: 10px;
    font-weight: bolder;
    font-size: x-large;
        padding-left: 20%;
    padding-right: 20%;

}

.title-and-description-centered p {
    padding-top: 10px;
    margin-bottom: 10px;
    font-weight: normal;
    font-size: medium;
    padding-left: 20%;
    padding-right: 20%;
}

.underline {
    text-decoration: underline;
}

.bold {
    font-weight : bold;
}

.bold.disabled {
    color : lightgray;
}

#home-icon {
    font-size: 24px;
    color: rgb(16,16,16);
}

#home-icon:hover {
    color: #39C2F0;
}

.change-password {
    float: right;
    margin-right: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    height: 25px;
    padding: 0px;
    color: #39C2F0;
    text-decoration: underline;
}

.change-password a {
    color: #39C2F0;
    text-decoration: underline;
}

.simple-checkbox-label {
    white-space: initial;
    display: inline-block;
}

/*------------------------------------------------------------------------
/* Panels view
/*----------------------------------------------------------------------*/

.border-panel-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fafafa;
    overflow: auto;
}

.border-panel {
    float: left;
    position: relative;
    display: inline-block;
    background-color: white;
    text-align: left;
    vertical-align: top;
    border-color: #c3c3c3;
    border-width: thin;
    border-style: solid;
    overflow-y: auto;
    width: calc(100% - 10px);
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
}

.panel-content {
    padding: 10px;
}

.half-screen {
    width: 50%;
    float: left;
    height: 100%;
}

.forty-percent-screen {
    width: 40%;
    float: left;
    height: 100%;
}

.thirty-percent-screen {
    width: 30%;
    float: left;
    height: 100%;
}

.border-bottom {
    margin: 0px;
    text-align: left;
    padding-top: 0px;
    margin-bottom: 5px;
    border-bottom-color: darkgray;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

/*------------------------------------------------------------------------
/* Lists Styles
/*----------------------------------------------------------------------*/


.list ul, .list-arrow ul, .list-toggle ul {
    padding-left : 0;
    list-style: none;
}

.list-arrow li {
    background-image: url(images/list-arrow.png);
    background-repeat: no-repeat;
    padding: 0 0 5px 25px;
}

.list li {
    padding: 0 0 5px 25px;
}

.toggle-li {
    font-size : 14px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: normal;
    color : rgb(16,16,16);
    clear:left;
    line-height: 30px;
    height: 30px;
    margin-top : 10px;
    transition:all .5s;
    cursor:pointer;
}

.toggle-li:hover {
    color:#ffffff;
	background-color:#39C2F0;
}

.toggle-li-state-active {
   color:  #39C2F0;
}

.toggle-li-sign {
	width:20px;
	height:20px;
	float:left;
	cursor:pointer;
	color:#ffffff;
	background-color:#474747;
	text-align:center;
	font-weight:bold;
	font-size:18px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	line-height:20px;
    margin-right: 10px;
    margin-top: 4px;
}

.toggle-li-sign-active {
    color:#ffffff;
	background-color:#39C2F0;
}

#toggle-li-content {
    margin-left: 30px;
}

#md-content ul {
   font-size : 14px;
   font-family : Arial, sans-serif;
   color : #5f5f5f;
}

/*------------------------------------------------------------------------
/* Thumbnails styles
/*----------------------------------------------------------------------*/

.lesson-item-box {
    float: left;
    margin: 10px 20px 10px 0px;
}

.lesson-item-style {
    width: 180px;
    height: 110px;
    background-size: 100%;
    background-repeat: no-repeat;
    color: #f3f3f3;
    text-align: center;
    padding-top: 5px;
}

.lesson-item-style:hover {
    color: #39C2F0;
    transition:all .5s;
}

.lesson-item-text {
    background-image: url(images/presentation-text.png);
}

.lesson-item-text .lesson-item-title {
    padding-top: 5px;
}

.lesson-item-text:hover {
    background-image: url(images/presentation-text-focused.png);
}

.lesson-item-video {
    background-image: url(images/presentation-video.png);
    color: rgb(77,77,77);
}

.lesson-item-video .lesson-item-title {
    padding-top: 10px;
}

.lesson-item-video:hover {
    background-image: url(images/presentation-video-focused.png);
}

.lesson-item-problem {
    background-image: url(images/problem.png);
}

.lesson-item-problem .lesson-item-title {
    padding-top: 77px;
}

.lesson-item-problem:hover {
    background-image: url(images/problem-focused.png);
}

.lesson-item-quiz {
    background-image: url(images/quiz.png);
}

.lesson-item-quiz .lesson-item-title {
    padding-top: 77px;
}

.lesson-item-quiz:hover {
    background-image: url(images/quiz-focused.png);
}

.lesson-item-unlock {
    background-image: url(images/next-lesson.png);
    color: black;
}

.lesson-item-unlock:hover {
    background-image: url(images/next-lesson-focused.png);
}

.lesson-item-lock, .lesson-item-lock:hover {
    background-image: url(images/next-lesson-disabled.png);
    color: black;
    cursor: default;
}

.lesson-item-lock .lesson-item-title, .lesson-item-unlock .lesson-item-title {
    padding-top: 65px;
}

.check-icon {
    font-size: 13.9px;
    position: relative;
    margin-top: -28px;
    margin-left: 160px;
    display: table-caption;
}

.lesson-item-image {
    max-width: 80%;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-top: 20px;
    max-height: 200px;
}

/*------------------------------------------------------------------------
/* Video presentation styles
/*----------------------------------------------------------------------*/

.youtube {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
    background-size:100%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
    text-align: center;
}
 
.youtube .play {
    background: url("images/play_inactive_100.png") no-repeat 50% 60%;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .8;
    filter: alpha(opacity=80);
    transition: all 0.5s ease-out;
}
 
.youtube .play:hover {
    background: url("images/play_active_100.png") no-repeat 50% 60%;    
    color: #39C2F0;
    opacity: 1;        
    filter: alpha;
}

#video-presentation {
  width: 100%;
  color : rgb(16,16,16);
}

#video-presentation-thumbnail {
    background-image: url("images/video-thumbnail.svg");    
}

#video-presentation-title {
    position: absolute;
    top: 27%;
    font-size : 3em;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: 400;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

/*------------------------------------------------------------------------
/* Progress animation
/*----------------------------------------------------------------------*/

@keyframes simple-progress {
    0% {width: 4px;}
    10% {width: 8px;}
    20% {width: 12px;}
    30% {width: 16px;}
    40% {width: 20px;}
    50% {width: 24px;}
    60% {width: 28px;}
    70% {width: 32px;}
    80% {width: 36px;}
    90% {width: 40px;}
    100% {width: 44px;}
}

.progress-dots {
    animation-name : simple-progress;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    display : inline-block;
    overflow : hidden;
    position : relative;
    top : 7px;
}

/*------------------------------------------------------------------------
/* Platform installation
/*----------------------------------------------------------------------*/

.input-with-button {
    display: inline;
}

.input-with-button #newJudgeURL {
    width: 246px;
}

.editable-list .input-with-button input{
    margin-bottom: 4px;
}

.editable-list .input-with-button .jrm-button {
    display: inline-block;
    position: relative;
    padding: 0px;
    width: 45px;
    line-height: 32px;
}

.editable-list ul {
    list-style: none;
    min-height: 90px;
    max-height: 10px;
    overflow-y: auto;
    border-style: solid;
    border-width: 1px;
    border-color: #e0e0e0;
    width: 300px;
    text-align: left;
    padding-left: 0px;
    margin-top: 0px;
}

.editable-list ul:hover {
    border-color: #39C2F0;
    outline: initial;
}

.editable-list li {
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.editable-list li:hover {
    background-color: lightgray;

}

.editable-list .remove {
    float: right;
    margin-right: 8.5px;
}

.editable-list .remove:hover {
    color: #39C2F0;
}

#installation-form h3 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#install-button {
    margin-top: 2em;
    width: 150px;
    line-height: 27px;
}

/*------------------------------------------------------------------------
/* Responsiveness styles
/*----------------------------------------------------------------------*/
@media only screen and (max-width: 1450px) {
    #module-details, #module-next-steps {
       width: 97%;
    }

}

@media only screen and (max-width: 1275px) {

    .youtube .play {
       background: url("images/play_inactive_100.png") no-repeat 50% 57%;
    }

    .youtube .play:hover {
       background: url("images/play_active_100.png") no-repeat 50% 57%;
    }

    .module-image-wrapper {
        width : 100%;
        max-width : none;
    }

    .column-full-screen .module-lesson-item.done .column-half-screen.module-image-wrapper {
        width: 47%;
    }

    .column-half-screen .module-lesson-item {
        min-height: 560px;
    }

    .question pre {
        width: 70%;
    }

}

@media only screen and (max-width: 1130px) {

    .solution-file-icon {
        width: 13%;
    }

    .upload-details {
        width: 79%
    }

    .photo-upload .popup-box-content-wrapper {
        width: 35%;
    }
}

@media only screen and (max-width: 1073px) {

    .module-lesson-item.done .dropdown-sections {
        min-height: 100px;
    }

}

@media only screen and (max-width: 1050px) {

    .youtube .play {
       background: url("images/play_inactive_66.png") no-repeat 50% 54%;
    }

    .youtube .play:hover {
       background: url("images/play_active_66.png") no-repeat 50% 54%;
    }

    .question pre {
        width: 90%;
    }

}

@media only screen and (max-width: 960px) {
    .photo-upload .popup-box-content-wrapper {
        width: 40%;
    }
}

@media only screen and (max-width: 945px) {
    .column-half-screen .module-lesson-item {
        min-height: 610px;
    }

    .module-lesson-item.done .dropdown-sections {
        min-height: 120px;
    }

}

@media only screen and (max-width: 830px) {

    .column-two-thirds-screen, .column-one-third-screen {
        width: 97%;
    }

    #video-presentation-title {
        top: 35%;
        font-size: 2em;
    }

    .dropdown-button-text {
        display : none;
    }

    .dropdown-button:hover {
        background-color : initial;
    }

    .dropdown-button:hover .jrm-icon-background .jrm-icon {
        color : #373737;
    }

    #start-evaluation, #send-solution {
        margin-top : 0px; 
    }

    #start-evaluation, #send-solution, #send-question-label, #send-question {
        margin-left : auto;
        margin-right : auto;
    }

    #send-question-label {
        text-align : center;
    }

    .popup-box-content-wrapper {
        width: 80%;
    }

    .photo-upload .popup-box-content-wrapper {
        width : 50%;
    }

    .solution-file-icon {
        width: 10%;
    }

    .upload-details {
        width: 82%
    }

    .column-half-screen .module-lesson-item {
        min-height: 630px;
    }

}

@media only screen and (max-width: 675px) {

    .quiz-question-body {
        margin: 0px;
        width: 100%;
        border-width: 0px;
        height: auto;
    }

    .quiz-question {
        overflow: auto;
        height: auto;
    }

    #feedback-body #md-content {
        margin-right: 18px;
    }

    .quiz-question-body #quiz-progress {
        margin-right: 20px;
    }

    .quiz-question h1 {
        margin-right: 20px;
    }

    .quiz-question pre {
        width: 96%;
    }

}

@media only screen and (max-width: 660px) {

    .column-half-screen {
        width: 97%;
    }

    .column-half-screen .module-lesson-item {
        min-height: initial;
    }

    .module-lesson-item.done .dropdown-sections {
        min-height: 47px;
    }

    .column-full-screen .module-lesson-item.done .column-half-screen.module-image-wrapper {
        width: 97%;
    }

    .photo-upload .popup-box-content-wrapper {
        width: 60%;
    }

}

@media only screen and (max-width: 575px) {

    .youtube .play {
       background: url("images/play_inactive_40.png") no-repeat 50% 51%;
    }

    .youtube .play:hover {
       background: url("images/play_active_40.png") no-repeat 50% 51%;
    }

    #video-presentation-title {
       top: 42%;
       font-size: 1.2em;
    }

    #login-container {
        width : 350px;
    }

    #registration-container, #registration-confirmation-container {
        width : 350px;
        text-align : center;
    }

    #login-form-left {
        text-align : center;
    }

    #signin, .edit-user-button {
        margin-left: auto;
        margin-right: auto;
    }

    #register-external, #cancel-registration {
        margin-left: auto;
        margin-right: auto;
        float: initial;
        margin-bottom: 15px;
    }

    #login-form-right {
        width : 350px;
        margin-top : 20px;
    }

    .solution-file-icon {
        width: 13%;
    }

    .upload-details {
        width: 79%
    }

    .photo-upload .popup-box-content-wrapper {
        width: 70%;
    }

}

@media only screen and (max-width: 500px) {

    #back-caption, #logo img {
        display:none;
    }

    #logo {
        width : 24px;
        height : 24px;
        background-position: center;
        background-size: 100%;
        background-image: url(favicon.ico); 
    }

}

@media only screen and (max-width: 425px) {

    .photo-upload .popup-box-content-wrapper {
        width: 80%;
    }

}

@media only screen and (max-width: 400px) {

    .solution-file-icon {
        width: 22%;
    }

    .upload-details {
        width: 70%
    }

}

@media only screen and (max-width: 900px) {
 
    .three-panels {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }

    .three-panels .border-panel, .three-panels .thirty-percent-screen, .three-panels .forty-percent-screen {
        height: auto;
        width: 100%;
        margin: 0px;
        border-style: none;
    }

    .problem-feedback .border-panel {
        width: calc(100% - 20px);
        border-style: solid;
        margin-top: 7.5px;
        margin-bottom: 15px;
    }

}

@media only screen and (max-width: 800px) {

    .two-panels .border-panel {
        height: auto;
        width: 100%;
        margin: 0px;
        border-style: none;
    }

    .two-panels .half-screen, .two-panels {
        height: auto;
        width: 100% !important;
        padding-left: 0%;
        padding-right: 0%;
    }
}

@media only screen and (max-height: 570px) {
    
    .quiz-question {
        height: 90vh;
    }

}

@media only screen and (max-height: 500px) {

    .quiz-question {
        height: 87vh;
    }
}

@media only screen and (max-height: 430px) {

    .quiz-question {
        height: 84vh;
    }
}

@media only screen and (max-height: 404px) {

    .quiz-question {
        height: 82vh;
    }
}