/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
@import url("./bootstrap.css");
@import url("./bootstrap-icons.css");

#canvas-dots {
  padding: 0;
  margin: 0;
  height: 50px;
  top: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  max-width: 350px;
}

#menu {
  top: 0;
  left: 0;
  z-index: 1001;
}

body {
  overflow-x: hidden;
}

#main-content {
  overflow-x: hidden;
}

.realy-round {
  aspect-ratio: 1 / 1;
}

.btn-primary {
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-secondary);
}

.element-type-icon-container {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #77777777;
	z-index: 9999999;
}

.modal-main {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000000;
	margin-top: 10px;
	margin-bottom: 10px;
	max-height: 100vh;
	overflow: scroll;
}

/*
 * Accordion for devotion-component.
 */
.accordion-devotion {
	--bs-accordion-btn-bg: var(--bs-white);
	--bs-accordion-active-bg: var(--bs-secondary);
	--bs-accordion-border-color: var(--bs-gray-20);
	--bs-accordion-btn-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="23" viewBox="0 0 26 29"><g id="Gruppe_78" data-name="Gruppe 78" transform="translate(-742 -982)"><text id="_" data-name="+" transform="translate(748 1004)" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">+</tspan></text></g></svg>');
	--bs-accordion-btn-active-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="23" viewBox="0 0 26 29"><g id="Gruppe_79" data-name="Gruppe 79" transform="translate(-742 -982)"><text id="_-" data-name="-" transform="translate(751 1004)" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">-</tspan></text></g></svg>');
	border-bottom: 10px solid var(--bs-gray-20);
}
.accordion-item-devotion {
	border-bottom: 10px solid var(--bs-gray-20);
}

.icon-left-arrow {
	background-size: 10px;
	background-image: url('data:image/svg+xml;utf-8,%3csvg id="Shopicon" xmlns="http://www.w3.org/2000/svg" width="9.3" height="16" viewBox="0 0 9.3 16"%3e %3cpath id="Pfad_37" data-name="Pfad 37" fill="black" d="M23.886,7.885l-6.7,6.7,6.7,6.7-1.3,1.3-8-8,8-8Z" transform="translate(-14.586 -6.586)"/%3e %3c/svg%3e');
}
.icon-left-arrow:hover {
	background-image: url('data:image/svg+xml;utf-8,%3csvg id="Shopicon" xmlns="http://www.w3.org/2000/svg" width="9.3" height="16" viewBox="0 0 9.3 16"%3e %3cpath id="Pfad_37" data-name="Pfad 37" fill="%23ffeb00" d="M23.886,7.885l-6.7,6.7,6.7,6.7-1.3,1.3-8-8,8-8Z" transform="translate(-14.586 -6.586)"/%3e %3c/svg%3e');
}
.icon-right-arrow {
	background-size: 10px;
	background-image: url('data:image/svg+xml;utf-8,<svg id="Shopicon" xmlns="http://www.w3.org/2000/svg" width="9.3" height="16" viewBox="0 0 9.3 16"><path id="Pfad_37" data-name="Pfad 37" fill="black" d="M14.586,7.885l6.7,6.7-6.7,6.7,1.3,1.3,8-8-8-8Z" transform="translate(-14.586 -6.586)"/></svg>');
}
.icon-right-arrow:hover {
	background-image: url('data:image/svg+xml;utf-8,<svg id="Shopicon" xmlns="http://www.w3.org/2000/svg" width="9.3" height="16" viewBox="0 0 9.3 16"><path id="Pfad_37" data-name="Pfad 37" fill="%23ffeb00" d="M14.586,7.885l6.7,6.7-6.7,6.7,1.3,1.3,8-8-8-8Z" transform="translate(-14.586 -6.586)"/></svg>');
}

.carousel-indicators > button {
	width: 6px !important;
	height: 6px !important;
	opacity: 1;
	border-radius: 50%;
	background-color: #b2b2b2 !important;
	margin-top: 2px;
}
.carousel-indicators > .active {
	width: 10px !important;
	height: 10px !important;
	background-color: black !important;
	margin-top: 0px;
}

.accordion-button-white {
  --bs-accordion-btn-icon: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="23" viewBox="0 0 26 29"%3e %3cg id="Gruppe_78" data-name="Gruppe 78" transform="translate%28-742 -982%29"%3e %3ccircle id="Ellipse_1" data-name="Ellipse 1" cx="13" cy="13" r="13" transform="translate%28742 985%29" fill="transparent"/%3e %3ctext id="_" data-name="+" transform="translate%28748 1004%29" font-size="20" font-family="SegoeUI, Segoe UI"%3e%3ctspan x="0" y="0"%3e+%3c/tspan%3e%3c/text%3e %3c/g%3e %3c/svg%3e');
  --bs-accordion-btn-active-icon: url('data:image/svg+xml;utf8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="23" viewBox="0 0 26 29"%3e %3cg id="Gruppe_79" data-name="Gruppe 79" transform="translate%28-742 -982%29"%3e %3ccircle id="Ellipse_1" data-name="Ellipse 1" cx="13" cy="13" r="13" transform="translate%28742 985%29" fill="transparent"/%3e %3ctext id="_-" data-name="-" transform="translate%28751 1004%29" font-size="20" font-family="SegoeUI, Segoe UI"%3e%3ctspan x="0" y="0"%3e-%3c/tspan%3e%3c/text%3e %3c/g%3e %3c/svg%3e');
}

.bg-hover-secondary:hover {
	background-color: var(--bs-secondary);
}