/**
 * You can place your custom CSS statements here
 * it is better to write everything custom here
 * because this file won't be replaced during upgrade
 * Don't forget to rename this file to "site.css"
 */

@import url('https://fonts.googleapis.com/css2?family=Ranga:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Ubuntu:wght@300;400;500;700&display=swap');

:root {
	--blue: #0058b7;
	--darkblue: #0e4480;
	--white: #ffffff;
	--red: #A90001;
	--black: #000000;
	--background: #f1f5f9;
	--cartyellow: #ffee00;
	--cartyellowhover: #f1e212;
}

#html3,
#html4,
#html5,
#html6,
#html7,
#html8,
#html9 {
	display: flex;
	flex-direction: column;
}

.am-body {
    background-color: #F1F5F9;
}


.am-form form {
	margin: 0;
}

.am-common {
	font-size: 16px;
}

.am-common p {
    padding: 0px 0px 10px 0px;
}

.am-element.element {
	overflow: hidden;
}

/* General Settings For Popup Login Form */
.am-popup {
    min-width: 400px;
    border-radius: 3px;
}

.am-popup-header, .am-popup.am-common, .am-popup .am-login-form-wrapper {
    background-color: white !important;
    padding-bottom: 0px;
}

.am-popup .am-login-form-form, #am-login-form {
    margin: 0px !important;
    padding: 0px !important;
}

.am-popup-content .am-form.am-auth-form.am-login-form .am-element-title {
    padding: 5px 0px 0px 5px !important;
}

.am-popup .am-form.am-auth-form div.element-title {
    padding: 25px 0px 0px 10px;
}

#am-login-form .row-buttons .element {
    margin-bottom: 20px;
}

.am-auth-form div.element-title label {
    text-align: left;
}

/* General Settings For Regular Login Form */
.am-auth-form .am-row .element, .am-auth-form .am-row .am-element-title {
    display: block; /* this displays the labels Username and Password even in mobile*/
}

.html-footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.btn-order-style {
	background-color: var(--buttoncolor);
	color: white !important;
	border-left: 2px solid #fff482;
	border-right: 2px solid #fff482;
	border-bottom: 2px solid #ece172;
	border-top: 3px solid #fffa00;
	box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}

label {
    color: black !important;
}

.heading-text {
	align-self: flex-start;
	text-align: left;
	font-size: 16px;
	font-weight: 700;
	font-family: 'Fjalla One', sans-serif;
	margin-bottom: 15px;
}

/* change the color of the crossed out price */
.am-receipt td.am-receipt-total span.am-receipt-discounted-price {
	color: #c6c6c6
}

.am-receipt .am-receipt-discounted-price {
	color: #6f6868;
}

@media (max-width: 500px) {
/*** Log In Form For Old aMember ****/
    .am-auth-form div.row div.element, .am-auth-form div.row div.element-title {
        padding: 10px 10px 0px 10px;
    }
    
    .row.row-login-login .element-title, .row.row-login-pass .element-title {
        margin-bottom: 10px;
    }
    
    .row.row-login-pass .element {
        margin-bottom: 20px;
    }
}

/* center align the Pay Button */
@media (min-width: 500px) and (max-width: 768px) {
	.am-form #row-save-0 .am-element {
		width: 80%;
		margin-left: 47px;
	}

	.am-form #row-save-0 {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

/* change color of Pay Button */
input#save-0 {
	background: #ffd800 !important;
	color: black !important;
	border: 3px solid #ffd800;
	font-weight: 700 !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	transition: background-color 0.3s ease;
}

input#save-0:hover {
	background: #dbbb00 !important;
	border: 3px solid #ffd800;
}

/* Hide User Groups on Forms */
div#row-_user_groups-0 {
	display: none;
}

.am-form-sidebar-sidebar {
	background-color: white;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.box-container-10px {
	padding: 10px;
}

.box-container-20px {
	padding: 20px;
}

.image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	/* add flex-wrap to wrap images to the next line */
}

img {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}



@media only screen and (max-width: 820px) {
	.image-container {
		flex-direction: column;
	}

	.text-container {
		font-size: 16px !important;
		padding-left: 10px !important;
		/* add padding for better spacing */
		padding-right: 10px !important;
		/* add padding for better spacing */
		padding-top: 10px !important;
		/* add padding for better spacing */
		padding-bottom: 25px !important;
		/* add padding for better spacing */
	}

	#html3,
	#html4 {
		padding-left: 10px !important;
		padding-right: 10px !important;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.text-container {
	text-align: justify;
	line-height: 1.3;
	/* add line-height for better readability */
	max-width: 800px;
	/* add max-width to limit the width of the text */
	margin: 0 auto;
	/* center the container */
	padding-left: 15px;
	/* add padding for better spacing */
	padding-right: 15px;
	/* add padding for better spacing */
	padding-top: 10px;
	/* add padding for better spacing */
	padding-bottom: 25px;
	/* add padding for better spacing */
	font-size: 20px;
}

.am-grid th,
td.am-member-payment-history-invoice_id,
td.am-member-payment-history-date {
	text-align: center;

}

.am-grid th {
	font-size: 18px;
	font-weight: 900 !important;
}

.am-member-payment-history-refund {
	color: var(--red);
	text-align: center;
	font-weight: 700;
}

ul.am-tabs-narrow,
ul.am-tabs-narrow ul {
	background-color: #ecf0f4 !important;
}

ul.am-tabs-narrow a {
    color: black;
    font-weight: 400;
}

ul.am-tabs-narrow li.active > a {
    font-weight: bold;
    color: var(--accentdark);;
}

button.widget-button {
	background-color: var(--accent);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
}

button.widget-button:hover {
	background-color: black;
}

@media (min-width: 640px) and (max-width: 799px) {

	iframe.video-embed-footer,
	iframe.video-embed-sidebar {
		width: 400px !important;
		height: 270px !important;
	}
}

@media (max-width: 639px) {

	iframe.video-embed-footer,
	iframe.video-embed-sidebar {
		width: 280px !important;
		height: 158px !important;
	}
}

.am-product-terms {
	color: #009933;
	font-weight: 700;
	font-style: italic;
} 

.am-form div.am-row.am-no-label .am-element {
	margin-top: 10px;
	margin-left: 0px;
	padding: 20px 10px 0px 15px;
}

.am-body .am-body-content-top {
	text-align: -webkit-center !important;
}

.am-body-content-top h1 {
	/*display: none;*/
}

.headline-1 {
	font-size: 42px;
	color: black;
	font-family: 'Fjalla One', sans-serif;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px !important;
	margin-top: 20px;
	text-align: center;
}

.headline-2 {
	font-size: 30px;
	color: #000000;
	font-family: 'Fjalla One', sans-serif;
	font-weight: 500;
	line-height: 1.3;
}

.price,
.price-text {
	font-size: 26px;
	color: #000000;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0px;
	word-wrap: break-word;
	text-align: center;
}

.sale-price, .total-price, .price-green,
.sale-price-constant {
	font-size: 30px;
	color: #0B9C3D;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0px;
	word-wrap: break-word;
	text-align: center;
}

.headline-3 {
	font-size: 30px;
	color: #000000;
	font-family: "Shadows Into Light";
	font-weight: bold;
	line-height: 1.3;
}

@media (max-width: 500px) {

	.headline-1,
	.am-body-content-top h1 {
		font-size: 26px !important;
		color: black !important;
		font-family: 'Fjalla One', sans-serif;
		font-weight: 900;
		line-height: 1.2;
		word-wrap: break-word;
		margin-top: 20px;
		margin-bottom: 0px;
	}

	.headline-2 {
		font-size: 24px;
		color: #000000;
		font-family: "Ranga";
		font-weight: bold;
		line-height: 1.2;
	}

	.price,
	.price-text {
		font-size: 26px;
		color: #000000;
		font-family: 'League Gothic', sans-serif;
		font-weight: 900;
		line-height: 1;
		letter-spacing: 1.5px;
		word-wrap: break-word;
		text-align: center;
	}

	.sale-price,
	.sale-price-constant {
		font-size: 26px;
		color: #0B9C3D;
		font-family: 'League Gothic', sans-serif;
		font-weight: 900;
		line-height: 1;
		letter-spacing: 1.5px;
		word-wrap: break-word;
		text-align: center;
	}
}

.am-main {
    max-width: 1100px;
}
.am-body-content-wrapper.am-main {
	padding: 40px 10px 30px 10px;
}

span {
	line-height: 1.3;
}

img.form-image {
	width: 100% !important;
	height: 100% !important;
}

img.form-image-price {
	width: 360px !important;
	height: 100% !important;
}

img.mobile-responsive {
	width: 360px !important;
	height: 100% !important;
	margin: 0 auto; /* Center Align on a Display: Block */
}

img.product-image {
	width: 200px !important;
	height: 100% !important;
	margin: 0 auto; /* Center Align on a Display: Block */
}

img.footer-testimonials {
	width: 640px !important;
	height: 100% !important;
	margin: 0 auto; /* Center Align on a Display: Block */
}

.testimonial-image {
	width: 80px;
	/* Adjust the size of the image */
	height: 80px;
	/* Ensure it’s a square for round shape */
	border-radius: 50%;
	/* Makes the image round */
	border: 2px solid black;
	/* Adds a 2px black border */
	display: block;
	/* Ensures the image behaves like a block element */
	margin: 0 auto 10px auto;
	/* Centers the image and adds space below it */
}

@media (max-width: 500px) {

	img.form-image,
	img.form-image-price {
		width: 360px !important;
		height: 100% !important;
		margin-left: -20px;
		margin-right: -20px;
	}

	img.footer-testimonials {
		width: 320px !important;
		height: 100% !important;
	}

	img.mobile-responsive {
		width: 250px !important;
		height: 100% !important;
	}
}

.am-thanks-status-success {
	padding-bottom: 1em;
	color: green;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}

td.am-receipt-terms.am-receipt-terms-one-time i {
	color: green;
	font-size: 18px;
}

.am-receipt td {
	font-weight: 700;
}

td.am-receipt-total strong {
	color: white;
}

.am-receipt td.am-receipt-total {
	background-color: #0158b7;
}

.am-aff-banner-preview {
	word-wrap: break-word;
}

.am-form .am-row-buttons div.am-element {
	margin-left: 0;
	text-align: center;
	padding-right: 0px;
	padding-left: 0px;
}

/****** Customer Profile Section ******/
/* The form should not occupy the whole screen */
form#profile {
	width: 80%;
	margin-left: 130px;
}

/* input textboxes to only 60% on desktop */
form#profile input#name_f,
form#profile input#name_l,
form#profile input#email-0,
form#profile input#_oldpass-0,
form#profile input#pass-0,
form#profile input#pass-confirm {
	width: 60%;
	text-align: left;
}

/* input textboxes to only 60% on desktop 
#row-html1-0, #row-qfauto-0, #row-qfauto-1,
#row-email-0, #row-email-confirm,
#row-pass-0, #row-pass-confirm, #row-product_id_page-0-0{
	border: none !important;
}*/

.row {
    border: none !important;
}

.am-auth-form form legend, #am-login-form .row {
    background-color: white !important;
}


.am-form.am-auth-form.am-login-form div.element-title {
    padding: 30px 0px 0px 10px !important;
    background-color: white;
}


/* Customer Profile Tab Button */
input#_submit_-0 {
    background-image: none;
	background-color: var(--accent);
	border-color: var(--accent);
	color: white;
	width: 45% !important;
}

input#_submit_-0:hover {
    background-image: none;
	background-color: var(--accentdark);
	border-color: var(--accentdark);
	color: white;
}

/* Align the button to the center */
#row-_submit_-0 .am-element.element {
	margin: 0;
	text-align: center;
}

@media only screen and (max-width: 820px) {

	/* The form should not occupy the whole screen */
	form#profile {
		width: 100%;
		margin-left: 0px;
	}

	/* input textboxes to only 60% on desktop */
	form#profile input#name_f,
	form#profile input#name_l,
	form#profile input#email-0,
	form#profile input#_oldpass-0,
	form#profile input#pass-0,
	form#profile input#pass-confirm {
		width: 100%;
		text-align: left;
	}

	form#profile input#_submit_-0 {
		width: 100% !important;
	}
}

/****** End of Customer Profile Section ******/

/* Place Order Button On Checkout Form */
div#row-buttons {
	width: 100%;
	display: flex;
	justify-content: center;
}

#row-buttons .am-element.element.group {
	min-width: 100%;
	margin: 0;
	padding-top: 0px;
}


.am-cta-signup#_qf_page-0_next-0, .am-signup-form#_qf_page-0_next {
    background-image: none;
	font-size: 26px !important;
	font-weight: 700 !important;
	width: 100% !important;
	background-color: var(--buttoncolor);
	color: var(--buttontext) !important;
	border: 2px solid var(--buttonborder);
	box-shadow: 2px 5px 5px 3px rgba(0, 0, 0, 0.1);
}

.am-cta-signup#_qf_page-0_next-0:hover, .am-signup-form#_qf_page-0_next:hover {
	background-color: var(--buttonhover);
	background-image: none;
}

div#row-buttons .element.group {
    width: 100%;
}


@media (max-width: 500px) {
	.am-form div.element input[type=submit] {
		width: 100% !important;
	}

	/* Next Button On Checkout Form */
	.am-cta-signup#_qf_page-0_next-0 {
		margin-left: 0px !important;
		width: 100% !important;
	}
}

div#row-_i_agree-page-0-0-0 .am-element.element {
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}


#row-_i_agree-page-0-0-0 span.am-error {
	margin: 5px 0px 0px 0px;
	text-align: center !important;
}

.am-form .element span.am-error {
	margin: 5px 0px 0px 0px;
	text-align: center;
}

@media only screen and (max-width: 500px) {

	div#row-_i_agree-page-0-0-0 {
		text-align: center;
	}

	div#row-_i_agree-page-0-0-0 .am-element.element {
		padding-top: 15px;
	}

	.am-form span.am-error {
		margin: 0px 0px -5px 0px;
	}
}

@media only screen and (min-width: 500px) and (max-width: 800px) {
	div#row-_i_agree-page-0-0-0 .am-element.element {
		padding-top: 0px;
	}

	label[for=_i_agree-page-0-0-0] {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	#row-_i_agree-page-0-0-0 span.am-error {
		margin: 5px 0px -20px -20px;
	}

	.am-form span.am-error {
		margin: 0px 0px -5px 0px;
	}

	.am-element label {
		display: inline-block;
		position: relative;
		padding-left: 25px;
		/* Adjust this to match the checkbox width */
		padding-bottom: 20px;
	}

	.am-element input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
	}

	.am-element label::before {
		content: '';
		display: block;
		width: 25px;
		/* Same as padding-left */
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* Control Product Choices In Tablet Devices */
@media only screen and (min-width: 500px) and (max-width: 800px) {
	#row-product_id_page-0_1-0 {
		margin: 0px 0px 20px 0px !important;
	}

	#row-product_id_page-0-0 {
		max-width: 100% !important;
	}

	#row-product_id_page-0-0 .am-element.element {
		padding: 15px 20px 0px 0px !important;
		margin: 0px 0px -10px 0px;
	}
}

@media screen and (max-width: 500px) {
	#row-product_id_page-0-0 .am-element.element {
		padding: 0px 10px 0px 30px !important;
		margin: -5px 0px -10px 0px !important;
	}
}

/***** End of Product Choices ******/

.am-form input[type=text],
.am-form input[type=password],
.am-form select,
.am-form textarea {
	border: 2px solid #c2c2c2;
	width: 100%;
	background-color: #f1f5f9;
}

.am-pass-indicator-wrap {
	width: 100%;
	background-color: #f1f5f9;
}

/* Center Align text in "login to existing account" notice */

.am-info {
	text-align: center;
	background-color: #f1f5f9;
	color: #080808;
	width: 60%;
	margin: 0 auto 30px auto;
	/* This centers the child horizontally */
}

@media only screen and (max-width: 800px) {
	.am-info {
		width: auto;
	}
}

.am-credits {
	margin-top: 10px;
	margin-bottom: 50px;
	color: #333;
	height: 2em;
	text-align: center;
	font-size: 14px;
	opacity: 1;
}

.am-credits a {
	color: #045b9f !important;
}

/******  Login Form ******/

.am-login-form-form {
	border: 1px solid #d6d6d6;
	box-shadow: 1px 0px 5px 3px rgba(0, 0, 0, 0.1);
}


/* change the input textbox of login form only */
#amember-login,
#amember-pass {
	width: 90%;
	padding: 10px;
}

.am-page-login .am-auth-form legend {
    font-size: 20px !important;
    font-weight: 700;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

@media (max-width: 499px) {
    /* Align the login form labels for (Username/Email)  */
    .am-row.am-row-login-login .am-element-title, .row-login-login .element-title{
        padding: 15px 10px 5px 0px !important;
        text-align: left;
    }
    
    /* Align the login form labels for Password */
    .am-row.am-row-login-pass .am-element-title, .row-login-pass .element-title {
        padding: 15px 10px 5px 0px !important;
        text-align: left !important;
    }
  
    
}

@media (min-width: 500px) {
    /* Align the login form labels for (Username/Email)  */
    .am-row.am-row-login-login .am-element-title, .row-login-login .element-title {
        padding: 15px 10px 5px 10px !important;
        text-align: right;
    }
    
    /* Align the login form labels for Password */
    .am-row.am-row-login-pass .am-element-title, .row-login-pass .element-title {
        padding: 15px 10px 5px 35px !important;
        text-align: right;
    }
    
    /*label[for="name-name_f"],
	label[for="name-name_l"] {
		margin-bottom: -10px;
		margin-top: -10px;
	}
	
	label[for="email-0"],
	label[for="email-confirm"] {
		margin-top: -20px;
	}*/
	
}
/* Mobile responsive the login form */
@media (max-width: 768px) {

    .am-page-login .am-auth-form legend {
        margin-bottom: -20px;
        padding-bottom: 0px;
    }
    
	#amember-login,
	#amember-pass {
		width: 100%;
	}

	.am-form fieldset {
		padding: 10px;
	}

	/* vertically stack the label and the username & password inputboxes*/
	.am-page-login .am-auth-form div.am-row {
		background: #ffffff;
		display: flex;
		flex-direction: column;
		height: 90px;
	}
	
	/* Align the login form labels for (Username/Email)  */
    .am-row.am-row-login-login .am-element-title {
        padding: 15px 10px 5px 0px !important;
        text-align: left;
    }
    
    /* Align the login form labels for Password */
    .am-row.am-row-login-pass .am-element-title {
        padding: 15px 10px 5px 0px !important;
        text-align: left;
    }

	/* Move the inputboxes to the bottom of the labels so they're vertical */
	/* Remove space below the username/email inputbox */
	.am-row.am-row-login-login .am-element {
		width: 100%;
		margin: 0px 0px -10px 0px;
		padding: 0px;
	}
	/* Add 20px below the password inputbox */
	.am-row.am-row-login-pass .am-element {
		width: 100%;
		margin: 0px 0px 20px 0px;
		padding: 0px;
	}
	
	.am-page-login .am-form .am-row-buttons .am-element {
        padding-top: 50px;
    }
    
    .am-page-login .am-login-form-form {
        padding-bottom: 80px;
    }

}

.am-page-login .am-body .am-body-content-wrapper {
	border: none;
	box-shadow: none;
	padding-bottom: 60px;
}

.am-page-login .am-body {
	background: #f1f5f9;
}

.am-login-form-wrapper,
.am-sendpass-form-wrapper,
.am-page-login .am-body .am-body-content-wrapper,
.am-layout {
	background-color: var(--background) !important;
}

.am-fb-login-button {
	line-height: 25px;
	color: white;
}

.am-auth-form {
	margin-top: -70px !important;
}

.am-popup-title {
	margin-top: 0px;
	margin-bottom: 15px;
	text-align: center
}

/****** End of Login Form ******/


/****** checkout forms *********/

/* Whole Checkout Form including Sidebar */
.am-form-container {
	overflow: visible;
	display: flex;
	width: 100%;
	justify-content: center;
}

/* main (left) side of the form */
.am-form-container .am-form-form {
	overflow: hidden;
	display: flex;
	justify-content: center;
	flex-basis: 65%;
}

.am-form {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
}

.am-signup {
	padding: 20px 10px 30px 10px;
	background-color: white;
}

.am-signup-form {
    margin-right: 20px !important;
}

.am-form div.element-title {
	background-color: #fff !important;
	padding: 15px 0px 20px 0px;
}

/***** ReCaptcha for old aMember Versions ****/

#row-qfauto-8 .element-title {
    display: none; /* hide the label */
}

@media (min-width: 1001px) {
    #row-qfauto-8 .element.group {
        margin-left: 180px;
    }
}

@media (min-width: 841px) and (max-width: 1000px) {
    #row-qfauto-8 .element.group {
        margin-left: 130px;
    }
}

@media (min-width: 501px) and (max-width: 840px) {
    #row-qfauto-8 .element.group {
        margin-left: 85px;
    }
}

@media (min-width: 451px) and (max-width: 500px) {
    #row-qfauto-8 .element.group {
        margin-left: 55px;
    }
}

@media (max-width: 450px) {
    #row-qfauto-8 .element.group {
        margin-left: 0px;
    }
}

/***** Choose A Product Choice Section *****/
/* Make space to the left to move the radio button there */
#row-product_id_page-0-0 .am-element.element {
	padding: 15px 20px 0px 30px;
	margin: 0px 0px -10px 0px;
}

/* Move the radio button to the left */
#row-product_id_page-0-0 input[type=radio] {
	margin-left: -24px;
}

/* Payment choices - Stack Them Vertically */
#row-paysys_id {
	/* adjust the row to flex */
	display: flex !important;
	width: 80%;
	flex-direction: column;
	padding: 0px 10px 0px 10px;
	margin: 0 auto; /* center align the payment choices */
}

#row-paysys_id .am-element {
    margin-left: 0px;
}

/** For Old amember **/
#row-paysys_id .am-element-title {
    padding: 20px 0px 0px 0px;
    width: 100%;
    text-align: left;
    
}

/* This is where the label or title is, 
stack it on top of the payment choices */
#row-paysys_id .element-title {
	text-align: left;
	padding: 10px 10px 0px 10px;
	min-width: 100%;
	margin: 0px;
}

#row-paysys_id .element {
    margin: 0px !important;
}

#row-paysys_id label[for="paysys_id"] {
    text-indent: -12px !important;
    margin-left: -12px;
}

#row-paysys_id label.radio {
	padding-left: 35px;
	/* Leaves space for the radio button */
}

input#paysys_id---0,
input#paysys_id---1,
input#paysys_id---2,
input#paysys_id---3 {
	margin-right: 10px;
	margin-left: -27px;
}

/* Payment Description */
.am-paysystem-desc {
	font-size: small;
	font-style: italic;
	margin-left: 0px;
}

/* This is where the payment choices are, make sure they are vertically stacked */
#row-paysys_id .am-element.element {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin-top: 0px;
	margin-left: 0px;
}


/* Mobile responsive the checkout form */
@media (max-width: 800px) {
	.am-form-container {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.am-form-container .am-form-form {
		flex-basis: auto;
	}

	.am-form {
		margin-top: 20px;
		margin-bottom: 20px;
		width: 100%;
	}

	.am-signup {
		padding: 20px 10px 30px 10px;
	}

	label[for="name-name_f"],
	label[for="name-name_l"] {
		margin-bottom: -10px !important;
	}

	.img-offline-payments {
		max-width: 740px !important;
	}

	/* adjust the row to flex */
	#row-paysys_id {
		width: 100% !important;
		margin-left: 0px;
		padding: 5px !important;
	}
	
	#row-paysys_id .element-title {
    	text-align: left;
    	padding: 10px 10px 0px 10px;
    	min-width: 100%;
    	margin: 0px;
    }

    #row-paysys_id .element {
        margin: 0px !important;
    }

	.am-paysystem-desc {
		margin-left: 0px;
	}
	
	#row-paysys_id .am-element-title {
	    padding: 20px 0px 0px 10px;
	}

}

/***** End of Main (Left) Checkout Form *****/

/* The sidebar of the form */

.am-form-container .am-form-sidebar {
	flex-basis: 35%;
	padding-left: 5px;
	background-color: #fff;
	padding: 10px 0px 10px 0px;
	box-shadow: 1px 0px 5px 3px rgba(0, 0, 0, 0.1);
	margin-right: 10px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.am-form form,
.am-form-container .am-form-sidebar-sidebar {
	background-color: #fff;
	border: none;
	box-shadow: none;
	max-width: 100%;
	margin: 0px;
	padding: 10px;
}

/** Invoice Summary **/

/* Font of the invoice summary texts */
.am-invoice-summary-item-title,
.am-invoice-summary-subtotal,
.am-invoice-summary-price,
.am-invoice-summary-discount,
.am-invoice-summary-price {
	color: black;
	font-weight: 500;
	font-size: 14px !important;
}

/* Remove numbering from list of product items */
.am-invoice-summary-item-num {
	display: none;
}

/* Add a line below the discount price */
.am-invoice-summary-row-discount {
	border-bottom: 1px solid #eeeeee;
}

/* Change the font weight and color to red of the discount amount */
.am-invoice-summary-row-discount .am-invoice-summary-price {
	color: #d90303;
}

/* Change the font weight and color to GREEN of the overall TOTAL Price */
.am-invoice-summary-row-total .am-invoice-summary-price {
	font-weight: 900;
	color: green;
}

.invoice-summary-box {
	color: #000000;
	border: 1px solid #d5d5d5;
	border-top: 3px solid var(--accent);
	background-color: #fafafa;
	padding: 10px;
	margin-bottom: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	/* Optional: Add a subtle shadow for better visibility */
}

.invoice-summary-container {
	/* Sticky The Invoice Summary Box When Scrolling */
	position: sticky;
	top: 20px;
	/* Adjust the distance from the top of the viewport */
	z-index: 1000;
	/* Ensures it stays above other content, adjust if necessary */
	background-color: white;
}

#invoice_summary_order_btn {
	background-color: var(--buttoncolor);
	border: 1px solid #01a517;
	color: black;
	font-size: 16px;
	font-weight: 900;
	width: 100%;
	padding: 10px 10px;
}

#invoice_summary_order_btn:hover {
	background-color: var(--buttonhover);
}

.am-invoice-summary {
	background: none;
	border: none;
	border-radius: 3px;
	margin-bottom: 0;
	box-shadow: none;
	padding: 5px 0px 0px 6px;
}

.am-invoice-summary-row-total,
.am-invoice-summary .am-invoice-summary-total {
	color: black;
	font-size: 16px !important;
}

.am-invoice-summary .am-invoice-summary-item-num,
.am-invoice-summary-row-total {
	color: #080808;
	font-size: 14px;
	font-weight: 700;
}

.am-invoice-summary .am-invoice-summary-item {
	color: black;
	font-size: 14px;
}

.am-invoice-summary .am-invoice-summary-delimeter hr {
	background: #a7a7a7;
	margin-top: 15px;
}

/**** Video Formatting in Checkout Forms ****/
.video-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Gap between rows */
}

.video-row {
  display: flex;
  justify-content: center;
  padding: 10px; /* Gap between videos */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .video-row {
    flex-direction: column; /* Stack videos vertically on mobile */
  }

  .video-wrapper {
    width: 100%; /* Full width for each video on mobile */
  }
}



 /***** End of Checkout Forms *****/
 
 
.am-form .row {
	/*border-bottom: 2px dashed #9c9c9c;*/
	margin: 0;
}

.am-body .am-body-content-top {
	overflow: visible;
	text-align: center;
}

.am-signup-link {
	display: none;
}

a.local-link.am-form-login-switch {
	text-decoration: none;
}

a.local-link.am-form-login-switch:hover {
	color: #002a78;
	text-decoration: underline;
}

.am-footer a {
	text-decoration: none;
}

.am-footer a:hover {
	text-decoration: underline;
}

.am-footer {
	padding-top: 30px;
	padding-bottom: 40px;
}

.am-body .am-body-content-wrapper {
	border: 2px solid #e1e8f0;
	box-shadow: 0px 0px 15px #00000022;
	border-radius: 0px;
	border-top: 6px solid var(--accent);
	border-bottom: 6px solid var(--accent);
	background-color: white !important;
}

.am-auth-form div.row a.button,
input[type=button],
input[type=submit] {
	border: 1px solid #ccc;
	padding: 0.5em 1.2em;
	border-radius: 3px;
	margin-bottom: 10px !important;
	background-image: none;
}

.am-auth-form input[type=submit], .am-form.am-auth-form.am-login-form input[type="submit"] {
	background-color: var(--accent);
	display: block;
	width: 60%;
	margin: 0 auto;
}

/* Adjust the button in the popup login form */
.am-popup .am-form.am-auth-form input[type="submit"] {
	display: block;
	width: 100%;
}


/* Adjust the labels Username/Email and Password */
.am-popup .am-form.am-auth-form .am-element-title {
    text-align: left;
    display: block;
}

/* Adjust the width of the input boxes in the login form */
#amember-login {
	width: 100%;
	padding-left: 30px; /* add space for the icon */
	padding-right: 10px;
}

#amember-pass {
	width: 100%;
	padding-left: 30px; /* add space for the icon */
	padding-right: 30px;
}

.am-form.am-auth-form.am-login-form input[type="submit"]:hover {
	background-color: var(--accentdark);
}

.am-auth-form div.row a.button,
input[type=button],
input[type=submit]:hover {
	background: #0762a5;
}

.am-signup-link a {
	color: #0079d1 !important;
}

.am-auth-form {
	margin-top: -40px !important;
}

.ajax-link:after,
.local-link:after,
.local:after {
	border-bottom: none;
}

@media (max-width: 500px) {
    
    .am-popup {
        min-width: 100%;
    }

	.am-form div.element-title {
		background-color: #fff !important;
	}

	a.button,
	input[type=button],
	input[type=submit] {
		display: block;
		width: 100% !important;
		margin: auto !important;
	}
	
    label[for="name-name_f"],
	label[for="name-name_l"] {
		margin-bottom: -10px !important;
		margin-top: -10px !important;
	}
}

/****** end of checkout forms *********/


/****** offline payments **************/
.img-offline-payments {
	max-width: 820px !important;
}

/* tablet and mobile */
@media only screen and (max-width: 820px) {

	.img-offline-payments {
		max-width: 740px !important;
	}

}

@media all and (min-device-width: 361px) and (max-device-width: 450px) {

	/* Google Recaptcha */
	#row-grp-captcha .am-element.element.group {
		display: flex;
		justify-content: center;
		/* Horizontally center*/
		align-items: center;
		/*Vertically center*/
	}

	.img-offline-payments {
		max-width: 360px !important;
	}
}

/* For Really Small Devices */
@media (max-width: 360px) {
	.img-offline-payments {
		max-width: 300px !important;
	}
}

.notifyjs-default-base {
	background: #122e56 !important;
	border: 1px solid #bbcddb !important;
	box-shadow: 0 0 10px #bbcddb;
	border-radius: 7px !important;
	color: white !important;
}

.am-auth-form div.row a.button,
input[type=button],
input[type=submit] {
	color: white !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	font-size: 20px !important;
	font-weight: 500 !important;
}


ul.am-widget-list li {
	list-style-type: none;
	margin-bottom: .4em;
	color: black;
}

.am-block {
	color: #000;
}

.am-common h3 {
	line-height: 1.3em;
}

ul.am-tabs>li {
	color: black;
}

.am-common a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.am-common a:hover {
	text-decoration-line: underline;
	font-weight: 900;
}

ul.am-tabs a {
	color: black;
	text-decoration: none;
}

ul.am-tabs a:hover {
	color: white !important;
	text-decoration: none;
}

.am-common h2 {
	font-size: 24px;
	line-height: 1.3;
	height: auto;
	margin: 10px 0px 5px 0px;
	font-weight: 700;
	font-family: 'Fjalla One', sans-serif;
	color: black;
}


#member-main-links-head {
	display: none;
}

#member-main-links {
	display: none;
}

ul.am-tabs li.active>a {
	border-color: var(--accent) !important;
	background-color: var(--accent) !important;
	color: white !important;
	background: none;
}

ul.am-tabs li.active>a:hover {
	border-color: var(--accentdark);
	background-color: var(--accentdark);
	color: white !important;
}

ul.am-tabs li.normal>a:hover {
	border-color: var(--accent);
	background-color: var(--accent);
	color: white !important;
}

ul.am-tabs li.active #menu-member, ul.am-tabs #menu-member:hover {
    border-color: var(--accent);
	background-color: var(--accent);
	color: white !important;
}

ul.am-tabs #menu-member {
	background-image: none;
	color: black;
}

ul.am-tabs #menu-member:hover {
	border-color: var(--accentdark);
	background-color: var(--accentdark);
	color: white;
}

ul.am-tabs li.normal:hover {
	background: #415468;
	color: white !important;
}

.am-common h1 {
	font-size: 40px;
	font-weight: 700;
	font-family: 'Fjalla One', sans-serif;
	line-height: 1.3;
	color: #333;
	line-height: 1em;
	height: auto;
	margin: 0 0 0.6em;
}

.button {
	background-color: #00942a;
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
}

.am-header .am-header-content-wrapper {
	display: flex;
	justify-content: center;
	/* Center horizontally */
	align-items: center;
	/* Center vertically */
}

.am-header-content {
	display: flex;
	flex-direction: column;
	/* Ensures that the logo is above the content */
	align-items: center;
	/* Center the logo and the content horizontally */
	margin-top: 30px;
	margin-bottom: 30px;
}

/* Hide the DBP Bonus Bundle Description From the Dashboard */
#product-item-93 .am-list-subscriptions-desc {
	display: none;
}

@media (max-width: 500px) {
	.am-auth-form input[type=submit] {
	    background-image: none !important;
		width: 100% !important;
	}

	.am-body-content-wrapper.am-main {
		padding: 40px 10px 30px 10px !important;
	}

	.am-body .am-body-content-wrapper, .am-login-form {
		padding: 0px
	}

	.am-login-form-wrapper,
	.am-sendpass-form-wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.am-auth-form input[type=submit] {
		margin: 0px 0px 15px 0px !important;
		background-image: none !important;
	}

}

/* Blinking Red Arrow in OTO  */
input#product-93-196::before,
input#product-93-219::before {
	position: relative;
	content: "⬇︎︎️";
	display: block;
	left: -6px;
	top: -25px;
	animation: blink 1s infinite alternate;
	font-size: 24px;
	color: #c10000;
}

/* Blinking animation */
@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/* Adjust the product description especially for the OTO */
div#row-product_id_page-0_1-0 {
	border: 2px dashed #b80000;
	background: #fffcee;
}

[id^="row-product_id_page-"] .am-element.element {
	margin: 10px;
	padding-bottom: 0px;
}

.am-product-title {
	font-size: 16px;
}

span#am-product-desc-93-196,
spam#am-product-desc-93-219 {
	margin-left: 30px;
	font-size: 15px;
	margin-top: 10px;
}

/* Adjust the product description for all products */
[id^="am-product-desc-"] {
	font-size: 16px;
	line-height: 1.2;
	font-style: normal;
	display: block;
}

[id^="am-product-terms-"] {
	color: #009933;
	font-weight: 700;
	font-style: normal;
	font-size: 16px;
}

/* Adjust the label "Choose Your Mode of Payment" */
label[for="paysys_id"] {
	text-indent: -12px;
	margin-left: 25px;
}

/* Add PayPal icon */
label[for="paysys_id---0"],
label[for="paysys_id---1"] {
	position: relative;
	display: block;
	margin-left: 40px;
	padding: 4px;
}

label[for="paysys_id---0"]::before {
	content: "";
	position: absolute;
	top: 20%;
	left: -45px;
	transform: translateY(-30%);
	background-image: url(https://digitalstartuptoolkit.net/wp-content/uploads/paypal_icon-1.png);
	background-size: cover;
	background-repeat: no-repeat;
	height: 40px;
	width: 40px;
}

label[for="paysys_id---1"]::before {
	content: "";
	position: absolute;
	top: 20%;
	left: -40px;
	transform: translateY(-30%);
	background-image: url(https://digitalstartuptoolkit.net/wp-content/uploads/gcash_icon.png);
	background-size: cover;
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
}

/* place a border around the selected payment method */
label.radio.am-el-checked {
	border: 2px dashed #008e48;
}

/*Place a check mark on the Payment System Selected */
.radio input[type="radio"]:checked+.am-paysystem-title:before {
	position: relative;
	content: '\2713';
	display: inline-block;
	color: accent;
	font-size: 22px;
	left: -26px;
	margin: -10px -19px 0px 0px;
}

/* place a check mark on the Product Selected */
.am-form input[type=radio]:checked+.am-product-title:before {
	position: relative;
	content: '\2713';
	display: inline-block;
	color: accent;
	font-size: 22px;
	left: -19px;
	margin: -10px -17px 0px 0px;
}

.indent-text {
	margin-left: 20px;
}