:active { outline: none; }
:focus { outline: none; }

a:hover{
	cursor:pointer;
}
.center{
	text-align:center;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}
div.pages {
	clear: both;
}

.zopim {
	z-index: 1000 !important;
}
/* Fabric Tool */
#ftWindow {
	border: 0px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("{$const.HTTP_CMS_IMG}/resources/fabric-tool/64/spinner-dark.gif") no-repeat center center / 32px 32px #f5f5f5;
	.border-radius;
	.box-shadow;
}
#ftOverlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ddd;
	background: rgba(0, 0, 0, .4);
	z-index: 999999;
}
body.extPopup {
	overflow: hidden;
}

/* Modules R We */
div.module {
	border: 1px solid #c0c0c0;
	margin: 5px 0 5px 0;
	font-family: Arial, Helvetica, sans-serif
}

div.module ul {
    list-style: none;
}

div.module h3 {
	font-size: 12px;
	font-weight: bold;
	background-color: #F5F5F5;
	padding: 5px;
	margin: 0;
}

div.module div.inside {
	padding: 3px 7px 7px 7px;
}

/* Testimonials */
div.testimonials ul.inside {
	margin-right: 10px;
}

div.testimonials ul.inside li {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

div.testimonials ul.inside li {
	margin: 0;
	padding: 0;
}

div.testimonials ul.inside li p.fromuser {
	color: #4F4F4F;
	font-size: 10px;
	padding: 0 5px;
	margin: 5px 0;
}

div.testimonials ul.inside li p.note {
	font-size: 12px;
	padding: 0 5px 0 26px !important;
	text-align: justify;
	margin: 5px 0;
}

div.testimonials ul.inside li.readmore {
	padding: 0 0 10px 0;
	text-align: center;
	font-size: 11px;
}

/* Page Links */
div.pages {
	margin: 10px;

	ul {
		margin: 0;
		padding: 0;
		display: inline;
		list-style: none;
	}

	li {
		margin-left: 0;
		padding: 5px 5px;
		display: inline;
	}

	li strong {
		padding: 0 3px 0 3px;
		border-bottom: 3px solid #000;
	}
}

/* Product Module */
div.mod-prods {
	.inside,
	.clear {
		clear: both;
		font-size: 0;
	}

	.product {
		float: left;
		height: 165px;
		width: 150px;
		text-align: center;
		padding: 5px;

		.subtitle {
			color: #999;
			font-size: 10px;
			margin-bottom: 3px;
		}

		.title h4 {
			margin: 2px 0 3px 0;
			font-size: 12px;
		}

		.price {
			font-size: 12px;
			font-weight: bold;
		}
	}
}

/* Content files, such as contact us */

#inc-content {
	table {
		margin:0;
	}

	td {
		padding: 5px 0 5px 0;
	}

	input {
		text-align: left;

		&[type="submit"] {
			text-align: center;
		}
	}
}

.hideable {
	display: none;
}

#page_copy, #page_copy_2 {
	ul li {
		list-style-type: disc;
		margin-left: 20px;
	}

	dl {
		margin-bottom: 10px;
	}

	dt {
		font-weight:bold;
		margin:5px 0 0 0;
	}

	dd {
		padding: 0 0 0 10px;
		margin:0 0 10px 0;
	}

	.module ul li {
		list-style-type:none;
		margin-left:0;
	}
}
input.cartthis[disabled],
button.cartthis[disabled] {
	display: none;
}
#sitemap .sm-container{
	margin:0 0 10px 0;
	float:left;
	clear:left;
	width:100%;
}
#sitemap .sm-container h2{
	padding:5px;
	background:#eaeaea;
}
#sitemap ul{
	margin:0 0 10px 20px;
}
#sitemap ul li ul{
	margin:0 0 10px 10px;
	width:auto;
}
#sitemap ul li{
	list-style-type:disc;
	margin:3px 0 3px 10px;
}

/*loading icon that overlays the product image*/
#main-image {
	position: relative;
}

.loading-img {
    background: #fff;
	opacity: .70;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
}

.loading-img-icon {
	position: absolute;
	background-image: url('{$const.HTTP_SHARED}/img/loading.gif');
	width: 32px;
	height: 32px;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
}

.contactFormError {
	background-color: #FCEEA9;
}
.cmsVideoFrame {
	border: 0;
}
/** DO NOT USE; Meant for old templates not using new CMS standards for using .cmsPageImage **/
.cmsLegacyPageImage {
	float: right;
}
/*div style table format*/
.divTable{
	display:table;
	margin:0 0 20px;
	&.w100{
		width:100%;
	}
	.divRow{
		display:table-row;
		.divData, .divHead{
			display:table-cell;
			vertical-align:top;
			padding:5px;
		}
		.divHead{
			font-weight:700;
		}
		&.req{
			label:after{
				content:"*";
				color:red;
			}
		}
	}
}
.article-listing{
	margin:0 0 20px;
	border:1px solid #ccc;
	.art-pcontainer{
		display:inline-block;
		width:25%;
		margin:0 -4px 20px 0;
		vertical-align: top;
		.art-pcontainer-wpr{
			padding:20px;
			margin:0 10px;
			.art-parent-img{
				margin:0 0 10px;
				/*background:#ccc;*/
				/*border:1px solid #ccc;*/
				a{
					display:block;
					img{
						display:block;
						max-width:100%;
					}
				}
			}
			.art-parent{
				font-size:110%;
				font-weight:bold;
			}
		}
	}
	.sub-article-listing{
		padding:0 0 10px 10px;
		margin:0 0 0 10px;
		.art-ccontainer{
			list-style-type: disc;
		}
		.art-child{
			font-size:90%;
		}
	}
}

/* begin css for ocg design system */

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
	margin: 0;

	&.flex-center {
		justify-content: center;
	}

	&.flex-end {
		justify-content: flex-end;
		gap: 10px;
	}

	&.flex-start {
		justify-content: flex-start;
	}

	&.space-around {
		justify-content: space-around;
	}

	&.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 20px;
		margin-left: 15px;
	}
}

.column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;

	&.flex-center {
		justify-content: center;
	}

	&.flex-end {
		justify-content: flex-end;
		gap: 10px;
	}

	&.flex-start {
		justify-content: flex-start;
		gap: 10px;
	}
}

.double-column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
}

.grid-img-wrapper {
	margin: 0 7px 10px;
	text-align: center;

	&.has-border {
		border: 0.5px solid #e1e1e1;
	}

	a.text-link{
		color: #000;
		display: inline-block;
		position: relative;
		margin: 0.5em 0;

		&:hover {
			color: #444444;
			text-decoration: none;
		}

		&:after {
			content: '';
			position: absolute;
			width: 100%;
			transform: scaleX(0);
			height: 2px;
			bottom: 0;
			left: 0;
			background-color: #E6E6E6;
			transform-origin: bottom right;
			transition: transform 0.25s ease-out;
		}

		&:hover:after {
			transform: scaleX(1);
			transform-origin: bottom left;
		}
	}
}

.shared-default-button {
	padding: 0.625em 2em;
	margin: 1em auto;
	border-radius: 0;
	border: 1px solid #A9A9A9;
	background-color: #D3D3D3;
	transition: background-color .300s;


	&:hover {
		background: #A9A9A9;
		color: #000;
		text-decoration: none;
	}

	&.reverse-white {
		border: 1px solid #fff;
		text-transform: uppercase;
		background-color: transparent;
		color: #fff;
		transition: background-color .350s;
		display: block;

		&:hover {
			background: #fff;
			color: #000;
			text-decoration: none;
		}
	}

	&.black:not(.gpay-button) {
		text-transform: uppercase;
		background-color: #000;
		color: #fff;
		border: none;
		transition: background-color .350s;
		display: block;

		&:hover {
			background: #E6E6E6;
			text-decoration: none;
		}
	}

	&.black-outline:not(.gpay-button) {
		text-transform: uppercase;
		border: 1px solid #000;
		background-color: #fff;
		color: #000;
		transition: background-color .350s;
		display: block;

		&:hover:not(.gpay-button) {
			color: #fff;
			text-decoration: none;
		}

		&:disabled {
			border: 1px solid #000;
			background-color: #fff;
			color: #000;
			text-decoration: none;
		}
	}


	&.disabled-grey {
		text-transform: uppercase;
		background-color: #333;
		color: #fff;
		border: none;

		&:hover {
			background: #333;
			text-decoration: none;
		}
	}

	&.grey {
		text-transform: uppercase;
		background-color: #949494;
		color: #fff;
		border: none;

		&:hover {
			text-decoration: none;
		}
	}

	&.smaller-font {
		font-size: 0.75rem;
		padding: 0.625em 1em;
	}

	&.medium-font {
		font-size: .813rem;
		padding: 0.625em 1em;
	}
}

/* end css for ocg design system */