html,
body,
h1, h2, h3, h4,
p, form, ul, ol, dl {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
ul, ol, dl {
    list-style: none;
}
*:focus {
    outline: none;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.c {
    justify-content: center;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

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

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

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

body {
    font-family: ProximaNova !important;
    font-size: 12px;
    color: #000f24;
    padding-top: 120px;
    position: relative;
    height: 100%;
    background-color: #23b96f;
    box-sizing: border-box;
}

.Wrapper {
    width: 100%;
    position: relative;
}
.Section {
    width: 100%;
    position: relative;
    background-color: #ffffff;
    text-align: center;
}
.Section--Inverted {
    background-color: #23b96f;
}
.Section--Shaded {
    background-color: #fafafa;
}
.Sizer {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
}


.Header {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.0);
}
.Header .Sizer {
    height: 100%;
}
.Header.do-animate {
    transition: height 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
}
.Header.is-fixed {
    height: 60px;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
}
.Dropsmith {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.Dropsmith a {
    display: block;
    width: 160px;
    height: 33px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(/images/dropsmith.svg) no-repeat 0 0;
    background-size: contain;
}
.Logo-Print {
    display: none;
}
.is-fixed .Dropsmith a {
    transform: scale(0.9);
}
.do-animate .Dropsmith a {
    transition: transform 0.1s ease-in-out;
}
.QuickLinks {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}
.QuickLinks li {
    display: inline-block;
}
.QuickLinks li a {
    display: block;
    padding: 10px 20px;
    color: #ffffff;
}
.QuickLinks li a:hover {
    color: #f6cf15;
}
.UserAccess {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}
.UserAccess li {
    display: inline-block;
    margin-left: 10px;
    float: left;
}
[ds-add-compare] .UserAccess li {
    margin-left: 0px;
    margin-bottom: 10px;
}
.UserAccess li a {
    display: block;
    padding: 10px 20px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    border: solid 1px rgba(254, 254, 254, 0.25);
}
.UserAccess li a:hover {
    color: #f6cf15;
    border: solid 1px #f6cf15;
}
.UserAccess li.is-special a {
    font-weight: bold;
    background-color: #f6cf15;
    border: solid 1px rgba(254, 254, 254, 0);
}
.UserAccess li.is-special a:hover {
    background-color: transparent;
    color: #f6cf15;
    border: solid 1px #f6cf15;
}
.UserAccess .UserAccess--Profile a {
    border-radius: 100px;
    background-image: linear-gradient(135deg, #3023ae, #c86dd7);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: solid 1px rgba(0, 15, 36, 0.2);
    line-height: 37px;
    width: 37px;
    height: 37px;
    display: inline-block;
    padding: 0;
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
}
.White .Header .UserAccess .UserAccess--Profile a {
    color: #ffffff;
}
.UserAccess .UserAccess--Profile a:hover,
.White .Header .UserAccess .UserAccess--Profile a:hover {
    color: #f6cf15;
}
.MainSlider {
    height: 80vh;
    min-height: 440px;
}
.Slide {
    align-content: center;
}
.Slide h2 {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
    margin-bottom: 50px;
}
.Slide a {
    background-color: rgba(0, 15, 36, 0.6);
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    border: none;
    padding: 10px 40px;
}
.Slide p {
    color: #FFFFFF;
    font-family: PTSerif !important;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.07);
}
.Slide a:hover {
    background-color: rgba(0, 15, 36, 0.2);
}
.Slide-Pagination {

}
.Slide-Pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0);
    opacity: 1;
    border: 2px solid #fff;
    box-sizing: border-box;
}
.Slide-Pagination .swiper-pagination-bullet-active {
    background-color: rgba(255, 255, 255, 1);
}
.swiper-container {
    height: 100%;
}

h3 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}
.ds-button {
    border-radius: 100px;
    padding: 10px 34px;
    font-family: ProximaNova, sans-serif;
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
    text-transform: uppercase;
    background-color: #F6CF15;
    border: 0 none;
}
.ds-button[disabled], .ds-button.primary[disabled] {
    background-color: #aaa;
}
.ds-button.primary {
    background-color: #F15A29;
}
.Button {
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 20px;
    color: #9b8579;
    border-radius: 100px;
    border: solid 1px rgba(155, 133, 121, 0.3);
    box-sizing: border-box;
}
.Button--CTA {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    background-color: #f6cf15;
}
.Button--CTA:hover {
    background-color: #23b96f;
    color: #f6cf15;
    border: solid 1px #f6cf15;
}

.Stats {
    margin-top: 15px;
}
.Stats li {

}
.Stats li a {
    font-size: 34px;
    display: inline-block;
    vertical-align: middle;
    color: #000f24;
}
.Stats li strong {
    display: block;
    font-size: 72px;
    font-weight: bold;
    position: relative;
}
.Stats li strong:after {
    content: '';
    border-top: 1px solid #ffffff;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60px;
    transform: translate(-50%, 0);
}
.Stats li.Stat--oil strong:after {
    border-color: #ffde00;
}
.Stats li.Stat--blend strong:after {
    border-color: #27aae1;
}
.Stats li.Stat--seller strong:after {
    border-color: #bed730;
}
.Stats li span {
    display: block;
    font-family: PTSerif;
    font-size: 18px;
    color: #9b8579;
}


.Button-Submit {
    color: #ffffff;
    background-color: #27aae1;
    border: none;
}
.Brands {
    padding: 65px 0;
}
.Brands .swiper-slide {
    width: 164px;
}

.Promotions {
    padding: 85px 0;
}
.Promotion {
    border: solid 1px rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-sizing: border-box;
    padding: 38px 30px 0;
    position: relative;
}
.Promotion:after {
    content: '';
    display: block;
    width: 43px;
    height: 34px;
    background: #23b96f url(/images/drop.svg) no-repeat 0 0;
    background-size: contain;
    background-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.Promotion h3 {
    font-size: 36px;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
    position: relative;
    margin-bottom: 42px;
}
.Promotion h3:after {
    content: '';
    border-top: 1px solid #ffde00;
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 60px;
    transform: translate(-50%, 0);
}
.Promotion h4 {
    font-family: PTSerif;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1em;
}
.Promotion p {
    font-family: PTSerif;
    font-size: 18px;
    margin-bottom: 60px;
}
.Promotion--Seller {
    margin-left: 10%;
}
.Seller .Promotion--Seller {
    margin-left: 0;
}
.Promotion--Seller:after {
    background-image: url(/images/bottle.svg);
}
.Promotion .Button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    white-space: nowrap;
}

.pure-g,
.pure-g [class *="pure-u"] {
    font-family: ProximaNova;
}

.InNumbers {
    padding: 35px 0 40px;
}

.Features {
    font-family: ProximaNova;
    font-size: 14px;
    font-weight: bold;
    color: #000f24;
    padding: 80px 0 40px;
}
.Features a {
    color: #000f24;
}
.Links {
    border-bottom: 1px solid rgba(155, 154, 155, 0.2);
}
.Links li {
    display: inline-block;
    margin: 2.5%;
}

.Therapist .MainSlider {
    height: 50vh;
}
.Therapist .MainSlider h2 {
    position: relative;
    font-size: 36px;
    line-height: 48px;
}
.Therapist .MainSlider h2:after {
    content: '';
    border-top: 1px solid #ffde00;
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 60px;
    transform: translate(-50%, 0);
}
.Therapist .MainSlider h2:before {
    content: '';
    display: block;
    width: 43px;
    height: 34px;
    background: #23b96f url(/images/drop.svg) no-repeat 0 0;
    background-size: contain;
    background-position: 50% 50%;
    position: absolute;
    top: -1em;
    left: 50%;
    transform: translate(-50%, -50%);
}
.Therapist .MainSlider h2 span {
    display: block;
    margin-bottom: 20px;
}
.Therapist .MainSlider h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}

.Therapist--Content p {
    font-family: PTSerif !important;
    font-size: 18px;
    text-align: left;
}

.Therapist .Promotions h3 {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}
.Therapist .Promotion {
    margin: 0 5%;
}
.Seller .Promotion {
    margin: 0;
    letter-spacing: normal;
}
.Therapist .Promotion:after {
    display: none;
}

.White {
    background-color: #ffffff;
}
.White .Header {
    background-color: #ffffff;
}
.White .Header a {
    color: #000f24;
}
.White .Header .is-special a {
    color: #ffffff;
    border: solid 1px rgba(254, 254, 254, 0);
}
.White .UserAccess li a {
    border: solid 1px #9b8579;
}
.White .UserAccess li a:hover {
    color: #f6cf15;
    border: solid 1px #f6cf15;
}
.White .Dropsmith a {
    background-image: url(/images/dropsmart-160x33.png);
}

.Single .Header .Sizer {
    border-bottom: 1px solid rgba(155, 154, 155, 0.2);
}
.Single .Header.is-fixed .Sizer {
    border-bottom: 1px solid rgba(155, 154, 155, 0);
}

.Listing--Wrapper {
    margin: 10px 0;
    padding: 10px 0;
}
.Listing--Wrapper:hover {
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.08);
}

.Listing--Item:hover {
    background-image: radial-gradient(40% 40% at 50% 40%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}
.Listing--Item:hover h4 {
    text-decoration: underline;
}
.Listing--Item h4 {
    font-family: ProximaNova;
    font-size: 18px;
    font-weight: normal;
    /*text-transform: capitalize;*/
    color: #000f24;
}

.Listing--Item span {
    display: block;
    margin-bottom: 2em;
    font-family: PTSerif;
    font-size: 14px;
    font-weight: normal;
    color: #9b8579;
}

.Listing--Item .email::before {
    content: ' ';
    background-color: #f6cf15;
    width: 60px;
    height: 2px;
    position: absolute;
    top: -1em;
    left: 50%;
    margin-left: -30px;
}

.Listing--Item .email {
    margin-top: -2px;
    padding: 2px 8px;
    display: inline-block;
    position: relative;
    font-style: normal;
    font-size: 14px;
    font-weight: normal;
    color: rgba(0, 15, 36, 0.6);
    border-radius: 20px;
}
.Listing--Item .email:hover {
    background-color: #f6f6f6;
}

.White .Section--Shaded {
    background-color: #fafafa;
    box-shadow: inset 0 5px 5px 0 rgba(0, 0, 0, 0.02);
}

.Oil--Header {
    padding: 80px 0 20px;
}
.Ingredient--Chart {
    text-align: center;
    transform: translate(0, -2em);
}
.Ingredient--Chart a {
    margin-top: 2em;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    color: rgba(0, 15, 36, 0.6);
    text-decoration: underline;
}
.Ingredient--Chart a:hover {
    text-decoration: none;
}
.Ingredient--Title {
    text-align: left;
}
.Ingredient--Title h2 {
    /*text-transform: capitalize;*/
    text-align: left;
    font-family: ProximaNova;
    font-size: 48px;
    font-weight: 300;
    color: #000f24;
    display: inline-block;
}
.Ingredient--Title a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: solid 1px rgba(155, 133, 121, 0.3);
    border-radius: 100px;
    text-align: center;
    line-height: 44px;
    font-size: 1.4em;
    color: #9b8579;
    vertical-align: text-bottom;
    margin-left: 10px;
}
.Ingredient--MadeBy {
    border-radius: 100px;
    background-color: #f6f6f6;
    font-size: 14px;
    color: rgba(0, 15, 36, 0.38);
    padding: 10px 20px;
    display: inline-block;
    margin-top: 6px;
}
.Ingredient--MadeBy strong {
    color: #000f24;
    font-weight: normal;
}
.Oil--Header h3 {
    text-align: left;
    font-family: PTSerif;
    font-size: 18px;
    font-weight: normal;
    color: #9b8579;
    position: relative;
    margin-bottom: 2em;
}
.Oil--Header h3:after {
    content: '';
    border-top: 2px solid #f6cf15;
    position: absolute;
    bottom: -1em;
    left: 0;
    width: 60px;
    transform: translate(0, 0);
}
.Ingredients {
    text-align: left;
}
.Ingredients li,
md-chips md-chip {
    border-radius: 100px;
    background-color: #ffffff;
    border: solid 1px rgba(0, 15, 36, 0.1);
    font-family: ProximaNova;
    font-size: 14px;
    font-weight: normal;
    color: rgba(0, 15, 36, 0.5);
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    box-sizing: border-box;
}
.Ingredients li span {
    border-radius: 100px;
    color: #ffffff;
    padding: 1px 5px;
    margin-left: -5px;
}
.Ingredients li.is-disabled {
    background-color: rgba(0,0,0,0.1);
    color: rgba(0,15,36,0.75);
    border-color: rgba(0,0,0,0.02);
    opacity: 0.24;
    pointer-events: none;
}
.Oil--Properties {
    text-align: left;
    line-height: 19px;
    font-size: 14px;
    padding: 44px 0 44px;
}
.Oil--Metadata {
    text-align: left;
    font-size: 18px;
    width: 150%;
}
.Oil--Metadata strong {
    font-weight: normal;
    font-size: 12px;
    color: #888f99;
}
.Oil--Metadata span {
    font-family: PTSerif !important;
}

.Oil--Metadata ul {

}
.Oil--Metadata li {
    /*text-transform: capitalize;*/
    text-align: left;
    font-size: 18px;
    font-weight: normal;
    color: #707885;
    margin-bottom: 1em;
}

.Oil--Properties h4 {
    font-family: ProximaNova;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 19px;
}
.Oil--Properties dt {
    display: inline-block;
    width: 30%;
    margin-bottom: 19px;
}
.Oil--Properties dd {
    display: inline-block;
    width: 60%;
    margin: 0 0 19px;
    opacity: 0.5;
}
.Oil--Properties dt:last-of-type,
.Oil--Properties dd:last-of-type {
    margin-bottom: 0 !important;
}
.Oil--Properties .Ingredients li {
    margin-top: 0px;
    margin-bottom: 4px;
}
.Oil--Properties .Ingredients:first-of-type {
    /*min-height: 8em;*/
}

.Oil--Details .Subnav {
    margin-bottom: 20px;
}
.Oil--Details .Subnav li {
    display: inline-block;
    opacity: 0.5;
}
.Oil--Details .Subnav li:hover,
.Oil--Details .Subnav li.is-active {
    opacity: 1;
}
.Oil--Details .Subnav li a {
    display: block;
    padding: 10px 20px 9px 15px;
    border-radius: 100px;
    border: solid 1px rgba(0, 15, 36, 0.6);
    color: rgba(0, 15, 36, 0.6);
    font-size: 14px;
    text-transform: uppercase;
}
.Oil--Details .Subnav li a i {
    margin-right: 10px;
}
.Oil--Details .Subnav li a svg {
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2.5px;
}

.Oil--Components {
    text-align: left;
    font-size: 12px;
}
.Oil--Components h4 {
    font-size: 14px;
    padding: 11px 9px;
    margin-top: 40px;
}
.Oil--Components ul {
    border-top: 1px solid #d8d8d8;
    margin-right: 30px;
}
.Oil--Components ul li {
    border-bottom: 1px solid #d8d8d8;
    padding: 0;
    /*text-transform: capitalize;*/
}
.Oil--Components .text:hover {
    background-color: rgba(0, 0, 0, 0.02);
}
.Oil--Components .text {
    padding: 10px 9px;
    display: block;
}
.Oil--Components ul .link {
    border-bottom: 1px solid rgba(0,15,36,0.2);
    padding-bottom: 2px;
}
.Oil--Components ul .value {
    display: inline-block;
    /*width: 40px;*/
    color: rgba(0, 15, 36, 0.5);
    float: right;
}
.Oil--Components ul .color {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 100px;
    margin: 0px 3px 0 0;
    position: relative;
    overflow: hidden;
    transform: rotate(45deg);
    border: 0px solid transparent;
    box-sizing: border-box;
}
.Oil--Components ul .color--part {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
}

.Oil--Components ul ul {
    border: 0;
    margin: 0;
}
.Oil--Components ul ul .text {
    padding-left: 24px;
}
.Oil--Components ul ul ul .icon--arrow {
    margin-right: 6px;
}
.Oil--Components ul ul ul .text {
    padding-left: 43px;
}
.Oil--Components ul ul li {
    border: 0;
    /*padding: 11px 0 0 0px;*/
}
.Oil--Components ul .icon--arrow {
    float: left;
    margin-right: 10px;
    color: #999;
}
.Oil--Components ul li.level--1 {
    cursor: pointer;
}
.Oil--Components ul li.is-active {
    background-color: #FAFAFA;
}
.Oil--Components ul li li {
    /*background-color: #f6f6f7;*/
}
.Oil--Components ul li li li {
    /*background-color: #f1f2f2;*/
}

.Oil--Components a {
    margin-top: 1em;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    color: rgba(0, 15, 36, 0.6);
    text-decoration: underline;
}
.Oil--Components a:hover {
    text-decoration: none;
}

.Popup--Property {
    position: fixed;
    top: 0px;
    right: 0;
    bottom: 0;
    width: 360px;
    /* height: 100vh; */
    background-color: rgba(255, 255, 255, 1);
    padding: 0;
    box-shadow: -50px 0px 75px 2px rgba(0,0,0,0.1);
    z-index: 20;
    display: flex;
    flex-direction: column;
}
.Popup--Content {
    overflow-y: scroll;
    flex: auto;
}
.Popup--Oil {
    padding: 32px 35px 0;
}
.Popup--Property .Popup--Oil h3 {
    font-size: 26px;
    line-height: 30px;
}
.Popup--Property .Popup--Oil p {
    font-size: 16px;
    line-height: 20px;
    /*font-style: italic;*/
}
.Popup--Property .Popup--OilBase li {
    margin-bottom: 0;
    padding-bottom: 10px;
    border: none;
}
.Popup--Property .Popup--OilBase > div {
    padding-bottom: 32px;
    border-bottom: 1px solid #eeeeee;
}
.Popup--Property li {
    margin-bottom: 20px;
    padding: 32px 35px;
    border-bottom: 1px solid #eeeeee;
}
.Popup--Property h4 {
    color: #646d7a;
    font-weight: normal;
    margin-bottom: 16px;
}
.Popup--Property h3 {
    font-size: 20px;
    color: rgba(0,15,36,0.6);
    font-family: PTSerif;
    margin: 0;
    line-height: 24px;
    /*text-transform: capitalize;*/
}
.Popup--Property p {
    font-size: 14px;
    line-height: 18px;
    color: #9B8579;
    font-family: PTSerif;
    margin-bottom: 16px;
}
.Popup--Property a {
    color: #646d7a;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}
.Popup--Property a:hover {
    text-decoration: underline;
}
.Popup--Header {
    background: #27aae1;
    color: #ffffff;
    padding: 20px 35px;
    /*text-transform: capitalize;*/
    position: relative;
    min-height: 120px;
    box-sizing: border-box;
}
.Popup--Header h2 {
    font-size: 24px;
    line-height: 24px;
    margin-top: 10px;
    margin-right: 30px;
}
.Popup--Header span {
    color: rgba(0,15,36,0.5);
    text-transform: uppercase;
    font-size: 12px;
}

.Ingredients--Links li {
    cursor: pointer;
}
.Ingredients--Links li.is-active,
.Ingredients--Links li:hover {
    background-color: #27aae1;
    color: #ffffff;
    border-color: rgba(0, 0, 0, 0);
}
.Popups {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
.Popup--Compare {
    position: relative;
    /* position: fixed;
    bottom: 0;
    left: 0; */
    width: 100%;
    background-color: #27AAE1;
    padding: 20px;
    box-shadow: -2px 4px 4px 2px rgba(0,0,0,0.1);
    /* z-index: 10; */
}
.Popup--Compare h2 {
	color: #FFFFFF;
	font-family: ProximaNova !important;
	font-size: 24px;
	font-weight: bold;
	line-height: 48px;
}
.Popup--Compare-Pill {
    display: inline-block;
    color: #FFFFFF;
	font-family: ProximaNova !important;
    font-size: 14px;
    line-height: 14px;
    border-radius: 100px;
    background-color: rgba(0,15,36,0.2);
    padding: 10px 10px 10px 15px;
    margin-right: 10px;
}
.Popup--Compare-Pill a {
    margin-left: 5px;
    color: #90D7F0;
}
.Listing--Item {
    display: inline-block;
}
.User--Lead .pure-g [class*=pure-u] {
    font-family: PTSerif !important;
    color: #000F24;
    font-size: 28px;
    line-height: 44px;
    margin: 72px 0;
    text-align: left;
}
.User--List {
    padding: 80px 0;
}
.User--List h3 {
    color: #000F24;
    font-size: 36px;
    text-align: left;
}
.User--List ul {
    color: rgba(0,15,36,0.6);
    font-family: PTSerif !important;
    font-size: 18px;
    line-height: 26px;
    text-align: left;
    width: 300px;
}
.User--List ul li {
    margin-bottom: 26px;
    position: relative;
}
.User--List ul li:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    background: #23B96F url(/images/drop_filled.svg) no-repeat 50% 50%;
    background-size: 40%;
    border-radius: 100px;
    left: -52px;
    top: 5px;
}
.User--List .User-Illustration-1 {
    width: 392px;
    height: 558px;
    background: url(/images/user_1.png) no-repeat;
}
.User--List .User-Illustration-2 {
    width: 392px;
    height: 709px;
    background: url(/images/user_2.png) no-repeat;
    margin-top: -104px;
}
.User--List .User-Illustration-22 {
    width: 405px;
    height: 536px;
    background: url(/images/user_22.png) no-repeat;
}
.User--List .User-Illustration-3 {
    width: 405px;
    height: 255px;
    background: url(/images/user_3.png) no-repeat;
    margin-top: -30px;
}
.User--List p {
    color: rgba(0,15,36,0.6);
    font-family: PTSerif !important;
    font-size: 20px;
    line-height: 36px;
    text-align: left;
    margin-bottom: 36px;
}
.User--List.Section--Shaded {
    padding: 60px 0 10px;
}
.User--List p.strong {
    font-size: 28px;
    line-height: 44px;
    color: #000F24;
}
.User--Table {
    padding: 80px 0;
}
.User--Table h3 {
    color: #fff;
    font-size: 48px;
    margin-bottom: 60px;
}
.User--Table table .fa-check-circle:before {
    font-size: 30px;
}
.User--Table table {
    width: 100%;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
    font-family: PTSerif !important;
}
.User--Table table th {
    width: 25%;
    line-height: 24px;
    font-weight: normal;
    padding: 30px 0;
}
.User--Table table td {
    padding: 0 24px;
    position: relative;
}
.User--Table table td:nth-child(1) {
    text-align: left;
}

.User--Table table h3 {
    font-family: ProximaNova !important;
    font-size: 24px;
    line-height: normal;
    margin: 0;
}
.User--Table table em {
    font-size: 18px;
    display: block;
    font-style: normal;
    position: relative;
    margin-bottom: 25px;
}
.User--Table table em:after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: #FFDE00;
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translate(-50%, 0);
}
.User--Table table span {
    font-family: ProximaNova !important;
    font-size: 12px;
    display: block;
}

td:hover .User--Table-info {
    display: block;
}
.User--Table-info {
    display: none;
    position: absolute;
    top: 50%;
    right: 5%;
    background-color: #fff;
    border-radius: 5px;
    color: #000f24;
    z-index: 10;
    transform: translate(100%, -50%);
    padding: 10px 25px;
    line-height: 22px;
    /*font-size: 14px;
    line-height: 16px;*/
}
.User--Table-info:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.Best-value {
    position: relative;
}
.Best-value:before {
    position: absolute;
    top: 0;
    left: 50%;
    content: 'best value';
    color: #FEFEFE;
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
    font-family: ProximaNova !important;
    background-color: #F15A29;
    border-radius: 100px;
    padding: 4px 8px;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}
.User--Table tfoot h3 {
    margin: 20px 0 -20px;
}
.btn,
.User--Table table a {
    display: inline-block;
    background-color: #333333;
    border-radius: 100px;
    padding: 10px 34px;
    font-family: ProximaNova !important;
    color: #fff;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    font-weight: bold;
    bottom: -26px;
    position: relative;
    margin: 0 -10px;
}

.avatar {
    height: 263px;
    width: 263px;
    background: linear-gradient(134.72deg, #3023AE 0%, #C86DD7 100%);
    border-radius: 200px;
    position: relative;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.avatar i {
    font-size: 50px;
    vertical-align: middle;
}
.avatar-text {
    color: #FAFAFA;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Image-placeholder {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-top: 100%;
    border: 1px dashed rgba(0,15,36,0.2);
}
.Image-placeholder i {
    font-size: 50px;
    color: rgba(0,15,36,0.2);
}
.Image-placeholder-text {
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0,15,36,0.6);
}
.Image-remove {
    position: absolute;
    width: 80px;
    line-height: 80px;
    background-color: #fff;
    color: #000f24;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100px;
    display: inline-block;
    opacity: 0;
}
.Image-item {
    position: relative;
}
.Image-item i {
    font-size: 50px;
    vertical-align: middle;
}
.Image-item:hover .Image-remove,
.avatar:hover .Image-remove {
    opacity: 1;
}

.User--View .Sizer {
    padding: 30px 0;
}

.User--View .card .url, .User--View .card .email {
    word-break: break-all;
}

.User--View .about {
    color: rgba(0,15,36,0.6);
    text-align: left;
    font-size: 18px;
    line-height: 26px;
    font-family: PTSerif !important;
}
.User--View .card {
    background-color: #FAFAFA;
    padding: 25px 30px 0;
    height: 100%;
    box-sizing: border-box;
}
.User--View .card h3 {
    color: #000F24;
    font-family: ProximaNova !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
}
.User--View .card h3:after {
    border: 1px solid #D8D8D8;
    width: 100%;
}
.User--View .card p {
    font-family: PTSerif !important;
    color: rgba(0,15,36,0.6);
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    margin-bottom: 10px;
}
.User--View .card p a {
    color: rgba(0,15,36,0.6);
    border-bottom: 1px solid #FFDE00;
}
.User--View .card p a:hover {
    border-color: rgba(0,15,36,0.26);
}
.User--Images .pure-u-8-24 {
    padding: 15px;
    box-sizing: border-box;
    position: relative;
}
.User--Images .pure-u-8-24 img {
    width: 100%;
}
.User--Images .pure-u-8-24 p.description {
    background-color: #92278F;
    /* height: 100%; */
    padding: 2vw 2vw 0;
    color: #fff;
    font-size: calc(12px + 0.75vw);
    line-height: calc(12px + 1.75vw);
    font-family: PTSerif !important;
    box-sizing: border-box;
    text-align: left;
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    min-height: 100%;
    border-bottom: 30px solid #fff;
}

.Section--Shaded .Listing--Item span {
    margin: 0;
}
.Listing--Item span.hide-after {
    margin-bottom: 1em;
}
.Listing--Item span.hide-after:after,
.Section--Shaded .Listing--Item span:after {
    display: none;
}
.Section--Shaded .Listing--Item strong {
    color: rgba(0,15,36,0.5);
    font-family: ProximaNova !important;
	font-size: 10px;
    line-height: 12px;
    font-weight: normal;
    position: relative;
}
.Section--Shaded .Listing--Item strong:before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: #F6CF15;
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translate(-100%, -50%);
}
.Section--Shaded .Listing--Item strong:after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: #F6CF15;
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translate(100%, -50%);
}

.Button--Compare {
	color: #000F24;
	font-family: ProximaNova !important;
	font-size: 12px;
	line-height: 14px;
    margin: 10px 0;
    display: inline-block;
}
.Button--Compare:hover {
    color: #27AAE1;
}

.Oil--Basic-info {
    text-align: left;

}
.Oil--Basic-info dt {
	color: rgba(0,15,36,0.5);
	font-family: ProximaNova !important;
	font-size: 12px;
	line-height: 14px;
}
.Oil--Basic-info dd {
	color: #000F24;
    font-family: PTSerif !important;
	font-size: 18px;
	line-height: 26px;
    margin: 0 0 15px;
}

.Compare-heading {
    text-align: left;
    position: relative;
}
.Compare-heading h3 {
    color: #000F24;
	font-family: ProximaNova !important;
    font-size: 24px;
    font-weight: bold;
    line-height: 48px;
    position: relative;
    z-index: 8;
}
.Compare-heading a {
    color: #000F24;
}
.Compare-heading span {
    color: #989ea6;
    border-radius: 100px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #FAFAFA;
    display: inline-block;
    margin-left: 10px;
    box-sizing: border-box;
}
.Compare-heading.is-closed span {
    border: 1px solid rgba(0,15,36,0.2);
    background-color: #fff;
}
.Compare-heading.is-closed .fa {
    transform: translate(0, 2px);
}
.Compare-heading:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #f6f6f6;
    z-index: 0;
}
.Compare-heading.Compare-methods svg {
    transform: translate(0, 3px);
}
.Compare-heading.Compare-methods span {
    width: 34px;
    line-height: 34px;
    background-color: #fff;
    border: 1px solid rgba(155,133,121,0.3);
}
.Compare-heading.Compare-methods .is-active span {
    background-color: #27AAE1;
    border-width: 0;
}
/*.md-scroll-mask {
    z-index: 950;
}
md-backdrop.md-dialog-backdrop {
    z-index: 979;
}
.md-dialog-container {
    z-index: 1000;
}*/
.Modal {
    min-width: 350px;
}
.Modal md-toolbar {
    background-color: #23B96F !important;
    padding: 28px;
    min-height: 120px;
}
.Modal md-toolbar h2 {
    font-weight: bold;
    color: #fff;
    font-size: 36px;
    line-height: 48px;
}
.Modal .Button--close {
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.3);
}
.Modal md-input-container {
    width: 100%;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}
.Modal md-toolbar .close-button {
    position: absolute;
    top: 1.4em;
    right: 1.6em;
}
.Modal md-dialog-content {
    padding: 20px 60px;
}
.Modal md-dialog-actions {
    font-family: ProximaNova, sans-serif !important;
}
.Modal.Profile md-dialog-content {
    padding: 0 0px;
}
.Modal.Profile .Profile-group.subscription button {
    margin-top: 1em;
    bottom: auto;
}
.Modal.Profile .Profile-group.subscription .message {
    margin-top: 1em;
    font-weight: bold;
}
.Modal.Profile .Profile-group.subscription .message.ok {
    color: #23B96F;
}
.Modal.Profile .Profile-group.subscription .message.error {
    color: #b21f2d;
}
.Modal.Profile .Profile-group.subscription .message a {
    color: inherit;
    font-weight: normal;
}
.Modal.Profile .Profile-group.subscription .message a:hover {
    text-decoration: underline;
}
.Modal.Profile .renew-subscription .btn {
    margin: 0.5em 0 0;
    bottom: 0;
}
.Modal .Profile-wrapper {
    padding: 20px 60px;
    border-bottom: 1px solid rgba(0,15,36,0.2);
}
.Modal md-dialog-actions {
    padding: 20px 60px;
    min-height: 80px;
}
.Modal [type="submit"] {
    border-radius: 100px;
    background-color: #F6CF15 !important;
    color: #fff !important;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.Modal [type="submit"][disabled] {
    background-color: #aaa !important;
}
.Modal-footer {
    background-color: #FAFAFA;
    font-family: PTSerif !important;
    font-size: 20px;
    line-height: 28px;
    color: rgba(0,15,36,0.6);
}
.Modal-footer a {
    display: inline-block;
    margin-left: 10px;
    color: #23B96F;
    text-decoration: underline;
}
.Blend-list--item {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
    padding: 0 0 0 20px;
    line-height: 48px;
}
.Blend-list--item h4 {
    display: inline-block;
    color: rgba(0,15,36,0.6);
	font-family: ProximaNova !important;
    font-size: 16px;
    font-weight: bold;
    line-height: 48px;
}
.Modal md-dialog-content h3 {
    margin-top: 20px;
}


.Modal.EditOil .component {
    border-bottom: 1px dotted #c2c5ca;
}

.Modal.EditOil .component .value, .Modal.EditOil .total .value {
    text-align: right;
    padding-right: 1em;
}

.Modal.EditOil .total {
    font-weight: bold;
}


.Bullet--gray {
    background-color: rgba(0,15,36,0.2);
    color: #FFFFFF;
    font-family: ProximaNova !important;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
    width: 19px;
    text-align: center;
    display: inline-block;
    padding: 0 !important;
    box-sizing: border-box;
    border-radius: 100px;
}
.Item-valueq {
    border: 1px solid #e6e7e9;
    border-radius: 3px;
    line-height: 34px;
    min-width: 84px;
}
.Item-valueq-button {
    background-color: #f6f6f6;
    color: #9ea1aa;
    text-align: center;
    display: inline-block;
    width: 25px;
}
.Item-valueq input[type="number"] {
    display: inline-block;
    width: 34px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 34px;
    -moz-appearance: textfield;
}
.Item-valueq input[type="number"]::-webkit-outer-spin-button,
.Item-valueq input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.Safety-Link {
    color: #000F24;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 15, 36, 0.1);
}
.Safety-Link:hover {
    border-color: rgba(0, 15, 36, 0.25);
}
.Blend--Description {
    color: rgba(0,15,36,0.6);
    font-family: PTSerif !important;
    font-size: 18px;
    line-height: 26px;
    text-align: left;
}
a.Oil--Action {
    box-sizing: border-box;
    line-height: 30px;
    color: #9B8579;
    font-family: ProximaNova !important;
    font-size: 14px;
    width: auto;
    height: auto;
    padding: 0 12px 0 30px;
    background-repeat: no-repeat;
    background-position: 8px 50%;
}
a.Oil--Action:hover {
    border-color: rgba(155, 133, 121, 0.9);
}
.Oil--Action.favorite {
    background-image: url(/images/btn_heart.png);
}
.Oil--Action.favorite.active {
    background-color: #9B8579;
    color: #fff;
    background-image: url(/images/btn_heart_active.png);
}

.Oil--Action.comments {
    background-image: url(/images/btn_chat.png);
}
.Ingredient--Batch {
    background-color: #fff;
    color: rgba(0,15,36,0.5);
    font-family: ProximaNova !important;
    font-size: 12px;
    line-height: 14px;
    border-radius: 100px;
    border: 1px solid rgba(0,15,36,0.1);
    padding: 5px 5px 4px 10px;
}

.ds-icon {

}
.ds-icon i {
    display: block;
    width: 60%;
    padding-top: 60%;
    background-color: #22a765;
    border-radius: 200px;
    margin: 0 auto 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
}
.ds-icon h3 {
    color: #000F24;
    font-size: 24px;
    font-weight: bold;
    line-height: 48px;
    margin-bottom: 0;
}
.ds-icon p {
    color: #9B8579;
    font-family: PTSerif !important;
    font-size: 18px;
    line-height: 23px;
}

.Slide a.Button--Header {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    font-weight: bold;
    background-color: #f6cf15;
    border: solid 1px rgba(254, 254, 254, 0);
    font-size: 14px;
    text-transform: uppercase;
}
.Slide a.Button--Header:hover {
    background-color: transparent;
    color: #f6cf15;
    border: solid 1px #f6cf15;
}
.Button--green {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    border-radius: 100px;
    background-color: #23B96F;
    padding: 4px 8px;
    color: #FFFFFF;
}
.Button--green:hover {
    background-color: #22a765;
}
.Button--gray {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    border-radius: 100px;
    background-color: #ccc;
    padding: 4px 8px;
    color: #FFFFFF;
}
.Button--gray:hover {
    background-color: #bbb;
}

.Profile-edit {
    width: 575px;
}
.Profile-heading {
    position: relative;
    display: block;
}
.Profile-heading h4 {
    color: #000F24;
    font-size: 24px;
    font-weight: bold;
}
.Profile-heading p {
    color: #9B8579;
    font-family: PTSerif !important;
    font-size: 14px;
    line-height: 18px;
}
.Profile-heading span {
    color: #989ea6;
    border-radius: 100px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #FAFAFA;
    display: inline-block;
    margin-left: 10px;
    box-sizing: border-box;
    position: absolute;
    top: 5px;
    right: 0;
}
.Profile-heading.is-closed span {
    border: 1px solid rgba(0,15,36,0.2);
    background-color: #fff;
}
.Profile-heading.is-closed .fa {
    transform: translate(0, 2px);
}
.Profile-edit .Input-group {
    font-family: PTSerif !important;
    color: rgba(0,15,36,0.6);
    font-size: 18px;
    line-height: 26px;
    text-align: right;
    margin-top: 10px;
}
.Profile-edit .Input-group input,
.Profile-edit .Input-group textarea {
    height: 58px;
    width: 298px;
    border: 4px solid #ECF1F3;
    border-radius: 25px;
    background-color: #FEFEFE;
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.5);
    padding: 0 20px;
    box-sizing: border-box;
    /*line-height: 58px;*/
    font-family: PTSerif !important;
    margin: 0 15px;
}
.Profile-edit .Input-group textarea {
    padding: 10px 20px;
    height: auto;
}
.Profile-edit .Input-group input[disabled] {
    background-color: #F6F6F6;
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.15);
}
.Profile-edit .Input-group i {
    color: #23B96F;
    font-size: 24px;
    margin-right: 8px;
}
.Profile-edit .Input-group .is-disabled i {
    color: rgba(0,15,36,0.2);
}

.Profile-footer {

}
.Profile-footer .Btn {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    border-radius: 100px;
    background-color: rgba(0,15,36,0.2);
    padding: 0 20px;
}
.Profile-footer .Btn:hover {
    background-color: rgba(0,15,36,0.25);
}
.Profile-footer .Btn[type="submit"] {
    background-color: #23B96F !important;
}
.Profile-footer .Btn[type="submit"]:hover {
    background-color: #23ab68 !important;
}




.Table {
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    text-align: left;
    background-color: #FFFFFF;
}
.Table-header {
    background-color: rgba(0,15,36,0.08);
    line-height: 50px;
    padding: 0 35px;
    color: rgba(0,15,36,0.5);
    font-size: 14px;
}
.Table-list {
    padding: 30px;
    color: rgba(0,15,36,0.5);
    font-size: 14px;
}
.Table-item {
    line-height: 48px;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.16);
    padding: 0 20px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.Table-item:hover {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
    z-index: 3;
}
.Item-number {
    display: inline-block;
    width: 30px;
    color: rgba(0,15,36,0.2);
}
.Item-title {
    display: inline-block;
    width: 240px;
    font-size: 16px;
    color: rgba(0,15,36,0.6);
}
.Table-item:hover .Item-title {
    color: rgba(0,15,36,1);
}
.Item-date {
    display: inline-block;
    width: 100px;
}
.Table-item .material-icons {
    vertical-align: middle;
}
.Item-icon {
    float: right;
    display: none;
}
.Table-item:hover .Item-icon {
    display: none;
}
.Item-actions {
    float: right;
    color: rgba(0,15,36,0.2);
    /*display: none;*/
}
.Item-actions i:hover {
    color: rgba(0,15,36,0.6);
}
.Table-item:hover .Item-actions {
    display: block;
}
.Section--Table {
    background-color: #FAFAFA;
}
.Table-footer {
    border-top: 1px solid rgba(0,15,36,0.08);
    height: 125px;
    line-height: 125px;
    padding: 0 100px;
}
.Pagination {
    line-height: 100px;
}
.search {
    float: right;
    position: relative;
}
.search input {
    border: none;
    background: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    font-family: 'ProximaNova';
    color: rgba(0, 15, 36, 0.5);
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 10px;
}
.search i {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(-100%, -50%);
    cursor: pointer;
}
.sorter {
    float: right;
    position: relative;
    z-index: 8;
    min-width: 150px;
    text-align: right;
}
.sorter strong {
    cursor: pointer;
}
.sorter ul {
    background: #ebeced;
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    text-align: center;
}
.sorter ul li {
    padding: 0 20px;
    line-height: 36px;
    cursor: pointer;
}
.sorter ul li:hover {
    background-color: rgba(255,255,255,0.5);
}
cl-paging button.md-button {
    font-family: 'ProximaNova';
    color: rgba(0,15,36,0.6) !important;
    font-size: 16px;
    font-weight: bold;
    box-shadow: none !important;
    background-color: transparent !important;
}
cl-paging button.md-icon-button.md-raised.md-accent.md-button.md-ink-ripple {
    /* display: none; */
}
cl-paging button.md-icon-button.md-raised.md-button.ng-scope.md-ink-ripple.md-primary {
    background-color: rgba(0,15,36,0.6) !important;
    color: #fff !important;
}

.cookie-info {
    background-color: #23b96f;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    line-height: 60px;
    height: 60px;
    color: #fff;
    font-size: 15px;
    font-family: PTSerif;
    z-index: 10;
    box-shadow: 0px 25px 25px 0px rgba(0,0,0,0.05);
}
.cookie-info p {
    margin-left: 20px;
}
.cookie-info a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.cookie-info a:hover {
    border-color: rgba(255,255,255,0.6);
}
.cookie-info button {
    display: inline-block;
    line-height: 30px;
    background-color: #F6CF15;
    border-radius: 100px;
    text-transform: uppercase;
    color: #fff;
    font-family: 'ProximaNova';
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #F6CF15;
    padding: 0 10px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}
.cookie-info button:hover {
    background-color: transparent;
    color: #f6cf15;
}
.has-cookie-info {
    padding-top: 180px;
}
.has-cookie-info .Header {
    top: 60px;
}



.register-button {
    display: inline-block;
    width: 49%;
    padding: 30px 0;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 4px;
    border: none;
    background: #22a765;
    color: #fff;
}

.SubButtons {
    display: flex;
    justify-content: space-evenly;
    margin: 10px 30px;
}
.SubButtons button {
    flex: 1;
    margin: 0 5px;
}
.Button--Lime {
    border-color: #BED730;
    background-color: #BED730;
    color: #fff;
}
.Button--Lime[disabled] {
    background-color: #9da2a9;
    border-color: #9da2a9;
}
.Button--Lime.isActive {
    border-color: #BED730;
    background-color: #fff;
    color: #333;
}
.Button--Blue {
    border-color: #27aae1;
    background-color: #27aae1;
    color: #fff;
}
.Button--Blue.isActive {
    border-color: #27aae1;
    background-color: #fff;
    color: #333;
}

.UserAccess li.is-special .Button--Lime {
    border-color: #BED730;
    background-color: #BED730;
    color: #fff;
    text-transform: uppercase;
}
.UserAccess li.is-special .Button--Lime:hover {
    border-color: #BED730;
    color: #BED730;
}

.Popup--Compare .Button-Close {
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 60px;
    top: 10px;
    cursor: pointer;
}


.Footer {
    font-family: ProximaNova !important;
    font-size: 14px;
    color: #000F24;
    text-align: left;
    line-height: 60px;
    padding-bottom: 40px;
}

.Footer-Copy {
    display: inline-block;
}
.Footer-Copy a {
    font-weight: bold;
    color: #000F24;
}
.Footer-Terms {
    display: inline-block;
}
.Footer-Terms a {
    margin-left: 30px;
    color: #000F24;
}
.Footer-Copy a:hover,
.Footer-Terms a:hover {
    text-decoration: underline;
}

.Footer-Social {
    float: right;
    font-weight: bold;
}
.Footer-Social a {
    display: inline-block;
    width: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #333;
    color: #fff;
    border-radius: 100px;
    font-size: 25px;
    vertical-align: middle;
    margin-left: 10px;
}
.Footer-Social a.Button-Facebook {
    background-color: #3C5B97;
}
.Footer-Social a.Button-Instagram {
    background-color: #EC008C;
}


.Terms {
    text-align: left;
    color: rgba(0,15,36,0.6);
    font-family: PTSerif !important;
    font-size: 20px;
    line-height: 36px;
}
.Terms ol {
    counter-reset: section;
}

.Terms ol li {
    position: relative;
    margin-left: 60px;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 10px;
}
.Terms ol li li {
    margin-left: 20px;
    font-weight: normal;
    margin-bottom: 0;
}
.Terms ol li p {
    font-weight: normal;
}
.Terms ol li::before {
    counter-increment: section;
    content: counters(section, ".") ".";
    width: 60px;
    position: absolute;
    top: 0;
    right: 100%;
}
.Terms a {
    color: rgba(0,15,36,0.9);
    border-bottom: 1px solid #f6cf15;
}
.Terms a:hover {
    border-color: rgba(0,15,36,0.9);
}
.Terms table {
    font-size: 14px;
    line-height: 18px;
    width: 100%;
}
.Terms table thead {
    font-weight: bold;
    text-transform: capitalize;
}
.Terms table tbody {
    font-family: ProximaNova !important;
}
.Terms table td {
    padding-top: 10px;
    vertical-align: top;
}

.Button-Collection {
    text-align: right;
    margin: 0 15px 10px;
}
.Button-Collection a {
    font-size: 12px;
    color: rgba(0,15,36,0.5);
}
.Button-Collection a span {
    text-decoration: underline;
}
.Button-Collection a:hover span {
    text-decoration: none;
}
.Collection-Icon {
    vertical-align: middle;
    color: #BED730;
}


.free-user {
    text-align: center;
}
.free-user h3 {
    line-height: 48px;
}
.free-user h3 a {
    border-bottom: 2px solid #333333;
}
.free-user p a {
    color: #333333;
    font-size: 16px;
    text-decoration: underline;
}

md-virtual-repeat-container.md-autocomplete-suggestions-container {
    max-height: 240px !important;
}

.placement {
    background-color: #eee;
    padding: 5px 10px;
    display: inline;
    border-radius: 5px;
    line-height: 12px;
    font-size: 10px;
}

.Video-Container {
    position: relative;
    padding-top: 37.5%;
    background-size: contain;
}
.Video-Container iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.Video-Wrapper {
    position: relative;
    background: radial-gradient(100vw 75vw at center, #ffffff 0%, #dfe6ed 45%, #fafafa 70%);
}

@media (min-width: 1170px) {
    .Video-Wrapper {
        background: radial-gradient(1156px 876px at center, #ffffff 0%, #dfe6ed 45%, #fafafa 70%);
    }
}

.check-out {
    padding: 30px 0;
}
.check-out a {
    background-color: #F6CF15;
    color: #ffffff;
    border: solid 1px rgba(254, 254, 254, 0);
    padding: 10px 20px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}
.check-out a:hover {
    color: #f6cf15;
    border: solid 1px #f6cf15;
    background-color: transparent;
}

.properties-info {
    position: relative;
    color: #9ea1aa;
}
.properties-info:after {
    position: absolute;
    left: 0%;
    bottom: 0;
    font-family: ProximaNova;
    width: 140px;
    padding: 5px 10px;
    background-color: #333333;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    display: none;
    content: 'These properties are calculated by our Smart Calculator, and it is based on the constituents of the essential oil or blend. Please note that the synergy may or may not act as expected.'
}
.properties-info:hover:after {
    display: block;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #333333;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #333333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 20%;
    margin-left: -60px;
    text-transform: initial !important;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333333 transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

.to-front {
    z-index: 10;
}

.dsCouponCode {
    font-family: "ProximaNova", SansSerif;
    position: relative;
    text-align: center;
}

.dsCouponCode label {
    text-align: center;
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
}

.dsCouponCode.big label {
    font-size: 24px;
    color: white;
}

.dsCouponCode input {
    color: black;
    font-weight: bold;
    padding: 0.4em 0.75em;
    border: 1px solid transparent;
    background-color: rgba(230, 230, 230, 0.8);
    border-radius: 0.6em;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

.dsCouponCode.big input {
    font-size: 16px;
}

.dsCouponCode button {
    bottom: 0;
    font-size: 14px;
    padding: 0.625em 2em;
    margin: 0 0 0 0.75em;
    border: 0 none;
}

.dsCouponCode.big button {
    font-size: 16px;
}

.dsCouponCode input:focus {
    background-color: white;
    border: 1px solid #ccc;
}

.dsCouponCode .message {
    display: block;
    text-align: center;
    line-height: normal;
    font-size: 14px;
    font-weight: bold;
    color: white;
    margin-top: 0.5em;
}

.dsCouponCode.big .message {
    font-size: 16px;
}

.dsCouponCode .icon {
    display: inline-block;
    background-color: #ccc;
    width: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 30px;
    color: black;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.8);
    margin-left: 0.5em;
}

.dsCouponCode.big .icon {
    background-color: white;
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 38px;
}

.dsCouponCode .icon:hover {
    background-color: black;
    border: 1px solid transparent;
    color: white;
}

.dsCouponCode.big .icon:hover {
    background-color: transparent;
    color: white;
}

.dsCouponCode .message.error {
    color: #6f2b15;
}

.dsCouponCode .codeApplied .code {
    font-size: 18px;
    display: inline-block;
    margin-top: 0.8em;
}

.dsCouponCode.big .codeApplied .code {
    font-size: 24px;
}


.dsCouponCode .codeApplied .description {
    margin-top: 1em;
    font-size: 14px;
}

.OffersUserPage table td {
    line-height: normal;
    padding: 24px 12px;
}

.OffersUserPage #subscribe a span {
    display: inline;
    font-size: inherit;
}

.OffersUserPage #subscribe .discounted .fullPrice {
    text-decoration: line-through;
    font-size: 20px;
}

.OffersUserPage #subscribe .discounted .discountedPrice {
    margin-top: 0.4em;
}

.OffersUserPage #subscribe td {
    padding: 24px 0;
}

.OffersUserPage #subscribe h3 {
    margin: 0;
}

.OffersUserPage #subscribe h3 span {
    font-size: 24px;
}

.OffersUserPage #subscribe .actions td {
    padding: 0;
}

.OffersUserPage #subscribe .actions td a {
    bottom: initial;
    margin: 0;
    top: -19px;
}

.OffersUserPage .dsCouponCode {
    margin: 20px 0 0;
    padding-bottom: 40px;
}

md-checkbox {
    padding: 0.2em 1em;
}
md-checkbox:hover {
    background-color: #eee;
    border-radius: 0.5em;
}

.ds-close-button {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.4s;
    color: white;
}

.ds-close-button:hover {
    background-color: white;
    color: #27aae1;
}

.ds-round-label {
    background-color: #ddd;
    color: #555;
    padding: 0;
    border-radius: 12px;
    font-size: 12px;
    text-align: center;
    width: 24px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
}

.Listing--Wrapper {
    position: relative;
}

.Listing--Wrapper:hover .toggle-icon .icon,
.Listing--Wrapper:hover .actions .action {
    display: inline-block;
}

.Listing--Item .actions {
    position: absolute;
    text-align: center;
    width: 30px;
    top: 12px;
    right: 12px;
    transition: all 0.5s;
}

.Listing--Item .actions .toggle-icon,
.Listing--Item .actions .action {
    display: block;
    margin: 2px auto;
}

.Listing--Item .actions .action {
    color: #9da2a9;
    display: none;
}

.Listing--Item .toggle-icon.compare .icon {
    font-size: 23px;
}

.Listing--Item .toggle-icon .icon {
    display: none;
    position: relative;
    font-size: 22px;
    color: #c2c5ca;
}

.Listing--Item .toggle-icon.selected .icon,
.Listing--Item .toggle-icon:hover .icon {
    display: inline-block;
    color: #27aae1;
}

.Listing--Item .toggle-icon.selected:hover .icon {
    color: #c2c5ca;
}

.dsOilFilter .Popup--Header .ds-close-button {
    position: absolute;
    right: 20px;
    top: 20px;
}

.dsOilFilter .Popup--Header .Button.Clear {
    position: relative;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    top: 10px;
    transition: background-color 0.3s, color 0.4s;
    padding: 5px 10px;
}

.dsOilFilter .Popup--Header .Button.Clear:hover {
    background-color: white;
    color: #27aae1;
    text-decoration: none;
}

.dsOilFilter .md-label .icon {
    font-family: 'FontAwesome';
    margin-left: 1em;
    color: #27aae1;
}

.dsOilFilter .md-label .icon.company:before {
    content: '\f1fb';
}

.dsOilFilter .dsChemicalComponentFilter {
    padding-bottom: 2em;
}

.dsOilFilter .dsChemicalComponentFilter .Selected {
    margin-bottom: 1em;
}

.dsOilFilter .dsChemicalComponentFilter .Selected li {
    margin: 0 -25px 0 -6px;
    padding: 1em 5em 1em 0;
    position: relative;
    border-top: 1px solid #ddd;
    border-bottom: 0 none;
    cursor: pointer;
}

.dsOilFilter .dsChemicalComponentFilter .Selected li:hover {
    background-color: #fafafa;
}

.dsOilFilter .dsChemicalComponentFilter .Selected li .percentage {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translate(0, -50%);
    color: black;
    font-size: 10px;
}

.dsOilFilter .dsChemicalComponentFilter .Selected li .remove {
    position: absolute;
    color: black;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dsOilFilter .dsChemicalComponentFilter .Selected li .remove:hover {
    background-color: #bbb;
}

.dsOilFilter .dsChemicalComponentFilter .selectionForm {
    border: 1px solid #bbb;
    border-radius: 0.4em;
    padding: 2em 1.5em 1.5em;
    margin: 0 -25px 2em -6px;
}

.dsOilFilter .dsChemicalComponentFilter .selectedElement {
    position: relative;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 0.4em;
}

.dsOilFilter .dsChemicalComponentFilter .slider-label {
    margin-top: 2em;
}

.dsOilFilter .dsChemicalComponentFilter .rzslider {
    margin: 15px 0;
}

.dsOilFilter .dsChemicalComponentFilter .actions {
    text-align: right;
    margin-top: 1em;
}

.dsOilFilter .dsChemicalComponentFilter .actions button {
    float: none;
    margin-left: 0.5em;
}

.dsOilFilter .dsChemicalComponentFilter .selectedElement.family .colorCircle {
    border: 1px solid transparent;
}

.dsOilFilter .dsChemicalComponentFilter .selectedElement.component .colorCircle {
    border: 1px solid #aaa;
}

.dsOilFilter .dsChemicalComponentFilter .selectedElement i {
    position: absolute;
    cursor: pointer;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    right: 5px;
    top: 5px;
    text-align: center;
    transition: background-color 0.3s;
    vertical-align: middle;
}

.dsOilFilter .dsChemicalComponentFilter .selectedElement i:hover {
    background-color: #bbb;
}

.dsOilFilter .dsChemicalComponentFilter .searchField {
    position: relative;
    display: inline-block;
    margin-left: 14px;
}

.dsOilFilter .dsChemicalComponentFilter .searchField i {
    cursor: pointer;
    position: absolute;
    font-size: 20px;
    right: 12px;
    top: 4px;
    color: #7e8590;
}

.dsOilFilter .dsChemicalComponentFilter input {
    color: rgba(0, 15, 36, 0.5);
    font-size: 12px;
    width: 100%;
    margin-bottom: 1em;
    border-radius: 30px;
    padding: 6px 40px 6px 18px;
    text-transform: uppercase;
    border: 1px solid #666;
    box-sizing: border-box;
}

.dsOilFilter .dsChemicalComponentFilter input:focus {
    border-color: #27AAE1;
}

.dsOilFilter .dsChemicalComponentFilter .colorCircle {
    position: relative;
    top: 1px;
    box-sizing: border-box;
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 22px;
    margin: 0 4px;
    transform: rotate(45deg);
    overflow: hidden;
}

.dsOilFilter .dsChemicalComponentFilter .colorCircle .other {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    bottom: 0;
}

.dsOilFilter .dsChemicalComponentFilter .chemicalFamily .colorCircle {
    border: 1px solid transparent;
}

.dsOilFilter .dsChemicalComponentFilter .open {
    color: #999;
    padding: 6px 8px;
    border-radius: 200px;
    transition: background-color 0.3s;
}

.dsOilFilter .dsChemicalComponentFilter .open:hover {
    color: #666;
    background-color: #bbb;
}

.dsOilFilter .dsChemicalComponentFilter .open:before {
    content: "\f067";
}

.dsOilFilter .dsChemicalComponentFilter .open.isOpen:before {
    content: "\f068";
}

.dsOilFilter .dsChemicalComponentFilter .open.isEmpty {
    color: transparent;
}

.dsOilFilter .dsChemicalComponentFilter .open.isEmpty:hover {
    background-color: unset;
}

.dsOilFilter .dsChemicalComponentFilter ul {
    margin: 0;
    padding: 0;
}

.dsOilFilter .dsChemicalComponentFilter ul li {
    margin: 0;
    padding: 0;
}

.dsOilFilter .dsChemicalComponentFilter .name {
    cursor: pointer;
    padding: 2px 6px;
}

.dsOilFilter .dsChemicalComponentFilter .name:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.dsOilFilter .dsChemicalComponentFilter .chemicalFamily .name {
    padding-left: 26px;
}

.dsOilFilter .dsChemicalComponentFilter .chemicalComponent .name {
    padding: 8px 8px 8px 54px;
}

.dsOilFilter .dsChemicalComponentFilter .chemicalComponent .colorCircle {
    border: 1px solid #aaa;
}

.md-autocomplete-suggestions-container li .highlight {
    color: rgba(255, 64, 129, 0.87);
}

.md-autocomplete-suggestions-container li .synonym {
    color: #999;
    font-style: italic;
}

.dsOilFilter dl dt {
    position: relative;
    line-height: normal;
    padding: 18px 92px 18px 35px;
}

.dsOilFilter dl dt i {
    right: 24px;
}

.dsOilFilter dl dt .ds-round-label {
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translate(0, -50%);
}

.Button-Submit .ds-round-label {
    margin-left: 0.8em;
    line-height: 16px;
    height: 16px;
}

.SideList {
    position: fixed;
    left: -96px;
    width: 80px;
    border: 1px solid #c2c5ca;
    padding: 10px 46px 10px 12px;
    transition: all 0.4s;
    cursor: pointer;
    border-radius: 0 20px 20px 0;
    font-size: 16px;
    background-color: white;
    color: #c2c5ca;
    text-align: right;
    text-transform: uppercase;
}

.SideList:hover {
    left: -1px;
    color: #27aae1;
    border-color: #27aae1;
}

.SideList .icon {
    font-size: 1.4em;
    position: absolute;
    right: 14px;
    top: 9px;
}

.SideList .count {
    display: block;
    position: absolute;
    background-color: #27aae1;
    color: white;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    border-radius: 8px;
    text-align: center;
    vertical-align: middle;
    right: -3px;
    bottom: -3px;
    border: 1px solid white;
}

.BlenderList {
    bottom: 42px;
}

.CompareList {
    bottom: 90px;
}

.Modal .Button {
    font-family: "ProximaNova", sans-serif;
    line-height: 24px;
    min-height: unset;
    border: 1px solid #c2c5ca;
    color: #c2c5ca;
    margin: 0 0.6em;
}

.Modal .Button .icon {
    margin-left: 0.3em;
    font-size: 1.5em;
    vertical-align: middle;
}

.Modal .Button.Button--Submit {
    background-color: #F6CF15;
    color: white;
    font-weight: bold;
    border: 0 none;
    font-size: 14px;
}

.Modal.ComparisonList li {
    position: relative;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0,15,36,0.6);
}

.Modal.ComparisonList li .company {
    font-weight: normal;
    color: #999;
}

.Modal.ComparisonList li button {
    position: absolute;
    top: 8px;
    right: 24px;
    color: black;
}

.Modal.ComparisonList .md-toolbar-tools {
    display: block;
}

.Modal.ComparisonList .md-toolbar-tools .note {
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.8s;
}

.Modal.ComparisonList .md-toolbar-tools .note.show {
    opacity: 1;
}

.Modal.ComparisonList .md-toolbar-tools .Button--close {
    position: absolute;
    top: 16px;
    right: 24px;
}

.Modal.BlendOils .Button--close {
    margin: 0;
    position: absolute;
    top: 16px;
    right: 16px;
    min-width: unset;
    width: 40px;
    height: 40px;
}

.Modal.BlendOils {
   min-width: 750px;
}
.Modal.EditBlendModal label .error:before {
    content: '(';
    margin-left: 0.5em;
}
.Modal.EditBlendModal label .error:after {
    content: ')';
}
.Modal.EditBlendModal .blend-data {
    border-bottom: 1px solid rgba(0,15,36,0.12);
}
.Modal.EditBlendModal .oil .chemotype {
    font-weight: normal;
}
.Modal.EditBlendModal .oil .company {
    font-weight: normal;
    color: #999;
}
.Modal.EditBlendModal .numeric-input {
    position: relative;
    top: 3px;
}
.Modal.EditBlendModal .Item-value-button {
    background-color: #f6f6f6;
    color: #9ea1aa;
    border: 1px solid #e7e8ea;
    float: left;
    width: 26px;
    box-sizing: border-box;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.Modal.EditBlendModal .Item-value-button.left {
    border-radius: 5px 0 0 5px;
    border-right: 0 none;
}
.Modal.EditBlendModal .Item-value-button.right {
    margin-right: 0.5em;
    border-left: 0 none;
    border-radius: 0 5px 5px 0;
}
.Modal.EditBlendModal .Item-value-button:hover {
    background-color: #e4e4e4;
}
.Modal.EditBlendModal .Item-value {
    margin-top: 5px;
    min-width: 110px;
}
.Modal.EditBlendModal .Item-value input {
    float: left;
    width: 34px;
    line-height: 32px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e7e8ea;
    color: #66707c;
    border-left: none;
    border-right: none;
    text-align: center;
    font-weight: bold;
}
.Modal.EditBlendModal .actions {
    text-align: center;
    margin-top: 1.4em;
    padding-bottom: 2em;
}
.Modal.EditBlendModal .actions .add-oil {
    width: 38px;
    line-height: 38px;
    display: inline-block;
    border-radius: 38px;
    border: 2px solid #9da2a9;
    color: #9da2a9;
    font-size: 1.2em;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
}
.Modal.EditBlendModal .actions .add-oil:hover {
    border-color: #27aae1;
    color: #27aae1;
}
.Modal.EditBlendModal .actions .add-oil i {
    vertical-align: middle;
}

.select-oil-modal-dropdown-container.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    height: 400px !important;
    max-height: 400px !important;
}
.select-oil-modal-dropdown-container .select-oil-modal-dropdown li {
    height: auto;
    line-height: normal;
}
.select-oil-modal-dropdown-container .message {
    padding: 22px 16px;
    text-align: center;
}
.Modal.SelectOilModal {
    min-width: 550px;
    padding-top: 2em;
}
.Modal.SelectOilModal .Button--close {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 26px;
    height: 26px;
    line-height: 26px;
    cursor: pointer;
    border-radius: 26px;
    text-align: center;
    border: 1px solid #9da2a9;
    color: #9da2a9;
}
.Modal.SelectOilModal .Button--close i {
    vertical-align: middle;
    position: relative;
    top: -2px;
}
.Modal.SelectOilModal .oil-list {
    min-height: 450px;
    background-color: white;
}
.Modal.SelectOilModal .oil-list .oil h3 {
    color: rgba(0,15,36,0.6);
    font-weight: bold;
}

.Modal.SelectOilModal .oil-list .oil .md-button {
    padding: 0 4px;
}

.Modal.SelectOilModal .oil-list .oil .chemotype {
    font-weight: normal;
}
.Modal.SelectOilModal .oil-list .oil .company {
    color: #999;
    font-weight: normal;
}

.Modal.PaymentModal {
    min-width: 500px;
}

.Modal.PaymentModal .close-button {
    position: absolute;
    top: 1em;
    right: 1.5em;
}

.Modal.PaymentModal .StripeElement {
    box-sizing: border-box;

    height: 40px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.Modal.PaymentModal .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.Modal.PaymentModal .StripeElement--invalid {
    border-color: #fa755a;
}

.Modal.PaymentModal .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.Modal.PaymentModal md-dialog-content {
    padding: 30px;
    font-size: 16px;
}

.Modal.PaymentModal .payment {
    padding: 1em;
    text-align: center;
}

.Modal.PaymentModal select {
    display: block;
}

.Modal.PaymentModal .form-row {
    margin-top: 1em;
}

.Modal.PaymentModal label {
    padding-bottom: 0.5em;
    font-size: 12px;
}

.Modal.PaymentModal .form-row.credit-card {
    margin: 1em 0;
}

.Modal.PaymentModal #stripe-card-errors {
    color: #fa755a;
    margin-top: 0.5em;
    font-size: 14px;
}

.Modal.PaymentModal .payment form {
    text-align: left;
}

.Modal.PaymentModal .errors p {
    color: #fa755a;
    margin-bottom: 0.7em;
}

.Modal.PaymentModal .payment .actions {
    text-align: center;
}

.Modal.PaymentModal .payment button {
    margin-top: 2em;
}

.Modal.PaymentModal .finished {
    text-align: center;
    margin-top: 2em;
}

.Modal.PaymentModal .finished i {
    font-size: 40px;
    color: #23B96F;
    margin-bottom: 0.8em;
}

.Modal.PaymentModal .finished p {
    margin-top: 0.4em;
}

.Modal.PaymentModal .verification {
    margin-top: 2em;
    color: #444;
}

.Modal.PaymentModal .powered-by-stripe {
    margin-top: 6em;
    max-width: 100px;
}

.Modal.ModalMessage .message {
    text-align: center;
    padding: 3em 0;
    font-size: 16px;
}

.OilList .FilterBar .button-filter {
    margin-right: 1em;
}

.OilList .trial {
    width: 100%;
    margin: -20px auto 60px;
}

.icon-tabs {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.icon-tabs .icon {
    position: relative;
    letter-spacing: normal;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border: 5px solid #c2c5ca;
    color: #c2c5ca;
    border-radius: 60px;
    cursor: pointer;
    font-size: 28px;
    display: inline-block;
    margin: 8px;
}

.icon-tabs .icon.isActive {
    border-color: #27AAE1;
    color: #27AAE1;
}

.icon-tabs .icon .ds-icon {
    position: relative;
    left: 0.03em;
}

.icon-tabs .icon.isActive .overly i.ds-icon-heart-outline {
    color: white;
}

.icon-tabs .icon.favorite {
    position: relative;
}

.icon-tabs .icon.isActive .overly {
    color: #27AAE1;
}

.icon-tabs .icon .overly {
    color: #aaadb2;
    position: absolute;
    font-size: 26px;
    right: 16px;
    top: 0;
}

.icon-tabs .icon .overly i {
    position: absolute;
}

.icon-tabs .icon .overly i.ds-icon-heart-outline {
    color: white;
    font-size: 28px;
    z-index: 1;
    top: -1px;
    left: -1px;
}

.icon-tabs .icon .count {
    display: block;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    bottom: -6px;
    right: -6px;
    line-height: 24px;
    width: 24px;
    height: 24px;
    border-radius: 20px;
    border: 1px solid #c2c5ca;
    background-color: white;
    color: #c2c5ca;
}

.icon-tabs .icon.isActive .count {
    border-color: #27AAE1;
    color: #27AAE1;
}

.icon-tabs .icon.isActive .count.filtered {
    border-color: #ff4081;
    color: #ff4081;
}

.UserDashboard .icon-tabs {
    margin-top: 30px;
}

.FilterBar {
    border-radius: 100px;
    position: relative;
    text-align: left;
    padding: 0 35px 0 12px;
}

.dsComparisonPreview .overlay {
    background: #fff url(/images/drop_blue.svg) no-repeat 50% 50%;
    background-size: 35%;
    width: 140px;
    height: 140px;
    border-radius: 200px;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dsComparisonPreview .oilList {
    margin-top: 0.5em;
    color: #67707c;
    font-size: 12px;
}

.dsComparisonPreview .oilList .seller {
    display: inline-block;
    color: #97a5ac;
    font-size: inherit;
    line-height: normal;
    margin: 0;
    font-family: "ProximaNova", sans-serif;
}

.dsComparisonPreview .oilList span:before {
    content: ' - ';
}

#CompareOilsPage #titlesFixedScroll {
    opacity: 0;
    text-align: center;
    background-color: white;
    z-index: 10;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    border-top: 1px solid #f6f6f6;
    transition: box-shadow 0.2s, opacity 0.2s;
}

#CompareOilsPage #titlesFixedScroll.visible {
    opacity: 1;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
}

#CompareOilsPage #titlesFixedScroll .Sizer {
    max-width: 1170px;
}

#CompareOilsPage #titlesFixedScroll .hide-after {
    margin: 0;
}

#CompareOilsPage #titlesFixedScroll .Sizer .pure-u-6-24 {
    box-sizing: border-box;
    border-right: 1px solid #f6f6f6;
    padding: 12px 20px;
}

#CompareOilsPage #titlesFixedScroll .Sizer .pure-u-6-24:last-child {
    border-right: 0 none;
}

#CompareOilsPage .editName {
    margin-bottom: 1.5em;
}

#CompareOilsPage .editName input {
    width: 300px;
    font-size: 16px;
}

#CompareOilsPage .editName .name {
    font-size: 22px;
}

#CompareOilsPage .editName .editButton {
    text-align: center;
    display: inline-block;
    margin-left: 0.5em;
    cursor: pointer;
    background-color: #9da2a9;
    color: white;
    border-radius: 15px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 16px;
}

#CompareOilsPage .editName .editButton .ds-icon {
    vertical-align: middle;
}

#CompareOilsPage .editName .errorMessage {
    font-size: 14px;
    margin-top: 0.5em;
    color: darkred;
}

#CompareOilsPage .responseMessage {
    opacity: 0;
    font-size: 14px;
    margin-top: 0.5em;
    color: #23b96f;
    transition: opacity 1s;
}

#CompareOilsPage .responseMessage:after {
    content: ' ';
}

#CompareOilsPage .responseMessage.visible {
    opacity: 1;
}

#CompareOilsPage .Listing--Item {
    position: relative;
}

#CompareOilsPage .Listing--Item .removeOil {
    position: absolute;
    right: 0.7em;
    top: 0.7em;
    cursor: pointer;
    font-size: 22px;
    color: #e4e4e4;
}

#CompareOilsPage .Listing--Item:hover .removeOil {
    color: #9da2a9;
}

ds-search-field .SearchFilter {
    position: relative;
    display: inline-block;
}

ds-search-field .SearchFilter input {
    border-radius: 30px;
    padding: 6px 40px 6px 18px;
    width: 90px;
    transition: 0.5s width;
    text-transform: uppercase;
}

ds-search-field .SearchFilter input:focus {
    width: 260px;
}

ds-search-field .SearchFilter .ClearButton {
    position: absolute;
    cursor: pointer;
    right: 16px;
    top: 1px;
    font-size: 20px;
}

ds-user-stats .Stats li.userCount strong:after {
    border-color: #ffde00;
}

ds-user-stats .Stats li.oilCount strong:after {
    border-color: #bed730;
}

ds-user-stats .Stats li.researchCount strong:after {
    border-color: #27aae1;
}

ds-seller-stats .Stats li.oilPageViews strong:after {
    border-color: #ffde00;
}

ds-seller-stats .Stats li.blendsWithSellerOils strong:after {
    border-color: #bed730;
}

ds-seller-stats .Stats li.oilLikes strong:after {
    border-color: #27aae1;
}