/*!
*Unauthorized copying of this file via any medium is prohibited.
*Written by trigerion GmbH
 */
@charset "utf-8";
@font-face {
  font-display: swap;
  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: sans-serif;
  min-width: 320px;
  color: #70A7C2;
  padding-bottom: 96px;
}

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

nav {padding-top: 72px;}

h2 {font-weight: 700; color: #70A7C2;}

button:focus {outline: 0;}

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

.bg-blue {background: #70A7C2; color: #FFFFFF;}
.bg-grey {background: #F6F6F6;}
.bg-white {background: #FFFFFF;}

.btn-sky {
  border: 1px solid #70A7C2;
  border-radius: 0;
  color: #70A7C2;
  padding: 2px 24px;
  position: relative;
  z-index: 1;
  -moz-transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
}
.btn-sky:before {
  background: #70A7C2;
  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-sky:hover {color: #FFFFFF !important;}
.btn-sky:hover:before {right: 0;}

.color-grey {color: #373737 !important;}
.color-white {color: #FFFFFF !important;}

.custom-range::-ms-thumb {background: #70A7C2;}
.custom-range::-moz-range-thumb {background: #70A7C2;}
.custom-range::-webkit-slider-thumb {background: #70A7C2;}

.disabled {opacity: 0.45;}

.close { 
  position: absolute; 
  right: 1rem;
}

.footer {
  border-top: 10px solid #9E937A;
  box-shadow: 0 0 6px 4px rgba(0,0,0,0.5);
  height: 80px;
}

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
    width: 300px;
}

#wrapBrightnessPopover .popover {
    max-width: 100% !important;
}

#wrapPreDefinedPopover .popover {
    max-width: 100% !important;
}

.small-btn-preDefined {
    width: 160px;
    margin: 2px 2px 2px 2px;
    font-size: 16px;
    padding: 2px 2px;
	background-color: #70A7C2 !important;
}

.small-btn-alpha {
    width: 60px;
    margin: 4px 4px 2px 2px;
    font-size: 12px;
    padding: 4px 4px;
	background-color: #70A7C2 !important;
}

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


@media all and (min-width: 530px) {
    .icon-status {max-height: 80px; max-width: 80px;}
    h4 {font-weight: 400; font-size: 1.25em; color: #70A7C2; outline: none !important;}
    h5 {font-weight: 400; font-size: 1.1em; color: #70A7C2; outline: none !important;}
}

@media not all and (min-width:530px) {
    .icon-status {max-height: 45px; max-width: 45px;}
    h4 {font-weight: 400; font-size: 1.1em; color: #70A7C2; outline: none !important;}
    h5 {font-weight: 400; font-size: 0.9em; color: #70A7C2; outline: none !important;}
}

.icon-sm {height: 32px;}

.color-space {
    width: 400px;
    height: 400px;
}

input[type="image"]:focus {
    outline: none;
}

.iconStatus {
	width: 25px;
	height: 25px;
	margin-left: -20px;
    margin-right: -20px;
}

.circleStyle {
    background: #f00;
    width: 30px;
    height: 30px;
    border: 3px solid black;
    border-radius: 50%;
    border-style: solid;
    margin: 4px 4px 4px 4px;
}