/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

	CUSTOM BRAND STYLES - .XYZ
	
	Docs: https://cyber2.atlassian.net/wiki/display/WHMCS/CSS
	
	* These styles modify and build upon base.css
	* This CSS file should mostly be color, size, font, and background-image path changes
	* Copy and paste styles you want to override from base.css into this CSS file in roughly the same order/position as base.css
	* Changes to base.css will be used for ALL TLD domain reseller sites
	
	Contents:
	
	1. General Styles
	2. Features
	3. Reusable/modifying styles
	4. Media queries
	
	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*/////////////////////////////

Fonts - Bariol Bold & Regular

/////////////////////////////*/

@font-face {
  font-family: Bariol;
  src: url('/template/fonts/bariol_regular.eot');
  src: url('/template/fonts/bariol_regular.eot?#iefix') format('embedded-opentype'),
		url('/template/fonts/bariol_regular.woff2') format('woff2'),
		url('/template/fonts/bariol_regular.woff') format('woff'),
		url('/template/fonts/bariol_regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Bariol;
  src: url('/template/fonts/bariol_bold.eot');
  src: url('/template/fonts/bariol_bold.eot?#iefix') format('embedded-opentype'),
		url('/template/fonts/bariol_bold.woff2') format('woff2'),
		url('/template/fonts/bariol_bold.woff') format('woff'),
		url('/template/fonts/bariol_bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

	
/*/////////////////////////////

	Body, General Styles

/////////////////////////////*/

body {
  font-family: Muli, Helvetica, Arial, sans-serif;
  background-color: #4a1955;
  /* See below .main-content comment */
}

/*/////////////////////////////

	Typography

/////////////////////////////*/

.main-content {
	/*
		#fff background color required because
		body background is set to the same color as the footer.
		Otherwise, if the page content is too short, there
		would be awkward #fff space beneath the footer.
	*/
	background-color: #fff;
}

/*/////////////////////////////

Headings

	* Use classes rather than heading elements (h1, h2 etc) to dictate style.
	* Use these same prefixes for other classes that have a hierarchy
	
	.main-
	.sub-
	.minor-
	.featured-
	.emphasis-
	.subtle-

/////////////////////////////*/


/* .rs__ prefix stands for reseller */
.rs__main-heading,
.rs__sub-heading,
.rs__minor-heading,
.rs__featured-heading,
.rs__subtle-heading {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.rs__main-heading {
	color: #4a1955;
	text-align: left;
}

.rs__sub-heading {
	font-weight: bold;
	color: #5a5a5a;
}

.rs__minor-heading {
	font-weight: bold;
	color: #4a1955;
}

.rs__featured-heading {
  color: #4a1955;
}

.rs__featured-heading .addon__icon {
	fill: #4a1955;
}

.rs__subtle-heading {
	font-weight: bold;
	color: #4a1955;
}
	
/*/////////////////////////////

Links

* Alternative to text-decoration:underline = Better underlines based on Medium.com
https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9

/////////////////////////////*/

.main-content a:not(.rs__button):hover,
.main-content a:not(.rs__button):focus {
	color: #4a1955;
}

/*/////////////////////////////
	
Layout

/////////////////////////////*/


/*------------------
	
	~"rs__container, rs__block, and you!"~
	
	Example:
	
	<div class="rs__container">
	
		<div class="rs__block"></div>
		<div class="rs__block"></div>
		
	</div>
	
------------------*/

.rs__container {
	background: none;
}

/*/////////////////////////////

Header

/////////////////////////////*/

.site-header {
  background-color: #4A1955;
  font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.header-logo .site-logo {
  margin-top: 10px;
  margin-bottom: 10px;
}

/*/////////////////////////////

Navigation

/////////////////////////////*/

/* Nav dropdowns */

.header-nav a:hover,
.header-nav a:focus,
.dropdown-parent:hover,
.dropdown-parent:focus,
.dropdown-parent.t__alt-brand-color {
	color: #a8d93f;
}

.dropdown-parent:after {
  background-image: url('/template/img/xyz/nav-dropdown.png');
	background-image: -webkit-linear-gradient( transparent,  transparent), url('/template/img/xyz/nav-dropdown.svg');
	background-image:  linear-gradient( transparent,  transparent), url('/template/img/xyz/nav-dropdown.svg');
}

.top-level-nav .dropdown-parent {
  font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.sub-level-nav > .nav-item {
  border-bottom-color: #4a1955;
}

/* Sub Nav Bar */
.nav__bar-item a {
  color: #5a5a5a;
  font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

	.nav__bar-item a:hover,
	.nav__bar-item a:focus {
		color: #2e103b;
	}

.nav__bar-is-active a {
  color: #4a1955;
}

/*/////////////////////////////

Footer, Footer nav

/////////////////////////////*/

.site-footer {
	background-color: #4a1955;
}

.site-footer,
.site-copyright {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

/* (Register | My Account) */
.action-nav-item {
  border-color: #a8d93f;
}

.action-nav-link {
  color: #a8d93f;
}

/*/////////////////////////////

Lists

/////////////////////////////*/


/* Checkmark list */
.list__check, .list__check_lime {
  font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.list__check li {
	background-image: url('/template/img/xyz/checkmark.png');
	background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/template/img/xyz/checkmark.svg');
	background-image: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/template/img/xyz/checkmark.svg');
}

.list__check_lime li {
	background-image: url('/template/img/xyz/checkmark-lime.png');
	background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/template/img/xyz/checkmark-lime.svg');
	background-image: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/template/img/xyz/checkmark-lime.svg');
}

/*/////////////////////////////

Forms

	* .rs__form is the default form container
	* .rs__button is the default button style
	* You can create a completely new style or add 'rs__alt-style' to modify the default
		Ex: .rs__input.rs__alt-style

/////////////////////////////*/

/* Standard Form style (.rs__form) */
.rs__input,
.rs__textarea,
.rs__select,
.rs__select-wrapper select,
.rs__file,
.rs__input-reset {
	font-family: Muli, Helvetica, Arial, sans-serif;
}

@-moz-document url-prefix() {

	/* Fixes Firefox PC (not Mac) bug related to the Muli font. */
	.grid__ltr {
    font-size: 13px;
	}

}

.rs__input-reset {
	margin-bottom: 25px;
}

.rs__label .asterisk {
	color: #2597d5;
}

/* Checkbox */

.rs__checkbox-label {
  font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

/* Disabled fields */
.rs__disabled .rs__label,
.rs__disabled [disabled],
.rs__disabled .rs__tooltip-anchor,
.rs__disabled .rs__input,
.rs__disabled .rs__select {
	color: #d5d8d9;
}

.webkit-appearance .rs__disabled .rs__select,
.webkit-appearance .rs__disabled .rs__select-wrapper select {
  background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/template/img/xyz/ui-sprite-disabled.svg');
  background-image: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/template/img/xyz/ui-sprite-disabled.svg');
}

/*------------------

Buttons

* .rs__button
* Requires rs__button class plus optional modifiers
* Ex: <a href="/" class="rs__button button__size-tiny button__bg-gray">...</a>

------------------*/

.rs__button {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
	background-color: #a8d93f;
}

	.rs__button:hover,
	.rs__button:focus {
		background-color: #9AC838;
	}

.button__reset {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

/*------------------
	Button Modifiers
------------------*/
.button__bg-gray {
  background-color: #d5d8d9;
}

	.button__bg-gray:hover,
	.button__bg-gray:focus {
	  background-color: #C9CBCB;
	}
	
.button__bg-alt-gray {
  background-color: #ECF0F1;
}

	.button__bg-alt-gray:hover,
	.button__bg-alt-gray:focus {
	  background-color: #d5d8d9;
	  color: #5a5a5a;
	}
	
/* States */
.button__is-active {
	background-color: #a8d93f;
}

.button__is-active:hover {
	background-color: #9AC838;
}

.button__add:hover,
.button__add:focus {
	background-color: #A8D93F;
}

.button__add:focus {
	box-shadow: 0 0 6px #A8D93F;
}

.button__cancel:hover,
.button__cancel:focus {
	background-color: #ea1135;
}

.button__cancel:focus {
	background-color: #ea1135;
	box-shadow: 0 0 6px #ea1135;
}

.button_cc_hide {
	display: none;
}

/* Button row */

.button__row button:hover {
	color: #4a1955;
}
		
/*/////////////////////////////

	Form Element Variations

/////////////////////////////*/

/* Form alert */
.form__error {
	border-left-color: #ea1135;
}

/* Password Strength */
.rs__password-strength .strong,
.rs__password-strength .moderate,
.rs__password-strength .weak {
  font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
	background: #a8d93f;
}

/*/////////////////////////////

	Tables

/////////////////////////////*/

/* Form elements inside of tables, use: .table__form-wrangling */
.table__form-wrangling .rs__input,
.table__form-wrangling .rs__select {
  margin-bottom: 0;
}

/*------------------
	Basic responsive table
	See for similar example/demo: https://css-tricks.com/responsive-data-tables/
------------------*/

/* Basic Table header */
.table__basic th {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
	color: #4a1955;
}

/* Cart table */
.table__cart-remove-icon {
	background-image: url('/template/img/xyz/remove-icon.png');
	background-image: -webkit-linear-gradient( transparent,  transparent), url('/template/img/xyz/remove-icon.svg');
	background-image:  linear-gradient( transparent,  transparent), url('/template/img/xyz/remove-icon.svg');
	background-position: 0px;
}

.table__cart-remove-tooltip:after {
	border-color: rgba(236, 240, 241, 0);
	border-top-color: #ecf0f1;
}

/*------------------
	Minimal, responsive table
------------------*/

.table__minimal th {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

/*/////////////////////////////
	
		Alerts, errors
	
/////////////////////////////*/

.alert {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.alert__success {
	background-color: #a8d93f;
}
	
.alert__error {
	background-color: #ea1135;
}

.smd__success {
	color: #a8d93f !important;
}

	.no-box-shadow .alert__success-field {
		border-color: #a8d93f;
	}

.alert__error-field {
	box-shadow: inset 0 0 7px rgba(166, 0, 60, 0.5);
	border-color: rgba(166, 0, 60, 0.25);
}

	.no-box-shadow .alert__error-field {
		border-color: #ea1135;
	}
	
.alert__error-checkbox + label,
.alert__error-inline {
  color: #ea1135;
}

/* Tooltips */
.rs__tooltip-anchor {
	color: #4a1955;
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.rs__tooltip-content {
	background-color: #4a1955;
}

.rs__tooltip-content:after { 
	border-top-color: #4a1955;
}

.prem-flag {
    font-size: 10px;
    padding: 2px 4px;
    border: 1px solid #4a1955;
    color: #4a1955;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none !important;
}

/*/////////////////////////////

Cards - design pattern (Used in Cart for Add-Ons like Weebly, SSL)

Structure:

.card__item
    .card__header
        .card__title
    .card__body
        .card__sub-title (ex: Price, for Weebly)

/////////////////////////////*/

.is-selected .card__header {
	background-color: #4a1955;
}

.card__title {
	color: #4a1955;
	font-weight: normal;
}

.card__sub-title {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
	color: #4A1955;
}

.card__promoted-flag {
	background-color: #A8D93F;
	font-size: 12px;
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.card__promoted-flag:before {
	border-width: 10px 17px 0 0;
	border-color: #A8D93F transparent transparent transparent;
	left: 0;
}

.card__promoted-flag:after {
	border-width: 0 17px 10px 0;
	border-color: transparent #A8D93F transparent transparent;
	right: 0;
}

.card__container .list__check li {
	background-image: url('/template/img/xyz/checkmark-lime.png');
	background-image: -webkit-linear-gradient( transparent,  transparent), url('/template/img/xyz/checkmark-lime.svg');
	background-image:  linear-gradient( transparent,  transparent), url('/template/img/xyz/checkmark-lime.svg');
	background-size: 13px auto;
}

/*/////////////////////////////

	Social Icons

/////////////////////////////*/

.social-icons li {
	background-image: url('/template/img/xyz/social-sprite.png');
	background-image: -webkit-linear-gradient( transparent,  transparent), url('/template/img/xyz/social-sprite.svg');
	background-image:  linear-gradient( transparent,  transparent), url('/template/img/xyz/social-sprite.svg');
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

	Features / pages

	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*/////////////////////////////

	Add Ons
	
	Step 2 of cart

/////////////////////////////*/

.addon__icon-sprite symbol {
	fill: #4a1555;
}

/* Add-on details accordion */
.addon__details-trigger {
  font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
	color: #4a1555;
  
  background-image: url('/template/img/xyz/dark-dropdown-arrow.png');
	background-image: -webkit-linear-gradient( transparent,  transparent), url('/template/img/xyz/dark-dropdown-arrow.svg');
	background-image:  linear-gradient( transparent,  transparent), url('/template/img/xyz/dark-dropdown-arrow.svg');
  background-position: 190% 8px;
}

	/* Better background positioning for browsers that
		support the 4 value syntax */
	.bgpositionshorthand .addon__details-trigger {
	  background-position: right -88% bottom -2px;
	}
			
/*/////////////////////////////

	Nav Buttons

/////////////////////////////*/

.button__cart,
.button__account,
.button__register {
	background-color: #2e103b;
}
	
	.button__cart:hover,
	.button__cart:focus,
	.button__account:hover,
	.button__account:focus {
		background-color: #22052F;
	}
	
	.button__register {
		background-color: #a8d93f;
	}
	
	.button__register:hover,
	.button__register:focus {
		background-color: #9AC838;
	}


/*/////////////////////////////

	Checkout nav
	
	Steps 1, 2, 3

/////////////////////////////*/

.checkout__steps-item {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}
	
	/* Active/Hover */
	.checkout__steps-is-active,
	a.checkout__steps-link:hover,
	a.checkout__steps-link:focus {
		color: #4a1955;
	}
	
	.checkout__steps-is-active .checkout__step-number,
	.checkout__steps-link:hover .checkout__step-number,
	.checkout__steps-link:focus .checkout__step-number {
		background-color: #a8d93f;
	}

/* Active hover */
.checkout__steps-is-active:hover,
.checkout__steps-is-active:focus {
	color: #2e103b;
}

.checkout__steps-is-active:hover .checkout__step-number,
.checkout__steps-is-active:focus .checkout__step-number {
	background-color: #9AC838;
}
	
/*/////////////////////////////

	Transfers, FAQ, misc

/////////////////////////////*/

.transfer__prefix-input,
.transfer__input,
.transfer__tld-select,
.transfer__bulk-result-list,
.faq__article-list li {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

.faq__article-link {
	color: #4a1955;
}

/*/////////////////////////////

	Affiliate Dashboard

/////////////////////////////*/

.aff__stat-count {
	background-color: #A8D93F;
	border-color: #A8D93F;
}

/*/////////////////////////////

	Reusable / Modifiers
	
	* Modular, scalable style selectors should be prefixed.
	* These serve as variations that are reusable and not limited to certain elements or locations

/////////////////////////////*/
	
/*------------------
	Type
	.t__ = type prefix
------------------*/

/* Color */
.t__brand-color, .t__color-alt	{ color: #4a1955; } /* Purple */
.t__alt-brand-color	{ color: #a8d93f; } /* Lime */

/* Font family & weight */
.t__bariol,
.t__brand-bold,
.t__brand {
	font-family: Bariol, Muli, Helvetica, Arial, sans-serif;
}

/* Statuses (ex: invoices paid/unpaid) */
.status__good	{ color: #9AC838; }
.status__bad	{ color: #ea1135; }


/*/////////////////////////////

	Dashboard, My Account

/////////////////////////////*/

.dashboard__tile {
	background-color: #a8d93f;
}

.dashboard__tile:hover {
	background-color: #9AC838;
}

.dashboard__title {
	color: #2e0e3b;
	font-family: Bariol, Bariol Bold, Muli, sans-serif;
}

.badge,
.badge .tooltip {
	background-color: #4a1955;
}

.badge__alert,
.badge__alert .tooltip {
    background-color: #ea1135;
}

.badge .tooltip:after {
	border-top-color: #4a1955;
}

.badge__alert .tooltip:after {
    border-top-color: #ea1135;
}

/*/////////////////////////////

	Support Forms - Freeze Department

/////////////////////////////*/

select.frozen {
	background-image: none !important;
}

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

	.dashboard__tile {
        border-color: #a8d93f;
    }

	.dashboard__tile,
	.dashboard__tile:hover {
		background: none;
	}

	.dashboard__tile:hover .dashboard__art {
        fill: #4a1955;
        color: #4a1955;
    }

	.dashboard__title {
		background-color: #a8d93f;
	}

}

/*/////////////////////////////

	Media Queries

/////////////////////////////*/

@media screen and (min-width: 866px) {
	
	.sub-level-nav {
	  background-color: #2E103B;
	}
	
}

/* Nav breaks to mobile nav */
@media screen and (max-width: 865px) {
	
	.mobile-nav-button:hover,
	.mobile-nav-button:focus {
	  -webkit-filter: drop-shadow(0 0 5px #2e103b) drop-shadow(0 0 5px #2e103b);
	}
	
	.header-nav {
		background-color: #2E103B;
	}

	.header-nav .main-nav-link {
	  border-top-color: #4a1955;
	}
	
	.button__cart:hover,
	.button__cart:focus,
	.button__account:hover,
	.button__account:focus {
	  color: #A8D93F !important;
	  background: none;
	}

}

@media only screen and (min-width: 800px) {
	
	.ie8 .action-nav-item {
		border-right: solid 1px #a8d93f;
	}
	
}

@media only screen and (max-width: 799px) {
	
	.nav__bar-is-active {
	  background-color: #F3F6F7;
	}
	
}

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

	/* Sub Nav bar */
	.nav__bar-item {
		border-color: #D5D8D9;
	}
	
}

@media only screen and (max-width: 599px) {
	
	.rs__tooltip-content {
	  background-color: #D5D8D9;
	}
	
	.rs__tooltip-content:after {
		border-top-color: #D5D8D9;
	}

}

@media only screen and (max-width: 375px) {
  
  /* Sub Nav bar */
  
  .nav__bar-item {
		border-color: #D5D8D9;
	}
		.nav__bar-item:nth-child(1),
		.nav__bar-item:nth-child(3) {
		  border-right: 1px solid #D5D8D9;
		}

}