.color-accent-kqt {
    background-color: #ef7d00;
}

.color-accent-kqt:hover {
    background-color: #ef7d00;
}

.color-accent-kqt:focus {
    background-color: #ef7d00;
}

.color-primary-kqt {
    background-color: #0062a7;
}

.color-primary-kqt:hover {
    background-color: #0062a7;
}

.color-primary-kqt:focus {
    background-color: #0062a7;
}

.color-primary-dark-kqt {
    background-color: #0062a7;
}

.color-primary-dark-kqt:hover {
    background-color: #0062a7;
}

.color-primary-dark-kqt:focus {
    background-color: #0062a7;
}

html, body, #container {
	height: 100%;
	width: 100%;
	overflow: hidden;
	touch-action: pan-y;
}

#sku-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

#preview {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#control-btn-group {
    visibility: visible;
}

#capture-btn {
    visibility: hidden;
}

#torch-btn {
    visibility: hidden;
}

#zoom-btn {
    visibility: visible;
}

#zoom-value {
    display: inline-block;
    text-align: right;
    background-color: #ffffff80;
}

#fps {
	position: fixed;
	top: 0;
    background-color: #ffffff80;
    display: none;
}

#dismiss-sku {
	position: fixed;
	top: 40px;
	right: 40px;
	width: 24px;
	height: 24px;
	background-color: #ffffff80;
	border-top-left-radius: 50% 10px;
	border-top-right-radius: 50% 10px;
	border-bottom-right-radius: 50% 10px;
	border-bottom-left-radius: 50% 10px;
	display: none;
	z-index: 3;
}


.simple-scale-out {
    transform: scale(0);
    transition: transform .2s !important;
}

.simple-scale-in {
	transform: scale(1);
	transition: transform .5s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
}

#debug-frame {
	position: fixed;
	top: 0;
	left: 0;
	width: 150;
	height: 200;
    display: none;
}