// CLEAN UP THE PAGE

// remove screen options button on the top right
#screen-meta-links{
	display: none;
}

// system notice
div[class*="notice"]{
	box-sizing: border-box;
}

// HELPERS

.fupi_srt,
.fupi_slider_nav li span{ // screen reader text
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.fupi_small{
	font-size: 13px;
}
.fupi_hidden:not(.fupi_do_not_hide){
	display: none;
}
.fupi_clearfix{
	content: "";
  	clear: both;
  	display: table;
}
.fupi_spacer{
	height: 6px;
	+.fupi_under_field{
		margin-top: 0;
	}
}
.notice{
	box-sizing: border-box;
}
.fupi_warning_text{
	// color: #cb6f00;
	color: #000;
	background-color: #ffffb5;
	outline: 5px solid #ffffb5;
}
.fupi_alert_text{
	color: red;
}
.fupi_center_content{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#fupi_content{
	margin-top: 0 !important;
	.dashicons{
		font-size: inherit;
		vertical-align: middle;
	}
	h1{
		padding: 0 !important;
	}
}

.fupi_cols{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	>*{
		min-width: 250px;
	}
}
	.fupi_col_33{
		flex: 1 0 calc(33% - 20px);
	}
	.fupi_col_50{
		flex: 1 0 calc(50% - 20px);
	}
	.fupi_col_66{
		flex: 1 0 calc(66% - 20px);
	}

// CTA BUTTONS

#fupi_content .button-primary,
.fupi_form_buttons_wrap #submit,
#fupi_get_pro_link{
    background-color: #f3c836;
    border: 1px solid #bf9c27;
	border-radius: 50px;
	font-weight: 500;
    color: #000;
	&:hover, &:focus{
		background-color: lighten(#f3c836, 20%);
	}
}

#fupi_content .button-primary{
	min-height: 40px !important;
	line-height: 40px !important;
	padding: 0 1em;
}

.fupi_form_buttons_wrap #submit{
    padding: 0 25px !important;
}

#fupi_content .button-secondary{
	background: #f3faff;
	border-radius: 50px;
	color: #112849;
	border-color: #517b9d;
	padding: 0 1em !important;
	min-height: 30px !important;
	line-height: 30px !important;
	.dashicons{
		line-height: 1em !important;
	}
	&:hover, &:focus{
		background-color: #fff !important;
	}
}

.button-medium{ // useful when the button is outside the #fupi_content block
	font-size: 15px !important;
    padding: 8px 20px !important;
    line-height: 1.2em !important;
}

.fupi_section_descr button.button-secondary{
	line-height: 1em !important;
}