/*
 * The Maven Pro webfont used to be pulled in with an @import on this line.
 * An @import is only discovered once this stylesheet itself has arrived, so
 * the font request was serialised behind it; it is a <link rel="preconnect">
 * plus a <link rel="stylesheet"> in views/header/view_header.php now, which
 * starts both at the same time as this file.
 *
 * The family is a token rather than a literal so that one declaration
 * switches the whole site's text face - see assets/css/ui-admincp.css, which
 * points it at the same system stack the admin control panel uses.
 */

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-background);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-background);
    border-radius: 18px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.toolbar-dropdown > .tab-content {
	overflow-y: auto;
	max-height: 350px;
	padding: 15px;
}

.sub-menu,
.toolbar-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 200px;
	margin-top: -7px !important;
	padding: 10px 0 !important;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	background-color: var(--toolbar-dropdown-background);
	line-height: 1.5;
	/* box-shadow: 0 7px 22px -5px var(--order-box-shadow); */
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.sub-menu > li,
.toolbar-dropdown > li {
	display: block;
	position: relative;
}

.sub-menu > li > a,
.toolbar-dropdown > li > a {
	display: block;
	padding: 5px 20px !important;
	transition: color 0.3s;
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
}

.sub-menu > li > a > i,
.toolbar-dropdown > li > a > i {
	display: inline-block;
	margin-top: -2px;
	margin-right: 6px;
	font-size: 0.9em;
	vertical-align: middle;
}

.sub-menu > li.sub-menu-user,
.toolbar-dropdown > li.sub-menu-user {
	display: table;
	width: 100%;
	padding: 4px 17px 6px;
}

.sub-menu > li.sub-menu-user .user-ava,
.toolbar-dropdown > li.sub-menu-user .user-ava,
.sub-menu > li.sub-menu-user .user-info,
.toolbar-dropdown > li.sub-menu-user .user-info {
	display: table-cell;
	vertical-align: middle;
}

.sub-menu > li.sub-menu-user .user-ava,
.toolbar-dropdown > li.sub-menu-user .user-ava {
	width: 44px;
}

.sub-menu > li.sub-menu-user .user-ava > img,
.toolbar-dropdown > li.sub-menu-user .user-ava > img {
	display: block;
	width: 44px;
	padding: 3px;
	border: 1px solid var(--primary-border-color);
	border-radius: 50%;
}

.sub-menu > li.sub-menu-user .user-info,
.toolbar-dropdown > li.sub-menu-user .user-info {
	padding-left: 8px;
}

.sub-menu > li.sub-menu-user .user-info > .user-name,
.toolbar-dropdown > li.sub-menu-user .user-info > .user-name {
	margin-bottom: 2px;
	font-size: 14px;
}

.sub-menu > li.sub-menu-user .user-info > span,
.toolbar-dropdown > li.sub-menu-user .user-info > span {
	display: block;
}

.sub-menu > li.sub-menu-separator,
.toolbar-dropdown > li.sub-menu-separator {
	margin-top: 5px;
	margin-bottom: 3px;
	border-top: 1px solid var(--primary-border-color);
}

.sub-menu > li:hover > a,
.toolbar-dropdown > li:hover > a {
	color: var(--link-color);
}

.sub-menu > li.active > a,
.toolbar-dropdown > li.active > a {
	color: var(--link-color);
}
.sub-menu > li.has-children > a,
.toolbar-dropdown > li.has-children > a {
	padding-right: 35px !important;
}
.sub-menu > li.has-children > a::after,
.toolbar-dropdown > li.has-children > a::after {
	display: block;
	position: absolute;
	top: 50%;
	right: 18px;
	width: 0;
	height: 0;
	margin-top: -4px;
	border-top: 0.3em solid transparent;
	border-bottom: 0.3em solid transparent;
	border-left: 0.32em solid;
	content: '';
}

.sub-menu > li > .sub-menu,
.toolbar-dropdown > li > .sub-menu {
	top: -4px;
	left: 100%;
	margin-left: -8px;
	z-index: 99999;
}

.mega-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: -1px !important;
	border: 1px solid var(--primary-border-color);
	background-color: var(--toolbar-dropdown-background);
	box-shadow: 0 7px 22px -5px var(--secondary-box-shadow);
	table-layout: fixed;
}

.mega-menu > li {
	display: table-cell !important;
	position: relative;
	padding: 25px !important;
	border-left: 1px solid var(--primary-border-color);
	vertical-align: top;
}

.mega-menu > li .mega-menu-title {
	display: block;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--primary-border-color);
	color: var(--text-muted-color);
	font-weight: 500;
	text-transform: uppercase;
	text-align: left;
}

.mega-menu > li:first-child {
	border-left: 0;
}

.mega-menu .sub-menu {
	display: block !important;
	position: relative;
	width: 100%;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.mega-menu .sub-menu > li > a {
	padding: 5px 0 !important;
}


.offcanvas-menu {
	position: relative;
	width: 100%;
	/* overflow: hidden; */
  }

  .offcanvas-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
  }

  .offcanvas-menu ul.menu {
	position: relative;
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
	transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  }

  .offcanvas-menu ul.menu.off-view {
	-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
  }

  .offcanvas-menu ul.menu.in-view {
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
  }

  .offcanvas-menu ul li {
	display: block;
  }

  .offcanvas-menu ul li a {
	display: block;
	padding: 15px 20px;
	transition: color .3s;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--menu-link-color);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
  }

  .offcanvas-menu ul li a:hover {
	color: var(--primary-color);
  }

  .offcanvas-menu ul li.back-btn > a {
	background-color: var(--mobile-menu-header-background);
	color: var(--text-white-color);
  }

  .offcanvas-menu ul li.back-btn > a::before {
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 8px;
	border-top: .32em solid transparent;
	border-right: .37em solid;
	border-bottom: .32em solid transparent;
	content: '';
	opacity: .75;
  }

  .offcanvas-menu ul li.active > a {
	color: var(--primary-color);
  }

  .offcanvas-menu ul li.has-children > span {
	display: block;
	position: relative;
	width: 100%;
  }

  .offcanvas-menu ul li.has-children > span > a {
	padding-right: 65px;
  }

  .offcanvas-menu ul li.has-children.active > span > a {
	color: var(--primary-color);
  }

  .offcanvas-menu ul li.has-children .sub-menu-toggle {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 100%;
	height: calc(100% - 1px);
	transition: background-color .3s;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	z-index: 1;
  }

  .offcanvas-menu ul li.has-children .sub-menu-toggle::before {
	display: block;
	position: absolute;
	top: 50%;
	right: 25px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border-top: .35em solid transparent;
	border-bottom: .35em solid transparent;
	border-left: .4em solid;
	content: '';
  }

  .offcanvas-menu ul li.has-children .sub-menu-toggle:hover {
	background-color: rgba(255, 255, 255, 0.1);
  }

  .offcanvas-menu ul li.has-children > .offcanvas-submenu {
	position: absolute;
	top: 0;
	right: -100%;
	width: 100%;
	height: auto;
	-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
	transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  }

  .offcanvas-menu ul li.has-children > .offcanvas-submenu.in-view {
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
  }

  .offcanvas-menu ul li.has-children > .offcanvas-submenu.off-view {
	-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
  }

@-webkit-keyframes submenu-show {
	from {
		-webkit-transform: scale(0.85);
		transform: scale(0.85);
		opacity: 0;
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes submenu-show {
	from {
		-webkit-transform: scale(0.85);
		transform: scale(0.85);
		opacity: 0;
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes megamenu-show {
	from {
		-webkit-transform: translate3d(0, -9px, 0);
		transform: translate3d(0, -9px, 0);
		opacity: 0;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes megamenu-show {
	from {
		-webkit-transform: translate3d(0, -9px, 0);
		transform: translate3d(0, -9px, 0);
		opacity: 0;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

html * {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-position: center;
	background-color: var(--primary-background-color);
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--primary-text-color);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: normal;
	text-transform: none;
	line-height: 1.5;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-color);
	text-decoration: none;
}

a:focus {
	outline: none;
}

.small,
small {
	font-size: 85%;
}

.navi-link,
.navi-link-light {
	transition: color 0.3s;
	color: var(--secondary-color);
	text-decoration: none;
}

.navi-link:hover,
.navi-link-light:hover {
	color: var(--link-color);
	cursor: pointer;
}

.navi-link-light {
	color: var(--text-white-color);
}

.question-link {
	color: var(--secondary-color);
}

.question-link:hover {
	color: var(--secondary-color);
	cursor: help;
}

img,
figure {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

svg {
	max-width: 100%;
}

/* Responsive iframes */
iframe {
	width: 100%;
}

/* Box Model */
* {
	box-sizing: border-box;
}

*::before,
*::after {
	box-sizing: border-box;
}

hr {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--primary-border-color);
}

hr.hr-light {
	border-top-color: rgba(255, 255, 255, 0.12);
}

pre {
	display: block;
	padding: 15px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	background-color: var(--misc-secondary);
}

::-moz-selection {
	background: var(--third-color);
	color: var(--primary-background-color);
}

::selection {
	background: var(--third-color);
	color: var(--primary-background-color);
}

::-moz-selection {
	background: var(--third-color);
	color: var(--primary-background-color);
}

figure {
	position: relative;
	margin: 0;
}

figure figcaption {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 12px;
	font-size: 14px;
}

/* Bootstrap Overrides */
@media (min-width: 1200px) {
	.container {
		width: 1260px;
		max-width: 1260px;
	}
}

@media (max-width: 1200px) {
	.container {
		width: 100% !important;
		max-width: 100% !important;
	}
}

.container-fluid {
	max-width: 1920px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 30px;
	padding-left: 30px;
}

@media (max-width: 1200px) {
	.container-fluid {
		padding: 0 15px;
	}
}

.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	vertical-align: middle;
}

.close {
	transition: opacity 0.25s;
	border: 0;
	background: 0;
	color: var(--secondary-color);
	font-family: var(--font-body);
	font-size: 18px;
	cursor: pointer;
}

.close:hover {
	opacity: 0.6;
}

.icon-medal {
	display: inline-block;
	width: 14px;
	height: 14px;
	background-position: center;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIuMDAzIDUxMi4wMDMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMi4wMDMgNTEyLjAwMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBkPSJNMjU2LjAwMSw2NGMtNzAuNTkyLDAtMTI4LDU3LjQwOC0xMjgsMTI4czU3LjQwOCwxMjgsMTI4LDEyOHMxMjgtNTcuNDA4LDEyOC0xMjhTMzI2LjU5Myw2NCwyNTYuMDAxLDY0eiAgICAgIE0yNTYuMDAxLDI5OC42NjdjLTU4LjgxNiwwLTEwNi42NjctNDcuODUxLTEwNi42NjctMTA2LjY2N1MxOTcuMTg1LDg1LjMzMywyNTYuMDAxLDg1LjMzM1MzNjIuNjY4LDEzMy4xODQsMzYyLjY2OCwxOTIgICAgIFMzMTQuODE3LDI5OC42NjcsMjU2LjAwMSwyOTguNjY3eiIgZmlsbD0iIzYwNjk3NSIvPgoJCQk8cGF0aCBkPSJNMzg1LjY0NCwzMzMuMjA1YzM4LjIyOS0zNS4xMzYsNjIuMzU3LTg1LjMzMyw2Mi4zNTctMTQxLjIwNWMwLTEwNS44NTYtODYuMTIzLTE5Mi0xOTItMTkycy0xOTIsODYuMTQ0LTE5MiwxOTIgICAgIGMwLDU1Ljg1MSwyNC4xMjgsMTA2LjA2OSw2Mi4zMzYsMTQxLjE4NEw2NC42ODQsNDk3LjZjLTEuNTM2LDQuMTE3LTAuNDA1LDguNzI1LDIuODM3LDExLjY2OSAgICAgYzIuMDI3LDEuNzkyLDQuNTY1LDIuNzMxLDcuMTQ3LDIuNzMxYzEuNjIxLDAsMy4yNDMtMC4zNjMsNC43NzktMS4xMDlsNzkuNzg3LTM5Ljg5M2w1OC44NTksMzkuMjMyICAgICBjMi42ODgsMS43OTIsNi4xMDEsMi4yNCw5LjE5NSwxLjI4YzMuMDkzLTEuMDAzLDUuNTY4LTMuMzQ5LDYuNjk5LTYuNGwyMy4yOTYtNjIuMTQ0bDIwLjU4Nyw2MS43MzkgICAgIGMxLjA2NywzLjE1NywzLjU0MSw1LjYzMiw2LjY3Nyw2LjcyYzMuMTM2LDEuMDY3LDYuNTkyLDAuNjQsOS4zNjUtMS4yMTZsNTguODU5LTM5LjIzMmw3OS43ODcsMzkuODkzICAgICBjMS41MzYsMC43NjgsMy4xNTcsMS4xMzEsNC43NzksMS4xMzFjMi41ODEsMCw1LjEyLTAuOTM5LDcuMTI1LTIuNzUyYzMuMjY0LTIuOTIzLDQuMzczLTcuNTUyLDIuODM3LTExLjY2OUwzODUuNjQ0LDMzMy4yMDV6ICAgICAgTTI0Ni4wMTcsNDEyLjI2N2wtMjcuMjg1LDcyLjc0N2wtNTIuODIxLTM1LjJjLTMuMi0yLjExMi03LjMxNy0yLjM4OS0xMC42ODgtMC42NjFMOTQuMTg4LDQ3OS42OGw0OS41NzktMTMyLjIyNCAgICAgYzI2Ljg1OSwxOS40MzUsNTguNzk1LDMyLjIxMyw5My41NDcsMzUuNjA1TDI0Ni43LDQxMS4yQzI0Ni40ODcsNDExLjU2MywyNDYuMTY3LDQxMS44NCwyNDYuMDE3LDQxMi4yNjd6IE0yNTYuMDAxLDM2Mi42NjcgICAgIEMxNjEuOSwzNjIuNjY3LDg1LjMzNSwyODYuMTAxLDg1LjMzNSwxOTJTMTYxLjksMjEuMzMzLDI1Ni4wMDEsMjEuMzMzUzQyNi42NjgsOTcuODk5LDQyNi42NjgsMTkyICAgICBTMzUwLjEwMywzNjIuNjY3LDI1Ni4wMDEsMzYyLjY2N3ogTTM1Ni43NTksNDQ5LjEzMWMtMy40MTMtMS43MjgtNy41MDktMS40NzItMTAuNjg4LDAuNjYxbC01Mi4zNzMsMzQuOTIzbC0zMy42NDMtMTAwLjkyOCAgICAgYzQwLjM0MS0wLjg1Myw3Ny41ODktMTQuMTg3LDEwOC4xNi0zNi4zMzFsNDkuNTc5LDEzMi4yMDNMMzU2Ljc1OSw0NDkuMTMxeiIgZmlsbD0iIzYwNjk3NSIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
	background-repeat: no-repeat;
	background-size: 14px;
	line-height: 1;
}

.position-relative {
	position: relative !important;
}

.position-absolute {
	position: absolute !important;
}

.position-fixed {
	position: fixed !important;
}

.position-static {
	position: static !important;
}

.top-0 {
	top: 0;
}

.right-0 {
	right: 0;
}

.bottom-0 {
	bottom: 0;
}

.left-0 {
	left: 0;
}

.mw-90 {
	max-width: 90% !important;
}

.mw-80 {
	max-width: 80% !important;
}

.mw-70 {
	max-width: 70% !important;
}

.mw-60 {
	max-width: 60% !important;
}

.min-w-24 {
	min-width: 24px !important;
}

.min-w-70 {
	min-width: 70px !important;
}
.min-w-90 {
	min-width: 90px !important;
}
.min-w-100 {
	min-width: 100px !important;
}

.mw-400 {
	max-width: 400px !important;
}
.w-2 {
	width: 2px !important;
}

.w-15 {
	width: 15px !important;
}

.w-18 {
	width: 18px !important;
}

.w-90 {
	width: 90px !important;
}

.w-135 {
	width: 135px !important;
}

.w-50 {
	width: 50px !important;
}

/*
* w-100 was set to height and not width 2021 - SE
*/
/* .w-100 {
	height: 100px !important;
} */

.w-110 {
	width: 110px !important;
}

.w-130 {
	width: 110px !important;
}

.w-150 {
	width: 150px !important;
}

.w-200 {
	width: 200px !important;
}

.w-250 {
	width: 250px !important;
}

.w-270 {
	width: 270px !important;
}

.w-300 {
	width: 300px !important;
}

.w-500 {
	width: 500px !important;
}

.max-h-130 {
	max-height: 130px !important;
}

.max-h-100 {
	max-height: 100px !important;
}

.h-30 {
	height: 30px !important;
}

.h-40 {
	height: 40px !important;
}

.h-44 {
	height: 44px !important;
}

.h-50 {
	height: 50px !important;
}

.h-72 {
	height: 72px !important;
}

.h-90 {
	height: 90px !important;
}

.h-100 {
	height: 100px !important;
}

.h-110 {
	height: 110px !important;
}

.h-150 {
	height: 150px !important;
}

.h-200 {
	height: 200px !important;
}

.h-220 {
	height: 220px !important;
}

.w-220 {
	width: 220px !important;
}

.h-250 {
	height: 250px !important;
}

.h-270 {
	height: 270px !important;
}

.h-300 {
	height: 300px !important;
}

.h-400 {
	height: 400px !important;
}

.border-default {
	border: 1px solid var(--primary-border-color);
}

.border-default.border-light {
	border-color: rgba(255, 255, 255, 0.12);
}

.border {
	border: 1px solid var(--primary-border-color) !important;
}
.border-top {
	border-top: 1px solid var(--primary-border-color) !important;
}
.border-right {
	border-right: 1px solid var(--primary-border-color) !important;
}
.border-bottom {
	border-bottom: 1px solid var(--primary-border-color) !important;
}
.border-left {
	border-left: 1px solid var(--primary-border-color) !important;
}

.border-0 {
	border: 0 !important;
}

.border-top-0 {
	border-top: 0 !important;
}

.border-right-0 {
	border-right: 0 !important;
}

.border-bottom-0 {
	border-bottom: 0 !important;
}

.border-left-0 {
	border-left: 0 !important;
}

.rounded {
	border-radius: var(--radius);
}

.rounded-top {
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.rounded-right {
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.rounded-bottom {
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.rounded-left {
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

.rounded-circle {
	border-radius: 50%;
}

.rounded-0 {
	border-radius: 0 !important;
}

.rounded-top-0 {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.rounded-right-0 {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.rounded-bottom-0 {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.rounded-left-0 {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.box-shadow {
	box-shadow: 0 7px 22px -5px var(--secondary-box-shadow);
}

.img-thumbnail {
	padding: 5px !important;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	background-color: var(--primary-background-color);
}

.img-error {
	border: 2px solid var(--danger-color) !important;
}

.img-thumbnail.rounded-circle {
	border-radius: 50%;
}

.img-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

[class^='col-'] .img-cover {
	left: 15px;
	width: calc(100% - 30px);
}

.opacity-100 {
	opacity: 1 !important;
}

.opacity-90 {
	opacity: 0.9 !important;
}

.opacity-80 {
	opacity: 0.8 !important;
}

.opacity-75 {
	opacity: 0.75 !important;
}

.opacity-60 {
	opacity: 0.6 !important;
}

.opacity-50 {
	opacity: 0.5 !important;
}

.opacity-25 {
	opacity: 0.25 !important;
}

.opacity-15 {
	opacity: 0.15 !important;
}

.clearfix::after {
	display: block;
	clear: both;
	content: '';
}

.text-muted {
	color: var(--text-muted-color) !important;
}

.text-muted a {
	text-decoration: none;
}

.text-muted-less {
	color: var(--text-muted-color-less) !important;
}

.text-muted-less a {
	text-decoration: none;
}

.text-primary { /* missing, added back by Jordan. Looks like above was it but deleted */
	color: var(--link-color) !important;
}

.text-info {
	color: var(--info-color) !important;
}

.text-warning {
	color: var(--warning-color) !important;
}

.text-success {
	color: var(--success-text-color) !important;
}

.text-danger {
	color: var(--danger-color) !important;
}

.text-myuser {
	/* color: #2a2a2a !important; */
}

.text-razorPay {
	/* color: #4F6283 !important; */
}

.text-stripe {
	/* color: #635bff !important; */
}

.text-afterpay {
	/* color: #B2FCE5 !important; */
}

.text-nowPayments {
	/* color: #4774AA !important; */
}

.text-gocardless {
	/* color: #865ADD !important; */
}

.text-skrill {
	/* color: #872166 !important; */
}

.text-airtm {
	/* color: #1783fa !important; */
}

.text-coinpayment {
	/* color: #1c60dd !important; */
}

.text-coingate {
	/* color: #5022ED !important; */
}

.text-coinbaseCommerce {
	/* color: #0953FF !important; */
}

.text-payop {
	/* color: #015EA9 !important; */
}

.text-wise {
	/* color: #00d9ff !important; */
}

.text-flutterwave {
	/* color: #DB8D0A !important; */
}

.text-discord-color {
	color: #5865F2 !important;
}

.text-authorize {
	/* color: var(--secondary-color) !important; */
}

.text-skype-color {
	color: #00aff0 !important;
}

.text-whatsapp-color {
	color: #075e54 !important;
}

.text-clear {
	color: var(--text-clear) !important;
}

.card-danger {
	color: var(--danger-color) !important;
}

.card-danger ul {
	padding-left: 0;
	margin-left: 0;
}

.card-danger ul li {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

.icon-payment-card {
	position: absolute;
	bottom: 30px;
	left: 50%;
}

.payment-card {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	margin-top: 8px;
	margin-bottom: 8px;
	transition: all 0.4s;
	border: 1px solid transparent;
	border-radius: var(--radius-sm); /* 22px; */
	background-color: var(--payment-card-background);
	background-image: none;
	color: var(--secondary-color);
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 72px;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: middle;
	text-decoration: none;
	text-align: center;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.text-gray-dark {
	color: var(--third-color) !important;
}

.text-body {
	color: var(--secondary-color) !important;
}

.text-light,
.text-white {
	color: var(--text-white-color) !important;
}

.text-highlighted {
	background-color: #fff8b0 !important;
}

.text-decoration-none {
	text-decoration: none !important;
}

.text-crossed {
	text-decoration: line-through !important;
}

.text-shadow {
	text-shadow: 0 1px rgba(0, 0, 0, 0.5) !important;
}

.text-black {
	font-weight: 900 !important;
}

.text-bold {
	font-weight: bold !important;
}

.text-medium {
	font-weight: 500 !important;
}

.text-normal {
	font-weight: normal !important;
}

.text-thin {
	font-weight: 300 !important;
}

.text-uppercase {
	letter-spacing: 0.04em;
}

.text-secondary {
	color: var(--secondary-color) !important;
}

.edtFontSize50 {
	font-size: 50%;
}

.edtFontSize85 {
	font-size: 85%;
}

.edtFontSize90 {
	font-size: 90%;
}

.edtFontSize100 {
	font-size: 100%;
}

.edtFontSize120 {
	font-size: 17px;
}

.edtFontSize140 {
	font-size: 20px;
}

.edtFontSize150 {
	font-size: 21px;
}

.edtFontSize160 {
	font-size: 23px;
}

.edtFontSize200 {
	font-size: 28px;
}

.bg-darker {
	background-color: var(--background-darker-color) !important;
}

.bg-primary {
	background-color: var(--primary-color) !important;
}

.bg-success {
	background-color: var(--success-color) !important;
}

.bg-info {
	background-color: var(--info-color) !important;
}

.bg-warning {
	background-color: var(--warning-color) !important;
}

.bg-danger {
	background-color: var(--danger-color) !important;
}

.bg-stripe {
	background-color: #635bff !important;
}

.bg-payOp {
	background-color: #015EA9 !important;
}

.bg-wise {
	background-color: #00d9ff !important;
}

.bg-flutterwave {
	background-color: #DB8D0A !important;
}

.bg-razorPay {
	background-color: #4F6283 !important;
}

.bg-coingate {
	background-color: #5022ED !important;
}

.bg-nowPayments {
	background-color: #5022ED !important;
}
.bg-cryptoSC {
	background-color: #0953FF !important;
}
.bg-coinbaseCommerce {
	background-color: #0953FF !important;
}
.bg-gocardless {
	background-color: #865ADD !important;
}

.bg-coinPayment {
	background-color: #1c60dd !important;
}

.bg-authorize {
	background-color: #353ff9 !important;
}

.bg-skrill {
	background-color: #872166 !important;
}

.bg-airtm {
	background-color: #1783fa !important;
}

.bg-inverse {
	background-color: var(--third-color) !important;
}

.bg-faded,
.bg-secondary {
	background-color: var(--faded-background-color) !important;
}

.bg-profile-tab {
	background-color: var(--secondary-background-color) !important;
}

.bg-dark {
	background-color: var(--third-color) !important;
}

.bg-white {
	background-color: var(--primary-background-color) !important;
}

.bg-no-repeat {
	background-repeat: no-repeat;
}

.bg-repeat {
	background-repeat: repeat;
}

.bg-center {
	background-position: center;
}

.bg-cover {
	background-size: cover;
}

.border-primary {
	border-color: var(--primary-color) !important;
}

.border-success {
	border-color: var(--success-color) !important;
}

.border-info {
	border-color: var(--info-color) !important;
}

.border-warning {
	border-color: var(--warning-color) !important;
}

.border-danger {
	border-color: var(--danger-color) !important;
}

.border-secondary {
	border-color: var(--misc-secondary) !important;
}

.border-dark {
	border-color: var(--third-color) !important;
}

.border-stripe {
	border-color: #635bff !important;
}

.border-afterpay {
	border-color: #B2FCE5 !important;
}

.border-myuser {
	border-color: #2a2a2a !important;
}

.border-razorPay {
	border-color: #4F6283 !important;
}

.border-skrill {
	border-color: #872166 !important;
}

.border-payOp {
	border-color: #015EA9 !important;
}

.border-wise {
	border-color: #00d9ff !important;
}

.border-flutterwave {
	border-color: #015EA9 !important;
}

.border-coingate {
	border-color: #5022ED !important;
}

.border-coinpayment {
	border-color: #1c60dd !important;
}

.border-nowPayments {
	border-color: #4774AA !important;
}
.border-coinbaseCommerce {
	border-color: #0953FF !important;
}
.border-gocardless {
	border-color: #865ADD !important;
}

.border-authorize {
	border-color: #353ff9 !important;
}

.border-airtm {
	border-color: #1783fa !important;
}

/**
 * Spacing scale.
 *
 * The utilities below were a 24px scale written out literally - 1x 24px,
 * 2x 48px, 3x 72px - with a separate @media (max-width: 768px) block after
 * each one halving it. That was 40 utilities and 40 media blocks, about 62%
 * of every 768px query in this file, and it meant the site's density could
 * only be changed 80 edits at a time.
 *
 * It is one unit now. The scale is 16px-based, which is the "too much
 * spacing" fix: every 1x is 24px -> 16px, 2x 48 -> 32, 3x 72 -> 48, and so on
 * through 10x, applied consistently across the ~800 uses in the views.
 *
 * The phone step is the same single override. Marketing surfaces that should
 * still breathe - /brand, /promotional, the homepage hero - set their own
 * padding rather than leaning on this scale.
 *
 * 2026-09-20 JD
 */
:root {
	/* Corner radii. admincp's, so a card here and a card there agree.
	   Pills and circles keep their own values; these are for boxes. */
	--radius: 6px;
	--radius-sm: 4px;

	/* Text face. --font-display is the brand typeface from
	   docs/brand-style-guide.md and is what the generated brand imagery is set
	   in; --font-body is what the interface is set in, and they are the same
	   thing until a layer says otherwise. */
	--font-display: 'Maven Pro', Helvetica, Arial, sans-serif;
	--font-body: var(--font-display);

	--space-unit: 16px;
	--space-1x: var(--space-unit);
	--space-2x: calc(var(--space-unit) * 2);
	--space-3x: calc(var(--space-unit) * 3);
	--space-4x: calc(var(--space-unit) * 4);
	--space-5x: calc(var(--space-unit) * 5);
	--space-6x: calc(var(--space-unit) * 6);
	--space-7x: calc(var(--space-unit) * 7);
	--space-8x: calc(var(--space-unit) * 8);
	--space-9x: calc(var(--space-unit) * 9);
	--space-10x: calc(var(--space-unit) * 10);
}

/*
 * 768px, not 767.98px. The forty utility blocks this replaced were each
 * @media (max-width: 768px), so a viewport of exactly 768 - an iPad held in
 * portrait - has always taken the phone step, and so does the other twenty-nine
 * 768px queries in this file. Bootstrap 4's 767.98 is the boundary PR 3
 * normalises the whole sheet onto; moving only this one ahead of it would put
 * a single width where the spacing and the layout disagree.
 */
@media (max-width: 768px) {
	:root {
		--space-unit: 12px;
	}
}
.padding-top-card {
	padding-top: 10px !important;
}

.padding-top-1x {
	padding-top: var(--space-1x) !important;
}

.z-index-0x {
	z-index: 0 !important;
}

.margin-top--100x {
	margin-top: -200px !important;
}

.margin-top--20x {
	margin-top: -20px !important;
}

.padding-top-2x {
	padding-top: var(--space-2x) !important;
}

.padding-top-3x {
	padding-top: var(--space-3x) !important;
}

.padding-top-4x {
	padding-top: var(--space-4x) !important;
}

.padding-top-5x {
	padding-top: var(--space-5x) !important;
}

.padding-top-6x {
	padding-top: var(--space-6x) !important;
}

.padding-top-7x {
	padding-top: var(--space-7x) !important;
}

.padding-top-8x {
	padding-top: var(--space-8x) !important;
}

.padding-top-9x {
	padding-top: var(--space-9x) !important;
}

.padding-top-10x {
	padding-top: var(--space-10x) !important;
}

.padding-top-190x {
	padding-top: 190px !important;
}

.padding-bottom-1x {
	padding-bottom: var(--space-1x) !important;
}

.padding-bottom-2x {
	padding-bottom: var(--space-2x) !important;
}

.padding-bottom-3x {
	padding-bottom: var(--space-3x) !important;
}

.padding-bottom-4x {
	padding-bottom: var(--space-4x) !important;
}

.padding-bottom-5x {
	padding-bottom: var(--space-5x) !important;
}

.padding-bottom-6x {
	padding-bottom: var(--space-6x) !important;
}

.padding-bottom-7x {
	padding-bottom: var(--space-7x) !important;
}

.padding-bottom-8x {
	padding-bottom: var(--space-8x) !important;
}

.padding-bottom-9x {
	padding-bottom: var(--space-9x) !important;
}

.padding-35 {
	padding: .35rem !important;
}

.padding-bottom-10x {
	padding-bottom: var(--space-10x) !important;
}

.margin-top-1x {
	margin-top: var(--space-1x) !important;
}

.margin-top-2x {
	margin-top: var(--space-2x) !important;
}

.margin-top-3x {
	margin-top: var(--space-3x) !important;
}

.margin-top-4x {
	margin-top: var(--space-4x) !important;
}

.margin-top-5x {
	margin-top: var(--space-5x) !important;
}

.margin-top-6x {
	margin-top: var(--space-6x) !important;
}

.margin-top-7x {
	margin-top: var(--space-7x) !important;
}

.margin-top-8x {
	margin-top: var(--space-8x) !important;
}

.margin-top-9x {
	margin-top: var(--space-9x) !important;
}

.margin-top-10x {
	margin-top: var(--space-10x) !important;
}

.margin-bottom-1x {
	margin-bottom: var(--space-1x) !important;
}

.margin-bottom-2x {
	margin-bottom: var(--space-2x) !important;
}

.margin-bottom-3x {
	margin-bottom: var(--space-3x) !important;
}

.margin-bottom-4x {
	margin-bottom: var(--space-4x) !important;
}

.margin-bottom-5x {
	margin-bottom: var(--space-5x) !important;
}

.margin-bottom-6x {
	margin-bottom: var(--space-6x) !important;
}

.margin-bottom-7x {
	margin-bottom: var(--space-7x) !important;
}

.margin-bottom-8x {
	margin-bottom: var(--space-8x) !important;
}

.margin-bottom-9x {
	margin-bottom: var(--space-9x) !important;
}

.margin-bottom-10x {
	margin-bottom: var(--space-10x) !important;
}

.ml-switch {
	margin-left: 30px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mr-30 {
	margin-right: 30px !important;
}

.ml-30 {
	margin-left: 30px !important;
}

.ml-100 {
	margin-left: 100px !important;
}

.margin-top-none {
	margin-top: 0 !important;
}

.margin-bottom-none {
	margin-bottom: 0 !important;
}

.padding-top-none {
	padding-top: 0 !important;
}

.padding-none {
	padding: 0 !important;
}

.padding-bottom-none {
	padding-bottom: 0 !important;
}

.margin-right-none {
	margin-right: 0 !important;
}

.margin-left-none {
	margin-left: 0 !important;
}

.padding-right-none {
	padding-right: 0 !important;
}

.padding-left-none {
	padding-left: 0 !important;
}

.hidden-xs-up {
	display: none !important;
}

@media (max-width: 575px) {
	.hidden-xs-down {
		display: none !important;
	}
}

@media (min-width: 576px) {
	.hidden-sm-up {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.hidden-sm-down {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.hidden-md-up {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.hidden-md-down {
		display: none !important;
	}
}

@media (min-width: 992px) {
	.hidden-lg-up {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	.hidden-lg-down {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	.hidden-xl-up {
		display: none !important;
	}
}

.hidden-xl-down {
	display: none !important;
}

.d-inline-block img {
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	margin: 0;
	color: var(--third-color);
	font-family: inherit;
	font-style: normal;
	font-weight: 500;
	text-transform: none;
	word-wrap:break-word;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small {
	display: block;
	padding-top: 3px;
	color: var(--text-muted-color);
}

h1,
.h1 {
	margin-bottom: 24px;
	font-size: 36px;
	line-height: 1.15;
}

@media (max-width: 768px) {
	h1,
	.h1 {
		font-size: 31px;
	}
}

h2,
.h2 {
	margin-bottom: 16px;
	font-size: 30px;
	line-height: 1.2;
}

@media (max-width: 768px) {
	h2,
	.h2 {
		font-size: 28px;
	}
}

h3,
.h3 {
	margin-bottom: 12px;
	font-size: 24px;
	line-height: 1.25;
}

@media (max-width: 768px) {
	h3,
	.h3 {
		font-size: 22px;
	}
}

h4,
.h4 {
	margin-bottom: 8px;
	font-size: 20px;
	line-height: 1.3;
}

h5,
.h5 {
	margin-bottom: 8px;
	font-size: 18px;
	line-height: 1.35;
}

h6,
.h6 {
	margin-bottom: 6px;
	font-size: 16px;
	line-height: 1.4;
}

.display-1,
.display-2,
.display-3,
.display-4 {
	font-weight: normal;
	line-height: 1.15;
}

.display-1 {
	font-size: 72px;
}

@media (max-width: 576px) {
	.display-1 {
		font-size: 57px;
	}
}

.display-2 {
	font-size: 60px;
}

@media (max-width: 576px) {
	.display-2 {
		font-size: 48px;
	}
}

.display-3 {
	font-size: 50px;
}

@media (max-width: 576px) {
	.display-3 {
		font-size: 42px;
	}
}

.display-4 {
	font-size: 40px;
}

@media (max-width: 576px) {
	.display-4 {
		font-size: 36px;
	}
}

p {
	margin: 0 0 16px;
	word-break: break-all;
	-ms-word-break: break-all;
	/* Non standard for WebKit */
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.comment-text-format {
	margin: 0 0 16px;
	word-break: break-all;
	-ms-word-break: break-all;
	/* Non standard for WebKit */
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.lead {
	font-size: 18px;
}

.text-lg {
	font-size: 16px;
}

.text-sm {
	font-size: 13px;
}

.text-xs {
	font-size: 12px;
}

ul,
ol {
	margin-top: 0;
	margin-bottom: 16px;
	padding-left: 18px;
	line-height: 1.8;
}

ul ul,
ul ol,
ol ul,
ol ol {
	margin-bottom: 0;
}

.list-unstyled {
	padding-left: 0;
	list-style: none;
}

.list-inline {
	padding-left: 0;
	list-style: none;
}

.list-inline > li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

.list-icon {
	padding: 0;
	list-style: none;
}

.list-icon > li {
	position: relative;
	margin-bottom: 6px;
	padding-left: 22px;
}

.list-icon > li > i {
	display: block;
	position: absolute;
	left: 0;
	line-height: inherit;
}

.list-icon.text-lg > li {
	padding-left: 25px;
}

.list-icon.text-sm > li {
	padding-left: 18px;
}

.list-icon.lead > li {
	padding-left: 26px;
}

dl {
	margin-top: 0;
	margin-bottom: 16px;
}

dt,
dd {
	line-height: 1.5;
}

dt {
	padding-top: 9px;
	border-top: 1px solid var(--primary-border-color);
	color: var(--third-color);
	font-weight: 500;
}

dt:first-child {
	padding-top: 0;
	border: 0;
}

dd {
	margin-top: 3px;
	margin-bottom: 15px;
	margin-left: 0;
}

blockquote {
	position: relative;
	margin: 0;
	margin-bottom: 16px;
	padding: 24px 0 24px 36px;
	border-top: 1px solid var(--primary-border-color);
	border-bottom: 1px solid var(--primary-border-color);
	color: var(--secondary-color);
	font-size: 18px;
}

blockquote::before {
	position: absolute;
	top: 24px;
	left: -17px;
	color: var(--text-muted-color);
	font-size: 82px;
	font-style: italic;
	line-height: 0.8;
	content: '"';
}

blockquote cite {
	display: block;
	margin-top: 9px;
	color: var(--text-muted-color);
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
}

blockquote cite::before {
	display: inline-block;
	margin-top: -2px;
	margin-right: 8px;
	color: var(--text-muted-color);
	font-family: feather;
	font-size: 0.95em;
	content: '\e074';
	vertical-align: middle;
}

blockquote p {
	margin-bottom: 0;
}

blockquote.blockquote-reverse {
	padding-right: 36px;
	padding-left: 0;
	border-left: 0;
	text-align: right;
}

blockquote.blockquote-reverse::before {
	right: 10px;
	left: auto;
}

kbd {
	background-color: var(--secondary-color);
}

#wbbmodal .div-modal-text,
#wbbmodal .wbbm-inp-row input,
.bootstrap-tagsinput,
.bootstrap-tagsinput input,
.form-control {
	padding: 0 18px 3px;
	border: 1px solid var(--form-border-color);
	border-radius: var(--radius-sm); /* 22px; changed on 11/13/2018 */
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-family: var(--font-body);
	font-size: 14px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.form-control:not(textarea) {
	height: 44px;
}

.form-control::-moz-placeholder {
	color: var(--text-muted-color);
	opacity: 1;
}

.form-control:-ms-input-placeholder {
	color: var(--text-muted-color);
}

.form-control::-webkit-input-placeholder {
	color: var(--text-muted-color);
}

#wbbmodal .div-modal-text:focus,
#wbbmodal .wbbm-inp-row input:focus,
.bootstrap-tagsinput input:focus,
.bootstrap-tagsinput:focus,
.form-control:focus {
	border-color: var(--primary-color);
	outline: none;
	color: var(--secondary-color);
	box-shadow: none !important;
	background-color: var(--primary-background-color);
}

.form-control[type='color'] {
	padding-bottom: 0 !important;
}

.form-control:disabled,
.form-control[readonly] {
	background-color: var(--form-disabled-background);
	cursor: not-allowed;
}

textarea.form-control {
	padding-top: 12px;
	padding-bottom: 12px;
}

select.form-control {
	padding-right: 38px;
	background-position: center right 17px;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI5Mi4zNjIgMjkyLjM2MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjkyLjM2MiAyOTIuMzYyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTI4Ni45MzUsNjkuMzc3Yy0zLjYxNC0zLjYxNy03Ljg5OC01LjQyNC0xMi44NDgtNS40MjRIMTguMjc0Yy00Ljk1MiwwLTkuMjMzLDEuODA3LTEyLjg1LDUuNDI0ICAgQzEuODA3LDcyLjk5OCwwLDc3LjI3OSwwLDgyLjIyOGMwLDQuOTQ4LDEuODA3LDkuMjI5LDUuNDI0LDEyLjg0N2wxMjcuOTA3LDEyNy45MDdjMy42MjEsMy42MTcsNy45MDIsNS40MjgsMTIuODUsNS40MjggICBzOS4yMzMtMS44MTEsMTIuODQ3LTUuNDI4TDI4Ni45MzUsOTUuMDc0YzMuNjEzLTMuNjE3LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0N0MyOTIuMzYyLDc3LjI3OSwyOTAuNTQ4LDcyLjk5OCwyODYuOTM1LDY5LjM3N3oiIGZpbGw9IiM2MDY5NzUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
	background-repeat: no-repeat;
	background-size: 9px 9px;
}

select.form-control:not([size]):not([multiple]) {
	height: 44px;
}

.form-group {
	margin-bottom: 20px !important;
}

.form-group label {
	margin-bottom: 8px;
	padding-left: 3px;
	/* font-size: 13px;
	font-weight: 500; */
	cursor: pointer;
}

.form-group label.col-form-label {
	-ms-flex-item-align: center !important;
	align-self: center !important;
	margin-bottom: 0;
}

.form-control-lg {
	border-radius: 27px;
	font-size: 16px;
}

.form-control-lg:not(textarea) {
	height: 54px;
}

.form-control-lg.form-control-rounded {
	border-radius: var(--radius);
}

.form-control-lg.form-control-square {
	border-radius: 0;
}

select.form-control.form-control-lg:not([size]):not([multiple]) {
	height: 54px;
}

.form-control-sm {
	padding-bottom: 2px;
	border-radius: 18px;
}

.form-control-sm-radius-4 {
	border-radius: var(--radius-sm);
}

.form-control-sm:not(textarea) {
	height: 36px;
}

.form-control-sm.form-control-rounded {
	border-radius: var(--radius-sm);
}

.form-control-sm.form-control-square {
	border-radius: 0;
}

select.form-control.form-control-sm:not([size]):not([multiple]) {
	height: 36px;
}

.form-text {
	padding-left: 18px;
}

.custom-control {
	margin-top: 8px !important;
	margin-bottom: 6px !important;
	padding-left: 1.5rem !important;
	cursor: pointer;
}

.custom-control:focus {
	outline: 0;
	cursor: pointer;
}

.custom-control .custom-control-label {
	margin: 0;
	padding-left: 0;
	font-size: 14px !important;
	padding-left: 0;
	font-weight: 500;
	text-transform: none;
	cursor: pointer;
	display: table-cell;
	vertical-align: middle;
}

.custom-control .custom-control-label::before {
	box-shadow: none !important;
}

.custom-control .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--success-color);
}

.custom-control .custom-control-input:disabled ~ .custom-control-label {
	color: var(--text-muted-color);
}

.custom-control-inline {
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.custom-file,
.custom-file-input {
	height: 44px;
	border-radius: 22px;
	cursor: pointer;
}

.custom-file:focus ~ .custom-file-label,
.custom-file-input:focus ~ .custom-file-label {
	box-shadow: none;
}

.custom-file-label {
	font-weight: normal !important;
}

.custom-file-label,
.custom-file-label::after {
	height: 44px;
	border-radius: 22px;
	border-color: var(--form-border-color);
	color: var(--secondary-color);
	line-height: 2.2;
}

.custom-file-label::after {
	height: 42px;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	background-color: var(--misc-secondary);
	font-weight: 500 !important;
}

.form-control-loading {
    background-color: var(--primary-background-color);
    background-image: url('https://www.seoclerk.com/assets/img/loading.gif');
    background-size: 30px 30px;
    background-position:right center;
	background-repeat: no-repeat;
	margin-right: 3px;
}

.form-control-rounded {
	border-radius: var(--radius-sm);
}

.form-control-rounded .custom-file-control,
.form-control-rounded .custom-file-control::before {
	border-radius: var(--radius-sm);
}

.form-control-square {
	border-radius: 0;
}

.form-control-square .custom-file-control,
.form-control-square .custom-file-control::before {
	border-radius: 0;
}

.input-group {
	display: block;
	position: relative;
}

.input-group .input-group-addon {
	display: inline-block;
	position: absolute;
	top: 22px;
	margin-top: -3px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.input-group .input-group-btn {
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: -3px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.input-group .input-group-addon {
	left: 15px;
	transition: color 0.3s;
	background-color: transparent !important;
	color: var(--text-muted-color);
}

.has-danger .input-group-addon,
.input-group-addon-error{
	/*top: 24px !important;*/
}

.input-group-addon .far, .input-group-addon .fas, .input-group-addon .fal, .input-group-addon .fab {
    vertical-align: middle;
}

.input-group .form-control {
	padding-left: 35px;
}

.input-group .form-control:focus ~ .input-group-addon {
	color: var(--link-color);
}

.input-group .input-group-btn {
	right: 10px;
	margin-top: -2px;
}

.input-group .input-group-btn button {
	transition: color 0.3s;
	border: 0;
	background: 0;
	color: var(--secondary-color);
	font-size: 1.2em;
	cursor: pointer;
}

.input-group .input-group-btn button:hover {
	color: var(--link-color);
}

.input-group .input-group-btn .btn {
	margin: 0;
	margin-right: 3px;
	padding: 0;
}

.input-group .input-group-btn ~ .form-control {
	padding-right: 35px;
	padding-left: 18px;
}

.input-group-text {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding: .375rem .75rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--secondary-color);
	text-align: center;
	white-space: nowrap;
	background-color: var(--primary-background-color);
	border: 1px solid var(--form-border-color);
	border-radius: .25rem;
}

.has-success label,
.has-success .form-control-feedback,
.has-success .custom-control,
.has-success .input-group .input-group-addon,
.has-success.input-group .input-group-addon,
.has-success .form-control:focus ~ .input-group-addon {
	color: var(--success-text-color);
}

.has-success .form-control,
.has-success .form-control:focus {
	border-color: var(--success-color);
}

.has-success .form-control-success {
	padding-right: 42px;
	background-position: center right 15px;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDYuODM0IDQwNi44MzQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNi44MzQgNDA2LjgzNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8cG9seWdvbiBwb2ludHM9IjM4NS42MjEsNjIuNTA3IDE0Ni4yMjUsMzAxLjkwMSAyMS4yMTMsMTc2Ljg5MSAwLDE5OC4xMDQgMTQ2LjIyNSwzNDQuMzI3IDQwNi44MzQsODMuNzIgIiBmaWxsPSIjNDNkOWEzIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
	background-repeat: no-repeat;
}

.has-warning label,
.has-warning .form-control-feedback,
.has-warning .custom-control,
.has-warning .input-group .input-group-addon,
.has-warning.input-group .input-group-addon,
.has-warning .form-control:focus ~ .input-group-addon {
	color: var(--warning-color);
}

.has-warning .form-control,
.has-warning .form-control:focus {
	border-color: var(--warning-color);
}

.has-warning .form-control-warning {
	padding-right: 42px;
	background-position: center right 15px;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTUwNS40MDMsNDA2LjM5NEwyOTUuMzg5LDU4LjEwMmMtOC4yNzQtMTMuNzIxLTIzLjM2Ny0yMi4yNDUtMzkuMzktMjIuMjQ1Yy0xNi4wMjMsMC0zMS4xMTYsOC41MjQtMzkuMzkxLDIyLjI0NiAgICBMNi41OTUsNDA2LjM5NGMtOC41NTEsMTQuMTgyLTguODA0LDMxLjk1LTAuNjYxLDQ2LjM3YzguMTQ1LDE0LjQyLDIzLjQ5MSwyMy4zNzgsNDAuMDUxLDIzLjM3OGg0MjAuMDI4ICAgIGMxNi41NiwwLDMxLjkwNy04Ljk1OCw0MC4wNTItMjMuMzc5QzUxNC4yMDgsNDM4LjM0Miw1MTMuOTU1LDQyMC41NzQsNTA1LjQwMyw0MDYuMzk0eiBNNDc3LjAzOSw0MzYuMzcyICAgIGMtMi4yNDIsMy45NjktNi40NjcsNi40MzYtMTEuMDI2LDYuNDM2SDQ1Ljk4NWMtNC41NTksMC04Ljc4NC0yLjQ2Ni0xMS4wMjUtNi40MzVjLTIuMjQyLTMuOTctMi4xNzItOC44NjIsMC4xODEtMTIuNzY1ICAgIEwyNDUuMTU2LDc1LjMxNmMyLjI3OC0zLjc3Nyw2LjQzMy02LjEyNCwxMC44NDQtNi4xMjRjNC40MSwwLDguNTY1LDIuMzQ3LDEwLjg0Myw2LjEyNGwyMTAuMDEzLDM0OC4yOTIgICAgQzQ3OS4yMTEsNDI3LjUxMiw0NzkuMjgxLDQzMi40MDMsNDc3LjAzOSw0MzYuMzcyeiIgZmlsbD0iI2ZmYjc0ZiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTI1Ni4xNTQsMTczLjAwNWMtMTIuNjgsMC0yMi41NzYsNi44MDQtMjIuNTc2LDE4Ljg2NmMwLDM2LjgwMiw0LjMyOSw4OS42ODYsNC4zMjksMTI2LjQ4OSAgICBjMC4wMDEsOS41ODcsOC4zNTIsMTMuNjA3LDE4LjI0OCwxMy42MDdjNy40MjIsMCwxNy45MzctNC4wMiwxNy45MzctMTMuNjA3YzAtMzYuODAyLDQuMzI5LTg5LjY4Niw0LjMyOS0xMjYuNDg5ICAgIEMyNzguNDIxLDE3OS44MSwyNjguMjE2LDE3My4wMDUsMjU2LjE1NCwxNzMuMDA1eiIgZmlsbD0iI2ZmYjc0ZiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTI1Ni40NjUsMzUzLjMwNmMtMTMuNjA3LDAtMjMuODE0LDEwLjgyNC0yMy44MTQsMjMuODE0YzAsMTIuNjgsMTAuMjA2LDIzLjgxNCwyMy44MTQsMjMuODE0ICAgIGMxMi42OCwwLDIzLjUwNS0xMS4xMzQsMjMuNTA1LTIzLjgxNEMyNzkuOTcsMzY0LjEzLDI2OS4xNDQsMzUzLjMwNiwyNTYuNDY1LDM1My4zMDZ6IiBmaWxsPSIjZmZiNzRmIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
	background-repeat: no-repeat;
}

.has-danger label,
.has-danger .form-control-feedback,
.has-danger .custom-control,
.has-danger .input-group .input-group-addon,
.has-danger.input-group .input-group-addon,
.has-danger .form-control:focus ~ .input-group-addon {
	color: var(--danger-color);
}

.has-danger .form-control,
.has-danger .bootstrap-tagsinput,
.has-danger .btn-upload,
.has-danger .wysibb,
.has-danger .form-control:focus,
.service-img-form .has-danger {
	border-color: var(--danger-color);
}

.has-danger .form-control-danger {
	padding-right: 42px;
	background-position: center right 15px;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0MS4xNzEgMjQxLjE3MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQxLjE3MSAyNDEuMTcxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggaWQ9IkNsb3NlIiBkPSJNMTM4LjEzOCwxMjAuNzU0bDk5LjExOC05OC41NzZjNC43NTItNC43MDQsNC43NTItMTIuMzE5LDAtMTcuMDExYy00Ljc0LTQuNzA0LTEyLjQzOS00LjcwNC0xNy4xNzksMCAgIGwtOTkuMDMzLDk4LjQ5MkwyMS4wOTUsMy42OTljLTQuNzQtNC43NTItMTIuNDM5LTQuNzUyLTE3LjE3OSwwYy00Ljc0LDQuNzY0LTQuNzQsMTIuNDc1LDAsMTcuMjI3bDk5Ljg3Niw5OS44ODhMMy41NTUsMjIwLjQ5NyAgIGMtNC43NCw0LjcwNC00Ljc0LDEyLjMxOSwwLDE3LjAxMWM0Ljc0LDQuNzA0LDEyLjQzOSw0LjcwNCwxNy4xNzksMGwxMDAuMTUyLTk5LjU5OWw5OS41NTEsOTkuNTYzICAgYzQuNzQsNC43NTIsMTIuNDM5LDQuNzUyLDE3LjE3OSwwYzQuNzQtNC43NjQsNC43NC0xMi40NzUsMC0xNy4yMjdMMTM4LjEzOCwxMjAuNzU0eiIgZmlsbD0iI2ZmNTI1MiIvPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
	background-size: 13px 13px;
	background-repeat: no-repeat;
}

.has-danger .has-trash {
	padding-right: 0;
	background: none !important;
	background-image: none;
}

.form-control-feedback {
	padding-top: 2px;
	padding-left: 18px;
}

.authenticator-answer-wrapper .form-control-feedback
{
	padding-left: 10px;
}

.input-light.form-control,
.input-light .form-control {
	border-color: rgba(255, 255, 255, 0.17);
	background-color: transparent;
	color: var(--primary-background-color);
}

.input-light.form-control::-moz-placeholder,
.input-light .form-control::-moz-placeholder {
	color: rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.input-light.form-control:-ms-input-placeholder,
.input-light .form-control:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.input-light.form-control::-webkit-input-placeholder,
.input-light .form-control::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.input-light.form-control:focus,
.input-light .form-control:focus {
	border-color: var(--primary-color);
	color: var(--primary-background-color);
}

.input-light.input-group .input-group-addon {
	color: rgba(255, 255, 255, 0.5);
}

.subscribe-form .input-group {
	width: calc(100% - 88px);
	float: left;
}

.subscribe-form .btn {
	margin: 0;
	float: right;
}

.subscribe-form .btn > i {
	margin-top: -6px;
	font-size: 1.5em;
}

.subscribe-form .form-text {
	padding-top: 12px;
}

.coupon-form .form-control {
	display: inline-block;
	width: 100%;
	max-width: 235px;
	margin-right: 12px;
}

.coupon-form .btn {
	margin-right: 0;
}

@media (max-width: 768px) {
	.coupon-form .form-control {
		display: block;
		max-width: 100%;
	}
}

.login-box {
	display: block;
	width: 100%;
	padding: 30px 24px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
}

.card-wrapper {
	margin: 30px 0;
}

@media (max-width: 576px) {
	.jp-card-container {
		width: 285px !important;
	}
	.jp-card {
		min-width: 250px !important;
	}
}

@media screen and (max-width: 768px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

table {
	overflow-x: auto;
	/* display: block; */
}

.table-break {
	overflow-x: auto;
	display: block;
}

.modal-table {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

.table thead th,
.table td,
.table th {
	border-color: var(--primary-border-color);
}

.table.table-inverse {
	background-color: var(--third-color);
	color: var(--primary-background-color);
}

.table.table-inverse thead th,
.table.table-inverse td,
.table.table-inverse th {
	border-color: rgba(255, 255, 255, 0.12);
}

.thead-inverse th {
	background-color: var(--third-color);
	color: var(--primary-background-color);
}

.thead-default th {
	background-color: var(--misc-secondary);
	color: var(--secondary-color);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--misc-secondary);
}

.table-striped.table-inverse tbody tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.08);
}

.table-hover tbody tr:hover {
	background-color: var(--table-grey-background);
}

.table-hover.table-inverse tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.08);
}

.table-active,
.table-active td,
.table-active th {
	background-color: var(--table-active-background);
}

.table-success,
.table-success td,
.table-success th {
	background-color: var(--table-success-background);
}

.table-info,
.table-info td,
.table-info th {
	background-color: var(--table-info-background);
}

.table-hover .table-info:hover>td,
.table-hover .table-info:hover>th,
.table-hover .table-info:hover{
	background-color: var(--misc-secondary) !important;
}

.table-warning tr {
	border: 2px solid var(--table-warning-background) !important;
}

.table-warning,
.table-warning td,
.table-warning th {
	background-color: transparent;
	/* border: 0px solid var(--table-warning-background); */
}

.table-hover .table-warning:hover>td,
.table-hover .table-warning:hover>th,
.table-hover .table-warning:hover{
	background-color: var(--table-grey-background) !important;
}

.table-danger,
.table-danger td,
.table-danger th {
	background-color: var(--table-danger-background);
}

.table-grey,
.table-grey td,
.table-grey th {
	background-color: var(--table-grey-background);
}

.link-faded {
	text-decoration: none;
	display: inline-block;
	position: relative;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: all 0.4s;
}

.link-faded > span:hover {
	color: #35a37b;
	display: inline-block;
	position: relative;
}

.btn-link-primary-disabled {
	color: var(--link-color);
	display: inline-block;
	position: relative;
	height: 44px;
	margin-top: 8px;
	margin-right: 12px;
	margin-bottom: 8px;
	padding: 0 22px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: all 0.4s;
	border: 1px solid transparent;
	border-radius: var(--radius-sm); /* 22px; */
	background-color: transparent;
	background-image: none;
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 42px;
	white-space: nowrap;
	vertical-align: middle;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.btn-success-disabled {
	color: var(--text-on-brand);
	background-color: var(--success-color);
	display: inline-block;
	position: relative;
	height: 44px;
	margin-top: 8px;
	margin-right: 12px;
	margin-bottom: 8px;
	padding: 0 22px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: all 0.4s;
	border: 1px solid transparent;
	border-radius: var(--radius-sm); /* 22px; */
	background-image: none;
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 42px;
	white-space: nowrap;
	vertical-align: middle;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.wbb-button {
	border: none;
}

.btn {
	display: inline-block;
	position: relative;
	height: 44px;
	margin-top: 8px;
	margin-right: 12px;
	margin-bottom: 8px;
	padding: 0 22px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: all 0.4s;
	border: 1px solid transparent;
	border-radius: var(--radius-sm); /* 22px; */
	background-color: transparent;
	background-image: none;
	color: var(--secondary-color);
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 42px;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: middle;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.btn:hover,
.btn:focus .btn:active,
.btn.active {
	outline: none;
	background-image: none;
	text-decoration: none;
	box-shadow: none;
}

.btn:hover {
	color: var(--secondary-color);
}

/* fixed button issue with primary */
.btn-primary:hover {
	color: var(--primary-text-color);
}

.btn > i {
	display: inline-block;
	margin-top: -2px;
	vertical-align: middle;
}

.btn[disabled],
.btn.disabled {
	cursor: not-allowed;
	opacity: 0.55;
	pointer-events: none;
}

button:focus {
	outline: none;
}

.btn-lg {
	height: 54px;
	border-radius: 27px;
	line-height: 52px;
}

.btn-sm {
	height: 36px;
	padding: 0 18px;
	border-radius: var(--radius-sm); /*18px; Changed on 11/13/2018 */
	font-size: 12px;
	line-height: 34px;
}

.btn-rounded {
	border-radius: var(--radius-sm);
}

.btn-rounded.btn-lg {
	border-radius: var(--radius);
}

.btn-rounded.btn-sm {
	border-radius: var(--radius-sm);
}

.btn-square {
	border-radius: 0;
}

.btn-secondary {
	background-color: var(--misc-secondary);
	border-color: var(--primary-border-color);
}

.btn-secondary:hover {
	background-color: var(--misc-secondary);
}

.btn-primary,
.btn-balance,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-stripe,
.wbb-button{
	color: var(--primary-text-color);
}

.btn-afterpay:hover,
.btn-afterpay:active,
.btn-afterpay:focus,
.btn-afterpay {
	color: rgb(41, 40, 40);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn-info:hover,
.wbb-button,
.btn-info:active,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
	color: var(--text-on-brand);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
	color: var(--text-on-danger);
}

.btn-stripe:hover,
.btn-stripe:active,
.btn-stripe:focus,
.btn-balance:hover,
.btn-balance:active,
.btn-balance:focus,
.btn-payoneer:focus {
	color: var(--text-white-color);
}

.btn-primary,
.btn-primary {
	background-color: var(--primary-color);
}

.btn-balance,
.btn-balance {
	background-color: var(--balance-btn-color);
}

.btn-balance:hover,
.btn-balance:hover {
	background-color: var(--balance-btn-hover-color);
}

.btn-primary:hover,
.btn-primary:hover {
	background-color: var(--primary-hover-color);
}

.btn-success {
	background-color: var(--success-color);
}

.btn-success:hover {
	background-color: var(--success-color-hover);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-stripe {
	background-color: #635bff;
	color: var(--text-white-color);
}

.btn-stripe:hover {
	background-color: #635bff;
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-afterpay {
	background-color: #B2FCE5;
}

.btn-afterpay:hover {
	background-color: #B2FCE5;
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-secondary:hover {
	background-color: var(--misc-secondary);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;

}

.btn-payoneer {
	color: var(--text-white-color);
	background-color: #ff4800;
}

.btn-payoneer:hover {
	color: var(--text-white-color);
	background-color: #ff662a;
}

.btn-myuser {
	color: var(--text-white-color);
	background-color: #000000;
}

.btn-myuser:hover {
	color: var(--text-white-color);
	background-color: #2a2a2a;
}

.btn-authorize {
	color: var(--text-white-color);
	background-color: #353ff9;
}

.btn-authorize:hover {
	color: var(--text-white-color);
	background-color: #122D98;
}

.btn-airtm {
	color: var(--text-white-color);
	background-color: #1783fa;
}

.btn-airtm:hover {
	color: var(--text-white-color);
	background-color: #0f5bac;
}

.btn-secondary-wise {
	color: var(--dark-text-color);
	background-color: #cddde7;
}

.btn-secondary-wise:hover {
	color: var(--dark-text-color);
	background-color: #e2e2e2;
}

.btn-lemon {
	color: #ffc233;
	background-color: #7047eb;
}

.btn-lemon:hover {
	color: #ffc233;
	background-color: #7047eb;
}

.btn-wise {
	color: var(--primary-background-color);
	background-color: #00d9ff;
}

.btn-wise:hover {
	color: var(--primary-background-color);
	background-color: #00c0e2;
}

.btn-gocardless {
	color: var(--text-white-color);
	background-color: #865ADD;
}

.btn-gocardless:hover {
	color: var(--text-white-color);
	background-color: #865ADD;
}

.previous-bank-div {
	width: 100%;
}

.btn-coingate {
	color: var(--text-white-color);
	background-color: #5022ED;
}

.btn-coingate:hover {
	color: var(--text-white-color);
	background-color: #5022ED;
}

.btn-perfectMoney {
	color: var(--text-white-color);
	background-color: #AF1113;
}

.btn-perfectMoney:hover {
	color: var(--text-white-color);
	background-color: #AF1113;
}

.btn-razorPay {
	color: var(--text-white-color);
	background-color: #072654;

}

.btn-razorPay:hover {
	color: var(--text-white-color);
	background-color: #072654;
}

.btn-nowPayments {
	color: var(--text-white-color);
	background-color: #4774AA;
}

.btn-nowPayments:hover {
	color: var(--text-white-color);
	background-color: #4774AA;
}

.btn-nowPayments-fiat {
	color: var(--text-white-color);
	background-color: #635bff;
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-nowPayments-fiat:hover {
	color: var(--text-white-color);
	background-color: #635bff;
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-coinbaseCommerce {
	color: var(--text-white-color);
	background-color: #0953FF;
}

.btn-coinbaseCommerce:hover {
	color: var(--text-white-color);
	background-color: #0953FF;
}

.btn-cryptoSC {
	color: var(--text-white-color);
	background-color: #0953FF;
}

.btn-cryptoSC:hover {
	color: var(--text-white-color);
	background-color: #0953FF;
}

.btn-payOp {
	color: var(--text-white-color);
	background-color: #015EA9;
}

.btn-payOp:hover {
	color: var(--text-white-color);
	background-color: #015EA9;
}

.btn-flutterwave {
	color: var(--text-white-color);
	background-color: #DB8D0A;
}

.btn-flutterwave:hover {
	color: var(--text-white-color);
	background-color: #DB8D0A;
}

.btn-coinbase {
	color: var(--text-white-color);
	background-color: #0953FF;
}

.btn-coinbase:hover {
	color: var(--text-white-color);
	background-color: #0953FF;
}

.paypal-btn {
	background-color: #0070b9;
}

.skrill-btn {
	color: var(--text-white-color);
	background-color: #872166;
}

.skrill-btn:hover {
	color: var(--text-white-color);
	background-color: #502455;
}

.coinpayment-btn {
	color: var(--text-white-color);
	background-color: #1c60dd;
}

.coinpayment-btn:hover {
	color: var(--text-white-color);
	background-color: #2571ff;
}

#ionpay_pvcc_submit-group {
	font-size: 85% !important;
}

.btn-double-text {
	color: #ffc233;
	background-color: #7047eb;
	border-radius: var(--radius-sm);
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	height: 50px;
	line-height: 1;
	padding-left: 1rem;
	padding-right: 2rem;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow 150ms cubic-bezier(0.61, 1, 0.88, 1);
	white-space: nowrap;
}

.btn-double-text > .center-text-btn {
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.07em;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: middle;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
	position: absolute;
	left: 1em;
	top: 5px;
}

.btn-double-text > span {
	display: block;
	padding-left: 50px !important;
	right: -.2em;
	font-weight: 500;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.5;
}

.btn-double-text:first-of-type {
	color: #ffc233;
	font-size: .75rem;
	line-height: 1.5;
	right: -.2em;
}

.btn-double-text > span:last-of-type {
	display: block;
	padding-right: 1.5rem;
	right: -.2em;
	font-weight: 500;
	font-family: var(--font-body);
	font-size: 14px;
	color: rgb(243, 243, 243);
}

.wbb-button,
.btn-info {
	background-color: var(--info-color);
}

.btn-profile {
	width: 136px;
}

.wbb-button:hover,
.btn-info:hover {
	background-color: var(--primary-hover-color);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-warning {
	background-color: var(--warning-color);
}

.btn-warning:hover {
	background-color: var(--warning-hover);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-danger {
	background-color: var(--danger-color);
}

.btn-danger:hover {
	background-color: var(--danger-color-hover);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-white {
	background-color: var(--btn-white-background);
}

.btn-white:hover {
	background-color: var(--btn-white-background-hover);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-outline-secondary {
	border-color: var(--primary-border-color);
}

.btn-outline-secondary:hover {
	background-color: var(--misc-secondary);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-outline-primary {
	border-color: var(--primary-color);
	background-color: transparent;
	color: var(--link-color);
}
.btn-outline-primary:hover {
	background-color: var(--primary-color);
	color: var(--text-on-brand);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-outline-success {
	border-color: var(--success-color);
	background-color: transparent;
	color: var(--success-text-color);
}

.btn-outline-success:hover {
	background-color: var(--success-color);
	color: var(--text-on-brand);
}

.btn-outline-info {
	border-color: var(--info-color);
	background-color: transparent;
	color: var(--info-color);
}

.btn-outline-info:hover {
	background-color: var(--info-color);
	color: var(--text-on-brand);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-outline-warning {
	border-color: var(--warning-color);
	background-color: transparent;
	color: var(--warning-color);
}

.btn-outline-warning:hover {
	background-color: var(--warning-color);
	color: var(--text-on-brand);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-outline-danger {
	border-color: var(--danger-color);
	background-color: transparent;
	color: var(--danger-color);
}

.btn-outline-danger:hover {
	background-color: var(--danger-color);
	color: var(--primary-background-color);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-outline-white {
	border-color: var(--primary-background-color);
	background-color: transparent;
	color: var(--primary-background-color);
}

.btn-outline-white:hover {
	background-color: var(--primary-background-color);
	color: var(--primary-background-color);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.btn-outline-white:hover {
	color: var(--secondary-color);
}

.btn-link-secondary {
	color: var(--secondary-color);
}

.btn-link-secondary:hover {
	color: #495059;
}

.btn-link-primary {
	color: var(--link-color);
}

.btn-link-primary:hover {
	color: var(--primary-hover);
}

.btn-link-success {
	color: var(--success-text-color);
}

.btn-link-faded-success {
	color: var(--success-text-color);
}

.btn-link-success:hover {
	color: #27c28a;
}

.btn-link-info {
	color: var(--info-color);
}

.btn-link-info:hover {
	color: #23b7e3;
}

.btn-link-warning {
	color: var(--warning-color);
}

.btn-link-warning:hover {
	color: #ffa21c;
}

.btn-link-danger {
	color: var(--danger-color);
}

.btn-link-danger:hover {
	color: #ff1f1f;
}

.btn-link-white {
	color: var(--primary-background-color);
}

.btn-link-white:hover {
	color: #e6e5e5;
}

.btn-primary,
.btn-success,
.btn-info,
.wbb-button,
.btn-warning {
	color: var(--text-on-brand);
}

/**
 * Primary and info buttons: Deep Sky with a white label (Jordan, 2026-09-23), in place of the
 * Sky fill with a Navy label that 87f961ea4 gave them. The Navy label was there because white on
 * Sky is 2.65:1; on #0A7ABB white is 4.7:1, which clears WCAG AA, so the brand's blue-and-white
 * button is back without that failure. Hover and press go a shade darker.
 *
 * After every other .btn-primary / .btn-info / outline-hover colour rule in this file, so it wins
 * without !important; the :not(:disabled) pair matches Bootstrap's own press rule, which is more
 * specific than a plain :active. Only buttons change - the Sky pills, tags and alerts keep their
 * Navy label. Under the modern layer ui-admincp.css hovers .btn-outline-primary with a light tint
 * instead, and wins there by loading later; that is deliberate and is not black-on-blue either.
 */
.btn-primary,
.btn-info {
	background-color: var(--btn-primary-color);
	color: var(--text-on-btn-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.btn-outline-primary:hover,
.btn-outline-info:hover {
	background-color: var(--btn-primary-hover-color);
	color: var(--text-on-btn-primary);
}

.btn-danger {
	color: var(--text-on-danger);
}

.btn-link-secondary > i,
.btn-link-primary > i,
.btn-link-success > i,
.btn-link-info > i,
.btn-link-warning > i,
.btn-link-danger > i,
.btn-link-white > i {
	margin-top: -4px;
}

.btn-play {
	box-sizing: border-box;
	transition: 100ms all ease;
	cursor: pointer;

	position: absolute;
	display: block;
	z-index: 1000;
	top: 38%;
	right: 42%;

	display: block;
	position: absolute;
	width: 54px;
	height: 54px;
	transition: opacity 0.3s;
	border-radius: 50%;
	background-color: #616161;
	color: #d1d1d1;
	line-height: 40px;
	text-align: center;
	opacity: 0.7;

	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.btn-play::before {
	font-family: feather;
	font-size: 19px;
	content: '\e052';
}

.btn-play.pause::before {
	font-family: feather;
	font-size: 19px;
	content: '\e053';
}

.btn-play.pause {
	opacity: 0.3;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.btn-play:hover {
	background-color: #404040;
}


/* .hover-icons .btn-play {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
} */

/* .hover-icons:hover .btn-play {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
} */

.btn-group {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	position: relative;
	margin-top: 8px;
	margin-right: 12px;
	margin-bottom: 8px;
	vertical-align: middle;
}

.btn-group .btn {
	position: relative;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	margin: 0;
}

.btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle),
.confirmation-buttons .btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle)
{
	margin-right: -1px;
	padding-right: 12px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle).btn-secondary,
.btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle).btn-primary,
.btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle).btn-outline-secondary {
	border-right:0;
}

.btn-group > .dropdown-toggle:not(:first-child),
.confirmation-buttons .btn-group > .btn:not(:first-child)
{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.confirmation-buttons .btn-group > .btn:not(:first-child) {
	margin-left: 0!important;
}

.btn + .dropdown-toggle-split {
	padding-right: 15px;
	padding-left: 8px;
}

.text-center .btn,
.text-center .btn-group {
	margin-right: 6px;
	margin-left: 6px;
}

.text-right .btn,
.text-right .btn-group {
	margin-right: 0;
	margin-left: 12px;
}

.btn-block {
	display: block;
	width: 100%;
	margin-top: 12px;
	margin-right: 0 !important;
	margin-bottom: 12px;
	margin-left: 0 !important;
	padding-right: 15px !important;
	padding-left: 15px !important;
}

.scroll-to-top-btn {
	display: block;
	position: fixed;
	right: 16px;
	bottom: -88px;
	width: 44px;
	height: 44px;
	transition: bottom 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s,
		background-color 0.3s, border-color 0.3s;
	border-radius: 50%;
	background-color: var(--primary-box-shadow-30);
	color: var(--primary-background-color);
	font-size: 18px;
	line-height: 39px;
	opacity: 0;
	z-index: 2000;
	text-align: center;
	text-decoration: none;
}

.scroll-to-top-btn:hover {
	background-color: var(--primary-box-shadow-80);
	color: var(--primary-background-color);
}

.scroll-to-top-btn:focus,
.scroll-to-top-btn:active {
	color: var(--primary-background-color);
}

.scroll-to-top-btn.visible {
	bottom: 14px;
	opacity: 1;
}

.compare-service-card.visible {
	bottom: 14px;
	opacity: 1;
}

.compare-service-card {
	right: 16px;
	bottom: -140px;
	width: 460px;
	/* right: 16px, so never wider than the screen less that and a matching 16px on the left. */
	max-width: calc(100vw - 32px);
	transition: bottom 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s,
		background-color 0.3s, border-color 0.3s;
	font-size: 18px;
	line-height: 39px;
	z-index: 2000;
	text-align: center;
	text-decoration: none;
	display: block;
	position: fixed;
	padding: 18px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	background-color: var(--secondary-background-color);
}

@media (max-width: 768px) {
	.scroll-to-top-btn {
		bottom: -72px;
		width: 36px;
		height: 36px;
		line-height: 31px;
	}
}

.market-button {
	display: inline-block;
	margin-right: 14px;
	margin-bottom: 14px;
	padding: 5px 14px 5px 45px;
	transition: background-color 0.3s;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	background-position: center left 12px;
	background-color: var(--primary-background-color);
	background-size: 24px 24px;
	background-repeat: no-repeat;
	text-decoration: none;
}

.market-button:hover {
	background-color: var(--misc-secondary);
}

.market-button .mb-subtitle {
	display: block;
	margin-bottom: -4px;
	color: var(--text-muted-color);
	font-size: 12px;
}

.market-button .mb-title {
	display: block;
	color: var(--secondary-color);
	font-size: 18px;
}

.market-button.apple-button {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDUgMzA1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDUgMzA1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnIGlkPSJYTUxJRF8yMjhfIj4KCTxwYXRoIGlkPSJYTUxJRF8yMjlfIiBkPSJNNDAuNzM4LDExMi4xMTljLTI1Ljc4NSw0NC43NDUtOS4zOTMsMTEyLjY0OCwxOS4xMjEsMTUzLjgyQzc0LjA5MiwyODYuNTIzLDg4LjUwMiwzMDUsMTA4LjIzOSwzMDUgICBjMC4zNzIsMCwwLjc0NS0wLjAwNywxLjEyNy0wLjAyMmM5LjI3My0wLjM3LDE1Ljk3NC0zLjIyNSwyMi40NTMtNS45ODRjNy4yNzQtMy4xLDE0Ljc5Ny02LjMwNSwyNi41OTctNi4zMDUgICBjMTEuMjI2LDAsMTguMzksMy4xMDEsMjUuMzE4LDYuMDk5YzYuODI4LDIuOTU0LDEzLjg2MSw2LjAxLDI0LjI1Myw1LjgxNWMyMi4yMzItMC40MTQsMzUuODgyLTIwLjM1Miw0Ny45MjUtMzcuOTQxICAgYzEyLjU2Ny0xOC4zNjUsMTguODcxLTM2LjE5NiwyMC45OTgtNDMuMDFsMC4wODYtMC4yNzFjMC40MDUtMS4yMTEtMC4xNjctMi41MzMtMS4zMjgtMy4wNjZjLTAuMDMyLTAuMDE1LTAuMTUtMC4wNjQtMC4xODMtMC4wNzggICBjLTMuOTE1LTEuNjAxLTM4LjI1Ny0xNi44MzYtMzguNjE4LTU4LjM2Yy0wLjMzNS0zMy43MzYsMjUuNzYzLTUxLjYwMSwzMC45OTctNTQuODM5bDAuMjQ0LTAuMTUyICAgYzAuNTY3LTAuMzY1LDAuOTYyLTAuOTQ0LDEuMDk2LTEuNjA2YzAuMTM0LTAuNjYxLTAuMDA2LTEuMzQ5LTAuMzg2LTEuOTA1Yy0xOC4wMTQtMjYuMzYyLTQ1LjYyNC0zMC4zMzUtNTYuNzQtMzAuODEzICAgYy0xLjYxMy0wLjE2MS0zLjI3OC0wLjI0Mi00Ljk1LTAuMjQyYy0xMy4wNTYsMC0yNS41NjMsNC45MzEtMzUuNjExLDguODkzYy02LjkzNiwyLjczNS0xMi45MjcsNS4wOTctMTcuMDU5LDUuMDk3ICAgYy00LjY0MywwLTEwLjY2OC0yLjM5MS0xNy42NDUtNS4xNTljLTkuMzMtMy43MDMtMTkuOTA1LTcuODk5LTMxLjEtNy44OTljLTAuMjY3LDAtMC41MywwLjAwMy0wLjc4OSwwLjAwOCAgIEM3OC44OTQsNzMuNjQzLDU0LjI5OCw4OC41MzUsNDAuNzM4LDExMi4xMTl6IiBmaWxsPSIjMmUyZTJlIi8+Cgk8cGF0aCBpZD0iWE1MSURfMjMwXyIgZD0iTTIxMi4xMDEsMC4wMDJjLTE1Ljc2MywwLjY0Mi0zNC42NzIsMTAuMzQ1LTQ1Ljk3NCwyMy41ODNjLTkuNjA1LDExLjEyNy0xOC45ODgsMjkuNjc5LTE2LjUxNiw0OC4zNzkgICBjMC4xNTUsMS4xNywxLjEwNywyLjA3MywyLjI4NCwyLjE2NGMxLjA2NCwwLjA4MywyLjE1LDAuMTI1LDMuMjMyLDAuMTI2YzE1LjQxMywwLDMyLjA0LTguNTI3LDQzLjM5NS0yMi4yNTcgICBjMTEuOTUxLTE0LjQ5OCwxNy45OTQtMzMuMTA0LDE2LjE2Ni00OS43N0MyMTQuNTQ0LDAuOTIxLDIxMy4zOTUtMC4wNDksMjEyLjEwMSwwLjAwMnoiIGZpbGw9IiMyZTJlMmUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}

.market-button.google-button {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPHBvbHlnb24gc3R5bGU9ImZpbGw6IzVDREFERDsiIHBvaW50cz0iMjkuNTMsMCAyOS41MywyNTEuNTA5IDI5LjUzLDUxMiAyOTkuMDA0LDI1MS41MDkgIi8+Cjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNCREVDQzQ7IiBwb2ludHM9IjM2OS4wNjcsMTgwLjU0NyAyNjIuMTc1LDExOS40NjcgMjkuNTMsMCAyOTkuMDA0LDI1MS41MDkgIi8+Cjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNEQzY4QTE7IiBwb2ludHM9IjI5LjUzLDUxMiAyOS41Myw1MTIgMjYyLjE3NSwzODMuNTUxIDM2OS4wNjcsMzIyLjQ3IDI5OS4wMDQsMjUxLjUwOSAiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGQ0E5NjsiIGQ9Ik0zNjkuMDY3LDE4MC41NDdsLTcwLjA2Myw3MC45NjFsNzAuMDYzLDcwLjk2MWwxMDguNjg4LTYyLjg3N2M2LjI4OC0zLjU5Myw2LjI4OC0xMS42NzcsMC0xNS4yNyAgTDM2OS4wNjcsMTgwLjU0N3oiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.market-button.windows-button {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDQ4MCA0ODAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4MCA0ODA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMC4xNzYsMjI0TDAuMDAxLDY3Ljk2M2wxOTItMjYuMDcyVjIyNEgwLjE3NnogTTIyNC4wMDEsMzcuMjQxTDQ3OS45MzcsMHYyMjRIMjI0LjAwMVYzNy4yNDF6IE00NzkuOTk5LDI1NmwtMC4wNjIsMjI0ICAgbC0yNTUuOTM2LTM2LjAwOFYyNTZINDc5Ljk5OXogTTE5Mi4wMDEsNDM5LjkxOEwwLjE1Nyw0MTMuNjIxTDAuMTQ3LDI1NmgxOTEuODU0VjQzOS45MTh6IiBmaWxsPSIjMDBiY2YyIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.market-button.blackberry-button {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDMuMzIyIDUwMy4zMjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMy4zMjIgNTAzLjMyMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0xMTYuMjg1LDYwLjc0Nkg0NS45OTNsLTIwLjgyNyw5NS40NThoNzMuNzYzYzU3LjI3NSwwLDczLjc2My0yOC42MzcsNzMuNzYzLTUzLjgwMyAgICBDMTczLjU1OSw4NC4xNzYsMTYyLjI3OCw2MC43NDYsMTE2LjI4NSw2MC43NDZ6IiBmaWxsPSIjMmUyZTJlIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjM4LjY0NCwzNDcuMTE5aC03MS4xNTlsLTE5Ljk1OSw5NS40NThoNzMuNzYzYzU3LjI3NSwwLDczLjc2My0yOC42MzcsNzMuNzYzLTUzLjgwMyAgICBDMjk1LjA1MSwzNzAuNTQ5LDI4NC42MzcsMzQ3LjExOSwyMzguNjQ0LDM0Ny4xMTl6IiBmaWxsPSIjMmUyZTJlIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNOTEuMTE5LDE5OS41OTNIMTkuOTU5TDAsMjk1LjA1MWg3My43NjNjNTcuMjc1LDAsNzMuNzYzLTI4LjYzNyw3My43NjMtNTMuODAzICAgIEMxNDcuNTI1LDIyMy4wMjQsMTM3LjExMiwxOTkuNTkzLDkxLjExOSwxOTkuNTkzeiIgZmlsbD0iIzJlMmUyZSIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQyMC44ODEsMjk1LjA1MWgtNzEuMTU5bC0xOS45NTksODYuNzhoNzMuNzYzYzU3LjI3NSwwLDczLjc2My0yNC4yOTgsNzMuNzYzLTQ5LjQ2NCAgICBDNDc3LjI4OCwzMTQuMTQyLDQ2Ni44NzUsMjk1LjA1MSw0MjAuODgxLDI5NS4wNTF6IiBmaWxsPSIjMmUyZTJlIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDQ2LjkxNSwxNDcuNTI1aC03MS4xNTlsLTE5Ljk1OSw4Ni43OGg3My43NjNjNTcuMjc1LDAsNzMuNzYzLTI0LjI5OCw3My43NjMtNDkuNDY0ICAgIEM1MDMuMzIyLDE2Ni42MTcsNDkyLjkwOCwxNDcuNTI1LDQ0Ni45MTUsMTQ3LjUyNXoiIGZpbGw9IiMyZTJlMmUiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNjUuNTQ2LDE5OS41OTNoLTcxLjE1OWwtMTkuOTU5LDk1LjQ1OGg3My43NjNjNTcuMjc1LDAsNzMuNzYzLTI4LjYzNyw3My43NjMtNTMuODAzICAgIEMzMjIuODIsMjIzLjAyNCwzMTEuNTM5LDE5OS41OTMsMjY1LjU0NiwxOTkuNTkzeiIgZmlsbD0iIzJlMmUyZSIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTI5MS41OCw2MC43NDZIMjIwLjQybC0xOS45NTksOTUuNDU4aDczLjc2M2M1Ny4yNzUsMCw3My43NjMtMjguNjM3LDczLjc2My01My44MDMgICAgQzM0Ny45ODYsODQuMTc2LDMzNy41NzMsNjAuNzQ2LDI5MS41OCw2MC43NDZ6IiBmaWxsPSIjMmUyZTJlIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.market-button.amazon-button {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0idXVpZDo1RDIwODkyNDkzQkZEQjExOTE0QTg1OTBEMzE1MDhDOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGQUJGNjhGNDRGNkMxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGQUJGNjhGMzRGNkMxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QUM1ODJFMkIxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QUM1ODJFM0IxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgNXCVIAAAc7SURBVHja5FwJbFRVFH0tQimgUCiubKJCWWSwKIooVhG3aESkETRqBEEEEURExBXiVhElkRiIEFwTQEHciQiIMQhFkUGFihErIJjWUgg0LFXqPf4z9jvMTOe/v9ebnEw78+//b85/y7n33T8ZNTU1yo5FIhEdtxMEXQRtBGcLOglO5ftoUKagSrBLUCLYKCgVbBEcNJ8oGo0qN+045Z2dJCgU9BdcJ2igcY4DgsWC9wTvetHoTA+u0ZlfCL3hJcFATXJgzQS3C5YIKgWT3G58hotDDMNlvmCQy9+hAj1ThtqqMPWgywXlHpADayVYKTfq0bAQdJ9guaCR8tamCUlPBZ2gcYIXlH82RUgaFlSCCgQzlf82T0hqFzSCGgreUsGxqUEj6BkKvaBYofSi5kERihCAE2z4rxYs4qp3WNBY0F0wVtBC85xNKUrnBoGgUdBTGn4IH24UbEvwGQh7TDBdMNGGQA3EELtGw2eh4Jwk5JjtAcFDmu0633clLeMcweYOi24IOLta9CnR6BF/CE4Whf2Xnz3oKg2fJzR8PtTwyaXK9nWIHbF4PFIYn2hcZ6Vm+5r4SpB039c5T5RwqO0VHE3hgoByv8alSm3oM99XsecJxSUaUXyOoKPgTOIMEjdK8xrVYSbIbIeIMsGPDp43Q/lkmap+W0bQepDTliU43oam+bM+EIT5qZcyEve5nL9aCtpzHmtq49zVYSOoraCv4AZBHgPc3P/7EOsgGCoYzt4SKnOTIAyZGYJrwzzLu0XQi4Lx9WEZdJqg0wVfqmAlzwJDUB/BmvompJwiqLND5FQwXtuujJ3TA1TlmM8eDytB2P9absMfaVbshryN+DeJuDsrzATNor7RMezV3xvkWMwWQZFIpIe8jNB0v0kZuedAm91gdaSm31iL5NSEjiDuO92h4bqGwzIUMaOdHnSe0ktpztfwaRwqgqT3QAheqHnNZZoyIlQ9COT00/BDzrpcwy9fs51ZfhEEXdJRw+8AdY9XBPm2q4HyklM0/HRqE7H3f4mN2NAXgrKUXgUZihGsVl0Mt7GKDfKLIAyTIxp+2cqoj7bSeybb+H5DZEE5zQ+CsEn4u6avlb2x2cpI2tuxiX4Q9JOquzIjmaHOuXcax6H0ZaADK/V46UW9vCYIavgLG43+XHBRks9QLP6B3TsfZ6/pOmqXv8hdGSAvn9psOIiap4zcD5bkQsINQ+agKBqN/uZVjFOsjAdLsm2co4DwwhAgY5/sfk9iMbkT++TlVRUus7zTajfdMcvjL7hEWa9oi9llclMf9JQgueBmVVv64rY9p4yiz9kW/VC01U33YRcnqjtQQLXWZXIeFsTu/tOC9Wn6oR6yPW+kljmViOrDRp/rMDEourpeHVujiJ60VaXOEy0TYq72K9RIZEigLXbwfNBZJ6rEBZw7Uugo2CtOkOM0QbDBmAyVveqybwUDGMFXpDjuG5W4bmiKkDPSqS/0r1A8PEfvAZneL+ck+wgJNVR1RIhEuRkEvHhUcyNJhWwosdgElNEsYGA7pnh05ZI0fJARRSF7W8Z6hxhbQtv9+k+64q7tx8xBmEca2gwh4odIMYce5qaWJKkBswEQbfvZIPSGn1XqCtnEanV0ZYncpNHKKLz6uI7DeyojGwr0IlHZvFEoPF/H6AAPDO+J70GLKPNxwC10qC92heBJ3qx0rEh60OT4HnQrleZQ3s1xIVTKiexKVbtRUEEgL76XqyBSx/GZx6aJlnl0+5s5JlH0hO2Z25i/2RpigjaRgHKKxkTWjcMrRsy+VKsYHvp/n39fyskTlWKtQ0rQbmVU6lelOOYHwXem/0vrWuYhzpaa/p9A7TFJ+biJ55BlUZVv4nSiuHDE6icxOa9KRwehEnVu3ImLBDuV8Qhm85AR04TtRvufVcZvhtzNz9qYRshazsFpCUVUbsTX5eARI8zwSDwh2ZUfcGIwv8yh3kK7c00TdkxQ9jcdP9Oqkp7GSbsqwUw/jBpmC4dh94CQAvF4D1X59ySieZwK72wSpbGNhF9UXDFYusHqR7woqsAuSNKgGSaBCE21QfCVh6REGHoMZqiSzCBdzFUpOaYg+0470fxOqu0pglQ/AdFP1e7bl/IubuHEt07pPS8Wbw05tLHK9mDYkFeHTzV7/Jtx76PCLYOB9kqnYrF8jtWLLX4xSPrNXHrLuWJgQizj31Uc9kd58zBf4PmzTozsWzPm6mJxkXiHwndX3PvNTOFOh/8sdQliMSu2gb1kiDJ+qyPdffpGjId6ejTs0HORrF+R5PNWXKnHuJXuWMCAD3tY21Rw7GtGAV1TkKPYc0aoFNvoTuWDZlBoTWLj/LIV7NUISt8IYsJsOhtXoIxk/l4PSNlMZYzJGj/stNDJk7tVHLmaeIQTeV9qqTxOjHasjAm2pZwL17nJvtvVo8gQfEZMZXKqHXVHPlekFswgNFK1JXPwO8gVZg/lwnpKht1ejtm/BRgAKCaVSdcawG4AAAAASUVORK5CYII=);
}

.market-button.mb-light-skin {
	border-color: rgba(255, 255, 255, 0.12);
	background-color: transparent;
}

.market-button.mb-light-skin .mb-subtitle,
.market-button.mb-light-skin .mb-title {
	color: var(--primary-background-color);
}

.market-button.mb-light-skin .mb-subtitle {
	opacity: 0.55;
}

.market-button.mb-light-skin:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

.market-button.mb-light-skin.apple-button {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDUgMzA1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDUgMzA1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnIGlkPSJYTUxJRF8yMjhfIj4KCTxwYXRoIGlkPSJYTUxJRF8yMjlfIiBkPSJNNDAuNzM4LDExMi4xMTljLTI1Ljc4NSw0NC43NDUtOS4zOTMsMTEyLjY0OCwxOS4xMjEsMTUzLjgyQzc0LjA5MiwyODYuNTIzLDg4LjUwMiwzMDUsMTA4LjIzOSwzMDUgICBjMC4zNzIsMCwwLjc0NS0wLjAwNywxLjEyNy0wLjAyMmM5LjI3My0wLjM3LDE1Ljk3NC0zLjIyNSwyMi40NTMtNS45ODRjNy4yNzQtMy4xLDE0Ljc5Ny02LjMwNSwyNi41OTctNi4zMDUgICBjMTEuMjI2LDAsMTguMzksMy4xMDEsMjUuMzE4LDYuMDk5YzYuODI4LDIuOTU0LDEzLjg2MSw2LjAxLDI0LjI1Myw1LjgxNWMyMi4yMzItMC40MTQsMzUuODgyLTIwLjM1Miw0Ny45MjUtMzcuOTQxICAgYzEyLjU2Ny0xOC4zNjUsMTguODcxLTM2LjE5NiwyMC45OTgtNDMuMDFsMC4wODYtMC4yNzFjMC40MDUtMS4yMTEtMC4xNjctMi41MzMtMS4zMjgtMy4wNjZjLTAuMDMyLTAuMDE1LTAuMTUtMC4wNjQtMC4xODMtMC4wNzggICBjLTMuOTE1LTEuNjAxLTM4LjI1Ny0xNi44MzYtMzguNjE4LTU4LjM2Yy0wLjMzNS0zMy43MzYsMjUuNzYzLTUxLjYwMSwzMC45OTctNTQuODM5bDAuMjQ0LTAuMTUyICAgYzAuNTY3LTAuMzY1LDAuOTYyLTAuOTQ0LDEuMDk2LTEuNjA2YzAuMTM0LTAuNjYxLTAuMDA2LTEuMzQ5LTAuMzg2LTEuOTA1Yy0xOC4wMTQtMjYuMzYyLTQ1LjYyNC0zMC4zMzUtNTYuNzQtMzAuODEzICAgYy0xLjYxMy0wLjE2MS0zLjI3OC0wLjI0Mi00Ljk1LTAuMjQyYy0xMy4wNTYsMC0yNS41NjMsNC45MzEtMzUuNjExLDguODkzYy02LjkzNiwyLjczNS0xMi45MjcsNS4wOTctMTcuMDU5LDUuMDk3ICAgYy00LjY0MywwLTEwLjY2OC0yLjM5MS0xNy42NDUtNS4xNTljLTkuMzMtMy43MDMtMTkuOTA1LTcuODk5LTMxLjEtNy44OTljLTAuMjY3LDAtMC41MywwLjAwMy0wLjc4OSwwLjAwOCAgIEM3OC44OTQsNzMuNjQzLDU0LjI5OCw4OC41MzUsNDAuNzM4LDExMi4xMTl6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBpZD0iWE1MSURfMjMwXyIgZD0iTTIxMi4xMDEsMC4wMDJjLTE1Ljc2MywwLjY0Mi0zNC42NzIsMTAuMzQ1LTQ1Ljk3NCwyMy41ODNjLTkuNjA1LDExLjEyNy0xOC45ODgsMjkuNjc5LTE2LjUxNiw0OC4zNzkgICBjMC4xNTUsMS4xNywxLjEwNywyLjA3MywyLjI4NCwyLjE2NGMxLjA2NCwwLjA4MywyLjE1LDAuMTI1LDMuMjMyLDAuMTI2YzE1LjQxMywwLDMyLjA0LTguNTI3LDQzLjM5NS0yMi4yNTcgICBjMTEuOTUxLTE0LjQ5OCwxNy45OTQtMzMuMTA0LDE2LjE2Ni00OS43N0MyMTQuNTQ0LDAuOTIxLDIxMy4zOTUtMC4wNDksMjEyLjEwMSwwLjAwMnoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}

.market-button.mb-light-skin.blackberry-button {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDMuMzIyIDUwMy4zMjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMy4zMjIgNTAzLjMyMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0xMTYuMjg1LDYwLjc0Nkg0NS45OTNsLTIwLjgyNyw5NS40NThoNzMuNzYzYzU3LjI3NSwwLDczLjc2My0yOC42MzcsNzMuNzYzLTUzLjgwMyAgICBDMTczLjU1OSw4NC4xNzYsMTYyLjI3OCw2MC43NDYsMTE2LjI4NSw2MC43NDZ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjM4LjY0NCwzNDcuMTE5aC03MS4xNTlsLTE5Ljk1OSw5NS40NThoNzMuNzYzYzU3LjI3NSwwLDczLjc2My0yOC42MzcsNzMuNzYzLTUzLjgwMyAgICBDMjk1LjA1MSwzNzAuNTQ5LDI4NC42MzcsMzQ3LjExOSwyMzguNjQ0LDM0Ny4xMTl6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNOTEuMTE5LDE5OS41OTNIMTkuOTU5TDAsMjk1LjA1MWg3My43NjNjNTcuMjc1LDAsNzMuNzYzLTI4LjYzNyw3My43NjMtNTMuODAzICAgIEMxNDcuNTI1LDIyMy4wMjQsMTM3LjExMiwxOTkuNTkzLDkxLjExOSwxOTkuNTkzeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQyMC44ODEsMjk1LjA1MWgtNzEuMTU5bC0xOS45NTksODYuNzhoNzMuNzYzYzU3LjI3NSwwLDczLjc2My0yNC4yOTgsNzMuNzYzLTQ5LjQ2NCAgICBDNDc3LjI4OCwzMTQuMTQyLDQ2Ni44NzUsMjk1LjA1MSw0MjAuODgxLDI5NS4wNTF6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDQ2LjkxNSwxNDcuNTI1aC03MS4xNTlsLTE5Ljk1OSw4Ni43OGg3My43NjNjNTcuMjc1LDAsNzMuNzYzLTI0LjI5OCw3My43NjMtNDkuNDY0ICAgIEM1MDMuMzIyLDE2Ni42MTcsNDkyLjkwOCwxNDcuNTI1LDQ0Ni45MTUsMTQ3LjUyNXoiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNjUuNTQ2LDE5OS41OTNoLTcxLjE1OWwtMTkuOTU5LDk1LjQ1OGg3My43NjNjNTcuMjc1LDAsNzMuNzYzLTI4LjYzNyw3My43NjMtNTMuODAzICAgIEMzMjIuODIsMjIzLjAyNCwzMTEuNTM5LDE5OS41OTMsMjY1LjU0NiwxOTkuNTkzeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTI5MS41OCw2MC43NDZIMjIwLjQybC0xOS45NTksOTUuNDU4aDczLjc2M2M1Ny4yNzUsMCw3My43NjMtMjguNjM3LDczLjc2My01My44MDMgICAgQzM0Ny45ODYsODQuMTc2LDMzNy41NzMsNjAuNzQ2LDI5MS41OCw2MC43NDZ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.market-button.mb-light-skin.amazon-button {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0idXVpZDo1RDIwODkyNDkzQkZEQjExOTE0QTg1OTBEMzE1MDhDOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QjFCQzQ2QjRGNkQxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QjFCQzQ2QTRGNkQxMUU3OUY5REJEQzBGNkVBQUI5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QUM1ODJFMkIxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QUM1ODJFM0IxNEExMUUzQkY1NEUzQkNCRjlEODA1RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk2CzRIAAAcFSURBVHja5FxpbBZVFH2ULlhQCq2oiBWLWqCI0AoqKILgGo2KEqlGjSKKIuJaC9EgRKNYURL9YQ2KawKICO5RqZYYsKDFtS1VsSpaU2ypgQYo0HpP5lTGz2/pvNnrTU7yLXNn3px5775777tvurW3tysf5DDBEMEAwUmCEwX9+TsalCRoEfwuqBF8KagTVAt2e9nQZA+vdYRgimCi4GJBd41z7BK8LlgjeMOTVqMHuYxcwRrBgXZnZYegyO32d3NxiGG4LBVMdvkZN7JnfuzGyZNcavQkwXYPyIFkCsoED4SFoDsFHwpSPTb8CwQPO31Sp4fYbMFi5a9MEzwfRILGu2UHNORYwS9BGmIpgldVcGR+0GzQI3T0giKY1XoHZYjBAazHuTT1ywUrOOvtFfQQDBPMEmTYaNd0wZIgOIrzNB29zYKcBOcuseFIljjhKDoxxC7U0FkuGCnYmuC4ewVzNNt1ahCGGILNXy3qIOAcalEHAWuuRZ0/BUcKDvhppM/X0HlQQ+dtDZ0setm+zmKtFo9HCuM9jeuUabYv3e90x0uCfvReewoOZZAai3g4kjs1rlNnwz8LVKjRgwT1EeQIjicGCdoEM5gEsyonCGo19PIEVUFKmO0hGgRbnIwZ/fI4k1TXFtvEJgf8BtNo13R9mv1dgSDYpwJlJO6zaL/6MiLPofHXlX1hI+gYwVjBZYLBDHCz/u9DbKCgkK7AoLAZMTcJwpBZJLgozFbeLYKeFNzRFaZBpwk6TvCpClbyLDAEnS5Y39UcKacIynWInEbGa0i471DGUnMD7dk8XzxNB2IxrH/9wClcR5BmxVLRa4KvYjh3urEY4sAf/e5BT9sg5ynB7UGOxewSNFwZyXEduVIZyfpAi91g9SZNvVkWyWkPI0FYd7peQ289h2UoYkY7BI1SeinNpRo6PcJGEBzBMZq672u6EaEiCOSM09BrVsYKqlXJ12xnml8EwS/J0dDbRb/HK4LS/SIoW3CUhp5O4SbW/s+yERv6QlCa0qsgy1DWqy6m2ZjFJvtFEIZJq4beIcqoj7bSe4pt3N9UwdF+EIT1+D80dWdYOPYZZSTt7cg9fhD0vUpcmRFLrhOM7sRxJYJLHZipkbgr8JogeMPrbDT6E8EZMf7rJXjL7pOPkBf9SHecI/jAZsNB1HPKyP1gSp5CuCHIHCwU/OYVQZiN6ml4wyJPCO72Khb7S/CCCpfs93KIQVAp9p2HN7iKQbJOgu5spVHHbTcfhNKSxz0i5zHB5Zz6rQiKtvKUbpG7Q9uGNrS7K3Mjrrexk3pVgsygbIfaJDjF4V6DoqtL1H9rFDHEahPkiZBWucB2CxzegLbSwV5TnuDpF8TRfdape3Jjl94EQY0NYioFkzp5rdFR9Oe4suNwb2m2Xlh/c8xNNUiooarjZCJabgYBL2oWsWl3C92GGotNQBnNMga2M+U+VnVCBxnRkRyqiPX2MLbcKPjZfF/mNAKWjlNshhBmWccLjqJt6kuSujMbgOKmnWzQF8pY4GuznFYoza6Rm7lVGYVX7yY4fASzoWMYn/Wno4sHhcLzCkYH2DDc9C8/SC60gm4+DriaCl1FzhU8xIfVGVkopBdH9qBr6GkW8mnODqGnHE3OUwcXChoJ5MWbOQvmRMk8/lP2lxyRBLuKYxJFT1ieuZb5m9oQE/Q1CdhOpzGa5HF49TSFUTE9aWz6f5OfJ9B4olLs8JAShIC6Lg45iuHSN6bvdYlCDThnq03f72IWsUj5uIjnkCCffh97ViF/w8TRUT/ZZA5L4sViqERdEnFi5FO2KWMLZu+QEZPOdqP9jyrjnSG38L8BphHymTKVzCQKVlG5EVm4hC1GxUw8IdmVH3BiYF9K6W+h3Vkmg91RfDHRdPxiq9H8AhrtliiW/gb6MNUchsMCQgqcx9sEmwXfkghzj0ebc01OacdCwk/KeCmCijaLxZN3eFFUgZ0Wo0GLTA4ifKpKwQYPSYG3ji0LVzAdHEvgupirUvqYguwbIw+2siC3jd72XBX/FRDj1MF1+zo+xWoavgqlt18sUlI4tDHLDmfYMDiBzj72+FcifkeFGyrY8NqdspgZRYuxWD7H6pkWb6yVSbZ6+iVNNIgN/NzCYd/Ghwd7gf1nKOLsR0OKmGuIxUliJR3fyL1qvUzhzsBoMabukm4le8lUJsI7u06fynhohEfDDj0X1WxrY/yfyZl6plsp12UM+LCGtVUFRz5nFDA0DjmKPWe6irOM7tSGukV0tIrYOL9kLXs1gtKXnTih0zsOS9i48cpI5jd7QEoVPWMYa7zYabmTJ3erOLKcuJ+GfCx9qcE0jHakgQm21bSFFW6y73b1KDIEHxHzmZzKpt+RzxkpgxmEVHWwZA56uznDNNFd2ESXod7LMfu3AAMA3eQjZHI91/8AAAAASUVORK5CYII=);
}

.facebook-btn,
.twitter-btn,
.google-btn,
.github-btn,
.apple-btn {
	text-transform: none;
}

.facebook-btn > i,
.twitter-btn > i,
.google-btn > i,
.github-btn > i,
apple-btn > i {
	margin-top: 0;
}

.facebook-btn {
	border-color: #3b5998;
	background-color: transparent;
	color: #3b5998;
}

.facebook-btn:hover {
	background-color: #3b5998;
	color: var(--primary-background-color);
}

.apple-btn {
	border-color: #000000;
	background-color: transparent;
	color: #000000;
}

.apple-btn:hover {
	background-color: #000000;
	color: var(--primary-background-color);
}

.twitter-btn {
	border-color: #55acee;
	background-color: transparent;
	color: #55acee;
}

.twitter-btn:hover {
	background-color: #55acee;
	color: var(--primary-background-color);
}

.paypal-btn {
	border-color: #0070b9;
	color: var(--text-white-color);
}

.paypal-btn:hover {
	background-color: #007dd1;
}

.google-btn {
	border-color: #dd4b39;
	background-color: transparent;
	color: #dd4b39;
}

.google-btn > i {
	font-size: 1.3em;
}

.google-btn:hover {
	background-color: #dd4b39;
	color: var(--primary-background-color);
}

.github-btn {
	border-color: #444444;
	background-color: transparent;
	color: #444444;
}

.github-btn > i {
	font-size: 1.3em;
}

.github-btn:hover {
	background-color: #444444;
	color: var(--primary-background-color);
}

/* Base class */
.social-button {
	display: inline-block;
	margin-top: 5px;
	margin-right: 18px;
	margin-bottom: 5px;
	transition: color 0.3s;
	color: var(--secondary-color);
	font-size: 13px;
	text-decoration: none;
	vertical-align: middle;
}

.social-button.shape-circle,
.social-button.shape-rounded,
.social-button.shape-square {
	width: 36px;
	height: 36px;
	margin-right: 8px;
	border: 1px solid var(--primary-border-color);
	line-height: 35px;
	text-align: center;
}

.social-button.shape-circle {
	border-radius: 50%;
}

.social-button.shape-rounded {
	border-radius: var(--radius-sm);
}

.social-button:focus {
	text-decoration: none;
}

.text-center .social-button {
	margin-right: 9px;
	margin-left: 9px;
}

.text-center .social-button.shape-circle,
.text-center .social-button.shape-rounded,
.text-center .social-button.shape-square {
	margin-right: 4px;
	margin-left: 4px;
}

.text-right .social-button {
	margin-right: 0;
	margin-left: 18px;
}

.text-right .social-button.shape-circle,
.text-right .social-button.shape-rounded,
.text-right .social-button.shape-square {
	margin-right: 0;
	margin-left: 8px;
}

/* Amazon */
.sb-amazon {
	font-size: 1.15em !important;
}

.sb-amazon:hover,
.sb-amazon:focus {
	color: #ff9900 !important;
}

/* Airbnb */
.sb-airbnb:hover,
.sb-airbnb:focus {
	color: #fd5c63 !important;
}

/* Behance */
.sb-behance {
	font-size: 1.1em !important;
}

.sb-behance:hover,
.sb-behance:focus {
	color: #1769ff !important;
}

/* DeviantArt */
.sb-deviantart {
	font-size: 1.2em !important;
}

.sb-deviantart:hover,
.sb-deviantart:focus {
	color: #4e6252 !important;
}

/* Digg */
.sb-digg {
	font-size: 1.2em !important;
}

.sb-digg:hover,
.sb-digg:focus {
	color: #000000 !important;
}

/* Disqus */
.sb-disqus {
	font-size: 1.1em !important;
}

.sb-disqus:hover,
.sb-disqus:focus {
	color: #2e9fff !important;
}

/* Dribbble */
.sb-dribbble:hover,
.sb-dribbble:focus {
	color: #ea4c89 !important;
}

/* Drupal */
.sb-drupal {
	font-size: 1.1em !important;
}

.sb-drupal:hover,
.sb-drupal:focus {
	color: #0077c0 !important;
}

/* Email */
.sb-email:hover,
.sb-email:focus {
	color: var(--link-color) !important;
}

/* Facebook */
.sb-facebook:hover,
.sb-facebook:focus {
	color: #3b5998 !important;
}

/* Flickr */
.sb-flickr:hover,
.sb-flickr:focus {
	color: #0063dc !important;
}

/* Foursquare */
.sb-foursquare:hover,
.sb-foursquare:focus {
	color: #ef4b78 !important;
}

/* GitHub */
.sb-github:hover,
.sb-github:focus {
	color: #4183c4 !important;
}

/* Google+ */
.sb-google-plus {
	font-size: 1.2em !important;
}

.sb-google-plus:hover,
.sb-google-plus:focus {
	color: #dd4b39 !important;
}

/* Instagram */
.sb-instagram:hover,
.sb-instagram:focus {
	color: #3f729b !important;
}

/* LastFM */
.sb-lastfm {
	font-size: 1.1em !important;
}

.sb-lastfm:hover,
.sb-lastfm:focus {
	color: #e31b23 !important;
}

/* LinkedIn */
.sb-linkedin:hover,
.sb-linkedin:focus {
	color: #0976b4 !important;
}

/* PayPal */
.sb-odnoklassniki {
	font-size: 1.1em !important;
}

.sb-odnoklassniki:hover,
.sb-odnoklassniki:focus {
	color: #ed812b !important;
}

/* PayPal */
.sb-paypal {
	font-size: 0.9em !important;
}

.sb-paypal:hover,
.sb-paypal:focus {
	color: #253b80 !important;
}

/* Pinterest */
.sb-pinterest:hover,
.sb-pinterest:focus {
	color: #cc2127 !important;
}

/* Reddit */
.sb-reddit {
	font-size: 1.1em !important;
}

.sb-reddit:hover,
.sb-reddit:focus {
	color: #ff4500 !important;
}

/* Reddit */
.sb-rss {
	font-size: 0.9em !important;
}

.sb-rss:hover,
.sb-rss:focus {
	color: #f26522 !important;
}

/* Skype */
.sb-skype {
	font-size: 0.9em !important;
}

.sb-skype:hover,
.sb-skype:focus {
	color: #00aff0 !important;
}

/* SoundCloud */
.sb-soundcloud {
	font-size: 1.2em !important;
}

.sb-soundcloud:hover,
.sb-soundcloud:focus {
	color: #ff8800 !important;
}

/* Stack Overflow */
.sb-stackoverflow:hover,
.sb-stackoverflow:focus {
	color: #fe7a15 !important;
}

/* Steam */
.sb-steam:hover,
.sb-steam:focus {
	color: #7da10e !important;
}

/* StumbleUpon */
.sb-stumbleupon:hover,
.sb-stumbleupon:focus {
	color: #eb4924 !important;
}

/* Tumblr */
.sb-tumblr:hover,
.sb-tumblr:focus {
	color: #35465c !important;
}

/* Twitch */
.sb-twitch:hover,
.sb-twitch:focus {
	color: #6441a5 !important;
}

/* Twitter */
.sb-twitter:hover,
.sb-twitter:focus {
	color: #55acee !important;
}

/* Vimeo */
.sb-vimeo:hover,
.sb-vimeo:focus {
	color: #1ab7ea !important;
}

/* Vine */
.sb-vine:hover,
.sb-vine:focus {
	color: #00b488 !important;
}

/* VKontakte */
.sb-vk {
	font-size: 1.1em !important;
}

.sb-vk:hover,
.sb-vk:focus {
	color: #45668e !important;
}

/* WordPress */
.sb-wordpress:hover,
.sb-wordpress:focus {
	color: #21759b !important;
}

/* XING */
.sb-xing:hover,
.sb-xing:focus {
	color: #026466 !important;
}

/* Yahoo! */
.sb-yahoo {
	font-size: 1.1em !important;
}

.sb-yahoo:hover,
.sb-yahoo:focus {
	color: #400191 !important;
}

/* Yelp */
.sb-yelp:hover,
.sb-yelp:focus {
	color: #af0606 !important;
}

/* YouTube */
.sb-youtube:hover,
.sb-youtube:focus {
	color: #e52d27 !important;
}

.sb-light-skin {
	transition: all 0.3s;
	background-color: transparent;
	color: rgba(255, 255, 255, 0.6) !important;
}

.sb-light-skin:hover,
.sb-light-skin:focus {
	color: var(--primary-background-color) !important;
}

.sb-light-skin.shape-circle,
.sb-light-skin.shape-rounded,
.sb-light-skin.shape-square {
	border-color: rgba(255, 255, 255, 0.12);
}

.sb-light-skin.shape-circle:hover,
.sb-light-skin.shape-rounded:hover,
.sb-light-skin.shape-square:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

.nav-tabs {
	border-bottom-color: var(--primary-border-color);
}

.nav-tabs .nav-link {
	padding: 10px 20px;
	transition: color 0.3s;
	border-top-left-radius: var(--radius-sm);
	border-top-right-radius: var(--radius-sm);
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.nav-tabs .nav-link:hover {
	color: var(--link-color);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	border-color: transparent;
}

.nav-tabs .nav-link.disabled {
	cursor: not-allowed;
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link.disabled:hover {
	color: var(--text-muted-color);
}

.nav-tabs .nav-link > i {
	margin-top: -3px;
	margin-right: 5px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	border-right: 1px solid var(--primary-border-color);
	border-top: 1px solid var(--primary-border-color);
	border-left: 1px solid var(--primary-border-color);
	background-color: var(--toolbar-dropdown-background);
	color: var(--secondary-color);
}

.tab-content {
	padding: 24px;
	border-right: 1px solid var(--primary-border-color);
	border-bottom: 1px solid var(--primary-border-color);
	border-left: 1px solid var(--primary-border-color);
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	overflow: visible;
}

.tab-content p:last-child,
.tab-content ul:last-child,
.tab-content ol:last-child {
	margin-bottom: 0;
}

.wbbm-tablist ul li,
.nav-pills .nav-link {
	margin-right: 5px;
	padding: 8px 16px;
	transition: all 0.3s;
	border-radius: 22px;
	color: var(--secondary-color);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
}

#wbbmodal .wbbm .wbbm-tablist ul li:hover,
.wbbm-tablist ul li:hover,
.nav-pills .nav-link:hover:not(.disabled) {
	background-color: var(--misc-secondary);
}

.nav-pills .nav-link.disabled {
	color: var(--text-muted-color);
	cursor: not-allowed;
}

.wbbm-tablist ul li,
.nav-pills .nav-link > i {
	margin-top: -4px;
	margin-right: 5px;
}

.wbbm-tablist ul li.on,
.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
	background-color: var(--primary-color) !important;
	color: var(--text-white-color);
	cursor: default;
}

.nav-pills .cancel-button .nav-link.active {
	background-color: #e73838 !important;
	color: var(--text-white-color);
	cursor: default;
}

.nav-pills + .tab-content {
	padding: 24px 0 0;
	border: 0;
	border-radius: 0;
}

.nav-pills.nav-justified .nav-link {
	margin-right: 0;
}

.nav-pills.justify-content-center .nav-link {
	margin: 0 3px;
}

.nav-pills.justify-content-end .nav-link {
	margin: 0 0 0 5px;
}

.nav-pills.flex-column .nav-link {
	margin: 0 0 5px;
}

.transition.fade {
	transition: all 0.4s ease-in-out;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.transition.fade.show {
	opacity: 1;
}

.transition.scale.fade {
	-webkit-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}

.transition.scaledown.fade {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.transition.scale.fade.show,
.transition.scaledown.fade.show {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.transition.left.fade {
	-webkit-transform: translateX(40px);
	-ms-transform: translateX(40px);
	transform: translateX(40px);
}

.transition.right.fade {
	-webkit-transform: translateX(-40px);
	-ms-transform: translateX(-40px);
	transform: translateX(-40px);
}

.transition.left.fade.show,
.transition.right.fade.show {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

.transition.top.fade {
	-webkit-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	transform: translateY(-40px);
}

.transition.bottom.fade {
	-webkit-transform: translateY(40px);
	-ms-transform: translateY(40px);
	transform: translateY(40px);
}

.transition.top.fade.show,
.transition.bottom.fade.show {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.transition.flip.fade {
	-webkit-transform: rotateY(-90deg) scale(1.1);
	transform: rotateY(-90deg) scale(1.1);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.transition.flip.fade.show {
	-webkit-transform: rotateY(0deg) scale(1);
	transform: rotateY(0deg) scale(1);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.card {
	border-radius: var(--radius);
	border-color: var(--primary-border-color);
	box-shadow: 0 .75rem 1.5rem var(--card-box-shadow);
	background-color: var(--secondary-background-color);
}

.card .google-map {
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.card-header {
	border-bottom-color: var(--primary-border-color);
}

.card-header h1,
.card-header .h1,
.card-header h2,
.card-header .h2,
.card-header h3,
.card-header .h3,
.card-header h4,
.card-header .h4,
.card-header h5,
.card-header .h5,
.card-header h6,
.card-header .h6 {
	margin-bottom: 0;
}

.card-header:first-child {
	border-radius: 7px 7px 0 0;
}

.card-header,
.card-footer {
	background-color: var(--misc-secondary);
}

.card-footer {
	border-top-color: var(--primary-border-color);
}

.card-footer:last-child {
	border-radius: 0 0 7px 7px;
}

.card-body p:last-child,
.card-body ol:last-child,
.card-body ul:last-child {
	margin-bottom: 0;
}

.card-body .tab-content {
	padding: 0;
	border: 0;
}

.card.bg-primary {
	border-color: var(--primary-color);
}

.card.bg-primary .card-header {
	border-bottom-color: var(--primary-color);
	background-color: #0ca2e5;
}

.card.bg-secondary .card-header,
.card.bg-faded .card-header {
	background-color: var(--background-darker-color);
}

.card.bg-success {
	border-color: #29ca90;
}

.card.bg-success .card-header {
	border-bottom-color: #29ca90;
	background-color: #2bd396;
}

.card.bg-info {
	border-color: #1cb3e0;
}

.card.bg-info .card-header {
	border-bottom-color: #1cb3e0;
	background-color: #35bde6;
}

.card.bg-warning {
	border-color: #ff9e12;
}

.card.bg-warning .card-header {
	border-bottom-color: #ff9e12;
	background-color: #ffaa30;
}

.card.bg-danger {
	border-color: var(--danger-border-color);
}

.card.bg-danger .card-header {
	border-bottom-color: var(--danger-border-color);
	background-color: var(--danger-color); /* #ff3333; */
}

.card.bg-dark {
	border-color: #262e38;
}

.card.bg-dark .card-header {
	border-bottom-color: #262e38;
	background-color: #2b333e;
}

.text-white .card-title,
.text-light .card-title {
	color: var(--primary-background-color);
}

.card-group .card .card-footer {
	border-radius: 0;
}

.card-group .card:first-child .card-footer {
	border-bottom-left-radius: var(--radius);
}

.card-group .card:last-child .card-footer {
	border-bottom-right-radius: var(--radius);
}

.card-img-tiles {
	display: block;
	position: relative; /** so an absolutely-positioned corner mark anchors to the thumbnail image itself, not to .card's much taller box. */
	border-bottom: 1px solid var(--primary-border-color);
}

.card-img-tiles > .inner {
	display: table;
	width: 100%;
}

.card-img-tiles .main-img,
.card-img-tiles .thumblist {
	display: table-cell;
	width: 65%;
	padding: 15px;
	vertical-align: middle;
}

.card-img-tiles .main-img > img,
.card-img-tiles .thumblist > img {
	display: block;
	width: 100%;
	margin-bottom: 6px;
}

.card-img-tiles .main-img > img:last-child,
.card-img-tiles .thumblist > img:last-child {
	margin-bottom: 0;
}

.card-img-tiles .thumblist {
	width: 35%;
	border-left: 1px solid var(--primary-border-color);
}

.category-card .view-button {
	-webkit-transform: translateY(10px);
	-ms-transform: translateY(10px);
	transform: translateY(10px);
	transition: all 0.4s;
	opacity: 0;
}

.category-card:hover .view-button {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.touchevents .category-card .view-button {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

@media (max-width: 768px) {
	.category-card .view-button {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.accordion .card {
	margin-bottom: 8px;
}

.collapse-ab {
	display: block !important;
	position: absolute !important;
}

.accordion [data-toggle='collapse'] {
	display: block;
	position: relative;
	color: var(--secondary-color);
	text-decoration: none;
}

.accordion [data-toggle='collapse']::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	margin-top: -2px;
	transition: -webkit-transform 0.25s;
	transition: transform 0.25s;
	border-right: 5px solid transparent;
	border-bottom: 5px dashed;
	border-left: 5px solid transparent;
	content: '';
}

.accordion [data-toggle='collapse'].collapsed::after {
	-webkit-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.accordion [data-toggle='collapse'] > i {
	margin-top: -4px;
	margin-right: 7px;
}

.accordion [data-toggle='collapse'] > i.socicon-paypal {
	display: inline-block;
	margin-top: 1px;
	font-size: 0.8em;
	vertical-align: middle;
}

.accordion [data-toggle='collapse'] > i.icon-medal {
	width: 16px;
	height: 16px;
	background-size: 16px;
}

.pagination {
	display: table;
	width: 100%;
	border-top: 1px solid var(--primary-border-color);
}

.pagination > .column {
	display: table-cell;
	padding-top: 16px;
	vertical-align: middle;
}

.pagination .pages {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination .pages > li {
	display: inline-block;
	width: 36px;
	height: 36px;
	font-size: 14px;
	font-weight: 500;
	line-height: 34px;
	text-align: center;
}

.pagination .pages > li > a {
	display: block;
	width: 36px;
	height: 36px;
	transition: all 0.3s;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--secondary-color);
	line-height: 34px;
	text-decoration: none;
}

.pagination .pages > li > a:hover {
	border-color: var(--primary-border-color);
	background-color: var(--misc-secondary);
}

.pagination .pages > li.active > a {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: var(--text-on-brand);
}

.pagination .btn > i {
	margin-top: -5px;
}

.entry-navigation {
	display: table;
	width: 100%;
	border-top: 1px solid var(--primary-border-color);
	border-bottom: 1px solid var(--primary-border-color);
	table-layout: fixed;
}

.entry-navigation > .column {
	display: table-cell;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	vertical-align: middle;
}

.entry-navigation .btn {
	margin: 0;
}

.entry-navigation .btn > i {
	margin-top: -4px;
}

.entry-navigation .btn.view-all {
	width: 44px;
	padding-right: 0;
	padding-left: 1px;
}

.entry-navigation .btn.view-all > i {
	margin-top: -6px;
	font-size: 1.4em;
}

.comment {
	display: block;
	position: relative;
	margin-bottom: 18px;
	padding-left: 66px;
}

.comment .comment-author-ava {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	border-radius: 50%;
	overflow: hidden;
}

.comment .comment-author-ava-box {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
}

.comment .comment-author-ava > img {
	display: block;
	width: 100%;
}

.comment .comment-body {
	position: relative;
	padding: 4px 16px 4px 16px;
	border: var(--comment-border) solid var(--primary-border-color);
	border-radius: var(--radius);
	background-color: var(--comment-background);
}

.card .comment .comment-body {
	border: var(--card-comment-border) solid var(--primary-border-color);
}

.comment-green .comment-body {
	position: relative;
	padding: 4px 16px 4px 16px;
	border: var(--comment-border) solid var(--primary-border-color);
	border-radius: var(--radius);
	background-color: var(--comment-green-background);
}

.card .comment-green .comment-body {
	border: var(--card-comment-border) solid var(--primary-border-color);
}

.comment .comment-body::after,
.comment .comment-body::before {
	position: absolute;
	top: 12px;
	right: 100%;
	width: 0;
	height: 0;
	border: solid transparent;
	content: '';
	pointer-events: none;
}

.comment .comment-body::after {
	border-width:9px;
	border-color:transparent;
	border-right-color: var(--comment-background);
}

.comment-green .comment-body::after {
	border-width:9px;
	border-color:transparent;
	border-right-color: var(--comment-green-background);
}

.comment .comment-body::before {
	margin-top: -1px;
	border-width: var(--comment-border-width);
	/* border-color: transparent; */
	border-right-color: var(--primary-border-color);
}
.card .comment .comment-body::before {
	border-width: var(--card-comment-border-width);
}

.comment-green .text-danger {
	color: var(--comment-green-text-danger) !important;
}

.comment .comment-title {
	margin-bottom: 8px;
	color: var(--third-color);
	font-size: 14px;
	font-weight: 500;
}

.comment .comment-text {
	margin-bottom: 12px;
}

.comment .comment-footer {
	display: table;
	width: 100%;
}

.comment .comment-footer > .column {
	display: table-cell;
	vertical-align: middle;
}

.comment .comment-footer > .column:last-child {
	text-align: right;
}

.comment .comment-meta {
	color: var(--text-muted-color);
	font-size: 13px;
}

.comment .reply-link {
	transition: color 0.3s;
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
}

.comment .reply-link > i {
	display: inline-block;
	margin-top: -3px;
	margin-right: 4px;
	vertical-align: middle;
}

.comment .reply-link:hover {
	color: var(--link-color);
}

.comment.comment-reply {
	margin-top: 30px;
	margin-bottom: 0;
}

@media (max-width: 576px) {
	.comment {
		padding-left: 0;
	}
	.comment .comment-author-ava {
		display: none;
	}
	.comment .comment-body {
		/* padding: 15px; */
		padding: 15px 15px 15px 15px;
	}
	.comment .comment-body::before,
	.comment .comment-body::after {
		display: none;
	}
}

.tooltip {
	font-family: var(--font-body);
}

.tooltip.bs-tooltip-top .arrow::before {
	border-top-color: var(--tool-tip-border-color);
}

.tooltip.bs-tooltip-right .arrow::before {
	border-right-color: var(--tool-tip-border-color);
}

.tooltip.bs-tooltip-bottom .arrow::before {
	border-bottom-color: var(--tool-tip-border-color);
}

.tooltip.bs-tooltip-left .arrow::before {
	border-left-color: var(--tool-tip-border-color);
}

.tooltip.show {
	opacity: 1;
}

.tooltip-inner {
	border-radius: var(--radius-sm);
	background-color: var(--tool-tip-background-color);
	color: var(--text-white-color);
	font-size: 13px;
}

.popover {
	/* border-radius: var(--radius);
	border-color: var(--primary-border-color);
	font-family: var(--font-body); */
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	background-color: var(--tool-tip-background-color);
}

.popover.confirmation {
	background-color: var(--primary-background-color) !important;
	left: 17px !important
}

.bs-popover-bottom .popover-header::before
{
	border-bottom: 0 !important;
}

/*
 * The arrow takes the colour of whatever part of the popover it touches.
 *
 * Placed top, right or left, the arrow meets the popover body, which is
 * --tool-tip-background-color. These were painted
 * --primary-background-color, which is the background of a confirmation
 * popover rather than of an ordinary one, so every ordinary popover drew
 * an arrow in a colour its body never uses: white against a dark panel
 * in the light theme, near black against a purple one in the dark theme.
 * Confirmation popovers keep that colour further down, where it is right.
 *
 * Placed bottom the arrow meets the header instead, so those rules are
 * left as they are.
 *
 * 2026-08-26 JD
 */
.popover.bs-popover-top .arrow::after {
	border-top-color: var(--tool-tip-background-color);
	top: -1px;
}

.popover.bs-popover-top .arrow::before {
	border-top-color: var(--tool-tip-background-color);
	/* transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; */
}

.popover.bs-popover-right .arrow::after {
	border-right-color: var(--tool-tip-background-color);
	top: -1px;
}

.popover.bs-popover-right .arrow::before {
	border-right-color: var(--tool-tip-background-color);
	/* transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; */
}

/*
 * Placed bottom, the arrow sits above the popover and meets whatever is
 * at its top edge.
 *
 * That is the header when there is one, and the body when there is not.
 * These were painted the header colour either way, so every popover
 * without a header, which is nearly all of them here since a field hint
 * carries no title, drew an arrow in a colour its body never uses.
 *
 * The body colour is the default and the header colour is applied back
 * only where a header actually exists. A browser without :has support
 * falls back to the body colour, which is what stock Bootstrap does and
 * is right for the common case anyway.
 *
 * The :not(:empty) is what makes that test mean anything. Bootstrap's
 * popover template always contains an h3.popover-header and hides it
 * with .popover-header:empty when the popover has no title, so testing
 * for the element alone matches every popover ever opened.
 *
 * 2026-08-26 JD
 */
.popover.bs-popover-bottom .arrow::before {
	border-bottom-color: var(--tool-tip-background-color);
	/* transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; */
}

.popover.bs-popover-bottom .arrow::after {
	border-bottom-color: var(--tool-tip-background-color);
	top: -1px;
}

.popover.bs-popover-bottom:has(.popover-header:not(:empty)) .arrow::before,
.popover.bs-popover-bottom:has(.popover-header:not(:empty)) .arrow::after {
	border-bottom-color: var(--form-disabled-background);
}

.popover.bs-popover-left .arrow::after {
	border-left-color: var(--tool-tip-background-color);
	top: -1px;
}

.popover.bs-popover-left .arrow::before {
	border-left-color: var(--tool-tip-background-color);
	/* transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; */
}

/*
 * A confirmation popover paints its own background, so its arrow
 * follows that rather than the ordinary popover body colour.
 *
 * 2026-08-26 JD
 */
.popover.confirmation.bs-popover-top .arrow::after,
.popover.confirmation.bs-popover-top .arrow::before {
	border-top-color: var(--primary-background-color);
}

.popover.confirmation.bs-popover-right .arrow::after,
.popover.confirmation.bs-popover-right .arrow::before {
	border-right-color: var(--primary-background-color);
}

.popover.confirmation.bs-popover-left .arrow::after,
.popover.confirmation.bs-popover-left .arrow::before {
	border-left-color: var(--primary-background-color);
}

.popover.confirmation.bs-popover-bottom .arrow::after,
.popover.confirmation.bs-popover-bottom .arrow::before {
	border-bottom-color: var(--primary-background-color);
}

.popover-header {
	background: var(--form-disabled-background);
	color: var(--popover-header-color);
	font-family: inherit;
}

.popover-body {
	color: var(--popover-body-color);
}

.example-tooltip .tooltip {
	display: inline-block;
	position: relative;
	margin: 10px 20px;
	opacity: 1;
}

.tooltip-wide {
	max-width: 300px;
	width: 300px;
}

.example-popover .popover {
	display: block;
	position: relative;
	width: 260px;
	margin: 1.25rem;
	float: left;
}

.bs-tooltip-bottom-demo .arrow,
.bs-tooltip-top-demo .arrow {
	left: 50%;
	margin-left: -2px;
}

.bs-tooltip-left-demo .arrow,
.bs-tooltip-right-demo .arrow {
	top: 50%;
	margin-top: -2px;
}

.bs-popover-bottom-demo .arrow,
.bs-popover-top-demo .arrow {
	left: 50%;
	margin-left: -11px;
}

.bs-popover-left-demo .arrow,
.bs-popover-right-demo .arrow {
	top: 50%;
	margin-top: -8px;
}

.dropdown-menu {
	border-color: var(--primary-border-color);
	border-radius: var(--radius-sm);
	font-size: 14px;
	box-shadow: 0 7px 22px -5px var(--secondary-box-shadow);
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
}

.dropdown-menu .dropdown-item {
	padding-right: 20px;
	padding-left: 20px;
	transition: color 0.3s;
	color: var(--secondary-color);
	text-decoration: none;
}

.dropdown-has-children {
	padding-right: 20px;
	padding-left: 20px;
	transition: color 0.3s;
	color: var(--secondary-color);
	text-decoration: none;
}

.dropdown-has-children a:hover {
	cursor: pointer;
	color: var(--link-color);
}

.dropdown-has-children a {
	color: var(--secondary-color);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.dropdown-menu .dropdown-has-children a .sub-menu {
	overflow-y: auto;
	max-height: 350px;
	z-index: 9999;
	verflow-x: auto !important;
}

.sub-menu > li.dropdown-has-children > a::after,
.dropdown-menu > li.dropdown-has-children > a::after {
	display: block;
	position: absolute;
	bottom: 14px;
	right: 18px;
	width: 0;
	height: 0;
	margin-top: -4px;
	border-top: 0.3em solid transparent;
	border-bottom: 0.3em solid transparent;
	border-left: 0.32em solid;
	content: '';
}

.dropdown-menu > li:hover > .sub-menu {
	display: block;
	-webkit-animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
	background: 0;
}

.dropdown-menu .dropdown-item:hover {
	color: var(--link-color);
}

.dropdown-menu .dropdown-item.active {
	color: var(--link-color);
}

.dropdown-menu a.dropdown-item {
	font-weight: 500;
}

.dropdown-toggle::after {
	margin-top: 1px;
	margin-left: 0.3em;
	vertical-align: 0.2em;
}

.btn.dropdown-toggle::after {
	vertical-align: 0.2em;
}

.show .dropdown-menu {
	-webkit-animation: dropdown-show 0.25s;
	animation: dropdown-show 0.25s;
}

@-webkit-keyframes dropdown-show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dropdown-show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.list-group-item {
	border-color: var(--secondary-border-color);
	background-color: var(--secondary-background-color);
	text-decoration: none;
}

.list-group-item.disabled {
	background-color: var(--form-disabled-background);
}

.list-group-item:first-child {
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.list-group-item:last-child {
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.list-group-item i {
	margin-top: -4px;
	margin-right: 8px;
	font-size: 1.1em;
}

.list-group-item p,
.list-group-item ul,
.list-group-item ol,
.list-group-item li,
.list-group-item span {
	font-weight: normal !important;
}

a.list-group-item,
.list-group-item-action {
	transition: all 0.25s;
	color: var(--secondary-color);
	font-weight: 500;
}

a.list-group-item:hover,
a.list-group-item:focus,
a.list-group-item:active,
.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:active {
	background-color: var(--misc-secondary);
	color: var(--secondary-color);
}

a.list-group-item {
	padding-top: 0.87rem;
	padding-bottom: 0.87rem;
}

.with-badge {
	position: relative;
	padding-right: 3.3rem;
}

.with-badge .badge {
	position: absolute;
	top: 50%;
	right: 1.15rem;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.badge-sm {
	color: var(--badge-text-color);
	font-size: 70% !important;
	font-weight: 500;
}

.badge-pill-sm {
	display: inline-block;
	padding: .25em .4em;
	font-size: 75%;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25rem;
}

.badge {
	color: var(--badge-text-color);
	font-size: 90%;
	font-weight: 500;
}

.badge-primary {
	background-color: var(--primary-color);
}

.badge-primary-outline {
	border-color: var(--primary-color);
	background-color: transparent;
	color: var(--link-color);
}

.badge.badge-default {
	background-color: var(--badge-default);
	color: var(--secondary-color);
}

.badge.badge-primary {
	background-color: var(--primary-color);
}

.badge.badge-info {
	background-color: var(--info-color);
}

.badge.badge-success, .badge-sm.badge-success {
	background-color: var(--success-color);
}

.badge.badge-balance {
	background-color: #00a86b;
}

.badge.badge-warning {
	background-color: var(--warning-color);
}

.badge.badge-danger {
	background-color: var(--danger-color);
}

.badge.badge-black {
	background-color: #2f3844;
}

.list-group-item.active {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: var(--text-on-brand);
	cursor: default;
	pointer-events: none;
}

.list-group-item.active .text-primary {
	color: var(--primary-background-color) !important;
	cursor: default;
	pointer-events: none;
}

.list-group-item.active h1,
.list-group-item.active .h1,
.list-group-item.active h2,
.list-group-item.active .h2,
.list-group-item.active h3,
.list-group-item.active .h3,
.list-group-item.active h4,
.list-group-item.active .h4,
.list-group-item.active h5,
.list-group-item.active .h5,
.list-group-item.active h6,
.list-group-item.active .h6 {
	color: var(--primary-background-color);
}

.list-group-item.active .badge {
	background-color: var(--primary-background-color) !important;
	color: var(--secondary-color) !important;
}

.list-group-item-info {
	background-color: rgba(80, 198, 233, 0.12);
	color: var(--info-color) !important;
}

.list-group-item-info > *,
.list-group-item-info h1,
.list-group-item-info h2,
.list-group-item-info h3,
.list-group-item-info h4,
.list-group-item-info h5,
.list-group-item-info h6,
.list-group-item-info p,
.list-group-item-info ul,
.list-group-item-info ol,
.list-group-item-info a {
	color: var(--info-color) !important;
}

.list-group-item-success {
	background-color: rgba(67, 217, 163, 0.12);
	color: #36d69d !important;
}

.list-group-item-success > *,
.list-group-item-success h1,
.list-group-item-success h2,
.list-group-item-success h3,
.list-group-item-success h4,
.list-group-item-success h5,
.list-group-item-success h6,
.list-group-item-success p,
.list-group-item-success ul,
.list-group-item-success ol,
.list-group-item-success a {
	color: #36d69d !important;
}

.list-group-item-warning {
	background-color: rgba(255, 183, 79, 0.12);
	color: #ffb140 !important;
}

.list-group-item-warning > *,
.list-group-item-warning h1,
.list-group-item-warning h2,
.list-group-item-warning h3,
.list-group-item-warning h4,
.list-group-item-warning h5,
.list-group-item-warning h6,
.list-group-item-warning p,
.list-group-item-warning ul,
.list-group-item-warning ol,
.list-group-item-warning a {
	color: #ffb140 !important;
}

.list-group-item-danger {
	background-color: rgba(255, 82, 82, 0.12);
	color: var(--danger-color) !important;
}

.list-group-item-danger > *,
.list-group-item-danger h1,
.list-group-item-danger h2,
.list-group-item-danger h3,
.list-group-item-danger h4,
.list-group-item-danger h5,
.list-group-item-danger h6,
.list-group-item-danger p,
.list-group-item-danger ul,
.list-group-item-danger ol,
.list-group-item-danger a {
	color: var(--danger-color) !important;
}

.list-group-item-action:hover.list-group-item-info,
.list-group-item-action.active.list-group-item-info {
	background-color: rgba(80, 198, 233, 0.24);
}

.list-group-item-action:hover.list-group-item-success,
.list-group-item-action.active.list-group-item-success {
	background-color: rgba(67, 217, 163, 0.24);
}

.list-group-item-action:hover.list-group-item-warning,
.list-group-item-action.active.list-group-item-warning {
	background-color: rgba(255, 183, 79, 0.24);
}

.list-group-item-action:hover.list-group-item-danger,
.list-group-item-action.active.list-group-item-danger {
	background-color: rgba(255, 82, 82, 0.24);
}

.card:not([class*='mb-']):not([class*='margin-bottom-']) + .list-group {
	margin-top: -1px;
}

.card:not([class*='mb-']):not([class*='margin-bottom-'])
	+ .list-group
	.list-group-item:first-child {
	border-radius: 0;
}

.alert {
	padding: 1rem 1.5rem;
	border: 0;
	border-radius: .25rem;
	position: relative;
	margin-bottom: 1rem;
	border: .0625rem solid transparent;

}

.alert i {
	display: inline-block;
	margin-top: -2px;
	vertical-align: middle;
}

.alert a:not(.btn) {
	font-weight: bolder;
	color: var(--text-white-color);
	text-decoration:underline;
}

.alert > *:last-child:not(.btn),
.alert h1:last-child:not(.btn),
.alert h2:last-child:not(.btn),
.alert h3:last-child:not(.btn),
.alert h4:last-child:not(.btn),
.alert h5:last-child:not(.btn),
.alert h6:last-child:not(.btn),
.alert p:last-child:not(.btn),
.alert ul:last-child:not(.btn),
.alert ol:last-child:not(.btn),
.alert a:last-child:not(.btn) {
	margin: 0;
}

.alert::before {
	display: block;
	position: absolute;
	top: -6px;
	right: -6px;
	bottom: -6px;
	left: -6px;
	border-radius: var(--radius-sm);
	content: '';
	z-index: -1;
}

.alert .alert-dismissible {
	transition: opacity 0.4s;
}

.alert .alert-dismissible.fade.show {
	opacity: 1;
}

.alert .alert-close {
	display: block;
	position: absolute;
	top: 10px;
	right: 12px;
	font-family: feather;
	font-size: 14px;
	cursor: pointer;
}

.alert .alert-close::before {
	content: '\e117';
}

.alert-default {
	background-color: rgba(96, 105, 117, 0.05);
	color: var(--secondary-color);
}

.alert-default::before {
	border-color: rgba(96, 105, 117, 0.13);
}

.alert-default > *:not(.text-white),
.alert-default > *:not(.text-light),
.alert-default h1:not(.text-white),
.alert-default h1:not(.text-light),
.alert-default h2:not(.text-white),
.alert-default h2:not(.text-light),
.alert-default h3:not(.text-white),
.alert-default h3:not(.text-light),
.alert-default h4:not(.text-white),
.alert-default h4:not(.text-light),
.alert-default h5:not(.text-white),
.alert-default h5:not(.text-light),
.alert-default h6:not(.text-white),
.alert-default h6:not(.text-light),
.alert-default p:not(.text-white),
.alert-default p:not(.text-light),
.alert-default ul:not(.text-white),
.alert-default ul:not(.text-light),
.alert-default ol:not(.text-white),
.alert-default ol:not(.text-light),
.alert-default a:not(.text-white),
.alert-default a:not(.text-light) {
	color: var(--secondary-color);
}

.alert-default .alert-close {
	color: var(--secondary-color);
}

.alert-primary {
	background-color: rgba(13, 169, 239, 0.12);
	color: #fff;
}

.alert-primary::before {
	border-color: rgba(13, 169, 239, 0.25);
}

.alert-primary > *:not(.text-white),
.alert-primary > *:not(.text-light),
.alert-primary h1:not(.text-white),
.alert-primary h1:not(.text-light),
.alert-primary h2:not(.text-white),
.alert-primary h2:not(.text-light),
.alert-primary h3:not(.text-white),
.alert-primary h3:not(.text-light),
.alert-primary h4:not(.text-white),
.alert-primary h4:not(.text-light),
.alert-primary h5:not(.text-white),
.alert-primary h5:not(.text-light),
.alert-primary h6:not(.text-white),
.alert-primary h6:not(.text-light),
.alert-primary p:not(.text-white),
.alert-primary p:not(.text-light),
.alert-primary ul:not(.text-white),
.alert-primary ul:not(.text-light),
.alert-primary ol:not(.text-white),
.alert-primary ol:not(.text-light),
.alert-primary a:not(.text-white),
.alert-primary a:not(.text-light) {
	color: #fff;
}

.alert-primary .alert-close {
	color: #fff;
}

.alert-primary {
	background-color: var(--primary-color);
	color: var(--text-on-brand);
}

.alert-primary::before {
    border-color: var(--primary-color);
}

.alert-info {
	background-color: var(--primary-color);
	color: var(--text-on-brand);
}

.alert-info::before {
	border-color: var(--primary-color);
}

.alert-info > *:not(.text-white),
.alert-info > *:not(.text-light),
.alert-info h1:not(.text-white),
.alert-info h1:not(.text-light),
.alert-info h2:not(.text-white),
.alert-info h2:not(.text-light),
.alert-info h3:not(.text-white),
.alert-info h3:not(.text-light),
.alert-info h4:not(.text-white),
.alert-info h4:not(.text-light),
.alert-info h5:not(.text-white),
.alert-info h5:not(.text-light),
.alert-info h6:not(.text-white),
.alert-info h6:not(.text-light),
.alert-info p:not(.text-white),
.alert-info p:not(.text-light),
.alert-info ul:not(.text-white),
.alert-info ul:not(.text-light),
.alert-info ol:not(.text-white),
.alert-info ol:not(.text-light),
.alert-info a:not(.text-white),
.alert-info a:not(.text-light) {
	color: #fff;
}

.alert-info .alert-close {
	color: var(--info-color);
}

.alert-success {
	background-color: #36d69d;
	color: #fff;
}

.alert-success::before {
	border-color: rgba(67, 217, 163, 0.25);
}

.alert-success > *:not(.text-white),
.alert-success > *:not(.text-light),
.alert-success h1:not(.text-white),
.alert-success h1:not(.text-light),
.alert-success h2:not(.text-white),
.alert-success h2:not(.text-light),
.alert-success h3:not(.text-white),
.alert-success h3:not(.text-light),
.alert-success h4:not(.text-white),
.alert-success h4:not(.text-light),
.alert-success h5:not(.text-white),
.alert-success h5:not(.text-light),
.alert-success h6:not(.text-white),
.alert-success h6:not(.text-light),
.alert-success p:not(.text-white),
.alert-success p:not(.text-light),
.alert-success ul:not(.text-white),
.alert-success ul:not(.text-light),
.alert-success ol:not(.text-white),
.alert-success ol:not(.text-light),
.alert-success a:not(.text-white),
.alert-success a:not(.text-light) {
	color: #fff;
}

.alert-success .alert-close {
	color: #fff;
}

.alert-warning {
	background-color: #ffb140;
	color: #fff;
}

.alert-warning::before {
	border-color: #ffb140;
}

.alert-warning > *:not(.text-white),
.alert-warning > *:not(.text-light),
.alert-warning h1:not(.text-white),
.alert-warning h1:not(.text-light),
.alert-warning h2:not(.text-white),
.alert-warning h2:not(.text-light),
.alert-warning h3:not(.text-white),
.alert-warning h3:not(.text-light),
.alert-warning h4:not(.text-white),
.alert-warning h4:not(.text-light),
.alert-warning h5:not(.text-white),
.alert-warning h5:not(.text-light),
.alert-warning h6:not(.text-white),
.alert-warning h6:not(.text-light),
.alert-warning p:not(.text-white),
.alert-warning p:not(.text-light),
.alert-warning ul:not(.text-white),
.alert-warning ul:not(.text-light),
.alert-warning ol:not(.text-white),
.alert-warning ol:not(.text-light),
.alert-warning a:not(.text-white),
.alert-warning a:not(.text-light) {
	color: #fff;
}

.alert-warning .alert-close {
	color: #fff;
}

.alert-danger {
	background-color: var(--danger-color);
	color: #fff;
}

.alert-danger::before {
	border-color: var(--danger-color);
}

.alert-danger > *:not(.text-white),
.alert-danger > *:not(.text-light),
.alert-danger h1:not(.text-white),
.alert-danger h1:not(.text-light),
.alert-danger h2:not(.text-white),
.alert-danger h2:not(.text-light),
.alert-danger h3:not(.text-white),
.alert-danger h3:not(.text-light),
.alert-danger h4:not(.text-white),
.alert-danger h4:not(.text-light),
.alert-danger h5:not(.text-white),
.alert-danger h5:not(.text-light),
.alert-danger h6:not(.text-white),
.alert-danger h6:not(.text-light),
.alert-danger p:not(.text-white),
.alert-danger p:not(.text-light),
.alert-danger ul:not(.text-white),
.alert-danger ul:not(.text-light),
.alert-danger ol:not(.text-white),
.alert-danger ol:not(.text-light),
.alert-danger a:not(.text-white),
.alert-danger a:not(.text-light) {
	color: #fff;
}

.alert-danger .alert-close {
	color: #fff;
}

.alert-image-bg {
	border: 0;
}

.alert-image-bg::before {
	display: none;
}

.iziToast {
	background: var(--secondary-background-color);
}

.iziToast::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-sm);
	-webkit-box-shadow: -1px 9px 20px -8px var(--primary-box-shadow-80);
	-moz-box-shadow: -1px 9px 20px -8px var(--primary-box-shadow-80);
	box-shadow: -1px 9px 20px -8px var(--primary-box-shadow-80);
	content: '';
	z-index: -1;
}

.iziToast>.iziToast-body .iziToast-title {
	color: var(--secondary-color);
}

.iziToast>.iziToast-body .iziToast-message {
	color: var(--secondary-color);
}

.iziToast>.iziToast-body .iziToast-texts {
	padding-left: 5px;
}

.iziToast > .iziToast-body {
	margin-left: 30px;
	margin: 15px;
	margin-right: 30px;
}

.iziToast-body a {
	text-decoration: none;
}

.iziToast > .iziToast-close {
	width: 40px;
	transition: opacity 0.25s;
	background: none;
	background-position: center;
	background-color: transparent;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE1LjY0MiAxNS42NDIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1LjY0MiAxNS42NDIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTguODgyLDcuODIxbDYuNTQxLTYuNTQxYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjEgIGMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMEw3LjgyMSw2Ljc2TDEuMjgsMC4yMmMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMGMtMC4yOTMsMC4yOTMtMC4yOTMsMC43NjgsMCwxLjA2MSAgbDYuNTQxLDYuNTQxTDAuMjIsMTQuMzYyYy0wLjI5MywwLjI5My0wLjI5MywwLjc2OCwwLDEuMDYxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyczAuMzg0LTAuMDczLDAuNTMtMC4yMmw2LjU0MS02LjU0MSAgbDYuNTQxLDYuNTQxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyYzAuMTkyLDAsMC4zODQtMC4wNzMsMC41My0wLjIyYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjFMOC44ODIsNy44MjF6IiBmaWxsPSIjMzc0MjUwIi8+Cjwvc3ZnPgo=);
	background-size: 8px;
	background-repeat: no-repeat;
}

.iziToast.iziToast-info {
	border: 1px solid var(--info-color);
	/* background-color: #e6f7fc; */
	background: var(--secondary-background-color);
	color: var(--info-color);
}

.iziToast.iziToast-info > .iziToast-close {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE1LjY0MiAxNS42NDIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1LjY0MiAxNS42NDIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTguODgyLDcuODIxbDYuNTQxLTYuNTQxYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjEgIGMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMEw3LjgyMSw2Ljc2TDEuMjgsMC4yMmMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMGMtMC4yOTMsMC4yOTMtMC4yOTMsMC43NjgsMCwxLjA2MSAgbDYuNTQxLDYuNTQxTDAuMjIsMTQuMzYyYy0wLjI5MywwLjI5My0wLjI5MywwLjc2OCwwLDEuMDYxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyczAuMzg0LTAuMDczLDAuNTMtMC4yMmw2LjU0MS02LjU0MSAgbDYuNTQxLDYuNTQxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyYzAuMTkyLDAsMC4zODQtMC4wNzMsMC41My0wLjIyYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjFMOC44ODIsNy44MjF6IiBmaWxsPSIjMTg5NmJiIi8+Cjwvc3ZnPgo=);
}

.iziToast.iziToast-success {
	/* border-color: rgba(67, 217, 163, 0.6);
	background-color: #dcf8ee; */
	color: var(--success-text-color);
	border: 1px solid var(--success-color);
	/* background-color: #e6f7fc; */
	background: var(--secondary-background-color);
}

.iziToast.iziToast-success > .iziToast-close {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE1LjY0MiAxNS42NDIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1LjY0MiAxNS42NDIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTguODgyLDcuODIxbDYuNTQxLTYuNTQxYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjEgIGMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMEw3LjgyMSw2Ljc2TDEuMjgsMC4yMmMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMGMtMC4yOTMsMC4yOTMtMC4yOTMsMC43NjgsMCwxLjA2MSAgbDYuNTQxLDYuNTQxTDAuMjIsMTQuMzYyYy0wLjI5MywwLjI5My0wLjI5MywwLjc2OCwwLDEuMDYxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyczAuMzg0LTAuMDczLDAuNTMtMC4yMmw2LjU0MS02LjU0MSAgbDYuNTQxLDYuNTQxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyYzAuMTkyLDAsMC4zODQtMC4wNzMsMC41My0wLjIyYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjFMOC44ODIsNy44MjF6IiBmaWxsPSIjMWY5NzZjIi8+Cjwvc3ZnPgo=);
}

.iziToast.iziToast-warning {
	/* border-color: rgba(255, 183, 79, 0.3); */
	/* background-color: #fff6e8; */
	border: 1px solid var(--warning-color);
	background: var(--secondary-background-color);
	color: var(--warning-color);
}

.iziToast.iziToast-warning > .iziToast-close {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE1LjY0MiAxNS42NDIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1LjY0MiAxNS42NDIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTguODgyLDcuODIxbDYuNTQxLTYuNTQxYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjEgIGMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMEw3LjgyMSw2Ljc2TDEuMjgsMC4yMmMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMGMtMC4yOTMsMC4yOTMtMC4yOTMsMC43NjgsMCwxLjA2MSAgbDYuNTQxLDYuNTQxTDAuMjIsMTQuMzYyYy0wLjI5MywwLjI5My0wLjI5MywwLjc2OCwwLDEuMDYxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyczAuMzg0LTAuMDczLDAuNTMtMC4yMmw2LjU0MS02LjU0MSAgbDYuNTQxLDYuNTQxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyYzAuMTkyLDAsMC4zODQtMC4wNzMsMC41My0wLjIyYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjFMOC44ODIsNy44MjF6IiBmaWxsPSIjZTg4OTAwIi8+Cjwvc3ZnPgo=);
}

.iziToast.iziToast-danger {
	/* border-color: rgba(255, 82, 82, 0.3);
	background-color: #ffebeb;
	color: var(--danger-color); */
	border: 1px solid var(--danger-color);
	background: var(--secondary-background-color);
	color: var(--danger-color);
}

.iziToast.iziToast-danger > .iziToast-close {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE1LjY0MiAxNS42NDIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1LjY0MiAxNS42NDIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTguODgyLDcuODIxbDYuNTQxLTYuNTQxYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjEgIGMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMEw3LjgyMSw2Ljc2TDEuMjgsMC4yMmMtMC4yOTMtMC4yOTMtMC43NjgtMC4yOTMtMS4wNjEsMGMtMC4yOTMsMC4yOTMtMC4yOTMsMC43NjgsMCwxLjA2MSAgbDYuNTQxLDYuNTQxTDAuMjIsMTQuMzYyYy0wLjI5MywwLjI5My0wLjI5MywwLjc2OCwwLDEuMDYxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyczAuMzg0LTAuMDczLDAuNTMtMC4yMmw2LjU0MS02LjU0MSAgbDYuNTQxLDYuNTQxYzAuMTQ3LDAuMTQ2LDAuMzM4LDAuMjIsMC41MywwLjIyYzAuMTkyLDAsMC4zODQtMC4wNzMsMC41My0wLjIyYzAuMjkzLTAuMjkzLDAuMjkzLTAuNzY4LDAtMS4wNjFMOC44ODIsNy44MjF6IiBmaWxsPSIjZWIwMDAwIi8+Cjwvc3ZnPgo=);
}

.iziToast>.iziToast-body .iziToast-buttons>button {
	background-color: transparent;
	color: var(--primary-color);
	display: inline-block;
	position: relative;
	height: 44px;
	margin-top: 8px;
	margin-right: 12px;
	margin-bottom: 8px;
	padding: 0 22px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: all 0.4s;
	border: 1px solid var(--primary-color) !important;
	border-radius: var(--radius-sm); /* 22px; */
	background-image: none;
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 42px;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: middle;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.iziToast>.iziToast-body .iziToast-buttons>button:hover {
	background-color: var(--primary-color);
	color: var(--text-on-brand);
}

.modal {
	z-index: 9200;
}

.modal-content {
	box-shadow: 0 4px 30px var(--modal-box-shadow);
	border-radius: 10px;
	background-color: var(--modal-background);
	overflow-y: auto !important;

}

.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
@media(max-width: 768px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

.modal-header,
.modal-body,
.modal-footer {
	padding-right: 20px;
	padding-left: 20px;
	border-top: 1px solid var(--primary-border-color);
}

.modal-footer {
	/* padding-top: 12px;
	padding-bottom: 12px; */
	padding-top: 2px;
	padding-bottom: 2px;
}

.modal-footer .btn {
	margin-right: 0;
	margin-left: 12px;
}

.modal-open.hasScrollbar .navbar-stuck {
	width: calc(100% - 15px);
}

.modal-backdrop {
	z-index: 9100;
}

.example-modal .modal {
	display: block;
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 1;
}

.progress {
	height: auto;
	border-radius: 9px;
	background-color: var(--progress-background);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
}

.progress-bar {
	height: 18px;
	background-color: var(--primary-color);
}


.progress-click {
	cursor: pointer;
	cursor: hand;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.owl-carousel {
	display: block;
	position: relative;
	width: 100%;
	z-index: 1;
	-webkit-tap-highlight-color: transparent;
}

.owl-carousel .owl-stage {
	position: relative;
	-ms-touch-action: pan-Y;
	-moz-backface-visibility: hidden;
	/* fix firefox animation glitch */
}

.owl-carousel .owl-stage::after {
	display: block;
	height: 0;
	clear: both;
	line-height: 0;
	content: '.';
	visibility: hidden;
}

.owl-carousel .owl-stage-outer {
	position: relative;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	float: left;
	width: 100%;
}

.owl-carousel .owl-item {
	position: relative;
	min-height: 1px;
	float: left;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

.owl-carousel .owl-item .owl-lazy {
	transition: opacity 400ms ease;
	opacity: 0;
}

.owl-carousel .owl-item .from-top,
.owl-carousel .owl-item .from-bottom,
.owl-carousel .owl-item .from-left,
.owl-carousel .owl-item .from-right,
.owl-carousel .owl-item .scale-up,
.owl-carousel .owl-item .scale-down {
	transition: all 0.45s 0.3s ease-in-out;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.owl-carousel .owl-item .from-top {
	-webkit-transform: translateY(-45px);
	-ms-transform: translateY(-45px);
	transform: translateY(-45px);
}

.owl-carousel .owl-item .from-bottom {
	-webkit-transform: translateY(45px);
	-ms-transform: translateY(45px);
	transform: translateY(45px);
}

.owl-carousel .owl-item .from-left {
	-webkit-transform: translateX(-45px);
	-ms-transform: translateX(-45px);
	transform: translateX(-45px);
}

.owl-carousel .owl-item .from-right {
	-webkit-transform: translateX(45px);
	-ms-transform: translateX(45px);
	transform: translateX(45px);
}

.owl-carousel .owl-item .scale-up {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}

.owl-carousel .owl-item .scale-down {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.owl-carousel .owl-item .delay-1 {
	transition-delay: 0.5s;
}

.owl-carousel .owl-item .delay-2 {
	transition-delay: 0.7s;
}

.owl-carousel .owl-item .delay-3 {
	transition-delay: 0.9s;
}

.owl-carousel .owl-item .delay-4 {
	transition-delay: 1.1s;
}

.owl-carousel .owl-item.active .from-top,
.owl-carousel .owl-item.active .from-bottom {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.owl-carousel .owl-item.active .from-left,
.owl-carousel .owl-item.active .from-right {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

.owl-carousel .owl-item.active .scale-up,
.owl-carousel .owl-item.active .scale-down {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.owl-carousel .owl-item > img {
	display: block;
	width: 100%;
}

.owl-carousel .owl-item > img.owl-lazy {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
	display: none;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
	cursor: pointer;
	cursor: hand;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* .owl-carousel.owl-loaded {
	display: block;
} */

.owl-carousel.owl-loading {
	display: block;
	opacity: 0;
}

.owl-carousel.owl-hidden {
	opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
	visibility: hidden;
}

.owl-carousel.owl-drag .owl-item {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.owl-carousel.owl-grab {
	cursor: move;
	cursor: grab;
}

.owl-carousel.owl-rtl {
	direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
	float: right;
}

.owl-carousel .animated {
	-webkit-animation-duration: 1000ms;
	animation-duration: 1000ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
	z-index: 0;
}

.owl-carousel .owl-animated-out {
	z-index: 1;
}

.owl-carousel .fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

.owl-carousel .owl-dots {
	display: block;
	width: 100%;
	margin-top: 18px;
	text-align: center;
}

.owl-carousel .owl-dots .owl-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 6px;
	transition: opacity 0.25s;
	border-radius: 50%;
	background-color: var(--secondary-color);
	opacity: 0.3;
}

.owl-carousel .owl-dots .owl-dot.active {
	opacity: 0.9;
}

.owl-carousel .owl-prev,
.owl-carousel .owl-next {
	display: block;
	position: absolute;
	top: 40%;
	width: 44px;
	height: 44px;
	transition: opacity 0.3s;
	border: 1px solid var(--primary-border-color);
	border-radius: 50%;
	background-color: var(--primary-background-color);
	color: var(--third-color);
	line-height: 40px;
	text-align: center;
	opacity: 0.7;
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.owl-carousel .owl-prev:hover,
.owl-carousel .owl-next:hover {
	opacity: 1;
}

.owl-carousel-arrow .owl-prev::before,
.owl-carousel-arrow .owl-next::before {
	font-family: feather;
	font-size: 19px;
	content: '\f115';
}

.owl-carousel .owl-prev {
	left: 10px;
}

.owl-carousel-arrow .owl-prev::before {
	content: '\e094';
}

.owl-carousel .owl-next {
	right: 10px;
}

.owl-carousel-arrow .owl-next::before {
	content: '\e095';
}

.owl-carousel.large-controls .owl-prev,
.owl-carousel.large-controls .owl-next {
	width: 54px;
	height: 54px;
	margin-top: -47px;
	line-height: 50px;
}

.owl-carousel.large-controls .owl-prev {
	left: 30px;
}

.owl-carousel.large-controls .owl-next {
	right: 30px;
}

.owl-carousel.dots-inside .owl-dots {
	position: absolute;
	bottom: 0;
	margin: 0;
	padding-bottom: 24px;
}

.owl-carousel.dots-inside .owl-dots .owl-dot {
	background-color: var(--primary-background-color);
	opacity: 0.5;
}

.owl-carousel.dots-inside .owl-dots .owl-dot.active {
	opacity: 1;
}

.owl-carousel.dots-inside .owl-prev,
.owl-carousel.dots-inside .owl-next {
	margin-top: -22px;
}

.owl-carousel.dots-inside.large-controls .owl-prev,
.owl-carousel.dots-inside.large-controls .owl-next {
	margin-top: -27px;
}

.owl-carousel .widget {
	margin-bottom: 0;
}

.owl-carousel .widget.widget-featured-posts > .entry {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.owl-carousel .owl-prev, .owl-carousel .owl-prev,
	.owl-carousel .owl-prev, .owl-carousel .owl-next {
		opacity: 0;
	}
}

.no-js .owl-carousel {
	display: block;
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.owl-height {
	transition: height 500ms ease-in-out;
}

/** New **/

.owl-carousel .owl-item .item {
	display: block;
	float: left;
	width: 100%;
	position: relative;
	min-height: 450px;
	height: 100%;
	overflow: hidden;
	border-top-left-radius: calc(0.25rem - 1px);
	border-top-right-radius: calc(0.25rem - 1px);
}

.owl-carousel .owl-item .item-dashboard {
	display: block;
	float: left;
	width: 100%;
	position: relative;
	height: 100%;
	overflow: hidden;
	border-top-left-radius: calc(0.25rem - 1px);
	border-top-right-radius: calc(0.25rem - 1px);
}

@media (max-width: 768px) {
	.owl-carousel .owl-item .item {
		min-height: 350px !important;
	}
}

@media (max-width: 576px) {
	.owl-carousel .owl-item .item {
		min-height: 250px !important;
	}
}

.width-100 {
	width:100%
}

.owl-carousel .owl-item .item img {
	min-height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	z-index: -1;
	width: 100%;
	height:100%;
}

.owl-carousel .owl-item .item video {
	min-width: 100%;
	min-height: 100%;
}

.owl-carousel .owl-item .item .promo-container {
	position: absolute;
	top: 0;
	height: 600px;
}

.owl-carousel .owl-item .item .promo-container h2 {
	color: white;
}

.owl-carousel .owl-item .item .promo-container .promo {
	height: 200px;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
	height: 600px;
	padding: 40px;
}


  /** End New **/

.hero-slider {
	width: 100%;
	min-height: 580px;
	background-position: center;
	background-color: var(--misc-secondary);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

.hero-slider > .owl-carousel {
	min-height: 580px;
}

.hero-slider > .owl-carousel.dots-inside .owl-dots {
	display: inline-block;
	left: 50%;
	width: auto;
	padding: 10px 22px 14px;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	background-color: var(--secondary-color);
}

.hero-slider > .owl-carousel .owl-prev,
.hero-slider > .owl-carousel .owl-next {
	transition: all 0.35s ease-in-out;
}

.hero-slider > .owl-carousel .owl-prev {
	-webkit-transform: translateX(-150px);
	-ms-transform: translateX(-150px);
	transform: translateX(-150px);
}

.hero-slider > .owl-carousel .owl-next {
	-webkit-transform: translateX(150px);
	-ms-transform: translateX(150px);
	transform: translateX(150px);
}

.hero-slider > .owl-carousel:hover .owl-prev,
.hero-slider > .owl-carousel:hover .owl-next {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

@media (max-width: 991px) {
	.hero-slider > .owl-carousel .owl-prev,
	.hero-slider > .owl-carousel .owl-next {
		display: none;
	}
}

@media (max-width: 1100px) {
	.hero-slider {
		min-height: 430px;
	}
	.hero-slider > .owl-carousel {
		min-height: 430px;
	}
}

.gallery-item {
	margin-bottom: 30px;
}

.gallery-item > a {
	display: block;
	position: relative;
	width: 100%;
	border-radius: var(--radius);
	text-decoration: none;
	overflow: hidden;
}

.gallery-item > a > img {
	display: block;
	width: 100%;
}

.gallery-item > a::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	content: '';
	opacity: 0;
	z-index: 1;
	transition: opacity 0.3s;
}

.gallery-item > a::after {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -19px;
	-webkit-transform: translateY(15px);
	-ms-transform: translateY(15px);
	transform: translateY(15px);
	transition: all 0.35s;
	color: var(--primary-background-color);
	font-family: feather;
	font-size: 26px;
	text-align: center;
	content: '\e036';
	opacity: 0;
	z-index: 5;
}

.gallery-item > a:hover::before {
	opacity: 0.45;
}

.gallery-item > a:hover::after {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.gallery-item > a[data-type='video']::after {
	left: 50%;
	width: 46px;
	height: 46px;
	margin-top: -22px;
	margin-left: -22px;
	padding-left: 5px;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	border-radius: 50%;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 27px;
	line-height: 42px;
	box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
	content: '\e052';
	opacity: 1;
}

.gallery-item .caption {
	display: none;
}

.gallery-item.no-hover-effect > a::before {
	display: none;
}

.grid-no-gap .gallery-item {
	margin-bottom: 0;
}

.grid-no-gap .gallery-item > a {
	border-radius: 0;
}

.owl-carousel .gallery-item {
	margin-bottom: 0;
}

.pswp__zoom-wrap {
	text-align: center;
}

.pswp__zoom-wrap::before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.wrapper {
	line-height: 0;
	width: 100%;
	max-width: 900px;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
	z-index: 1045;
}

.responsive-video {
	position: relative;

	height: 0;
	width: 100%;
}

.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	padding-top: 25px;
	height: 0;
	width: 100%;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

video {
	width: 100% !important;
	height: 100% !important;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

.pswp__caption__center {
	padding: 20px 10px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
}

.countdown {
	display: inline-block;
}

.countdown::after {
	display: block;
	clear: both;
	content: '';
}

.countdown .item {
	display: block;
	margin: 7px;
	float: left;
	text-align: center;
}

.countdown-sm .countdown .item {
    display: block;
    margin: 2px;
    float: left;
	text-align: center;
}

.countdown .item .days,
.countdown .item .hours,
.countdown .item .minutes,
.countdown .item .seconds {
	width: 48px;
	height: 48px;
	margin-bottom: 5px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	font-size: 22px;
	line-height: 46px;
}

.countdown .item .days_ref,
.countdown .item .hours_ref,
.countdown .item .minutes_ref,
.countdown .item .seconds_ref {
	font-size: 12px;
	text-transform: uppercase;
}

/*
 * A sale can now run up to 365 days (issue #1231), three digits wide
 * where the box above was sized for two. Hours, minutes and seconds
 * never pass 59, so only .days needs to grow past its 48px minimum.
 *
 * 2026-09-22 JD
 */
.countdown .item .days {
	width: auto;
	min-width: 48px;
	padding: 0 8px;
}

.countdown.countdown-inverse .item .days,
.countdown.countdown-inverse .item .hours,
.countdown.countdown-inverse .item .minutes,
.countdown.countdown-inverse .item .seconds {
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--primary-background-color);
}

.countdown.countdown-inverse .item .days_ref,
.countdown.countdown-inverse .item .hours_ref,
.countdown.countdown-inverse .item .minutes_ref,
.countdown.countdown-inverse .item .seconds_ref {
	color: rgba(255, 255, 255, 0.8);
}

.countdown.countdown-sm .item .days,
.countdown.countdown-sm .item .hours,
.countdown.countdown-sm .item .minutes,
.countdown.countdown-sm .item .seconds {
	width: 38px;
	height: 38px;
	margin-bottom: 5px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	font-size: 20px;
	line-height: 38px;
}

/*
 * .countdown .item .days (issue #1231, above) grows past two digits by
 * setting min-width and padding - both would otherwise carry into this
 * combined .countdown.countdown-sm selector too (same element, both
 * classes) and widen its .days past every other box here. These order
 * message countdowns (view_track-message-*.php) never run past a
 * handful of days, so .days stays the same fixed size as its siblings.
 *
 * 2026-09-23 JD
 */
.countdown.countdown-sm .item .days {
	min-width: 0;
	padding: 0;
}


.countdown-alert {
	display: inline-block;
}

.countdown-alert::after {
	display: block;
	clear: both;
	content: '';
}

.countdown-alert .item {
	display: block;
	margin: 7px;
	float: left;
	text-align: center;
}

.countdown-alert .item .days,
.countdown-alert .item .hours,
.countdown-alert .item .minutes,
.countdown-alert .item .seconds {
	width: 48px;
	height: 48px;
	margin-bottom: 5px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	font-size: 22px;
	line-height: 46px;
}

.countdown-alert .item .days_ref,
.countdown-alert .item .hours_ref,
.countdown-alert .item .minutes_ref,
.countdown-alert .item .seconds_ref {
	font-size: 12px;
	text-transform: uppercase;
}

.sidebar {
	width: 100%;
	max-width: 400px;
}

.sidebar-toggle {
	display: none;
}

@media (max-width: 991px) {
	.sidebar-offcanvas {
		display: none;
	}
	.sidebar-toggle {
		display: block;
		position: fixed;
		top: 50%;
		width: 48px;
		height: 48px;
		margin-top: -24px;
		border: 1px solid var(--primary-border-color);
		background-color: var(--primary-background-color);
		color: var(--secondary-color) !important;
		font-size: 20px;
		box-shadow: 0 3px 10px 0 var(--sidebar-box-shadow);
		cursor: pointer;
		z-index: 99999;
		text-decoration: none;
		text-align: center;
	}
	.sidebar-toggle > i {
		margin-top: -8px;
	}
	.sidebar-toggle.position-right {
		right: 0;
		transition: right 0.3s ease-in-out;
		border-top-left-radius: 24px;
		border-bottom-left-radius: 24px;
	}
	.sidebar-toggle.position-right.sidebar-open {
		right: -48px;
	}
	.sidebar-toggle.position-left {
		left: 0;
		transition: left 0.3s ease-in-out;
		border-top-right-radius: 24px;
		border-bottom-right-radius: 24px;
	}
	.sidebar-toggle.position-left.sidebar-open {
		left: -48px;
	}
	.offcanvas-open .sidebar-toggle {
		display: none;
	}
}

.widget-title {
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--primary-border-color);
	color: var(--text-muted-color);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
}

.widget {
	margin-bottom: 30px;
}

.widget .form-group {
	margin-bottom: 0;
}

.widget ul {
	margin-bottom: 12px;
}

.widget .market-button:last-child {
	margin-bottom: 0;
}

.widget .custom-control:last-child {
	margin-bottom: 0 !important;
}

.widget-categories ul,
.widget-links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget-categories ul > li,
.widget-links ul > li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 14px;
}

.widget-categories ul > li:last-child,
.widget-links ul > li:last-child {
	margin-bottom: 0;
}

.widget-categories ul > li::before,
.widget-links ul > li::before {
	display: block;
	position: absolute;
	top: 12px;
	left: 0;
	width: 0;
	height: 0;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	color: var(--text-muted-color);
	content: '';
}

.widget-categories ul > li > a,
.widget-links ul > li > a {
	display: inline-block;
	transition: color 0.3s;
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.widget-categories ul > li > a:hover,
.widget-links ul > li > a:hover {
	color: var(--link-color);
}

.widget-categories ul > li.active > a,
.widget-links ul > li.active > a {
	color: var(--link-color);
}

.widget-categories ul > li > span,
.widget-links ul > li > span {
	margin-left: 4px;
	color: var(--text-muted-color);
}

.widget-categories ul > li.has-children ul,
.widget-links ul > li.has-children ul {
	border-left: 1px solid #dee5ea;
}

.widget-categories ul > li.has-children ul li::before,
.widget-links ul > li.has-children ul li::before {
	top: 14px;
	width: 8px;
	height: 1px;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	border: 0;
	background-color: #dee5ea;
	color: transparent;
}

.widget-categories ul > li.has-children ul li a,
.widget-links ul > li.has-children ul li a {
	font-size: 13px;
}

.widget-categories ul > li.has-children ul ul > li,
.widget-links ul > li.has-children ul ul > li {
	margin-bottom: 0;
}

.widget-categories ul > li.has-children > ul,
.widget-links ul > li.has-children > ul {
	max-height: 0;
	transition: max-height 0.6s;
	overflow: hidden;
}

.widget-categories ul > li.has-children.expanded::before,
.widget-links ul > li.has-children.expanded::before {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
}

.widget-categories ul > li.has-children.expanded > ul,
.widget-links ul > li.has-children.expanded > ul {
	max-height: 2400px;
}

.widget-featured-posts > .entry,
.widget-featured-products > .entry {
	display: table;
	width: 100%;
	margin-bottom: 18px;
}

.widget-featured-posts > .entry .entry-thumb,
.widget-featured-posts > .entry .entry-content,
.widget-featured-products > .entry .entry-thumb,
.widget-featured-products > .entry .entry-content {
	display: table-cell;
	vertical-align: middle;
}

.widget-featured-posts > .entry .entry-thumb,
.widget-featured-products > .entry .entry-thumb {
	width: 62px;
	padding-right: 12px;
}

.widget-featured-posts > .entry .entry-thumb > a,
.widget-featured-products > .entry .entry-thumb > a {
	display: block;
	border-radius: 50%;
	overflow: hidden;
}

.widget-featured-posts > .entry .entry-thumb > a > img,
.widget-featured-products > .entry .entry-thumb > a > img {
	width: 100%;
}

.widget-featured-posts > .entry .entry-title,
.widget-featured-products > .entry .entry-title {
	margin-bottom: 0;
	font-size: 14px;
}

.widget-featured-posts > .entry .entry-title > a,
.widget-featured-products > .entry .entry-title > a {
	transition: color 0.3s;
	color: var(--secondary-color);
	font-weight: 500;
	text-decoration: none;
}

.widget-featured-posts > .entry .entry-title > a:hover,
.widget-featured-products > .entry .entry-title > a:hover {
	color: var(--primary-color);
}

.widget-featured-posts > .entry .entry-meta,
.widget-featured-products > .entry .entry-meta {
	display: block;
	margin-bottom: 0;
	padding-top: 4px;
	color: var(--text-muted-color);
	font-size: 12px;
}

.widget-featured-products > .entry {
	margin-bottom: 12px;
}

.widget-featured-products > .entry .entry-thumb > a {
	border-radius: 0;
}

.widget-featured-products > .entry .entry-meta {
	color: var(--secondary-color);
	font-size: 13px;
}

.bootstrap-tagsinput .badge,
.tag {
	display: inline-block;
	height: 28px;
	margin-right: 4px;
	margin-bottom: 8px;
	padding: 0 12px;
	transition: all 0.3s;
	border: 1px solid var(--primary-border-color) !important;
	border-radius: 14px;
	color: var(--secondary-color) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 25px;
	text-decoration: none !important;
	white-space: nowrap;
}

.bootstrap-tagsinput .badge:hover,
.tag:hover {
	background-color: var(--form-disabled-background);
	color: var(--secondary-color) !important;
}

.tag.active {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: var(--text-on-brand) !important;
	cursor: default;
	text-decoration: none !important;
}

.tag.active:hover {
	background-color: var(--primary-background-color);
	color: var(--link-color) !important;
	cursor: pointer;
}

.tag.warning {
	border-color: var(--warning-color);
	background-color: var(--warning-color);
	color: var(--text-on-brand) !important;
	cursor: default;
}

.tag.warning:hover {
	background-color: var(--primary-background-color);
	color: var(--warning-color) !important;
	cursor: pointer;
}

.tag.danger {
	border-color: var(--danger-color);
	background-color: var(--danger-color);
	color: var(--primary-background-color) !important;
	cursor: default;
}

.tag.danger:hover {
	background-color: var(--primary-background-color);
	color: var(--danger-color) !important;
	cursor: pointer;
}

.tag.success {
	border-color: var(--success-color);
	background-color: var(--success-color);
	color: var(--text-on-brand) !important;
	cursor: default;
}

.tag.success:hover {
	background-color: var(--primary-background-color);
	color: var(--success-text-color) !important;
	cursor: pointer;
}

.text-right .tag {
	margin-right: 0;
	margin-left: 4px;
}

.text-center .tag {
	margin-right: 2px;
	margin-left: 2px;
}

.widget-order-summary .table td {
	padding: 6px 0;
	border: 0;
}

.widget-order-summary .table td:last-child {
	text-align: right;
}

.widget-order-summary .table tr:first-child > td {
	padding-top: 0;
}

.widget-order-summary .table tr:last-child > td {
	padding-top: 12px;
	border-top: 1px solid var(--primary-border-color);
}

.widget-order-summary .table tr:nth-last-child(2) > td {
	padding-bottom: 12px;
}

.noUi-target,
.noUi-target * {
	-ms-touch-action: none;
	touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.noUi-target {
	position: relative;
	border-radius: var(--radius-sm);
	direction: ltr;
}

.noUi-base {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* Fix 401 */
}

.noUi-origin {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.noUi-handle {
	position: relative;
	z-index: 1;
}

.noUi-stacking .noUi-handle {
	z-index: 10;
}

.noUi-state-tap .noUi-origin {
	transition: left 0.3s, top 0.3s;
}

.noUi-state-drag * {
	cursor: inherit !important;
}

.noUi-base,
.noUi-handle {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.noUi-horizontal {
	height: 4px;
}

.noUi-horizontal .noUi-handle {
	top: -6px;
	left: -8px;
	width: 16px;
	height: 16px;
}

.noUi-background {
	background: #ededed;
}

.noUi-connect {
	transition: background 0.45s;
	background: var(--text-muted-color);
}

/* Handles and cursors;
 */
.noUi-draggable {
	cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
	cursor: n-resize;
}

.noUi-handle {
	border: 4px solid var(--text-muted-color);
	border-radius: 50%;
	background: var(--primary-background-color);
	cursor: default;
}

.price-range-slider {
	padding-top: 9px;
}

.price-range-slider .ui-range-slider-footer {
	display: table;
	width: 100%;
	padding-top: 30px;
}

.price-range-slider .ui-range-slider-footer > .column {
	display: table-cell;
	vertical-align: middle;
}

.price-range-slider .ui-range-slider-footer > .column:first-child {
	width: 40%;
}

.price-range-slider .ui-range-slider-footer > .column:last-child {
	width: 60%;
	padding-left: 15px;
	text-align: right;
}

.price-range-slider .ui-range-slider-footer .btn {
	height: 28px;
	margin: 0;
	padding: 0 15px;
	line-height: 26px;
}

.price-range-slider .ui-range-values {
	display: inline-block;
}

.price-range-slider .ui-range-values .ui-range-value-min,
.price-range-slider .ui-range-values .ui-range-value-max {
	display: inline-block;
	font-size: 14px;
}

.widget-light-skin .widget-title {
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.5);
}

.widget-light-skin.widget-categories ul > li::before,
.widget-light-skin.widget-links ul > li::before {
	color: rgba(255, 255, 255, 0.15);
}

.widget-light-skin.widget-categories ul > li > a,
.widget-light-skin.widget-links ul > li > a {
	color: var(--text-white-color);
}

.widget-light-skin.widget-categories ul > li > a:hover,
.widget-light-skin.widget-links ul > li > a:hover {
	color: var(--link-color);
}

.widget-light-skin.widget-categories ul > li.active > a,
.widget-light-skin.widget-links ul > li.active > a {
	color: var(--link-color);
}

.widget-light-skin.widget-categories ul > li > span,
.widget-light-skin.widget-links ul > li > span {
	color: rgba(255, 255, 255, 0.5);
}

.widget-light-skin.widget-featured-posts > .entry .entry-title > a,
.widget-light-skin.widget-featured-products > .entry .entry-title > a {
	color: var(--primary-background-color);
}

.widget-light-skin.widget-featured-posts > .entry .entry-title > a:hover,
.widget-light-skin.widget-featured-products > .entry .entry-title > a:hover {
	color: var(--primary-color);
}

.widget-light-skin.widget-featured-posts > .entry .entry-meta,
.widget-light-skin.widget-featured-products > .entry .entry-meta {
	color: rgba(255, 255, 255, 0.5);
}

.widget-light-skin .tag {
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--primary-background-color) !important;
}

.widget-light-skin .tag:hover {
	background-color: var(--misc-secondary);
	color: var(--secondary-color) !important;
}

.widget-light-skin .tag.active {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: var(--text-on-brand) !important;
}

.steps .step {
	display: block;
	width: 100%;
	margin-bottom: 35px;
	text-align: center;
}

.steps .step .step-icon-wrap {
	display: block;
	position: relative;
	width: 100%;
	height: 80px;
	text-align: center;
}

.steps .step .step-icon-wrap::before,
.steps .step .step-icon-wrap::after {
	display: block;
	position: absolute;
	top: 50%;
	width: 50%;
	height: 3px;
	margin-top: -1px;
	background-color: var(--primary-border-color);
	content: '';
	z-index: 1;
}

.steps .step .step-icon-wrap::before {
	left: 0;
}

.steps .step .step-icon-wrap::after {
	right: 0;
}

.steps .step .step-icon {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	border: 1px solid var(--primary-border-color);
	border-radius: 50%;
	background-color: var(--misc-secondary);
	color: var(--third-color);
	font-size: 38px;
	line-height: 81px;
	z-index: 5;
}

.steps .step .step-title {
	margin-top: 16px;
	margin-bottom: 0;
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
}

.steps .step:first-child .step-icon-wrap::before {
	display: none;
}

.steps .step:last-child .step-icon-wrap::after {
	display: none;
}

.steps .step.completed .step-icon-wrap::before,
.steps .step.completed .step-icon-wrap::after {
	background-color: var(--primary-color);
}

.steps .step.completed .step-icon {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: var(--text-on-brand);
}

@media (max-width: 576px) {
	.flex-sm-nowrap .step .step-icon-wrap::before,
	.flex-sm-nowrap .step .step-icon-wrap::after {
		display: none;
	}
}

@media (max-width: 768px) {
	.flex-md-nowrap .step .step-icon-wrap::before,
	.flex-md-nowrap .step .step-icon-wrap::after {
		display: none;
	}
}

@media (max-width: 991px) {
	.flex-lg-nowrap .step .step-icon-wrap::before,
	.flex-lg-nowrap .step .step-icon-wrap::after {
		display: none;
	}
}

@media (max-width: 1200px) {
	.flex-xl-nowrap .step .step-icon-wrap::before,
	.flex-xl-nowrap .step .step-icon-wrap::after {
		display: none;
	}
}

.promo-box {
	position: relative;
	padding-right: 4px;
	padding-left: 4px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 8px;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
	height: 100px;
	max-height: 100px;
	border: 1px solid var(--primary-border-color);
}

.promo-box-big {
	position: relative;
	padding-right: 4px;
	padding-left: 4px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 8px;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
}

.promo-header {
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	background-position: center;
	background-color: var(--misc-secondary);
	background-repeat: no-repeat;
	background-size: cover;
}

.promo-box-lg {
	position: relative;
	padding-right: 4px;
	padding-left: 4px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 8px;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
	height: 120px;
	max-height: 120px;
}

.promo-box:hover {
	position: relative;
	padding-right: 4px;
	padding-left: 4px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 8px;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
	height: 100px;
	max-height: 100px;
	background-color: #000000;
	opacity: 0.5;
	z-index: 1;
	cursor: pointer;
	content: 'Hello';
	color: white;
	font: 900;
	font-size: 17px;
}

.promo-box-lg:hover {
	position: relative;
	padding-right: 4px;
	padding-left: 4px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 8px;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
	height: 120px;
	max-height: 120px;
	background-color: #000000;
	opacity: 0.5;
	z-index: 1;
	cursor: pointer;
	content: 'Hello';
}

.promo-box .hover-listing {
	opacity: 0;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 10px 10px;
	height: 100%;
	width: 100%;
	color: var(--primary-background-color);
	background: #000000;
	text-decoration: none;
	text-align: center;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
}
.promo-box:hover .hover-listing {
	opacity: 0.8;
}

.promo-box .overlay-dark,
.promo-box .overlay-light,
.promo-header .overlay-dark,
.promo-header .overlay-light  {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	content: '';
	opacity: 0.5;
	z-index: 1;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
}

.promo-box .overlay-light {
	background-color: var(--primary-background-color);
}

.promo-box .promo-box-content {
	position: relative;
	z-index: 5;
}

.promo-header .promo-box-content {
	position: relative;
	z-index: 5;
}

.promo-box-lg .hover-listing {
	opacity: 0;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 10px 10px;
	height: 100%;
	width: 100%;
	color: var(--primary-background-color);
	background: #000000;
	text-decoration: none;
	text-align: center;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
}
.promo-box-lg:hover .hover-listing {
	opacity: 0.8;
}

.promo-box-lg .overlay-dark,
.promo-box-lg .overlay-light {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	content: '';
	opacity: 0.5;
	z-index: 1;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
}

.promo-box-lg .overlay-light {
	background-color: var(--primary-background-color);
}

.promo-box-lg .promo-box-content {
	position: relative;
	z-index: 5;
}

.promo-box-big .hover-listing {
	opacity: 0;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 10px 10px;
	height: 100%;
	width: 100%;
	color: var(--primary-background-color);
	background: #000000;
	text-decoration: none;
	text-align: center;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
}
.promo-box-big:hover .hover-listing {
	opacity: 0.8;
}

.promo-box-big .overlay-dark,
.promo-box-big .overlay-light {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	content: '';
	opacity: 0.5;
	z-index: 1;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	border-bottom-right-radius: calc(var(--radius) - 1px);
}

.promo-box-big .overlay-light {
	background-color: var(--primary-background-color);
}

.promo-box-big .promo-box-content {
	position: relative;
	z-index: 5;
}

.fw-section,
.fh-section {
	position: relative;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.fw-section > .overlay,
.fh-section > .overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	content: '';
	opacity: 0.6;
	z-index: 0;
}

.fw-section > .container,
.fw-section > .container-fluid,
.fw-section > div,
.fh-section > .container,
.fh-section > .container-fluid,
.fh-section > div {
	position: relative;
}

.fw-section.bg-fixed,
.fh-section.bg-fixed {
	background-attachment: fixed;
}

.fw-section.no-cover-bg,
.fh-section.no-cover-bg {
	background-size: auto;
}

.fw-section {
	width: 100%;
}

.fh-section {
	height: 100vh;
}

.isotope-grid {
	position: relative;
	overflow: hidden;
}

/*.isotope-grid:not(.filter-grid) {
  min-height: 180px;
  background-position: center;
  background-image: url(../img/loading.gif);
  background-repeat: no-repeat;
  background-size: 74px;
}

.isotope-grid:not(.filter-grid) > .grid-item {
  display: none;
}

.isotope-grid:not(.filter-grid)[style] {
  background: none;
}

.isotope-grid:not(.filter-grid)[style] > .grid-item {
  display: inline-block;
  -webkit-animation: showGrid .6s;
          animation: showGrid .6s;
}*/

.isotope-grid .gutter-sizer {
	width: 30px;
}

.isotope-grid .grid-item {
	margin-bottom: 30px;
}

.isotope-grid .grid-item .post-tile,
.isotope-grid .grid-item .portfolio-tile {
	margin-bottom: 0;
}

.isotope-grid.cols-1 .gutter-sizer {
	width: 0;
}

.isotope-grid.cols-1 .grid-sizer,
.isotope-grid.cols-1 .grid-item {
	width: 100%;
}

.isotope-grid.cols-2 .grid-sizer,
.isotope-grid.cols-2 .grid-item {
	width: calc((100% / 2) - 15px);
}

.isotope-grid.cols-3 .grid-sizer,
.isotope-grid.cols-3 .grid-item {
	width: calc((100% / 3) - 20px);
}

.isotope-grid.cols-4 .grid-sizer,
.isotope-grid.cols-4 .grid-item {
	width: calc((100% / 4) - 22.5px);
}

.isotope-grid.cols-5 .grid-sizer,
.isotope-grid.cols-5 .grid-item {
	width: calc((100% / 5) - 24px);
}

.isotope-grid.cols-6 .grid-sizer,
.isotope-grid.cols-6 .grid-item {
	width: calc((100% / 6) - 25px);
}

@media (max-width: 1200px) {
	.isotope-grid.cols-6 .grid-sizer,
	.isotope-grid.cols-6 .grid-item,
	.isotope-grid.cols-5 .grid-sizer,
	.isotope-grid.cols-5 .grid-item,
	.isotope-grid.cols-4 .grid-sizer,
	.isotope-grid.cols-4 .grid-item,
	.isotope-grid.cols-3 .grid-sizer,
	.isotope-grid.cols-3 .grid-item {
		width: calc((100% / 3) - 22.5px);
	}
}

@media (max-width: 768px) {
	.isotope-grid.cols-6 .grid-sizer,
	.isotope-grid.cols-6 .grid-item,
	.isotope-grid.cols-5 .grid-sizer,
	.isotope-grid.cols-5 .grid-item,
	.isotope-grid.cols-4 .grid-sizer,
	.isotope-grid.cols-4 .grid-item,
	.isotope-grid.cols-3 .grid-sizer,
	.isotope-grid.cols-3 .grid-item {
		width: calc((100% / 2) - 15px);
	}
}

@media (max-width: 576px) {
	.isotope-grid.cols-6 .gutter-sizer,
	.isotope-grid.cols-5 .gutter-sizer,
	.isotope-grid.cols-4 .gutter-sizer,
	.isotope-grid.cols-3 .gutter-sizer,
	.isotope-grid.cols-2 .gutter-sizer {
		width: 0;
	}
	.isotope-grid.cols-6 .grid-sizer,
	.isotope-grid.cols-6 .grid-item,
	.isotope-grid.cols-5 .grid-sizer,
	.isotope-grid.cols-5 .grid-item,
	.isotope-grid.cols-4 .grid-sizer,
	.isotope-grid.cols-4 .grid-item,
	.isotope-grid.cols-3 .grid-sizer,
	.isotope-grid.cols-3 .grid-item,
	.isotope-grid.cols-2 .grid-sizer,
	.isotope-grid.cols-2 .grid-item {
		width: 100%;
	}
}

.isotope-grid.grid-no-gap .gutter-sizer {
	width: 0;
}

.isotope-grid.grid-no-gap .grid-item {
	margin-bottom: 0;
}

.isotope-grid.grid-no-gap.cols-2 .grid-sizer,
.isotope-grid.grid-no-gap.cols-2 .grid-item {
	width: 50%;
}

.isotope-grid.grid-no-gap.cols-3 .grid-sizer,
.isotope-grid.grid-no-gap.cols-3 .grid-item {
	width: 33.3333333333%;
}

.isotope-grid.grid-no-gap.cols-4 .grid-sizer,
.isotope-grid.grid-no-gap.cols-4 .grid-item {
	width: 25%;
}

.isotope-grid.grid-no-gap.cols-5 .grid-sizer,
.isotope-grid.grid-no-gap.cols-5 .grid-item {
	width: 20%;
}

.isotope-grid.grid-no-gap.cols-6 .grid-sizer,
.isotope-grid.grid-no-gap.cols-6 .grid-item {
	width: 16.6666666667%;
}

@media (max-width: 1200px) {
	.isotope-grid.grid-no-gap.cols-6 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-6 .grid-item,
	.isotope-grid.grid-no-gap.cols-5 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-5 .grid-item,
	.isotope-grid.grid-no-gap.cols-4 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-4 .grid-item,
	.isotope-grid.grid-no-gap.cols-3 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-3 .grid-item {
		width: 33.3333333333%;
	}
}

@media (max-width: 768px) {
	.isotope-grid.grid-no-gap.cols-6 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-6 .grid-item,
	.isotope-grid.grid-no-gap.cols-5 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-5 .grid-item,
	.isotope-grid.grid-no-gap.cols-4 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-4 .grid-item,
	.isotope-grid.grid-no-gap.cols-3 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-3 .grid-item {
		width: 50%;
	}
}

@media (max-width: 576px) {
	.isotope-grid.grid-no-gap.cols-6 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-6 .grid-item,
	.isotope-grid.grid-no-gap.cols-5 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-5 .grid-item,
	.isotope-grid.grid-no-gap.cols-4 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-4 .grid-item,
	.isotope-grid.grid-no-gap.cols-3 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-3 .grid-item,
	.isotope-grid.grid-no-gap.cols-2 .grid-sizer,
	.isotope-grid.grid-no-gap.cols-2 .grid-item {
		width: 100%;
	}
}

@-webkit-keyframes showGrid {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes showGrid {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@supports (-ms-ime-align: auto) {
	.isotope-grid:not(.filter-grid) {
		min-height: auto;
		background: none;
	}
	.isotope-grid:not(.filter-grid) > .grid-item {
		display: inline-block;
	}
	.isotope-grid:not(.filter-grid)[style] > .grid-item {
		-webkit-animation: none;
		animation: none;
	}
}

.topbar {
	display: table;
	position: relative;
	width: 100%;
	height: 40px;
	padding: 0 30px;
	border-bottom: 1px solid var(--primary-border-color);
	background-color: var(--misc-secondary);
	z-index: 9010;
}

.topbar .topbar-column {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
}

.topbar .topbar-column:last-child {
	text-align: right;
}

.topbar .topbar-column:first-child {
	text-align: left;
}

.topbar .topbar-column a:not(.social-button),
.topbar .topbar-column span,
.topbar .topbar-column p {
	color: var(--secondary-color);
	font-size: 13px;
}

.topbar .topbar-column > a:not(.social-button),
.topbar .topbar-column > span,
.topbar .topbar-column > p {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 5px;
}

.topbar .topbar-column > a:not(.social-button) > i,
.topbar .topbar-column > span > i,
.topbar .topbar-column > p > i {
	margin-top: -3px;
}

.topbar .topbar-column > a:not(.social-button) > i.icon-download,
.topbar .topbar-column > span > i.icon-download,
.topbar .topbar-column > p > i.icon-download {
	margin-top: -4px;
}

.topbar .topbar-column a:not(.social-button) {
	transition: color 0.3s;
	text-decoration: none;
}

.topbar .topbar-column a:not(.social-button):hover {
	color: var(--link-color);
}

.social-button-select {
	color: var(--link-color);
}

.topbar .topbar-column:last-child > a:not(.social-button),
.topbar .topbar-column:last-child > span,
.topbar .topbar-column:last-child > p {
	margin-left: 20px;
}

.topbar .topbar-column:first-child > a:not(.social-button),
.topbar .topbar-column:first-child > span,
.topbar .topbar-column:first-child > p {
	margin-right: 20px;
}

.topbar.topbar-ghost {
	position: absolute;
	top: 0;
	left: 0;
	border-bottom-color: rgba(255, 255, 255, 0.15);
	background-color: rgba(255, 255, 255, 0.05);
}

.topbar.topbar-ghost .topbar-column a:not(.social-button):not(.dropdown-item),
.topbar.topbar-ghost .topbar-column span,
.topbar.topbar-ghost .topbar-column p {
	color: var(--primary-background-color);
}

.topbar.topbar-ghost .topbar-column a:not(.social-button):not(.dropdown-item):hover {
	color: var(--primary-color);
}

.topbar.topbar-ghost .lang-currency-switcher-wrap .lang-currency-switcher > .currency {
	border-left-color: rgba(255, 255, 255, 0.15);
}

.topbar.topbar-ghost .dropdown-toggle::after {
	color: var(--primary-background-color);
}

.dropdown-icon .dropdown-toggle::after {
	display: none;
}

.lang-currency-switcher-wrap {
	display: inline-block;
	position: relative;
	margin-left: 22px;
	cursor: pointer;
	vertical-align: middle;
}

.lang-currency-switcher-wrap .lang-currency-switcher > .language,
.lang-currency-switcher-wrap .lang-currency-switcher > .currency,
.lang-currency-switcher-wrap .lang-currency-switcher::after {
	display: inline-block;
	transition: color 0.3s;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	vertical-align: middle;
}

.lang-currency-switcher-wrap .lang-currency-switcher > .language {
	width: 20px;
}

.lang-currency-switcher-wrap .lang-currency-switcher > .currency {
	margin-left: 12px;
	padding: 4px 0 4px 12px;
	border-left: 1px solid var(--primary-border-color);
}

.lang-currency-switcher-wrap .lang-currency-switcher::after {
	margin-left: 6px;
	transition: all 0.3s;
}

.lang-currency-switcher-wrap .lang-currency-switcher:hover > .language,
.lang-currency-switcher-wrap .lang-currency-switcher:hover > .currency,
.lang-currency-switcher-wrap .lang-currency-switcher:hover::after {
	color: var(--link-color);
}

.lang-currency-switcher-wrap.show > .lang-currency-switcher .currency,
.lang-currency-switcher-wrap.show > .lang-currency-switcher::after {
	color: var(--link-color);
}

.lang-currency-switcher-wrap .dropdown-menu {
	right: 0;
	left: auto;
	padding-bottom: 12px;
}

.lang-currency-switcher-wrap .dropdown-item {
	padding-top: 4px;
	padding-bottom: 4px;
}

.lang-currency-switcher-wrap .dropdown-item > img {
	display: inline-block;
	width: 17px;
	margin-top: -1px;
	margin-right: 7px;
	vertical-align: middle;
}

.lang-currency-switcher-wrap .currency-select {
	padding-top: 7px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}

.site-search {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	transition: 0.3s;
	background-color: var(--primary-background-color);
	opacity: 0;
	visibility: hidden;
	z-index: 10;
}

.site-search > input {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	padding-right: 120px;
	padding-left: 30px;
	border: 0;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 16px;
}

.site-search > input:focus {
	outline: 0;
}

.site-search > input::-moz-placeholder {
	color: var(--text-muted-color);
	opacity: 1;
}

.site-search > input:-ms-input-placeholder {
	color: var(--text-muted-color);
}

.site-search > input::-webkit-input-placeholder {
	color: var(--text-muted-color);
}

.site-search .search-tools {
	position: absolute;
	top: 50%;
	right: 30px;
	margin-top: -20px;
	z-index: 5;
}

.site-search .search-tools .clear-search,
.site-search .search-tools .close-search {
	display: inline-block;
	transition: color 0.25s;
	cursor: pointer;
	vertical-align: middle;
}

.site-search .search-tools .clear-search {
	padding: 10px 0;
	color: var(--text-muted-color);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-search .search-tools .clear-search:hover {
	color: var(--secondary-color);
}

.site-search .search-tools .close-search {
	margin-left: 10px;
	padding-top: 4px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.site-search .search-tools .close-search:hover {
	color: var(--text-muted-color);
}

.site-search.search-visible {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 1200px) {
	.site-search > input {
		padding-right: 105px;
		padding-left: 15px;
	}
	.site-search .search-tools {
		right: 15px;
	}
}

.navbar {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 84px;
	border-bottom: 1px solid var(--primary-border-color);
	background-color: var(--secondary-background-color);
	z-index: 9000;
}

.navbar.navbar-stuck {
	position: fixed;
	box-shadow: 0 3px 25px 0 rgba(47, 56, 68, 0.22);
	z-index: 9010;
}

.site-branding {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 5;
}

.site-branding .inner {
	display: table;
	height: 100%;
	min-height: 100%;
}

.site-logo,
.offcanvas-toggle {
	display: table-cell;
	vertical-align: middle;
}

.site-logo {
	width: 154px;
	padding: 12px 0 12px 25px;
	text-decoration: none;
}

.site-logo > img {
	display: block;
	width: 100%;
}

/* Compact counter mark shown in place of the wordmark on phones. Sized by a
   fixed box so it never inherits the wordmark's full-width rule above. The box
   matches the compact cut's own ratio (54.5 x 45.75), so the mark is not
   stretched; object-fit keeps that true if the artwork is ever recut. The old
   43x28 box was cut for the retired "sc" mark, whose ratio was 1.55. */
.site-logo > img.header-mark {
	width: 33.4px;   /* 28 * (54.5 / 45.75), the compact cut's own ratio */
	height: 28px;
	object-fit: contain;
}

.site-logo.logo-stuck {
	display: none;
}

.navbar-ghost.navbar-stuck .site-logo {
	display: none;
}

.navbar-ghost.navbar-stuck .site-logo.logo-stuck {
	display: table-cell;
}

.offcanvas-toggle {
	width: 74px;
	transition: color 0.3s;
	border-right: 1px solid var(--primary-border-color);
	color: var(--secondary-color);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.offcanvas-toggle::before {
	display: inline-block;
	font-family: feather;
	content: '\e120';
}

.offcanvas-toggle:hover {
	color: var(--primary-color);
}

.offcanvas-toggle.menu-toggle {
	display: none;
}

.site-menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1;
}

.site-menu ul {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.site-menu ul > li > a {
	padding: 0 15px;
	transition: color 0.3s;
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	word-wrap: break-word;
}

.sub-menu > h6 > a {
	color: var(--primary-text-color);
	text-decoration: none;
	display: block;
	position: relative;
	width: 100%;
}

.sub-menu > a {
	color: var(--primary-text-color);
	text-decoration: none;
	display: block;
	position: relative;
	width: 100%;
}

.site-menu ul > li:hover > a {
	color: var(--link-color);
}

.site-menu ul > li.active > a {
	color: var(--link-color);
}

.site-menu > ul {
	display: table;
	height: 100%;
	min-height: 100%;
}

.site-menu > ul > li {
	display: table-cell;
	position: relative;
	vertical-align: middle;
}

.site-menu > ul > li > a {
	display: table;
	height: 100%;
	min-height: 100%;
	border-top: 1px solid transparent;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.site-menu > ul > li > a > span {
	display: table-cell;
	vertical-align: middle;
}

.site-menu > ul > li.active > a {
	border-top-color: var(--primary-color);
}

.site-menu ul > li:hover > .sub-menu {
	display: block;
	-webkit-animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.site-menu ul > li:hover > .mega-menu {
	display: table;
	-webkit-animation: megamenu-show 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: megamenu-show 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.site-menu ul > li:hover > .mega-menu .sub-menu {
	-webkit-animation: none;
	animation: none;
}

.site-menu > ul > li.has-megamenu {
	position: static;
}

.toolbar {
	position: absolute;
	top: 0;
	right: 30px;
	height: 100%;
	z-index: 5;
}

.toolbar .inner {
	display: table;
	height: 100%;
	min-height: 100%;
}

.toolbar .tools {
	display: table-cell;
	vertical-align: middle;
}

.toolbar .search,
.toolbar .account,
.toolbar .cart {
	display: inline-block;
	position: relative;
	width: 44px;
	height: 44px;
	margin-left: 6px;
	transition: background-color 0.35s;
	border: 1px solid var(--primary-border-color);
	border-radius: 50%;
	color: var(--secondary-color);
	font-size: 17px;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
}

.toolbar .search > i,
.toolbar .account > i,
.toolbar .cart > i {
	line-height: 39px;
}

.toolbar .search > a,
.toolbar .account > a,
.toolbar .cart > a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.toolbar .search:hover,
.toolbar .account:hover,
.toolbar .cart:hover {
	background-color: var(--misc-secondary);
}

.toolbar .account > a::after,
.toolbar .cart > a::after {
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	height: 18px;
	margin-top: -10px;
	content: '';
}

.toolbar .search > i {
	line-height: 40px;
}

.toolbar .cart {
	width: auto;
	padding: 0 16px;
	border-radius: 22px;
}

.toolbar .cart > a {
	border-radius: 22px;
}

.toolbar .cart > .count,
.toolbar .cart > .subtotal {
	display: inline-block;
	margin-top: 2px;
	font-size: 14px;
	vertical-align: middle;
}

.toolbar .cart > .count {
	margin-left: 5px;
}

.toolbar .cart > .subtotal {
	margin-left: 11px;
	padding: 1px 0 1px 12px;
	border-left: 1px solid var(--primary-border-color);
}

@media (max-width: 1200px) {
	.toolbar .cart {
		padding: 0 14px;
	}
	.toolbar .cart > .subtotal {
		display: none;
	}
}

.toolbar-dropdown {
	margin-top: 7px !important;
	text-align: left;
}



.toolbar .account > .toolbar-dropdown {
	left: 50%;
	margin-left: -100px;
}

.toolbar .cart > .toolbar-dropdown {
	right: 0;
	left: auto;
	width: 350px;
}

.toolbar .cart > .toolbar-dropdown > .toolbar-dropdown-group {
	display: table;
	width: 100%;
	padding-top: 9px;
	padding-bottom: 9px;
	border-top: 1px solid var(--primary-border-color);
}

.toolbar .cart > .toolbar-dropdown > .toolbar-dropdown-group:last-child {
	border-top: 0;
}

.toolbar .cart > .toolbar-dropdown > .toolbar-dropdown-group > .column {
	display: table-cell;
	vertical-align: top;
}

.toolbar .cart > .toolbar-dropdown > .toolbar-dropdown-group > .column:first-child {
	padding-right: 6px;
}

.toolbar .cart > .toolbar-dropdown > .toolbar-dropdown-group > .column:last-child {
	padding-left: 6px;
}

.toolbar .cart > .toolbar-dropdown > .toolbar-dropdown-group .btn {
	margin: 0;
}

.dropdown-product-item {
	display: table;
	position: relative;
	width: 100%;
	padding: 9px 0;
	border-top: 1px solid var(--primary-border-color);
}

.dropdown-product-item:hover {
	background-color: var(--dropdown-item-hover);
}

.dropdown-product-item:first-child {
	border-top: 0;
}

.dropdown-product-item > .dropdown-product-thumb,
.dropdown-product-item > .dropdown-product-info {
	display: table-cell;
	vertical-align: top;
}

.dropdown-product-item > .dropdown-product-thumb {
	width: 50px;
	border-radius: 50%;
}

.dropdown-product-item > .dropdown-product-thumb > img {
	display: block;
	width: 100%;
}

.dropdown-product-item > .dropdown-product-remove {
	display: block;
	position: absolute;
	top: 12px;
	right: 0;
	color: var(--danger-color);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.dropdown-product-item > .dropdown-product-info {
	padding-right: 15px;
	padding-left: 12px;
}

/* Makes the side listings smaller on col-2 */
.col-lg-2 > .sidebar > .widget > .widget > .entry > .product-list > .product-info,
.col-lg-2 > .widget > .widget > .entry > .product-list > .product-info {
	display: none;
}

.dropdown-product-item .dropdown-product-title {
	display: block;
	padding-top: 2px;
	transition: color 0.3s;
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.dropdown-product-item .dropdown-product-title:hover {
	color: var(--link-color);
}

.dropdown-product-item .dropdown-product-details {
	color: var(--text-muted-color);
	font-size: 14px;
}

.dropdown-product-details a {
	text-decoration: none;
	font-size: 14px;
}

.toolbar .account:hover > .toolbar-dropdown,
.toolbar .cart:hover > .toolbar-dropdown {
	display: block;
	-webkit-animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navbar-ghost:not(.navbar-stuck) {
	position: absolute;
	top: 40px;
	border-bottom-color: rgba(255, 255, 255, 0.15);
	background-color: transparent;
}

.navbar-ghost:not(.navbar-stuck) .offcanvas-toggle {
	border-right-color: rgba(255, 255, 255, 0.15);
	color: var(--primary-background-color);
}

.navbar-ghost:not(.navbar-stuck) .offcanvas-toggle:hover {
	color: var(--primary-color);
}

.navbar-ghost:not(.navbar-stuck) .site-menu > ul > li > a {
	color: var(--primary-background-color);
}

.navbar-ghost:not(.navbar-stuck) .site-menu > ul > li:hover > a {
	color: var(--primary-color);
}

.navbar-ghost:not(.navbar-stuck) .site-menu > ul > li.active > a {
	color: var(--primary-color);
}

.navbar-ghost:not(.navbar-stuck) .toolbar .search,
.navbar-ghost:not(.navbar-stuck) .toolbar .account,
.navbar-ghost:not(.navbar-stuck) .toolbar .cart {
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--primary-background-color);
}

.navbar-ghost:not(.navbar-stuck) .toolbar .search:hover,
.navbar-ghost:not(.navbar-stuck) .toolbar .account:hover,
.navbar-ghost:not(.navbar-stuck) .toolbar .cart:hover {
	background-color: rgba(255, 255, 255, 0.07);
}

.navbar-ghost:not(.navbar-stuck) .toolbar .cart > .subtotal {
	border-left-color: rgba(255, 255, 255, 0.15);
}

.navbar-ghost:not(.navbar-stuck) .toolbar .toolbar-dropdown-group {
	color: var(--secondary-color);
}

@media (max-width: 1070px) {
	.navbar {
		min-height: 78px;
	}
	.toolbar {
		right: 15px;
	}
	.offcanvas-toggle.menu-toggle {
		display: table-cell;
	}
	.site-menu,
	.offcanvas-toggle.cats-toggle,
	.toolbar .account,
	.toolbar-dropdown {
		display: none !important;
	}
	.topbar {
		padding-right: 15px;
		padding-left: 15px;
	}
}

@media (max-width: 576px) {
	.offcanvas-toggle {
		width: 56px;
	}
	.site-logo {
		width: 145px;
		padding-left: 16px;
	}
}

/* The compact mark needs far less room than the wordmark. Scoped to 575px to
   line up with .hidden-xs-down / .hidden-sm-up, which swap at 575/576. The rule
   above stops at max-width 576px, so sharing it would squeeze the wordmark into
   the mark's container at exactly 576px. */
@media (max-width: 575px) {
	.site-logo.site-logo-mark {
		width: 67px;
	}
}

.page-title {
	width: 100%;
	margin-bottom: 60px;
	padding: 36px 0;
	border-bottom: 1px solid var(--primary-border-color);
	background-color: var(--misc-secondary);
}

.page-title > .container,
.page-title > .container-fluid {
	display: table;
}

.page-title .column {
	display: table-cell;
	vertical-align: middle;
}

.page-title .column:first-child {
	padding-right: 20px;
}

.page-title h1,
.page-title h2,
.page-title h3 {
	margin: 0;
	font-size: 24px;
	font-weight: normal;
	line-height: 1.25;
}

@media (max-width: 576px) {
	.page-title {
		margin-bottom: 53px;
	}
}

.breadcrumbs {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.breadcrumbs > li {
	display: inline-block;
	margin-left: 5px;
	padding: 5px 0;
	color: var(--text-muted-color);
	font-size: 14px;
	cursor: default;
	vertical-align: middle;
}

.breadcrumbs > li.separator {
	width: 3px;
	height: 3px;
	margin-top: 2px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--text-muted-color);
}

.breadcrumbs > li > a {
	transition: color 0.25s;
	color: var(--secondary-color);
	text-decoration: none;
}

.breadcrumbs > li > a:hover {
	color: var(--link-color);
}

@media (max-width: 768px) {
	.page-title > .container,
	.page-title > .container-fluid {
		display: block;
	}
	.page-title .column {
		display: block;
		width: 100%;
		text-align: center;
	}
	.page-title .column:first-child {
		padding-right: 0;
	}
	.breadcrumbs {
		padding-top: 10px;
		text-align: center;
	}
	.breadcrumbs > li {
		margin-left: 3px;
		margin-right: 3px;
	}
}

.offcanvas-wrapper {
	position: relative;
	min-height: 100vh;
	background-color: var(--primary-background-color);
	z-index: 10;
}

.offcanvas-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 290px;
	height: 100%;
	background-color: var(--mobile-menu-background);
	box-shadow: inset -4px 0 17px 0 rgba(0, 0, 0, 0.35);
	visibility: hidden;
	z-index: 1;
	overflow-y: auto;
}

.offcanvas-container.active {
	visibility: visible;
}

.offcanvas-header {
	padding: 28px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.offcanvas-header .offcanvas-title {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 16px;
	font-weight: 500;
}

.account-link {
	display: table;
	width: 100%;
	padding: 20px 18px;
	transition: background-color 0.3s;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background-color: var(--mobile-menu-header-background);
	text-decoration: none;
}

.account-link .user-ava,
.account-link .user-info {
	display: table-cell;
	vertical-align: middle;
}

.account-link .user-ava {
	width: 48px;
}

.account-link .user-ava > img {
	display: block;
	width: 48px;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
}

.account-link .user-info {
	padding-left: 8px;
}

.account-link .user-info > .user-name {
	margin-bottom: 2px;
	color: var(--menu-link-color);
}

.account-link .user-info > span {
	display: block;
}

.user-balance {
	display: table-cell;
	vertical-align: middle;
	color: var(--link-color);
	text-decoration: none;
}

/* .account-link:hover {
	background-color: #394453;
} */

.site-backdrop {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-background-color);
	content: '';
	opacity: 0;
	z-index: 9980;
	position: fixed;
	transition: opacity 0.35s, visibility 0.35s;
	cursor: pointer;
	visibility: hidden;
}

.no-csstransforms3d .offcanvas-wrapper,
.no-csstransforms3d .navbar,
.no-csstransforms3d .topbar {
	transition: left 0.4s ease-in-out, background-color 0.2s;
}

.no-csstransforms3d .site-backdrop {
	transition: left 0.4s ease-in-out, opacity 0.35s, visibility 0.35s;
}

.no-csstransforms3d .offcanvas-open .offcanvas-wrapper,
.no-csstransforms3d .offcanvas-open .site-backdrop,
.no-csstransforms3d .offcanvas-open .navbar,
.no-csstransforms3d .offcanvas-open .topbar {
	left: 290px;
}

.no-csstransforms3d .offcanvas-open .site-backdrop {
	opacity: 0.2;
	visibility: visible;
}

.csstransforms3d .offcanvas-wrapper,
.csstransforms3d .navbar,
.csstransforms3d .topbar {
	transition: -webkit-transform 0.4s ease-in-out, background-color 0.2s;
	transition: transform 0.4s ease-in-out, background-color 0.2s;
}

.csstransforms3d .site-backdrop {
	transition: -webkit-transform 0.4s ease-in-out, opacity 0.35s, visibility 0.35s;
	transition: transform 0.4s ease-in-out, opacity 0.35s, visibility 0.35s;
}

.csstransforms3d .offcanvas-open .offcanvas-wrapper,
.csstransforms3d .offcanvas-open .site-backdrop,
.csstransforms3d .offcanvas-open .navbar,
.csstransforms3d .offcanvas-open .topbar {
	-webkit-transform: translate3d(290px, 0, 0);
	transform: translate3d(290px, 0, 0);
}

.csstransforms3d .offcanvas-open .site-backdrop {
	opacity: 0.2;
	visibility: visible;
}

.site-footer {
	padding-top: 72px;
	background-color: var(--footer-background-color);
}

@media (max-width: 768px) {
	.site-footer {
		padding-top: 48px;
	}
}

.footer-copyright {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 24px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	font-weight: normal;
}

.footer-copyright > a {
	transition: color 0.25s;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

.footer-copyright > a:hover {
	color: var(--primary-color);
}

.footer-light {
	background-color: var(--misc-secondary);
}

.footer-light .footer-copyright {
	color: var(--text-muted-color);
}

.footer-light .footer-copyright > a {
	color: var(--text-muted-color);
}

.footer-light .footer-copyright > a:hover {
	color: var(--primary-color);
}

.user-info-wrapper {
	position: relative;
	width: 100%;
	margin-bottom: -1px;
	padding-top: 90px;
	padding-bottom: 10px;
	border: 1px solid var(--primary-border-color);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	overflow: hidden;
}

.user-info-wrapper-list {
	position: relative;
	width: 100%;
	margin-bottom: -1px;
	padding-top: 90px;
	padding-bottom: 30px;
	border: 1px solid var(--primary-border-color);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	overflow: hidden;
}

.user-info-wrapper .user-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background-position: center;
	background-color: var(--misc-secondary);
	background-repeat: no-repeat;
	background-size: cover;
}

.user-info-wrapper .user-cover .tooltip .tooltip-inner {
	width: 230px;
	max-width: 100%;
	padding: 10px 15px;
}

.user-info-wrapper .info-label {
	display: block;
	position: absolute;
	top: 18px;
	right: 18px;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

.user-info-wrapper .info-label > i {
	display: inline-block;
	margin-right: 3px;
	font-size: 1.2em;
	vertical-align: middle;
}

.user-info-wrapper .user-info {
	display: table;
	position: relative;
	width: 100%;
	padding: 0 18px;
	z-index: 5;
}

.user-info-wrapper .user-info .user-avatar,
.user-info-wrapper .user-info .user-data {
	display: table-cell;
	vertical-align: top;
}

.user-info-wrapper .user-info .user-avatar {
	position: relative;
	width: 115px;
}

.user-info-wrapper .user-info .user-avatar > img {
	display: block;
	width: 100px;
	height: 100px;
	border: 5px solid var(--primary-background-color);
	border-radius: 50%;
}

.user-info-wrapper .user-cover:hover .edit-background {
	opacity: 1;
}

.user-info-wrapper .user-cover .edit-background {
	display: block;
	position: absolute;
	top: 6px;
	left: 6px;
	width: 36px;
	height: 36px;
	transition: opacity 0.3s;
	border-radius: 50%;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	line-height: 34px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	cursor: pointer;
	opacity: 0;
	text-align: center;
	text-decoration: none;
}

.user-info-wrapper .user-cover .edit-background::before {
	font-family: feather;
	font-size: 17px;
	content: '\e023';
}

.user-info-wrapper .user-info .user-avatar .edit-avatar {
	display: block;
	position: absolute;
	top: -2px;
	right: 2px;
	width: 36px;
	height: 36px;
	transition: opacity 0.3s;
	border-radius: 50%;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	line-height: 34px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	cursor: pointer;
	opacity: 0;
	text-align: center;
	text-decoration: none;
}

.user-info-wrapper .user-info .user-avatar .edit-avatar::before {
	font-family: feather;
	font-size: 17px;
	content: '\e023';
}

.user-info-wrapper .user-info .user-avatar:hover .edit-avatar {
	opacity: 1;
}

.user-info-wrapper .user-info .user-data {
	padding-top: 48px;
	padding-left: 12px;
}

.user-info-wrapper .user-info .user-data h4 {
	margin-bottom: 2px;
}

.user-info-wrapper .user-info .user-data span {
	display: block;
	color: var(--text-muted-color);
	font-size: 13px;
}

/**
 * The rule above targets the "Joined ..." meta line, but it is a bare tag selector with no class
 * scoping, so it also catches any .badge dropped into the h4 next to the username (a <span>, same
 * as every other badge component) and stretches it to a full-width block - this is what made the
 * Vetted badge render as a full-width bar instead of a pill. Higher specificity restores it.
 */
.user-info-wrapper .user-info .user-data h4 .badge {
	display: inline-block;
	font-size: 13px;
}

.user-info-wrapper + .list-group .list-group-item:first-child {
	border-radius: 0;
}

.product-card {
	display: block;
	position: relative;
	width: 100%;
	padding: 18px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	background-color: var(--secondary-background-color);
}

@media (max-width: 768px) {
	.product-card {
		border: 0px solid var(--primary-border-color);
		margin-top: 12px;
		margin-bottom: 12px;
	}
}

.product-card:hover {
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.product-card .product-thumb {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

.product-card .product-thumb > img {
	display: block;
	width: 100%;
}

.product-card .product-title {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
}

.product-card .product-title > a {
	transition: color 0.3s;
	color: var(--third-color);
	text-decoration: none;
}

.product-card .product-title > a:hover {
	color: var(--link-color);
}

.product-card .product-price,
h5.product-price {
	margin-bottom: 10px;
	color: var(--secondary-color);
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.product-card .product-price > del,
h5.product-price del {
	margin-right: 5px;
	color: var(--text-muted-color);
}

.product-card .product-buttons {
	padding: 12px 0 8px;
	text-align: center;
}

.product-card .product-buttons > .btn {
	margin: 0 4px;
}

.product-card .product-buttons > .btn.btn-wishlist {
	width: 36px;
	padding: 0;
	padding-left: 1px;
	border-radius: 50%;
}

.product-card .product-buttons > .btn.btn-wishlist > i {
	font-size: 1.2em;
}

.btn-wishlist.active,
.product-card .product-buttons > .btn.btn-wishlist.active {
	color: var(--danger-color);
}

.btn-service-follow.active,
.product-card .product-buttons > .btn.btn-service-follow.active {
	color: #52a3ff;
}

.btn-user-block.active {
	color: #ff3535;
}

.product-card .product-buttons > .btn.btn-wishlist-disabled {
	width: 36px;
	padding: 0;
	padding-left: 1px;
	border-radius: 50%;
}

.product-card .product-buttons > .btn.btn-wishlist-disabled > i {
	font-size: 1.2em;
}

.product-card .product-buttons > .btn.btn-like {
	width: 36px;
	padding: 0;
	padding-left: 1px;
	border-radius: 50%;
}

.product-card .product-buttons > .btn.btn-like > i {
	font-size: 1.2em;
}

.btn-like.active,
.product-card .product-buttons > .btn.btn-like.active {
	color: #2bd396;
}

.product-card .product-badge {
	top: 15px;
	left: 18px;
}

.product-card .rating-stars {
	position: absolute;
	top: 15px;
	right: 18px;
}

.product-card.product-list {
	margin-bottom: 10px;
}

.product-card.product-list {
	display: table;
	width: 100%;
	padding: 0;
}

.product-info,
.productlink,
.word-break,
.media-body {
	word-break: break-all;
	-ms-word-break: break-all;
	/* Non standard for WebKit */
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.profile-items table tbody tr td {
	padding: .35rem !important;
	font-weight: bold !important;
	text-decoration: none;
	color: var(--text-muted-color) !important;
	border-top: 0 !important;
}

.profile-items table tbody tr th {
	border-top: 0 !important;
	padding: .35rem !important;
}

.sm-profile {
	border: 2px solid #fff;
	width: 1.75rem;
}

.word-break-normal {
	word-break: normal;
}

.word-break-word {
	word-break: break-word !important;
}

.compare-service-card.product-list {
	display: table;
	padding: 0;
}

.compare-service-card.product-list .product-info {
	padding: 10px 22px;
}

.product-card.product-list .product-thumb-dashboard,
.product-card.product-list .owl-carousel,
.product-card.product-list .product-thumb,
.product-card.product-list .product-info,
.compare-service-card.product-list .product-thumb
 {
	display: table-cell;
	vertical-align: middle;
}

.product-card.product-list .product-thumb,
.product-card.product-list .owl-carousel {
	position: relative;
	width: 220px;
	padding: 0px 0px;
}

.product-card.product-list .product-thumb-dashboard {
	position: relative;
	width: 320px;
	padding: 0px 0px;
	border-right: 1px solid var(--primary-border-color);
}

.product-card.product-list .product-info {
	padding: 10px 22px;
}

.small-product-info {
	padding: 2px 22px;
}

@media (max-width: 768px) {
	.product-card.product-list .product-info {
		padding: 0px 0px;
	}
}

.product-card.product-list .product-info .product-title,
.compare-service-card.product-list .product-info .product-title,
.product-card.product-list .product-info .product-price,
.product-card.product-list .product-info .product-buttons {
	text-align: left;
}
.product-card.product-list .product-info .product-buttons {
	padding-top: 10px;
	padding-bottom: 0;
	border-top: 1px solid var(--primary-border-color);
}

@media (max-width: 768px) {
	.product-card.product-list .product-info .product-buttons {
		border-top: 0px solid var(--primary-border-color);
	}
}

.product-card.product-list .product-info .product-buttons > .btn {
	margin: 0;
	margin-right: 8px;
}
.product-card.product-list .product-title {
	font-size: 18px;
}

.product-badge {
	position: absolute;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.rating-stars {
	display: inline-block;
}

.rating-stars > i {
	display: inline-block;
	margin-right: 2px;
	color: #cad0d9;
	font-size: 14px;
}

.rating-stars > i.filled {
	color: var(--warning-color);
}

.rating-stars > i:last-child {
	margin-right: 0;
}

.shop-toolbar {
	display: table;
	width: 100%;
}

.shop-toolbar > .column {
	display: table-cell;
	vertical-align: middle;
}

.shop-toolbar > .column:last-child {
	text-align: right;
}

@media (max-width: 576px) {
	.shop-toolbar > .column {
		display: block;
		width: 100%;
		text-align: center;
	}
	.shop-toolbar > .column:last-child {
		padding-top: 24px;
		text-align: center;
	}
}

.shop-sorting label,
.shop-sorting .form-control,
.shop-sorting span {
	display: inline-block;
	vertical-align: middle;
}

.shop-sorting span {
	padding: 8px 0;
}

.shop-sorting label {
	margin: 0;
	padding: 8px 5px 8px 0;
	color: var(--text-muted-color);
	font-size: 14px;
	font-weight: normal;
}

.shop-sorting .form-control {
	width: 100%;
	max-width: 186px;
	margin-right: 10px;
}

@media (max-width: 576px) {
	.shop-sorting label,
	.shop-sorting .form-control {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding-top: 0;
		padding-right: 0;
	}
}

.shop-view {
	display: inline-block;
}

.shop-view::after {
	display: block;
	clear: both;
	content: '';
}

.shop-view > a {
	display: block;
	width: 43px;
	height: 43px;
	margin-left: 10px;
	padding: 13px;
	float: left;
	transition: background-color 0.35s;
	border: 1px solid var(--primary-border-color);
	border-radius: 50%;
	background-color: var(--primary-background-color);
}

.shop-view > a span {
	display: block;
	position: relative;
	width: 3px;
	height: 3px;
	margin-bottom: 3px;
	background-color: var(--secondary-color);
}

.shop-view > a span::before,
.shop-view > a span::after {
	display: block;
	position: absolute;
	background-color: var(--secondary-color);
}

.shop-view > a span:last-child {
	margin-bottom: 0;
}

.shop-view > a:hover {
	background-color: var(--misc-secondary);
}

.shop-view > a.active {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	cursor: default;
	pointer-events: none;
}

.shop-view > a.active span,
.shop-view > a.active span::before,
.shop-view > a.active span::after {
	background-color: var(--primary-background-color);
}

.shop-view > a.grid-view span::before,
.shop-view > a.grid-view span::after {
	top: 0;
	width: 3px;
	height: 3px;
	content: '';
}

.shop-view > a.grid-view span::before {
	left: 6px;
}

.shop-view > a.grid-view span::after {
	left: 12px;
}

.shop-view > a.list-view span::before {
	top: 1px;
	left: 6px;
	width: 9px;
	height: 1px;
	content: '';
}

.shopping-cart,
.wishlist-table,
.order-table {
	margin-bottom: 20px;
}

.shopping-cart .table,
.wishlist-table .table,
.order-table .table {
	margin-bottom: 0;
}

.shopping-cart .btn,
.wishlist-table .btn,
.order-table .btn {
	margin: 0;
}

.shopping-cart > table > thead > tr > th,
.shopping-cart > table > thead > tr > td,
.shopping-cart > table > tbody > tr > th,
.shopping-cart > table > tbody > tr > td,
.wishlist-table > table > thead > tr > th,
.wishlist-table > table > thead > tr > td,
.wishlist-table > table > tbody > tr > th,
.wishlist-table > table > tbody > tr > td,
.order-table > table > thead > tr > th,
.order-table > table > thead > tr > td,
.order-table > table > tbody > tr > th,
.order-table > table > tbody > tr > td {
	vertical-align: middle !important;
}

.shopping-cart > table thead th,
.wishlist-table > table thead th,
.order-table > table thead th {
	padding-top: 17px;
	padding-bottom: 17px;
	border-width: 1px;
}

.shopping-cart .remove-from-cart,
.wishlist-table .remove-from-cart,
.order-table .remove-from-cart {
	display: inline-block;
	color: var(--danger-color);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.shopping-cart .count-input,
.wishlist-table .count-input,
.order-table .count-input {
	display: inline-block;
	width: 100%;
	width: 86px;
}

.shopping-cart .product-item,
.wishlist-table .product-item,
.order-table .product-item {
	display: table;
	width: 100%;
	min-width: 150px;
	margin-top: 5px;
	margin-bottom: 3px;
}

.shopping-cart .product-item .product-thumb,
.shopping-cart .product-item .product-info,
.wishlist-table .product-item .product-thumb,
.wishlist-table .product-item .product-info,
.order-table .product-item .product-thumb,
.order-table .product-item .product-info {
	display: table-cell;
	vertical-align: top;
}

.shopping-cart .product-item .product-thumb,
.wishlist-table .product-item .product-thumb,
.order-table .product-item .product-thumb {
	width: 130px;
	padding-right: 20px;
}

.shopping-cart .product-item .product-thumb > img,
.wishlist-table .product-item .product-thumb > img,
.order-table .product-item .product-thumb > img {
	display: block;
	width: 100%;
}

@media screen and (max-width: 860px) {
	.shopping-cart .product-item .product-thumb,
	.wishlist-table .product-item .product-thumb,
	.order-table .product-item .product-thumb {
		display: none;
	}
}

.shopping-cart .product-item .product-info span,
.wishlist-table .product-item .product-info span,
.order-table .product-item .product-info span {
	display: block;
	font-size: 13px;
}

.shopping-cart .product-item .product-info span > em,
.wishlist-table .product-item .product-info span > em,
.order-table .product-item .product-info span > em {
	font-weight: 500;
	font-style: normal;
}

.shopping-cart .product-item .product-title,
.wishlist-table .product-item .product-title,
.order-table .product-item .product-title {
	margin-bottom: 6px;
	padding-top: 5px;
	font-size: 16px;
	font-weight: 500;
}

.shopping-cart .product-item .product-title > a,
.wishlist-table .product-item .product-title > a,
.order-table .product-item .product-title > a {
	transition: color 0.3s;
	color: var(--third-color);
	line-height: 1.5;
	text-decoration: none;
}

.shopping-cart .product-item .product-title > a:hover,
.wishlist-table .product-item .product-title > a:hover,
.order-table .product-item .product-title > a:hover {
	color: var(--link-color);
}

.shopping-cart .product-item .product-title small,
.wishlist-table .product-item .product-title small,
.order-table .product-item .product-title small {
	display: inline;
	margin-left: 6px;
	font-weight: 500;
}

.wishlist-table .product-item .product-thumb {
	display: table-cell !important;
}

@media screen and (max-width: 576px) {
	.wishlist-table .product-item .product-thumb {
		display: none !important;
	}
}

.shopping-cart-footer {
	display: table;
	width: 100%;
	padding: 10px 0;
	border-top: 1px solid var(--primary-border-color);
}

.shopping-cart-footer > .column {
	display: table-cell;
	padding: 5px 0;
	vertical-align: middle;
}

.shopping-cart-footer > .column:last-child {
	text-align: right;
}

.shopping-cart-footer > .column:last-child .btn {
	margin-right: 0;
	margin-left: 15px;
}

@media (max-width: 768px) {
	.shopping-cart-footer > .column {
		display: block;
		width: 100%;
	}
	.shopping-cart-footer > .column:last-child {
		text-align: center;
	}
	.shopping-cart-footer > .column .btn {
		width: 100%;
		margin: 12px 0 !important;
	}
}

.checkout-steps {
	/**
	* Edited the margin
	*/
	margin-bottom: 0px;
}

.checkout-steps::after {
	display: block;
	clear: both;
	content: '';
}

.checkout-steps > a {
	display: block;
	position: relative;
	width: 33.33%;
	height: 54px;
	float: right;
	transition: color 0.3s;
	border-top: 1px solid var(--checkout-steps-border);
	border-bottom: 1px solid var(--checkout-steps-border);
	background-color: var(--checkout-steps-background);
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	line-height: 53px;
	text-decoration: none;
	text-align: center;
}

a.checkout-disabled {
	text-decoration: none;
	cursor: default;
	color: var(--text-muted-color);
}

a.checkout-disabled:hover {
	text-decoration: none;
	cursor: default;
	color: var(--text-muted-color);
}

.checkout-disabled > a {
	text-decoration: none;
	cursor: default;
	color: var(--text-muted-color);
}

.checkout-steps > a > .angle {
	display: block;
	position: absolute;
	top: 0;
	right: -13px;
	width: 27px;
	height: 53px;
	background-color: var(--checkout-steps-background);
	/*
	 * The angle overlays the step's bottom border; without its own the
	 * line under the nav breaks at every arrow.
	 */
	border-bottom: 1px solid var(--checkout-steps-border);
}

.checkout-steps > a > .angle::before,
.checkout-steps > a > .angle::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border: solid transparent;
	content: '';
	pointer-events: none;
}

.checkout-steps > a > .angle::after {
	border-width: 26px;
	border-color: transparent;
	border-left-color: var(--checkout-steps-background);
}

.checkout-steps > a > .angle::before {
	margin-top: -1px;
	border-width: 27px;
	border-color: transparent;
	border-left-color: var(--checkout-angle-color);
}

.checkout-steps > a:hover {
	color: var(--link-color);
}

.checkout-disabled > a:hover {
	text-decoration: none;
	cursor: default;
	color: var(--text-muted-color);
}

.checkout-steps > a.active {
	background-color: var(--checkout-steps-background-active);
	color: var(--checkout-active-text-color);
	cursor: default;
	pointer-events: none;
}

.checkout-steps > a.active > .angle::after {
	border-left-color: var(--primary-color);
}

.checkout-steps > a.active + a > .angle {
	background-color: var(--primary-color);
}

.checkout-steps > a.completed > .step-indicator {
	display: inline-block;
	margin-top: -5px;
	margin-right: 7px;
	border-radius: 50%;
	color: var(--success-text-color);
	font-size: 18px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
}

.checkout-steps > a.completed:hover {
	color: var(--secondary-color);
}

.checkout-steps > a:first-child {
	border-right: 1px solid var(--checkout-steps-border);
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.checkout-steps > a:last-child {
	border-left: 1px solid var(--checkout-steps-border);
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

@media (max-width: 576px) {
	.checkout-steps > a {
		width: 100%;
		margin-bottom: 10px;
		float: none;
		border: 1px solid var(--checkout-steps-border);
		border-radius: var(--radius);
	}
	.checkout-steps > a > .angle {
		display: none;
	}
}

.checkout-footer {
	display: table;
	width: 100%;
	margin-top: 28px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid var(--checkout-steps-border);
	border-radius: var(--radius);
	table-layout: fixed;
	background-color: var(--checkout-steps-background);

}

.checkout-footer > .column {
	display: table-cell;
	padding: 10px 15px;
	vertical-align: middle;
}

.checkout-footer > .column:last-child {
	text-align: right;
}

.checkout-footer > .column:first-child {
	text-align: left;
}

.checkout-footer .btn {
	margin: 0;
}

.sp-buttons .btn {
	margin: 0;
	margin-left: 8px;
}

.sp-buttons .btn.btn-wishlist {
	width: 36px;
	padding: 0;
	padding-left: 1px;
	border-radius: 50%;
}

.sp-buttons .btn.btn-wishlist > i {
	font-size: 1.2em;
}

.sp-buttons .btn.btn-wishlist.active {
	color: var(--danger-color);
}

.sp-buttons .btn.btn-like {
	width: 36px;
	padding: 0;
	padding-left: 1px;
	border-radius: 50%;
}

.sp-buttons .btn.btn-like > i {
	font-size: 1.2em;
}

.sp-buttons .btn.btn-like.active {
	color: #2bd396;
}

.product-gallery {
	position: relative;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	border: 1px solid var(--primary-border-color);
	background-color: var(--secondary-background-color);
	border-radius: var(--radius);
}

@media (max-width: 576px) {
	.product-gallery {
		padding-bottom: 5px;
	}
}

.product-gallery .gallery-item {
	position: absolute;
	margin-bottom: 0;
	z-index: 9999999;
	top: 20px;
	right: 20px;
}

.product-gallery .gallery-item > a {
	display: none;
	transition: background-color 0.3s;
	border-radius: var(--radius);
	text-decoration: none;
}

.product-gallery .gallery-item > a::before {
	display: none !important;
}

.product-gallery .gallery-item > a::after {
	font-family: var(--font-body);
	position: static;
	top: 0;
	padding: 0 1em;
	margin-top: 0;
	margin-left: 1px;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	transition: none;
	line-height: 28px;
	background-color: var(--half-black-background-color);
	font-size: 13px;
	color: var(--text-white-color);
	content: 'Full Screen';
	opacity: 1;
}

.product-gallery .gallery-item > a:hover {
	background-color: var(--misc-secondary);
}

.product-gallery .gallery-item.active > a {
	display: block;
}

.product-gallery .product-badge {
	top: 25px;
	left: 15px;
}

.product-gallery .product-thumbnails {
	display: block;
	margin: 0;
	margin-top: 24px;
	padding: 0;
	list-style: none;
	text-align: center;
}

.product-gallery .product-thumbnails > li {
	display: inline-block;
	margin: 0 3px 10px;
}

.product-gallery .product-thumbnails > li > a {
	display: block;
	width: 94px;
	max-height: 50px;
	transition: border-color 0.25s;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--primary-border-color);

}

.product-gallery .product-thumbnails > li > a > img {
	height: 50px;
}

.product-gallery .product-thumbnails > li.active > a {
	border-color: var(--primary-color);
	cursor: default;
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	.product-gallery .gallery-item {
		display: none !important;
	}
}

@supports (-ms-ime-align: auto) {
	.product-gallery .gallery-item {
		display: none !important;
	}
}

.post-meta {
	display: block;
	margin-bottom: 24px;
	padding: 0;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	list-style: none;
}

.post-meta > li {
	display: block;
	margin: 0;
	padding: 9px 12px;
	border-bottom: 1px solid var(--primary-border-color);
	color: var(--secondary-color);
	font-size: 13px;
	cursor: default;
}

.post-meta > li:last-child {
	border-bottom: 0;
}

.post-meta > li > i,
.post-meta > li > a {
	display: inline-block;
	vertical-align: middle;
}

.post-meta > li > i {
	margin-top: -2px;
	margin-right: 3px;
	color: var(--text-muted-color);
}

.post-meta > li > a {
	transition: color 0.25s;
	color: var(--secondary-color);
	text-decoration: none;
}

.post-meta > li > a:hover {
	color: var(--link-color);
}

.blog-post {
	margin-bottom: 48px;
}

.blog-post p {
	margin-bottom: 0;
}

.post-thumb {
	display: block;
	margin-bottom: 20px;
}

.post-title > a {
	transition: color 0.3s;
	color: var(--third-color);
	text-decoration: none;
}

.post-title > a:hover {
	color: var(--link-color);
}

.single-post-meta {
	display: table;
	width: 100%;
	padding-bottom: 24px;
}

.single-post-meta .column {
	display: table-cell;
	vertical-align: top;
}

.single-post-meta .column:last-child {
	text-align: right;
}

.single-post-meta .meta-link {
	display: inline-block;
	margin-right: 10px;
	color: var(--secondary-color);
	font-size: 13px;
}

.single-post-meta .meta-link > span {
	margin-right: 4px;
	color: var(--text-muted-color);
}

.single-post-meta .meta-link > a {
	transition: color 0.25s;
	color: var(--secondary-color);
	text-decoration: none;
}

.single-post-meta .meta-link > a > i {
	display: inline-block;
	margin-top: -3px;
	margin-right: 5px;
	color: var(--text-muted-color) !important;
	font-size: 1.1em;
	vertical-align: middle;
}

.single-post-meta .meta-link > a:hover {
	color: var(--link-color);
}

.single-post-meta .column:last-child .meta-link {
	margin-right: 0;
	margin-left: 10px;
}

@media (max-width: 768px) {
	.single-post-meta {
		display: block;
	}
	.single-post-meta .column {
		display: block;
		width: 100%;
	}
	.single-post-meta .column:last-child {
		padding-top: 5px;
		text-align: left;
	}
	.single-post-meta .column:last-child .meta-link {
		margin-right: 10px;
		margin-left: 0;
	}
}

.single-post-footer {
	padding-top: 12px;
	padding-bottom: 30px;
}

.single-post-footer > .column {
	padding-top: 4px;
	padding-bottom: 6px;
}

@media (min-width: 576px) {
	.single-post-footer {
		display: table;
		width: 100%;
	}
	.single-post-footer > .column {
		display: table-cell;
		vertical-align: middle;
	}
	.single-post-footer > .column:last-child {
		text-align: right;
	}
}

.single-post-footer .sp-tag {
	transition: color 0.25s;
	color: var(--secondary-color);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.single-post-footer .sp-tag:hover {
	color: var(--primary-color);
}

.entry-share span,
.entry-share .share-links {
	display: inline-block;
	vertical-align: middle;
}

.entry-share span,
.entry-share .report-links {
	display: inline-block;
	vertical-align: middle;
}

.entry-share .social-button {
	margin-right: 0;
	margin-left: 8px;
}

.entry-share .social-button:hover {
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

div.loading-results div {
	opacity: .7;
}

.infloader {
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #0099e6;
	width: 50px;
	height: 50px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

.infloaderSmall {
	border: 12px solid #f3f3f3;
	border-radius: 50%;
	border-top: 12px solid #0099e6;
	width: 10px;
	height: 10px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.userloader {
	background-color: var(--background-darker-color);
	height: 40px;
	width: 100px;
	margin-top: 6px;
}

.descriptionloader1 {
	background-color: var(--background-darker-color);
	height: 18px;
}

.descriptionloader2 {
	background-color: var(--background-darker-color);
	height: 18px;
	margin-top: 10px;
	width: 160px;
}

.descriptionloader3 {
	background-color: var(--background-darker-color);
	height: 18px;
	margin-top: 10px;
	width: 160px;
}

.bluebuttonloader {
	background-color: var(--primary-color);
	height: 18px;
	margin-top: 10px;
	width: 120px;
	height: 38px;
	display: inline-block;
	max-width: 160px;
	vertical-align: top;
}

.greybuttonloader {
	background-color: var(--background-darker-color);
	height: 18px;
	margin-top: 10px;
	width: 80px;
	height: 38px;
	display: inline-block;
	max-width: 160px;
	vertical-align: top;
}

.displayinline {
	display: inline !important;
}

.productlink > a {
	transition: color 0.3s;
	color: var(--third-color);
	text-decoration: none;
	border-bottom: 0px;
}

.productlink > a:hover {
	color: var(--link-color);
}

.linkit a {
	transition: color 0.3s;
	text-decoration: none;
	border-bottom: 0px;
	font-weight: bold;
}

.linkit a:hover {
	color: var(--link-color);
}

.imageuserloader {
	background-color: var(--text-muted-color);
	height: 50px;
	width: 50px;
}

#sidebar.affix-top {
	position: static;
	margin-top: 30px;
	width: 228px;
}

#sidebar.affix {
	position: fixed;
	top: 70px;
	width: 228px;
}

.text-grey {
	color: var(--secondary-color);
}

.jumbotron-main {
	height: 450px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.card-img-left {
	border-top-left-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);
	max-height: 100%; /* update 5/8/2018 */
	background-repeat: no-repeat;
	background-size: auto;
	position: absolute;
	top: 0px;
	left: 0px;
	min-height: 100%;
	border-right: 1px solid var(--primary-border-color);
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.affix-top {
	position: static;
}

.affix-bottom {
	position: absolute;
	bottom: auto !important;
}

body > .container {
	padding-top: 60px;
}

.displayinline {
	display: inline !important;
}

/* End of loader file */

/* Special drop down */

.site-menu ul > li > .toolbar-dropdown {
	left: 50%;
	margin-left: -100px;
}

.site-menu ul > li > .toolbar-dropdown {
	right: auto;
	left: 0;
	width: 350px;
	margin-top: -6px !important;
}

.site-menu ul > li > .toolbar-dropdown > .toolbar-dropdown-group {
	display: table;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	border-top: 1px solid var(--primary-border-color);
}

.site-menu ul > li > .toolbar-dropdown > .toolbar-dropdown-group:last-child {
	border-top: 0;
}

.site-menu ul > li > .toolbar-dropdown > .toolbar-dropdown-group > .column {
	display: table-cell;
	vertical-align: top;
}

.site-menu ul > li > .toolbar-dropdown > .toolbar-dropdown-group > .column:first-child {
	padding-right: 0px;
}

.site-menu ul > li > .toolbar-dropdown > .toolbar-dropdown-group > .column:last-child {
	padding-left: 0px;
}

.site-menu ul > li > .toolbar-dropdown > .toolbar-dropdown-group .btn {
	margin: 0;
}

.site-menu ul > li:hover > .toolbar-dropdown {
	display: block;
	-webkit-animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: submenu-show 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.site-menu ul > li:hover > .mega-menu .toolbar-dropdown {
	-webkit-animation: none;
	animation: none;
}

/* comments for listings */

.comment-author {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	overflow: hidden;
}

.commen-complete .comment-body-complete::after {
	border-width: 9px;
	border-color: transparent;
	border-right-color: var(--comment-green-background);
}

/* 5/7/2018 update for loading listings */

.bluebutton-ls-loader {
	background-color: var(--primary-color);
	height: 18px;
	margin-top: 0px;
	width: 120px;
	height: 38px;
	display: inline-block;
	max-width: 160px;
	vertical-align: top;
}

.greybutton-ls-loader {
	background-color: var(--background-darker-color);
	height: 18px;
	margin-top: 0px;
	width: 80px;
	height: 38px;
	display: inline-block;
	max-width: 160px;
	vertical-align: top;
}

.description-ls-loader1 {
	background-color: var(--background-darker-color);
	height: 18px;
	margin-top: 10px;
	height: 18px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.description-ls-loader2 {
	background-color: var(--background-darker-color);
	width: 200px;
	height: 18px;
}

.card-405 {
	min-height: 350.4px;
}

.wh-40 {
	height: 40px;
	width: 40px;
}

.featured {
	position: absolute;
	overflow: hidden;
	width: 75px;
	height: 75px;
	z-index: 2;
}

.featured span {
	font-weight: bold;
	font-size: 12px;
	color: var(--text-on-brand);
	text-transform: uppercase;
	text-align: center;
	line-height: 20px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	width: 100px;
	background: var(--primary-color);
	position: absolute;
	top: 19px;
	left: -21px;
}

.featured-icon {
	position: absolute;
	overflow: hidden;
	width: 75px;
	height: 75px;
	z-index: 2;
}

.featured-icon span {
	display: block;
	position: absolute;
	top: 7px;
	left: 30px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 900;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000
}

.sale-banner {
	position: absolute;
	overflow: hidden;
	width: 100px;
	height: 100px;
	bottom: 0px;
	left: 0px;
	z-index: 2;
}

.sale-banner-grid span,
.sale-banner span {
	position: absolute;
	display: block;
	width: 190px;
	padding: 1.5px 0;
	background-color: var(--success-color);
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color: var(--text-on-brand);
	font-weight: bold;
	font-size: 12px;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
	right: -25px;
	bottom: 30px;
	transform: rotate(45deg);
}

.payments-banner {
	position: absolute;
	overflow: hidden;
	width: 100px;
	height: 100px;
	bottom: 0px;
	left: 0px;
	z-index: 2;
}

.payments-banner-grid span,
.payments-banner span {
	position: absolute;
	display: block;
	width: 190px;
	height: 60px;
	padding: 1.5px 0;
	background-color: var(--success-color);
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color: var(--text-on-brand);
	font-weight: bold;
	font-size: 12px;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
	right: -25px;
	bottom: 10px;
	transform: rotate(45deg);
}

.sale-banner-grid {
	position: absolute;
	overflow: hidden;
	width: 100px;
	height: 151px;
	z-index: 1;
}

.list-link > a {
	transition: color 0.3s;
	color: var(--list-link-color);
	text-decoration: none;
	font-weight: 500 !important;
}

.list-link > a:hover {
	color: var(--link-color);
	cursor: pointer;
	font-weight: 500 !important;
}

.profile-link > a {
	transition: color 0.3s;
	color: var(--third-color);
	text-decoration: none;
}

.profile-link > a:hover {
	color: var(--link-color);
	cursor: pointer;
}

.recent-img-load {
	background-color: var(--background-darker-color);
	height: 50px;
	width: 50px;
}

.recent-description-load {
	background-color: var(--background-darker-color);
	height: 18px;
	width: 80px;
}

.recent-description-load-2 {
	background-color: var(--background-darker-color);
	height: 18px;
	margin-top: 4px;
	width: 80px;
}

.noborder {
	border: 0 !important;
}

/* online button 5/11/2018 */

.success-label {
	display: block;
	position: absolute;
	top: 18px;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: #2bd396;
	color: #fff;
	font-size: 12px;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

.secondary-label {
	display: block;
	position: absolute;
	top: 18px;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--misc-secondary);
	color: var(--secondary-color);
	font-size: 12px;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

/* online button for inbox 5/11/2018 */

.success-label-inbox {
	display: block;
	position: absolute;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: #2bd396;
	color: #fff;
	font-size: 12px;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

.secondary-label-inbox {
	display: block;
	position: absolute;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--misc-secondary);
	color: var(--secondary-color);
	font-size: 12px;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

/* custom tab 5/11/2018 */

.tab-content-custom {
	padding: 0px;
	border-right: 1px solid var(--primary-border-color);
	border-bottom: 1px solid var(--primary-border-color);
	border-left: 1px solid var(--primary-border-color);
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	overflow: hidden;
}

.tab-content-custom p:last-child,
.tab-content-custom ul:last-child,
.tab-content-custom ol:last-child {
	margin-bottom: 0;
}

.nav-pills + .tab-content-custom {
	padding: 24px 0 0;
	border: 0;
	border-radius: 0;
}

.card-body .tab-content-custom {
	padding: 0;
	border: 0;
}

/* image loader fix 5/11/2018 */

.imageloader {
	background-color: var(--background-darker-color);
	height: 150px;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
}

.imageloader-list {
	background-color: var(--background-darker-color);
	height: 150px;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-bottom-left-radius: calc(var(--radius) - 1px);

}

/* corner radious style 5/22/2018 */

.no-top-corner {
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
}

.card-img-top {
	width: 100%;
	border-top-left-radius: calc(0.25rem - 1px);
	border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-top::after {
	content:"";
	position:absolute;
	background: linear-gradient(0deg, rgba(39,38,42,1) 0%, rgba(255,255,255,0) 60%);
	z-index:2;
	height:100%;
	width:100%;
	top:0;
	left:0;
}

/* tag update for on margin  6/14/2018 */

.tag {
	margin: 3px;
}

.product-gallery {
	position: relative;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
}

/* image for single view  6/18/2018 */

.owl-item > div > img {
	height: auto;
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	min-height: 600px;
	max-height: 600px;
}

/* .owl-thumbnail-image > img{
	width: 100%;
} */

/* sold banner 6/19/2018 */

.sold-banner {
	position: absolute;
	overflow: hidden;
	width: 100px;
	height: 100px;
	z-index: 1;
}

.sold-banner span {
	font-weight: bold;
	font-size: 12px;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	line-height: 20px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	width: 100px;
	background: var(--danger-color);
	position: absolute;
	top: 19px;
	left: -21px;
}

/* sold banner 6/20/2018 */

.opacity-back {
	background-color: var(--third-color);
	opacity: 0.55;
}

.background-photo-store {
	/* background-image: url(../img/Categories/2.jpeg); */
}

/* topbar update 6/22/2018 */
.topbar {
	display: table;
	position: relative;
	width: 100%;
	height: 0px;
	padding: 0 30px;
	border-bottom: 1px solid var(--primary-border-color);
	background-color: var(--misc-secondary);
	z-index: 9010;
}

.error-picture {
	width: 100%;
	max-width: 550px;
}

.px-50 {
	width: 50px;
	height: 50px;
}

.link-header:hover {
	color: var(--link-color);
}

.strikeout {
	color: var(--text-muted-color);
	text-decoration: line-through;
}

.drop-link {
	transition: color 0.3s;
	color: var(--third-color);
	text-decoration: none;
}

.drop-link:hover {
	color: var(--link-color);
	cursor: pointer;
}

.drop-link.active {
	color: var(--link-color);
}

label.radio {
	cursor: pointer;
}
label.radio input {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	pointer-events: none;
}
label.radio span {
	border: 2px solid #eee;
	display: inline-block;
	text-transform: uppercase;
	height: 36px;
	padding: 0 18px;
	border-radius: 18px;
	font-size: 12px;
	line-height: 34px;
}
label.radio input:checked + .danger-radio {
	border-color: var(--danger-color);
}

label.radio input:checked + .success-radio {
	border-color: var(--success-color);
}

label.radio input:checked + .secondary-check-box {
	border-color: var(--success-color);
	color: var(--success-text-color);
}

.success-radio {
	border-color: var(--success-color);
	background-color: transparent;
	color: var(--success-text-color);
}

.danger-radio {
	border-color: var(--danger-color);
	background-color: transparent;
	color: var(--danger-color);
}

.secondary-check-box {
	border-color: var(--primary-border-color);
	background-color: transparent;
	color: var(--secondary-color);
}

.success-radio:hover {
	border-color: var(--success-color);
	background-color: var(--success-color);
	color: var(--text-on-brand);
	transition: all 0.4s;
}

.secondary-check-box:hover {
	background-color: var(--success-color);
	transition: all 0.8s;
	background-color: var(--misc-secondary);
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.danger-radio:hover {
	border-color: var(--danger-color);
	background-color: var(--danger-color);
	color: #eee;
	transition: all 0.35s;
}

a.more-text-link {
	text-decoration: none;
	outline: none;
}

.height-150x {
	height: 150px !important;
	min-height: 150px !important;
}

.height-450x {
	height: 450px !important;
}

.width-80x {
	width: 80px;
}

.width-300x {
	width: 300px;
}

.width-220x {
	width: 300px;
}


.canceled-trade {
	opacity: 0.6;
}

.large-loader {
	font-size: 60px;
}

.dropzone,
.dropzone * {
	box-sizing: border-box;
}

.dropzone {
	/* min-height: 100px;
	border: 2px solid #97d2ec;
	background: white;
	padding: 5px 5px;
	border-style: dashed;
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius); */
	/* width: 100%;
	height: 100%; */
	/* min-height: 100px; */
	overflow: hidden;
	/* box-shadow: 1px 1px 15px -5px black;*/
	transition: all .3s ease;
	border-radius: var(--radius-sm);
	color: var(--secondary-color);
	/* background-color: #fff; */
	border: 1px solid var(--primary-border-color);
}

.dz-file-name-text {
	word-break: break-all;
}

@media (max-width: 576px) {
	.col-dz-hidden div form div .dz-preview
	.red-tooltip .media .media-body .dz-file-name-text {
		display: none;
	}
}

.dropzone:hover {
	background-color: var(--misc-secondary);
	border-color: var(--hover-background-border-change);
	/* border-style: solid; */
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	cursor: pointer;
}
.dropzone.dz-clickable {
	cursor: pointer;
}
.dropzone.dz-clickable * {
	cursor: default;
}
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
	cursor: pointer;
}
.dropzone.dz-started .dz-message {
	display: none;
}
.dropzone.dz-drag-hover {
	border-style: solid;
}
.dropzone.dz-drag-hover .dz-message {
	opacity: 0.5;
}
.dropzone .dz-message {
	text-align: center;
	margin: 2em 0;
}
.dropzone .dz-preview {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 16px;
	min-height: 100px;
}
.dropzone .dz-preview:hover {
	z-index: 1000;
}
.dropzone .dz-preview:hover .dz-details {
	opacity: 1;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
	border-radius: 20px;
	background: var(--misc-secondary);
	/*background: linear-gradient(to bottom, #eee, #ddd);*/
}
.dropzone .dz-preview.dz-file-preview .dz-details {
	opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
	background: white;
}
.dropzone .dz-preview.dz-image-preview .dz-details {
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
	font-size: 14px;
	text-align: center;
	display: block;
	cursor: pointer;
	border: none;
}
.dropzone .icon-remove {
	cursor: pointer;
}
.dropzone .dz-preview:hover .dz-details {
	opacity: 1;
}
.dropzone .dz-preview .dz-details {
	z-index: 20;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	font-size: 13px;
	min-width: 100%;
	max-width: 100%;
	padding: 2em 1em;
	text-align: center;
	color: rgba(0, 0, 0, 0.9);
	line-height: 150%;
}
.dropzone .dz-preview .dz-details .dz-size {
	margin-bottom: 1em;
	font-size: 16px;
}
.dropzone .dz-preview .dz-details .dz-filename {
	white-space: nowrap;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
	border: 1px solid rgba(200, 200, 200, 0.8);
	background-color: rgba(255, 255, 255, 0.8);
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
	overflow: hidden;
	text-overflow: ellipsis;
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
	border: 1px solid transparent;
}
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
	background-color: rgba(255, 255, 255, 0.4);
	padding: 0 0.4em;
	border-radius: var(--radius-sm);
}
.dropzone .dz-preview:hover .dz-image img {
	-webkit-transform: scale(1.05, 1.05);
	-moz-transform: scale(1.05, 1.05);
	-ms-transform: scale(1.05, 1.05);
	-o-transform: scale(1.05, 1.05);
	transform: scale(1.05, 1.05);
	-webkit-filter: blur(8px);
	filter: blur(8px);
}
.dropzone .dz-preview .dz-image {
	border-radius: 20px;
	overflow: hidden;
	width: 80px;
	height: 80px;
	position: relative;
	display: block;
	z-index: 10;
}
.dropzone .dz-preview .dz-image img {
	display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
	-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview.dz-error .dz-error-mark {
	opacity: 1;
	-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
	pointer-events: none;
	opacity: 0;
	z-index: 500;
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	margin-left: -28px;
	margin-top: -38px;
}
.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
	display: block;
	width: 54px;
	height: 54px;
}
.dropzone .dz-preview.dz-processing .dz-progress {
	opacity: 1;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
	opacity: 0;
	-webkit-transition: opacity 0.4s ease-in;
	-moz-transition: opacity 0.4s ease-in;
	-ms-transition: opacity 0.4s ease-in;
	-o-transition: opacity 0.4s ease-in;
	transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
	-webkit-animation: pulse 6s ease infinite;
	-moz-animation: pulse 6s ease infinite;
	-ms-animation: pulse 6s ease infinite;
	-o-animation: pulse 6s ease infinite;
	animation: pulse 6s ease infinite;
}
.dropzone .dz-preview .dz-progress {
	opacity: 1;
	z-index: 1000;
	pointer-events: none;
	position: absolute;
	height: 16px;
	left: 50%;
	top: 50%;
	margin-top: -18px;
	width: 80px;
	margin-left: -45px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-transform: scale(1);
	border-radius: 8px;
	overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
	background: var(--primary-color);
	/* background: linear-gradient(to bottom, var(--primary-color), #444); */
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	-webkit-transition: width 300ms ease-in-out;
	-moz-transition: width 300ms ease-in-out;
	-ms-transition: width 300ms ease-in-out;
	-o-transition: width 300ms ease-in-out;
	transition: width 300ms ease-in-out;
}
.dropzone .dz-preview.dz-error .dz-error-message {
	display: block;
}
.dropzone .dz-preview.dz-error:hover .dz-error-message {
	opacity: 1;
	pointer-events: auto;
}
.dropzone .dz-preview .dz-error-message {
	pointer-events: none;
	z-index: 1000;
	position: absolute;
	display: block;
	display: none;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	border-radius: var(--radius);
	font-size: 13px;
	top: 106px;
	left: -29px;
	width: 140px;
	background: var(--danger-color);
	background: linear-gradient(to bottom, var(--danger-color), var(--danger-color));
	padding: 0.5em 1.2em;
	color: white;
}
.dropzone .dz-preview .dz-error-message:after {
	content: '';
	position: absolute;
	top: -6px;
	left: 64px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--danger-color);
}

.dropzone .dz-image-preview {
	/* margin-right: 40px; */
}

.btn-inline {
	text-transform: none !important;
	letter-spacing: unset !important;
	line-height: unset !important;
	height: auto !important;
	vertical-align: unset !important;
}

.form-inline {
	display: inline;
}

.comment-author-i {
	font-size: 45px;
}

.extra-big-i {
	font-size: 68px;
}

.icon-bullet {
	font-size: 30px;
}

div.comment-author-icon {
	/* top: -1.4em !important; */
}

/* .btn-follow,
.btn-follow-nouser
{
	min-width: 145px;
} */

.banner-done {
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	position: absolute;
	width: 100%;
	height: 140px;
	z-index: 1;
}

.banner-done span {
	border-top-left-radius: calc(var(--radius) - 1px);
	border-top-right-radius: calc(var(--radius) - 1px);
	font-weight: bold;
	font-size: 12px;
	width: 100%;
	color: var(--text-on-brand);
	text-transform: uppercase;
	text-align: center;
	width: 200px;
	background: var(--success-color);
	position: absolute;
	top: 0px;
}

.checkmark {
	border: 1px solid var(--form-border-color);
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: var(--checkout-steps-background);
	color: var(--secondary-color);
	font-family: var(--font-body);
	font-size: 14px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	position: absolute;
	top: 0;
	left: 0;
}

.t-10 {
	top: 10px;
}
.t-7 {
	top: 7px;
}

.container-check {
	display: block;
	position: relative;
	padding-left: 35px !important;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.container-check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.container-check:hover input ~ .checkmark {
	background-color: #ccc;
}

.container-check input:checked ~ .checkmark {
	background-color: #2196f3;
}

.checkmark:after {
	content: '';
	position: absolute;
	display: none;
}

.container-check input:checked ~ .checkmark:after {
	display: block;
}

.container-check .checkmark:after {
	top: 6px;
	left: 5.5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: white;
}

.chat-bubble {
	height: 26px;
	width: 26px;
	background: var(--chat-bubble-background-color);
	/*position: absolute;*/
	/* left: 50%; */
	left: 20px;
	padding-left: 20px;
	margin-left: 72px;
	/* top: 50%; */
	transform: translate(-50%, -50%);
	/*margin-top: 60px;*/
}

.chat-bubble:before {
	content: '';
	height: 26px;
	width: 26px;
	left: 13px;
	position: absolute;
	display: block;
	background: var(--chat-bubble-background-color);
	border-radius: 50%;
	z-index: 1;
}
.chat-bubble:after {
	content: '';
	height: 26px;
	width: 26px;
	right: 13px;
	position: absolute;
	display: block;
	background: var(--chat-bubble-background-color);
	border-radius: 50%;
	z-index: 1;
}
.chat-bubble .tail {
	height: 25px;
	width: 25px;
	background: var(--chat-bubble-background-color);
	position: absolute;
	left: 20px;
	bottom: 2px;
	border-radius: 50%;
}
.chat-bubble .tail:before {
	height: 12px;
	width: 12px;
	background: var(--chat-bubble-background-color);
	content: '';
	display: block;
	border-radius: 50%;
	position: absolute;
	left: 20px;
	bottom: -8px;
}
.chat-bubble .loading {
	position: absolute;
	z-index: 10;
	width: 67px;
	left: -5px;
	top: 9px;
}
.chat-bubble .loading .dot {
	height: 7px;
	width: 7px;
	border-radius: 50%;
	background: #c1c1c1;
	display: block;
	float: left;
	margin: 0 0 0 8px;
}
.chat-bubble .loading .dot:first-child {
	margin: 0;
}
.chat-bubble .loading .dot.one {
	-webkit-animation: cycleOne 1s ease-in-out infinite;
	-webkit-animation-direction: normal;
}
.chat-bubble .loading .dot.two {
	-webkit-animation: cycleTwo 1s ease-in-out infinite;
	-webkit-animation-direction: normal;
}
.chat-bubble .loading .dot.three {
	-webkit-animation: cycleThree 1s ease-in-out infinite;
	-webkit-animation-direction: normal;
}

@-webkit-keyframes cycleOne {
	0% {
		background: rgba(150, 150, 150, 0.4);
	}
	33.333% {
		background: var(--chat-bubble-dot-background-color);
	}
	66.6667% {
		background: rgba(150, 150, 150, 0.4);
	}
	100% {
		background: rgba(150, 150, 150, 0.4);
	}
}
@-webkit-keyframes cycleTwo {
	0% {
		background: rgba(150, 150, 150, 0.4);
	}
	33.333% {
		background: rgba(150, 150, 150, 0.4);
	}
	66.6667% {
		background: var(--chat-bubble-dot-background-color);
	}
	100% {
		background: rgba(150, 150, 150, 0.4);
	}
}
@-webkit-keyframes cycleThree {
	0% {
		background: rgba(150, 150, 150, 0.4);
	}
	33.333% {
		background: rgba(150, 150, 150, 0.4);
	}
	66.6667% {
		background: rgba(150, 150, 150, 0.4);
	}
	100% {
		background: var(--chat-bubble-dot-background-color);
	}
}

.background-image {
	display: block;
	width: 100%;
	height: 120px;

	/* background-image: url(); */
	background-repeat: no-repeat;
	background-size: 100% 100%;

	opacity: 1;
}

.max-box-height-90 {
	max-height: 90px;
}

/*
 * This hid a listing card's title, rating and price at 1200px and below - so on
 * a tablet, a small laptop and every phone the "popular listings" on the 404,
 * the profile's recommended row and the dashboard widgets were bare 75x90
 * thumbnails with nothing to say what they were. The name says xs. Phones only.
 */
@media (max-width: 575.98px) {
	.hidden-xs-box {
		display: none !important;
	}
}

.hidden {
	display: none !important;
}

.aa-input-container {
	display: inline-block;
	position: relative;
	width: 100%;
}

.algolia-autocomplete {
	width: 100%;
}

.aa-input-search {
	padding: 7px 34px 7px 8px;
	border-radius: var(--radius-sm);
	-webkit-transition: 0.2s;
	transition: 0.2s;
	box-sizing: border-box;
	color: var(--secondary-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid var(--form-border-color);
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 14px;
}
.aa-input-search::-webkit-search-decoration,
.aa-input-search::-webkit-search-cancel-button,
.aa-input-search::-webkit-search-results-button,
.aa-input-search::-webkit-search-results-decoration {
	display: none;
}
.aa-input-search:focus {
	outline: 0;
	border: 2px solid var(--primary-color);
	box-shadow: 4px 4px 0 var(--search-box-shadow);
}
.aa-input-icon {
	height: 16px;
	width: 16px;
	position: absolute;
	top: 50%;
	right: 16px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	fill: var(--secondary-color);
}
.aa-hint {
	color: var(--secondary-color);
}
.aa-suggestions-category {
	text-transform: uppercase;
	/* border-bottom: 1px solid rgba(228, 228, 228, 0.6); */
	border-top: 1px solid rgba(228, 228, 228, 0.6);
	padding: 5px;
	color: var(--secondary-color);
	padding: 6px 12px;
	text-align: left;
	font-size: 0.75rem !important;
}

.aa-dropdown-menu {
	background-color: var(--table-grey-background);
	/* border: 2px solid rgba(228, 228, 228, 0.6);
	border-top-width: 1px; */
	/* font-family: 'Montserrat', sans-serif; */
	width: 300px;
	margin-top: 10px;
	box-shadow: 4px 4px 0 rgba(241, 241, 241, 0.35);
	/* font-size: 11px; */
	border-radius: var(--radius-sm);
	box-sizing: border-box;
}
.aa-suggestion {
	padding: 12px;
	border-top: 1px solid rgba(228, 228, 228, 0.6);
	font-size: 1rem !important;
	cursor: pointer;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	word-break: break-all;
	color: var(--secondary-color);
}
.aa-suggestion > div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	word-break: break-all;
	color: var(--secondary-color);
}
.aa-suggestion img {
	max-width: 80px;
	margin-right: 10px;
}
.aa-suggestion img.rounded-circle {
	height: 32px;
	width: 32px;
}
.aa-suggestion:hover,
.aa-suggestion.aa-cursor {
	background-color: rgba(241, 241, 241, 0.35);
}

.aa-suggestions > div:first-child {
	border-top: 0;
}
.aa-suggestion > span:first-child {
	color: var(--secondary-color);
	padding-right: 15px;
}
.aa-suggestion > span:last-child {
	text-transform: uppercase;
	color: var(--secondary-color);
}
.aa-suggestion > div:first-child em,
.aa-suggestion > span:first-child em,
.aa-suggestion > span:last-child em,
.aa-suggestion > div:last-child em {
	font-weight: 700;
	font-style: normal;
	background-color: var(--table-grey-background);
	padding: 2px 0 2px 0px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none; /* Chrome */
	margin: 0;
}

.aa-dropdown-menu > div {
	display: inline-block;
	width: 100%;
	vertical-align: top;
}

.more-text-content {
	text-decoration: none;
	width: 50%;
	top: 10px;
	left: 3px;
}

a.morelink {
	text-decoration: none;
}

.show-on-top {
	z-index: 9999;
}

.search-token {
	font-weight: bold;
	color: #6772e5 !important;
}

.search-token-badge {
	/* position: absolute;
	left: 3px;
	top: 5px; */
	position: absolute;
	left: 3px;
	top: 7px;
	height: 25px;
	padding: 5px;
	font-size: 13px;
}

.textWithBlurredBg {
	display:inline-block;
	transition:.3s;
}

.textWithBlurredBg img {
	width:100%;
	height:100%;
	transition:.3s;
	border-right: 1px solid var(--primary-border-color);
}

.textWithBlurredBg:hover img {
	filter:blur(2px) brightness(60%);
}

.textWithBlurredBg:not(img) {
	position:absolute;
	z-index:1;
	top:2%;
	width:100%;
	text-align:center;
	opacity:0;
	transition: .3s;
}

.textWithBlurredBg p {

}

.textWithBlurredBg:hover :not(img) {
	opacity:1;
}

.card-hover {
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.card-hover:hover {
	-webkit-box-shadow: -1px 9px 20px -12px var(--primary-box-shadow-80);
	-moz-box-shadow: -1px 9px 20px -12px var(--primary-box-shadow-80);
	box-shadow: -1px 9px 20px -12px var(--primary-box-shadow-80);
}

.card-boost {
	-webkit-box-shadow: -1px 9px 20px -12px var(--primary-box-shadow-80);
	-moz-box-shadow: -1px 9px 20px -12px var(--primary-box-shadow-80);
	box-shadow: -1px 9px 20px -12px var(--primary-box-shadow-80);
	background-color: var(--boost-card-background-color);
}

.drag-card {
	position: absolute;
	color: rgb(17, 17, 17);
	height: 3em;
	width: 3em;
	transform-style: preserve-3d;
	border-radius: 0 0% 100% 0;
	top: 15px;
	z-index: 2;
}

.drag-card:before {
	content: '';
	height: 3em;
	width: 3em;
	border-radius: 0 0% 100% 0;
	background: rgb(238, 238, 238);
	top: 0;
	left: 0;
	position: absolute;
	z-index: 1;
	border-top-left-radius: var(--radius-sm);
}

.drag-icon {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	padding: .6em .4em;
	line-height: 1;
	font-size: 1em;
	margin-top: 0px !important;
	color: #626974;
}

.w-600 {
	width: 600px;
}

.w-400 {
	width: 400px;
}

/*
 * The sign-up, login and forgot-password popups are 400px, which ran off
 * a 375px phone and hid the close button. On a modal they are a limit,
 * not a fixed width, so a phone gets the screen less Bootstrap's margins.
 * .w-400 elsewhere (illustrations) is unchanged.
 *
 * 2026-09-23 JD
 */
.modal-dialog.w-400 {
	width: auto;
	max-width: 400px;
}

.h-450 {
	height: 450px;
}

.bg-blue {
	background-color: #8ABAD1;
}

.photo-fit {
	object-fit: cover;
}

.h-250 {
	height: 250px;
}

.h-170 {
	height: 170px;
}

.h-180 {
	height: 180px;
}

.pd-8x {
	padding: 8px;
}

.pd-4x {
	padding: 4px;
}

.font-18 {
	font-size: 24px;
}

.min-height-44 {
	min-height: 44px;
	line-height: 1.5em;
	height: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.min-height-72 {
	min-height: 72px;
}

.min-height-400 {
	min-height: 400px;
}

.min-height-450 {
	min-height: 450px;
}

.max-height-314 {
	max-height: 314px;
	overflow: scroll;
}

.label-warning {
	top: 50%;
	right: 1.15rem;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-right: 5px;
	padding: 2px 8px;
	transition: all 0.3s;
	border-radius: 22px;
	color: var(--text-on-brand);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--primary-background-color);
	font-size: 90%;
	font-weight: 500;
	background-color: var(--warning-color);
}

.label-success {
	top: 50%;
	right: 1.15rem;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-right: 5px;
	padding: 2px 8px;
	transition: all 0.3s;
	border-radius: 22px;
	color: var(--text-on-brand);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--primary-background-color);
	font-size: 90%;
	font-weight: 500;
	background-color: var(--success-color);
}

.label-important {
	top: 50%;
	right: 1.15rem;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-right: 5px;
	padding: 2px 8px;
	transition: all 0.3s;
	border-radius: 22px;
	color: var(--secondary-color);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--primary-background-color);
	font-size: 90%;
	font-weight: 500;
	background-color: var(--danger-color);
}

.ellipsis-btn {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.w-60 {
	width: 60px;
}

.h-60 {
	height: 60px;
}

.text-brown {
	color: #ac8868;
}

.text-silver {
	color: #a7a9ac;
}

/*@preserve
 * Tempus Dominus Bootstrap4 v5.0.0-alpha14 (https://tempusdominus.github.io/bootstrap-4/)
 * Copyright 2016-2017 Jonathan Peterson
 * Licensed under MIT (https://github.com/tempusdominus/bootstrap-3/blob/master/LICENSE)
 */

 .sr-only, .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after, .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after, .bootstrap-datetimepicker-widget .btn[data-action="today"]::after, .bootstrap-datetimepicker-widget .picker-switch::after, .bootstrap-datetimepicker-widget table th.prev::after, .bootstrap-datetimepicker-widget table th.next::after {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0; }

  .bootstrap-datetimepicker-widget {
	list-style: none; }
	.bootstrap-datetimepicker-widget.dropdown-menu {
	  display: block;
	  margin: 2px 0;
	  padding: 4px;
	  width: 14rem; }
	  @media (min-width: 576px) {
		.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
		  width: 38em; } }
	  @media (min-width: 768px) {
		.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
		  width: 38em; } }
	  @media (min-width: 992px) {
		.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
		  width: 38em; } }
	  .bootstrap-datetimepicker-widget.dropdown-menu:before, .bootstrap-datetimepicker-widget.dropdown-menu:after {
		content: '';
		display: inline-block;
		position: absolute; }
	  .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #ccc;
		border-bottom-color: rgba(0, 0, 0, 0.2);
		top: -7px;
		left: 7px; }
	  .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid var(--primary-background-color);
		top: -6px;
		left: 8px; }
	  .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 7px solid #ccc;
		border-top-color: rgba(0, 0, 0, 0.2);
		bottom: -7px;
		left: 6px; }
	  .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid var(--primary-background-color);
		bottom: -6px;
		left: 7px; }
	  .bootstrap-datetimepicker-widget.dropdown-menu.float-right:before {
		left: auto;
		right: 6px; }
	  .bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
		left: auto;
		right: 7px; }
	.bootstrap-datetimepicker-widget .list-unstyled {
	  margin: 0; }
	.bootstrap-datetimepicker-widget a[data-action] {
	  padding: 6px 0; }
	.bootstrap-datetimepicker-widget a[data-action]:active {
	  box-shadow: none; }
	.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
	  width: 54px;
	  font-weight: bold;
	  font-size: 1.2em;
	  margin: 0; }
	.bootstrap-datetimepicker-widget button[data-action] {
	  padding: 6px; }
	.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
	  content: "Increment Hours"; }
	.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
	  content: "Increment Minutes"; }
	.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
	  content: "Decrement Hours"; }
	.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
	  content: "Decrement Minutes"; }
	.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
	  content: "Show Hours"; }
	.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
	  content: "Show Minutes"; }
	.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
	  content: "Toggle AM/PM"; }
	.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
	  content: "Clear the picker"; }
	.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
	  content: "Set the date to today"; }
	.bootstrap-datetimepicker-widget .picker-switch {
	  text-align: center; }
	  .bootstrap-datetimepicker-widget .picker-switch::after {
		content: "Toggle Date and Time Screens"; }
	  .bootstrap-datetimepicker-widget .picker-switch td {
		padding: 0;
		margin: 0;
		height: auto;
		width: auto;
		line-height: inherit; }
		.bootstrap-datetimepicker-widget .picker-switch td span {
		  line-height: 2.5;
		  height: 2.5em;
		  width: 100%; }
	.bootstrap-datetimepicker-widget table {
	  width: 100%;
	  margin: 0; }
	  .bootstrap-datetimepicker-widget table td,
	  .bootstrap-datetimepicker-widget table th {
		color: var(--primary-text-color);
		text-align: center;
		border-radius: 0.25rem; }
	  .bootstrap-datetimepicker-widget table th {
		color: var(--primary-text-color);
		height: 20px;
		line-height: 20px;
		width: 20px; }
		.bootstrap-datetimepicker-widget table th.picker-switch {
		  width: 145px; }
		.bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover {
		  background: none;
		  color: #868e96;
		  cursor: not-allowed; }
		.bootstrap-datetimepicker-widget table th.prev::after {
		  content: "Previous Month"; }
		.bootstrap-datetimepicker-widget table th.next::after {
		  content: "Next Month"; }
	  .bootstrap-datetimepicker-widget table thead tr:first-child th {
		cursor: pointer; }
		.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
		  background: var(--misc-secondary); }
	  .bootstrap-datetimepicker-widget table td {
		color: var(--primary-text-color);
		height: 54px;
		line-height: 54px;
		width: 54px; }
		.bootstrap-datetimepicker-widget table td.cw {
		  font-size: .8em;
		  height: 20px;
		  line-height: 20px;
		  color: #868e96; }
		.bootstrap-datetimepicker-widget table td.day {
		  height: 20px;
		  line-height: 20px;
		  width: 20px; }
		.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
		  background: var(--misc-secondary);
		  cursor: pointer; }
		.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
		  color: #868e96; }
		.bootstrap-datetimepicker-widget table td.today {
		  position: relative; }
		  .bootstrap-datetimepicker-widget table td.today:before {
			content: '';
			display: inline-block;
			border: solid transparent;
			border-width: 0 0 7px 7px;
			border-bottom-color: #007bff;
			border-top-color: rgba(0, 0, 0, 0.2);
			position: absolute;
			bottom: 4px;
			right: 4px; }
		.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
		  background-color: #007bff;
		  color: #fff;
		  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
		.bootstrap-datetimepicker-widget table td.active.today:before {
		  border-bottom-color: #fff; }
		.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
		  background: none;
		  color: #868e96;
		  cursor: not-allowed; }
		.bootstrap-datetimepicker-widget table td span {
		  display: inline-block;
		  width: 54px;
		  height: 54px;
		  line-height: 54px;
		  margin: 2px 1.5px;
		  cursor: pointer;
		  border-radius: 0.25rem; }
		  .bootstrap-datetimepicker-widget table td span:hover {
			background: var(--misc-secondary); }
		  .bootstrap-datetimepicker-widget table td span.active {
			background-color: #007bff;
			color: #fff;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
		  .bootstrap-datetimepicker-widget table td span.old {
			color: #868e96; }
		  .bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover {
			background: none;
			color: #868e96;
			cursor: not-allowed; }
	.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
	  height: 27px;
	  line-height: 27px; }

  .input-group.date .input-group-append {
	cursor: pointer; }

.font-17x {
	font-size: 17px;
}

.font-16x {
	font-size: 13px !important;
}

.w-40 {
	width: 40px !important;
}

.card-image-view {
	z-index: 1000;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.image-fit {
	object-fit: cover;
	height: 100%;
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

.overlay-botton {
    position: absolute;
	left: 37%;
	top: 14%;
    max-width: 350px;
    padding: 20px;
    z-index: 1;
}

.border-white {
	border-color: #fff !important;
}

.level-pill {
	display: block;
	position: absolute;
	top: 18px;
	left: 130px;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

.flag-pill {
	display: block;
	position: absolute;
	top: 18px;
	left: 215px;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	line-height: 26px;
	cursor: pointer;
}

.boost-pill {
	display: block;
	position: absolute;
	top: 7px;
	right: 7px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 900;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000;
}

.card-boost-pill {
	display: block;
	position: absolute;
	top: 7px;
	right: 50px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 900;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000;
}

/**
 * Vetted seller pills (issue #1264 follow-up).
 *
 * .badge-primary and .badge-success only ever set background-color, never color, so the label
 * inherited whatever the surrounding heading was using - a muted grey on a mid-blue ground, about
 * 2:1, which is what made the Human-Verified pill unreadable. Both tiers now set their own ground
 * and their own text colour, so neither depends on where the pill is dropped, and both are
 * hardcoded rather than themed: --success-color and --primary-color stay light in .dark-theme, so
 * a themed pill was unreadable there too.
 *
 * Colours are the brand palette (docs/brand-style-guide.md), which has no green in it: the tiers
 * now read as light chip -> dark chip instead of green vs blue, which also makes the hierarchy
 * between them obvious rather than merely different. Navy on Mist is about 13:1 and white on Navy
 * about 14.5:1, both well clear of WCAG AA for the 13px these render at - Deep Sky was tried for
 * both and came in at 3.98:1 and 4.35:1, under the line for text this size. Sky survives as the
 * light tier's hairline.
 *
 * Both selectors name every class the component emits, which looks redundant but is deliberate:
 * ".user-info-wrapper .user-info .user-data span" (0,3,1) also sets color, and beat the obvious
 * ".badge.badge-vetted-seller" (0,3,0), so the pill stayed grey on the profile and want/trade
 * sidebars while looking correct everywhere else. Four and five classes clear it without an
 * !important and without touching that shared rule, which other pages may rely on. It is the same
 * rule that stretched this badge into a full-width bar before the h4 .badge override below.
 */
.badge.badge-pill.badge-success.badge-vetted-seller {
	background-color: #EAF7FE;
	border: 1px solid #0DA9EF;
	color: #0B2B45;
}

/** The higher tier, so it is the solid one: Navy ground, white label. */
.badge.badge-pill.badge-primary.badge-vetted-seller.badge-vetted-seller-human {
	background-color: #0B2B45;
	border-color: #0B2B45;
	color: #fff;
}

/**
 * The brand icon in both pills (brand-icons.css). The clerks sit inside the shield, so the glyph
 * needs a little more than the 1em a Font Awesome shield-check filled to read at pill size.
 */
.badge-vetted-seller .sci {
	font-size: 1.2em;
	margin-right: 1px;
}

/**
 * Vetted seller icon on listing cards (view_vetted-icon.php) - the brand icon alone, no pill, just
 * left of the favourite button (beside the name on want/trade cards, which have no such button).
 * It is a graphic, so it needs 3:1 against the card: Sky on white is only about 2.6:1, so the light
 * theme uses Deep Sky (about 4.3:1) and the dark theme Sky. The Human-Verified icon's second colour
 * (Amber, brand-icons.css) is what tells the tiers apart; the tooltip says it in words.
 */
.vetted-icon {
	display: inline-flex;
	align-items: center;
	margin: 0 6px 0 2px;
	color: #0A7FC2;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.vetted-icon:hover,
.vetted-icon:focus {
	color: #0B2B45;
	text-decoration: none;
}

.dark-theme .vetted-icon {
	color: #0DA9EF;
}

.dark-theme .vetted-icon:hover,
.dark-theme .vetted-icon:focus {
	color: #EAF7FE;
}

/**
 * /vetted-sellers/directory (views/about/view_vetted-sellers-directory.php, issue #1264).
 *
 * The page sits on Cloud, so tiles and cards are white with a hairline rather than tinted.
 *
 * Brand palette only (docs/brand-style-guide.md). Secondary text is Slate, not --text-muted-color:
 * that token is #9da9b9, about 2.4:1 on white, and this page's small print is 12-13px. Every colour
 * that is not a theme token is set again under .dark-theme, where Slate and Navy both disappear.
 * Amber appears once, on the average-rating icon; the Human-Verified icon's Amber clerk is part of
 * the mark itself.
 */
.vetted-dir {
	--vd-muted: #6B7A8C;
	--vd-strong: #0B2B45;
	--vd-tile: #fff;
	--vd-tile-hover: #EAF7FE;
	--vd-card: #fff;
	--vd-line: #e1e7ec;
	--vd-icon: #0A7FC2;
	--vd-icon-human: #0B2B45;
	--vd-meter: #EAF7FE;
}

.dark-theme .vetted-dir {
	--vd-muted: rgba(229, 231, 235, .72);
	--vd-strong: #e5e7eb;
	--vd-tile: #18212f;
	--vd-tile-hover: #2e3c51;
	--vd-card: #1f2937;
	--vd-line: #2e3c51;
	--vd-icon: #0DA9EF;
	--vd-icon-human: #fff;
	--vd-meter: rgba(13, 169, 239, .18);
}

.vetted-dir-intro {
	margin-bottom: 8px;
}

.vetted-dir-list {
	margin: 0 0 24px;
}

.vetted-dir-seller {
	padding: 16px 0;
	border-bottom: 1px solid var(--vd-line);
}

.vetted-dir-seller-head {
	display: flex;
	align-items: center;
}

.vetted-dir-avatar {
	flex: none;
}

.vetted-dir-avatar img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.vetted-dir-seller-body {
	min-width: 0;
	margin-left: 12px;
}

.vetted-dir-name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	word-break: break-word;
}

.vetted-dir-name a {
	color: var(--vd-strong);
	text-decoration: none;
}

.vetted-dir-name a:hover,
.vetted-dir-name a:focus {
	color: var(--vd-icon);
}

.vetted-dir-tier {
	display: inline-block;
	margin-left: 4px;
	color: var(--vd-icon);
	font-size: 18px;
	line-height: 1;
	vertical-align: -2px;
	cursor: help;
}

.vetted-dir-tier.vetted-dir-tier-human {
	color: var(--vd-icon-human);
}

.vetted-dir-meta {
	margin: 2px 0 0;
	color: var(--vd-muted);
	font-size: 13px;
	line-height: 1.4;
}

.vetted-dir-meta li {
	display: inline;
}

.vetted-dir-meta li + li::before {
	content: "\00b7";
	margin: 0 6px;
}

/** The services row sits under the name, indented past the avatar (48px + 12px). */
.vetted-dir-services {
	display: flex;
	flex-wrap: wrap;
	margin: 10px -4px 0 56px;
}

.vetted-dir-services > li {
	width: 33.3333%;
	min-width: 0;
	padding: 0 4px;
}

.vetted-dir-service {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 6px;
	border: 1px solid var(--vd-line);
	border-radius: 6px;
	background-color: var(--vd-tile);
	text-decoration: none;
}

.vetted-dir-service:hover,
.vetted-dir-service:focus {
	background-color: var(--vd-tile-hover);
	text-decoration: none;
}

.vetted-dir-service img {
	flex: none;
	width: 48px;
	height: 36px;
	border-radius: 4px;
	object-fit: cover;
}

.vetted-dir-service-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-left: 8px;
}

.vetted-dir-service-title {
	overflow: hidden;
	color: var(--primary-text-color);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vetted-dir-service-price {
	color: var(--vd-strong);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
}

.vetted-dir-service-price del {
	margin-right: 2px;
	color: var(--vd-muted);
	font-weight: 500;
}

.vetted-dir-no-services {
	margin: 8px 0 0 60px;
	color: var(--vd-muted);
	font-size: 12px;
}

@media (max-width: 575px) {
	.vetted-dir-services {
		margin-left: -4px;
	}

	.vetted-dir-services > li {
		width: 100%;
		margin-bottom: 6px;
	}

	.vetted-dir-no-services {
		margin-left: 0;
	}
}

.vetted-dir-empty {
	padding: 24px;
	border: 1px solid var(--vd-line);
	border-radius: 6px;
	background-color: var(--vd-tile);
}

@media (max-width: 991px) {
	.vetted-dir-side {
		margin-top: 16px;
	}
}

.vetted-dir-card {
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid var(--vd-line);
	border-radius: 6px;
	background-color: var(--vd-card);
}

.vetted-dir-card-h {
	margin: 0 0 12px;
	color: var(--vd-strong);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.vetted-dir-stats {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -6px;
}

.vetted-dir-stat {
	width: 50%;
	padding: 0 6px 12px;
}

.vetted-dir-stat.vetted-dir-stat-wide {
	width: 100%;
	padding-bottom: 0;
}

.vetted-dir-stat dt {
	margin-bottom: 2px;
	color: var(--vd-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.vetted-dir-stat dd {
	margin: 0;
	color: var(--vd-strong);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}

.vetted-dir-accent {
	color: #FFB140;
	font-size: .75em;
	vertical-align: 2px;
}

.vetted-dir-meter {
	height: 6px;
	margin-top: 6px;
	overflow: hidden;
	border-radius: 3px;
	background-color: var(--vd-meter);
}

.vetted-dir-meter span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(135deg, #0DA9EF 0%, #0A7FC2 100%);
}

/** A fixed-height box for Chart.js to fill (responsive, maintainAspectRatio off). Not .h-*, which are pixel heights here. */
.vetted-dir-chart {
	position: relative;
	height: 180px;
}

.vetted-dir-note {
	margin: 8px 0 0;
	color: var(--vd-muted);
	font-size: 12px;
	line-height: 1.4;
}

.card-pill-primary {
	display: block;
	position: absolute;
	top: 7px;
	left: 7px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--primary-color);
	color: var(--text-on-brand);
	font-size: .75em;
	font-weight: 700;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000;
}

.card-pill-success {
	display: block;
	position: absolute;
	top: 7px;
	left: 7px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--success-color);
	color: var(--text-on-brand);
	font-size: .75em;
	font-weight: 700;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000;
}

.card-pill-danger {
	display: block;
	position: absolute;
	top: 7px;
	left: 7px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--danger-color);
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000;
}

.card-pill-warning {
	display: block;
	position: absolute;
	top: 7px;
	left: 7px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--danger-color);
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000;
}

.level-pill-success {
	display: block;
	position: absolute;
	top: 18px;
	left: 130px;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
	background-color: var(--success-color);
	color: var(--text-on-brand);
	font-size: 12px;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

span.graph-legend {
  width: 10px;
  height: 10px;
  border: 1px solid var(--primary-color);
  vertical-align: middle;
  display: inline-block;
  margin: 0 0 3px 0;
  padding: 0;
}

div.not-found p a {
	text-decoration: none;
}

@media (max-width: 768px) {
	ul.nav-pills {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
}

@media (min-width: 768px) {
	.input-joined-right {
		margin-right: 0;
		padding-right: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: 0;
	}

	.input-joined-right:focus,
	.input-joined-center:focus
	{
		border-right: 1px solid var(--primary-color);
		box-shadow: none !important;
	}

	.has-success .input-joined-right,
	.has-success .input-joined-center
	{
		border-right: 1px solid var(--success-color);
	}

	.has-danger .input-joined-right,
	.has-danger .input-joined-center
	{
		border-right: 1px solid var(--danger-color);
	}

	.input-border-joined-center:focus
	{
		border-right: 2px solid var(--primary-color);
	}

	.has-success .input-border-joined-center {
		border-right: 2px solid var(--success-color);
	}

	.has-danger .input-border-joined-center {
		border-right: 2px solid var(--danger-color);
	}

	.input-joined-left {
		margin-left: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}


	.input-joined-left-center {
		margin-left: -1px;
	}



	.input-joined-center {
		margin-left: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: 0;
		margin-left: -1px;
	}

	.input-joined-center.bg-primary {
		border: 1px solid var(--primary-color);
		background-clip: unset;
	}

	.hover-expand {
		width: 2px;
	}
}

/*
 * The remove control on a cloned repeater row (extras, coupons, custom
 * fields, polls).
 *
 * cloneInput/cloneRow inject this anchor as the first child of the
 * cloned row. The rows it lands in already spend all twelve columns, so
 * while it sat in the flow it added its own width to the line and
 * pushed the last column onto a second row. Taking it out of the flow
 * lets the columns keep the full width, and parking it clear of the row
 * leaves a gap between it and the first input instead of butting up
 * against it.
 *
 * 2026-08-25 JD
 */
/*
 * A tier feature line grows with what the seller types rather than
 * scrolling the text out of sight, since the tiers sit three to a
 * row and the field is narrow. It starts the same height as the inputs
 * above it, so an empty one is indistinguishable from a text input.
 *
 * Height is driven by scripts.js; overflow stays hidden so no scrollbar
 * appears mid-growth, and the drag handle is off because the height is
 * not the seller's to set.
 *
 * 2026-08-25 JD
 */
.tier-feature-input {
	min-height: 44px;
	overflow: hidden;
	resize: none;
}

/*
 * Line the icon up with the first line of text.
 *
 * The shared rule nudges icons 3px above the middle of the field, which
 * suits a 44px input whose text is centred in it. A textarea puts its
 * text against its top padding instead and keeps it there as the field
 * grows, so the icon is pinned to that first line rather than to the
 * middle of a box whose height keeps changing.
 *
 * 2026-08-26 JD
 */
.tier-feature-input ~ .input-group-append .input-group-addon {
	top: 21px;
	margin-top: 0;
}

/*
 * The remove control is destructive, so it reads as destructive. The
 * second selector outweighs the shared rule that turns an icon the
 * primary colour while its field has focus.
 */
.tier-feature-input ~ .input-group-append .btn-remove-feature,
.input-group .tier-feature-input:focus ~ .input-group-append .btn-remove-feature {
	color: var(--danger-color);
}

.deletable-parent {
	position: relative;
}

.deletable {
	position: absolute;
	display: inline;
	top: +11px;
	left: -20px;
}

.image-faded::before {
	content: '';
	position: absolute;
	top: 80px;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	opacity: .4;
}

.service-image-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 340px;
	max-width: 600px;
	overflow: hidden;
	/* box-shadow: 1px 1px 15px -5px black;*/
	transition: all .3s ease;
	border-radius: var(--radius);
	border: 1px solid var(--background-darker-color);
  }
  .service-image-wrapper:hover {
	-webkit-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	-moz-box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
	cursor: pointer;
  }
  .service-image-wrapper:hover .service-pic {
	opacity: .5;
  }
  .service-image-wrapper .service-pic {
	height: 100%;
	width: 100%;
	transform: scale(1.05);
	border-radius: var(--radius);
	transition: all .3s ease;
  }
  .service-image-wrapper .service-pic:after {
	font-family: FontAwesome;
	content: "\f007";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	font-size: 190px;
	background: #ecf0f1;
	color: #34495e;
	text-align: center;
  }
  .service-image-wrapper .upload-button {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
  }
  .service-image-wrapper .upload-button .fa-arrow-circle-up {
	position: relative;
	font-size: 234px;
	top: +35px;
	left: 0;
	text-align: center;
	opacity: 0;
	transition: all .3s ease;
	color: var(--third-color);
  }
  .service-image-wrapper .upload-button:hover .fa-arrow-circle-up {
	opacity: .4;
  }

 .service-upload-drag {
	border: 1px dashed #8f9296 !important;
  }

.progress-bar-service {
	width:0%;
	height:3px;
	display: none;
}

.progress-bar-default {
	/* background-color: #aaa !important; */
}

  .image-preview-container a.deletable {
	  /*
	   * Image previews place their remove control by floating it, which
	   * an absolutely positioned element ignores, so this one stays in
	   * the flow the way it always has.
	   *
	   * 2026-08-25 JD
	   */
	  position: relative;
	  left: auto;
	  float: right;
	  margin-top: 23px;
	  margin-left: 5px;
  }

  .image-overflow {
	overflow-y: scroll;
	max-height: 300px;
  }

  .player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    float: left;
    font-family: Arial, sans-serif;
    padding: 0;
    bottom: 0px;
    z-index: 2;
	opacity: 1;
	border-top-left-radius: calc(0.25rem - 1px);
	border-top-right-radius: calc(0.25rem - 1px);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    -webkit-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in;
    -moz-user-select: none;
    -webkit-user-select: none;
	user-select: none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #fff;
}

.video {
    position: relative;
}

.video:hover .player {
    opacity: 1;
}

.whitespace-normal {
	white-space:normal !important;
}

.background-rounded {
	position: relative;
	height: 100%;
	border-bottom-left-radius: 50% 30%;
	border-bottom-right-radius: 50% 30%;
}

.background-edge {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.background-edge-top {
	position: relative;
	height: 100%;
	clip-path: polygon(
	  0 0,
	  100% 0,
	  100% 100%,
	  0 calc(100% - 5vw)
	);
}

.p-link > a {
	transition: color 0.3s;
	color: #61bfeb;
	text-decoration: none;
}

.p-link > a:hover {
	color: #08a2e9;
	cursor: pointer;
}

.api-link {
	transition: color 0.3s;
	color: #61bfeb;
	text-decoration: none;
}

.api-link:hover {
	color: #08a2e9;
	cursor: pointer;
}

.online-dot {
	font-size: 55%;
	color: var(--misc-secondary);
}

.table-hover tbody tr:hover .online-dot {
	color: var(--secondary-color);
}

.list-link:hover .online-dot {
	color: var(--secondary-color);
}

.rating-link {
	transition: color 0.3s;
	color: var(--secondary-color);
	text-decoration: none;
}

.rating-link:hover {
	color: var(--link-color);
	cursor: pointer;
}

.share-link {
	transition: color 0.3s;
	color: var(--secondary-color);
	text-decoration: none;
}

.share-link:hover {
	color: var(--success-text-color);
	cursor: pointer;
}

.report-link {
	transition: color 0.3s;
	color: var(--secondary-color);
	text-decoration: none;
}

.report-link:hover {
	color: #d94343;
	cursor: pointer;
}

[aria-expanded=true].payment-card span:after {
	font-family: feather;
	font-size: 17px;
	content: '  \e115';
 }

 [aria-expanded=false].payment-card span:after {
	font-family: feather;
	font-size: 17px;
	content: '  \e114';
 }

.comment-text a img {
	width: 100%;
	height: 100%;
}

.font-xxl
{
	font-size: xx-large;
}

.dashboard {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.dashboard .nav-item {
	position: relative;
	list-style-type: none;
}

.dashboard .nav-item .nav-nested .nav-item .nav-link {
	padding-left: 45px;
	font-weight: 500;
	font-size: 12px;
	color: var(--secondary-color);
}

.dashboard .nav-item .nav-nested .nav-item.active .nav-link {
	color: var(--third-color);
}

.dashboard .nav-item.active .nav-link {
	color: var(--third-color);
}

.dashboard .nav-item:hover {
	background-color: #f3f3f3;
	cursor: pointer;
}

.dashboard .nav-item .nav-link:hover {
	color: var(--third-color);
}

.dashboard .nav-item .nav-nested .nav-item .nav-link:hover {
	color: var(--third-color);
}

.dashboard .nav-item .nav-link {
	border-top: 1px solid transparent;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--secondary-color);
	font-weight: 500;
	text-decoration: none;
	overflow: hidden;
	display: inline-block;
	padding-left: 26px;
}

.dashboard .nav-item .nav-link .icon {
	display: inline-block;
	min-width: 2.30rem;
	text-align: center;
	font-size: 1.100rem;
}

.dashboard .nav-item .nav-link[data-toggle="collapse"]::after {
	content: " ";
	border: solid;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-width: 0 .1rem .1rem 0;
	display: inline-block;
	padding: 2px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 1.2rem;
	right: 1.25rem;
	transition: transform .3s;
}

.dashboard .nav-item .nav-link[data-toggle="collapse"][aria-expanded="true"]::after {
	transform: rotate(-140deg);
}

.sidebar-dashboard {
	min-height: calc(100vh - 140px);
	background: var(--primary-background-color);
	width: 280px;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0;
	top: 5rem;
	padding-top: 1rem;
	/* width: calc(100vw - 3.5rem); */
	/* max-width: 260px; */
	z-index: 1050;
	width: 15rem;
	z-index: 5;
}

.sidebar-sticky .dashboard
{
	overflow: hidden;
	flex-wrap: nowrap;
	flex-direction: column;
	margin-bottom: 60px;
}

.sidebar-sticky .dashboard .nav-link:hover > a {
	color: var(--link-color);
}

.border-left-inbox {
	border-left:  var(--primary-color);
	border-left-style: solid;
	border-left-width: 3px;
}

.card-inbox-borderless {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.border-left-inbox-none {
	border-radius: var(--radius-sm);
	border-left:  var(--primary-border-color);
	border-left-style: solid;
	border-left-width: 3px;
}

.border-left-inbox-warning {
	border-left:  var(--warning-color);
	border-left-style: solid;
	border-left-width: 3px;
}

.border-right-inbox-warning {
	border-right:  var(--warning-color);
	border-right-style: solid;
	border-right-width: 3px;
}

.link-dashboard {
		color: var(--secondary-color) !important;
		text-decoration: none;
}

.link-dashboard:hover {
	transition: color 0.3s;
	color: var(--link-color) !important;
	cursor: pointer;
}

.overflow-350x {
	overflow-y: auto;
	max-height: 350px;
}

.table-card tr {
	border-radius: var(--radius);
	border-color: var(--primary-border-color);
	box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.03);
}

.table-card .card-gap {
	height: 1rem;
}

.table tr:first-child td {
	border-top: 0 !important;
}

.listing-card-corners {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.fixed-card-small {
	height: 170px;
}

.display-table {
	display: table !important;
}

.dashboard-main {
	position: relative;
	padding-right: 0;
	overflow: hidden;
	padding-left: 15rem;
}

.dashboard-inner {
	padding-right: 2rem;
	padding-left: 2rem;
	padding-top: 1rem;
}

@media (max-width: 768px) {
	.dashboard-main {
		padding-left: 0rem;
	}
}

@media (max-width: 768px) {
	.dashboard-inner {
		padding-right: 1rem;
		padding-left: 1rem;
		padding-top: 1rem;
	}
}

@media (max-width: 768px) {
	.card-hover:hover {
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		background-color: var(--primary-background-color);
	}

	.card-hover {
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		background-color: var(--primary-background-color);
	}

	.product-card {
		background-color: var(--primary-background-color);
	}
}

@media (max-width: 768px) {
	.card-boost:hover {
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		background-color: var(--primary-background-color);
	}

	.card-boost {
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		background-color: var(--primary-background-color);
	}

	.product-card:hover {
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		background-color: var(--primary-background-color);
	}
}


.CardHolder {
	box-sizing: border-box;
	height: 40px;
	/* padding: 10px 12px; */
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	/* background-color: white; */
	box-shadow: 0 1px 3px 0 var(--card-box-shadow);
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
}

.StripeElement {
	box-sizing: border-box;
	height: 40px;
	/* padding: 10px 12px; */
	border: 1px solid var(--card-box-shadow);
	border-radius: var(--radius-sm);
	/* background-color: white; */
	box-shadow: 0 1px 3px 0 var(--card-box-shadow);
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
}

.StripeCard {
	padding: 10px 12px;
	border: 1px solid var(--card-box-shadow);
	border-radius: var(--radius-sm);
	/* background-color: #fff; */
	box-shadow: 0 1px 3px 0 var(--card-box-shadow);
}

.StripeForm:not(:last-child) {
		border-bottom: 1px solid #f0f5fa;
}

.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement:focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
border-color: #fa755a;
}

.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}

.fieldset label:not(:last-child)
{
border-bottom: 1px solid #f0f5fa;
}

.order-box-shadow {
	box-shadow: var(--order-box-shadow) 0px 1px 3px 0px;
	border: 0px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.payment-form {
	/* border-radius: var(--radius-sm);
	border: 1px solid #e8e8fb; */
	box-shadow: var(--payment-form-box-background) 0px 1px 3px 0px;
	border: 0px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

@media (max-width: 768px) {
.payment-form {
	/* border-radius: 0px;
	border: 0px solid #e8e8fb; */
	box-shadow: var(--order-box-shadow) 0px 1px 3px 0px;
	border: 0px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	}
}

.form-price {
	padding: 0 18px 3px;
	border: 0px solid #fff;
	border-radius: var(--radius-sm); /* 22px; changed on 11/13/2018 */
	background-color: var(--primary-background-color);
	color: #000;
	font-family: var(--font-body);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-bottom: 16px;
	font-size: 30px;
	line-height: 1.2;
}

.button-accordion::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	margin-top: -2px;
	transition: -webkit-transform 0.25s;
	transition: transform 0.25s;
	border-right: 0px solid transparent !important;
	border-bottom: 0px dashed !important;
	border-left: 5px solid transparent;
}

.custom-tip-input, .custom-tip-icon {
	margin-top: 8px;
	margin-bottom: 8px;
}

.btn-border {
	border-color: var(--primary-border-color);
}

.wishlist-table .table tbody tr:hover {
	cursor: pointer;
}

.margin-minus-100px
{
	margin-top: -100px;
}

#table-clicky tr td
{
	padding: 1.25rem;
}

.sub-nav {
	width: 100%;
	display: table;
	height: 100%;
	min-height: 100%;
	margin-top: 4px !important;
}

.sub-nav li {
	display: table-cell;
	vertical-align: middle;
}

/*
 * The strip's labels asked for weight 200. No 200 face has ever been loaded
 * for this family, and the markup carried .text-normal - font-weight: normal
 * !important - on the same element, so the declaration had been doing nothing
 * for as long as both have been there. The class is gone from the markup and
 * this is the weight the strip actually renders at.
 */
.sub-nav li a {
	vertical-align: middle;
	font-weight: 500;
}

/*
 * The category strip.
 *
 * It used to draw its own top border. The navbar directly above it already
 * draws a bottom border, so the two sat about a pixel apart in two different
 * greys - #e1e7ec over #d7d7d7 - and a browser that lands either of them on a
 * fractional device pixel anti-aliases both. The result was not one line or
 * two, it was a soft grey band, which is what made the strip look out of
 * focus. There is one line under the navbar now and the strip starts below it.
 */
.sub-menu-nav {
	background: var(--secondary-background-color);
	border-bottom: 1px var(--primary-border-color) solid;
	width: 100%;
	min-height: 40px;

	/*
	 * Contains the margin on .sub-nav. That list carries margin-top: 4px, and
	 * this box used to have a border-top, which is what kept the margin inside
	 * it. With the border gone (see above) the margin collapsed through and
	 * shoved the whole strip 3-4px below the navbar - a transparent band that is
	 * invisible on a white page at rest and shows the listings sliding through
	 * it the moment the header sticks and the page scrolls behind it.
	 * flow-root gives the box its own formatting context, so the margin stays
	 * inside the strip as it did before.
	 */
	display: flow-root;
}

/*
 * The category strip is rendered inside .site-menu, which is
 * position:absolute, so its 40px never occupied any space in the document
 * and every page that shows it began 39px underneath it. That was invisible
 * for as long as the first container happened to carry 48px of top padding -
 * a coincidence, not a mechanism, and it broke the moment the spacing scale
 * moved to 32px.
 *
 * The height is reserved once now, on the body class the header sets when
 * the strip renders, so nothing below has to know the strip exists. The old
 * rule did this for homepage alerts only; it is covered by this one.
 */
@media (min-width: 1071px) {
	body.has-sub-nav #root {
		padding-top: 40px;
	}

	/*
	 * That 40px is the strip's own height, not spacing - it is what stops the
	 * page starting underneath the strip. The gap the eye actually sees is
	 * whatever the first container adds on top of it, and a full page-top step
	 * is too much there: the strip is already a separated band with a rule
	 * under it, so the usual distance from the header has been paid once
	 * before the container starts. The leading container gets one step
	 * instead of two.
	 *
	 * view_header-alert.php always emits something ahead of the page's own
	 * markup - #halertheader when there is nothing to say, or the container it
	 * wraps the alerts in when there is - so the leading container is
	 * addressed through that sibling rather than by position.
	 */
	body.has-sub-nav #root > #halertheader + .container.padding-top-2x,
	body.has-sub-nav #root > .container.mt-2 + .container.padding-top-2x {
		padding-top: var(--space-1x) !important;
	}
}

.homepage-header-alerts > .alert:first-child {
	margin-top: 8px !important;
}

.homepage-header-alerts + .container.padding-top-2x {
	padding-top: 8px !important;
}

.bg-login {
	position: relative;
	background: #fff url('https://www.seoclerk.com/assets/img/bottom-banners/banner-1-bg.jpg');
	height: 100vh;
	background-size: cover;
	background-position: 0 0;
	background-repeat: repeat-y;
}

#question-body a:link {
	text-decoration: none;
}

#question-body a:hover {
	color: #008ecf;
	text-decoration: underline;
}

.underline {
	text-decoration: underline;
}

.btn-wishlist > i {
	/* margin-top: 0px !important; */
}

.divider-text {
    display: flex;
    align-items: center;
	text-align: center;
	color: #d3dadf;
}
.divider-text::before, .divider-text::after {
    content: '';
    flex: 1;
	border-bottom: 1px solid var(--primary-border-color);
}
.divider-text::before {
    margin-right: .25em;
}
.divider-text::after {
    margin-left: .25em;
}

.d-block:hover .online-dot {
	color: var(--secondary-color);
}

.radio-group > input[type=radio] {
	position: absolute;
	visibility: hidden;
	display: none;
}

.radio-group > label {
	color: lighten(40%);
	display: inline-block;
	cursor: pointer;
	font-weight: bold;
	padding: 5px 20px;
	margin-bottom: 0px !important;
}

.radio-group > input[type=radio]:checked + label {
	color: var(--text-on-brand);
	background: var(--primary-color);
}

.radio-group > label + input[type=radio] + label {
	border-left: 1px solid var(--form-border-color);
}

.radio-group {
	border: 1px solid var(--form-border-color);
	display: inline-block;
	margin: 20px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	position: relative;
	margin-top: 8px;
	margin-right: 12px;
	margin-bottom: 8px;
	vertical-align: middle;
	position: relative;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	margin: 0;
	margin-bottom: 20px !important;
}

.avatar-upload {
	position: relative;
	max-width: 130px;
	margin: 10px auto;
}

.avatar-edit {
	position: absolute;
	right: 12px;
	z-index: 1;
	top: 10px;
}

.avatar-preview {
	width: 130px;
	height: 130px;
	position: relative;
	border-radius: 100%;
	border: 6px solid #F8F8F8;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-edit > input {
	display: none;
}

.avatar-edit > input + label {
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-bottom: 0;
	border-radius: 100%;
	background: var(--primary-background-color);
	border: 1px solid transparent;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	font-weight: normal;
	transition: all .2s ease-in-out;
	color: #757575;
	position: absolute;
	left: -20px;
	right: 0;
	text-align: center;
	margin: auto;
}

.avatar-edit > input + label:hover {
	background: #f1f1f1;
	border-color: #d6d6d6;
}

.hover-icons .owl-prev {
	position: absolute;
	left: 10px;
	padding: 10px 0;
}

.hover-icons .owl-next {
	position: absolute;
	right: 10px;
	padding: 10px 0;
}

.hover-icons .owl-next,
.hover-icons .owl-prev {
	bottom: 6px;
	line-height: 1.5;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.hover-icons .owl-next,
.hover-icons .owl-prev {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.hover-icons:hover .owl-next,
.hover-icons:hover .owl-prev {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.hover-icons .like-button {
	top: -3px;
	line-height: 1.5;
	-webkit-transform: translate3d(-75%,-75%,0);
	transform: translate3d(-75%,-75%,0);
}

.hover-icons .folder-button {
	top: -3px;
	line-height: 1.5;
	-webkit-transform: translate3d(75%,-75%,0);
	transform: translate3d(75%,-75%,0);
}

.hover-icons .folder-button-list {
	line-height: 1.5;
	-webkit-transform: translate3d(75%,-75%,0);
	transform: translate3d(75%,-75%,0);
}

.hover-icons .like-button-list {
	line-height: 1.5;
	-webkit-transform: translate3d(-75%,-75%,0);
	transform: translate3d(-75%,-75%,0);
}

.hover-icons .like-button,
.hover-icons .folder-button,
.hover-icons .folder-button-list,
.hover-icons .like-button-list {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.like-button {
	display: block;
	position: absolute;
	top: 7px;
	left: -3px;
	padding: 8px 12px;
	border-radius: 13px 0 13px 0;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 900;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000
}

.folder-button {
	display: block;
	position: absolute;
	top: 7px;
	right: -3px;
	padding: 8px 12px;
	border-radius: 0 13px 0 13px;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 900;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000
}

.like-button-list {
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	padding: 8px 12px;
	border-radius: 6px 0 13px 0;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 900;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000
}

.folder-button-list {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 8px 12px;
	border-radius: 0 0 0 13px;
	background-color: var(--primary-background-color);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 900;
	line-height: 26px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index:1000
}

.hover-icons:hover .like-button,
.hover-icons:hover .folder-button,
.hover-icons:hover .folder-button-list,
.hover-icons:hover .like-button-list {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.category-card:after {
	background: linear-gradient(rgba(0, 0, 0, .1),
	rgba(0, 0, 0, 0));
	border-radius: calc(var(--radius) - 1px);
	top: 0;
	content: '';
	height: 50%;
	left: 0;
	position: absolute;
	width: 100%;
}

.category-card h4 {
	z-index: 1;
	line-height: 23px;
	padding: 15px;
}

.category-card-link {
	position: relative;
	text-decoration: none;
}

.add-folder-button i {
	font-size: 1.5em;
}

.add-folder-button {
	float: right;
}

.active .add-folder-button {
	visibility: hidden;
}

.bg-faded-success {
	background-color: rgba(78, 200, 88, 0.1) !important;
}

.bg-faded-primary {
	background-color: rgba(78, 135, 200, 0.1) !important;
}

.owl-carousel-arrow .owl-prev {
	left: -70px;
}

.owl-carousel-arrow .owl-next {
	right: -70px;
}

.custom-control-input {
	position: absolute;
	left: 0;
	z-index: -1;
	width: 1rem;
	height: 1.25rem;
	opacity: 0;
}

.custom-switch .custom-switch-control-label::before {
	height: 1.25rem;
	border: 0;
	background-color: #dae1e7;
	left: -2.6875rem;
	width: 2.4875rem;
	pointer-events: all;
	border-radius: .625rem;
}

.custom-switch-control-label::before {
	position: absolute;
	top: .25rem;
	left: -1.5rem;
	display: block;
	width: 1rem;
	height: 1rem;
	pointer-events: none;
	content: "";
	background-color: #fff;
	border: #c1cdd7 solid 1px;
	box-shadow: 0 0 0 0 transparent;
}

.custom-switch-control-label::before, .custom-file-label, .custom-select {
	transition: background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}

.custom-switch .custom-switch-control-label::after {
	top: calc(.25rem + 2px);
	left: calc(-2.6875rem + 2px);
	width: calc(1.25rem - 4px);
	height: calc(1.25rem - 4px);
	background-color: #c1cdd7;
	border-radius: .625rem;
	transition: background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out;
}

.custom-switch .custom-switch-control-label::after {
	background-color: #fff;
	box-shadow: 0 0.0625rem 0.25rem 0 rgba(75,86,107,0.3);
}

.custom-switch .custom-control-input:checked ~ .custom-switch-control-label::after {
	background-color: #fff;
	-webkit-transform: translateX(1.1875rem);
	transform: translateX(1.1875rem);
}

.custom-switch {
    padding-left: 2.6875rem;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.image-title {
	background: rgba(49, 49, 49, 0.75);
	color: rgb(246, 246, 246);
	text-align: left;
	position: absolute;
	z-index: 2;
	width: 100%;
	padding: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	bottom: 0;
}

.move-col {
	cursor: move;
}

.dropdown-stay-down {
	transform: translate3d(5px, 35px, 0px)!important;
}

.disable-group {
	cursor: not-allowed;
	opacity: 0.55;
	pointer-events: none;
}

.bg-dark .btn-go-dark {
	color: var(--misc-secondary);
}

.bg-dark .btn-go-dark:hover {
	color: var(--secondary-color);
}

.input-group .margin-bottom-none {
	margin-bottom: 0px !important;
}

.truncate-overflow {
	--max-lines: 2;
	--lh: 1.35rem;
	line-height: var(--lh);
	max-height: calc(var(--lh) * var(--max-lines));
	overflow: hidden;
}

.trash-file-sm {
	padding: 12px;
	position: absolute;
	z-index: 1000;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: all 0.4s;
	border: 1px solid transparent;
	border-radius: 32px;
	background-color: var(--misc-secondary);
	border-color: var(--primary-border-color);
	text-align: center;
	color: var(--secondary-color);
	margin-left: -12px;
	margin-top: -12px;
}

.overflow-x {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
	word-break: break-word;
	hyphens: auto;
}

.pswp__share-tooltip a:last-child {
	display: none;
}

.banner-top-service {
	margin-top: 38px;
}

.sidebar-progress {
	overflow-x: scroll;
	max-height: 635px;
}

.sidebar-progress::-webkit-scrollbar {
	width: 0px;
    background: transparent;
}

.stripe-connect {
	background: #635bff;
	display: inline-block;
	height: 38px;
	text-decoration: none;
	width: 180px;

	border-radius: var(--radius-sm);
	-moz-border-radius: var(--radius-sm);
	-webkit-border-radius: var(--radius-sm);

	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;

	-webkit-font-smoothing: antialiased;
  }

  .stripe-connect span {
	color: var(--primary-background-color);
	display: block;
	font-family: sohne-var, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 14px;
	padding: 11px 0px 0px 24px;
	position: relative;
	text-align: left;
  }

  .stripe-connect:hover {
	background: #7a73ff;
  }

  .stripe-connect.slate {
	background: #0a2540;
  }

  .stripe-connect.slate:hover {
	background: #425466;
  }

  .stripe-connect.white {
	background: var(--primary-background-color);
  }

  .stripe-connect.white span {
	color: #0a2540;
  }

  .stripe-connect.white:hover {
	background: #f6f9fc;
  }

  .stripe-connect span::after {
	background-repeat: no-repeat;
	background-size: 49.58px;
	content: "";
	height: 20px;
	left: 62%;
	position: absolute;
	top: 28.95%;
	width: 49.58px;
  }

  /* Logos */
  .stripe-connect span::after {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 468 222.5' style='enable-background:new 0 0 468 222.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z'/%3E%3Cpath class='st0' d='M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z'/%3E%3Cpolygon class='st0' points='223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 '/%3E%3Crect x='223.8' y='69.3' class='st0' width='25.1' height='87.5'/%3E%3Cpath class='st0' d='M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z'/%3E%3Cpath class='st0' d='M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z'/%3E%3Cpath class='st0' d='M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z'/%3E%3C/g%3E%3C/svg%3E");
  }

  .stripe-connect.white span::after {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 468 222.5' style='enable-background:new 0 0 468 222.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%230A2540;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z'/%3E%3Cpath class='st0' d='M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z'/%3E%3Cpolygon class='st0' points='223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 '/%3E%3Crect x='223.8' y='69.3' class='st0' width='25.1' height='87.5'/%3E%3Cpath class='st0' d='M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z'/%3E%3Cpath class='st0' d='M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z'/%3E%3Cpath class='st0' d='M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z'/%3E%3C/g%3E%3C/svg%3E");
  }

  .card-dropdown {
	cursor: pointer;
  }

  .custom-switch {
	padding-left: 2.25rem;
	padding-bottom: 0.3rem;
  }

  .custom-control-label {
	padding-left: 2rem;
	padding-bottom: 0.1rem;
  }

  .custom-switch .custom-control-label::before {
	left: -1.25rem;
	height: 1rem;
	width: 2.5rem;
	pointer-events: all;
	border-radius: 1rem;
  }

  .custom-switch .custom-control-label::after {
	top: calc(0.25rem + 1px);
	left: calc(-1.25rem + 1px);
	width: calc(1rem - 2px);
	height: calc(1rem - 2px);
	background-color: #adb5bd;
	border-radius: 2rem;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
	.custom-switch .custom-control-label::after {
	  transition: none;
	}
  }

  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
	background-color: #fff;
	-webkit-transform: translateX(1.5rem);
	transform: translateX(1.5rem);
  }

.dropdown-item-trash {
	padding-right: 20px;
	padding-left: 20px;

	padding: .25rem 1.5rem;
}

.dropdown-item-trash > .item-trash {
	transition: color 0.3s;
	color: var(--secondary-color);
	text-decoration: none;
}

.dropdown-item-trash > .item-trash:hover {
	color: var(--link-color);
}

.preferredPayment {
	padding: 24px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	overflow: visible;
}

.balance-button {
	margin-top: 12px !important;
}

.underline-link {
	transition: color 0.3s;
	color: var(--underline-link);
	font-weight: 500 !important;
	text-decoration: underline;
}

.underline-link:hover {
	color: var(--underline-link-hover);
	font-weight: 500 !important;
	cursor: pointer;
	text-decoration: underline;
}

.pswp__button--hide { background-position: -188px -44px; }

.pswp__button.pswp__button--hide {
	background-image: url(../img/illustrations/blocked.png);
	background-size: 30px 30px;
	background-position: 0; /* or: center center; */
}

.pswp__button--show { background-position: -188px -44px; }

.pswp__button.pswp__button--show {
	font-family: feather;
	font-size: 30px;
	text-align: center;
	content: '\e036';
	background-image: url(../img/illustrations/visible.png);
	background-size: 30px 30px;
	background-position: 0; /* or: center center; */
}

.select-all-center {
	top: 20%;
}

.center-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.center-middle {
	display: block;
	margin-top: auto;
	margin-bottom: auto;
}

.owl-carousel .slide-owl-wrap:not(:first-child) {
	display: none;
}

body.home .owl-carousel {
	display: block!important;
	opacity: 1!important;
	min-height: 400px;
}

.owl-carousel > .item:not(:first-child)
{
	display: none;
}

.gallery-wrapper {
 display: flex;
 overflow: hidden;
}

.owl-item {
	flex-shrink: 0;
	width: 100%;
}

.fourO .owl-stage-outer {
	height: 100%
}

.owl-stage-outer {
	height: 450px;
}

/*
 * The listing gallery pre-renders an .owl-stage-outer and .owl-stage of
 * its own per slide, so the 450px frame above lands twice - once on
 * owl's wrapper and once again inside each .owl-item - and autoHeight
 * then measures 450 whatever the image is. A phone caps .item at 250px
 * (350px up to 768), so a slide left 200px of blank page under itself
 * before the buttons.
 *
 * Only the pre-rendered pair inside .owl-item is collapsed. Overriding
 * owl's own wrapper too would take autoHeight out of the loop and pin
 * the strip to one height for every slide; left alone, owl measures the
 * collapsed item and writes the correct height itself.
 *
 * 768 rather than 767.98 to line up with the .item min-height rule this
 * is compensating for.
 *
 * 2026-09-10 JD
 */
@media (max-width: 768px) {
	.product-gallery .owl-item .owl-stage-outer,
	.product-gallery .owl-item .owl-stage {
		height: auto;
	}
}

/*
 * The row under the gallery: favourite and thumbs-up on the left, the
 * thumbnail strip in the middle, sharing on the right.
 *
 * On a phone the strip's thumbnails are hidden-sm-down, so the middle
 * column is empty - but it still takes its share of the flex row and
 * squeezed the buttons into 103px. The pair needs about 116px, so the
 * thumbs-up dropped onto a line of its own under the heart. Dropping
 * the empty column gives the room back, and the phone has no use for
 * the indent either - without it the buttons line up with the image
 * above them.
 *
 * 2026-09-10 JD
 */
@media (max-width: 767.98px) {
	.product-gallery .gallery-thumbs-col {
		display: none;
	}

	.product-gallery .gallery-actions {
		margin-left: 0 !important;
	}
}

/*
 * The phone's Login/Signup button, which stands in for Sign In and Join.
 *
 * The toolbar is pinned to the right and grows to the left, so a wider
 * button pushes the search and bag icons toward the logo. At 320px there
 * is about 15px to spare over the old Join button, which is why the
 * narrowest phones get a smaller label and tighter spacing - there the
 * search icon still clears the logo by 17px.
 *
 * 2026-09-23 JD
 */
.toolbar .tools .header-auth {
	margin-left: 10px;
	padding-right: 12px;
	padding-left: 12px;
}

@media (max-width: 359.98px) {
	.toolbar .tools .header-auth {
		margin-right: 4px;
		margin-left: 6px;
		padding-right: 8px;
		padding-left: 8px;
		font-size: 13px;
	}
}

.icon-visible {
	overflow:visible !important;
}

.btn-poll {
	cursor: pointer;
}

.btn-poll {
	background-color: var(--misc-secondary);
}

.btn-poll:hover {
	background-color: var(--misc-secondary);
	box-shadow: var(--order-box-shadow) 2px 2px 3px 2px;
}

.card-pinned-bottom-start {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
}

.card-pinned {
	position: relative;
	display: block;
}

.wysibb {
	background-color: var(--primary-background-color) !important;
	border: 1px solid var(--primary-border-color);
}

.wysibb-body {
	color: var(--secondary-color) !important;
}

.wysibb-body:focus {
	border-color: var(--primary-color);
}

.wysibb .wysibb-toolbar {
	border-color: var(--primary-border-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container {
	border-color: var(--primary-border-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn i {
	color: var(--secondary-color) !important;
    text-shadow: 0px 0px 0px var(--secondary-color) !important;
	font-weight: 200 !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover {
	background: var(--primary-border-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on,.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on:hover,.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:active {
  background: var(--primary-border-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip {
	background: var(--tool-tip-background-color) !important;
	border: 1px solid var(--tool-tip-border-color) !important;
	color: var(--text-white-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn i {
	color: var(--primary-text-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip ins {
	border-top: 10px solid var(--tool-tip-background-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn .wbb-list {
	border: 1px solid var(--primary-border-color) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--toolbar-dropdown-background) !important;
    line-height: 1.5 !important;
    box-shadow: 0 7px 22px -5px var(--secondary-box-shadow) !important;
}

wbb-list .nc {
	color: var(--link-color);
}

.wbb-list .nc:hover{
	cursor: pointer;
	background-color: var(--misc-secondary);
    color: var(--secondary-color) !important;
}

.wbb-select .option.selected,
.wbb-select .option:hover {
	background-color: var(--misc-secondary) !important;
    color: var(--secondary-color) !important;
}

.tbl-sel {
	border-color: var(--secondary-border-color) !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-dropdown ins.ar, .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-select ins.ar {
	color: var(--primary-text-color-50) !important;
}

#wbbmodal {
	border-radius: 10px;
}

#wbbmodal .wbbm,
#wbbmodal .wbbm-bottom,
#wbbmodal .wbbm-title,
#wbbmodal .wbbm-tablist,
#wbbmodal .wbbm-cont {
	background-color: var(--modal-background) !important;
}

#wbbmodal .wbbm-title {
	border-bottom-color: var(--primary-border-color) !important;
}

#wbbmodal .wbbm-bottom {
	border-top-color: var(--primary-border-color) !important;
}

#wbbmodal #imguploader.drag{
	border: 3px dashed var(--primary-border-color);
}

.wysib_browser .alert {
	max-width: 200px;
}

.fullWidth {
	width: 100%;
}

pre {
	color: var(--primary-text-color) !important;
}

.iziToast-body .iziToast-icon {
	color: var(--primary-color) !important;
}

.ai-help-btn {
	color: var(--text-muted-color);
	padding-left: 5px;
	padding-bottom: 5px;
	font-size: 12px;
}
.ai-help-btn i {
	font-size: 14px;
}

.ai-help-text {
	padding-left: 3px;
}

.ai-queries-left {
	color: var(--text-muted-color);
	padding-left: 3px;
	padding-bottom: 5px;
	font-size: 7px;
}

.authenticator-wrapper {
	display: grid;
	place-items: center;
	margin-top: 10px;
}

.authenticator-qr {
	border: 3px solid;
	border-radius: var(--radius-sm);
	width: 170px;
}

.authenticator-hidden {
	font-size: 17px;
	font-weight: 500;
	padding-top: 5px;
}

/*
 * The eye floats onto the line under the input and is pulled back up into it.
 * The pull is half the 44px input plus half the eye's own 20px line box, so its
 * centre lands on the input's centre - the same line as the validation tick,
 * which is a centred background image. It was -28px against a 21px line, which
 * left it 4.5px low.
 *
 * span. because the eye also carries .fal (Font Awesome: line-height 1) and
 * .text-muted (ui-admincp.css: line-height 1.5), both loaded after this sheet;
 * at equal specificity either one would set the line box and undo the maths.
 */
span.toggle-password-eye {
	float: right;
	top: -32px;
	right: 15px;
	position: relative;
	line-height: 20px;
	cursor: pointer;
}

.has-success .toggle-password-eye, .has-danger .toggle-password-eye {
	right: 37px;
	color: var(--danger-color);
}

.text-line-separator {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-color);
}

.text-line-separator::before,
.text-line-separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--primary-border-color);
}

.text-line-separator:not(:empty)::before {
  margin-right: .5em;
}

.text-line-separator:not(:empty)::after {
  margin-left: .5em;
}

/*
 * Signup: username suggestions derived from the email address, and the
 * inline available/taken state when the user types their own.
 *
 * 2026-08-25 JD
 */
.username-suggestions {
	display: none;
	padding-top: 4px;
	padding-left: 18px;
	font-size: 12px;
	color: var(--text-muted-color);
}

.username-suggestions-label {
	margin-right: 4px;
}

.username-suggestion {
	display: inline-block;
	margin: 3px 4px 0 0;
	padding: 2px 10px;
	border: 1px solid var(--form-border-color);
	border-radius: 12px;
	background-color: transparent;
	color: var(--link-color);
	font-size: 12px;
	line-height: 18px;
	cursor: pointer;
}

.username-suggestion:hover,
.username-suggestion:focus {
	border-color: var(--primary-color);
	background-color: var(--misc-secondary);
}

.username-status {
	padding-top: 2px;
	padding-left: 18px;
	font-size: 12px;
}

.username-status-ok {
	color: var(--success-text-color);
}

.username-status-bad {
	color: var(--danger-color);
}

/**
 * Light theme.
 *
 * Aligned to the brand palette in docs/brand-style-guide.md. Sky #0DA9EF was
 * already the primary here, so most of this is exactness rather than change:
 * Deep Sky #0A7FC2 for hover, Ink #414141 for body text, Slate #6B7A8C for
 * secondary, Navy #0B2B45 for the dark chrome (footer, mobile menu, tooltips),
 * Cloud #F5F8FA for the page tint, Mist #EAF7FE for panels, Amber #FFB140 for
 * warnings and nothing else.
 *
 * Two values in here were dark-theme indigo that had leaked into the light
 * block - --tag-background-color and --hover-background-border-change, the
 * latter visible on .dropzone:hover. Both are now brand colours.
 *
 * Amber is the one that gets abused: it marks exactly one thing in a view and
 * is never a surface. The only sanctioned gradient in the system is
 * linear-gradient(135deg, #0DA9EF 0%, #0A7FC2 100%).
 *
 * 2026-09-20 JD
 */
.light-theme {
	--primary-background-color: #fff;
	--secondary-background-color: #fff;
	--third-background-color: #fff;
	--faded-background-color: #f5f8fa;
	--boost-card-background-color: #f6f6f6;
	--background-darker-color: #eaf7fe;
	--checkout-steps-background: #fff;
	--checkout-steps-background-active: #0da9ef;
	--half-black-background-color:  rgba(0,0,0,.5);
	--footer-background-color: #0b2b45;
	--tag-background-color: #eaf7fe;
	--table-grey-background: #f8f8f8;
	--progress-background: #f0f0f0;
	--comment-background: #fff;
	--modal-background: #fff;
	--hover-background-change: #fff;
	--hover-background-border-change: #0da9ef;
	--toolbar-dropdown-background: #fff;
	--mobile-menu-background: #0b2b45;
	--mobile-menu-header-background: #081f33;
	--dropdown-item-hover: #f6f6f6;
	--menu-link-color: #fff;
	--list-link-color: #969ba1;
	--primary-text-color: #414141;
	--primary-text-color-50: rgba(18, 38, 63, .2);
	--primary-color: #0da9ef;
	/* Text uses of the two brand colours, split from their fill uses so a theme can
	   set a text colour that clears AA without changing a single button. They equal
	   the fill colours until something says otherwise. */
	--link-color: var(--primary-color);
	--success-text-color: var(--success-color);
	--secondary-color: #5d6b7d;
	--third-color: #0b2b45;
	--popover-body-color: #fff;
	--popover-header-color: #0b2b45;
	--badge-text-color: #fff;
	--text-white-color: #fff;
	--text-muted-color: #9da9b9;
	--text-muted-color-less: #3a3f45;
	--text-clear: transparent;
	--primary-border-color: #e1e7ec;
	--secondary-border-color: #d7d7d7;
	--form-border-color: #dbe2e8;
	--form-disabled-background: #f5f5f5;
	--checkout-steps-border: #e1e7ec;
	--checkout-angle-color: #d8e0e6;
	--checkout-active-text-color: var(--text-on-brand);
	--primary-box-shadow-80: rgba(0, 0, 0, 0.8);
	--primary-box-shadow-30: rgba(0, 0, 0, 0.3);
	--secondary-box-shadow: rgba(47, 56, 68, 0.2);
	--modal-box-shadow: rgba(15, 22, 56, 0.35);
	--sidebar-box-shadow: rgba(55, 66, 80, 0.2);
	--card-box-shadow: rgba(18,38,63,.03);
	--order-box-shadow: rgba(230 235 241);
	--search-box-shadow: rgba(241, 241, 241, 0.35);
	--badge-default: #eaeef2;
	--success-color: #43d9a3;
	--success-color-hover: #27c28a;
	--danger-color: #d63939;
	--danger-color-hover: #c62f2f;
	--danger-border-color: #ff1515;
	--info-color: #0da9ef;
	--warning-color: #ffb140;
	--warning-hover: rgba(255, 183, 79, 1);
	--misc-secondary: #f5f5f5;
	--dark-text-color: rgba(0, 0, 0, 0.8);
	--primary-hover-color: #39b8f2;
	/* The primary/info button fill, a shade under Deep Sky so a white label clears AA (4.7:1);
	   see the .btn-primary block after the button colour rules. */
	--btn-primary-color: #0a7abb;
	--btn-primary-hover-color: #08629a;
	--text-on-btn-primary: #ffffff;
	/* Label colour on a brand-coloured fill. Navy clears AA on Sky,
	   success and Amber in every state; white does not, on any of them.
	   Danger is the exception and keeps white. */
	--text-on-brand: #0b2b45;
	--text-on-danger: #ffffff;
	--balance-btn-color: #006da0;
	--balance-btn-hover-color: #006695;
	--tool-tip-background-color: #0b2b45;
	--tool-tip-border-color: #0b2b45;
	--btn-white-background: #fff;
	--btn-white-background-hover: #e6e5e5;
	--table-active-background: rgba(0, 0, 0, 0.05);
	--table-success-background: rgba(67, 217, 163, 0.09);
	--table-info-background: rgba(80, 198, 233, 0.09);
	--table-warning-background: rgba(255, 183, 79, 0.09);
	--table-danger-background: rgba(255, 82, 82, 0.09);
	--scrollbar-thumb-background: #e7e9ec;
	--scrollbar-thumb-hover: #666;
	--scrollbar-track-background: #f5f8fa;
	--payment-card-background: transparent;
	--comment-green-background: #d6f8da;
	--underline-link: #343a40;
	--underline-link-hover: #0da9ef;
	--payment-form-box-background: #e8e8fb;
	--comment-green-text-danger: #ff5252;
	--comment-border: 1px;
	--comment-border-width: 10px;
	--card-comment-border: 1px;
	--card-comment-border-width: 10px;
	--chat-bubble-background-color: var(--misc-secondary);
	--chat-bubble-dot-background-color: #000;
}

/**
 * Dark theme.
 *
 * Re-pointed at the admin control panel's palette (admincp/css/admin-theme.css,
 * the [data-bs-theme="dark"] block) so the storefront and the admin read as one
 * product. What was here before was an indigo scheme - rgb(20 15 52) page,
 * rgb(40 39 80) surfaces, rgb(106 103 234) accent - that shared nothing with
 * the rest of the product and nothing with the brand.
 *
 * The surfaces, borders and text are admincp's, value for value. The accent is
 * the one deliberate difference: it stays Sky #0DA9EF, the brand primary from
 * docs/brand-style-guide.md, rather than admincp's #4299e1. Sky measures about
 * 6:1 against the #111827 page, so it clears AA for both text and controls, and
 * it is what keeps a dark storefront still reading as Seoclerks. admincp's blue
 * is kept for --info-color, where the meaning is "notice", not "brand".
 *
 * Surface ladder, darkest first: page #111827, recessed #18212f, card #1f2937,
 * raised/hover #2e3c51. Borders #2e3c51, or #3b4a61 where a control needs to
 * separate from a card it sits on.
 *
 * 2026-09-20 JD
 */
.dark-theme {
	--primary-background-color: #111827;
	--secondary-background-color: #1f2937;
	--third-background-color: #1f2937;
	--faded-background-color: #18212f;
	--boost-card-background-color: #2e3c51;
	--background-darker-color: #18212f;
	--checkout-steps-background: #111827;
	--checkout-steps-background-active: #0da9ef;
	--half-black-background-color: rgba(0, 0, 0, .5);
	--footer-background-color: #18212f;
	--tag-background-color: #2e3c51;
	--table-grey-background: #18212f;
	--progress-background: #2e3c51;
	--comment-background: #111827;
	--modal-background: #1f2937;
	--hover-background-change: #2e3c51;
	--hover-background-border-change: #3b4a61;
	--toolbar-dropdown-background: #1f2937;
	--mobile-menu-background: #111827;
	--mobile-menu-header-background: #18212f;
	--dropdown-item-hover: #2e3c51;
	--menu-link-color: #e5e7eb;
	--list-link-color: #e5e7eb;
	--primary-text-color: #e5e7eb;
	--primary-text-color-50: rgba(229, 231, 235, .2);
	--primary-color: #0da9ef;
	--secondary-color: #e5e7eb;
	--third-color: #e5e7eb;
	--popover-body-color: #e5e7eb;
	--popover-header-color: #fff;
	--badge-text-color: #fff;
	--text-white-color: #fff;
	--text-muted-color: rgba(229, 231, 235, .6);
	--text-muted-color-less: rgba(229, 231, 235, .85);
	--text-clear: transparent;
	--primary-border-color: #2e3c51;
	--secondary-border-color: #2e3c51;
	--form-border-color: #64748b;
	--form-disabled-background: #18212f;
	--checkout-steps-border: #2e3c51;
	--checkout-angle-color: #2e3c51;
	--checkout-active-text-color: var(--text-on-brand);
	--primary-box-shadow-80: rgba(0, 0, 0, .5);
	--primary-box-shadow-30: rgba(0, 0, 0, .3);
	--secondary-box-shadow: rgba(0, 0, 0, .3);
	--modal-box-shadow: rgba(0, 0, 0, .5);
	--sidebar-box-shadow: rgba(0, 0, 0, .3);
	--card-box-shadow: rgba(0, 0, 0, .3);
	--order-box-shadow: rgba(0, 0, 0, .3);
	--search-box-shadow: rgba(0, 0, 0, .35);
	--badge-default: #2e3c51;
	--success-color: #2dd4a7;
	--success-color-hover: #25b891;
	--danger-color: #d63939;
	--danger-color-hover: #b83232;
	--danger-border-color: #d63939;
	--info-color: #4299e1;
	--warning-color: #f59f00;
	--warning-hover: #d98e00;
	--misc-secondary: #1f2937;
	--dark-text-color: rgba(0, 0, 0, .8);
	--primary-hover-color: #39b8f2;
	/* The primary/info button fill, a shade under Deep Sky so a white label clears AA (4.7:1);
	   see the .btn-primary block after the button colour rules. */
	--btn-primary-color: #0a7abb;
	--btn-primary-hover-color: #08629a;
	--text-on-btn-primary: #ffffff;
	/* Label colour on a brand-coloured fill. Navy clears AA on Sky,
	   success and Amber in every state; white does not, on any of them.
	   Danger is the exception and keeps white. */
	--text-on-brand: #0b2b45;
	--text-on-danger: #ffffff;
	--balance-btn-color: #006da0;
	--balance-btn-hover-color: #006695;
	--tool-tip-background-color: #2e3c51;
	--tool-tip-border-color: #3b4a61;
	--btn-white-background: #1f2937;
	--btn-white-background-hover: #2e3c51;
	--table-active-background: rgba(255, 255, 255, .04);
	--table-success-background: rgba(47, 179, 68, .12);
	--table-info-background: rgba(66, 153, 225, .12);
	--table-warning-background: rgba(245, 159, 0, .12);
	--table-danger-background: rgba(214, 57, 57, .12);
	--scrollbar-thumb-background: #2e3c51;
	--scrollbar-thumb-hover: #3b4a61;
	--scrollbar-track-background: transparent;
	--payment-card-background: transparent;
	--comment-green-background: rgba(45, 212, 167, .22);
	--underline-link: #e5e7eb;
	--underline-link-hover: #0da9ef;
	--payment-form-box-background: #18212f;
	--comment-green-text-danger: #e5e7eb;
	--comment-border: 1px;
	--comment-border-width: 10px;
	--card-comment-border: 0;
	--card-comment-border-width: 0;
	--chat-bubble-background-color: var(--misc-secondary);
	--chat-bubble-dot-background-color: var(--text-white-color);
}


/**
 * Security page on a phone: when a row's action column wraps below its
 * text, the buttons center under it instead of hugging the left edge.
 * The icon column is the row's FIRST col-auto, the action column its
 * LAST - only the action column is touched.
 *
 * 2026-08-27 JD
 */
@media (max-width: 575.98px) {
	.security-page .card .row > .col-auto:last-child {
		width: 100%;
		text-align: center;
	}

	.security-page .card .row > .col-auto:last-child .btn,
	.security-page .card .row > .col-auto:last-child .alignright {
		float: none;
	}
}

/**
 * Security-incident notice banner (issue #978) - view_breach-notice.php.
 * Bordered card rather than the theme's solid alert paint, which was
 * rejected as unreadable. The wrapper is a "container padding-top-2x"
 * (toolbar clearance); its bottom spacing is placement-specific - see the
 * .breach-notice-wrap states further down and the placement script in the
 * view.
 *
 * 2026-09-02 JD
 */
#breach-notice {
	position: relative;
	background: #fdf1f2;
	border: 2px solid #dc3545;
	border-radius: 6px;
	color: #333;
	padding: 0.85rem 3rem 0.85rem 1.1rem;
}

#breach-notice .fa {
	color: #dc3545;
}

#breach-notice a {
	color: #dc3545;
	font-weight: 600;
	text-decoration: underline;
}

#breach-notice-close {
	position: absolute;
	top: 0.45rem;
	right: 0.75rem;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
	color: #dc3545;
	background: none;
	border: 0;
	padding: 0;
	opacity: 0.8;
	cursor: pointer;
}

#breach-notice-close:hover {
	opacity: 1;
}

/*
 * Wrap spacing. Default: the wrapper supplies padding-top-2x (toolbar
 * clearance) and the negative bottom margin hands that clearance role to
 * the next container's own padding-top-2x on standard pages. The JS in the
 * view swaps to one of the other two states after inspecting what actually
 * follows: below-hero when the banner is relocated under a fw-section /
 * page-title band, flush when the next block is anything else.
 */
.breach-notice-wrap { margin-bottom: calc((var(--space-2x) + 4px) * -1); }

@media (max-width: 768px) {
	.breach-notice-wrap { margin-bottom: 16px; }
}

.breach-notice-wrap.breach-notice-below-hero {
	margin-top: 0;
	margin-bottom: 16px;
}

.breach-notice-wrap.breach-notice-flush { margin-bottom: 16px; }

/*
 * The AJAX-loaded promo (fetch/dashboard/promotions) renders into the
 * #promotions anchor INSIDE the padded container whose top padding the
 * breach banner's negative handoff consumes - without this the promo sits
 * flush against the banner. Scoped to the loaded promo so promo-less
 * pages are untouched; the anchor is empty until the fetch lands, and the
 * scan in view_breach-notice.php runs before that, so this is CSS-only on
 * purpose.
 */
/*
 * The header-type promo is view_holiday-alert.php (div.alert
 * .alert-image-bg); the sidebar/faq types are view_holiday-sidebar.php
 * (section.promo-box-big) - cover both.
 */
#promotions .promo-box-big,
#promotions .alert {
	margin-top: 16px;
}

/*
 * Tier comparison on the listing page - issue #908
 *
 * Each tier is a label wrapping a hidden radio, so the whole card is
 * the click target and the selection posts with the buy form without
 * any script. The radio stays focusable rather than display:none so
 * the comparison can still be used from the keyboard.
 *
 * Colours come from the existing variables, so the comparison follows
 * the light and dark themes like the rest of the page.
 *
 * 2026-08-26 JD
 */
.tier-option {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 20px 18px;
	border: 2px solid var(--primary-border-color);
	border-radius: var(--radius);
	background-color: var(--secondary-background-color);
	cursor: pointer;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tier-option:hover {
	border-color: var(--success-color);
}

.tier-option-selected {
	border-color: var(--success-color);
	box-shadow: 0 0 0 1px var(--success-color);
}

/*
 * Off screen rather than display:none, which would take the radio out
 * of the tab order and make the comparison keyboard inaccessible.
 */
.tier-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

/*
 * Keyboard focus only. Plain :focus also fires when the card is clicked,
 * which drew a box around the tier name on every selection - the border
 * and the button already say which tier is chosen.
 */
.tier-radio:focus-visible + .tier-option-head {
	outline: 2px solid var(--success-color);
	outline-offset: 4px;
}

.tier-option-head {
	display: block;
	margin-bottom: 10px;
}

.tier-badge {
	position: absolute;
	top: -12px;
	right: 12px;
}

.tier-name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--secondary-color);
}

.tier-price {
	display: block;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--secondary-color);
}

.tier-price del {
	font-size: 15px;
	font-weight: 400;
	margin-right: 6px;
}

.tier-delivery {
	display: block;
	margin-bottom: 12px;
}

.tier-features {
	display: block;
	/*
	 * Pushes the select button to the bottom so the buttons line up
	 * across tiers with different numbers of features.
	 */
	flex: 1 1 auto;
	margin-bottom: 12px;
}

.tier-feature {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 4px;
	color: var(--text-muted-color);
}

.tier-choose {
	margin-bottom: 0 !important;
	pointer-events: none;
}

/*
 * Tier badges in the cart - issue #908
 *
 * The badges are spans, not links, so the theme's link colours cannot
 * reach them - as anchors they fell to "a:hover { color:
 * var(--primary-color) }", the very colour badge-primary uses behind
 * them. No colour is set here: the active badge takes .badge's white on
 * badge-primary's background, and the inactive ones use badge-default,
 * whose own rule pairs its background with a readable text colour in
 * both themes. Pinning white here was itself a bug for that pairing.
 *
 * 2026-08-26 JD
 */
.cart-tier-option {
	cursor: pointer;
}

.cart-tier-option:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/*
 * Phone-width fixes around tiers and the cart - issue #908 / #909
 *
 * 2026-08-26 JD
 */
@media (max-width: 576px) {

	/*
	 * The header toolbar gained the cart icon, and four 44px circles
	 * plus margins no longer fit beside the logo - the search circle
	 * was landing on top of it. The bell shares the .cart class.
	 */
	.toolbar {
		right: 8px;
	}

	.toolbar .search,
	.toolbar .cart {
		width: 36px;
		height: 36px;
		margin-left: 3px;
		font-size: 15px;
	}


	.toolbar .account {
		margin-left: 3px;
	}


	/*
	 * The order page item card: a fixed 150px card cannot hold stacked
	 * tier badges, and its title/price table squeezed the title into a
	 * narrow column. The table stacks, the title runs the full width,
	 * and the mobile thumbnail stops floating beside it.
	 */
	.product-card.product-list.order-item-card {
		height: auto;
	}

	.product-card.product-list.order-item-card .product-info > .alignleft {
		float: none;
		padding-right: 0 !important;
	}

	.product-card.product-list.order-item-card .product-info > table,
	.product-card.product-list.order-item-card .product-info > table > tbody,
	.product-card.product-list.order-item-card .product-info > table > tbody > tr,
	.product-card.product-list.order-item-card .product-info > table > tbody > tr > td {
		display: block;
		width: 100%;
		text-align: left;
	}

	/*
	 * The step footer: with its labels back (they were hidden on
	 * phones, leaving a wide bordered box holding a lone arrow) the
	 * two buttons sit on one compact row.
	 */
	.checkout-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16px;
	}

	.checkout-footer > .column {
		display: block;
		padding: 6px 10px;
	}
}

/*
 * A tier below the one purchased on the progress page - visible for the
 * record but visibly not on offer.
 *
 * 2026-08-26 JD
 */
.tier-option-passed {
	opacity: 0.45;
	cursor: default;
}

/*
 * Add to cart and Order now side by side - issue #908
 *
 * The base .btn rule gives every button 8px top and bottom margins, and
 * the order button's mb-0 broke that symmetry, so flex centring seated
 * it lower than the cart button beside it. Inside this row the buttons
 * carry no vertical margins at all and the flex centring does the work.
 */
.order-now-buttons .btn {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * Order page item card on phones - issue #908 second pass.
 *
 * The title/qty/price table stacks, but as one full-width block per
 * cell it left large gaps and put the price on its own distant line.
 * Here the row becomes a wrapping flex line: title full width, then
 * quantity bottom-left with the price floated to its right on the same
 * line. The desktop-spacing cells are tagged and hidden. The tier
 * badges and the faster-delivery offer sit together in a bordered box
 * under the "Tier:" label.
 */
@media (max-width: 576px) {

	.product-card.product-list.order-item-card .product-info > table > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.product-card.product-list.order-item-card .product-info > table > tbody > tr > td {
		display: block;
		width: auto;
		padding: 0;
	}

	.product-card.product-list.order-item-card .product-info > table > tbody > tr > td:first-child {
		flex: 1 1 100%;
	}

	.product-card.product-list.order-item-card .order-cell-qty {
		margin-top: 6px;
	}

	.product-card.product-list.order-item-card .order-cell-qty .count-input {
		margin-bottom: 0;
	}

	.product-card.product-list.order-item-card .order-cell-price {
		margin-left: auto;
		margin-top: 6px;
	}

	.product-card.product-list.order-item-card .order-cell-price h3,
	.product-card.product-list.order-item-card .order-cell-price .alignright {
		margin: 0 !important;
		float: none;
	}

	.product-card.product-list.order-item-card .card-title {
		margin-bottom: 6px;
	}

	.product-card.product-list.order-item-card .product-buttons {
		margin-top: 8px;
	}

	.tier-picker-box {
		border: 1px solid var(--primary-border-color);
		border-radius: var(--radius);
		padding: 10px 12px;
		margin-top: 4px;
	}
}

/*
 * Header count pill, every viewport - issue #908/909.
 *
 * Flex does the circle centring (line-height arithmetic against the
 * inner box kept drifting). The count is a filled pill on the circle's
 * top right corner; its colour needs !important because the count
 * carries the text-primary utility whenever it is non zero, which
 * painted it primary-on-primary - the invisible number.
 */
.toolbar .search,
.toolbar .cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.toolbar .search > i,
.toolbar .cart > i {
	line-height: 1;
}

.toolbar .cart > .count {
	position: absolute;
	top: -4px;
	right: -4px;
	margin: 0;
	min-width: 15px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--primary-color);
	/* White numeral here by request. It is a 10px badge on Sky, so it is the
	   one brand fill that does not carry an AA label; the count is decorative
	   next to the icon it sits on rather than the only route to the value. */
	color: var(--text-white-color) !important;
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	text-align: center;
}

.toolbar .cart > .subtotal {
	display: none;
}

/*
 * Tier chips - the one strip both the cart and the order page render
 * through views/components/view_tier-tabs.php. Issue #908.
 *
 * Outlined pills rather than tabs: tier names run long, and a wrapped
 * tab strip reads as broken while wrapped chips read as a list. The
 * active chip is filled and carries a check.
 */
.tier-tabs-wrap {
	display: flex;
	align-items: flex-start;
}

.tier-tabs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	flex-shrink: 0;
	max-width: 50%;
}

/*
 * A long tier name ellipsizes on its chip - the panel beside it shows
 * the full name, and the room saved is the panel's.
 */
.tier-tab {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The detail panel beside the chips, split off by a light vertical
 * rule. Hovering a chip swaps which pane shows (scripts.js).
 */
.tier-tab-detail {
	flex: 1;
	min-width: 0;
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px solid var(--primary-border-color);
	align-self: stretch;
	/*
	 * Every pane occupies the same grid cell, so the panel is always
	 * as tall as its tallest pane - hovering between tiers cannot
	 * change the card's height, which had the image bobbing.
	 */
	display: grid;
}

.tier-tab-detail .tier-tab-pane {
	grid-area: 1 / 1;
}

.tier-tab-detail .tier-pane-off {
	visibility: hidden;
}

/*
 * A pane's price sits at the right end of its line - the name and the
 * quick offer take the room that remains, and a price never wraps.
 */
.tier-pane-price {
	margin-left: auto;
	padding-left: 10px;
	white-space: nowrap;
}

/*
 * The quick delivery line runs the panel's full width on one line.
 */
.tier-pane-quick {
	white-space: nowrap;
}

/*
 * The inline copy of a tier's detail. Hidden outright except on the
 * phone layout below, where it is the only copy shown.
 */
.tier-tab-inline {
	display: none;
}

/*
 * Phones: the chips stack and each tier's detail moves under the chip
 * it belongs to.
 *
 * The panel beside the chips is a desktop affordance - it swaps on
 * hover, which a touch screen cannot do, and dropped below the list it
 * read as belonging to no tier in particular. The selected tier's copy
 * sits indented under its own chip instead, hung off a rule in the
 * chip's own colour so the two read as one thing.
 *
 * 2026-09-10 JD
 */
@media (max-width: 767.98px) {
	.tier-tabs-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.tier-tabs {
		max-width: none;
	}

	.tier-tab-detail {
		display: none;
	}

	.tier-tab.active + .tier-tab-inline {
		display: block;
		align-self: stretch;
		margin: 4px 0 6px 14px;
		padding-left: 12px;
		border-left: 2px solid var(--success-color);
	}
}

.tier-tab {
	padding: 5px 14px;
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius-sm);
	color: var(--secondary-color);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.tier-tab:hover {
	border-color: var(--success-color);
	color: var(--success-text-color);
}

.tier-tab.active {
	background-color: var(--success-color);
	border-color: var(--success-color);
	color: var(--text-on-brand);
}

.tier-tab:focus-visible {
	outline: 2px solid var(--success-color);
	outline-offset: 2px;
}

/*
 * Desktop order page: quantity and price top-aligned with the title
 * rather than sunk to the middle of the row.
 */
@media (min-width: 577px) {
	.product-card.product-list.order-item-card .product-info > table > tbody > tr > td {
		vertical-align: top;
	}

	.product-card.product-list.order-item-card .order-cell-price h3 {
		margin: 0;
		line-height: 26px;
	}
}

/*
 * The order card grew with the tier panel, and card-img-left's
 * absolute positioning with min-height: 100% stretched the listing
 * image to the new height. Instead: the sharp image sits in flow at
 * its natural aspect with the rating and thumbs under it, all over a
 * blurred stretched copy of the same image filling the column - so
 * however tall the card gets, nothing warps and nothing sits empty.
 */
.product-card.product-list.order-item-card .product-thumb {
	border-right: 1px solid var(--primary-border-color);
	overflow: hidden;
	vertical-align: top;
}

.product-card.product-list.order-item-card .product-thumb .card-img-left {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	border-right: 0;
}

/*
 * With the image pinned to the top of a tall card, the sale ribbon
 * moves to the top left corner so it stays on the artwork rather than
 * floating in the blank space below it.
 */
.product-card.product-list.order-item-card .product-thumb .sale-banner {
	top: 0;
	bottom: auto;
	left: 0;
}

.product-card.product-list.order-item-card .product-thumb .sale-banner span {
	/*
	 * Mirror of the stock bottom-left ribbon (right: -25 / bottom: 30
	 * / rotate 45): same distances measured from the opposite corner,
	 * so the band crosses the corner at the same offset the original
	 * does instead of cutting mid-image.
	 */
	right: auto;
	bottom: auto;
	left: -65px;
	top: 30px;
	transform: rotate(-45deg);
}

.product-card.product-list.order-item-card .product-thumb .thumb-ratings {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: 1;
	display: block;
	text-align: center;
}

.product-card.product-list.order-item-card .product-thumb .thumb-ratings .btn {
	margin: 0 2px;
	cursor: default;
}

/*
 * The image keeps its own link now that the cell is a div, so the
 * seller block below can hold a real button.
 */
.product-card.product-list.order-item-card .product-thumb .thumb-image-link {
	display: block;
	position: relative;
}

/*
 * Tiered listings: the order card takes the cart line's shape - a
 * small thumbnail beside the title, price and quantity at the right,
 * chips and the detail panel below. Issue #908.
 */
.product-card.product-list.order-item-card .order-media {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
}

.product-card.product-list.order-item-card .order-media-thumb {
	flex-shrink: 0;
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
}

.product-card.product-list.order-item-card .order-media-thumb img {
	display: block;
	height: auto;
}

.product-card.product-list.order-item-card .order-media-thumb .sale-banner {
	width: 60px;
	height: 60px;
	bottom: 0;
	left: 0;
}

.product-card.product-list.order-item-card .order-media-thumb .sale-banner span {
	width: 114px;
	right: -15px;
	bottom: 18px;
	padding: 1px 0;
	font-size: 9px;
}

.product-card.product-list.order-item-card .order-media-body {
	flex: 1 1 auto;
	min-width: 0;
}

.product-card.product-list.order-item-card .order-media-side {
	flex-shrink: 0;
	margin-left: 14px;
}

.product-card.product-list.order-item-card .order-media-price {
	margin-top: 0;
}

@media (max-width: 575.98px) {
	.product-card.product-list.order-item-card .order-media {
		flex-wrap: wrap;
	}

	.product-card.product-list.order-item-card .order-media-side {
		width: 100%;
		margin-left: 0;
		margin-top: 6px;
	}
}

.tier-upgrade-link {
	pointer-events: auto;
}

#extras-quick #table-clicky tr td {
	padding-top: 12px;
	padding-bottom: 12px;
}

#extras-quick .custom-control {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Passkey enrollment and compact security-settings credential list. */
#passkey-settings .passkey-compact-list {
	max-width: 640px;
}

#passkey-settings .passkey-compact-list .list-group-item {
	background: transparent;
	border-color: var(--secondary-border-color);
}

#passkey-settings .passkey-list-copy {
	min-width: 0;
	line-height: 1.25;
}

#passkey-settings .passkey-list-copy strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#passkey-enrollment-modal .passkey-step-track {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

#passkey-enrollment-modal .passkey-step-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--secondary-border-color);
}

#passkey-enrollment-modal .passkey-step-dot.active {
	background: #0275d8;
	box-shadow: 0 0 0 4px rgba(2, 117, 216, .12);
}

#passkey-enrollment-modal .passkey-step-line {
	width: 54px;
	height: 2px;
	background: var(--secondary-border-color);
	margin: 0 8px;
}

#passkey-enrollment-modal [hidden] {
	display: none !important;
}

#passkey-enrollment-modal .passkey-enrollment-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 117, 216, .1);
	color: #0275d8;
	font-size: 1.35rem;
}

@media (max-width: 575px) {
	#passkey-settings > .row > .col-auto:first-child {
		display: none;
	}

	#passkey-settings .passkey-compact-list {
		max-width: none;
	}
}

/**
 * "Sign in with LinkedIn" button. Sized and coloured to sit with the
 * button Google Identity Services renders directly above it, which is
 * 310x40 ("large" ignores the height we ask for), white, a 1px #dadce0
 * border and a 4px radius.
 *
 * 2026-09-17 JD
 */
.btn-linkedin-login {
	display: flex;
	align-items: center;
	width: 310px;
	max-width: 100%;
	height: 40px;
	margin-top: 8px;
	padding: 0 12px;
	background-color: #fff;
	border: 1px solid #dadce0;
	border-radius: var(--radius-sm);
	color: #3c4043;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.btn-linkedin-login:hover,
.btn-linkedin-login:focus {
	background-color: #f8f9fa;
	border-color: #d2e3fc;
	color: #3c4043;
	text-decoration: none;
}

/*
 * Laid out the way Google lays its own button out: the logo sits in an
 * 18px box against the left padding and the label is centred in what is
 * left, so the two logos and the two labels line up down the modal.
 *
 * 2026-09-18 JD
 */
.btn-linkedin-login i {
	flex: 0 0 18px;
	width: 18px;
	margin-right: 8px;
	color: #0A66C2;
	font-size: 18px;
	text-align: center;
}

.btn-linkedin-login span {
	flex: 1 1 auto;
	text-align: center;
	letter-spacing: 0.25px;
}

/*
 * Compact login modal. It was 725px tall and ran off the bottom of the
 * screen at high display scaling. Tighter gaps, and the passkey, Google
 * and LinkedIn buttons as one stack of 40px buttons 8px apart.
 *
 * 2026-09-19 JD
 */
#modalLogin .modal-header {
	padding-top: 12px;
	padding-bottom: 12px;
}

#modalLogin .form-group {
	margin-bottom: 12px !important;
}

#modalLogin .form-group.mb-0,
#modalLogin .modal-login-captcha {
	margin-bottom: 0 !important;
}

#modalLogin .modal-login-forgot {
	margin: 4px 0;
	font-size: 13px;
	text-align: right;
}

#modalLogin .passkey-primary-login {
	margin-top: 12px !important;
}

#modalLogin .passkey-primary-login > .text-center {
	margin-bottom: 12px !important;
}

#modalLogin .passkey-primary-login-button {
	height: 40px;
	margin: 0;
}

/*
 * Laid out like .btn-linkedin-login just below it: the key sits in the
 * same fixed-width left box the Google and LinkedIn icons use, instead of
 * Bootstrap's default centred icon+text run, so all three buttons' icons
 * line up down the modal.
 *
 * 2026-09-22 JD
 */
.passkey-primary-login-button {
	display: flex;
	align-items: center;
}

.passkey-primary-login-button i {
	flex: 0 0 18px;
	width: 18px;
	margin-right: 8px;
	font-size: 16px;
	text-align: center;
}

.passkey-primary-login-button span {
	flex: 1 1 auto;
	text-align: center;
}

/* The divider printed when passkeys are off; the 8px below comes from the stack. */
#modalLogin .modal-login-or {
	margin: 12px 0 4px;
}

#modalLogin .modal-login-social {
	margin-top: 8px;
}

/*
 * The login popup's Login / Sign Up tabs sit on the header's bottom
 * edge, the active one open into the pane below it. The panes lose the
 * inset rule every .modal-body draws along its top, which would be a
 * second line under the tabs.
 *
 * 2026-09-23 JD
 */
#modalLogin .modal-auth-header {
	flex-shrink: 0;
	align-items: flex-end;
	padding-bottom: 0;
	border-bottom: 1px solid var(--primary-border-color);
}

#modalLogin .modal-auth-header .close {
	align-self: center;
}

#modalLogin .modal-auth-tabs {
	flex: 1 1 auto;
	margin-bottom: -1px;
	border-bottom: 0;
}

#modalLogin .modal-auth-tabs .nav-link {
	padding: 10px 16px;
}

#modalLogin .modal-auth-tabs .nav-link:not(.active):not(:hover) {
	color: var(--text-muted-color);
}

#modalLogin .modal-auth-tabs .nav-link.active {
	border-bottom-color: var(--modal-background);
	background-color: var(--modal-background);
}

#modalLogin .modal-auth-pane {
	border-top: 0;
}

/*
 * The login popup always fits the screen: the tabs stay put and the
 * pane scrolls under them when it is taller than the room left. It ran
 * off the bottom of a phone before, with the tabs scrolling away too.
 * A phone gets the whole height less Bootstrap's 8px margins, so the
 * popup keeps its size when the tabs switch; a bigger screen gets one
 * as tall as its pane, up to the height of the screen.
 *
 * The theme's .modal-dialog is a full-height flex column that centres
 * the popup and .modal-content is overflow-y: auto !important, so the
 * dialog gets a real height here and the content hands its scrolling
 * to .modal-auth-body.
 *
 * 2026-09-23 JD
 */
#modalLogin .modal-dialog {
	height: calc(100% - 3.5rem);
	min-height: 0;
}

#modalLogin .modal-content {
	min-height: 0;
	max-height: 100%;
	overflow: hidden !important;
}

#modalLogin .modal-auth-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 575.98px) {
	#modalLogin .modal-dialog {
		height: calc(100% - 1rem);
	}

	#modalLogin .modal-content {
		height: 100%;
	}
}

#modalLogin .modal-auth-pane-title {
	margin: 4px 0 16px;
}

/* Leaderboards (issue #1132) */
.leaderboard-table .leaderboard-rank {
	width: 4.5rem;
	white-space: nowrap;
}

.leaderboard-table .leaderboard-avatar {
	flex-shrink: 0;
}

.leaderboard-table .leaderboard-member {
	min-width: 0;
	word-break: break-word;
}

/*
 * Floated blocks from the editor's align buttons.
 *
 * [left] and [right] have been in the BBCode filter for years, but the
 * class it wrapped them in - Bootstrap 3's pull-left - is not in
 * Bootstrap 4 and was never in this stylesheet either, so the div did
 * nothing and an image could only ever be centred. The filter now emits
 * these two classes, which nothing else on the site uses, so the rules
 * can float without disturbing the markup that still carries the old
 * Bootstrap 3 names.
 *
 * The float is dropped on a phone, where an image beside a column of
 * text leaves room for about three words per line.
 *
 * 2026-09-20
 */
.bb-float-left,
.bb-float-right {
	max-width: 100%;
}

.bb-float-left {
	float: left;
	margin: 0 20px 10px 0;
}

.bb-float-right {
	float: right;
	margin: 0 0 10px 20px;
}

.bb-float-left img,
.bb-float-right img {
	max-width: 100%;
}

@media (max-width: 576px) {
	.bb-float-left,
	.bb-float-right {
		float: none;
		margin: 0 0 10px;
	}
}

/*
 * A float ends where its post does. #question-body holds the body of a
 * discussion and of a blog post; a comment's float is stopped by the
 * footer that carries its date and reply link, because .comment-body
 * already spends its ::after on the speech bubble arrow.
 */
#question-body::after {
	display: block;
	clear: both;
	content: "";
}

.comment .comment-footer {
	clear: both;
}

/*
 * The header image picker on the discussion form: one dropzone, and the
 * picture it holds previewed beside it. The preview sits outside the
 * dropzone - it has to survive the picture being replaced - so it does not
 * inherit .dropzone .dz-preview.
 *
 * 2026-09-20
 */
.dropzone-header-image .dz-message {
	margin: 1.5em 0;
}

.header-image-thumb {
	display: block;
	max-width: 100%;
	max-height: 150px;
}

/*
 * Cross-domain sign-in (issue #1210): "Already signed in on the other
 * storefront? Continue with that account." An account-chooser row, styled
 * like a saved account elsewhere on the web, because that is the pattern a
 * returning member already recognises. There is no photo or name to show -
 * this host does not know who the visitor is on the other one until the
 * link is followed - so the brand mark tile stands in for an avatar,
 * exactly as the style guide's polarity rule has it on a light page: Sky
 * tile, white mark (docs/brand-style-guide.md).
 *
 * 2026-09-21
 */
.sso-continue-card {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--primary-border-color);
	border-radius: 8px;
	background: var(--secondary-background-color);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}

.sso-continue-card:hover {
	background: var(--hover-background-change);
	border-color: var(--hover-background-border-change);
	text-decoration: none;
}

/*
 * The sitewide `a:focus { outline: none; }` above drops the browser's own
 * ring, and this card is large enough - and the whole thing is the click
 * target, not a line of text - that a keyboard user tabbing through the
 * modal needs a visible cue it is focused. :focus-visible so a mouse click
 * does not leave the ring sitting there.
 *
 * Not var(--primary-color): on the light theme that is Sky, which is only
 * 2.65:1 against the white card - under the 3:1 WCAG floor for a UI
 * indicator. Deep Sky clears it (4.35:1). The dark theme's own primary
 * (purple) already clears 3:1 against its card, so it keeps it.
 */
.sso-continue-card:focus-visible {
	outline: 2px solid #0A7FC2;
	outline-offset: 2px;
}

.dark-theme .sso-continue-card:focus-visible {
	outline-color: var(--primary-color);
}

.sso-continue-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--primary-color);
	margin-right: 12px;
}

/*
 * The polarity rule (docs/brand-style-guide.md): the tile inverts against
 * its surface. --primary-color is Sky on the light theme but the site's
 * purple accent on the dark one, so a fixed Sky-tile-plus-white-mark image
 * would stop inverting the moment a member switches themes. Both images are
 * always in the markup; only one is shown, matching how view_header.php
 * swaps the wordmark.
 */
.sso-continue-avatar .mark-dark { display: none; }

.dark-theme .sso-continue-avatar {
	background: var(--text-white-color, #fff);
}

.dark-theme .sso-continue-avatar .mark-light { display: none; }
.dark-theme .sso-continue-avatar .mark-dark { display: inline; }

.sso-continue-text {
	flex-grow: 1;
	min-width: 0;
}

.sso-continue-title {
	display: block;
	font-weight: bold;
	color: var(--primary-text-color);
	font-size: 14px;
	line-height: 1.3;
}

.sso-continue-sub {
	display: block;
	font-size: 12px;
	color: var(--text-muted-color-less);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sso-continue-chevron {
	flex-shrink: 0;
	color: var(--text-muted-color-less);
	font-size: 13px;
	margin-left: 8px;
}

.sso-continue-or {
	margin: 12px 0;
}

/* Workbench: AI visibility scan (/tools/ai-visibility, issue #1198) */
.geo-tool .geo-score {
	line-height: 1;
	white-space: nowrap;
}
.geo-tool .geo-score-number {
	font-size: 3.5rem;
	font-weight: 700;
}
.geo-tool .geo-score-of {
	font-size: 1.25rem;
	margin-left: 2px;
	opacity: .6;
}
.geo-tool .geo-competitor {
	font-size: .9rem;
	font-weight: 500;
	padding: .45em .8em;
}
.geo-tool .geo-questions td {
	vertical-align: middle;
}
.geo-tool .geo-engine-list .badge {
	font-size: .85rem;
	padding: .4em .75em;
}
/*
 * The theme renders .badge-light as white text on no background, which is
 * invisible here. Inherit the text colour and draw an outline instead, so the
 * badge reads in light and dark mode alike.
 */
.geo-tool .badge-light {
	color: inherit;
	background: transparent;
	border: 1px solid rgba(128, 128, 128, .45);
}

/* ==========================================================================
   Phones

   Everything here is under 768px. It is behaviour rather than style - target
   sizes, overflow, iOS zoom - so it lives in the base sheet and applies whether
   or not the admincp layer is on.

   The sizes come from a measurement, not a guess: the phone audit found 155
   controls under WCAG 2.5.8's 24px minimum and 1,158 under 44px across 13
   pages at 390px, and the two big groups were the listing cards' heart / cart
   / Order buttons (32px, from cart.css) and every .btn-sm (36px).
   ========================================================================== */

/* Bootstrap 4.0's .col-auto is max-width: none, so a row of breadcrumbs sized
   itself to its whole unwrapped width and pushed the listing page 49px past the
   edge of a 320px screen. 4.2 changed it to 100%. */
.col-auto {
	max-width: 100%;
}

@media (max-width: 767.98px) {

	/* iOS Safari zooms into any input under 16px when it is focused, which is
	   what maximum-scale=1 was probably there to stop. Now that zoom is allowed
	   again the inputs are 16px on phones, and iOS leaves them alone. */
	.form-control,
	select,
	textarea,
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
		font-size: 16px;
	}

	/* Images a seller or a member pastes into a description, a discussion or a
	   comment carry no class and no max-width, so one wider than the column - a
	   335px image in a 290px one - pushed a discussion 30px off a 320px screen. */
	img:not([class]),
	#question-body img,
	.comment-body img {
		max-width: 100%;
		height: auto;
	}

	/* --- tap targets ---------------------------------------------------- */

	/* Not the listing cards' heart / likes / Order row: cart.css's more specific
	   .cart-actions .btn keeps those compact, on purpose (Jordan, 2026-09-22 -
	   bigger read as bulky), and the list row below sets its own 30px. */
	.btn-sm {
		height: 44px;
		line-height: 42px;
	}

	/* The price filter's Apply button: styles.css:7541 sets 28px on it with a
	   more specific selector than .btn-sm, so it needs its own. */
	.price-range-slider .ui-range-slider-footer .btn {
		height: 44px;
		line-height: 42px;
	}

	.pagination .pages > li,
	.pagination .pages > li > a {
		width: 44px;
		height: 44px;
		line-height: 42px;
	}

	/* The price-range slider's handle was 16px, on the primary mobile filter
	   control. 32px with its 4px border, offset by half. */
	.noUi-horizontal .noUi-handle {
		top: -14px;
		left: -16px;
		width: 32px;
		height: 32px;
	}

	/* Shape-qualified to match the base rule (styles.css:3990), which would
	   otherwise win and keep the share buttons at 36px. */
	.social-button.shape-circle,
	.social-button.shape-rounded,
	.social-button.shape-square {
		width: 44px;
		height: 44px;
		line-height: 42px;
	}

	/* Text links that are the whole point of a row: the seller's name, the breadcrumb
	   trail, "0 comments", a post's date. 19px tall before. Padding on an inline-block
	   grows the hit area without moving the layout much. */
	.breadcrumbs > li > a,
	.drop-link,
	.media a.text-bold,
	.comment-title a,
	.single-post-meta a,
	.link-header {
		display: inline-block;
		padding: 5px 0;
	}

	/* A listing's title is the same fix, but plain inline: in a list-view row
	   (.product-list) the title sits beside a floated thumbnail, and inline-block
	   stops it wrapping around the float - the whole title drops below the image
	   instead. Padding on an inline element still grows the tap height the same
	   way without losing the wrap. */
	.card-title > a {
		display: inline;
		padding: 5px 0;
	}

	/* The footer's link lists: 19px rows. The bullet is positioned from the top of
	   the row, so it moves with the row. */
	.widget-links ul > li > a {
		line-height: 32px;
	}

	.widget-links ul > li::before {
		top: 14px;
	}

	/* Checkbox and radio rows: the label is the tap target, so the label is 44px
	   tall - 11px above and below a 22px line - and the box is centred on it
	   rather than pinned 4px from the top. Not the toggle switch. */
	.custom-control:not(.custom-switch) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.custom-control:not(.custom-switch) .custom-control-label {
		padding-top: 11px;
		padding-bottom: 11px;
		line-height: 22px;
	}

	.custom-control:not(.custom-switch) .custom-control-label::before,
	.custom-control:not(.custom-switch) .custom-control-label::after {
		top: calc(50% - 8px);
	}

	/* The show-password eye on the login and signup forms was 16x21. Padding and an
	   equal negative margin grow the hit area to 40x45 without moving the icon, so
	   its own top / right offsets stay as they were. */
	.toggle-password-eye {
		padding: 12px;
		margin: -12px;
	}

	/* --- marketplace list view (.listing-row, view_index-bit.php) --------
	   A phone row was a float: the picture floated left, the title wrapped
	   round it, and the button row landed wherever the float happened to
	   end - beside the picture on one row, under it on the next. Nothing
	   had padding, so pictures and hearts sat on the card's edge.

	   Every row is now the same two columns: the picture on the left, and
	   everything else to its right - title, rating and price, then heart,
	   likes and Order Now with its cart button (the homepage card's set) on
	   one line underneath. 12px of padding round it all. The buttons are
	   30px: compact, and still clear of WCAG 2.5.8's 24px. */
	.product-list.listing-row .product-info {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 8px;
		align-items: start;
		padding: 12px;
	}

	.product-list.listing-row .product-info > * {
		grid-column: 2;
		margin: 0 !important;
	}

	/* A rule across the top of every card, doing the card border's job. */
	.product-list.listing-row .product-info > hr {
		display: none;
	}

	/* The picture spans both rows, so the buttons stay beside it. */
	.product-list.listing-row .product-info > .alignleft {
		grid-column: 1;
		grid-row: 1 / span 2;
		float: none;
		padding: 0 !important;
	}

	.product-list.listing-row .product-info > .alignleft img {
		width: 72px;
		height: 54px;
		object-fit: cover;
	}

	.product-list.listing-row .product-info > .card-title {
		font-size: 15px;
		line-height: 1.35;
	}

	/* On a desktop row the price floats right of the title; here it follows
	   the rating, since the Order button no longer carries it. */
	.product-list.listing-row .card-title .listing-price {
		float: none;
		display: inline;
		margin: 0 0 0 6px !important;
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
	}

	.product-list.listing-row .card-title .listing-price del {
		padding-right: 2px !important;
		font-weight: 400;
	}

	/* One line on every phone from 360px up. The wrap is only a floor for a
	   320px screen, so nothing runs off the card. The padding it drops is the
	   product-buttons' own 10px top, which left a gap under the title. */
	.product-list.listing-row .product-info .cart-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		padding: 0;
	}

	.product-list.listing-row .cart-actions > * {
		margin: 0 !important;
	}

	/* cart.css pads these 0.6rem with !important, so this has to as well. */
	.product-list.listing-row .cart-actions .btn {
		flex: 0 0 auto;
		height: 30px;
		padding: 0 8px !important;
		line-height: 28px !important;
		white-space: nowrap;
	}

	/* The vetted badge sits on the picture's corner rather than in the button
	   row, where it cost a vetted seller's row its single line at 360px. The
	   row is static so the badge positions against .product-info. */
	.product-list.listing-row .product-info {
		position: relative;
	}

	.product-list.listing-row .product-info .cart-actions {
		position: static;
	}

	.product-list.listing-row .cart-actions .vetted-icon {
		position: absolute;
		top: 6px;
		left: 6px;
		z-index: 1;
		justify-content: center;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--secondary-background-color);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
		font-size: 16px;
	}

	/* The cart button beside it already says "cart". */
	.product-list.listing-row .cart-actions a[href*="/order/"] > .fa-shopping-cart {
		display: none;
	}
}

/* Narrower phones give the buttons the width the picture can spare. */
@media (max-width: 389.98px) {
	.product-list.listing-row .product-info {
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 10px;
	}

	.product-list.listing-row .product-info > .alignleft img {
		width: 64px;
		height: 48px;
	}
}

@media (max-width: 359.98px) {
	.product-list.listing-row .product-info {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.product-list.listing-row .product-info > .alignleft img {
		width: 56px;
		height: 42px;
	}
}

/*
 * The fix cards fill their column so a row lines up. Not .h-100: this
 * stylesheet defines that as height: 100px, which squeezed the cards and left
 * their text and buttons hanging below them.
 */
.geo-tool .geo-fix-card {
	height: 100%;
}
/* The body fills the card, so every card's button sits on the same line. */
.geo-tool .geo-fix-card > .card-body {
	flex: 1 1 auto;
}

/*
 * "Why you're missing" (2026-09-22): quotes from the answers, the warnings in
 * them, and the per-question source lists. Theme variables, so both themes
 * read. Not the theme's blockquote, whose oversized quote mark is for
 * testimonials.
 */
.geo-tool .geo-why-pages {
	padding-left: 1.1rem;
	word-break: break-word;
}
.geo-tool .geo-why-findings h3 {
	margin-top: .25rem;
}
.geo-tool .geo-quote {
	border-left: 3px solid var(--primary-border-color);
	padding-left: .85rem;
}
.geo-tool .geo-caution {
	border-left: 3px solid var(--warning-color);
	margin-left: calc(-.85rem - 3px);
	padding-left: .85rem;
}
.geo-tool .geo-caution .fas {
	color: var(--warning-color);
}
.geo-tool .geo-source-question {
	border-bottom: 1px solid var(--primary-border-color);
	padding: .5rem 0;
}
.geo-tool .geo-source-question summary {
	cursor: pointer;
}
.geo-tool .geo-source-body {
	padding: .5rem 0 .25rem 1rem;
}

/* The Workbench palette, from docs/brand-style-guide.md. Named here so every
   tool draws from the same set and nothing invents a colour: Sky is the brand,
   Amber is an accent and never a surface, and the only gradient is the Sky
   ramp, which is why there are none below. */
.geo-tool {
	--wb-sky: #0DA9EF;
	--wb-deep-sky: #0A7FC2;
	--wb-navy: #0B2B45;
	--wb-ink: #414141;
	--wb-slate: #6B7A8C;
	--wb-mist: #EAF7FE;
	--wb-cloud: #F5F8FA;
	--wb-amber: #FFB140;
}

/* The Workbench shell (2026-09-22): the left-hand menu every /tools page sits
   in. Scoped to .wb-shell so it cannot reach the site's own layout. */
.wb-shell .wb-side {
	padding-top: .25rem;
}
.wb-shell .wb-side-inner {
	position: sticky;
	top: 1rem;
}
.wb-shell .wb-side-title {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin-bottom: .75rem;
}
.wb-shell .wb-nav {
	margin: 0 0 1.5rem 0;
}
.wb-shell .wb-nav-link {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .5rem .75rem;
	margin-bottom: .125rem;
	border-radius: .375rem;
	color: var(--primary-text-color);
	font-size: .9375rem;
	text-decoration: none;
}
.wb-shell .wb-nav-link i {
	width: 1rem;
	text-align: center;
}

/* A colour per item so the menu reads at a glance, all of it from the brand
   palette. A tool that adds an item gives it one of these classes. */
.wb-shell .wb-nav-link .fa-chart-line		{ color: var(--wb-sky); }
.wb-shell .wb-nav-link .fa-search			{ color: var(--wb-deep-sky); }
.wb-shell .wb-nav-link .fa-lightbulb		{ color: var(--wb-amber); }
.wb-shell .wb-nav-link .fa-tags				{ color: var(--wb-navy); }
.wb-shell .wb-nav-link .fa-credit-card		{ color: var(--wb-slate); }
.wb-shell .wb-nav-link:hover {
	background: var(--wb-cloud);
	text-decoration: none;
}
.wb-shell .wb-nav-link.active {
	background: var(--wb-mist);
	color: var(--wb-navy);
	font-weight: 700;
	box-shadow: inset 2px 0 0 var(--wb-sky);
}
.wb-shell .wb-page {
	max-width: 1100px;
}

/* On a phone the menu is a scrolling row of pills above the page instead. */
@media (max-width: 767.98px) {
	.wb-shell .wb-side-inner {
		position: static;
	}
	.wb-shell .wb-nav {
		display: flex;
		overflow-x: auto;
		gap: .375rem;
		margin-bottom: 1rem;
	}
	.wb-shell .wb-nav-link {
		white-space: nowrap;
		border: 1px solid var(--primary-border-color);
		margin-bottom: 0;
	}
	.wb-shell .wb-side-title {
		display: none;
	}
}


/* Dashboard tiles, the multi-brand chart and the share ring (2026-09-22). */
.geo-tool .wb-tile-label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wb-slate);
}
.geo-tool .wb-tile-value {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wb-navy);
}
.geo-tool .wb-tile-suffix {
	font-size: .875rem;
	color: var(--wb-slate);
}
.geo-tool .wb-tile-delta {
	font-size: .8125rem;
	margin-left: .375rem;
}
.geo-tool .wb-tile-spark {
	display: block;
	width: 100%;
	height: auto;
	max-height: 44px;
	margin-top: .5rem;
}
.geo-tool .wb-chart {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
}

/* Five series colours, in the order a chart hands them out. */
.geo-tool .wb-line-0, .geo-tool .wb-key-0 { stroke: var(--wb-sky); }
.geo-tool .wb-line-1, .geo-tool .wb-key-1 { stroke: var(--wb-navy); }
.geo-tool .wb-line-2, .geo-tool .wb-key-2 { stroke: var(--wb-deep-sky); }
.geo-tool .wb-line-3, .geo-tool .wb-key-3 { stroke: var(--wb-slate); }
.geo-tool .wb-line-4, .geo-tool .wb-key-4 { stroke: var(--wb-amber); }
.geo-tool circle.wb-dot-0 { fill: var(--wb-sky); }
.geo-tool circle.wb-dot-1 { fill: var(--wb-navy); }
.geo-tool circle.wb-dot-2 { fill: var(--wb-deep-sky); }
.geo-tool circle.wb-dot-3 { fill: var(--wb-slate); }
.geo-tool circle.wb-dot-4 { fill: var(--wb-amber); }

.geo-tool span.wb-key {
	display: inline-block;
	margin-right: .75rem;
	padding-left: .875rem;
	position: relative;
	color: var(--wb-slate);
}
.geo-tool span.wb-key::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .625rem;
	height: .1875rem;
	border-radius: .125rem;
}
.geo-tool span.wb-key-0::before { background: var(--wb-sky); }
.geo-tool span.wb-key-1::before { background: var(--wb-navy); }
.geo-tool span.wb-key-2::before { background: var(--wb-deep-sky); }
.geo-tool span.wb-key-3::before { background: var(--wb-slate); }
.geo-tool span.wb-key-4::before { background: var(--wb-amber); }

.geo-tool .wb-ring {
	width: 160px;
	height: 160px;
	margin-right: 1rem;
	transform: rotate(-90deg);
}
.geo-tool .wb-ring-slice {
	fill: none;
	stroke-width: 18;
}
.geo-tool .wb-ring-mine		{ stroke: var(--wb-sky); }
.geo-tool .wb-ring-others	{ stroke: var(--wb-cloud); }
.geo-tool .wb-ring-key li {
	margin-bottom: .25rem;
}
.geo-tool .wb-swatch {
	display: inline-block;
	width: .625rem;
	height: .625rem;
	border-radius: 50%;
	margin-right: .375rem;
	background: currentColor;
}
.geo-tool .wb-swatch.wb-ring-mine	{ background: var(--wb-sky); }
.geo-tool .wb-swatch.wb-ring-others	{ background: var(--wb-cloud); }
.geo-tool .wb-swatch.wb-key-0 { background: var(--wb-sky); }
.geo-tool .wb-swatch.wb-key-1 { background: var(--wb-navy); }
.geo-tool .wb-swatch.wb-key-2 { background: var(--wb-deep-sky); }
.geo-tool .wb-swatch.wb-key-3 { background: var(--wb-slate); }
.geo-tool .wb-swatch.wb-key-4 { background: var(--wb-amber); }

/* The plan tiers. */
.geo-tool .geo-tier-price {
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wb-navy);
}
.geo-tool .geo-tier-per {
	font-size: .875rem;
	font-weight: 400;
	color: var(--wb-slate);
}
.geo-tool .geo-tier-current {
	border-color: var(--wb-sky);
	box-shadow: inset 0 2px 0 var(--wb-sky);
}
.geo-tool .geo-tier-under {
	opacity: .6;
}
.geo-tool .geo-tier-free {
	color: var(--wb-sky);
}
.geo-tool .geo-tier-was {
	font-size: 1rem;
	font-weight: 400;
	color: var(--wb-slate);
	text-decoration: line-through;
	margin-left: .375rem;
}

/* Dashboard (2026-09-22): the per-brand sparkline and the locked panels.
   Not .h-100 for the equal-height cards: the public stylesheet redefines that
   as height: 100px !important, which crushes the card and spills the chart. */
.geo-tool .geo-card-full {
	height: 100%;
}
.geo-tool .geo-card-score {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}
.geo-tool .geo-card-of {
	font-size: .875rem;
	color: var(--secondary-color);
}
.geo-tool .geo-spark {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60px;
}
.geo-tool .geo-locked {
	border-style: dashed;
}
.geo-tool .geo-locked ul li {
	color: var(--secondary-color);
}

/* Weekly tracking (2026-09-22): the trend chart and the week-over-week marks. */
.geo-tool .geo-trend-chart {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
}
.geo-tool .geo-trend-grid {
	stroke: var(--primary-border-color);
	stroke-width: 1;
}
.geo-tool .geo-trend-line {
	fill: none;
	stroke: var(--primary-color);
	stroke-width: 2.5;
	stroke-linejoin: round;
}
.geo-tool .geo-trend-dot {
	fill: var(--primary-color);
}
.geo-tool .geo-trend-value,
.geo-tool .geo-trend-date {
	fill: var(--secondary-color);
	font-size: 11px;
	text-anchor: middle;
}
.geo-tool .geo-delta-up {
	color: var(--success-text-color);
}
.geo-tool .geo-delta-down {
	color: var(--danger-color, #dc3545);
}

/* ==========================================================================
   Theme toggle (views/components/view_theme-toggle.php)

   One tap flips light and dark. Both states' icon and label are in the
   markup and this shows the one that matches the page, so the button always
   offers the theme you are not in: a moon in light mode, a sun in dark.
   ========================================================================== */
.theme-toggle {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.theme-toggle .theme-toggle-when-dark,
.dark-theme .theme-toggle .theme-toggle-when-light {
	display: none;
}

.dark-theme .theme-toggle .theme-toggle-when-dark {
	display: inline;
}

.theme-toggle:focus {
	outline: none;
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* The round header button a visitor gets. It fills the .account circle the
   moon used to sit in, the way that circle's link did. */
.toolbar .theme-toggle-circle > .theme-toggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	font-size: 17px;
	line-height: 42px;
}

/* A row in the account menu: the same box as the links above and below it. */
.toolbar-dropdown .theme-toggle-menu {
	display: block;
	width: 100%;
	padding: 5px 20px;
	transition: color 0.3s;
	color: var(--secondary-color);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}

.toolbar-dropdown .theme-toggle-menu:hover {
	color: var(--link-color);
}

.toolbar-dropdown .theme-toggle-menu i {
	margin-right: 6px;
	font-size: 0.9em;
}

/* A row in the phone menu: the same box as its links. */
.offcanvas-menu .theme-toggle-menu {
	display: block;
	width: 100%;
	padding: 15px 20px;
	transition: color 0.3s;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--menu-link-color);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}

.offcanvas-menu .theme-toggle-menu:hover {
	color: var(--primary-color);
}

.offcanvas-menu .theme-toggle-menu i {
	margin-right: 8px;
}