@media all and (-ms-high-contrast:none)
     {
		#modellbild_steuerung_ar {
			/*display:none;*/
		}
	 }

.bgs {
    padding:.4em .8em;
    display:inline-block;
    display:none;
	user-select:none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.upload.bgs {
    display: inline-block;
	display:none;
}
.bgs input {
    display:none;
}
.bgs.needspic {
    display:none;
}
.hasCustomImage .bgs.needspic {
    display:block;
	display:none;
}
.hasCustomImage.bgsizeEnabled .bgs.needspic {
    display:block;
}
.bgs.needspic[for] {
    min-width: 25px;
}
.bgs.up {
	transform:rotate(270deg);
}
.bgs.down {
	transform:rotate(90deg);
}
.bgs.left {
	transform:rotate(180deg);
}
.bgs.right {
	transform:rotate(0deg);
}

#bgs2:checked ~ .bgs.up {
    transform:rotate(90deg);
}
#bgs2:checked ~ .bgs.down {
    transform:rotate(270deg);
}
label.upload input {
    display: none;
}
.background-controls {
    position: absolute;
    bottom: 0;
    left: unset;
    right: 0;
	display: flex;						   
	max-width:300px;
}
.background-controls > * {
	background-color: #0082c0;
	color: #fff;
	border-radius:100%;
	border: 2px solid transparent;
	padding: .1em .8em;
	font-size: 12px;
	cursor:pointer;
	margin: 5px 5px;
	/*line-height: 30px;*/
	min-width: auto;
}
input:checked + .bgs {
    background-color: #0082c0;
    color: #fff;
	border: 2px solid #333;
}
.bgs.needspic {
    
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        color: #0082c0;
        border: 2px solid #0082c0;
        position:relative;
}
.upload.bgs, .uploadremove.bgs {
	
    background-image: url(/rollos/konfigurator/ansicht3D/modules/ar-controls/camera_upload.svg);
        background-size: 30px auto;
        background-position: center;
        background-repeat: no-repeat;
        padding-left: 40px;
        height: 40px;
        line-height: 25px;
        font-size: 0;
        background-color: #fff;
        border: 2px solid #0082c0;
        position:relative;
		
}
.hasCustomImage .upload.bgs {
    display:none;
}
.uploadremove.bgs:after {
    content: "+";
        display: block;
        font-size: 50px;
        font-weight: bold;
        height: 40px;
        width: 40px;
        position: absolute;
        /* text-align: center; */
        left: -4px;
        top: 6px;
        color: #0082c0;
        transform: rotate(45deg);
}
.hasCustomImage .uploadremove.bgs{
    
        visibility:visible;
}

#ansicht3D #customdownload {
    background-image: url(/rollos/konfigurator/ansicht3D/modules/ar-controls/download.svg);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    padding-left: 40px;
    height: 40px;
    line-height: 25px;
    font-size: 0;
    /*background-color: #fff;*/
    /*border: 2px solid #0082c0;*/
    position:relative;
	display:none;
}

#ansicht3D.hasCustomImage.downloadEnabled #customdownload.bgs {
	display:block!important;
}
#ansicht3D {
	position:relative;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
}
#ansicht3DCanvas {
	cursor: pointer;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
}
#ansicht3D .orbitAus, #ansicht3D .orbitAn {
	border-radius: 16px;
	background-image:url(3d-objekt-aktivieren.svg);
	background-repeat:no-repeat;
	background-position:0 center;
	background-size:28px;
	line-height:30px;
	color:#fff;
	cursor:pointer;
	padding-left:30px;
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none;
}
#ansicht3D .orbitAus	{
		height: 30px;
		width: 150px;
		top: 0;
		left: calc(100% - 200px);
		position: absolute;
		opacity: 0;
		background-color: #434343;
		font-size:0;
		content: "3D Objekt sperren";
}
#ansicht3D .orbitAus:after	{
	content: "3D Objekt sperren";
	font-size:12px;
}
#ansicht3D .orbitAn	{
		height: 30px;
		width: 180px;
		position: absolute;
		top: 49%;
		left: calc(50% - 90px);
		background-color:#0082c0;

}
#ansicht3D .orbitAn	img {
		display:none;
}
 
#ansicht3D  .teileBox {


		display: none;
		top: 50px;
		min-height: 380px;
		min-width: 200px;
		max-width: 300px;
		position: absolute;
		left: 0;
		color: white;
		background-color: #fff;
		cursor: default;
		right: 0;
		margin: auto;
}

#ansicht3D .teileBoxClose {

		transform:rotate(45deg);
		position: absolute;
		line-height:0;
	/*	background-color: rgb(0, 0, 0); */
		cursor:pointer;
		width: 28px;
		height: 28px;
		line-height:28px;

  		font-size: 0;

  		font-weight: 700;

  		color: #ddd;
		
		right:2px;
		top:2px;

}
#ansicht3D .teileBoxClose:before {

		content: '+';
		line-height: 27px;
		position: absolute;
		height:30px;
		width:30px;
        color: #ccc;
		font-size:27px;
        font-weight: 900;
		display:block;
}



#ansicht3D .teileBoxInhalt {

	padding: 10px;
	font-weight: bold;
  overflow: hidden;
  color:#333;

}

#ansicht3D .teileBoxHead {

  margin: 5px 0 8px 0;
  font-weight: bold;
  padding:2em;
}
#ansicht3D .teileBoxImg {

  width:80%
}
 

#ansicht3D .teileBoxInfo {

  height: 80px;

  overflow-y: scroll;

  padding: 8px;

  background-color: #888;
  
  display:none;
}

 
#ansicht3D .teileBoxPreis{

  margin-top: 7px;
}
 

#ansicht3D .teileBoxLink {
	color: white;
	font-weight: bold;
	background-color: #333;
	border-radius: 4px;
	text-decoration: none;
	padding: 10px 30px;
	margin: 20px;
}
#ansicht3D .dreiDhinweis {
	color: #fff;
	text-align: center;
	height: 130px;
	width: 270px;
	position:absolute;
	background-color: rgba(80, 80, 80, 0.9);
	left: 0;
	right:0;
	top: 0;
	bottom:0;
	border-radius: 5px;
	pointer-events: none;
	margin: auto;
}
#ansicht3D .dreiDhinweis * {
    box-sizing: border-box;
}
#ansicht3D .dreiDhinweis svg {
	width: 89%;
	height: auto;
	margin-top: 1em;
	display:none;
}
#ansicht3D .dreiDhinweis svg > g > g {
	position:relative;
	display:inline-block;
	border: 2px solid orange;
}
#ansicht3D .dreiDhinweis .hinweistext {
	display:inline-block;
	width:90px;
	padding:1em;
	text-align:center;
	background-image: url("overlay-tuch-ohne-text-gruppiert.svg");
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 280px 80px;
	padding-top: 90px;
	/*border:1px solid #888;*/
}

#ansicht3D .dreiDhinweis .hinweistext#dreiDzoominfo {
	background-position: 5px 10px;
}
#ansicht3D .dreiDhinweis .hinweistext#dreiDmoveinfo {
	background-position: -200px 10px;
}

@media screen and (orientation: portrait) and (max-width: 800px) {
		#ansicht3DCanvas {
			/*
			border-left: 1px solid #eee;
			border-right: 1px solid #eee;
			*/
		}
		
		#ansicht3D {
			/*padding: 0 40px;*/
			max-height: 60vH;
		}
		#visualisierung * {
			box-sizing:border-box;
		}
}