html { scroll-behavior: smooth;}
@keyframes fade-in {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}


.bgsizebutton {
    display:none;
    width: 20px;
    height:20px;
}
.hasCustomImage .bgsizebutton {
    display:inline-block;
}
.bgsizebutton.bgAuto {
    position:relative;
    overflow: hidden;
}
.bgsizebutton.bgAuto .iconAction {

        background-image: url(/xartikelsystem/minikonfiguratoren/assets/icons/steuerung/bg-size-button.svg);
        background-size: cover;
        background-position: center;
        animation: fade-in cubic-bezier(0.0, 0.0, 0.2, 1) 5s infinite;
}
.bgsizebutton.bgContain img.iconAction {
    transform: rotate(45deg);
}

.advancedControls {
    text-align: center;
    padding: .5em;
    display: flex;
    align-items: center;
    align-content: center;
    margin: 0 auto;
    max-width: 500px;
}

.advancedControls > * {
    margin: auto;
}

		.iconAction.stoffauswahl {
			width: 28px;
			height: 28px;
			border-radius: 100%;
			background-color: #0082c0;
			background-image: url(/3D/ansicht3D/modules/ar-controls/stoff_inaktiv.svg);
			background-repeat: no-repeat;
			background-position: center;
			display: inline-block;
			background-size: 50%;
		}

		.dreiDhinweis {
			-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
		}
		#modellbild_steuerung {
				color: #888888;
				position: fixed;
				bottom: 0;
				/*transform: translateY(-50%);*/
				left: 0;

				display: flex;
				flex-direction: column;
				align-items: flex-start;

				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none;   /* Chrome/Safari/Opera */
				-khtml-user-select: none;    /* Konqueror */
				-moz-user-select: none;      /* Firefox */
				-ms-user-select: none;       /* IE/Edge */
				user-select: none;           /* non-prefixed version, currently not supported by any browser */
				
				pointer-events: none;		/* im transparenten Bereich dieser Box ist die darunter liegende 3D-Zeichnung nicht mehr steuernbach */
				z-index: 9;
				/*font-size: .9em;*/

		}
				#modellbild_steuerung > * {
						background-color: #f1f1f1;
						padding: 8px;
						border-top: 1px solid #ffffff;
						border-right: 1px solid #ffffff;
						border-bottom: 1px solid #ffffff;
						border-top-right-radius: 5em;
						border-bottom-right-radius: 5em;
						cursor: pointer;
						pointer-events: auto;
						position: relative;
						order:2;
				}
				
				/*
				aktives Element soll sich nicht verschieben (Wunsch Eric) || 22.03.2024 David S.
				#modellbild_steuerung > *.active {
					order:1;
				}
				*/
				#modellbild_steuerung input {
					display: none;
				}
				.AMBIENTEModus #modellbild_steuerung_hintergrundbild::before {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 45px;
  content: "+";
  transform: rotate(45deg);
  line-height: 45px;
  text-align: center;
  font-size: 45px;
  font-weight: bolder;
  color: #f00;
}
.AMBIENTEModus #modellbild_steuerung_hintergrundbild {
  font-size:0;
}
				#modellbild_steuerung > *.initialNone {
						display: none;
				}
				#modellbild_steuerung .button_fileupload {
				  display: inline-block;
				  background-image: linear-gradient(to bottom, #9e9e9e 0%, #9e9e9e 50%, #828282 50%, #828282 100%);
				  color: #ffffff;
				  border: 0px;
				  border-radius: 3px;
				  padding-left: 0.5em;
				  padding-right: 0.5em;
				  padding-top: 0.2em;
				  padding-bottom: 0.2em;
				  margin-left: 0.5em;
				  margin-right: 0.5em;
				}
						#modellbild_steuerung .bez {
								width: 0;		/* nicht display: none, so dass diese mit Animation eingefahren werden kann */
								max-width: 0;
								margin-right: 0;
								transition: max-width 0.5s, margin-right 0.5s;


								display: inline-block;
								overflow: hidden;
								white-space: nowrap;
								vertical-align: middle;
								text-transform: capitalize;
								/*font-size:0;*/
						}
						#modellbild_steuerung .iconAction {
								vertical-align: middle;
						}
				  #modellbild_steuerung > *:hover .bez
				, #modellbild_steuerung > *.active .bez
				{
						width: auto;
						max-width: 400px;
						margin-right: 0.5em;
						margin-left: 1em;
						min-width: 20px;
				}
				#modellbild_steuerung > *:hover .bez
				{
						font-size:inherit;
				}

		#modellbild_bottom {
				position: fixed;
				bottom: 0;
				left: 0%;
				width: 50%;
				display: none;
		}


				#box_schalter_hintergrund {
						margin-top: 1em;
						margin-bottom: 1em;
						text-align: left;
						margin-left: 7em;

						display: none;		/* erstmal nicht einblenden */
				}
						#box_schalter_hintergrund > * {
								vertical-align: middle;
						}
						#box_schalter_hintergrund > img {
								height: 28px;
								cursor: pointer;
						}
				.masseUnvollstaendig #modellbild_steuerung .dreiDSteuerung {
					display:none;
				}
				#modellbild_steuerung {
				position: absolute;
                top: 2em;
                    transform: initial;
                    left: 0;
		}
@media (max-width: 1000px) {

    .advancedControls {
        flex-direction:column;
    }
    
		
		
#modellbild_steuerung > div::after {
		display: block;
		content: attr(data-text);
		position: absolute;
		font-size: 10px;
		bottom: -28px;
		text-align: center;
}
				#modellbild_steuerung .group {
						display: inline-flex;
				}
				#modellbild_steuerung .bez {
						display: none;
				}
						#modellbild_steuerung > * {
                            border-radius: 5em;
                                border: 3px solid #ffffff;
                                padding: 0;
                                position: relative;
                                margin-top: 15px;
						}
						#modellbild_steuerung > *:hover {
								border: 3px solid #cccccc;
						}
						#modellbild_steuerung > *.active {
								border: 3px solid #000000;
						}
								#modellbild_steuerung > * .iconAction {
										width: 100%;
                                        height: 100%;
										transform: scale(1.4);
								}
								#modellbild_steuerung > #modellbild_steuerung_download .iconAction {
										transform: scale(1.4) rotate(180deg)!important;
								}
								
								#modellbild_steuerung .iconAction.stoffauswahl {
									width: 40px;
									height: 40px;

								}


		#modellbild_bottom {
				position: static;
				width: auto;
		}

		#last_element {
				display: none;
		}

}
#modellauswahl {
    background-image: none;
    background-size: 50px 50px;
    background-position: right center;
    background-repeat: no-repeat;
    height: 50px;
	margin: 1em auto;
	display: block;
	max-width:98%;
}
