/*!
*STORZ & BICKEL Web App v3.3.1 (https://app.storz-bickel.com)
*STORZ & BICKEL © 2020-2024
*Unauthorized copying of this file via any medium is prohibited.
*Written by STORZ & BICKEL GmbH
*/
@charset "utf-8";
@font-face {
  font-display: swap;
  font-family: "GTDigit";
  src: url("../fonts/GTDigit.woff2") format("woff2"),
       url("../fonts/GTDigit.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+000-5FF;
}
/* CSS Document */
/* Extra small devices (portrait phones, less than 576px) */
/* No media query for xs since this is the default in Bootstrap */
html, body {
  font-family: "Roboto", sans-serif;
  min-width: 320px;
}

html {padding-bottom: 96px;}

header {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid #FF6600;
  height: 48px;
  position: fixed;
  z-index: 2;
}

nav {padding-top: 72px;}

h2, h4 {font-weight: 700;}

button:focus {outline: 0;}

button,input {touch-action: manipulation;}

.absolute {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
}

.bg-blue {background: #00287D; color: #FFFFFF;}
.bg-grey {background: #F6F6F6;}
.bg-orange {background: #FF6600; color: #FFFFFF;}
.bg-white {background: #FFFFFF;}

.crafty.btn-minus {background: url("../img/minus-0.svg") no-repeat center center;}
.crafty.btn-minus:active {background: url("../img/minus-1.svg") no-repeat center center;}
.venty.btn-minus {background: url("../img/minus-0.svg") no-repeat center center;}
.venty.btn-minus:active {background: url("../img/minus-1.svg") no-repeat center center;}
.volcano.btn-minus {background: url("../img/minus-v-0.svg") no-repeat center center;}
.volcano.btn-minus:active {background: url("../img/minus-v-1.svg") no-repeat center center;}
.btn-plus {background: url("../img/plus-0.svg") no-repeat center center;}
.btn-plus:active {background: url("../img/plus-1.svg") no-repeat center center;}
.btn-boost-minus {background: url("../img/minus-boost-0.svg") no-repeat center center;}
.btn-boost-minus:active {background: url("../img/minus-boost-1.svg") no-repeat center center;}
.btn-boost-plus {background: url("../img/plus-boost-0.svg") no-repeat center center;}
.btn-boost-plus:active {background: url("../img/plus-boost-1.svg") no-repeat center center;}
.btn-temp {height: 48px; width: 58px;}
.btn-func {height: 40px; width: 58px;}
.btn-work {height: 45px; width: 40px;}

.btn-sb {
  border: 1px solid #FF6600;
  border-radius: 0;
  color: #FF6600;
  padding: 2px 24px;
  position: relative;
  z-index: 1;
  -moz-transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
}
.btn-sb:before {
  background: #FF6600;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 100%;
  transition: 0.2s linear;
  top: 0;
  z-index: -1;
  -moz-transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
}
.btn-sb:hover {color: #FFFFFF !important;}
.btn-sb:hover:before {right: 0;}

.color-grey {color: #373737 !important;}
.color-orange {color: #FF6600;}
.color-white {color: #FFFFFF !important;}
.color-blue {color: #00287D !important;}

.custom-control-input:checked~.custom-control-label::before {
  background-color: #FF6600;
  border-color: #FF6600;
}
.custom-range::-ms-thumb {background: #FF6600;}
.custom-range::-moz-range-thumb {background: #FF6600;}
.custom-range::-webkit-slider-thumb {background: #FF6600;}

.display {
  display: inline-block;
  font-family: "GTDigit", sans-serif;
  font-size: 2.75rem;
}

.disabled {opacity: 0.45;}

.footer {
  border-top: 12px solid #FF6600;
  box-shadow: 0 0 12px 4px rgba(0,0,0,0.5);
  height: 96px;
}

.layer-top {z-index: 1;}

.power-battery {
  background: url("../img/logo-power.svg") no-repeat center center;
  padding: 3px 24px 3px 18px;
  width: 144px;
}
.power-border {border-top: 1px solid #373737;}

.icon-xs {height: 24px;}
.icon-sm {height: 32px;}
.icon-md {height: 48px;}

/* Small devices (landscape phones, 576px and up) */
/* @media (min-width: 576px) { } */
/* Medium devices (tablets, 768px and up) */
/* @media (min-width: 768px) { } */
/* Large devices (desktops, 992px and up) */
/* @media (min-width: 992px) { } */
/* Extra large devices (large desktops, 1200px and up) */
/* @media (min-width: 1200px) { } */