.loadingSpinner {
    padding-bottom: 11rem;
}

/* Just a note – Ricky recommended adding the following to your CSS targeting 

‘.megaEditBodyClass-RegisteredUser’

As this will allow you to allow for a different style for admins and users so that refined experience is only restricted to registered users and if you need to make changes etc. 
then logged in as an admin will allow you to see the full experience.
*/

@charset "utf-8";
/* CSS Document */

/* Fonts */
@font-face {
   font-family: AvenirLTPro-Book;
   src: url('/31881587/Handler/CSSOverride/GetImage/3/AvenirLTPro-Book.otf');
}
@font-face {
   font-family: AvenirLTPro-BookOblique;
   src: url('/1643048611/Handler/CSSOverride/GetImage/3/AvenirLTPro-BookOblique.otf');
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'AvenirLTPro-Book';
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    font-size: 20px;
}

p{
	font-family: 'AvenirLTPro-Book';
}

	/* This sets the loading page before opening editor*/
	.modal.EditorIntro.LoadingDialog .modal-dialog .modal-body {
		height: 100%!important;
		width: 100%!important;
		padding-top: 40vh!important;
		padding-left: 10vh!important;
		padding-right: 10vh!important;
	}
	
	/* This sets the title of menu options on the right*/
	.megaEditBodyClass-RegisteredUser .title.is-3 {
		display: flex;
		flex-direction: column-reverse;
		flex-wrap: wrap;
		align-content: space-around;
		border-bottom: 3px solid #002E47;
	}

	/* This hides the MENU options  >> SET TO BLOCK when u want to change MENU structure*/
	.megaEditBodyClass-RegisteredUser .buttons:not(:last-child) {
		display: none;
	}

	/* This hides the page btn */	
	.megaEditBodyClass-RegisteredUser .memobilePageClass.buttons.ng-scope{
		display: none; 
	}

	/* This hides the fullscreen btn */	
	.megaEditBodyClass-RegisteredUser .catfish-button.has-text-hidden-mobile.btn.btn-default.btn-me.viewControlButton.fullScreen.ng-scope{
		display: none; 
	}

	/* This hides the extra add to basker btn */	
	.megaEditBodyClass-RegisteredUser .bottom-bar-actions.bottom-bar-actions-top.ng-scope {
		display: none; 
	}

	/* Let's make some action buttons Eshuis light blue 
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.background-select-button.has-border.is-fullwidth.is-primary,
	.megaEditBodyClass-RegisteredUser .button.is-fullwidth.has-icon.is-justify-content-space-between.has-border,
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.AddImageToField.is-fullwidth.is-justify-content-flex-start.has-border.is-primary.buttonClassName-Userimage{
		border: solid 1px black !important;
		border-radius: 5px!important;
		margin: 1% !important;
		background-color: #00B5E2 !important;
		color: white!important;
	}
	*/	
	
	/* stlye for hover effects of action buttons 
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.background-select-button.has-border.is-fullwidth.is-primary:hover,
	.megaEditBodyClass-RegisteredUser .button.is-fullwidth.has-icon.is-justify-content-space-between.has-border:hover,
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.is-fullwidth.DFB-AddToBasketButton.has-border:hover,
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.AddImageToField.is-fullwidth.is-justify-content-flex-start.has-border.is-primary.buttonClassName-Userimage:hover{
		background: #002855!important;
	}
	*/	

	/* style the add to cart btn */	
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.is-fullwidth.DFB-AddToBasketButton.has-border{
		background: green;
		color: white;
		border: solid 1px black !important;
		border-radius: 5px!important;
		margin: 1% !important;
	}
	
	/* style the change background btn */	
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.background-select-button.has-border.is-fullwidth.is-primary{
    background-color: #FFFFFF;
    border-color: #dbdbdb;
    border-width: 0px;
    color: rgba(26, 26, 26, 0.7);
    cursor: pointer;
    justify-content: center;
    padding-top: calc(0.375em - 0px);
    padding-bottom: calc(0.375em - 0px);
    white-space: nowrap;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: center;
	}
	
	/* style the change background btn -- HOVER */	
	.megaEditBodyClass-RegisteredUser .ng-binding.ng-scope.meuiButton.catfish-button.btn.btn-default.btn-me.background-select-button.has-border.is-fullwidth.is-primary:hover{
	border-color: #4a4a4a;
    color: rgba(26, 26, 26, 0.7);
    background: #f2f2f2;
	}
	
	/* colorpicker at background selector */	
	.megaEditBodyClass-RegisteredUser .icon.is-small.is-hidden-old-theme{
		color: black;
	}

	/* This sets the close btn (in preview) in the middle  */	
	.megaEditBodyClass-RegisteredUser .preview_close_button.button.is-primary.ng-binding{
		right: 40%!important;
		width: 20%;
	}
	
	/* hide fullscreen option*/
	.megaEditBodyClass-RegisteredUser .catfish-button.has-text-hidden-mobile.btn.btn-default.btn-me.viewControlButton.fullScreen{
		display: none;
	}
	
	/* hide text - "voeg een veld toe"*/
	.megaEditBodyClass-RegisteredUser .meuiNonLayout.ng-binding.ng-scope.meuiLabel.label.add-fields-title{
		display: none;
	}

	/* settings for mobile */	
	@media only screen and (max-width:819px) {
		.megaEditBodyClass-RegisteredUser .columns.is-variable.is-2>.column {
			padding: 0rem!important;
		}

	}