:root {
	--mp-brand-font: Mochiy Pop One;
	--mp-content-font: Poppins;
	--mp-background-color: #F8F8F2; /*ivory mist*/	
	--mp-text-color: #4A4A4A; /*charcoal cloud*/
	--mp-button-color: #CDB4DB; /*purple like*/	
			
}	

/*Bootstraping*/
*, *::before, *::after { box-sizing: border-box;}
html { scroll-behavior: smooth;  height:100%; margin:0; padding:0;	}
a {color: inherit;} a:link {text-decoration: none;} a:visited {text-decoration: none;}


/*Typography*/	
body { font-family:var(--mp-content-font),sans-serif; background-color:var(--mp-background-color);color:var(--mp-text-color);}
.mp-brand { font-family:var(--mp-brand-font),sans-serif;}
.mp-bold {font-weight: bold;}
.mp-italic { font-style: italic; }
.mp-strikethrough { text-decoration: line-through; }
ul, ol { margin: 0; padding-left: 1.2rem; }
.mp-underline {border-bottom:1px solid; }


.mp-background-curve {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23A4E5E0' fill-opacity='1' d='M0,224L48,234.7C96,245,192,267,288,250.7C384,235,480,181,576,170.7C672,160,768,192,864,202.7C960,213,1056,203,1152,197.3C1248,192,1344,192,1392,192L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat:no-repeat;background-size:cover;background-position: center;
	min-height:30vh;border-radius:.5rem;padding:1rem;
}

/*visibility*/
.mp-visible {display:block;}
.mp-hidden {display:none;}
.mp-opacity {opacity:.6;}

/*size and alignment*/
.mp-width-max {max-width: 800px; margin-inline:auto;}
.mp-width-full {width: 100%;}
.mp-logo {width:40px;}

.mp-right {text-align:right;}
.mp-left {text-align:left;}


/*buttons*/
button {
	display: inline-block;padding: .5rem;border: none;border-radius:.5rem;cursor: pointer;
    background-color: inherit; color: inherit;
    text-align: center; vertical-align: middle; overflow: hidden; text-decoration: none;white-space: nowrap;
}
button.selected .material-symbols-outlined {color:green;}
.mp-button-float {position:fixed;top:6rem;left:0;border-radius:0 1rem 1rem 0;background-color:var(--mp-background-color);color:var(--mp-text-color);box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);padding:1rem;}

/*tabs and panes*/
.mp-pane {position:fixed;bottom:0rem;width:100vw;background-color:var(--mp-background-color);color:var(--mp-text-color);border-top:1px solid lightgray;}
.mp-form-area {max-height:65vh;overflow-y:scroll;overflow-x:hidden;padding:.5rem 2rem;margin-bottom:1rem;border-bottom:1px solid lightgray;}
.mp-form-section {border-top:1px solid lightgray;padding:1rem;}

.mp-tabs {display:flex;justify-content:space-evenly;}
.mp-actionbar {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  white-space: nowrap; margin-inline:1rem; gap: 1rem; padding: 0.5rem; 
}
.mp-actionbar button { scroll-snap-align: start; flex: 0 0 auto; /* prevent buttons from shrinking */}
.mp-button {background-color:#0C6170;color:#fff;}

.mp-selected-tab {color:green;}






.mp-button-text {color:blue;}


	


.mp-border-dashed {border:1px dashed;padding:1rem;margin:.5rem;}
.mp-horiz-scroll { width: 100%; overflow-x: auto; white-space: nowrap;}

.mp-inline {display:inline-block;}


.mp-grid-right {display:grid;grid-template-columns: auto 30%;align-items:center;}
.mp-grid-left {display:grid;grid-template-columns: 30% auto;align-items:center;}

.mp-grid {display: grid;grid-template-columns: auto auto;align-items:baseline;gap:.5rem;padding-block:.5rem;}

.mp-grid-3 {display: grid;grid-template-columns: auto auto auto;gap:.5rem;}

.mp-grid-4 {display: grid;grid-template-columns: auto auto auto auto;align-items:baseline;gap:.5rem;padding-block:.5rem;}
.mp-grid-5 {display: grid;grid-template-columns: auto auto auto auto auto;align-items:center;gap:.5rem;padding-block:.5rem;}

.mp-flex {display:flex;}

.mp-progressbar {background:url('https://ik.imagekit.io/9npsizfve/progress-10852_256.gif?updatedAt=1725240640957');width:100%;height:1.5vh;background-position:center center;background-size:cover;display:none;}
.mp-popup {text-align:left; font-size:1.3rem; opacity:.8; padding:1rem;}

input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], textarea, select {border:0px;background-color:inherit;color:#111;width:100%;padding:2px;margin:2px;}

.mp-whatsapp-format {
    white-space: pre-wrap;
    /*font-family: Arial, sans-serif;*/
}


@media (orientation: portrait) {

}		

@media (orientation: landscape) { 
	.mp-pane {width:30vw;margin-left:5vw;}
}