/* Modal */

.tr-wrapper {
	max-height: 85% !important;
	position: fixed !important;
	overflow: scroll !important;
	top: 50% !important;
	left: 50% !important;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px !important;
	transform: translate(-50%, calc(-50% - 100px)) !important;
	opacity: 0 !important;
	z-index: 99999999 !important;
	background: rgba(255, 255, 255, 1) !important;
	border-radius: 3px !important;
	width: min(850px , 90%) !important;
	transition: 200ms ease-in-out !important;
	pointer-events: none !important;
	padding: 2em !important;
}
.tr-wrapper .tierschutz-rechner {
	padding: 0 !important;
	overflow: scroll !important;
}
.tr-wrapper.open {
	transform: translate(-50%, -50%) !important;
	opacity: 1 !important;
	pointer-events: all !important;	
}
.tr-wrapper .tierschutz-rechner {
	padding: 10px 15px !important;
	overflow:scroll !important;
}
.tr-wrapper .footer {
	display: none !important;
}

/* Overlay */

.tr-wrapper.open + .modal-bg {
    inset: 0;
    z-index: 99999998;
	position: fixed;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);	
	pointer-events: all;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
}

/* Typo */
.tr-wrapper p,
.tr-wrapper label,
.tr-wrapper li {
	font-size: 18px !important;
}
.tr-wrapper h2 {
	font-size: 1.8em !important;
}
.tr-wrapper h3 {
	font-size: 1.4em !important;
}
.tr-wrapper h4 {
	font-size: 1.15em !important;
}
.tr-wrapper hr {
	border-color: #ccc !important;
	margin-top: 1em !important;
	margin-bottom: 1em !important;
}
.tr-wrapper .warning p,
.tr-wrapper .error-overlay p {
	font-size: 1.4em !important;
	color: #fff !important;
}
.tr-wrapper .warning p {
	color: #000 !important;
}
/* Buttons */

.tr-button button,
.tr-wrapper .button,
.tr-wrapper .error-overlay button {
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--ui) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 700 !important;
	transition: 0.2s ease-out !important;
	padding-top: 0.33em !important;
	padding-right: 2em !important;
	padding-bottom: 0.33em !important;
	padding-left: 2em !important;
	height: inherit !important;
	min-height: 40px !important;
	line-height: 23px !important;
}

/* forward/back-buttons */

.tr-wrapper .button-forward:after,
.tr-wrapper .button-back:before {
	margin: 0;
	font-size: 1em !important;
	line-height: 23px !important;
	top:inherit !important;
	display: block !important;
	width: 13px !important;
}
.tr-wrapper .button-forward:after {
	content: url('assets/images/thr-arrow-right.svg') !important;
	float: right !important;
	padding-left: 1em !important;
}
.tr-wrapper .button-back:before {
	content: url('assets/images/thr-arrow-left.svg') !important;
	float: left !important;
	padding-right: 1em !important;
}

/* close-button */

.tr-wrapper .close-button {
	cursor: pointer !important;
	postition: absolute !important;
	left: 94% !important;
	top: -0.5em !important;
	
}
.tr-wrapper button.close-button {
	cursor: pointer !important;
	border: none !important;
	outline: none !important;
	background: none !important;
	font-size: 1.5rem !important;
	color: #9e9e9e !important;
	padding: 0 !important;
	transition: all 0.5s ease !important;
	margin-right: -5px !important;
}

/* test close button 
body .tr-wrapper.style-button.open .close-button {
	display: block;
	position: fixed;
}
body .tr-wrapper.style-button.open .close-button span {
	display: block;
}
body .tr-wrapper {
  position: fixed;
  overflow: scroll;
  height: 80vh;
}
*/

.tr-wrapper .icon-cross:before,
.tr-wrapper .icon-cross:after {
	background: #FF7B00 !important;
} 

.tr-wrapper .icon-cross:hover::before,
.tr-wrapper .icon-cross:hover::after {
	background: var(--wp--preset--color--secondary) !important;
} 

/* opening Button */

.tr-button.style-button {
	padding: 0 !important;
	background-color: none !important;
	border: none !important;
	border-radius: 0 !important;
}
.tr-button.style-button .logo,
.tr-button.style-button .tr-icon,
.tr-button.style-button .content p {
	display: none !important;
	visibility: hidden !important;
}
.tr-button.style-button .tr-button-text {
	padding: 0 !important;
}
body .tr-button {
	background: none !important;
}
/*.tr-button.style-button .tr-button-text:before {
	content: url(assets/images/thr-paw.svg);
	display: block;
	width: 24px;
	height: 24px;
	float:left;
	padding-right: 0.5em;
}*/