/*
 Theme Name:        Eastern Breeze - Divi Child
 Description:       Divi Child Theme
 Author:            Jonathan Clensy
 Author URI:        https://www.willowleafwebsolutions.co.uk
 Date Last Amended: 07/09/22
 Template:          Divi
*/

/*
 Divi Default Breakpoints:
	Desktop:		981 to 1920
	Tablet:			768 to 980
	Mobile:			320 to 767
*/

/*** HEADER MENU - START *********************************************/
/* Set the colour of the links upon hover */
#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover { 
    color:#a8a8a8!important; 
    opacity:1!important;
}
/*** HEADER MENU - END ***********************************************/

/*** MOBILE MENU - START *********************************************/
.mobile_nav.closed 
.mobile_menu_bar:before
{
	color:#242424!important; /* Set colour of hamburger menu */
}

/* Replace the hamburger icon with an 'X' when the mobile menu is expanded */
.mobile_nav.opened 
.mobile_menu_bar:before
{
	content: '\4d';
	color:#242424!important;
}

.et_mobile_menu
{
	border-top: 0; /* Removes the top line in the mobile menu that the Divi theme always adds */
	background-color:#ffffff!important;
	/*opacity:0.9!important;*/
}

/* Center align mobile menu items */
.et_mobile_menu li
{
	text-align:center!important;
}

.et_mobile_menu li li,
.et_mobile_menu li ul
{
	padding-left:0!important;
}

/* Make mobile menu full width */
.et_mobile_menu
{
	min-width: 100vw;
	margin-left: -10vw;
}
/*** MOBILE MENU - END ***********************************************/

/*** FOOTER LINKS - START ********************************************/
.footerlinks {
	color:#ffffff!important;
}
.footerlinks:hover {
	color:#a8a8a8!important;
	text-decoration:underline!important;
}
/*This class sets the social media logos in the footer to align right*/
.Footer-SocialMedia
{
	float:right;
}

/* This class styles the different shop categories in the footer */
.footershopcategorylinks {
	color:#ffffff!important;
}

.footershopcategorylinks:hover {
	color:#a8a8a8!important;
	text-decoration:underline!important;
}


/*** FOOTER LINKS - END **********************************************/

/*** HERO CTA - START ************************************************/
.hero_cta .et_pb_promo_description {

border-bottom: 4px #7B9C2B solid;	/* Add the green bar below the tag line */
padding-bottom:3px;
margin-bottom:30px;
}

.hero_cta .et_pb_promo_description h1 {

border-bottom: 4px #7B9C2B solid;	/* Add the green bar above the tag line */
margin-bottom:5px;
}
/*** HERO CTA - END **************************************************/

/*** SITEMAP - START *************************************************/
.sitemap-bullets ul li
{
	padding-bottom:20px;
}

.sitemap-bullets ul li ul
{
	padding-left:50px;
	padding-top: 20px;
	padding-bottom: 0px;
}
/*** SITEMAP - END ***************************************************/

/*** PRIVACY POLICY - START ******************************************/
.cookieTable
  {
    border: solid 1px #000000!important; border-collapse:collapse;
  }

  .cookieTable td
  {
    padding-top:10px;
    padding-bottom:10px;
	border: none!important; /* Required to stop the borders around individual cells */
  }
  .cookieTable-Item
  {
    width: 20%;text-align:center;vertical-align:top;font-weight:bold;background-color:#7b9c2b;color:#ffffff;
  }
  .cookieTable-Details
  {
    width: 80%;padding-left:10px;padding-right:10px;
  }
  
  .cookieTableRowSeparator
  {
    background-color:#cccccc;
	border: solid 1px #000000!important;
  }
/*** PRIVACY POLICY - END ********************************************/

/*** OPENING HOURS - START *******************************************/
.openingHours-LHS-Container{
	width:50%;
	color:#ffffff;
	float:left;
	text-align:center;
	font-weight:bold;
}
.openingHours-LHS-Container-Paras
{
	width:80%;
	float:right;
	margin-right:10px;
}
.openingHours-RHS-Container
{
	width:50%;
	color:#ffffff;
	float:left;
	text-align:center;
}
.openingHours-RHS-Container-Paras
{
	width:80%;
	float:left;
	margin-left:10px;
}

@media screen and (max-width: 767px) {
	.openingHours-LHS-Container-Paras p, .openingHours-RHS-Container-Paras p
	{
		font-size:13px;
		line-height:1.8em;
	}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
	.openingHours-LHS-Container-Paras p, .openingHours-RHS-Container-Paras p
	{
		font-size:14px;
		line-height:1.8em;
	}
}
@media screen and (min-width: 981px) and (max-width: 1920px) {
	.openingHours-LHS-Container-Paras p, .openingHours-RHS-Container-Paras p
	{
		font-size:16px;
		line-height:3.5em;
	}
}
/*** OPENING HOURS - END *********************************************/

/**********************************************************************************/
/*** STYLE THE WP FORMS LITE VARIOUS SECTIONS - START *****************************/
/**********************************************************************************/
.wpforms-form input[type=submit], 
.wpforms-form button[type=submit] {
    background-color: #7b9c2b !important;
	border: 2px solid #7b9c2b !important; 
	border-radius: 60px !important;
    color: #ffffff !important; 
	font-weight:bold !important;
    padding: 20px 30px 20px 30px !important; 
	letter-spacing: 1px !important;
	min-width:300px !important;
	
	opacity: 1 !important;
}

.wpforms-form input[type=submit]:hover, 
.wpforms-form input[type=submit]:active, 
.wpforms-form button[type=submit]:hover, 
.wpforms-form button[type=submit]:active {
    background-color: #9C2B7B !important; 
	border: 2px solid #9C2B7B !important;
	opacity: 1 !important;
}

.wpforms-form .wpforms-submit-container {
    text-align: center !important;
}

.wpforms-form input, .wpforms-form textarea{
    background-color: #ffffff !important; 
	border: 2px solid #eeeeee !important; 
	border-radius: 60px !important;
	color: #242424 !important;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	line-height: 1.7em !important;
	
}

/* Style input fields and paragraph fields when they have focus */
.wpforms-form input:focus, 
.wpforms-form textarea:focus {
    background-color: #7b9c2b!important; 
	border: 2px solid #7b9c2b !important; 
	color: #ffffff !important;
}

/* Style the placeholder text with and without focus. This has to be done for the various webkits for different browsers */

 /************** Chrome and Safari ****************/
.wpforms-container ::-webkit-input-placeholder {
   color: #242424;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{
  color: #ffffff;
}

 /************** Mozilla Firefox 4 to 18 ****************/
.wpforms-container :-moz-placeholder { 
   color: #242424;
   opacity: 1;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder{
  color: #ffffff;
}
 
 /************** Moxilla Firefox 19+ ****************/
.wpforms-container ::-moz-placeholder { 
   color: #242424;
   opacity: 1;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder{
  color: #ffffff;
}
 
 /************** Internet Explorer 10-11 ****************/
.wpforms-container :-ms-input-placeholder { 
   color: #242424;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder{
  color: #ffffff;
}
 
 /************** Microsoft Edge ****************/
.wpforms-container ::-ms-input-placeholder { 
   color: #242424;
}
input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder{
  color: #ffffff;
}

 /************** Catch All ****************/ 
.wpforms-container ::placeholder {
   color: #242424;
}
input:focus::placeholder,
textarea:focus::placeholder{
  color: #ffffff;
}

/***** Style the confirmation message - by default this is shown in a green box, so this code disables the box *********/
div.wpforms-confirmation-container-full {
    color: inherit;
    margin: 0;
    background: none!important;
    border: none!important;
    padding: 0;
	
	/* Following is used to style the confirmation text */
	padding-top:30px;
	padding-bottom:30px;
	font-weight: bold;
	text-align:center;
	font-size:16px;
	line-height: 1.8;
}

.wpforms-confirmation-text-white
{
	/***** If form is on a non-white background you can wrap this class around the confirmation text to switch the text to be white from the default black ***/
	color:#ffffff!important;
}
 
div.wpforms-confirmation-container-full p:last-of-type {
    margin: inherit;
}

@media screen and (max-width: 767px) {
	.wpforms-form input, .wpforms-form textarea
	{
		font-size:13px !important;
	}
	.wpforms-form input[type=submit],
	.wpforms-form button[type=submit]
	{
		font-size: 16px !important;
	}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
	.wpforms-form input, .wpforms-form textarea
	{
		font-size:14px !important;
	}
	.wpforms-form input[type=submit],
	.wpforms-form button[type=submit]
	{
		font-size: 18px !important;
	}
}
@media screen and (min-width: 981px) and (max-width: 1920px) {
	.wpforms-form input, .wpforms-form textarea
	{
		font-size:16px !important;
	}
	.wpforms-form input[type=submit],
	.wpforms-form button[type=submit]
	{
		font-size: 18px !important;
	}
}

/**********************************************************************************/
/*** STYLE THE WP FORMS LITE VARIOUS SECTIONS - END *******************************/
/**********************************************************************************/


/**********************************************************************************/
/*** STYLE THE BLOG POST CONTENT SECTION - START **********************************/
/**********************************************************************************/

/* This class will add margin around an image whenever one is embedded within the blog content */
.blog-post-content img{
	margin-top:20px;
	margin-right:20px;
	margin-bottom:20px;
	margin-left:20px;
}

@media screen and (max-width: 980px) {
	.blog-post-content img{
		width:80%;
		/* Following CSS will center the image */
		display:block;
		margin-left: auto;
		margin-right: auto;

	}
}

/**********************************************************************************/
/*** STYLE THE BLOG POST CONTENT SECTION - END ************************************/
/**********************************************************************************/

/**********************************************************************************/
/*** STYLE THE BLOG POSTS SIDEBAR SECTION - START *********************************/
/**********************************************************************************/
/*set the image width*/

.pa-blog-sidebar-list .entry-featured-image-url {
	width: 100px;
	float: left;
	margin-bottom: 0!important;
}


/*set the text width*/

.pa-blog-sidebar-list .entry-title,
.pa-blog-sidebar-list .post-meta {
	width: calc(100% - 100px);
	float: left;
	padding-left: 20px;
}


/*make the image square*/

.pa-blog-sidebar-list .entry-featured-image-url {
	padding-top: 100px;
	display: block;
}

.pa-blog-sidebar-list .entry-featured-image-url img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}


/*adjust the spacing and add a border between the posts*/

.pa-blog-sidebar-list .et_pb_post:not(:last-child) {
	border-bottom: 1px solid #dddddd!important;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

/**********************************************************************************/
/*** STYLE THE BLOG POSTS SIDEBAR SECTION - END ***********************************/
/**********************************************************************************/

/**********************************************************************************/
/*** STYLE THE WOO COMMERCE PRODUCTS - START **************************************/
/**********************************************************************************/

/* Style the SALE button that appears on sale items. For some reason the rounded corners 
   don't work when set directly in the WooCommerce module'. You will need to add the SaleBadge_JC custom CSS class to any module that you want to apply this too */
.SaleBadge_JC li.product .onsale, .SaleBadge_JC span.onsale
{
	border-radius: 20px!Important;
}


/* Style the review tab in the Woo Product Tabs module on a product page
 * NOTE: To avoid the risk of these being applied on any other WooCommerce modules I have added the WooProductTab as a CSS Class in the module.
 * This gaurantees that it will only affect modules with this CSS class applied */

/* Adjust the h2*/
.WooProductTab h2
{
	font-size:21px!important;
}

/* Target the stars when leaving a review */
.WooProductTab p.stars a{
	color:#7b9c2b!important;
}

/* Target the avatar of submitted reviews */
.WooProductTab #reviews #comments ol.commentlist li img.avatar{
	border-radius:20px!important;
}

/* Target the button for submitting a product review */
.WooProductTab #respond input#submit{
	color:#ffffff!important;
	border:10px!important;
	border-radius:60px!important;
	letter-spacing:1px!important;
	font-weight:bold!important;
	text-transform: uppercase!important;
	text-align:center!important;
	margin-top:10px!important;
	margin-bottom:10px!important;
	padding-top:10px!important;
	padding-right:30px!important;
	padding-bottom:10px!important;
	padding-left:30px!important;
}

/* Target the hover of the button for submitting a product review */
.WooProductTab #respond input#submit:hover{
	background-color:#9C2B7B!important;
}


/* Here I am targeting the form that people can use to leave a review on the website.
 * I am hiding completely to avoid any SPAM reviews being received. All reviews for the site are being
 * sent out by invitation n number of days after an order has been completed. I am using the Customer Reviews for WooCommerce plugin for this.
 * That plugin does have an option for hising the on screen review form, but it doesn't seem to be working. It could be because of the 
 * .WooProductTab I have set up on the Description/Review module in the Product page.*/
.WooProductTab #review_form #respond{
	display:none;
}












/* Target the Woo Notice module that appears at the top of a product page when you add an item to your basket*/
/* Targets the full module */
.jc_Woo_Notice_Module_Product_Page .woocommerce-message, .jc_Woo_Notice_Module_Product_Page .wc-block-components-notice-banner.is-success{
	background-color:#f4f4f4!important;
	border:solid 0px #7b9c2b!important;
	border-radius:5px!important;
	color:#242424!important;
}
.jc_Woo_Notice_Module_Product_Page .woocommerce-message>svg, .jc_Woo_Notice_Module_Product_Page .wc-block-components-notice-banner.is-success>svg{
	background-color:#7b9c2b!important;
}


/* Targets the button in the success message */
.jc_Woo_Notice_Module_Product_Page .wc-block-components-notice-banner.is-success a{
	text-decoration:none!important;
}







/* Target the various notices that can appear at the top of the basket page*/
.jc_woo_notice_basket .wc-block-components-notice-banner.is-success{
	background-color:#f4f4f4!important;
	border:solid 2px #7b9c2b!important;
	border-radius:5px!important;
	color:#242424!important;
}
/* Target the info icon that can appear at the top of the basket page */
.jc_woo_notice_basket .wc-block-components-notice-banner.is-success>svg{
	background-color:#7b9c2b!important;
}

/* Target the various notices that can appear at the top of the basket page*/
.jc_woo_notice_basket .wc-block-components-notice-banner.is-info{
	background-color:#f4f4f4!important;
	border:solid 2px #7b9c2b!important;
	border-radius:5px!important;
	color:#242424!important;
}
/* Target the info icon that can appear at the top of the basket page */
.jc_woo_notice_basket .wc-block-components-notice-banner.is-info>svg{
	background-color:#7b9c2b!important;
}

/* Target the various notices that can appear at the top of the basket page*/
.jc_woo_notice_basket .wc-block-components-notice-banner.is-error{
	background-color:#f4f4f4!important;
	border:solid 2px #7b9c2b!important;
	border-radius:5px!important;
	color:#242424!important;
}
/* Target the info icon that can appear at the top of the basket page */
.jc_woo_notice_basket .wc-block-components-notice-banner.is-error>svg{
	background-color:#7b9c2b!important;
}







/* This next section is to target the Cross Sells module on the basket page
 * This module has very restricted editable elements within the module and so in order to have remain similar
 * to how products are presented elsewhere I have had to use the following CSS*/

.woo_cart_cross_sells h2
{
	font-size:21px!important; /* Control the size of the H2 for the cross sell */
}

/* This allows you to control the size of the displayed images in the cross-sell */
.woo_cart_cross_sells ul.products.columns-2 li.product
{
	max-width:200px!important;
}

@media screen and (max-width: 980px) {
	.woo_cart_cross_sells ul.products.columns-2 li.product
{
	max-width:300px!important;
}
	
}

/* Format the SALE tag on the cross sell products */
.woo_cart_cross_sells .woocommerce span.onsale, .woocommerce-page span.onsale
{
	background-color: #7b9c2b!important;
	border-radius:20px!important;
	text-transform:uppercase!important;
}

.woo_cart_cross_sells ul.products li.product h2
{
	text-transform:uppercase!important;	
}

/* I have not been able to identify the CSS class to center the star ratings and so for the cross-sell module I have 
 * taken the decision to hide all star ratings rather than having them left aligned when everything else is center aligned */
.woo_cart_cross_sells ul.products li.product .star-rating
{
	visibility:hidden!important;
}

/* This next section is to target the Checkout Payment module in the Checkout page
 * This module doesn't allow you to edit the module border, the notice background color or the required asterix colour */

/* Set the overall border colour of this module*/
.woo_checkout_gateway .woocommerce-checkout #payment
{
	border-width:2px!important;
	border-color:#7b9c2b;
}

/* Set the background colour of the module notice */
.woo_checkout_gateway #payment ul.payment_methods li.woocommerce-notice
{
	background-color:#919191!important;
}

/* Set the colour of the module's required asterix */
.woo_checkout_gateway form .form-row .required
{
	color:#d30e00!important;
}

/* set the color of the text of the sale section on the shop page - when there are currently no sales items to list - as this can't be targeted from the DIVI module */
.ShopPageSaleItems_JC .et_pb_text_inner
{
	color:#ffffff!important;
}

/**********************************************************************************/
/*** STYLE THE WOO COMMERCE PRODUCTS - END ****************************************/
/**********************************************************************************/

/**********************************************************************************/
/*** STYLE THE WOO COMMERCE PRODUCTS ON HOMEPAGE - START***************************/
/**********************************************************************************/

/* When viewing the homepage on a mobile reduce the products to 1 per row. This way you won't get issues with items with different lengths of titles staggering the layout */
@media screen and (max-width: 737px) {
    .HomepageShopForce1Col_jc ul.products.columns-4 li.product  {
        width:100% !important;
		max-width:200px !important;
		margin: 0 auto !important;
		margin-top:20px !important;
		margin-bottom:20px !important;
		float:none !important;
    }
}
/**********************************************************************************/
/*** STYLE THE WOO COMMERCE PRODUCTS ON HOMEPAGE - END*****************************/
/**********************************************************************************/

/**********************************************************************************/
/*** STYLE THE WOO COMMERCE CHECKOUT PAGE - START**********************************/
/**********************************************************************************/
/* Target the various notices that can appear at the top of the checkout page*/
/* A plugin update in Jan 24 resulted in the woocommerce-info class no longer working and so have had to add the wc-block-components-notice-banner.is-info class to the CSS */
.jc_woo_notice_checkout .woocommerce-info, .jc_woo_notice_checkout .wc-block-components-notice-banner.is-info{
	background-color:#f4f4f4!important;
	border:solid 2px #7b9c2b!important;
	border-radius:5px!important;
	color:#242424!important;
	font-size:16px!important;
}

/* SVG targets the icon within the message */
.jc_woo_notice_checkout .woocommerce-info>svg, .jc_woo_notice_checkout .wc-block-components-notice-banner.is-info>svg{
	background-color:#7b9c2b!important;
}

.jc_woo_notice_checkout .woocommerce-error, .jc_woo_notice_checkout .wc-block-components-notice-banner.is-error{
	background-color:#f4f4f4!important;
	border:solid 2px #7b9c2b!important;
	border-radius:5px!important;
	color:#242424!important;
	font-size:16px!important;
}

.jc_woo_notice_checkout .woocommerce-error>svg, .jc_woo_notice_checkout .wc-block-components-notice-banner.is-error>svg{
	background-color:#7b9c2b!important;
}

.jc_woo_notice_checkout .woocommerce-success, .jc_woo_notice_checkout .wc-block-components-notice-banner.is-success{
	background-color:#f4f4f4!important;
	border:solid 2px #7b9c2b!important;
	border-radius:5px!important;
	color:#242424!important;
	font-size:16px!important;
}

.jc_woo_notice_checkout .woocommerce-success>svg, .jc_woo_notice_checkout .wc-block-components-notice-banner.is-success>svg{
	background-color:#7b9c2b!important;
}
/**********************************************************************************/
/*** STYLE THE WOO COMMERCE CHECKOUT PAGE - END************************************/
/**********************************************************************************/


/**********************************************************************************/
/*** STYLE THE WOO COMMERCE THANK YOU PAGE - START ********************************/
/**********************************************************************************/
/*Note:
 *The ThankYou page is part of the Checkout page, but has its own php page - thankyou.php  
 *I have created a child theme version of the thankyou.php page that
 *these styles are targeting which has allowed me to alter some of the text/content on the page */

/* This is targeting the paragraph that I have added to the thankyou.php file */
.woocommerce-checkout p.thankyou-note {
    margin-bottom: 40px;
	margin-top:40px;
    padding: 20px 20px 20px 20px;
	background-color: #7b9c2b;
	border-radius:10px;
}

/* Note: To target the following elements (without effecting the checkout page) I have added jc-thankyou as a class to the thankyou.php page where the div is declared */

/* This is styling the border and background of the main element on the page */
.woocommerce-checkout .et_pb_module_inner .jc-thankyou 
{
	background-color:#ffffff!important;
	border: solid 2px #7b9c2b;
	border-radius:5px;
}

/**********************************************************************************/
/*** STYLE THE WOO COMMERCE THANK YOU PAGE - END **********************************/
/**********************************************************************************/

/**********************************************************************************/
/*** STYLE THE WOO COMMERCE MY ACCOUNT SECTION - START ****************************/
/**********************************************************************************/

/* Style the buttons */
.woo-my-account-jc .woocommerce-Button.button, .woo-my-account-jc .woocommerce .woocommerce-form-login .woocommerce-form-login__submit, .woo-my-account-jc .woocommerce button.button, .woo-my-account-jc .woocommerce-page button.button, .woo-my-account-jc .woocommerce table.my_account_orders .button, .woo-my-account-jc .woocommerce a.button {
    color: #ffffff!important;
    background-color: #7b9c2b;
    border-color: transparent;
	border-width:10px;
	border-radius:60px;
	letter-spacing:1px;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:30px;
	padding-right:30px;

}

/* Style Smaller buttons as secondary buttons within the my-account section */
.woo-my-account-jc .woocommerce table.my_account_orders .button, .woo-my-account-jc .woocommerce a.button {
	border-radius:10px;
	border-width:1px;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:20px;
	padding-right:20px;
	font-weight:normal;
}


/* Stop the button displaying an arrow on hover by targeting the ::after event */
.woo-my-account-jc .woocommerce-Button.button::after, .woo-my-account-jc .woocommerce .woocommerce-form-login .woocommerce-form-login__submit::after, .woo-my-account-jc .woocommerce button.button::after, .woo-my-account-jc .woocommerce-page button.button::after, .woo-my-account-jc .woocommerce table.my_account_orders .button::after, .woo-my-account-jc .woocommerce a.button::after {
		content:none!important;
	}


/* Target the button hover event */
.woo-my-account-jc .woocommerce-Button.button:hover, .woo-my-account-jc .woocommerce button.button:hover, .woo-my-account-jc .woocommerce-page button.button:hover, .woo-my-account-jc .woocommerce #payment #place_order:hover {
    background-color: #9c2b7b!important;
	
	border-width:10px;
	border-radius:60px;
	letter-spacing:1px;
	margin-top:10px;
	margin-bottom:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:30px;
	padding-right:30px;
	
}


/* Style Smaller buttons as secondary buttons - HOVER EVENT */
.woo-my-account-jc .woocommerce table.my_account_orders .button:hover, .woo-my-account-jc .woocommerce a.button:hover {
	background-color: #9c2b7b!important;
	border-radius:10px;
	border-width:1px;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:20px;
	padding-right:20px;
	font-weight:normal;
}




 
/* Target the message boxes such as are displayed on the 'My Orders' tab */
.woo-my-account-jc .woocommerce .woocommerce-error, .woo-my-account-jc .woocommerce .woocommerce-info, .woo-my-account-jc .woocommerce .woocommerce-message {
   background-color: #919191!important;
	padding-left:30px!important;
	padding-right:30px!important;
	padding-top:20px!important;
	padding-bottom:20px!important;
	border-radius:20px;
}

/* Target the input form fields within the my-account section */
.woo-my-account-jc .woocommerce form .form-row input.input-text{
	border: solid 1px #7b9c2b;
	border-radius:5px;
	padding-top:5px;
	padding-bottom:5px;
}

/* Target the input form labels within the my-account section */
.woo-my-account-jc .woocommerce form .form-row label{
	text-transform:uppercase;
}

/**********************************************************************************/
/*** STYLE THE WOO COMMERCE MY ACCOUNT SECTION - END ******************************/
/**********************************************************************************/