/*  MICROTHEMER STYLES  */

/*= Animations ================ */

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/*= 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 >> Home - Style hero banner buttons **/
.df-hb-description p {
	max-width: 750px !important;
	margin: Auto !important;
}
.df-hp-cta-button {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4) !important;
}

/** General >> Bubble text - Create this with .df-bubble **/
.df-bubble {
	color: #ffffff !important;
	background-color: rgb(44, 183, 238) !important;
	padding: 2px 5px 2px 5px !important;
	border-radius: 5px !important;
}

/** General >> Logo Grid - Style the logos **/
.logo-image {
	max-width: 100% !important;
	height: auto !important;
	max-height: 80px !important;
	-webkit-transition: 0.5s !important;
	transition: 0.5s !important;
}

/** General >> Home - Hero Banner - Add animation **/
.df-hb-image {
	-webkit-animation-name: slideInUp !important;
	animation-name: slideInUp !important;
	-webkit-animation-duration: 1.5s !important;
	animation-duration: 1.5s !important;
	-webkit-animation-timing-function: ease !important;
	animation-timing-function: ease !important;
}

/** General >> Home - Blog Grid - Style grid **/
.hp-blog-grid .pp-content-grid-post-excerpt {
	
}
.hp-blog-grid .pp-content-grid-post {
	overflow: Visible !important;
}

/** General >> Animated Underline - Create with .animated-underline **/
.animated-underline a {
	text-decoration: none !important;
	position: relative !important;
}
.animated-underline a::before {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background-color: #00A3E2 !important;
	-webkit-transform-origin: bottom right !important;
	transform-origin: bottom right !important;
	transform: scaleX(0) !important;
	-webkit-transition: transform 0.5s ease !important;
	transition: transform 0.5s ease !important;
}
.animated-underline a:hover::before {
	-webkit-transform-origin: bottom left !important;
	transform-origin: bottom left !important;
	transform: scaleX(1) !important;
}

/** General >> Contact Page - Style forms **/
.df-support-forms [type="text"], 
.df-support-forms [type="email"], 
.df-support-forms textarea {
	background-color: #ffffff !important;
}
.df-support-forms [type="submit"] {
	background-color: #00A7E8 !important;
	padding: 10px 35px !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.df-support-forms [type="submit"]:hover {
	background-color: #0086BA !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}

/** General >> Df faq pp accordion item **/
.df-faq .pp-accordion-item {
	box-shadow: 0 5px 5px rgba(0,0,0,0.15) !important;
	border-radius: 10px !important;
}

/** General >> Knowledge Base Page - Extra styling for page **/
#content .betterdocs-search-form-wrap {
	
}
#betterdocs-single-main {
	line-height: 1.8em !important;
}

/** General >> Better Docs - Styling for chat widget **/
#messages > .betterdocs-brand-wrapper {
	display: None !important;
}
#betterdocs-ia .betterdocs-footer-wrapper {
	display: None !important;
}

/** General >> BetterDocs - Feedback Form - Styles **/
#betterdocs-feedback-form [type="text"] {
	background-color: #ffffff !important;
}
#feedback_form_submit_btn {
	padding: 10px 40px !important;
	background-color: #00A7E8 !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
#feedback_form_submit_btn:hover {
	background-color: #0086BA !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;
	box-shadow: 0 2px 3px rgba(0,0,0,0.2) !important;
	background-color: #00A7E8 !important;
	padding: 4px 15px 4px 15px !important;
	border-radius: 50px !important;
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.menu-cta a:hover {
	background-color: #0086ba !important;
	color: #ffffff !important;
}

/** Header >> Main Menu - Animated underline part 1 **/
.pp-advanced-menu ul.menu>li>a:before {
	background-color: #00A7E8 !important;
	width: 100% !important;
	height: 3px !important;
	border-radius: 5px !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	transform: scaleX(0) !important;
	-webkit-transition: .3s cubic-bezier(.175,.885,.32,1.275) !important;
	transition: .3s cubic-bezier(.175,.885,.32,1.275) !important;
	visibility: hidden !important;
	content: "" !important;
	-webkit-transform: scaleX(0) !important;
	-moz-transform: scaleX(0) !important;
	-ms-transform: scaleX(0) !important;
	-o-transform: scaleX(0) !important;
	-webkit-transition: all .3s cubic-bezier(.175,.885,.32,1.275) !important;
	-moz-transition: all .3s cubic-bezier(.175,.885,.32,1.275) !important;
	-ms-transition: all .3s cubic-bezier(.175,.885,.32,1.275) !important;
	-o-transition: all .3s cubic-bezier(.175,.885,.32,1.275) !important;
}
.pp-advanced-menu ul.menu>li>a:hover:before {
	visibility: visible !important;
	-webkit-transform: scaleX(1) !important;
	transform: scaleX(1) !important;
}
.pp-advanced-menu ul.menu>li.menu-cta>a:before {
	visibility: hidden !important;
}


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

/** Fluent Forms >> Error Validation styling **/
.ff-el-is-error [type="text"], 
.ff-el-is-error [type="email"], 
.ff-el-is-error textarea {
	background-color: rgb(255, 234, 234) !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 ~ .text-danger {
	margin-top: 5px !important;
	border-radius: 5px !important;
}
.ff-el-is-error .ff-el-form-check {
	background-color: rgb(255, 234, 234) !important;
	padding: 0px 10px 0px 10px !important;
	border-radius: 0px !important;
	margin-bottom: -7px !important;
	border: none !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;
}


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

/** Blog >> Style blog post titles **/
.df-bp-content h2 {
	font-size: 30px !important;
	margin-bottom: 5px !important;
}
.df-bp-content h3 {
	font-size: 22px !important;
	margin-bottom: 5px !important;
}
.df-bp-content h4 {
	font-size: 20px !important;
	margin-bottom: 5px !important;
}
.df-bp-content h5 {
	font-size: 18px !important;
	margin-bottom: 5px !important;
}
.df-bp-content p strong {
	font-weight: 800 !important;
}

/** Blog >> Blog - Style search forms **/
.df-bo-search-form form {
	border-radius: 5px !important;
}
.df-bo-search-form .is-form-style.is-form-style-3 label {
	width: calc(100% - 45px) !important;
}
.df-bo-search-form .is-search-input {
	border-radius: 5px 0px 0px 5px !important;
	height: 45px !important;
}
.df-bo-search-form .is-form-style.is-form-style-3 input.is-search-input {
	border: 0px solid #000000 !important;
}
.df-bo-search-form .is-search-submit {
	height: 45px !important;
	width: 45px !important;
}
.df-bo-search-form .is-search-icon, 
.df-bo-search-form .is-search-icon:hover {
	background-color: rgba(0,0,0,0.0) !important;
	Border: none !important;
}
.df-bo-search-form Button.is-search-submit, 
.df-bo-search-form Button.is-search-submit {
	-webkit-transition: All 0.3s !important;
	transition: All 0.3s !important;
}
.df-bo-search-form Button.is-search-submit:focus, 
.df-bo-search-form Button.is-search-submit:hover {
	background-color: #0088BC !important;
}


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

/** Login/Register >> Login Page - Set max-with for login column **/
.fl-col-group .max-width-login {
	max-width: 650px !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: 0 0 5px 5px !important;
}
.pp-login-form-field .pp-lf-error {
	margin-top: 0px !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;
}


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

	/** General >> Home - Blog Grid - Style grid **/
	.hp-blog-grid .pp-content-grid-post-excerpt {
	min-height: 90px !important;
}


}


/*( 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;
}

	/** General >> Home - Blog Grid - Style grid **/
	.hp-blog-grid .pp-content-grid-post-excerpt {
	min-height: 90px !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;
}

	/** General >> Home - Blog Grid - Style grid **/
	.hp-blog-grid .pp-content-grid-post-excerpt {
	min-height: None !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 {
	box-shadow: 0 5px 15px rgba(5,5,5,0.21) !important;
	background-color: #ffffff !important;
}

	/** 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 {
	padding: 10px !important;
	margin-top: 10px !important;
}


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

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

	/** General >> Home - Remove full-height from hero banner **/
	.fl-row-full-height.df-hp-hb .fl-row-content-wrap, 
.fl-row-custom-height.df-hp-hb .fl-row-content-wrap {
	min-height: 10vh !important;
}

	/** General >> Bubble text - Create this with .df-bubble **/
	.df-bubble {
	padding: 1px 5px 1px 5px !important;
}

	/** General >> Logo Grid - Style the logos **/
	.logo-image {
	max-width: 100% !important;
	height: auto !important;
	max-height: 80px !important;
	-webkit-transition: 0.5s !important;
	transition: 0.5s !important;
}
.pp-logo {
	max-height: 120px !important;
}

	/** General >> Home - Blog Grid - Style grid **/
	.hp-blog-grid .pp-content-grid-post-excerpt {
	min-height: None !important;
	margin-bottom: 20px !important;
}
.hp-blog-grid .pp-content-grid-post {
	margin-bottom: 50px !important;
}

	/** General >> Pandemic banner - Hide icon on mobile **/
	.pandemic-banner .pp-icon-wrapper {
	display: none !important;
}

	/** General >> Knowledge Base Page - Extra styling for page **/
	#content .betterdocs-search-form-wrap {
	padding-top: 30px !important;
}
#betterdocs-entry-title {
	padding-bottom: 10px !important;
}
#betterdocs-single-main {
	
}

	/** General >> Better Docs - Styling for chat widget **/
	#messages > .betterdocs-brand-wrapper {
	
}
.betterdocs-widget-container.betterdocs-opened {
	
}
.betterdocs-conversation-container {
	
}
.betterdocs-widget-container {
	
}


}