:root {
	--mp-brand-font: Mochiy Pop One;
	--mp-content-font: Poppins;
	
	/*
	--mp-color-background: #E6A640; /*for highlighted backgrounds*/
	/*--mp-color-accent: #008080; /*For buttons old: #E64E67;*/
			
}	

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


/*Typography*/	
body { font-family:var(--mp-content-font),sans-serif; }
.mp-brand { font-family:var(--mp-brand-font),sans-serif;}
.mp-logo {width:40px;}

.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;
}

.mp-width-max {max-width: 800px; margin-inline:auto;}
.mp-width-full {width: 100%;}

.mp-right {text-align:right;}
.mp-button {background-color:#0C6170;color:#fff;border-radius: .5rem;}
.mp-button-save {background-color:green;color:white;border-radius: .5rem;}
.mp-button-text {color:blue;}
.mp-border-dashed {border:1px dashed;padding:1rem;margin:.5rem;}
.mp-button-float {position:fixed;top:2rem;left:0;border-radius:0 1rem 1rem 0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);background:white;padding:1rem;}

.mp-hidden {display:none;}
.mp-selected-tab {color:green;}	
.mp-toolbar-container {position:fixed;bottom:1rem;width:90vw;margin-inline:5vw;background-color:rgb(256,256,256,.98);color:black;border-radius:.5rem;border:1px solid gray;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.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;}

.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:center;gap:.5rem;padding:1rem;}
.mp-grid-3 {display: grid;grid-template-columns: auto auto auto;align-items:center;gap:.5rem;padding:1rem;}
.mp-grid-4 {display: grid;grid-template-columns: auto auto auto auto;align-items:center;gap:.5rem;padding:1rem;}
.mp-grid-5 {display: grid;grid-template-columns: auto auto auto auto auto;align-items:center;gap:.5rem;padding:1rem;}

.mp-form-area {max-height:65vh;overflow-y:scroll;overflow-x:hidden;}
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;
}
.mp-bold {
    font-weight: bold;
}
.mp-italic {
    font-style: italic;
}
.mp-strikethrough {
    text-decoration: line-through;
}
ul, ol {
    margin: 0;
    padding-left: 1.2rem;
}



@media (orientation: portrait) {

}		

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


/*
.mp-orange {background-color:#E6A640;}	
.mp-light-blue {background-color:#90C9E7;}
.mp-text-light-blue {color:#90C9E7;}
.mp-blue-green {background-color:#37BEB0;}
*/	

/*Sizes*/

/*
.mp-width-full {width:100%;}


.mp-selected-border-top {border-top:1px solid orange;}
.mp-done-color {background-color:green;color:white;}
.mp-left {text-align:left;}

.mp-no-menu-image {width:100%;max-width:400px;}


*/

/*Toolbars Buttons and Forms*/
/*
.mp-button-solid {background-color:#0C6170;color:#fff;	border-radius: .5rem;}	
.mp-button-admin {background-color:tomato;color:#fff;	border-radius: .5rem;}	
.mp-overlay-hidden {position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgb(0,0,0,.1);display:none;}

.mp-toolbar {display: grid;grid-template-columns: auto auto auto auto auto;align-items:center;justify-items:center;}
	
.mp-action-bar {display: grid;grid-template-columns: auto auto;align-items:center;}

.mp-form-section-collapsible {display: grid;grid-template-columns: 60% 20% 20%;align-items:center;margin-block:12px;}
.mp-grid-colspan-3 {grid-column: 1 / span 3;}
.form-item-details {margin-bottom:12px;}
		

	
.switch { position: relative; display: inline-block; width: 50px; height: 24px; margin-bottom:4px;justify-self: right;}	
.switch input { opacity: 0;width: 0;height: 0;}	
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.slider:before { position: absolute;content: "";height: 16px;width: 16px;left: 4px;bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}
input:checked + .slider {background-color: var(--mp-color-accent);}	
input:focus + .slider {box-shadow: 0 0 1px #319197;}	
input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}
.slider.round {	  border-radius: 34px;	}	
.slider.round:before { border-radius: 50%; }


	
.mp-toast {width:100%;margin:auto;padding:16px;border:1px solid #319197;background-color:white;border-radius:4px;}
.mp-toast.fixed {position:fixed;top:25px;}
.mp-toast.error {border-color:red;background-color:#ffdddd!important;}
.mp-toast.success {border-color:green;}

.w3-button:active {background-color: red;  }
*/
/*
input::-webkit-calendar-picker-indicator {
  display: none!important;
} Getting rid of the drop down arrow that comes with data lists*/

/*
[list]::-webkit-calendar-picker-indicator {
    display: none!important;
  }
  

@media (min-width: 800px) {	
	.mp-toolbar-container {max-width:30vw;}
}


*/