/* LIST */

.designListItem{padding: 10px;}
.designListBox{display: block; height: 300px; text-align: center; border: 1px solid #d6d4d4;}
.designListBox:hover{box-shadow: 0 0 12px rgba(0,0,0,0.3);}
.designListName{padding: 10px; font-size: 20px; border-bottom: 1px solid #eee; text-align: center;}
.designListImage{max-width: 100%; max-height: calc(100% - 40px);}

/* DESIGNER */

.canvasLoader{padding: 50px; font-size: 30px; text-align: center;}
.canvasFontPreload{padding: 0; margin: 0; font-size: 1px; line-height: 1px; height: 1px; overflow: hidden; color: #fff;}
.canvasContainer{display: none; position: relative; overflow: hidden;}
.canvasContainer select, #rdCartHolderSmall select,
.canvasContainer input, #rdCartHolderSmall input{padding: 4px; font-size: 13px; border: 1px solid #ccc; border-radius: 6px;}
.canvasContainer select:disabled, #rdCartHolderSmall select:disabled{background: #fff; color: #000; opacity: 0.65;}

.canvasCanvas{position: absolute;}
#designerCanvas{background: #fff; border: 1px solid #aaa; border-radius: 4px;}
#tbScrollToCart{display:none;}

.canvasToolbar{position: absolute; padding: 15px; background: #fff; color: #aaa; font-size: 11px; text-align: left; border-radius: 4px;}
.canvasToolbar.canvasToolbarRight{}
.canvasToolbar.canvasToolbarUpper{}
.canvasToolbar select,
.canvasToolbar button{margin: 2px 0; vertical-align: middle; border-radius: 4px;}
.canvasToolbar button.active{background-color: #428bca;  border-color: #357ebd;  color: #fff;}
.canvasToolbar select{height: 30px; padding: 0 4px;}
.canvasToolbar select#tbTextFontSize{width: 50px;}
.canvasToolbar select#tbTextFontFamily{width: 100px;}
.canvasToolbar select#tbTextFontFamily option{font-size: 20px;}
.canvasToolbar .btnDesc{display: inline; padding-left: 5px;}
.canvasToolbar .colorButton{display: inline-block; width: 23px; height: 23px; margin: 1px; border: 2px solid transparent; border-radius: 3px; cursor: default;}
.canvasToolbar .colorButton.selected{border-color: #fff;}
.canvasToolbarSection{position: relative;} 
.canvasToolbarHeader{font-weight: bold; text-transform: uppercase; color: #333; border-radius: 4px;}
.canvasToolbarHeader.midHeader{padding: 0;}

.canvasToolbarUpper .canvasToolbarSection,
.canvasToolbarUpper .canvasToolbarSectionRight{float: left; padding-top: 10px;}
.canvasToolbarUpper .canvasToolbarSectionRight{float: right}
.canvasToolbarUpper .canvasToolbarSection:after{display:block; float: right; width: 0; height: 34px; margin: 0 5px; overflow: hidden; content: "x"; border-right: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(0,0,0,0.1);} 
.canvasToolbarUpper .canvasToolbarHeader{position: absolute; left: 0; top: -4px;}

.canvasToolbarRight .canvasToolbarSection{padding: 10px 0;} 
.canvasToolbarRight .canvasToolbarSection:first-child{padding-top: 0;}
.canvasToolbarRight .canvasToolbarSection:last-child{padding-bottom: 0;}
.canvasToolbarRight .canvasToolbarSection:after{display:block; position: absolute; left: 0; bottom: 0; width: 100%; content: ""; border-bottom: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(0,0,0,0.1);} 
.canvasToolbarRight .canvasToolbarHeader{padding-bottom: 5px;}
.canvasToolbarRight .openButton{display:none; position: absolute; left: -25px; top: calc(50% - 30px); width: 25px; height: 60px; margin: 0; padding-top: 20px; text-align: center; color: #fff; background: #2C2C2C; opacity: 0.5; border-radius: 6px 0 0 6px; cursor: default;}
.canvasToolbarRight .openButton i{display:block; position: absolute; left: 5px; top: calc(50% - 7px);}
.canvasToolbarRight .openButton.opened{display:block; top: 0; height: 100%; padding-top: 20px; opacity: 1;}
.canvasToolbarRight .openButton.closed #icoClose{display:none;}
.canvasToolbarRight .openButton.opened #icoOpen{display:none;}

.canvasToolbarSection.sectionLast:after,
.canvasToolbarSection:last-child:after,
.canvasToolbarSection:only-child:after{display:none;} 

.clipartContainer{overflow: auto; height: 220px;}
.clipartContainer .clipartButton{height: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;}
.clipartContainer .clipartButton *{cursor: pointer;}
.clipartContainer .clipartImage{float: left; width: 50px; height: 100%; text-align: center; background: #fff; border-radius: 3px;}
.clipartContainer .clipartImage img{max-width: 45px; max-height: 25px; margin: 2;}
.clipartContainer .clipartName{margin-left: 60px; height: 100%; text-align: left; color: #333;}
 
.textEditContener{display: none; position: absolute; top: 0; left: 0; z-index: 1000; width:100%; height:50%; padding: 10px; background: #4e4e4e; text-align: center; border-radius: 4px; box-shadow: 0 0 15px rgba(0,0,0,0.5);}
.textEditContener #rdTextEditArea{width: 100%; height: calc(100% - 35px); padding: 10px; margin-bottom: 5px; border: none;}
 
/* RES DESIGNER ICO */

[class^="rd-icon-"]:before,
[class*=" rd-icon-"]:before {vertical-align: -13%;}

/* CART */

.designerCart{border-radius: 6px;}
.designerCart #rdPriceTotal{font-size: 30px; color: #333;}
.designerCart .cartSection{padding-bottom: 10px; text-align: right;}
.designerCart .cartSection *{vertical-align: top;}
.designerCart .cartSection label{color: #333; margin: 8px 10px 0 0;}
.designerCart .cartSection select,
.designerCart .cartSection .rdRadioContainer{width: 75%;}
.designerCart .cartSection #qty{width: 30%; float: left; height: 45px; font-size: 20px; text-align:  center;}
.designerCart .cartSection #rdAddCart{width: 68%; float: right; margin: 0;}

.designerCart .cartSection.designerCartPrice{height: 30px; text-align: center;}
.designerCart .cartSection.designerCartPrice label{float: none; margin-right: 10px;}
.designerCart .cartSection.designerCartAdd{padding: 0; text-align: center;}

.designerCart .cartSection .rdRadioContainer{display: inline-block; text-align: left;}
.designerCart .cartSection .rdRadioContainer .rdRadio{display: block; padding: 0 5px; margin: 0; vertical-align: middle; border-radius: 3px;}
.designerCart .cartSection .rdRadioContainer .rdRadio.selected{background: #777;}
.designerCart .cartSection .rdRadioContainer .rdRadio *{vertical-align: middle;}
.designerCart .cartSection .rdRadioContainer .rdRadio input{margin: 0 5px 0 0;}

/* RWD */

.canvasToolbarRight.opened{box-shadow: 0 0 15px rgba(0,0,0,0.5);}
.rd-small .canvasToolbarRight .openButton,
.rd-xsmall .canvasToolbarRight .openButton{display: inline-block;}
.rd-small .canvasToolbarUpper .canvasToolbarSection,
.rd-xsmall .canvasToolbarUpper .canvasToolbarSection,
.rd-small .canvasToolbarUpper .canvasToolbarSectionRight,
.rd-xsmall .canvasToolbarUpper .canvasToolbarSectionRight{padding:0;}
.rd-small .canvasToolbarUpper .canvasToolbarHeader,
.rd-xsmall .canvasToolbarUpper .canvasToolbarHeader{display:none;}
.rd-large #rdScrollToArea, 
.rd-medium #rdScrollToArea, 
.rd-small #rdScrollToArea{position: absolute; right: 0; top: 0; z-index: 1000;}
.rd-xsmall #rdScrollToArea{position: fixed; bottom: 0; left: 0; z-index: 1000; width: 100%; background: #D8D8D8; border-top: 1px solid #BCBCBC; padding: 3px 3px 1px ; text-align: center;}
.rd-small #tbScrollToCart,
.rd-xsmall #tbScrollToCart{display: inline-block; margin-left: 15px;}
#rdCartHolderSmall .designerCart{background: #4E4E4E; margin: 10px 0 0; padding: 10px;}

/* rdRadioExpander */

.rdRadioExpander .rdRadioSelected{display: none; position: relative; padding: 5px 10px; background: #fff; color: #000; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;}
.rdRadioExpander .rdRadioSelected::after{display: block; position: absolute; right: 5px; top: 5px; content: '\f13a'; font-family: 'FontAwesome'; font-size: 15px; color: #444;}
.rdRadioExpander .rdRadioList{padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.1);}
.rdRadioExpander .rdRadioClose{position: relative; text-align: center; font-size: 0; height: 10px;}
.rdRadioExpander .rdRadioClose::after{display: block; position: absolute; right: 0; left: 0; top: -3px; content: '\f139'; font-family: 'FontAwesome'; font-size: 13px; color: #aaa; cursor: pointer;}

/* LOGGER */

#rdLoggerBg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); border-radius: 4px;}
#rdLoggerMsg{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 35px; padding: 10px; margin: auto; background: #fff; color: #000; text-align: center; font-size: 15px; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.5)}
#rdLoggerMsg.success{background: #C6FF71; color: #3E6400;}
#rdLoggerMsg.warning{background: #FFC150; color: #644000;}
#rdLoggerMsg.error{background: #FF7171; color: #6F0000;}
#rdLoggerMsg.progress{background: #71D6FF; color: #005D83;}


/* HOOKS */

.designerNavBlock{float: right; border-left: 1px solid #515151;}
.designerNavBlock a{color: #fff; cursor: pointer; display: block; font-weight: bold; line-height: 18px; padding: 8px 10px 11px; text-shadow: 1px 1px rgba(0, 0, 0, 0.2);}

.designerBlock{}

.designerHomeTabContent{border-bottom: 1px solid #d6d4d4;}
.designerHome{border-bottom: 1px solid #d6d4d4;}
.buttonsMore{margin: 5px 0 15px; padding-top: 15px; text-align: center; border-top: 1px solid #d6d4d4;}