@font-face{ font-family: HelveticaNeueXBlk; src: url('../misc/HelveticaNeueLTStd-XBlkCn.otf'); }
@font-face{ font-family: HelveticaNeue66Con; src: url('../misc/HelveticaNeueLTStd-MdCn.otf'); }
@font-face{ font-family: HelveticaNeue66ConO; src: url('../misc/HelveticaNeueLTStd-MdCnO.otf'); }
@font-face{ font-family: HelveticaNeueThinCon; src: url('../misc/HelveticaNeueLTStd-ThCn.otf'); }
@font-face{ font-family: HelveticaNeueLightCon; src: url('../misc/HelveticaNeueLTStd-LtCn.otf'); }
@font-face{ font-family: jah; src: url('../misc/JustAnotherHand-Regular.ttf'); }


/**************************** HTML ****/

* {
  margin: 0;
  padding: 0;
}


html,body {
  height: 100%;
  width: 100%;
  background-color:rgb(255, 254, 249);
  overflow: hidden;
box-sizing: border-box;
  -webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
  /* background-color: tomato; */
}

body {font-family: HelveticaNeue66Con, Helvetica, Arial, sans-serif; color: #3c3c3c; margin: 0; flex-direction: row; align-items: center; justify-content: center; 
  touch-action: none; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; 
 }

 body{top: 0px;     
  touch-action: manipulation;}

br {display: block; margin: 0px; content: " "; }

a{text-decoration: none;}


li {list-style: none; margin: 0; overflow: hidden; cursor: pointer;}
li.show {margin: 10px 0 0 0; border-top: #3c3c3c solid 1px; padding: 4px 0;}
li img {width: 45px; float: left; margin-right: 5px; border-radius: 50%; border: #777 solid 1px; }

#productUL li.show {
  margin: 0px 0 0 0;
  border-top: #3c3c3c solid 1px;
  padding: 8px 5px 10px 5px;
  transition: height 0.3s ease-in-out, border .1s ease-out, background-color 0.3s ease-in-out;
}
#brushUL li {
  margin: 10px 0 0 0;
  padding: 4px 0 0 4px;
  box-sizing: border-box;
  height: 56px;
}

ul {padding: 0;}

p {margin: 4px 0;}

.osxButtonPaddingTop{
    -webkit-padding-before: 9px !important;
}

[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}


/**************************** ID ****/


#artBoard {width: 650px; margin: auto; position: fixed; left: 70px; right: 0; touch-action: none; top: 0px; cursor: none; }
#artBoardLoupe {width: 650px; margin: auto; position: fixed; left: 70px; right: 0; touch-action: none; top: 0px; cursor: none; z-index: 146; }
#artBoardBrushTip {width: 650px; margin: auto; position: fixed; left: 70px; right: 0; touch-action: none; top: 0px; cursor: none; z-index: 147; mix-blend-mode: multiply; }
/* #paper{width: 100%; height: 100%; background-image: url('../img/site/paper2.png'); position: fixed; mix-blend-mode: multiply; pointer-events: none; top: 0; z-index: 999;} */
#paper{ width: 100%; pointer-events: none; top: 0; z-index: 148; overflow: hidden; position: absolute; mix-blend-mode: normal;}
#paper img{display: block; mix-blend-mode: normal; opacity: 0.2;}

#notes {width: 650px; margin: auto; position: fixed; left: 70px; right: 0; top: 0px;  }
.noteContainer{font-family: jah;width: 150px;position: absolute;}
.noteHeader{width: 100%;height: 15px;cursor: move;background-color: #3c3c3c;}
.noteContent{padding: 5px;font-size: 28px;line-height: 24px;opacity: 0.8; color: #444; text-align: center; display: block;}
.noteContent br{margin: 3px;}
.noteContent:focus{outline:none;}
.noteCloseButton{width: 15px;height: 15px;cursor: move;float: right; cursor: pointer; background-image: url("../img/site/close_x_white.png");
  background-size: 12px 12px; background-position: center;}
.noteCloseButton:hover{background-color: #ff0080;}

.noteArrow{position: absolute;}
.brushULContainer{ scrollbar-color: #eee #ffffff00; padding-right: 15px; overflow-y: scroll; max-height: 300px; width: 340px; overflow-x: hidden;}
#brushUL{ display: grid;  grid-template-columns: 160px 160px; column-gap: 13px; margin-top: 0;}
#brushUL .brushName{font-size: 11px; margin: 0; pointer-events: none;}
#brushUL .brushType{font-size: 10px; margin: 2px 0; opacity: 0.7; pointer-events: none;}
#brushUL img{pointer-events: none;}
#brushUL li.show:hover{background-color: #aaaaaa22; transition: background-color 0.1s ease-in-out;
}
#brushUL li.show.active{
	background-color: #3c3c3322;
	border-top: 5px solid;
  padding: 4px 0 0 4px;
  transition: border .1s ease-out;
}
.prodULContainer{ scrollbar-color: #ddd #ffffff00; padding-right: 15px; overflow-y: scroll; height: 460px; width: 375px; }
#productUL {width: 365px;}
#productUL .productName{font-size: 16px; margin: 0; pointer-events: none; }
#productUL .productType{font-size: 13px; margin: 0 0; opacity: 0.7; pointer-events: none; }
/* overflow: hidden; white-space: nowrap; */
#productUL li.show:hover {
  background-color: #aaaaaa22; transition: background-color 0.1s ease-in-out;
}
#productUL li.show.active{
  background-color: #3c3c3322;
  transition: height 0.3s ease-in-out, border .1s ease-out,background-color 0.1s ease-in-out;
}

#brushControlsHeader, #chartSelectionHeader {width: 100%; height: 20px; left: 0px; background-color: #3c3c3c; cursor: move; }
#chartSelectionHolder {margin: 20px 10px;display: grid;grid-template-columns: auto auto auto auto;overflow-y: scroll; height:360px; row-gap: 7px; position: relative;}
 
#chartSelection{position: fixed; background-color: white; z-index: 150; width: 450px; height: 460px; font-size: 20px; top:100px; left: 30px; display: none; 
  -webkit-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); box-shadow: 8px 10px 0px rgba(0,0,50,0.2); -moz-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); }
#chartSelection img{cursor:pointer; width: 100px; border: 2px solid lightgray; box-sizing: border-box; box-shadow: 0px 0px 0px lightgray; scale: 0.9; transition: box-shadow 0.3s ease-in-out, scale 0.3s ease-in-out;}
#chartSelection .blackLink{float: right; margin-right: 10px;}
#chartSelection .tealButton{float: right; margin: 6px 15px 0 0;}
#chartSelection .subHead{font-size: 15px; color: #777; margin-top: 0px;} 
#chartSelection p{margin-left: 10px; margin-bottom: 0px;}
#chartSelection .selected{border: 4px solid #30cfd0; box-sizing: border-box; box-shadow: 0px 0px 4px lightgray; scale: 1;}
#chartSelection .chartSelectionItem{position: relative; text-align: center;}
#chartSelection .fcID{font-size: 14px;}
#chartSelection .selectionContinue{position: absolute;
  right: 18px;
  top: 13px;
}

#brushControls{position: fixed; background-color: white; z-index: 299; width: 290px; height: 200px; font-size: 12px; bottom: 40px; left: 1040px; 
    -webkit-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); box-shadow: 8px 10px 0px rgba(0,0,50,0.2); -moz-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); }
#brushControls .slider {width: 120px; height: 15px; vertical-align: middle;}
#toolBarHeader {width: 20px; height: 100%; position: absolute; left: 0px; background-color: #3c3c3c; cursor: move; }

#toolBar {width: 555px; position: fixed; left: 435px; top: 20px; touch-action: none; background-color: rgb(255, 255, 255); height: 40px; z-index: 298; 
  -moz-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); -webkit-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); box-shadow: 8px 10px 0px rgba(0,0,50,0.2); 
}

#blockDrawModal{position: absolute; background-color: rgba(0, 0, 0, 0.05); width: 100%; height: 100%; display: block; z-index: 98; visibility: visible;  }
#overlayModal{position: fixed; background-color: #202020; opacity: 70%; width: 100%; height: 100%; display: none; z-index: 399; touch-action: none;  }

#makeupModal, #brushModal, #saveShareModal, #shareModal{
  -webkit-overflow-scrolling: touch;
  -moz-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); -webkit-box-shadow: 8px 10px 0px rgba(0,0,50,0.2); box-shadow: 8px 10px 0px rgba(0,0,50,0.2); 
  width: 1275px; height: 94vh; overflow: hidden; margin: auto; position: fixed; left: 0; right: 0; background-color: #3c3c3c; display: none; z-index: 400; }


#saveShareModal, #shareModal{width: 800px; height: 550px; background-color: white;}
#stepOneSaveShare{width: 510px;}
#stepOneSaveShare input{width: 460px;}
#stepTwoSaveShare { width: 490px; margin: 20px 0 0 0;}

#stepThreeSaveShare {color:#fff; width: 100%; height: 100%; text-align: center; margin-top: 20px; padding-top: 5px;}
#stepThreeSaveShare {background: linear-gradient(45deg, #ee7752, #ff0080, #23a6d5, #30cfd0);background-size: 300% 300%;animation: gradient 40s ease-in-out infinite;}
#shareGrid {margin:10px; display: grid; grid-template-columns: auto auto auto auto auto auto; justify-content: center; column-gap: 7px;}
#sharePreventer{position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); text-align: center; padding-top: 60px; font-size: 25px; display: none;}
#shareHeader {position: absolute;}
  #stepThreeSaveShare .innerHeader{margin-top: 20px;}
  #stepThreeSaveShare a {
    color: #fff;
    font-size: 25px;
    padding: 2px 0;
    font-family: HelveticaNeue66Con;
  }
  #saveShareModal canvas{border: 1px solid #ddd; float: left; margin-left: 20px; }
  #shareGrid .shareGridItem{ border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer;   -webkit-transition: -webkit-transform .1s ease-out; transition:transform .1s ease-out; }
  .shareGridItem img{filter: drop-shadow(3px 4px 0px rgba(0,0,50,0.2)); width: 40px; }
 
  #shareGrid .shareGridItem:hover{
    -webkit-transform:  scale(1.2);
          transform:  scale(1.2);
         
    }

  /* #shareGrid .shareGridItem:active{
    -webkit-transform:  rotateX(180deg);
          transform:   rotateX(180deg); 
    } */

  #saveShareModal .modalHeader,#shareModal .modalHeader{margin-bottom: 25px; background-color: #bcbcbc;}
  #saveShareModal .blackButton {
    width: 473px;
    margin: 10px 20px 10px 20px;
    height: 44px;
    border-radius: 6px;
  }
    .saveStep {padding: 0px 20px; box-sizing: border-box; float: left; }
    .saveStep input{font-size: 24px;}
    
    .saveStep .blackButton{width: 260px;}
    .subHead{font-size: 15px; color: #777; margin-top: 0px;} 
    .saveHeader{font-size: 16px;}
    .saveLabel {font-size: 15px;font-family: HelveticaNeueLightCon ;}
    .catCountLabel {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 11px;
      margin: 0px 12px;
      color: #979797;
    }
    .saveValue {font-size: 15px;font-family: HelveticaNeue66ConO ;}
    .copyLink{width: 70px;display: inline-block;margin: 0 0 0 10px;}
    .saveStep .privateLinkInput{font-size: 12px; width: 355px;}
    

#chartInfo{display: grid; grid-template-columns: auto auto; margin: 0px 0px 15px 0; font-family: HelveticaNeueLightCon;}

#leftSideBar,  #rightSideBar{width: 375px; overflow: hidden; margin: auto; position: absolute; left: 30px; top: 80px; border: lightgray 1px; z-index: 99; }
#rightSideBar{right: 30px; left: unset; width: 340px;}

#blendBrushControls{display: none; margin-top: 10px; margin-left: 10px; }
#blendBrushControls div {margin-right: 7px; }
#blendBrushControls p {margin: 0px; }
#blendProfile{height: 80px; }
#blendProfileImgDiv{width: 70px; height: 70px; overflow: hidden; border-radius: 50%; float: left; border: #777 solid 1px; }
#blendProfileImgDiv img{width: 70px;}
#blendTipImgDiv{width: 70px; height: 70px; border-radius: 50%; float: left; overflow: hidden; border: #777 solid 1px; }
#blendTipDiv{width: 32px; height: 32px; border-radius: 50%; background-color: #3c3c33; position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);}
#blendCursorDiv{width: 32px; height: 32px; border-radius: 50%; border:1px solid #3c3c33; position: relative; display: none;left: 50%;top: 50%;transform: translate(-50%, -50%);}

#normalBrushControls{margin-top: 10px; margin-left: 10px; }
#brushControls .brushType{font-size: 13px; margin: 2px 0; opacity: 0.7;}
#brushControls .brushName{font-size: 15px; padding: 10px 0 0 0; }
#brushControls .rangeLabel{width: 52px; display: inline-block ;}

#normalBrushControls div {margin-right: 7px; }
#normalBrushControls p {margin: 0px; }
#brushProfile{height: 80px; }
#brushProfileImgDiv{width: 70px; height: 70px; overflow: hidden; border-radius: 50%; float: left; border: #777 solid 1px; }
#brushProfileImgDiv img{width: 70px;}
#brushTipImgDiv
{
  -webkit-transition: background-color 100ms linear;-ms-transition: background-color 100ms linear;transition: background-color 100ms linear; /* box-sizing: border-box; */
  background-size: 10px 10px; background-position: 0 0, 0 15px, 15px -15px, -15px 0px; width: 70px; height: 70px; border-radius: 50%; border: 1px black; float: left; overflow: hidden; 
}
#brushTipImgDiv img {display: none;object-fit: none; width: 100%; filter: drop-shadow(-70px 0 0 white); transform-origin: -35px 35px; margin-left: 70px; -webkit-filter: drop-shadow(4px,4px,4px,rgb(0,0,0,1));}

.rangeContainerTop {
	padding-top: 7px;
}

#logo {position: absolute; left: 30px; top: 20px; cursor: pointer; z-index: 99;}
#ChartID {
	position: absolute;
	right: 30px;
	top: 20px;
	font-family: HelveticaNeueThinCon;
	font-size: 20px;
	color: #bbb;
}
#FacechartName {
	position: absolute;
	right: 30px;
	top: 43px;
	font-family: HelveticaNeueLightCon;
	font-size: 20px;
	color: #777;
	font-size: 16px;
}

#log{display: inline; }

#controls {
	margin-right: 11px;
	height: 37px;
	text-align: right;
  padding-top: 3px;
  background-color: white;
  touch-action: manipulation;
}
#controls div{touch-action: manipulation;}

#MakeupBrandsSelectContent, #MakeupCategorySelectContent{float: left; margin: auto;}
#BrushBrandsSelectContent{padding: 12px 0 0 12px; display: inline-block;}
#MakeupColorSelected{width: 41px; height: 41px; background-color: #ff0080; display: inline-block;}

#BrowseMakeupToolBar{display: none; grid-template-columns: 280px 280px 280px 190px 245px; }
#BrushBrandModalToolBar{display: none;}

#BrushToolTip{width:170px; background-color: white; border-radius: 15px; text-align: center; position: absolute; padding: 15px; z-index: 300; visibility: hidden; border: #ccc 1px solid; box-shadow: 6px 8px 0px rgba(0,0,50,0.4); transition: background-color 0.1s ease-in-out;}
#BrushToolTip img{border-radius: 50%; border: 1px solid #3c3c3c;}

#ToolTip{ position: absolute; width: 150px; height: 50px;padding: 5px; z-index: 300; overflow: hidden; visibility: hidden; border: #666 1px solid; box-shadow: 6px 8px 0px rgba(0,0,50,0.3); /*transition: all 0.3s ease-out,opacity 100ms ease-out;*/}
/* Tooltip arrow */
#ToolTip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: #666 transparent transparent transparent;}

#ColorPickerCanvas{width: 205px; height: 41px; float: left;}
#colorPickerContainer {width: 246px;height: 41px;border: 1px dashed #3F3F3F;margin: auto;border-radius: 9px;overflow: hidden;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
#colorPickerCursor{width: 10px; height: 10px; border-radius: 50%; border:2px solid #3c3c3c; position: absolute; pointer-events: none; display: none;}


#noResultsContainer{ width: 100%; display: none; text-align: center; padding: 40px 0; font-size: 22px; color: white;}
#loadingContainer{ width: 100%; height: 100%;  display: none; text-align: center; padding: 40px 0;position: absolute;background-color: #3c3c3c;z-index: 11;top: 109px;}
#loadingContainerBrushes{ width: 100%; height: 100%;  display: none; text-align: center; padding: 40px 0;position: absolute;background-color: #3c3c3c;z-index: 11;top: 109px;}
#fcLoadingContainer{ top: 200px; width: 100%; height: 100%;  display: none; text-align: center; padding: 40px 0; position: absolute; pointer-events: none; touch-action: none;}
/* #stepOneSaveShare{float: left;}
#stepTwoSaveShare{} */

/* #footer{background-color: #3c3c3c; height: 400px;} */

#brushTipImgDivMask{ 
   width: 70px;
  height: 70px;
  overflow: hidden;
  background-color: #fff;
  -webkit-mask-image: url('../img/brush-tips/6/6_188.png');
  mask-image: url(../img/brush-tips/6/6_188.png);
  transform-origin: center center;
  mask-position: center;
  -webkit-mask-position: center;
}


#thankYouIMG{
  opacity: 0.7;
  width: 50px;
}
/*************** FOOTER LINK***********************************/

.hidethemail:before {
  /* color: #30cfd0; */
  content: attr(data-namepre) "@" attr(data-domain) "." attr(data-tld); 
}
.mailDiv{font-size: 14px; margin: 5px 0;font-weight: bold;font-style: oblique;}
#linkFooterCreate{position: absolute; text-align: right; bottom: 10px; right: 20px; font-size: 9px;letter-spacing: 0.9px; font-family: HelveticaNeueLightCon, Helvetica; z-index:250;}
#linkFooterCreate a{color: #3c3c3c; text-decoration: underline;}



/**************************** CLASSES ****/


.helveticaPlain{font-family: Helvetica, Arial, sans-serif;}
.description {
	font-size: 13px;
	color: #878787;
	font-family: HelveticaNeueLightCon;
	letter-spacing: 0.5px;
	line-height: 19px;
}
.productHeader{font-size: 18px; color: white;}

.helveticaThin{font-family: HelveticaNeueThinCon; font-size: 20px; }
.sideBarHeader{font-family: HelveticaNeueThinCon; font-size: 15px; letter-spacing: 1px; display: inline-block; }

p.helveticaThin {margin: 10px 0;}

.blackButton,.tealButton{font-family: HelveticaNeueXBlk; font-size: 16px; font-style: oblique; background-color: #3c3c3c;
  height: 36px; border: none; color: white; margin: 14px 0 ; cursor: pointer; 
  -moz-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); -webkit-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); box-shadow: 6px 8px 0px rgba(0,0,50,0.2); transition: background-color .2s ease-in-out;}
  .tealButton{background-color: #30cfd0;}


.blackButtonLink, .grayButtonLink, .whiteButtonLink, .tealButtonLink, .tealWhiteButtonLink{
  cursor: pointer; display: block; border-radius: 4px; width: 120px; text-decoration: none; background: #3c3c3c;padding: 5px;text-align: center; line-height: 30px; margin: 15px 0;
    font-family: HelveticaNeueXBlk; letter-spacing: .6px; font-size: 13px; font-style: oblique; background-color: #3c3c3c; height: 30px; border: none; color: white;
    -moz-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); -webkit-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); box-shadow: 6px 8px 0px rgba(0,0,50,0.2);
    transition: background-color .2s ease-in-out;
}
.tealButtonLink{background-color: #30cfd0;  color: #3c3c3c; }
.tealWhiteButtonLink{background-color: #30cfd0;  color: #fff; font-size: 16px;  letter-spacing: unset; width:130px;}
.grayButtonLink{background-color: #777;}
.whiteButtonLink{background-color: #fff; color: #3c3c3c;}

.blackButtonLink:hover, .grayButtonLink:hover, .whiteButtonLink:hover{background-color: #30cfd0; transition: background-color .1s ease-in-out;}
.tealButtonLink:hover{background-color: #fff;  color: #3c3c3c;}
.tealWhiteButtonLink:hover{background-color: #3c3c3c;}


.blackLink{color:#3c3c3c; font-style: oblique; text-decoration: underline; cursor: pointer;}
.blackEditLink {color: #3c3c3c;font-style: oblique;float: right;margin: 4px 5px 0 0;text-decoration: underline;cursor: pointer; font-size: 14px;}
.blackCopyLink {color: #3c3c3c;font-style: oblique;text-decoration: underline;cursor: pointer;display: inline;font-size: 14px; margin: 0 0 0 10px;}
.whiteCopyLink {color: #fff;font-style: oblique;text-decoration: underline;cursor: pointer;display: inline;font-size: 14px; margin: 0 0 0 10px;}

.linkText {text-decoration: underline; cursor: pointer;  font-size: 15px; font-family: HelveticaNeueLightCon;}

.blackHRule{height: 4px; background-color: #3c3c3c; width: 100%; }

.tabcontentRight, .tabcontentLeft{overflow-y: auto; overflow-x: hidden; scrollbar-color: #3c3c3c #aaa; scrollbar-width: thin; height: 80vh; margin-top: 60px;}

.products-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); width: unset; grid-gap: 3px; margin: 10px;}
.products-grid-item{position: relative; font-family: Helvetica,Arial,sans-serif; font-size: 12px; overflow: hidden; height: 40px; width: 40px; line-height: 40px; text-align: center; border-radius: 50%; cursor: pointer; border: 1px solid #3c3c3c; box-shadow: 2px 4px 0px rgba(0,0,50,0.4); transition: scale 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;}
.products-grid-item:hover{scale: 1.3; transform:scale(1.3, 1.3); -webkit-transform:scale(1.3, 1.3); transition: scale 0.08s ease-in-out, -webkit-transform 0.08s ease-in-out, transform 0.08s ease-in-out; z-index: 1;}

.brush-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(51px, 1fr)); width: 455px; grid-gap: 0px; margin-top: 7px;}
.brush-grid-item {height: 50px; width: 50px; line-height: 45px; text-align: center; cursor: pointer; padding: 5px;  }
.brush-grid-item img {object-fit: contain; width: 100%; }
.brush-grid-img-container {border-radius: 50%;border: #777 solid 1px;overflow: hidden;height: 50px;width: 50px; box-shadow: 2px 4px 0px rgba(0,0,50,0.4); pointer-events: none;}
.brushSetImg{width: 130px;  margin-right: 10px; margin: 10px 10px;}
.pscText{float: left; font-size: 11px; padding: 0 0 4px 0;}
.makeupTypeImg{width: 170px; margin: 0px 0px; }
.noUseBrush{opacity: 0.5; box-shadow: unset;}

.brushBrowseGrid{display: grid; grid-template-columns: 200px 500px 510px; padding: 0px 0px; margin: 0 0 40px 0; border-top: #5f5f5f solid 1px;
  background-image: url("../img/site/small_blue_x.png"),url("../img/site/small_blue_x.png"); background-repeat: no-repeat; background-position: top left, top right;}

.makeupBrowseGrid{display: grid; grid-template-columns: 200px 430px 520px 134px; padding: 0px 0px; margin: 0 0 40px 0; border-top: #777 solid 1px;
  background-image: url("../img/site/small_blue_x.png"),url("../img/site/small_blue_x.png"); background-repeat: no-repeat; background-position: top left, top right;}
.makeupBrowseGridItem {margin: 10px 10px 0 0; font-size: 14px; text-align: left; padding: 0px 0 0 15px;}
.makeupBrowseGrid, .brushBrowseGrid {margin: 8px 10px 30px 10px;}
.makeupBrowseGrid img, .brushBrowseGrid img{
  -webkit-touch-callout: none; 
}


.imgHolder {
  background-color: white;
  border-radius: 7px;
  text-align: center;
  padding: 5px;
  overflow: hidden;
  width: 170px;
  position: relative;
}
.imgHolderBrush{width: 150px;}
.imgHolder img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
/* .imgHolder:hover img {
   transform: scale(1.5);
  transform-origin: 50% 50%; 
} */


.modalHeader{background-color: #AFAFAF; line-height: 44px; padding-left: 20px; color: #3c3c3c;}
.modalToolBarHeaderGradientDiv{ display: inline-block;}
.modalToolBarHeaderGradient{ font-size: 30px; padding: 12px;
  font-family: HelveticaNeueXBlk; font-style: italic;
  /* background: linear-gradient(45deg, #30cfd0, #ff0080, #30cfd0,#ff0080, #30cfd0);background-size: 300% 300%;animation: gradient 40s ease-in-out infinite; */
  background: linear-gradient(45deg,   #23a6d5,  #ff0080, #30cfd0,#a020f0,#ee7752);background-size: 300% 300%;animation: gradient 40s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;}

.tab {overflow: hidden; font-family: HelveticaNeueXBlk; font-size: 13px; font-style: oblique; margin-left: 230px; height: 44px;}
.tab .button {color: #3c3c33; background-color: inherit; border: none; outline: none; cursor: pointer; padding: 10px 16px; font-style: inherit; font-family: inherit; font-size: 17px; -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;}
.tab .button:hover { border-bottom: 4px solid #3c3c3c; }
.tab .button.active {border-bottom: 4px solid #3c3c3c; }

.tab button {color: #3c3c33; background-color: inherit; border: none; outline: none; cursor: pointer; padding: 10px 16px 6px 16px; font-style: inherit; font-family: inherit; font-size: 17px; -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;}
.tab button:hover { border-bottom: 4px solid #3c3c3c; }
.tab button.active {border-bottom: 4px solid #3c3c3c; }
.tabcontentLeft, .tabcontentRight {display: none; padding: 6px 0px; border: 1px solid #3c3c3c; border-top: none; } 

.start {display: block; } 

.toolBarBtn {height: 24px; display: inline-block; cursor: pointer; border-radius: 50%; background-repeat: no-repeat; background-position: center; padding: 4px; transition:all 0.2s ;
}
.toolBaricon{width: 24px; margin-right: 2px;	background-color: #3c3c3c;  background-size:24px 24px;}
.toolBarBtn.active {background-color: #30CFD0; 
    }

.toolBarText {height: 24px;  cursor: pointer; float: right; margin-top: 7px;}
.toolBarText:hover {color: #30CFD0; }
.toolBarText.active {color: #30CFD0; }

.toolBarVrule {
	width: 1px;
	background-color: #ddd;
	height: 31px;
	display: inline-block;
	margin: 0 6px;
}
/* .toolBaricon:hover {background-color: #3c3c3c; }
.toolBaricon.active {background-color:linear-gradient(to right, #30CFD0 0%, #330867 70%); } */

.inventorySwatch {position: relative; width: 50px;height: 50px;float: left;margin: 0 10px 0 0;border-radius: 50%;box-shadow: inset 0 0 7px rgba(0,0,50,0.7); pointer-events: none; overflow: hidden;}
.inventoryDeleteButton{width: 15px;display: none;height: 15px;float: right;margin: 0 0 0 0; cursor: pointer; background-image: url("../img/site/close_x_pink.png"); background-size: 15px 15px;}
.inventoryDeleteButton{width: 15px; border: none;  -webkit-transition: -webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;}
.inventoryDeleteButton:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.disclosure {
	width: 166px;
	text-align: right;
	float: right;
	font-size: 12px;
	padding: 10px 0px;
	color: #999;
}

.modalToolBar {height: 65px;background-color: #fff;width: 1275px;top: 44px; margin-left: 0px; box-shadow: 0px 6px 0px rgba(0,0,50,0.4); z-index: 20; position: absolute;}

.redPurpleGradientText {background: linear-gradient(to right, red 0%, purple 70%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.aquaBlueGradientText {background: linear-gradient(to right, #30CFD0 0%, #330867 70%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

.success {background: linear-gradient(to right, lightGreen 0%, darkGreen 70%); background-clip: text; -webkit-background-clip: text;-webkit-text-fill-color: transparent;position: absolute;left: 26px;width: 155px;font-size: 14px;font-style: italic;}
.successBlack {position: absolute;left: 26px;width: 155px;font-size: 14px;font-style: italic;}

.disabled{opacity: 0.4; pointer-events: none;}

.inputtext {border:0;transition: .3s background-color, .1s box-shadow;width: 520px;padding: 5px;margin-bottom: 10px;border-bottom: 1px solid #3c3c3c;}
.inputtext:hover{border-bottom: 1px solid #3c3c3c;box-shadow:4px 6px 0px rgba(0,0,50,0.2);}
.inputtext:focus {box-shadow:4px 6px 0px rgba(0,0,50,0.2);background-color: #fffef9;border-bottom: 1px solid #3c3c3c;}

.makeupRemoverText{ font-size: 13px; color: #30CFD0; display: none; }

#shimmerTipMaskDark{width: 100px; height: 100px;}
.shimmerTexture{mask-image: url('../img/site/shimmer_swatch.png');
  -webkit-mask-image: url('../img/site/shimmer_swatch.png');
  height: 110%;
  width: 110%;
  position: absolute;
  background-color: rgb(255,255, 255,0.5);
  pointer-events: none;
    touch-action: none;
    opacity: 0.8;
    pointer-events: none;

}

.shimmerTextureSidebar {
    mask-image: url('../img/site/shimmer_swatch.png');
    -webkit-mask-image: url('../img/site/shimmer_swatch.png');
    height: 110%;
    width: 110%;
    background-color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    touch-action: none;
    position: absolute;
    opacity: 0.8;

}
  .shimmerValue {
    position: absolute;
    width: 100%;
    pointer-events: none;

  }

  .hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s linear;
  }

/************************************************* SINGULAR STYLES */

.textAlignRight{text-align: right;}
.floatLeft{float: left;}
.floatRight{float: right;}
.fiveMargin{margin: 5px;}
.fiveMarginRight{margin:  0 5px 0 0;}
.fivePadding{padding: 5px;}
.fivePaddingTop{padding: 5px 0px;}
.fivePaddingSide{padding: 0px 5px;}

.aquaBlueGradient {border: 1px solid;border-image: linear-gradient(135deg,#30CFD0, #330867) 1;}
.redPurpleGradient {border: 1px solid;border-image: linear-gradient(135deg,red, purple) 1;}

.underline{text-decoration: underline;}
.italic{font-style: italic;}
.brightBlueText{color: #30CFD0;}
.brightPinkText{color: #ff0080;}
.changeAbleText{transition: opacity 0.3s; display: inline;}

/*************************************************** COMPONENTS */


.ribbon,.ribbonBrush {
	margin: 0px;
	background: #ff0080;
	color: white;
	padding: 11px 11px;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(-145px) translateY(0%) rotate(-45deg);
	transform-origin: top right;
	font-family: georgia;
  box-shadow: 0px 2px 0px rgba(0,0,50,0.3);
  font-style: oblique;
  font-weight: bolder;
  font-size: 13px;
}
.ribbonBrush{
  transform: translateX(-125px) translateY(0%) rotate(-45deg);
}

.ribbon::before, .ribbon::after, .ribbonBrush::before, .ribbonBrush::after {
	content: '';
	position: absolute;
	top: 0;
	margin: 0 10px;
	width: 190%;
	height: 100%;
	background: #ff0080;
	box-shadow: 0px 2px 0px rgba(0,0,50,0.3);
}
.ribbon::before,.ribbonBrush::before {
	right: 100%;
	margin: 0 -1px;
}


.swing li { height: 0px; margin-left: -200px;  transition: all 0.3s ease-in-out}
.swing li.show {opacity: 1; height: 50px; visibility: visible; transition: all 0.3s ease-in-out}
/* .swing li.boot {opacity: 1; height: 90px; visibility: visible; transition: all 0.3s ease-in-out} */

/* .swing li {opacity: 0; height: 0px; visibility: hidden; transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); }
.swing li.show {opacity: 1; height: 50px; visibility: visible; transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76); } */

/* Reset Select */
select {-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;appearance: none;outline: 0;box-shadow: none;border: 0 !important;background: #3c3c3c;background-image: none;font-family: HelveticaNeueXBlk;}
/* Remove IE arrow */
select::-ms-expand {display: none;}
/* Custom Select */
.select {position: relative;display: flex;width: 250px;height: 3em;line-height: 3;background: #3c3c3c;overflow: hidden;border-radius: .25em;font-family: HelveticaNeueXBlk;font-size: 14px;}
select {flex: 1;padding: 0 .5em;color: #fff;cursor: pointer;}
/* Arrow */
.select::after {content: '\25BC';position: absolute;top: 0;right: 0;padding: 0 1em;background: #555;cursor: pointer;pointer-events: none;-webkit-transition: .25s all ease;-o-transition: .25s all ease;transition: .25s all ease;color: #aaa;}
/* Transition */
.select:hover::after {color: #fff;}

option{font-family: Helvetica, Arial, sans-serif;}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#loadingStatement,#loadingStatementBrushes{padding: 40px 0;
  font-size: 22px;
  color: white;}

.loader {
  border: 5px solid #222;
  border-radius: 50%;
  border-top: 5px solid #30cfd0;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1.5s ease-in-out infinite; /* Safari */
  animation: spin 1.5s  ease-in-out infinite;
  margin: auto;
  position: absolute;

}
.loaderInner {
  border: 4px solid #222;
  border-radius: 50%;
  border-bottom: 4px solid #30cfd0;
  width: 25px;
  height: 25px;
  -webkit-animation: spinBack 1.5s ease-in-out infinite; /* Safari */
  animation: spinBack 1.5s  ease-in-out infinite;
  margin: auto;
  position: absolute;
  margin: 12.5px;
}

.loaderMini {
  border: 2px solid #222;
  border-radius: 50%;
  border-bottom: 2px solid #30cfd0;
  width: 10px;
  height: 10px;
  -webkit-animation: spin 1.5s ease-in-out infinite; /* Safari */
  animation: spin 1.5s  ease-in-out infinite;
  margin: auto;
  position: absolute;
  margin: 12.5px;
  top: 52px;
  right: 19px;
  visibility: hidden;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Safari */
@-webkit-keyframes spinBack {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-360deg); }
}

@keyframes spinBack {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}


/* TOAST */

.snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #3c3c3c;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 8px 20px 0px 20px;
  position: absolute;
  left: 50%;
  top: 50px;
  z-index: -99;
  font-size: 17px;
  height: 30px;
}

.snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 1s forwards;
   -webkit-animation: fadein 0.5s, fadeout 0.5s 1s forwards;
}

@keyframes fadein {
  from {top: 0; }
  to {top: 50px;}
}

@keyframes fadeout {
  from {top: 50px; }
  to {top: 0; }
}

@-webkit-keyframes fadein {
  from {top: 0; } 
  to {top: 50px; }
}

@-webkit-keyframes fadeout {
  from {top: 50px; } 
  to {top: 0;}
}


/*//////////// MOBILE ////////////////////////////////*/


@media (hover: hover)
{
  .toolBarBtn:hover {background-color: #aaa; }
  .blackButton:hover{background-color: #30cfd0; transition: background-color .1s ease-in-out;}
  .tealButton:hover{background-color: #3c3c3c;}
}



/*//////// INIT ////////*/

/* Hide at start during face chart selection */
#toolBar,#brushControls,#rightSideBar,#leftSideBar{display: none;}