
/* Pre-made CSS boxes */
/* Wrap directly with this class (not to be used with a paragraph tag) */
.asp-white-box{
    margin: 10px 0px;
    padding: 15px 10px;
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
}
.asp-grey-box{
    margin: 10px 0px;
    padding: 15px 10px;
    background-color: #DDDDDD;
    border-color: #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
}
.asp-green-box {
    margin: 10px 0px;
    padding: 15px 10px;
    background-color: #CCF4D6;
    border-color: #059B53;
    color: #043B14;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
}
.asp-yellow-box{
    margin: 10px 0px;
    padding: 10px;
    background-color: #FFFFE0;
    border-color: #E6DB55;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
}
.asp-orange-box{
    margin: 10px 0px;
    padding: 15px 10px;
    color: #3F2502;
    text-shadow: 1px 1px #FFFFFF;
    background-color: #FFF6D5;
    border-color: #D1B655;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
}
.asp-red-box {
    margin: 10px 0px;
    padding: 10px;
    background-color: #FFEBE8;
    border-color: #CC0000;
    color: #333333;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
}
/* End CSS boxes */

/*=== Shortcode Inserter === */
i.mce-i-asp-shortcode-icon {
	background-image: url(img/asp_shortcode.png);
}

.asp-shortcode-options-table input.asp-input-wide {
	width: 90%;
}

table.asp-shortcode-options-table th, table.asp-shortcode-options-table td {
	padding: 10px 10px 10px 0;
}

#TB_ajaxContent table.asp-shortcode-options-table p.description {
	padding: 0;
}

#TB_ajaxContent #asp_form_err {
	color: red;
	padding: 0;
	margin: 0;
}

#TB_window {
	overflow: auto;
}

#TB_ajaxContent {
	overflow: visible;
	height: auto;
	width: auto;
}
/*--- END Shortcode Inserter --- */

/*=== Product Settings === */
#asp_product_metaboxes_meta_box div.inside {
	margin: 0;
	padding: 0;
}

.wp-asp-product-meta-box-title {
	font-size: 1.3em;
}

fieldset legend {
	border-bottom: 1px solid #f7f7f7;
	width: 100%;
	padding: 0;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	font-weight: 600;
}

.wp-asp-product-settings-menu {
	display: inline-block;
	position: relative;
	width: 20%;
}

.wp-asp-product-tab-item {
	width: 76%;
	padding-left: 2%;
	padding-right: 2%;
	vertical-align: top;
	display: none;
	padding-top: 6px;
	padding-bottom: 10px;
}

.wp-asp-product-tab-item-visible {
	display: inline-block;
}

#wp-asp-product-settings-menu-icon {
	height: 38px;
	width: 38px;
	display: none;
	cursor: pointer;
	vertical-align: top;
	position: absolute;
	right: 0px;
}

#wp-asp-product-settings-menu-icon span {
	vertical-align: middle;
	font-size: 38px;
	width: auto;
	height: auto;
}

#wp-asp-product-settings-menu-icon.menu-visible {
	float: none;
}

a.wp-asp-product-menu-nav-item {
	border: 1px solid #e8e8e8;
	border-left: none;
	border-right: none;
	border-top: none;
	display: block;
	width: 100%;
	float: none;
	margin: 0;
	white-space: normal;
	padding: 7px 0;
	background-color: #f9f9f9;
}

a.wp-asp-product-menu-nav-item:hover {
	background-color: #fdfdfd;
	color: #2271b1;
}

a.wp-asp-product-menu-nav-item span {
	padding-left: 10px;
	padding-right: 10px;
	display: block;
}

a.wp-asp-product-menu-nav-item:focus {
	background-color: #f9f9f9;
	outline: none;
	box-shadow: none;
	border-top: none;
}

a.wp-asp-product-menu-nav-item.nav-tab-active {
	border-top: none;
	background-color: #ededed;
}

a.wp-asp-product-menu-nav-item.nav-tab-active:focus {
	border-top: none;
}

.asp_product_type_cont {
	display: none;
}

.asp_product_type_active {
	display: block;
}

.asp_product_type_select_cont label {
	margin-right: 10px;
}

@media screen and (max-width: 960px) {
	.wp-asp-product-settings-menu {
		width: 100%;
		display: block;
	}
	.wp-asp-product-tab-item {
		width: auto;
		padding: 10px 10px 15px 10px;
		margin: 0 auto;
	}
	.wp-asp-product-tab-item input[type=text] {
		width: auto;
	}
	a.wp-asp-product-menu-nav-item {
		display: none;
	}
	a.wp-asp-product-menu-nav-item.nav-tab-active {
		display: inline-block !important;
	}
	#wp-asp-product-settings-menu-icon {
		display: inline-block;
	}
	.wp-asp-product-tab-item-visible {
		display: block;
	}
	input[type=text] {
		max-width: 100%;
	}
	fieldset {
		width: auto;
		max-width: 100%;
		min-inline-size: auto;
	}
	.asp-variations-group-cont label {
		display: block;
	}
	.asp-variations-group-cont .wp-asp-help {
		float: none;
		vertical-align: middle;
	}
	.asp-variations-delete-group-btn {
		vertical-align: top !important;
	}
}

#wp-asp-shipping-variations-tbl,
#wp-asp-tax-variations-tbl {
	width: 75%;
}

#wp-asp-shipping-variations-tbl tr,
#wp-asp-tax-variations-tbl tr {
	text-align: center;
}

.wp-asp-shipping-variations-input,
.wp-asp-tax-variations-input {
	width: 100%;
}

.wp-asp-shipping-variations-del-btn span,
.wp-asp-tax-variations-del-btn span {
	vertical-align: sub;
}

#wp-asp-shipping-variations-add-btn span,
#wp-asp-tax-variations-add-btn span {
	vertical-align: middle;
}

@media screen and (max-width: 960px) {
	#wp-asp-shipping-variations-tbl,
	#wp-asp-tax-variations-tbl {
		width: 100%;
	}

	#wp-asp-shipping-variations-tbl .wp-asp-shipping-variations-input,
	#wp-asp-tax-variations-tbl .wp-asp-tax-variations-input{
		width: 100%;
	}
}
/*--- END Product Settings --- */

/*=== Product Variations === */
.asp-html-tpl {
	display: none;
}

.asp-variations-group-cont {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #ddd;
}

.asp-variations-group-title {
	padding: 5px;
}

.asp-variations-group-name {
	width: 60%;
	display: inline-block;
}

.asp-variations-tbl {
	margin-bottom: 5px;
}

.asp-variations-buttons-cont {
	text-align: right;
}

#asp-variations-cont-main button span.dashicons {
	vertical-align: middle !important;
}

#asp-variations-cont {
	margin-bottom: 10px;
}

.asp-variations-tbl input[type=text] {
	width: 100%;
	max-width: 100%;
}

.asp-btn-small {
	padding: 0 5px !important;
}

.asp-btn-small .dashicons {
	font-size: 18px;
}

.asp-variations-select-from-ml-btn {
	position: absolute;
	top: 0;
	bottom: 50%;
	margin-top: 8px !important;
	right: 7px;
}

.asp-variations-display-type-cont {
	float: right;
}

@media screen and (max-width: 782px) {
	.asp-variations-display-type-cont {
		float: none;
	}
	.asp-variations-options-cont {
		margin-top: 0.5rem;
	}
}

/*--- END Variations --- */

/*=== Addons Listing === */
.stripe_addon_item_canvas {
	font-family: sans-serif, arial;
	font-size: 12px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	display: block;
	float: left;
	margin: 3px 12px 12px 0;
	padding: 15px;
	position: relative;
	width: 300px;
	height: 400px;
}

.stripe_addon_item_canvas:hover {
	border-color: #d6d6d6;
}

.stripe_addon_item_thumb {
	position: relative
}

.stripe-addon-item-installed-mark {
	position: absolute;
	right: 5px;
	top: 5px;
}

.stripe-addon-item-installed-mark span {
	border: none !important;
	height: 50px;
	color: #00e600;
	font-size: 50px;
	width: 50px;
}

.stripe_addon_item_thumb img {
	padding: 5px;
	border: 1px solid #ddd;
}

.stripe_addon_item_thumb a img {
	border: 1px solid #ccc;
}

.stripe_addon_item_body {
	line-height: 22px;
	height: 170px;
	overflow: hidden;
}

.stripe_addon_item_name {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin: 10px 10px 10px 0px;
}

.stripe_addon_item_description {
	margin: 10px 10px 5px 0px;
	text-align: justify;
	overflow: hidden;
	height: 70px;
}

.stripe_addon_clear {
	clear: both;
}

.stripe_addon_item_details_link {
	text-align: center;
}

.stripe_addon_item_details_link a {
	border: 3px solid #2d3140;
	color: #2d3140;
	display: inline-block;
	padding: 5px 15px;
	text-decoration: none !important;
}

.stripe_addon_item_details_link a:hover {
	background-color: #2d3140;
	color: #FFF;
}

/*--- END Addons Listing --- */

/*=== Admin Inside Metabox === */
/* These can be used to style the metaboxes in admin dashboard to improve usability and appearance */
.asp-admin-metabox-subhead {
	font-size: 1.1em;
	font-weight: 600;
	margin: 15px 0 10px 0;
}
/*--- END Admin Inside Metabox --- */

/*=== Admin Products Table === */

th.column-thumbnail {
	max-width: 110px;
	width: 110px;
}

th.column-title {
	width: 20%;
}

th.column-shortcode {
	width: 20%;
}

.column-shortcode input {
	width: auto;
	max-width: 100%;
}

.asp-product-thumbnail-container img {
	width: 100px;
	height: 100px
}

.asp-product-thumbnail-container img:hover {
	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
}

.asp-product-thumbnail-container a:focus {
	box-shadow: none;
}

@media screen and (max-width: 782px) {
	th.column-thumbnail {
		display: none;
	}
	td.column-thumbnail {
		display: none;
	}
	td.thumbnail.column-thumbnail::before {
		content: '' !important;
	}
	.asp-product-thumbnail-container img {
		width: 50px;
		height: 50px;
	}
}

/*--- END Admin Products Table --- */

/*=== Settings Page === */

div.wp-asp-settings-cont {
	display: none;
}

div.wp-asp-tab-container {
	display: none;
}

div.wp-asp-tab-container p.description span {
	font-style: normal;
	background: #e3e3e3;
	padding: 2px 5px;
}

div.wp-asp-tabs {
	width: 80%;
}

div.wp-asp-tabs input {
	max-width: 100%;
}

div.wp-asp-tabs table {
	width: 100%;
	table-layout: fixed;
}

div.wp-asp-settings-sidebar-cont {
	width: 19%;
	float: right;
}

div.wp-asp-settings-grid {
	display: inline-block;
}

div#poststuff {
	min-width: 19%;
}

.wp-asp-stars-container {
	text-align: center;
	margin-top: 10px;
}

.wp-asp-stars-container span {
	vertical-align: text-top;
	color: #ffb900;
}

.wp-asp-stars-container a {
	text-decoration: none;
}

div.postbox.yellowish {
	background-color: #ffffc8;
}

@media (max-width: 782px) {
	div.wp-asp-settings-grid {
		display: block;
		float: none;
		width: 100%;
	}
}

.asp-settings-spinner-container {
	padding-bottom: 30px;
}

.asp-settings-spinner, .asp-settings-spinner:before, .asp-settings-spinner:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}

.asp-settings-spinner {
	color: grey;
	font-size: 10px;
	margin: 5px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.asp-settings-spinner:before, .asp-settings-spinner:after {
	content: '';
	position: absolute;
	top: 0;
}

.asp-settings-spinner:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.asp-settings-spinner:after {
	left: 3.5em;
}

@-webkit-keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

@keyframes load7 {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

/* === Hover over help hint === */
.wp-asp-help {
	position: relative;
	display: inline-block;
	cursor: help;
	vertical-align: text-bottom;
	color: #aaa;
}

.wp-asp-help:hover {
	color: blue;
}

.wp-asp-help .dashicons {
	height: auto;
	width: auto;
}

.wp-asp-help:hover .wp-asp-help-text {
	visibility: visible;
}

.wp-asp-help .wp-asp-help-text p {
	font-size: 0.95em;
}

.wp-asp-help .wp-asp-help-text {
	font-size: 0.95em;
	min-width: 200px;
	top: -10px;
	left: 50%;
	transform: translate(-50%, -100%);
	padding: 7px 10px;
	color: #fff;
	background-color: #111;
	font-weight: normal;
	border-radius: 8px;
	position: absolute;
	z-index: 99999999;
	box-sizing: border-box;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
	visibility: hidden;
	text-align: center;
}

.wp-asp-help .wp-asp-help-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

@media screen and (max-width: 782px) {
	.wp-asp-help .wp-asp-help-text::after {
		top: 50%;
		left: 100%;
		/* To the right of the tooltip */
		margin-left: auto;
		margin-top: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent transparent black;
	}
	.wp-asp-help {
		float: right;
	}
	.wp-asp-help .wp-asp-help-text {
		min-width: auto;
		top: 50%;
		right: 100%;
		left: auto;
		margin-right: 10px;
		transform: translate(0, -50%);
	}
	.wp-asp-help .dashicons {
		vertical-align: bottom;
		width: 30px;
		height: 30px;
		font-size: 200%;
	}
	.asp_acf_input_control span.dashicons {
		vertical-align: middle;
	}
}

/* END Hover over help hint */

/*--- END Settings Page --- */

/*=== Email tags hint === */

.wp-asp-tags-table-cont {
	margin-top: 10px;
}

a.wp-asp-toggle {
	text-decoration: none;
	border-bottom: 1px dashed;
}

a.wp-asp-toggle.toggled-on::after {
	content: " ↑";
}

a.wp-asp-toggle.toggled-off::after {
	content: " ↓";
}

table.wp-asp-tags-hint td, table.wp-asp-tags-hint th {
	padding: 5px 10px;
}

table.wp-asp-tags-hint {
	background: #fff;
	width: 100%;
}

table.wp-asp-tags-hint td.wp-asp-tag-name {
	width: 150px;
	border-bottom: 1px solid #ededed;
}

table.wp-asp-tags-hint td.wp-asp-tag-descr {
	width: 70%;
	border-bottom: 1px solid #ededed;
}

/*----- END Email tags hint ----- */

/*=== Allowed Currencies === */

#wp-asp-allowed-currencies-cont .wp-asp-allowed-currencies {
	margin-top: 10px;
}

#wp-asp-allowed-currencies-cont .wp-asp-allowed-currencies-sel div {
	display: inline-block;
	line-height: 1.75em;
	width: 50%;
}

.wp-asp-allowed-currencies-buttons-cont {
	margin-top: 7px;
	margin-bottom: 7px;
	line-height: 2em;
}

.wp-asp-allowed-currencies-buttons-cont button {
	margin-right: 5px;
}

@media screen and (max-width: 782px) {
	#wp-asp-allowed-currencies-cont .wp-asp-allowed-currencies-sel div {
		line-height: 2em;
	}
}

@media screen and (max-width: 960px) {
	#wp-asp-allowed-currencies-cont .wp-asp-allowed-currencies-sel div {
		display: block;
		width: 100%;
	}
}

/*----- END Allowed Currencies ----- */

.asp-new-api-only {
	color: green;
}