/*  MICROTHEMER STYLES  */


/*= General =================== */

/** General >> Underline links in paragraphs (Remove underline with class .no-underline) **/
p a {
	text-decoration: underline !important;
}
.no-underline a {
	text-decoration: none !important;
}

/** General >> Social Icons - Add hover transition **/
.pp-social-icon .ua-icon {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
a .fa {
	-webkit-transition: color 0.3s !important;
	transition: color 0.3s !important;
}

/** General >> Make element sticky with .sticky-element for computers/tablets only **/
.sticky-element {
	position: -webkit-sticky !important;
	top: 120px !important;
	Position: sticky !important;
}
body {
	overflow-x: visible !important;
}

/** General >> Add hover transition to buttons **/
.btn, 
.button, 
.uabb-lf-submit-button, 
.pp-login-form--button, 
.uabb-lf-submit-button {
	-webkit-transition: 0.3s !important;
	transition: 0.3s !important;
}

/** General >> Add class .full-width-button to make button full-width on mobile **/
.full-width-button .pp-button {
	
}

/** General >> Align elements to bottom of column with .df-align-bottom **/
.df-lign-bottom {
	
}
.df-align-bottom {
	-webkit-align-content: flex-end !important;
	align-content: flex-end !important;
	display: grid !important;
	-webkit-flex: 1 1 0 !important;
	flex: 1 1 0 !important;
}


/*= Header ==================== */

/** Header >> Header - Add shadow below header that doesn't shrink **/
#sticky-menu > .fl-row-content-wrap {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.fl-theme-builder-header-scrolled {
	box-shadow: 0 5px 15px rgba(5,5,5,0.21) !important;
	-webkit-transition: 0.3s !important;
	transition: 0.3s !important;
}

/** Header >> Make Main Menu sticky on mobile devices **/
header[data-type="header"] {
	
}

/** Header >> Rotate Submenu icon on hover **/
.fl-module-pp-advanced-menu .pp-menu-toggle {
	-webkit-transition: All 0.1s !important;
	transition: All 0.1s !important;
}
.fl-module-pp-advanced-menu .pp-has-submenu:hover .pp-menu-toggle {
	transform: rotate(180deg) !important;
	-webkit-transition: All 0.1s !important;
	transition: All 0.1s !important;
}
.fl-module-pp-advanced-menu .sub-menu .pp-has-submenu-container:hover .pp-menu-toggle {
	transform: rotate(0deg) !important;
}
.fl-module-pp-advanced-menu .sub-menu .pp-has-submenu:hover .pp-menu-toggle {
	transform: rotate(0deg) !important;
}

/** Header >> Menu CTA - Add class .menu-cta to turn into button **/
.menu-cta a {
	color: #ffffff !important;
	background-color: #bbbbbb !important;
	border-radius: 5px !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.menu-cta a:hover {
	background-color: #aaaaaa !important;
}


/*= Fluent Forms ============== */

/** Fluent Forms >> Error Validation styling **/
.ff-el-is-error [type="text"], 
.ff-el-is-error [type="email"], 
.ff-el-is-error [type="number"], 
.ff-el-is-error textarea {
	background-color: rgb(255, 241, 241) !important;
	border-color: rgb(174, 80, 80) !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.ff-el-is-error select, 
.ff-el-is-error .choices__inner {
	border-color: rgb(174, 80, 80) !important;
}
.ff-el-is-error .choices {
	margin-bottom: 5px !important;
}
.ff-el-is-error select ~ .text-danger, 
.ff-el-is-error .choices ~ .text-danger {
	margin-top: 5px !important;
	border-radius: 5px !important;
}
.ff-el-is-error .ff-el-ratings ~ .text-danger, 
.ff-el-is-error .ff_file_upload_holder ~ .text-danger, 
.ff_list_buttons.ff-el-is-error .text-danger, 
.ff-el-is-error .ff-el-tc ~ .text-danger {
	border-radius: 5px !important;
}
.fluentform .ff-el-is-error.ff-el-group.ff_list_buttons .ff-el-form-check span {
	border-color: rgb(174, 80, 80) !important;
}
.ff-el-is-error .ff-el-form-check {
	border-radius: 0px !important;
	border: none !important;
}
.active select ~ .text-danger {
	max-width: 480px !important;
}
.ff-el-is-error .text-danger {
	background-color: rgb(174, 80, 80) !important;
	color: #ffffff !important;
	padding: 0px 10px 0px 10px !important;
	border-radius: 0px 0px 5px 5px !important;
	margin-top: 0px !important;
	font-size: 15px !important;
}

/** Fluent Forms >> Custom checkbox styling **/
.ff-el-form-check-label {
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	position: relative !important;
	cursor: pointer !important;
}
.ff-el-form-check-label span {
	margin-left: 5px !important;
}
.ff-el-form-check-label > input[type="checkbox"] {
	/* Custom styling for checkbox fields */
	height: 20px !important;
	min-width: 20px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	-o-appearance: none !important;
	appearance: none !important;
	border: 1px solid #04220D !important;
	border-radius: 4px !important;
	outline: none !important;
	-o-transition-duration: 0.3s !important;
	-moz-transition-duration: 0.3s !important;
	-webkit-transition-duration: 0.3s !important;
	transition-duration: 0.3s !important;
	background-color: #Ffffff !important;
	cursor: pointer !important;
	margin-top: 8px !important;
}
.ff-el-form-check-label > input[type="checkbox"]:checked {
	/* Custom styling for when checkbox fields are checked */
	border: 1px solid #1D8AFF !important;
	background-color: #cccccc !important;
}
.ff-el-form-check-label > input[type="checkbox"]:checked::before {
	/* Add a checkmark to checkbox when checkbox fields are checked */
	content: '\2713' !important;
	display: block !important;
	text-align: center !important;
	color: #1D8AFF !important;
	position: absolute !important;
	left: 1px !important;
	top: -9px !important;
	font-size: 30px !important;
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 0.3s !important;
	animation-duration: 0.3s !important;
}
.ff-el-form-check-label > input[type="checkbox"]:active {
	border: 1px solid #34495E !important;
}
.ff-el-form-check-label > input[type="checkbox"]:hover {
	/* Change border color when checkbox is hovered */
	border: 1px solid #0d4d91 !important;
}

/** Fluent Forms >> Custom T&C checkbox styling **/
.ff_tc_checkbox > input[type="checkbox"] {
	background-color: #ffffff !important;
	min-width: 20px !important;
	height: 20px !important;
	margin-top: -10px !important;
	border: 1px solid #04220D !important;
	border-radius: 4px !important;
	-o-transition-duration: 0.3s !important;
	-moz-transition-duration: 0.3s !important;
	-webkit-transition-duration: 0.3s !important;
	transition-duration: 0.3s !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	-o-appearance: none !important;
	appearance: none !important;
	outline: none !important;
}
.ff_tc_checkbox > input[type="checkbox"]:checked {
	/* Custom styling for when checkbox fields are checked */
	border: 1px solid #1D8AFF !important;
	background-color: #cccccc !important;
}
.ff_tc_checkbox > input[type="checkbox"]:checked::before {
	/* Add a checkmark to checkbox when checkbox fields are checked */
	content: '\2713' !important;
	display: block !important;
	text-align: center !important;
	color: #1D8AFF !important;
	position: absolute !important;
	left: 1px !important;
	top: -15px !important;
	font-size: 30px !important;
	-webkit-animation-name: zoomIn !important;
	animation-name: zoomIn !important;
	-webkit-animation-duration: 0.3s !important;
	animation-duration: 0.3s !important;
}
.ff_tc_checkbox > input[type="checkbox"]:active {
	border: 1px solid #34495E !important;
}
.ff_tc_checkbox > input[type="checkbox"]:hover {
	/* Change border color when checkbox is hovered */
	border: 1px solid #0d4d91 !important;
}
.ff_t_c {
	/* Add padding next to gdpr checkbox */
	display: inline !important;
	padding-left: 5px !important;
}

/** Fluent Forms >> Style Thank You message **/
#fluentform_1_success {
	background-color: rgb(246, 246, 246) !important;
}


/*= Blog ====================== */

/** Blog >> Style blog post titles **/
.blog-layout h2 {
	color: #20323C !important;
	font-size: 30px !important;
	margin-bottom: 20px !important;
}
.blog-layout h3 {
	font-size: 22px !important;
	color: #20323C !important;
	margin-bottom: 20px !important;
}
.blog-layout h4 {
	font-size: 20px !important;
	color: #20323C !important;
	margin-bottom: 20px !important;
}
.blog-layout h5 {
	font-size: 18px !important;
	color: #20323C !important;
	margin-bottom: 20px !important;
}
.blog-layout p strong {
	font-weight: 800 !important;
}


/*= Footer ==================== */

/** Footer >> Style social icons **/
.df-footer-social-icons .adv-icon-link {
	border-radius: 50px !important;
	-webkit-transition: .25s ease-in !important;
	transition: .25s ease-in !important;
}
.df-footer-social-icons .adv-icon-link:hover {
	color: #333 !important;
	background-color: #aaaaaa !important;
}
.df-footer-social-icons .adv-icon-link .uabb-module-content .uabb-image .uabb-image-content {
	padding: 10px !important;
}


/*= Login/Register ============ */

/** Login/Register >> Login - Set max-width **/
.max-width-login {
	max-width: 500px !important;
}

/** Login/Register >> Login - Style placeholder text **/
.pp-login-form--input::placeholder {
	color: rgb(129, 129, 129) !important;
}

/** Login/Register >> Login - Style error messages **/
.pp-lf-error {
	color: #ffffff !important;
	background-color: #AE5050 !important;
	padding: 5px 10px 5px 10px !important;
	border-radius: 5px !important;
}
.pp-login-form-field .pp-lf-error {
	margin-top: 5px !important;
	display: Block !important;
}

/** Login/Register >> Login - Style message shown when logged-in **/
.pp-login-message {
	text-align: Center !important;
	background-color: #C1F1D5 !important;
	padding: 10px !important;
	border-radius: 5px !important;
}

/** Login/Register >> Register - Set max-width for column **/
.fl-col-group .max-width-register {
	max-width: 850px !important;
}
.fl-module-uabb-registration-form ::placeholder {
	color: #A9A9A9 !important;
}

/** Login/Register >> Register - Style error messages **/
.uabb-registration-form-error > .uabb-registration_form-error-message-required {
	color: #ffffff !important;
	font-size: 15px !important;
	background-color: #AE5050 !important;
	padding: 5px 10px 5px 10px !important;
	border-radius: 0 0 5px 5px !important;
	Margin-top: 0px !important;
}

/** Login/Register >> Register - Style logged-in message **/
.uabb-registration-loggedin-message {
	text-align: Center !important;
	background-color: #C1F1D5 !important;
	padding: 10px !important;
	border-radius: 5px !important;
}

/** Login/Register >> Register - Add space between columns on desktop/tablet **/
.uabb-module-content > div > div:nth-of-type(1), 
.uabb-module-content > div > div:nth-of-type(3), 
.uabb-module-content > div > div:nth-of-type(5) {
	
}

/** Login/Register >> Register - Style Password Strength notice **/
.uabb-form-outter > .uabb-registration-form-pass-verify.short::before {
	content: "Too " !important;
}


/*( Large Desktop )*/
@media (min-width: 1200px) {

	/*= Login/Register ============ */

	/** Login/Register >> Register - Add space between columns on desktop/tablet **/
	.uabb-module-content > div > div:nth-of-type(1), 
.uabb-module-content > div > div:nth-of-type(3), 
.uabb-module-content > div > div:nth-of-type(5) {
	padding-right: 20px !important;
}


	/*= Footer ==================== */

	/** Footer >> Style social icons **/
	.df-footer-social-icons .adv-icon-link {
	
}


}


/*( Desktop & Tablet )*/
@media (min-width: 768px) and (max-width: 979px) {

	/*= General =================== */

	/** General >> Make element sticky with .sticky-element for computers/tablets only **/
	.sticky-element {
	top: 10px !important;
}


	/*= Header ==================== */

	/** Header >> Make Main Menu sticky on mobile devices **/
	header[data-type="header"] {
	width: 100% !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 100 !important;
}
.admin-bar header[data-type="header"] {
	/* This is for the admin bar */
	top: 32px !important;
}


	/*= Login/Register ============ */

	/** Login/Register >> Register - Add space between columns on desktop/tablet **/
	.uabb-module-content > div > div:nth-of-type(1), 
.uabb-module-content > div > div:nth-of-type(3), 
.uabb-module-content > div > div:nth-of-type(5) {
	padding-right: 20px !important;
}


}


/*( Tablet & Phone )*/
@media (max-width: 767px) {

	/*= General =================== */

	/** General >> Make element sticky with .sticky-element for computers/tablets only **/
	.sticky-element {
	position: static !important;
}


	/*= Header ==================== */

	/** Header >> Make Main Menu sticky on mobile devices **/
	header[data-type="header"] {
	width: 100% !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 100 !important;
}
.admin-bar header[data-type="header"] {
	/* This is for the admin bar */
	top: 32px !important;
}


}


/*( Phone )*/
@media (max-width: 480px) {

	/*= Header ==================== */

	/** Header >> Header - Add shadow below header that doesn't shrink **/
	#sticky-menu > .fl-row-content-wrap {
	
}

	/** Header >> Make Main Menu sticky on mobile devices **/
	header[data-type="header"] {
	position: Sticky !important;
}
.admin-bar header[data-type="header"] {
	/* This is for the admin bar */
	top: 0px !important;
	position: Sticky !important;
}

	/** Header >> Menu CTA - Add class .menu-cta to turn into button **/
	.menu-cta a {
	margin: 10px 10px 0 10px !important;
}


	/*= General =================== */

	/** General >> Add class .full-width-button to make button full-width on mobile **/
	.full-width-button .pp-button {
	width: 100% !important;
}


}