/* Version 5.0.1 */ ml-object {
   --tpx-version: "5.0.1";
   
    /* ml-main color definition */
    --tpx-color: #000;
	--tpx-color-sec: #f1f1f1;
    --tpx-background-color: #fff;
	--tpx-background-sec-color: #041b4c;
	--tpx-close-background: #fff;
	--tpx-close-color: #000;
	
	/* links */
	--tpx-link-color: #2436d6;
	--tpx-link-color-hover: #211579;
	--tpx-link-text-decoration: underline;
    
    /* input placeholder definition */
	--tpx-placeholder-color: #9c9d9d;
	--tpx-placeholder-font-weight: 400;
	--tpx-placeholder-font-style: normal;
	
	/* button definition */
    --tpx-button-font-size: 16px;
	--tpx-button-color: #fff;
	--tpx-button-background-color: #2436d6;
	--tpx-button-border-radius: 4px;
	--tpx-button-color-hover: #fff;
	--tpx-button-background-color-hover: #211579;

	--tpx-button-color-sec: #2436d6;
	--tpx-button-background-color-sec: #f1f1f1;
	--tpx-button-color-hover-sec: #211579;
	--tpx-button-background-color-hover-sec: #d4d4d4;
	
	/* inputs + select + textarea */
	--tpx-input-font-size: 16px;
	--tpx-input-color: #000;
	--tpx-input-background-color: #fff;
	--tpx-input-border-color: #2436d6;
	--tpx-input-border-width: 1pt;
	--tpx-input-border-radius: 4px;
	--tpx-select-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23211579' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	--tpx-input-checked-background-color: #eee;
	--tpx-input-checked-checked-border-color: var(--tpx-input-border-color);
	--tpx-input-checked-color: #211579;
	
	/* checkboxes */
	--tpx-ml-checkbox-ml-marker-background-color: var(--tpx-input-background-color);
	--tpx-ml-checkbox-ml-marker-border-color: var(--tpx-input-border-color);
	--tpx-ml-checkbox-ml-marker-border-width: var(--tpx-input-border-width);
	--tpx-ml-checkbox-ml-marker-border-radius: 2px;
	--tpx-ml-checkbox-ml-marker-checked-background-color: var(--tpx-input-checked-background-color);
	--tpx-ml-checkbox-ml-marker-checked-border-color: var(--tpx-input-checked-checked-border-color);
	--tpx-ml-checkbox-ml-marker-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23211579' d='M9.54284 1.39648L3.93819 6.59595L1.56794 4.06651L0 5.53575L3.82925 9.62223L11 2.97601L9.54284 1.39648Z'/%3e%3c/svg%3e");
	
	/* toggler */
	--tpx-ml-toggler-ml-marker-background-color: var(--tpx-input-background-color);
	--tpx-ml-toggler-ml-marker-inner-background-color: var(--tpx-input-border-color);
	--tpx-ml-toggler-ml-marker-border-color: var(--tpx-input-border-color);
	--tpx-ml-toggler-ml-marker-border-width: var(--tpx-input-border-width);
	--tpx-ml-toggler-ml-marker-border-radius: 999px;
	--tpx-ml-toggler-ml-marker-checked-background-color: var(--tpx-input-checked-background-color);
	--tpx-ml-toggler-ml-marker-checked-inner-background-color: var(--tpx-input-checked-color);
	--tpx-ml-toggler-ml-marker-checked-border-color: var(--tpx-input-checked-checked-border-color);
	
	/* radio */
	--tpx-ml-radio-ml-marker-background-color: var(--tpx-input-background-color);
	--tpx-ml-radio-ml-marker-border-color: var(--tpx-input-background-color);
	--tpx-ml-radio-ml-marker-border-width: 4px;
	--tpx-ml-radio-ml-marker-box-shadow-width: var(--tpx-input-border-width);
	--tpx-ml-radio-ml-marker-box-shadow-color: var(--tpx-input-border-color);
	--tpx-ml-radio-ml-marker-checked-background-color: var(--tpx-input-checked-color);
	--tpx-ml-radio-ml-marker-checked-border-color: var(--tpx-input-checked-background-color);
	--tpx-ml-radio-ml-marker-checked-box-shadow-color: var(--tpx-input-checked-checked-border-color);

	/* rating */
	--tpx-ml-rating-size: 20px;
	--tpx-ml-rating-color: #ddd;
	--tpx-ml-rating-checked-color: #ffc700;
	--tpx-ml-rating-hover-color: #deb217;
	--tpx-ml-rating-checked-hover-color: #c59b08;

	/* animate */
	--tpx-animate-delay: 1s;
	--tpx-animate-duration: 1s;
	--tpx-animate-repeat: 1;
}


/********     MASTER STRUCTURE
/************************************************************
<ml-object class="tpx-fullscreen OR tpx-sticker  tpx-[vertical]-[horizontal]"> 
	<ml-main style="width:500px; height:auto">
		<ml-close></ml-close>                
		[ HTML content ...
		<ml-row> 
			<ml-text>text...</ml-text>   
			<ml-image>text...</ml-image>   
		</ml-row>                    
		]
	</ml-main>          
</ml-object> 
*/

/*
<ml-object> 
# is required master structure, top element of each window
! always require one of following class names: .tpx-fullscreen or .tpx-sticker to define master positioning
! always require positioning class name with schema: tpx-t-l ---> tpx-t[op]-l[eft], tpx-m[iddle]-c[enter] etc.        
! in fullscreen mode, this container shoud have defined color/image background
! this container should contain only one element <ml-main>
*/

ml-object { position: relative; box-sizing: border-box; max-width: 100%; padding:0; margin:0; border:none; background-size: cover; background-position: center; background-repeat: no-repeat }
ml-object * { box-sizing: border-box; outline: none; outline-color: transparent; outline-style: none }
ml-object img { max-width: 100% }

ml-object.tpx-fullscreen { position: fixed; display: flex; flex-direction: row !important; width: 100%; height: 100%; max-height:100vh; top:0; left: 0; overflow: hidden; }     
ml-object.tpx-fullscreen.tpx-t-l { align-items: flex-start; justify-content: flex-start;}
ml-object.tpx-fullscreen.tpx-t-c { align-items: flex-start; justify-content: center;}
ml-object.tpx-fullscreen.tpx-t-r { align-items: flex-start; justify-content: flex-end;}
ml-object.tpx-fullscreen.tpx-m-l { align-items: center; justify-content: flex-start;}
ml-object.tpx-fullscreen.tpx-m-c { align-items: center; justify-content: center;}
ml-object.tpx-fullscreen.tpx-m-r { align-items: center; justify-content: flex-end;}
ml-object.tpx-fullscreen.tpx-b-l { align-items: flex-end; justify-content: flex-start }
ml-object.tpx-fullscreen.tpx-b-c { align-items: flex-end; justify-content: center;}
ml-object.tpx-fullscreen.tpx-b-r { align-items: flex-end; justify-content: flex-end;}      

ml-object.tpx-sticker { display: inline-flex; position: fixed; background: none !important; pointer-events: none; } /* non iframe! */            
ml-object.tpx-sticker.tpx-t-l { top: 0; left: 0; }
ml-object.tpx-sticker.tpx-t-c { top: 0; left: 50%; transform: translateX(-50%); }
ml-object.tpx-sticker.tpx-t-r { top: 0; right: 0; }
ml-object.tpx-sticker.tpx-m-l { left:0; top: 50%; transform: translateY(-50%); }
ml-object.tpx-sticker.tpx-m-c { top: 50%; left: 50%; transform: translate(-50%, -50%);}
ml-object.tpx-sticker.tpx-m-r { right:0; top: 50%; transform: translateY(-50%); }
ml-object.tpx-sticker.tpx-b-l { left: 0; bottom: 0; }
ml-object.tpx-sticker.tpx-b-c { bottom: 0; left: 50%; transform: translateX(-50%); }
ml-object.tpx-sticker.tpx-b-r { right: 0; bottom: 0; } 
		
/* default backdrop effect for background <ml-object class="tpx-backdrop"> */
ml-object.tpx-fullscreen.tpx-backdrop { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }     
/* different max-heights */
ml-object.tpx-fullscreen > ml-main { max-height: 90vh; }
ml-object.tpx-sticker    > ml-main { max-height: 100vh; pointer-events: all; }

/* backdrop effects */
.tpx-ml-object-bg-none { background: none; }
.tpx-ml-object-bg-white { background: #fff; }
.tpx-ml-object-bg-semi-white { background: rgba(255, 255, 255, 0.5); }
.tpx-ml-object-bg-radial-white { background:radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%); }
.tpx-ml-object-bg-semi-dark { background: rgba(0, 0, 0, 0.5); }
.tpx-ml-object-bg-backdrop { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/*        
<ml-main> 
# required container with popup HTML content
! must be child of <ml-object>
! custom inline styles expected (but not required):
	- width & height, recommended is "width:600px; height:auto"
	- margin if <ml-object> is sticker   
			
! since <ml-main> is used, <form> tag is NOT required/recommended!
! since <ml-main> is used, content classes .mlctr-success-message and .mlctr-next-step is no longer required --> <ml-main> is used instead
	- but .mlctr-success-message and .mlctr-next-step are still supported for custom content placement        
*/          
ml-main { position: relative; display: flex; flex-direction: column; width: auto; max-width: 100%; padding: 0; margin: 0; min-width: 0; /*overflow-y: auto;*/ color: var(--tpx-color); background-color: var(--tpx-background-color); }
ml-main .tpx-col-main { overflow-x: hidden; overflow-y: auto; align-items: inherit; justify-content: inherit; height: 100%; }

/* default shadows <ml-main class="tpx-shadow"> back compatibility */		
ml-main.tpx-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
ml-main.tpx-shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06); }
ml-main.tpx-shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); }
ml-main.tpx-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); }
ml-main.tpx-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04); }
ml-main.tpx-shadow-xxl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* new shadows */
ml-main.tpx-shadow-none { box-shadow: none; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
ml-main.tpx-shadow-small, ml-object .tpx-shadow-small { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.1)) drop-shadow(0 2px 2px rgba(0,0,0,0.02)); }
ml-main.tpx-shadow-small-around, ml-object .tpx-shadow-small-around { filter: drop-shadow(0 0 4px rgba(0,0,0,0.15)) drop-shadow(0 0 4px rgba(0,0,0,0.08)); }
ml-main.tpx-shadow-medium, ml-object .tpx-shadow-medium { filter: drop-shadow(0 8px 7px rgba(0,0,0,0.1)) drop-shadow(0 3px 3px rgba(0,0,0,0.03)); }
ml-main.tpx-shadow-medium-around, ml-object .tpx-shadow-medium-around { filter: drop-shadow(0 0 14px rgba(0,0,0,0.13)) drop-shadow(0 0 8px rgba(0,0,0,0.08)); }
ml-main.tpx-shadow-large, ml-object .tpx-shadow-large { filter: drop-shadow(0 12px 11px rgba(0,0,0,0.1)) drop-shadow(0 6px 6px rgba(0,0,0,0.03)); }
ml-main.tpx-shadow-large-around, ml-object .tpx-shadow-large-around { filter: drop-shadow(0 0 24px rgba(0,0,0,0.13)) drop-shadow(0 0 16px rgba(0,0,0,0.10)); }

/*
<ml-close>
# close button, usually in right-top corner; just simply add <ml-close></ml-close> into <ml-main>
i default is thin black crosshair on transparent background, positioned inside the <ml-main> right top corner
i NO longer needed to add close() action on this element (will be added automatically)
*/
ml-close { background-color: var(--tpx-close-background); cursor: pointer; position: absolute; z-index: 99999; right: 0; top: 0; display: block; width: 24px; height: 24px; border-radius: 50%; z-index: 10; transition: transform .3s;} 
ml-close:before, ml-close:after { content: ''; width: 50%; height: 1px; background-color: var(--tpx-close-color); display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
ml-close:before { transform: translate(-50%, -50%) rotateZ(45deg); } 
ml-close:after { transform: translate(-50%, -50%) rotateZ(-45deg); } 
ml-close:hover { transform: scale(1.2); }
/* close button varaints */
ml-close.tpx-inside, ml-close.tpx-close-place-inside { right: 10px; top: 10px; }
ml-close.tpx-outside, ml-close.tpx-close-place-outside { right: -12px; top: -12px; }
/* crosshair size */
ml-close.tpx-close-width-none:after, ml-close.tpx-close-width-none:before { height: 0; }
ml-close.tpx-thin:after, ml-close.tpx-thin:before, ml-close.tpx-close-width-thin:after, ml-close.tpx-close-width-thin:before { height: 1px; } /* default */
ml-close.tpx-semi:after, ml-close.tpx-semi:before, ml-close.tpx-close-width-medium:after, ml-close.tpx-close-width-medium:before { height: 2px; }
ml-close.tpx-bold:after, ml-close.tpx-bold:before, ml-close.tpx-close-width-bold:after, ml-close.tpx-close-width-bold:before { height: 3px; }
/* cross-hair color back-compatibility only */		
ml-close.tpx-black { background: #fff; }
ml-close.tpx-black:after, ml-close.tpx-black:before { background-color: #000; }
ml-close.tpx-white { background: #000; }
ml-close.tpx-white:after, ml-close.tpx-white:before { background-color: #FFF; }
ml-close.tpx-gray { background: silver; }
ml-close.tpx-gray:after, ml-close.tpx-gray:before { background-color: rgb(97, 97, 97); }
ml-close.tpx-transparent { background: none; }
/* animation */
ml-close:hover{ transform: scale(1.2); transition: all 0.5s ease; }
ml-close.tpx-onhover { opacity: 0; transition: all .2s ease-in-out }
ml-main:hover ml-close.tpx-onhover { opacity: 1 }
				

/********     FLEX - flex element positioning
/*************************************************************/

/* directions */
ml-col, .tpx-col { display: flex; flex-direction: column; width: 100%; }
ml-row, .tpx-row { display: flex; flex-direction: row; width: 100%; }    
/* column oriantion & align */
ml-col.tpx-t, ml-main.tpx-t, .tpx-col.tpx-t { justify-content: flex-start; }
ml-col.tpx-m, ml-main.tpx-m, .tpx-col.tpx-m { justify-content: center; }
ml-col.tpx-b, ml-main.tpx-b, .tpx-col.tpx-b { justify-content: flex-end; }
ml-col.tpx-l, ml-main.tpx-l, .tpx-col.tpx-l { align-items: flex-start; }
ml-col.tpx-c, ml-main.tpx-c, .tpx-col.tpx-c { align-items: center; }
ml-col.tpx-r, ml-main.tpx-r, .tpx-col.tpx-r { align-items: flex-end; }  
/* row oriantion & align */
ml-row.tpx-t, ml-box.tpx-t, ml-button.tpx-t, ml-countdown.tpx-t, .tpx-row.tpx-t { align-items: flex-start; }
ml-row.tpx-m, ml-box.tpx-m, ml-button.tpx-m, ml-countdown.tpx-m, .tpx-row.tpx-m { align-items: center; }
ml-row.tpx-b, ml-box.tpx-b, ml-button.tpx-b, ml-countdown.tpx-b, .tpx-row.tpx-b { align-items: flex-end; }
ml-row.tpx-s, ml-box.tpx-s, ml-button.tpx-s, ml-countdown.tpx-s, .tpx-row.tpx-s { align-items: stretch; }
ml-row.tpx-s > *, ml-box.tpx-s > *, ml-button.tpx-s > *, ml-countdown.tpx-s > *, .tpx-row.tpx-s > * { height: auto !important; }
ml-row.tpx-l, ml-box.tpx-l, ml-button.tpx-l, ml-countdown.tpx-l, .tpx-row.tpx-l { justify-content: flex-start; }
ml-row.tpx-c, ml-box.tpx-c, ml-button.tpx-c, ml-countdown.tpx-c, .tpx-row.tpx-c { justify-content: center; }
ml-row.tpx-r, ml-box.tpx-r, ml-button.tpx-r, ml-countdown.tpx-r, .tpx-row.tpx-r { justify-content: flex-end; }

/* spacig between elements */
.tpx-between { justify-content: space-between !important; } 	
.tpx-around { justify-content: space-around !important; }
.tpx-evenly { justify-content: space-evenly !important; }

/* make window content scrollable, if content is larger than display height */
ml-col.tpx-scroll {	height: 100%; overflow-y: auto; overflow-x: hidden !important; }


/********     MAIN ML BLOCKS
/*************************************************************/
ml-box, ml-col, ml-row { position: relative; box-sizing: border-box; max-width: 100%; }		
ml-box > *, ml-col > *, ml-row > * { min-width: 0; }
ml-col, ml-row { width: 100%; }
ml-box { display: flex; }
ml-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
ml-col img[src$=".svg"], ml-row img[src$=".svg"], ml-box img[src$=".svg"] { align-self: center !important } /* hack for svg images */

/* ml-span */
ml-span { display: inline; position: relative; }

/* ml-text */
ml-text { position: relative; display: block; width: 100%; }

/* links */
ml-main a { color: var(--tpx-link-color); text-decoration: var(--tpx-link-text-decoration); transition: all 0.2s ease; position: relative; }
ml-main a:hover { color: var(--tpx-link-color-hover); cursor: pointer; }

/* lists */
ml-ul, ml-ol { list-style: initial; margin: initial; padding: initial; line-height: inherit; font-size: inherit; list-style-type: none; }
ml-ol { counter-reset: ol-counter; }
ml-ol > ml-li::marker { display: none; }
ml-ul > ml-li, ml-ol > ml-li { display: list-item; position: relative; }
ml-ul > ml-li:before, ml-ol > ml-li:before { position: absolute; left: 0; line-height: inherit; font-size: inherit; }
ml-ol > ml-li:before { counter-increment: ol-counter; content: counters(ol-counter, ".", decimal) "."; }


/********     FORMS
/*************************************************************/

/* placeholder */
ml-object ::-webkit-input-placeholder { color: var(--tpx-placeholder-color) !important; font-weight: var(--tpx-placeholder-font-weight) !important; font-style: var(--tpx-placeholder-font-style) !important; text-overflow: ellipsis !important; }
ml-object :-moz-placeholder { color: var(--tpx-placeholder-color) !important; font-weight: var(--tpx-placeholder-font-weight) !important; font-style: var(--tpx-placeholder-font-style) !important; text-overflow: ellipsis !important; } 
ml-object ::-moz-placeholder { color: var(--tpx-placeholder-color) !important; font-weight: var(--tpx-placeholder-font-weight) !important; font-style: var(--tpx-placeholder-font-style) !important; text-overflow: ellipsis !important; } 
ml-object :-ms-input-placeholder { color: var(--tpx-placeholder-color) !important; font-weight: var(--tpx-placeholder-font-weight) !important; font-style: var(--tpx-placeholder-font-style) !important; text-overflow: ellipsis !important; } 
ml-object :input-placeholder { color: var(--tpx-placeholder-color) !important; font-weight: var(--tpx-placeholder-font-weight) !important; font-style: var(--tpx-placeholder-font-style) !important; text-overflow: ellipsis !important; }

/* select normalize */
ml-object select { word-wrap: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; }
ml-object select:disabled { opacity: 1; }
ml-object select option { font-family: inherit; font: -moz-pull-down-menu; }

/* label normalize */
ml-box label, ml-checkbox label, ml-radio label { margin: 0; padding: 0; }

/* common inputs / select / textarea */
ml-input, ml-select, ml-textarea { display: block; position: relative; }
ml-box input, ml-box select, ml-box textarea, ml-input input, ml-select select, ml-textarea textarea { font-size: var(--tpx-input-font-size); line-height: 1.25; color: var(--tpx-input-color); background-color: var(--tpx-input-background-color); border-color: var(--tpx-input-border-color); border-width: var(--tpx-input-border-width); border-radius: var(--tpx-input-border-radius); display: block; outline: none; max-width: 100%; font-family: inherit; background-repeat: no-repeat; border-style: solid; transition: all .2s; }
ml-marker { box-sizing: border-box; }

/* common input / select rules */
ml-box input, ml-box select, ml-input input, ml-select select { white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; }

/* ml-input */
ml-box input, ml-input input { width: 100%; border-image: none; }

/* ml-select */
ml-box select, ml-select select { width: 100%; }

/* ml-textarea */
ml-box textarea, ml-textarea textarea { width: 100%; overflow: hidden; resize: none; }

/* ml-checkbox */
ml-checkbox { display: block; position: relative; }
ml-box input[type=checkbox], ml-checkbox input[type=checkbox] { display: none; }
ml-box input[type=checkbox] + label, ml-checkbox label { position: relative; display: flex; flex-direction: row; width: 100%; padding: 0; margin: 0; }
ml-box input[type=checkbox] + label ml-marker, ml-checkbox label ml-marker { background-color: var(--tpx-ml-checkbox-ml-marker-background-color); border-color: var(--tpx-ml-checkbox-ml-marker-border-color); border-width: var(--tpx-ml-checkbox-ml-marker-border-width); border-radius: var(--tpx-ml-checkbox-ml-marker-border-radius); border-style: solid; flex-shrink: 0; display: block; cursor: pointer; background-repeat: no-repeat; transition: background-color .2s, border-color .2s; aspect-ratio: 1 / 1; }
ml-box :not(input[type=checkbox]:checked) + label ml-marker, ml-checkbox :not(input[type=checkbox]:checked) + label ml-marker { background-image: none !important; }
ml-box input[type=checkbox]:checked + label ml-marker, ml-checkbox input[type=checkbox]:checked + label ml-marker { background-color: var(--tpx-ml-checkbox-ml-marker-checked-background-color) !important; border-color: var(--tpx-ml-checkbox-ml-marker-checked-border-color) !important; }

/* ml-toggler */
ml-box input[type=checkbox] + label ml-marker.tpx-toggler, ml-checkbox label ml-marker.tpx-toggler { background-color: var(--tpx-ml-toggler-ml-marker-background-color); border-color: var(--tpx-ml-toggler-ml-marker-border-color); border-width: var(--tpx-ml-toggler-ml-marker-border-width); border-radius: var(--tpx-ml-toggler-ml-marker-border-radius); border-style: solid; flex-shrink: 0; position: relative; display: block; cursor: pointer; background-repeat: no-repeat; transition: all .2s; }
ml-box input[type=checkbox] + label ml-marker.tpx-toggler:before, ml-checkbox label ml-marker.tpx-toggler:before { background-color: var(--tpx-ml-toggler-ml-marker-inner-background-color); border-radius: var(--tpx-ml-toggler-ml-marker-border-radius); height: calc(100% - 2pt); left: 0; top: 50%; transform: translate(1pt, -50%); content: ''; position: absolute; z-index: 2; transition: all 0.2s; aspect-ratio: 1 / 1; }
ml-box input[type=checkbox]:checked + label ml-marker.tpx-toggler:before, ml-checkbox input[type=checkbox]:checked + label ml-marker.tpx-toggler:before { background-color: var(--tpx-ml-toggler-ml-marker-checked-inner-background-color); left: 100%; transform: translate(calc(-100% - 1pt), -50%); }

/* ml-radio */
ml-radio { display: block; position: relative; }
ml-box input[type=radio], ml-radio input[type=radio] { display: none; }
ml-box input[type=radio] + label, ml-radio label { position: relative; display: flex; flex-direction: row; width: 100%; padding: 0; margin: 0; }
ml-box input[type=radio] + label ml-marker, ml-radio label ml-marker { background-color: var(--tpx-ml-radio-ml-marker-background-color); border-color: var(--tpx-ml-radio-ml-marker-border-color); border-width: var(--tpx-ml-radio-ml-marker-border-width); box-shadow: 0 0 0 var(--tpx-ml-radio-ml-marker-box-shadow-width) var(--tpx-ml-radio-ml-marker-box-shadow-color); border-radius: 999px; border-style: solid; flex-shrink: 0; display: block; cursor: pointer; background-repeat: no-repeat; transition: background-color .2s, border-color .2s; aspect-ratio: 1 / 1; }
ml-box input[type=radio]:checked + label ml-marker, ml-radio input[type=radio]:checked + label ml-marker { background-color: var(--tpx-ml-radio-ml-marker-checked-background-color) !important; border-color: var(--tpx-ml-radio-ml-marker-checked-border-color) !important; box-shadow: 0 0 0 1pt var(--tpx-ml-radio-ml-marker-checked-box-shadow-color) !important; }

/* hidden input within ml-radio */
ml-box .tpx-radio-input-row input[type=radio]:checked ~ .tpx-radio-input { display: flex; }
ml-box .tpx-radio-input-row input[type=radio] ~ .tpx-radio-input { display: none; }

/* ml-button */
ml-button { display: flex; flex-shrink: 0; justify-content: center; align-items: center; max-width: 100%; font-size: var(--tpx-button-font-size); line-height: 1.25; color: var(--tpx-button-color); background-color: var(--tpx-button-background-color); border-radius: var(--tpx-button-border-radius); font-family: inherit; white-space: nowrap; min-width: 0; transition: all 0.2s ease; border: 0 solid transparent; cursor: pointer; }
ml-button:hover { color: var(--tpx-button-color-hover); background-color: var(--tpx-button-background-color-hover); }
ml-button.tpx-btn-sec { color: var(--tpx-button-color-sec); background-color: var(--tpx-button-background-color-sec); }
ml-button.tpx-btn-sec:hover { color: var(--tpx-button-color-hover-sec); background-color: var(--tpx-button-background-color-hover-sec); }

.mlctr-message-error:empty { display: none; }


/********     OTHER STRUCTURES
/*************************************************************/

/* helpers */
.nowrap { white-space: nowrap }

/* scale hovers */
.tpx-hover-scale-1, .tpx-hover-scale-2, .tpx-hover-scale-3 { transition: all .5s ease-in-out }
.tpx-hover-scale-1:hover { transform: scale(1.05); }
.tpx-hover-scale-2:hover { transform: scale(1.1); }
.tpx-hover-scale-3:hover { transform: scale(1.15); }

/* animations */
.tpx-animate { animation-duration: var(--tpx-animate-delay); animation-delay: var(--tpx-animate-duration); animation-iteration-count: var(--tpx-animate-repeat); animation-timing-function: linear; animation-fill-mode: both; animation-direction: normal; }

@media (print), (prefers-reduced-motion: reduce) {
  .tpx-animate {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* mandatory fields validation */
.mailocator-mandatory-alert { position: fixed; background: red; color: #fff; line-height: 20px; font-size: 12px; padding: 2px 16px 0 8px;	min-width: 100px; height: 20px;	margin-top: -30px; border-radius: 2px; border-bottom-left-radius: 0; z-index: 9999999; transition: all .3s ease; }
.mailocator-mandatory-alert:before { width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 0; border-color: red transparent transparent transparent; position: absolute; left: 0; top: 20px; content: ''; }
.mandatory-alert-animation { outline-color: red !important; animation: shake .5s linear; }

@keyframes shake {
	8%, 41% { transform: translateX(-10px); }
	25%, 58% { transform: translateX(10px); }
	75% { transform: translateX(-5px); }
	92% { transform: translateX(5px); }
	0%, 100% { transform: translateX(0); }
}

/* preloaders */
.mlctr-preloader { position: absolute !important; left: 0; right: 0; top:0; bottom: 0; z-index: 9999999; opacity: 0; transition: opacity .3s ease-in-out; }
.prlfx-99 { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;	}
.prlfx-99 div { position: relative; width: 150px; height: 150px; background: url(https://mlcdn.eu/global/logo/mailocator.svg); background-size: 50%; background-repeat: no-repeat; background-position: center; }
.prlfx-99 div::before { content: ""; border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 100%; height: 100%; animation: spin 2s linear infinite; position: absolute; background: rgba(255,255,255,.3); left: 0; }
.prlfx-0 {  background-repeat: repeat; opacity: 0.1 !important; border-radius: inherit; background-image: repeating-linear-gradient(-45deg,#7d7d7d,#7d7d7d 11px,#eee 20px,#eee 40px); background-size: 56px 56px; animation: pplmove .5s linear infinite; }
.prlfx-1 { background: rgba(0,0,0,.4); }
.prlfx-2 { background: rgba(255,255,255,.4); }
.prlfx-3 { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background:rgba(0,0,0,.1); }

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes pplmove {
	0% { background-position: 0 0; }
	100% { background-position: 56px 0; }
}

/* EXTENSIONS [Closer] */	
.remaining-time-indicator {	position: absolute; box-sizing: border-box; left: 1px; top: 1px; right: 1px; height: 5px; background:#3d8df5; width:100%; transition-property: width; transition-duration: 1s; transition-timing-function: linear; }
.remaining-time-indicator.shrink { width: 0%; }

/* EXTENSIONS [Rating] */
ml-box.tpx-rating { flex-direction: row-reverse; font-size: var(--tpx-ml-rating-size); }
ml-box.tpx-rating input[type="radio"] { display: none; }
ml-box.tpx-rating input[type="radio"]:first-child + label { padding-right: 0 !important; }
ml-box.tpx-rating input[type="radio"] + label { cursor: pointer; display: block; color: var(--tpx-ml-rating-color); padding-right: 0.4em; width: auto; flex-shrink: 0; }
ml-box.tpx-rating input[type="radio"] + label:before { content: '★'; transition: all .2s; }
ml-box.tpx-rating > input[type="radio"]:checked ~ label { color: var(--tpx-ml-rating-checked-color); }
ml-box.tpx-rating input[type="radio"] + label:hover, ml-box.tpx-rating input[type="radio"] + label:hover ~ label { color: var(--tpx-ml-rating-hover-color); }		
ml-box.tpx-rating > input[type="radio"]:checked + label:hover, ml-box.tpx-rating > input[type="radio"]:checked + label:hover ~ label, ml-box.tpx-rating > input[type="radio"]:checked ~ label:hover, ml-box.tpx-rating > input[type="radio"]:checked ~ label:hover ~ label, ml-box.tpx-rating > label:hover ~ input[type="radio"]:checked ~ label { color: var(--tpx-ml-rating-checked-hover-color); }

/* EXTENSIONS [Countdown] */
ml-countdown { position: relative; max-width: 100%; display: flex; flex-direction: row; }
ml-countdown.tpx-block { display: block; }
ml-countdown.tpx-block ml-text { display: inline; }


@media screen and (max-width: 575.98px) {
	/* input min. font-size */
	ml-box input, ml-box select, ml-box textarea, ml-input input, ml-select select, ml-textarea textarea { font-size: 16px; }
}


/*  intro animations */

@keyframes mlIntroFade {
  from {	
	opacity: 0;
  }
  to {	
	opacity: 1;
  }
}
@keyframes mlIntroZoom {
   0% {
	transform: scale(0.3);
	opacity: 0;
  }
  80% {
	transform: scale(1.02);
	opacity: 1;
  }
  100% {
	transform: scale(1);
	opacity: 1;
  }
}
@keyframes mlIntroB {
  from { transform: translateY(100px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes mlIntroT {
  from { transform: translateY(-100px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes mlIntroL {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes mlIntroR {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.ml-intro-fade { animation: mlIntroFade .6s ease-out both; will-change: opacity; }
.ml-intro-zoom { animation: mlIntroZoom .6s cubic-bezier(0.5, .9, 0.2, 1) both; will-change: transform, opacity; }
.ml-intro-b { animation: mlIntroB .6s cubic-bezier(0.0, .9, 0.2, 1) both; will-change: transform, opacity; }
.ml-intro-t { animation: mlIntroT .6s cubic-bezier(0.0, .9, 0.2, 1) both; will-change: transform, opacity; }
.ml-intro-l { animation: mlIntroL .6s cubic-bezier(0.0, .9, 0.2, 1) both; will-change: transform, opacity; }
.ml-intro-r { animation: mlIntroR .6s cubic-bezier(0.0, .9, 0.2, 1) both; will-change: transform, opacity; }