/* font styles */
.fblue {
  color: #76c1ae; }

.fwhite {
  color: #fff; }

.center {
  text-align: center; }

*, *:before {
  outline: none;
  box-sizing: border-box; }

i {
  font: normal normal normal 14px/1 FontAwesome !important; }

html, body {
  height: 100%; }

html body {
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: white;
  background: url("/assets/images/bapp-background.jpg");
  background-size: cover; }

header {
  position: relative; }

.branding {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  position: absolute;
  cursor: pointer; }

a {
  text-decoration: none;
  color: white; }

button {
  cursor: pointer;
  /* Styles for Portrait screen */ }

header {
  height: 17vw;
  box-sizing: border-box;
  padding: 0 3vw;
  font-size: 10vw;
  border-bottom: 0px solid white; }
  header div.branding {
    display: inline-block;
    vertical-align: middle; }

main {
  width: 95%;
  box-sizing: border-box;
  background: none;
  padding: 5vw;
  margin: 0 auto; }
  main .box {
    position: relative; }
  main .circle-border {
    width: 85vw;
    height: 85vw;
    border: 1vw solid #fff;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    overflow: hidden;
    margin: 0 auto; }
  main.lock-height {
    border: 3px solid green; }
  main.lock-width {
    border: 3px solid blue; }

nav {
  height: 18vw;
  box-sizing: border-box;
  background: none;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center; }
  nav img {
    width: 18%; }

info {
  width: 100%;
  font-size: 5vw;
  line-height: 140%;
  color: white;
  background: none;
  float: left;
  text-align: center;
  box-sizing: border-box; }
  info p {
    background: rgba(0, 0, 0, 0.3);
    padding: 5% 5%;
    margin: 0;
    font-size: 4vw; }

@media all and (orientation: landscape) {
  header {
    height: 10vh;
    font-size: 6vh; }

  nav {
    height: 10vh; }

  main {
    height: 64vh; }
    main .circle-border {
      width: 50vh;
      height: 50vh;
      border: 1vh solid #fff; }

  info {
    font-size: 5vh; }
    info p {
      padding: 0 5%;
      font-size: 4vh; } }

nav {
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.1) 100%);
  display: none; }
  nav.active {
    display: block; }
  nav a {
    display: inline-block;
    background-size: 600%;
    background-image: url(/assets/images/buteyko_menu_icons.svg);
    background-position: 0 0; }
    nav a#test.active {
      background-position: 0 20%; }
    nav a#basic {
      background-position: 20% 0; }
      nav a#basic.active {
        background-position: 20% 20%; }
    nav a#steps {
      background-position: 40% 0; }
      nav a#steps.active {
        background-position: 40% 20%; }
    nav a#summary {
      background-position: 60% 0; }
      nav a#summary.active {
        background-position: 60% 20%; }
    nav a#settings {
      background-position: 80% 0; }
      nav a#settings.active {
        background-position: 80% 20%; }

@media all and (orientation: portrait) {
  nav a {
    margin: 1.5vw 1.5vw 1.5vw 1.5vw;
    width: 14vw;
    height: 14vw; } }

@media all and (orientation: landscape) {
  nav a {
    margin: 0.5vh 1vh;
    width: 8.5vh;
    height: 8.5vh; } }

.noselect {
  /* iOS Safari */
  -webkit-touch-callout: none;
  /* Safari */
  -webkit-user-select: none;
  /* Konqueror HTML */
  -khtml-user-select: none;
  /* Firefox */
  -moz-user-select: none;
  /* Internet Explorer/Edge */
  -ms-user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  user-select: none; }

main {
  height: auto;
  font-size: 100%; }
  main h1 {
    color: white;
    font-size: 130%;
    margin: 0;
    font-weight: 600; }
  main h2 {
    color: #9ff;
    font-size: 110%;
    margin: 0 0 5% 0;
    font-weight: 300; }
  main h4 {
    font-weight: 400;
    font-size: 120%;
    margin-bottom: 10px;
    margin-top: 0; }
  main .icon {
    float: left;
    margin-right: 2vw;
    width: 50px;
    height: 50px; }
  main div.box h3 {
    list-style-type: none;
    padding: 5% 5%;
    background: rgba(0, 0, 0, 0.3);
    margin: 2% 0 0 0;
    cursor: pointer;
    font-weight: normal; }
  main dl {
    padding: 5% 5%;
    background: rgba(0, 178, 178, 0.4);
    margin: 0;
    border-top: 1px solid white;
    line-height: 140%; }
  main a.button {
    text-decoration: none;
    background: rgba(0, 178, 178, 0.4);
    border-radius: 10px;
    padding: 5%;
    margin: 3% 0 3% 0;
    float: left; }

@media all and (orientation: landscape) {
  main.home, main.results {
    max-width: 750px; }
    main.home div.box h3, main.results div.box h3 {
      padding: 3% 5%; }
    main.home dl, main.results dl {
      padding: 3% 5%; } }

.highcharts-legend {
  background: rgba(0, 0, 0, .5); }

.chartje {
  min-height: 400px; }

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  /* Style the tab */ }
  .tg th, .tg td {
    font-size: 3vw;
    text-align: center; }
  .tg th {
    background-color: rgba(0, 0, 0, .2);
    padding: 2% 2%;
    font-weight: normal; }
  .tg tbody tr {
    background: rgba(0, 0, 0, 0.0); }
    .tg tbody tr:nth-child(even) {
      background: rgba(0, 0, 0, 0.1); }
    .tg tbody td {
      padding: 2% 1%;
      font-family: 'Droid Sans'; }
    .tg tbody td:nth-child(3), .tg tbody td:nth-child(5) {
      color: #9ff;
      font-weight: 400; }
    .tg tbody td span.remark img, .tg tbody td span.delete img {
      width: 4vw; }

div.tabs {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex; }

div.tabsmini {
  border-bottom: 1px solid white;
  border-top: 3vw solid rgba(0, 0, 0, 0.01);
  /* Style the buttons inside the tab */ }

button.tablinks {
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  border-bottom: 3px solid transparent;
  float: left;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  color: white;
  font-size: 5vw;
  padding: 2vw 3vw; }

button.tabsublinks {
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  color: white;
  background: none;
  padding: 2vw 3vw;
  margin-bottom: 0;
  border: none;
  font-size: 3vw;
  /* Change background color of buttons on hover */ }

button.tablinks:hover, button.tabsublinks:hover {
  /* Create an active/current tablink class */ }

button.tablinks.active {
  border-bottom: 3px solid white; }

button.tabsublinks {
  /* Style the tab content */ }
  button.tabsublinks.active {
    color: black;
    background-color: white; }

.tabcontent, .tabsubcontent {
  display: none; }

.tabcontent {
  padding-top: 2vw;
  background: rgba(0, 178, 178, 0.4); }

.tabsubcontent {
  padding: 0 0 5% 0; }

@media all and (orientation: landscape) {
  .tg th, .tg td {
    font-size: 2vh; }

  button.tablinks {
    font-size: 2.8vh; }

  button.tabsublinks {
    font-size: 2.8vh; } }

.switch {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 14px; }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s; }
  .slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s; }

input:checked + .slider {
  background-color: #2e5959; }

input:focus + .slider {
  box-shadow: 0 0 0px #2e5959; }

input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px); }

.slider.round {
  border-radius: 34px; }
  .slider.round:before {
    border-radius: 50%; }

.green:before {
  background: rgba(89, 178, 0, 0.5); }

.orange:before {
  background: rgba(0, 0, 0, 0.2); }

.red:before {
  background: rgba(255, 92, 38, 0.5); }

.blue:before {
  background: rgba(0, 178, 178, 0.5); }

.circle-part {
  position: relative;
  overflow: hidden;
  float: left;
  height: 0; }
  .circle-part * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .circle-part:before {
    content: '';
    position: absolute;
    height: 0; }
  .circle-part label {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: transparent; }
    .circle-part label.large {
      font-size: 20vw;
      font-family: 'Droid Sans'; }
    .circle-part label.small {
      font-size: 8vw; }
  .circle-part.button > label:active, .circle-part.button > label:hover, .circle-part.button > label:focus {
    background: rgba(0, 0, 0, .1); }
  .circle-part.circle-full {
    width: 100%;
    padding-bottom: 100%; }
    .circle-part.circle-full:before {
      width: 100%;
      padding-bottom: 100%;
      border-radius: 50%;
      top: 0; }
    .circle-part.circle-full span.smile {
      background-image: url(/assets/images/buteyko_menu_icons.svg);
      background-position: 20% 100%;
      width: 100%;
      height: 100%;
      background-size: 600%;
      justify-content: center;
      display: flex;
      align-items: center; }
  .circle-part.circle-top {
    width: 100%;
    padding-bottom: 50%; }
    .circle-part.circle-top:before {
      width: 100%;
      padding-bottom: 100%;
      border-radius: 50%;
      top: 0; }
    .circle-part.circle-top.circle-top-70 {
      padding-bottom: 70%; }
    .circle-part.circle-top.circle-top-60 {
      padding-bottom: 60%; }
  .circle-part.circle-bottom {
    width: 100%;
    padding-bottom: 50%; }
    .circle-part.circle-bottom:before {
      width: 100%;
      padding-bottom: 100%;
      border-radius: 50%;
      bottom: 0; }
    .circle-part.circle-bottom.circle-bottom-30 {
      padding-bottom: 30%; }
    .circle-part.circle-bottom.circle-bottom-40 {
      padding-bottom: 40%; }
  .circle-part.circle-bottomleft, .circle-part.circle-bottomright {
    width: 50%;
    padding-bottom: 50%; }
    .circle-part.circle-bottomleft:before, .circle-part.circle-bottomright:before {
      width: 200%;
      padding-bottom: 200%;
      border-radius: 50%;
      bottom: 0; }
    .circle-part.circle-bottomleft label, .circle-part.circle-bottomright label {
      height: 50% !important;
      font-size: 6vw; }
  .circle-part.circle-bottomright:before {
    right: 0; }
  .circle-part.retry:before {
    background: rgba(255, 92, 38, 0.4); }
  .circle-part.save:before {
    background: rgba(89, 178, 0, 0.4); }
  .circle-part.start:before {
    background: rgba(0, 178, 178, 0.4); }
  .circle-part.stop:before {
    background: rgba(255, 92, 38, 0.4); }
  .circle-part.red:before {
    background: rgba(255, 92, 38, 0.7); }
  .circle-part.green:before {
    background: rgba(89, 178, 0, 0.4); }
  .circle-part.blue:before {
    background: rgba(0, 178, 178, 0.4); }
  .circle-part.orange:before {
    background: rgba(255, 92, 38, 0.4); }
  .circle-part.lightorange:before {
    background: rgba(255, 92, 38, 0.4); }

@media all and (orientation: landscape) {
  .circle-part label.large {
    font-size: 13vh; }
    .circle-part label.small {
      font-size: 3.5vh; } }

main .circle-border #btnIncrement, main .circle-border #btnDecrement, main .circle-border #btnInc1, main .circle-border #btnInc10, main .circle-border #btnDec1, main .circle-border #btnDec10 {
  position: absolute;
  width: 100%;
  height: 25%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15vw; }
  main .circle-border #btnIncrement.hidden, main .circle-border #btnDecrement.hidden, main .circle-border #btnInc1.hidden, main .circle-border #btnInc10.hidden, main .circle-border #btnDec1.hidden, main .circle-border #btnDec10.hidden {
    display: none; }
  main .circle-border #btnIncrement span, main .circle-border #btnDecrement span, main .circle-border #btnInc1 span, main .circle-border #btnInc10 span, main .circle-border #btnDec1 span, main .circle-border #btnDec10 span {
    height: 8vw;
    width: 8vw;
    background-size: 600%;
    background-image: url(/assets/images/buteyko_menu_icons.png);
    background-position: 0% 80%; }
  main .circle-border #btnIncrement:active, main .circle-border #btnDecrement:active, main .circle-border #btnInc1:active, main .circle-border #btnInc10:active, main .circle-border #btnDec1:active, main .circle-border #btnDec10:active {
    background: rgba(0, 0, 0, .25); }
  main .circle-border #btnIncrement, main .circle-border #btnInc1, main .circle-border #btnInc10 {
    top: 0px; }
  main .circle-border #btnIncrement.button-topleft, main .circle-border #btnInc1.button-topleft, main .circle-border #btnInc10.button-topleft {
    width: 50%;
    left: 0; }
  main .circle-border #btnIncrement.button-topleft span, main .circle-border #btnInc1.button-topleft span, main .circle-border #btnInc10.button-topleft span {
    position: relative;
    left: 35%; }
  main .circle-border #btnIncrement.button-topright, main .circle-border #btnInc1.button-topright, main .circle-border #btnInc10.button-topright {
    width: 50%;
    right: 0; }
  main .circle-border #btnIncrement.button-topright span, main .circle-border #btnInc1.button-topright span, main .circle-border #btnInc10.button-topright span {
    position: relative;
    right: 35%;
    background-position: 60% 80%; }
  main .circle-border #btnDecrement, main .circle-border #btnDec1, main .circle-border #btnDec10 {
    bottom: 0px; }
  main .circle-border #btnDecrement.button-bottomleft, main .circle-border #btnDec1.button-bottomleft, main .circle-border #btnDec10.button-bottomleft {
    width: 50%;
    left: 0; }
  main .circle-border #btnDecrement.button-bottomleft span, main .circle-border #btnDec1.button-bottomleft span, main .circle-border #btnDec10.button-bottomleft span {
    position: relative;
    left: 35%; }
  main .circle-border #btnDecrement.button-bottomright, main .circle-border #btnDec1.button-bottomright, main .circle-border #btnDec10.button-bottomright {
    width: 50%;
    right: 0; }
  main .circle-border #btnDecrement.button-bottomright span, main .circle-border #btnDec1.button-bottomright span, main .circle-border #btnDec10.button-bottomright span {
    position: relative;
    right: 35%;
    background-position: 80% 80%; }
  main .circle-border #btnDecrement span, main .circle-border #btnDec1 span, main .circle-border #btnDec10 span {
    position: relative;
    top: -2vw;
    background-position: 20% 80%; }

.logout {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 1vw 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(top, #fff, rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(top, #fff, rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(top, #fff, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(top, #fff, rgba(255, 255, 255, 0));
  background-image: linear-gradient(top, #fff, rgba(255, 255, 255, 0));
  -webkit-transition: background-color 0.2s ease-out;
  -moz-transition: background-color 0.2s ease-out;
  -ms-transition: background-color 0.2s ease-out;
  -o-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
  /* Fix bleeding */
  background-clip: padding-box;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.logout:hover {
  background-color: #eee;
  color: #555; }

@media all and (orientation: landscape) {
  main .circle-border #btnIncrement, main .circle-border #btnDecrement {
    font-size: 8vh; }
    main .circle-border #btnIncrement span, main .circle-border #btnDecrement span {
      height: 6vh;
      line-height: 6vh; } }

.progress-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 9vh;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(0, 0, 0, .3);
  scroll-behavior: smooth;
  scrollbar-width: none; }
  .progress-panel::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0); }
  .progress-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4); }
  .progress-panel * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .progress-panel .progress-items {
    counter-reset: step;
    margin: 0;
    padding: 1vh 10%;
    display: flex;
    justify-content: center;
    width: fit-content;
    width: -moz-fit-content;
    min-width: 100%; }
  .progress-panel .progress-items span {
    list-style-type: none;
    width: 16.66%;
    min-width: 35px;
    float: left;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
    margin: 0 5px; }
  .progress-panel .progress-items span:before {
    color: red;
    width: 4vh;
    height: 4vh;
    content: '';
    line-height: 4vh;
    border: 0px solid white;
    display: block;
    text-align: center;
    margin: 0.5vh auto 1vh auto;
    border-radius: 50%;
    background-size: 600%;
    background-image: url(/assets/images/buteyko_menu_icons.png); }
  .progress-panel .progress-items span:after:first-child {
    content: none; }
  .progress-panel .progress-items span.steps:before {
    background-position: 40% 40%; }
    .progress-panel .progress-items span.steps.active:before {
      background-position: 40% 60%; }
  .progress-panel .progress-items span.cp:before, .progress-panel .progress-items span.mcp:before {
    background-position: 60% 40%; }
    .progress-panel .progress-items span.cp.active:before, .progress-panel .progress-items span.mcp.active:before {
      background-position: 60% 60%; }
  .progress-panel .progress-items span.va:before {
    background-position: 0% 40%; }
    .progress-panel .progress-items span.va.active:before {
      background-position: 0% 60%; }
  .progress-panel .progress-items span.pauze:before {
    background-position: 80% 40%; }
    .progress-panel .progress-items span.pauze.active:before {
      background-position: 80% 60%; }
  .progress-panel .progress-items span.ready:before {
    background-position: 20% 40%; }
    .progress-panel .progress-items span.ready.active:before {
      background-position: 20% 60%; }
  .progress-panel .progress-items span.active {
    color: white; }
    .progress-panel .progress-items span.active + span:after {
      background-color: white; }

@media all and (orientation: landscape) {
  .progress-panel {
    height: 9vh; }
    .progress-panel .progress-items {
      padding: 2px 0; } }

.scenarios {
  display: block;
  position: absolute;
  width: 100%;
  margin-top: 9vh;
  padding-bottom: 18vw;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 0.5s ease; }
  .scenarios.active {
    display: block;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }

.home a {
  display: grid;
  grid-template-columns: 17vw auto;
  grid-auto-rows: minmax(10px, auto);
  grid-template-areas: "icon h1" "icon h2"; }
  .home a .icon {
    grid-area: icon; }
  .home a .h1 {
    grid-area: h1; }
  .home a .h2 {
    grid-area: h2; }
  .home a span {
    display: inline-block;
    background-size: 600%;
    background-image: url(/assets/images/buteyko_menu_icons.svg);
    background-position: 0 0;
    width: 13.5vw;
    height: 13.5vw;
    float: left;
    margin-right: 2vw;
    cursor: pointer; }
  .home a.test span {
    background-position: 0 20%; }
  .home a.test span.active {
    background-position: 0 20%; }
  .home a.basic span {
    background-position: 20% 20%; }
  .home a.basic span.active {
    background-position: 20% 20%; }
  .home a.steps span {
    background-position: 40% 20%; }
  .home a.steps span.active {
    background-position: 40% 20%; }
  .home a.summary span {
    background-position: 60% 20%; }
  .home a.summary span.active {
    background-position: 60% 20%; }
  .home a.settings span {
    background-position: 80% 20%; }
  .home a.settings span.active {
    background-position: 80% 20%; }

.modules {
  display: block;
  position: absolute;
  width: 100%;
  top: 17vw;
  bottom: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  transform: translateX(-100%);
  transition: transform 0.5s ease 0s, overflow 0s ease 1s; }
  .modules:after {
    content: "";
    height: 20vw;
    display: block; }
  .modules.modules2 {
    max-width: 600px;
    left: 50%;
    transform: translate(-50%); }
  .modules .progress-panel span {
    transition: opacity 0.5s;
    opacity: 0; }
  .modules.active {
    display: block;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0); }
  .modules.active::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0); }
  .modules.active::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4); }
  .modules.settings.active, .modules.summary.active {
    overflow-y: scroll; }
  .modules .progress-panel span {
    transition: opacity 0.5s;
    opacity: 1; }
  .modules .hidden {
    display: none; }

@media all and (orientation: landscape) {
  .modules {
    top: 10vh;
    bottom: 10vh; } }

.modules.summary main {
  padding: 3vw 0; }
  .modules.summary main div.block {
    padding: 0; }
  .modules.summary main .load {
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    border-bottom: 3px solid transparent;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    color: white;
    font-size: 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .modules.summary main .load:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  .modules.summary main .load span.ico {
    width: 8vw;
    height: 8vw;
    margin-right: 1vw; }
  .modules.summary main .load span.ico img {
    height: auto; }
  .modules.summary main .load span.label {
    color: white; }
  .modules.summary main .sync {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%; }
  .modules.summary main .toggle-container {
    display: flex;
    height: 100%;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 0 10px 0 0; }
  .modules.summary main .toggle {
    padding: 0 10px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0 0 0 5px;
    justify-content: center; }

div.ico {
  display: grid;
  grid-template-columns: 15vw auto;
  grid-auto-rows: minmax(10px, auto);
  grid-template-areas: "icon h1" "icon h2"; }
  div.ico .icon {
    grid-area: icon; }
  div.ico .h1 {
    grid-area: h1; }
  div.ico .h2 {
    grid-area: h2; }
  div.ico span {
    display: inline-block;
    background-size: 600%;
    background-image: url(/assets/images/buteyko_menu_icons.svg);
    background-position: 60% 20%;
    width: 13.5vw;
    height: 13.5vw;
    float: left;
    margin-right: 2vw;
    cursor: pointer; }

.modules.settings input[type=checkbox], .modules.login input[type=checkbox] {
  display: none; }
  .modules.settings input[type=checkbox]:checked + label:before, .modules.login input[type=checkbox]:checked + label:before {
    content: "\f205"; }
  .modules.settings input[type=checkbox] + label:before, .modules.login input[type=checkbox] + label:before {
    content: "\f204";
    -webkit-transform: rotate(180deg);
    transform: rotate(90deg);
    font-family: FontAwesome;
    font-size: 14px;
    width: 36px; }
  .modules.settings dl label, .modules.login dl label {
    display: block; }
  .modules.settings dt, .modules.login dt {
    width: 100%; }
  .modules.settings dd, .modules.login dd {
    margin: 0 0 10px 0;
    padding: 0px;
    width: 100%; }
  .modules.settings dd input, .modules.login dd input {
    width: 100%;
    height: 35px;
    border: 0;
    padding: 0 10px;
    background: none; }
  .modules.settings dd input[readonly], .modules.login dd input[readonly] {
    background: #bebebe !important; }

form input, form button {
  font-size: 100%;
  font-family: 'Karla', sans-serif; }
  form label {
    font-weight: 400;
    font-family: 'Karla', sans-serif; }
  form select {
    border-radius: 0 0 5px 5px;
    width: 100%;
    background: none;
    border: none;
    min-height: 35px; }
  form button {
    width: 100%;
    border: none;
    background: rgba(0, 0, 0, 0.4);
    padding: 5%;
    margin: 5% 0;
    color: #fff;
    font-size: 110%; }
  form button:hover {
    background: rgba(82, 121, 36, 0.8);
    cursor: pointer; }
  form input[readonly] {
    color: rgba(0, 0, 0, 0.4); }
  form div.sub-box {
    border: 0px solid white; }
  form div.sub-box dt {
    font-family: 'Karla', sans-serif;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px 5px 0 0;
    padding: 5px; }
  form div.sub-box dd {
    font-family: 'Karla', sans-serif;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 5px 5px;
    position: relative; }
  form div.sub-box input {
    border-radius: 0 0 5px 5px; }
  form div.sub-box dd.sec:after, form div.sub-box dd.min:after, form div.sub-box dd.times:after, form div.sub-box dd.time:after {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    right: 0;
    line-height: 35px;
    width: 40%;
    padding: 0 10px;
    color: black;
    font-size: 80%; }
  form div.sub-box dd.sec:after {
    content: 'seconden'; }
  form div.sub-box dd.min:after {
    content: 'minuten'; }
  form div.sub-box dd.times:after {
    content: 'x'; }
  form div.sub-box dd.time:after {
    content: 'uur'; }
  form div.sub-box dd.toggle-container {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 5fr;
    -ms-grid-columns: 1fr 5fr;
    grid-auto-rows: minmax(35px, auto);
    align-items: center;
    -ms-grid-row-align: center;
    justify-items: center;
    -ms-grid-column-align: center;
    color: black; }
    form div.sub-box dd.toggle-container .toggle {
      padding: 0 10px;
      width: 100%;
      height: 100%;
      background: #fff;
      display: flex;
      align-items: center;
      border-radius: 0 0 0 5px;
      border-right: 2px solid #2e5959;
      justify-content: center; }
    form div.sub-box dd.toggle-container .text {
      padding: 0 10px;
      border-radius: 0 0 5px 0;
      width: 100%;
      text-align: center; }
  form div.sub-box dd.browser {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
    grid-auto-rows: minmax(35px, auto);
    align-items: center;
    -ms-grid-row-align: center;
    justify-items: center;
    -ms-grid-column-align: center;
    color: black; }
    form div.sub-box dd.browser .wide {
      display: block;
      width: 100%;
      padding: 0 10px; }
      form div.sub-box dd.browser .wide.select_image img {
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
        margin: 0 10px 10px 0;
        cursor: pointer; }
      form div.sub-box dd.browser .wide input[type="radio"]:checked + img {
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7); }
      form div.sub-box dd.browser .wide input {
        display: none; }
      form div.sub-box dd.browser .wide label {
        display: inline-block; }

div.ico {
  display: grid;
  grid-template-columns: 15vw auto;
  grid-auto-rows: minmax(10px, auto);
  grid-template-areas: "icon h1" "icon h2"; }
  div.ico .icon {
    grid-area: icon; }
  div.ico .h1 {
    grid-area: h1; }
  div.ico .h2 {
    grid-area: h2; }
  div.ico span {
    display: inline-block;
    background-size: 600%;
    background-image: url(/assets/images/buteyko_menu_icons.svg);
    background-position: 60% 20%;
    width: 13.5vw;
    height: 13.5vw;
    float: left;
    margin-right: 2vw;
    cursor: pointer; }

@media all and (orientation: landscape) {
  form button {
    padding: 3% 5%;
    margin: 3% 0; } }

div.login {
  bottom: 0px; }
  div.login dl {
    border-top: 0px; }
  div.login .password-rejected dl {
    animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    background: rgba(255, 92, 38, .4); }

@keyframes shake {
  10%, 90% {
    transform: translateX(-1p); }

  20%, 80% {
    transform: translateX(2px); }

  30%, 50%, 70% {
    transform: translateX(-4px); }

  40%, 60% {
    transform: translateX(4px); } }