/* Version 4.9.5 */                 
        /*
		
		4.9.51
		
		/* back compatibility */
		ml-main.mlctr-popup.ml-upgraded {
			max-width:initial;
			top:initial;
			left:initial;
			transform: translate(0,0);
		}
		
		/*		
        // 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-block; /*overflow: auto;*/ position: fixed; background: none !important } /* 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) }     
        
        /*        
        <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; /* due to auto-height scroll in columns inside */
            width:auto; max-width:100%; 
            __height:auto; 
            padding:0; margin:0;
            border:1px solid transparent; /* ! reset unwanted background from parenet element */						
        }
		/* different max-heights */
		ml-object.tpx-fullscreen > ml-main { max-height:100% }
		ml-object.tpx-sticker    > ml-main { max-height:100vh }
		
        /*
        default shadows <ml-main class="tpx-shadow">
        */		
        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); }
		
		/*
        <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 { 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: #000; 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{ right: 10px; top: 10px; }
        ml-close.tpx-outside{ right: -12px; top: -12px; }
        /* crosshair size */
		ml-close.tpx-thin:after, ml-close.tpx-thin:before { height:1px } /* default */
		ml-close.tpx-semi:after, ml-close.tpx-semi:before { height:2px }
		ml-close.tpx-bold:after, ml-close.tpx-bold:before { height:3px }
		/* cross-hair color */		
		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 .2 ease-in-out }
		ml-main:hover ml-close.tpx-onhover { opacity: 1 }
		/* ml-main:has(ml-close.tpx-outside){ margin:15px } helper for close button */
						

		/*
		// INTERNAL BLOCK
		/ . . . . . . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . . 
		*/
		ml-box, ml-col, ml-row { position: relative; box-sizing: border-box; max-width: 100%; }		
		ml-box { display: block }
		
		ml-countdown {  position: relative; box-sizing: border-box; max-width: 100%; display: flex; flex-direction: row } 
		
		
        /*
        // FLEX - flex element positioning
        / . . . . . . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . . 
        */
        /* directions */
        .tpx-wrap{ flex-wrap: wrap; }
        ml-col, .tpx-col{ display: flex; flex-direction: column; }
        ml-row, .tpx-row { display: flex; flex-direction: row }
        ml-col img[src$=".svg"], ml-row img[src$=".svg"], *.tpx-col img[src$=".svg"], .tpx-row img[src$=".svg"] { align-self: center !important } /* hack for svg images */
        ml-col p, ml-row-p, .tpx-col p, .tpx-col h1, .tpx-row p, .tpx-row h1 { width:100% } /* hack */        
        /* column oriantion & align */
        ml-col.tpx-t, .tpx-col.tpx-t { justify-content: flex-start }
        ml-col.tpx-m, .tpx-col.tpx-m { justify-content: center }
        ml-col.tpx-b, .tpx-col.tpx-b { justify-content: flex-end }
        ml-col.tpx-l, .tpx-col.tpx-l { align-items: flex-start; width: 100%;  align-content: flex-start }
        ml-col.tpx-c, .tpx-col.tpx-c { align-items: center; width: 100% }
        ml-col.tpx-r, .tpx-col.tpx-r { align-items: flex-end; width: 100% }        
        /* row oriantion & align */
        ml-row.tpx-t, .tpx-row.tpx-t { align-items: flex-start; }
        ml-row.tpx-m, .tpx-row.tpx-m { align-items: center }
        ml-row.tpx-b, .tpx-row.tpx-b { align-items: flex-end}
        ml-row.tpx-l, .tpx-row.tpx-l { justify-content: flex-start; width: 100% }
        ml-row.tpx-c, .tpx-row.tpx-c { justify-content: center; width: 100%}
        ml-row.tpx-r, .tpx-row.tpx-r { justify-content: flex-end; width: 100% }
		
		/* spacig between elements */
		.tpx-justify-none {}
		.tpx-between, .tpx-justify-between{ justify-content: space-between !important; } /* */		
		.tpx-around, .tpx-justify-around{  justify-content: space-around !important; }
		.tpx-evenly, .tpx-justify-evenly{  justify-content: space-evenly !important; }
		
		ml-row.tpx-c.tpx-between, .tpx-row.tpx-c.tpx-between, .tpx-row.tpx-c.tpx-justify-between, ml-row.tpx-c.tpx-justify-between { justify-content: center }


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

        /*
        // INNER STRUCTURES
        / . . . . . . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . . 
        */
        
		/*	
			splitter line with centered text in bubble
		*/
		ml-split { display: flex; position: relative; align-items: center; justify-content: center; margin:50px 0 15px 0; width:100%; text-align: center; }
		ml-split > * { display: inline-block; position: relative; z-index: 99999; margin: 0; padding: 0;
			background:#fff; font-size: 12px; line-height: 16px; background: gray; color: #fff; border-radius: 15px; padding: 0 12px; 
			text-transform: uppercase
		}
		ml-split:before { display:block; position: absolute; width: 100%; content: ''; border-bottom:1px solid gray }
		
		
		/*
		helpers
		*/
		.nowrap { white-space: nowrap }
		
		
        /*
            reset for common tags
        */
        ml-main div, 
        ml-main p, 
        ml-main h1 { 
            display: block; position:relative;            
            padding: 0; margin: 0; border: 0; border-radius: 0;
            width:100%; max-width:100%
        }
        
        /* buttons and inputs */
        ml-main input[type="text"], ml-main input[type="date"], ml-main input[type="email"], ml-main button { 
            display: inline-block; outline: none; padding: 0 10px; margin: 0;
            font-size:13px; line-height: 20px;            
            width:100%; max-width:100%;
            height:34px; border: 1px solid #000; border-radius: 5px;
        }        
        ml-main input[type="date"] {
			padding: 4px 5px 0 5px;
		}
		ml-main button {
            border:none; cursor: pointer;
            background: black; color:#fff
        }           
		
		ml-text {
			display: block;
			position: relative;
		}
		
		
		
 	    /* select */    
        select-box { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; margin:0; padding:0; width: 100% }  
        select-box select { display: block; position: relative; text-align: left; border: 0; margin: 0; 
            appearance: none; -webkit-appearance: none; -moz-appearance:none; outline: none;
            width: 100%; height: 34px; line-height: 34px; padding: 0 10px; 
            font-size: 13px; color: #263243; background: #fff; border: 1px solid #000; border-radius: 5px; font-weight: 400;
		text-align: center; }
        select-box select:focus { border-color: #3d8df5; }
        select-box select { padding-right: 30px; cursor: pointer; }
        select-box::before,select-box::after { position:absolute; display:block; content:""; 
            border:8px solid transparent; /* <-- adjust chevron size */
        }
        select-box::after { 
            margin:10px 10px 0 0; border-top-color:#000 /* <-- adjust chevron position and color */    
        }  	
		
        /* checkbox */
        check-box { display: inline-block }
        check-box input[type=checkbox] { display: none }
        check-box input[type=checkbox] + label { display: block; position: relative; display: flex; flex-direction: row; width: 100% }
        check-box input[type=checkbox] + label i { border: 1px solid #000; color: #fff; border-radius: 5px;  /* <-- checkbox square  */
             width: 16px; height: 16px; line-height: 16px; display: block; cursor: pointer; margin-right: 6px; transition: all 0.2s ease-out; 
        }     
        check-box input[type=checkbox] + label i:after { content:'✓'; opacity: 0; display: inline-block; width: 16px }
        check-box input[type=checkbox]:checked + label i { background: #3d8df5; border-color: #3d8df5; color: #fff; opacity: 1 } /* <-- checked checkbox  */
        check-box input[type=checkbox]:checked + label i:after { opacity: 1 }
                                
        
 	   	/* radio */
        radio-box { display: inline-block }       
        radio-box input[type=radio] { display: none; }
		radio-box input[type=radio] + label { position: relative; display: flex; flex-direction: row; align-items: center; width: 100%; cursor: pointer }
        radio-box input[type=radio] + label i { border: 1px solid #000; color: #fff; border-radius: 9999px;
			min-width: 20px; height: 20px; display: block; cursor: pointer; padding: 0; margin-right: 6px; transition: all 0.2s ease-out; 
		}
	    radio-box input[type=radio]:checked + label i { background: #3d8df5 } /* <-- checked radio button */
       /* .tpx-row:has(radio-box) { justify-content: flex-start }*/		
        
        
        /* auto space between multiple form elements on one row */
        ml-row > * + select-box, ml-row > * + input[type], ml-row > * + button,
        .ml-row > * + select-box, .ml-row > * + input[type], .ml-row > * + button,
		.ml-row > * + check-box, ml-row > * + check-box, .ml-row > * + radio-box, ml-row > * + radio-box { margin-left: 10px }
        
		
		/*
		SYSTEM BLOCKS
		. . . . . . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . . 
		*/				
		ml-terms { display: block; position: absolute; left:0; top:0; bottom:0; right:0; 
			overflow: scroll; 
			background: #fff; 
			padding: 10px; margin:0; border:0;
			color:#000;
			box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
		}
		
		
		/* 
		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]
		. . . . . . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . . 
		*/				
		.tpx-rating:not(:checked) > input {
			position:absolute;
			top:-9999px;
		}		
		.tpx-rating:not(:checked) > label {
			float:right;
			width:26px;
			overflow:hidden;
			white-space:nowrap;
			cursor:pointer;
			font-size:20px;
			padding: 3px;
			line-height:26px;
			color:#ddd;
		}		
		.tpx-rating:not(:checked) > label:before {
			content: '★ ';
		}		
		.tpx-rating > input:checked ~ label {
			color: #ffc700;    
		}		
		.tpx-rating:not(:checked) > label:hover,
		.tpx-rating:not(:checked) > label:hover ~ label {
			color: #deb217;  
		}		
		.tpx-rating > input:checked + label:hover,
		.tpx-rating > input:checked + label:hover ~ label,
		.tpx-rating > input:checked ~ label:hover,
		.tpx-rating > input:checked ~ label:hover ~ label,
		.tpx-rating > label:hover ~ input:checked ~ label {
			color: #c59b08;
		}		
		
		
		/* 
		RESPONSIVENESS 600px breakpoint is default
		. . . . . . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . . 
		*/
				
		@media screen and (max-width: 600px) {
			ml-row.tpx-auto-wrap { flex-direction: column !important; min-width: 100% !important } 
			ml-col.tpx-auto-wrap { flex-direction: row !important; min-width: 100% } 		
			ml-col.tpx-100pct, ml-row.tpx-100pct { width: 100% !important }
		}
		
				
		
		/* 
		ANIMATIONS 
		. . . . . . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . . 
		*/
		
		/* hovers */
		.tpx-hover-scale { transition: all .5s ease-in-out }
		.tpx-hover-scale:hover { transform: scale(1.1) }
		
		
		/* mandatory fields anim */
		.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)
		}
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}		
		
		.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;}
		@keyframes pplmove {0% {background-position: 0 0;}100% {background-position: 56px 0;} }		
		.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);
		}
		
		
		/* window Open Effects */
		.oe-fade { opacity: 0 } 
		.oe-fade-tr { transition: opacity .5s ease-in-out; border:1px solid red !important }
		
		/*.oe-b { transform: translateY(500px); opacity: .5 }*/
		
		.oe-zoom { transform: scale(0) } 
				
		.oe-bounce {
			border: 5px solid red;
			animation-name: bounce;
			animation-delay: 450ms;
		}
		
		@keyframes bounce {
		  0% {
			transform: scale(0);
		  }
		
		  14% {
			transform: scale(1.15);
		  }
		
		  28% {
			transform: scale(1);
		  }
		
		  42% {
			transform: scale(1.15);
		  }
		
		  70% {
			transform: scale(1);
		  }
		  100% {
			transform: scale(1);
		  }
		}