@font-face {
    font-family: myAvenir;
    /* src: url('avenir/AvenirLTStd-Black.otf'), url('avenir/AvenirLTStd-Book.otf'), url('avenir/AvenirLTStd-Roman.otf'); */
	src: url('avenir/AvenirNextLTPro-Regular.ttf') format('truetype');
		/* url('avenir/AvenirNextLTPro-It.ttf') format('truetype'); */
}
@font-face {
    font-family: myAvenirBold;
    /* src: url('avenir/AvenirLTStd-Black.otf'), url('avenir/AvenirLTStd-Book.otf'), url('avenir/AvenirLTStd-Roman.otf'); */
	src: url('avenir/AvenirNextLTPro-Bold.ttf') format('truetype');
}
:root {
	--color-white: #FFFFFF;
	--color-light: #BC80B8;
	--color-purple: #4D3687;
	--color-blue: #7B5EC6;
	--color-pink: #E4A4C4;
	--color-red: #D4649C;
	--color-reddark: #FF6464;
	--color-black: #343131;
	--color-darkgray: #9A9797;
	--color-lightgray: #F0EFF2;
	--color-offwhite: #FCFBFE;
	--color-lightwhite: #F4F4FA;
	--color-inactive: #C9C2DB;
	--color-plan-bg: rgba(123, 94, 198, 0.1);
	--color-plan-border: rgba(123, 94, 198, 0.4);
}
* {
	color: var(--color-black);
	font-family: myAvenir, Arial;
	font-weight: 300;
	font-size: 14px;
	font-style: normal;
	padding: 0;
	margin: 0;
	outline: none;
}

BODY {
	background: var(--color-offwhite);
}
BODY.thankyou {
	background: var(--color-purple);
}
SMALL {
	font-size: 11px;
}

B {
	font-weight: 800;
	font-family: myAvenirBold;
}

A, A:active, A:focus {
	color: var(--color-blue);
	font-weight: 400;
}

.clr-red {
	color: var(--color-reddark);
}
.clr-inactive {
	color: var(--color-inactive);
}

.center {
	text-align: center;
}

.sep {
	background: var(--color-lightgray);
	height: 1px;
	width: 85%;
	margin: 24px auto;
}
.sep.full {
	width: 100%;
}

.title {
	font-size: 34px;
	font-weight: 600;
	margin: 20px 0;
}
.subtitle {
	font-size: 14px;
	font-weight: 300;
	margin-bottom: 16px;
}
P {
	font-size: 14px;
	font-weight: 200;
	margin-bottom: 32px;
}

.thankyou {
	text-align: center;
}
.thankyou P {
	font-size: 13px;
	font-weight: 300;
	line-height: 18px;
	letter-spacing: 0px;
	color: var(--color-white);
	max-width: 295px;
	margin-left: auto;
	margin-right: auto;
}
.thankyou .subtitle {
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	color: var(--color-white);
	max-width: 295px;
	margin-left: auto;
	margin-right: auto;
}
.thankyou .title {
	font-size: 32px;
	font-weight: 800;
	font-family: myAvenirBold;
	line-height: 40px;
	letter-spacing: 0px;
	color: var(--color-white);
	max-width: 295px;
	margin-left: auto;
	margin-right: auto;
}
.thankyou A, .thankyou .bottom {
	color: var(--color-white);
	font-size: 11px;
	text-decoration: none;
}
.thankyou .logo {
	height: 146px;
	margin-top: 32px;
}
.thankyou .bottom {
	position: absolute;
	bottom: 20px;
	left: calc(50% - 125px);
	width: 250px;
}

.myaccount .container .purple {
	width: 100%;
	max-width: 350px;
}
.myaccount .title, .paymethods .title {
    font-size: 18px;
	font-weight: 800;
	font-family: myAvenirBold;
    text-align: center;
}
.myaccount .member-name {
	font-Weight: 300;
	font-size: 14px;
	color: var(--color-black);
	/* text-transform: uppercase; */
	position: relative;
	margin-bottom: 26px;
	line-height: 24px;
}
.myaccount .member-name IMG {
	margin-top: 4px;
}
.myaccount .member-name .details-link {
	position: absolute;
	right: 0;
	top: 0;
	/*width: 18px;
	height: 18px;*/
	text-transform: none;
}


.close-btn {
	position: absolute;
	right: 20px;
	top: 22px;
	width: 16px;
}
.back-btn {
	position: absolute;
	left: 20px;
	top: 24px;
	width: 22px;
}


BUTTON {
	font-size: 22px;
	font-weight: 350;
	width: 90%;
	max-width: 305px;
	margin: 10px auto;
	background: var(--color-white);
	color: var(--color-black);
	padding: 10px 20px;
	border: 0;
	border-radius: 100px;
	--o-border-radius: 100px;
	--ms-border-radius: 100px;
	--moz-border-radius: 100px;
	--webkit-border-radius: 100px;
}
BUTTON.white {
	background: var(--color-white);
	border: solid 2px var(--color-purple);
	color: var(--color-purple);
}
BUTTON.white:disabled {
	background: var(--color-lightgray);
	border: solid 2px var(--color-darkgray);
	color: var(--color-black);
}
BUTTON.purple {
	background: var(--color-purple);
	color: var(--color-white);
}
BUTTON.purple:disabled {
	opacity: 0.5;
}
BUTTON.small {
	box-sizing: border-box;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px 10px;
	gap: 10px;
	width: 94px;
	height: 30px;
	background: var(--color-offwhite);
	border: 1px solid var(--color-light);
	color: var(--color-purple);
	border-radius: 100px;
	-o-border-radius: 100px;
	-ms-border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
}

.container {
	margin: 25px auto 10px auto;
	width: 86%;
	max-width: 500px;
}

TH {
	text-align: left;
	color: var(--color-purple);
}

.table {
	width: 100%;
}
.table .row {
	display: flex;
	position: relative;
	gap: 2px;
	width: 100%;
	font-size: 13px;
	background: var(--color-lightwhite);
	padding: 8px;
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: 4px;
}
.table .row.line::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 25%; /* 4px */
	background: url('chevron-right.svg');
	background-size: cover;
	width: 28px;
	height: 28px;
}
.table .row .column {
	flex-grow: 3;
}
.table .row .column-1 {
	width: 100%;
}
.table .row .column-10 {
	width: 10%;
}
.table .row .column-4 {
	width: 25%;
}
.table .row .column-3 {
	width: 33%;
}
.table .row .column-2 {
	width: 50%;
	padding-right: 5px;
	padding-left: 5px;
}
.table .row.captions {
	background: transparent;
	margin-bottom: -3px;
}
.table .row.captions .column {
	color: var(--color-darkgray);
}


.box {
	padding: 20px;
	text-align: center;
	border: solid 1px var(--color-red);
	border-radius: 15px;
	-o-border-radius: 15px;
	-ms-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

#pop_loader {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #FFFFFF88;
	z-index: 15;
}
#pop_loader IMG {
	position: absolute;
	width: 120px;
	height: 120px;
	left: calc(50% - 60px);
	top: calc(40% - 60px);
	box-shadow: 0 0 10px #00000088;
	border-radius: 12px;
	-o-border-radius: 12px;
	-ms-border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

#pop_confirm_before {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #00000088;
	z-index: 8;
}
#pop_confirm {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px;
	gap: 20px;
	position: absolute;
	width: 272px;
	min-height: 300px;
	left: calc(50% - 166px);
	top: calc(40% - 144px);
	background: var(--color-white);
	box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	-o-border-radius: 12px;
	-ms-border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	z-index: 10;
}
#pop_confirm .ttl {
	font-weight: 900;
	font-family: myAvenirBold;
	font-size: 22px;
	color: var(--color-black);
    margin-top: 32px;
    margin-bottom: 12px;
}
#pop_confirm .body {
	font-weight: 350;
	font-size: 22px;
	line-height: 24px;
	color: var(--color-black);
    margin-bottom: 32px;
} 
#pop_confirm .close-btn {
	right: 30px;
	top: 30px;
	width: 18px;
}
#pop_confirm BUTTON {
	text-transform: uppercase;
	width: 100%;
}


#pop_alert {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px;
	gap: 20px;
	position: absolute;
	width: 232px;
	min-height: 300px;
	left: calc(50% - 146px);
	top: calc(40% - 180px);
	background: var(--color-white);
	box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	-o-border-radius: 12px;
	-ms-border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	z-index: 10;
}
#pop_alert .ttl {
	font-weight: 900;
	font-size: 22px;
	color: var(--color-black);
    margin-top: 32px;
    margin-bottom: 12px;
}
#pop_alert .body {
	font-weight: 350;
	font-size: 22px;
	line-height: 24px;
	color: var(--color-black);
    margin-bottom: 32px;
} 
#pop_alert BUTTON {
	text-transform: uppercase;
	width: 100%;
}


LEGEND {
	border: solid 1px var(--color-white);
    border-radius: 8px;
    margin: 10px 0;
    padding: 10px;
}

.paymethods .row {
	position: relative;
	border: solid 1px var(--color-lightwhite);
	background: var(--color-white);
	height: 52px;
	line-height: 52px;
	padding: 0 11px 0 52px;
}
.paymethods .row .expired-container {
	display: none;
	color: var(--color-reddark);
	font-size: 11px;
	font-family: myAvenirBold;
	font-weight: 800;
	text-transform: uppercase;
	position: absolute;
	right: 10px;
	top: 0px;
}
.paymethods .row.expired .expired-container {
	display: inline-block;
}
.paymethods .row.expired {
    opacity: 0.5;
}
.paymethods .row .remover {
	position: absolute;
	right: 15px;
	top: 20px;
	height: 18px;
}
.paymethods .row.expired .selector {
	display: none;
}
.paymethods .row.selected .remover, .paymethods .row.expired .remover {
	display: none;
}
.paymethods .row .selector {
	position: absolute;
	left: 15px;
	top: 15px;
}
IMG.brand {
    height: 22px;
    vertical-align: middle;
	margin-right: 12px;
}
#paymenthods_new {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px;
	gap: 20px;
	position: absolute;
	width: 232px;
	min-height: 220px;
	left: calc(50% - 146px);
	top: calc(50% - 140px);
	background: var(--color-white);
	box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	-o-border-radius: 12px;
	-ms-border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	z-index: 10;
}
#paymenthods_new BUTTON {
	text-transform: uppercase;
	width: 100%;
}


#membership_plan {
	display: none;
	background: var(--color-offwhite);
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	z-index: 10;
}
#membership_plan .title-big {
	font-weight: 800;
	font-family: myAvenirBold;
	font-size: 20px;
	margin-bottom: 12px;
}
.notes-container .note {
	font-family: myAvenir;
	padding-left: 32px;
	margin-bottom: 20px;
	position: relative;
	font-weight: 400;
	font-size: 22px;
}
.notes-container .note::before {
	content: "";
	background: transparent url('status-active-icon.svg') no-repeat center center;
	background-size: contain;
	position: absolute;
    top: 4px;
    left: 0px;
    width: 20px;
    height: 20px;
}
.note-purple, .note-purple * {
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	color: #979797;
}
.note-purple SPAN {
	color: var(--color-blue);
}
.note-purple::before {
	background: transparent url('status-active-icon-purple.svg') no-repeat center center;
	background-size: contain;
    top: 5px;
    left: 4px;
    width: 16px;
    height: 16px;
}
.products {
	width: 100%;
	margin-bottom: 12px;
}
.products IMG {
	background: var(--color-lightgray);
	width: 72px;
	border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}


.product-row {
	display: flex;
}
.product-row .right-side {
	width: calc(100% - 78px - 25px);
	margin-left: 25px;
}
.product-row IMG {
	width: 68px;
	height: 68px;
}
.product-row .product-title {
	font-weight: 800;
	font-size: 14px;
	font-family: myAvenirBold;
}
.btn-white {
	display: inline-block;
	padding: 10px;
	max-width: 100px;
	background: #FCFBFE;
	border: 1px solid #C9C2DB;
	border-radius: 100px;
	-o-border-radius: 100px;
	-ms-border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	font-family: myAvenirBold;
	font-style: normal;
	font-weight: 900;
	font-size: 14px;
	color: #7B5EC6;
}


.store .title {
	font-size: 48px;
	font-weight: 900;
	font-family: myAvenirBold;
}
.store .container .title {
	font-size: 34px;
}
.store .subtitle {
	font-size: 16px;
	font-weight: 900;
	font-family: myAvenirBold;
}
.store BUTTON {
	text-transform: uppercase;
	width: 100%;
}
.store .plan {
	padding: 20px;
	/* left: calc(50% - 168px); */
	width: calc(100% - 40px);
	max-width: 295px;
	background: var(--color-plan-bg);
	border: 1px solid var(--color-plan-border);
	border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	margin-bottom: 20px;
}
.store .plan.purple {
	border: 1px solid #7B5EC666;
	background: #7B5EC61A;
}
.store .plan UL {
	margin-left: 20px;
}
.store .plan UL LI {
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 12px;
}
.store .plan .title {
    font-size: 26px;
    margin-top: 0;
}


.my-plan {
	font-weight: 800;
	font-family: myAvenirBold;
	font-size: 14px;
	position: relative;
}
.my-status {
	position: absolute;
	top: 0;
	right: 0;
}
.my-assigned {
	font-weight: 350;
	font-size: 14px;
}


.cancel-container {
	width: 100%;
	margin-bottom: 5px;
}
.cancel-container .renewal-status {
	font-weight: 800;
	font-family: myAvenirBold;
	color: var(--color-purple);
	text-transform: uppercase;
}