/* ======================
		Mint
======================= */

:root {

	--link: #000;
	--hoverLink: #222;
	--lightGreyText: #999;/*was #ccc*/
	--lightGreyBorder: #ddd;
	--lightGreyBG: #F0F0F0;
	--red:#EB3626;
	--blue:#2A728A;
	--lightBlue:#CDE5ED;
}
/* ======================
		Layout
======================= */

html {font-size: 20px;}

body{background: #fff;color:#000;font-size: 1rem;line-height:1.4;font-family: 'Arial', serif;padding:0 1rem 2rem;}

#home{position:absolute;left:0;top:0;background:#fff url(../../../img/home.png) no-repeat 50% 50%;background-size:2rem;width:2.6rem;height:2.6rem;margin:0 0.3rem 0 0;cursor:pointer;}

#wrapper{min-height: 100vh;display:flex;flex-direction: row;justify-content:center;align-items:center;}

#container{max-width:1200px;}

#header{margin:0 2rem 1rem;}

.contentBlock{display:flex;flex-direction: row;align-items: flex-start;}

.contentRows{padding:0;}

.contentCell{padding:0 1rem;max-width:500px;margin:0 auto 0.5rem;}

#auctionComing{position: fixed;top:0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.8) url(../img/auction.jpg) no-repeat 50% 50%;background-size:contain;}

#mint{background-color: var(--lightGreyBorder); background-repeat: no-repeat; background-position: 50% 50%;background-size:contain;width:100%;margin:0 auto 1rem;box-shadow: 1px 2px 4px rgba(0,0,0,0.1);}

.prevNext{width:1.5rem;height:2.6rem;cursor:pointer;margin:0.2rem 0.3rem;}

#mint_prev, #palette_prev{background:url(../img/prev.png) no-repeat 50% 50%;background-size:48%;}

#mint_next, #palette_next{background:url(../img/next.png) no-repeat 50% 50%;background-size:48%;}

#mintNumInput{width:5rem;text-align:center;margin:0.2rem 0;}


#launchContainer{display:flex;flex-direction: row;justify-content:space-around;}

#close{position:fixed;right:20px;top:20px;background:rgba(0,0,0,0.3) url(../img/closeW.png) no-repeat 50% 50%;background-size:contain;width:60px;height:60px;cursor: pointer;}

.launch{border:0.2rem solid #fff;padding:0.8rem 2rem;border-radius:3rem;font-size: 1.3rem;white-space: nowrap;margin:0.5rem;}

.launch:hover{box-shadow: 0 0 0.5rem rgba(255,255,255, 0.5);}

#blackOut{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.5);z-index:2;overflow: auto;display:none;}

#fetchContainer{margin:0.4rem 0 0;}

#mintInputRow{display:flex;flex-direction: row;justify-content:space-between;margin:0;}

#generateContainer{display:none; margin:0.5rem 0 0.5rem;}

#generate{margin:0 0 1rem;}

.infoContainer{margin:1rem 0 0;}

.offer{background:var(--lightGreyBorder);padding:0.5rem 0.6rem;margin:0;border-radius: 0.5rem;border:1px dashed #777;}

#validationContainer{padding:0.6rem 0.85rem 0.7rem;color:var(--blue);background:var(--lightBlue);border-radius:0.5rem;margin:1rem 0 1rem;font-size:0.8rem;}

#validationContainer p{color:var(--blue);}

#showSign{display:none;}

#printExists{margin:0 0 0.5rem;}

#rightCell{width:22rem;}


/* ======================
		Info cell
======================= */

.info{font-size: 0.8rem;text-align: right;padding-right:1rem;background: url(../img/down.png) no-repeat 100% 50%;background-size:0.7rem;font-weight:normal;margin-right:0.1rem;}

.info.min{background: url(../img/up.png) no-repeat 100% 50%;background-size:0.7rem;}

.infoCell{display:none;font-size:0.8rem;text-align: left;padding:1rem;}


/* ======================
		Forms
======================= */

.inputContainer{font-size: 1.5rem;margin:1rem;}

.numInput{background: #fff;padding:0.4rem 4rem 0.4rem 1rem;border-radius:3rem;font-size: 1.3rem;color:#000;border:none;width:3rem;text-align:center;font-weight: bold;margin-left:0.2rem;}

input:focus, textarea:focus, select:focus{outline: none;}

.inputContainer{display:inline-block;position: relative;}

#fetch{width:7rem;}

.labelErrorContainer{display:flex;flex-direction: row;}

.inPlaceError{display:none;flex-grow: 1; background-color:var(--lightRed);color:#fff;text-align:center;padding:0.2rem 0.5rem;font-size:0.7rem;margin-left:0.4rem;font-weight:normal;border-radius:0.3rem;}

.input{line-height:2.2rem;font-size:1rem;border:0.13rem solid #000;border-radius:0.5rem;background:#fff;width:100%;padding:0 1rem;margin:0.2rem 0 1rem;box-sizing: border-box;}

.textArea{line-height:1.4;font-size:0.7rem;border:0.13rem solid #000;border-radius:0.5rem;background:#fff;width:100%;padding:0.8rem;margin:0.4rem 0 0;box-sizing: border-box;height:14rem;font-family: 'Open Sans', Arial, sans-serif;}

.textarea:focus{box-shadow: inset 1px 1px 4px #777;outline:none;}

.input:focus{outline:none;box-shadow: inset 1px 1px 4px #777;}

.button{line-height:2.4rem;font-size:1rem;border-radius:1.35rem;background:var(--blue);width:100%;margin:1rem 0 1.4rem;box-sizing: border-box;text-align:center;color:#fff;box-shadow:0.05rem 0.1rem 0.1rem rgba(0,0,0,0.2);font-weight:600;cursor:pointer;}

.button:hover{background:var(--blueHover);box-shadow:0.05rem 0.1rem 0.1rem rgba(0,0,0,0.2);}


.inputAlert{border-color:var(--red);}

/* ======================
		Fonts
======================= */

h1{margin:0 1rem 0 0;font-size:1.7rem;color:#000;display:inline-block;}
h2{margin:1rem 0;font-size:1.2rem;color:#000;}
h3{margin:0.5rem 0;font-size:1rem;font-weight:normal;display:inline-block;color:var(--lightGreyText);}
li{margin:1rem 0;}
p{font-size:0.9rem;line-height:1.6;color:var(--lightGreyText);}
strong{color:#000;}
.contain{width:100%;border:none;margin:0.5rem 0 0;}
.link{font-weight: bold;color:var(--link);cursor: pointer;}

.note{padding:0.6rem 0.85rem 0.7rem;color:var(--blue);background:var(--lightBlue);border-radius:0.5rem;margin:1rem 0 1rem;font-size:0.8rem;}



p{font-size:0.8rem;}

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

.price{text-align: right; font-size:1.2rem;font-weight:bold;margin:0.5rem 0 1rem;}

.offerSm{margin:0.5rem 0 0;color:var(--lightGreyText);font-size:0.8rem;}

.hr{height:1px;background:var(--lightGreyBorder);margin:1rem 0;}

.mt2{margin-top:2rem;}

#printNotes{color:var(--lightGreyText);font-size:0.8rem;margin:0.5rem 0 1.5rem;}

.smallSelect{color:var(--lightGreyText);font-size:0.8rem;font-weight:normal;}

/* ======================
	Check box
======================= */

.checkBox{display:inline-block;width:1.2rem;height:1.2rem;border:2px solid var(--lightGreyBorder);border-radius:0.25rem;background:#fff url(../img/tickW.png) no-repeat 50% 50%;background-size:0;transition:background-size .15s ease-in-out 0s;margin:0 0.3rem -0.3rem 0;cursor:pointer;}



#quickPreviewContainer{margin-top:24px;}

.checkBox:hover{border-color:#bbb;}

.checkBox.checked:hover{background-color:#000;}

.checkBox.checked{background-color:#333;background-size:0.8rem;}

.checkBoxCell{margin-top:12px;line-height:24px;}

.indent1{margin-left:20px;}

.checkBoxLabel{display:inline-block}

/* ======================
		Popup
======================= */


#popupContainer{display:none;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.3);z-index:100;}
#popupContent{text-align:center;line-height:1.6;margin:2rem 0 1rem;}
#popup{display:none;max-width:30rem;background:#fff;padding:1rem 1rem;border-radius:1rem;box-shadow:0.1rem 0.2rem 0.3rem rgba(0,0,0,0.3);line-height:2;position:absolute;top:10%;left:50%;margin-left:-15rem;height:80vh;width:30rem;box-sizing: border-box;}
#popupScroll{position: absolute;left:1rem;top:4rem;right:1rem;bottom:1rem;overflow-y: auto;padding:0 1rem 1rem 1rem;}
#popupBtns{display:flex;flex-direction: row;justify-content:space-between;margin:2rem;}
#popupSubmit:focus{color:#fff!important;}
#popupSubmit:hover{color:#fff!important;}
.popupBtn{width:47%;margin:0 auto!important;}
#popupCancel{background:#DFDFDF;color:#aaa;}
#popupDelete, #popupRemoveATP, #popupUntrack{background: var(--lightRed);}
.popUpheading1{font-size:1rem;font-weight:bold;}

.popupListItem{position:relative;color:#777;list-style: none;font-size:0.8rem;}
.popupListItem::before {content: ''; background-color: var(--blue);display:block; width: 0.6rem;height:0.6rem;border-radius:50%;position:absolute;left:-1rem;top:0.4rem;}
.popupDetail{color:var(--lightGreyText);font-size:0.7rem;}
.popupDetail strong{color:var(--blue);font-size:1.2rem;font-weight:bold;}
.submitAlert{display:none;background-color:var(--lightRed);color:#fff;text-align:center;padding:0.2rem 0.3rem;font-size:0.8rem;margin-top:1rem;}
#popup ul{margin:0;padding:0.3rem 2rem 0.6rem;line-height:1.4;}
#popup ul li{margin:0.4rem 0;}
.popupImage{max-width:15rem;}
#popupClose{position:absolute;right:1rem;top:1rem;width:2rem;height:2rem;background: url(../../../img/closeMenu.png) no-repeat 50% 50%;background-size:1.5rem;cursor:pointer;}


/* ======================
	Phrase textarea
======================= */

#pharseInputCells{display:none;}

.phraseInput{background:#000;font-size:1rem;color:#777;padding:10px 20px;height:1.4rem;width:calc(100% - 40px);line-height:1.4rem;overflow:hidden;border:none;border:1px solid #000;margin:20px 0 0;}

.phraseInput:focus{outline:none; border:1px solid #fff;-webkit-box-shadow: 0px 0px 5px  #000; box-shadow: 0px 0px 5px  #000;color:#fff;}

.pharseInputCell{position:relative}

.remainingChar{position:absolute;right:-15px;top:16px;width:2rem;height:2rem;line-height:2rem;text-align:center;background:#777;color:#bbb;border-radius:50%;}

.limitClose{background:var(--amber);color:#fff;}

.limitReached{background:var(--red);color:#fff;}


#phraseInputCell_1{display:none;}

/* ======================
	Select
======================= */

#aspectDropdown{display:none;}

.dropDownContainer{display:flex;flex-direction:row;justify-content:space-between;}

.selectLabel{color:var(--lightGreyText);font-size:0.8rem;line-height:1.2rem;padding:1rem 0.8rem 0 0; }

#paletteDropdown{width:100%;margin:0 10px;}

#select_palette{background-size:contain;background-repeat: no-repeat;background-position: 100% 50%;}

#select_version{font-size:2rem;font-weight:bold;}

.selectContainer{margin:0 0 1rem;border-bottom:0.2rem solid #333;padding-right:2rem;position:relative;cursor:pointer;line-height:3rem;height:3rem;width:12rem;}

#selectContainer_version{margin:1rem 0 1rem;}

#selectOptions_filterByProgram, #selectOptions_filterByCompany{line-height:1.2rem;}

.selectText{overflow:hidden;height:3rem;}

.selectArrow{position:absolute;width:1rem;height:1rem;top:1.2rem;right:0.5rem;background:transparent url(../img/selectDownArrow.png) no-repeat 50% 50%;background-size:contain;}

.selectOptions{background:#fff;box-shadow:0 0.2rem 0.3rem rgba(0,0,0,0.1);position:absolute;top:3.2rem;left:0;right:0;z-index:50;display:none;border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;}

.selectOption{border-top:0.05rem solid var(--lightGreyBorder);padding:0.7rem 1rem;cursor:pointer;color:#777;line-height:1.6rem;display:block;text-decoration: none;background-size:contain;background-repeat: no-repeat;background-position: 100% 50%;}

.selectOption:hover{background-color:var(--lightGreyBorder);color:#000;}

.selectAttention{background:var(--yellow);padding-left:1rem;border-radius:0.5rem;margin-bottom:0.4rem;height:2.6rem;line-height:2.6rem;}

.lastOption{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;}

.label{display:block;color:var(--lightGreyText);font-size:0.8rem;}

.blueText{color:var(--blue)}

.labelLeft{display:block;color:var(--lightGreyText);font-size:0.8rem;margin-top:0.9rem;}

.boldOption{color:#333;font-weight:bold;}

.disable{background: rgba(237,237,237,0.9);position:absolute;top:0;left:0;bottom:0;right:0;z-index:10;}

/* ======================
	Radio
======================= */

#mintRadios{display:flex;flex-direction:row;justify-content:space-around;margin:0.7rem 0 0.9rem;color:var(--lightGreyText);font-size:0.8rem;line-height:1.4rem;}

.radio{border:2px solid #000;border-radius:50%;background:#fff;position:relative;width:1.2rem;height:1.2rem;display:inline-block;margin:0 0.35rem -0.3rem 0rem;cursor:pointer;}

.radioCheck{position:absolute;top:0;left:0;bottom:0;right:0;box-sizing: border-box;border:0.5rem solid #fff;background:#fff;border-radius:50%;transition: all 0.1s ease;}

.checked .radioCheck{border:0.23rem solid #fff;background:#333;}

.radio:hover{border-color:#bbb;}

.radioBox{border:2px solid #333;border-radius:5px;width:auto;line-height:1rem;padding:12px 20px;box-shadow: 1px 2px 3px rgba(0,0,0,0.3);}

.radioBox.checked{border:2px solid var(--lightGreyBorder);background:#333;color:#fff;font-weight:bold;box-shadow:none;}

.iB{display:inline-block;}

.c{text-align:center;}

.r{text-align:right;}

/* ======================
	Buttons
======================= */

.button{background:#eee;width:60px;height:60px;border-radius:0.5rem;cursor:pointer;display:inline-block;}

.outputButton{background:#eee;height:40px;border-radius:0.25rem;cursor:pointer;color:#444;padding:0 10px 0 45px;line-height:40px;}

.outputButton:hover{background-color:#ddd;}

#reGenRadioContainer, #paletteGenRadios{display:flex;flex-direction:row;}

#reGenRadioContainer{margin-top:0;}

#paletteGenRadios{margin-top:10px;}

.genRadioCell{padding:7px 5px 7px 0;}

#reGen{background-size:contain;width:76px;height:76px;border-radius:12px;background:#eee url(../img/reGen.png) no-repeat 50% 50%;min-width:76px;}

#reGenKeepColors{background:#eee url(../img/reGenKeepColors.png) no-repeat 50% 50%;}

#reGenFromPalettes{background:#eee url(../img/reGenKeepColors.png) no-repeat 50% 50%;}

#menu{background:#eee url(../img/menu.png) no-repeat 50% 50%;background-size:contain;}

.fullScreen{background:#eee url(../img/fullScreen.png) no-repeat 0% 50%;background-size:contain;}

.save{background:#eee url(../img/save.png) no-repeat 0% 50%;background-size:contain;}

.saved{background:#eee url(../img/saved.png) no-repeat 0% 50%;background-size:contain;}

.gallery{background:#eee url(../img/gallery.png) no-repeat 0% 50%;background-size:contain;display:block;text-decoration:none;}

.add{background:#eee url(../img/add.png) no-repeat 50% 50%;background-size:contain;}

.button:hover, .miniButton:hover{background-color: #ddd!important;}

#close{position:fixed;right:20px;top:20px;background:rgba(0,0,0,0.3) url(../img/closeW.png) no-repeat 50% 50%;background-size:contain;}

#download{position:fixed;left:20px;bottom:20px;background:rgba(0,0,0,0.3) url(../img/download.png) no-repeat 50% 50%;background-size:contain;display:none;width:60px;}


.blackOutButton, .blackOutTextButton, #download{color:#fff;border:1px solid #fff;border-radius:10px;height:60px;position:absolute;cursor:pointer;}

.blackOutButton{width:60px;}

.blackOutTextButton{padding:0 20px;line-height: 60px;font-size:20px;}

.textButton{height:2.2rem;border:2px solid var(--lightGreyText);border-radius:0.5rem;background:var(--lightGreyBorder);line-height:2.2rem;padding:0 20px;display:block;cursor:pointer;margin:0.2rem 0;box-shadow:0.05rem 0.1rem 0.1rem rgba(0,0,0,0.2);color:#777;font-size:0.9rem;text-align: center;}

.textButton:hover{border-color:#777;}





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

	.contentBlock{display:flex;flex-direction: column;align-items:center}
	.contentRows, #mint{width:100%;}
	html {font-size: 18px;}
	
	

}

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

	#launchContainer{flex-direction: column;}
	html {font-size: 16px;}
	/*#mintRadios{flex-direction: column;}*/
}



.hide{display:none!important;}