/* sculpt buttons */
#BtnSculptEdge {background-image: url('../../../images/create/sculptbuttons/pitchButton.svg');}
/* selected sculpt buttons */
#BtnSculptSculpt.selected{background-image: url('../../../images/create/sculptbuttons/sculptButtonBlue.svg');}
#BtnSculptEdge.selected{background-image: url('../../../images/create/sculptbuttons/pitchButtonBlue.svg');}
#BtnSculptFlatten.selected{background-image: url('../../../images/create/sculptbuttons/flattenButtonBlue.svg');}
#BtnSculptSmooth.selected{background-image: url('../../../images/create/sculptbuttons/smoothButtonBlue.svg');}
#BtnSculptErase.selected{background-image: url('../../../images/create/sculptbuttons/eraseButtonBlue.svg');}
#BtnSculptPush.selected{background-image: url('../../../images/create/sculptbuttons/pushButtonBlue.svg');}
#BtnSculptPull.selected{background-image: url('../../../images/create/sculptbuttons/pullButtonBlue.svg');}
#BtnSculptBoolean.selected{background-image: url('../../../images/create/sculptbuttons/sculptButtonBlue.svg');}

#BtnSettings{background-image: url('../../../images/create/settings_v1.svg');}
#BtnSettings.selected {background-color: #6DC7D5; border-radius: 100%;}
/* Bottom panel */
#gui-element-bottom-panel {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(220, 220, 220, 0.2);
	-webkit-transform: translateY(0);
	-moz-transform:    translateY(0);
	-ms-transform:     translateY(0);
	-o-transform:      translateY(0);
	transform:         translateY(0);
	-webkit-transition: transform .5s;
	-moz-transition:    transform .5s;
	-ms-transition:     transform .5s;
	-o-transition:      transform .5s;
	transition:         transform .5s;
}

#gui-element-bottom-panel.hidden-element {
	-webkit-transform: translateY(100%);
	-moz-transform:    translateY(100%);
	-ms-transform:     translateY(100%);
	-o-transform:      translateY(100%);
	transform:         translateY(100%);
}
#BtnShowHideBottomPanel {
	position: absolute;
	top: 0;
	left: 2.5%;
	font-size: 12px;
	-webkit-transition: top .5s;
	-moz-transition:    top .5s;
	-ms-transition:     top .5s;
	-o-transition:      top .5s;
	transition:         top .5s;
}
#BtnShowHideBottomPanel .fa {
	-webkit-transition: transform .5s;
	-moz-transition:    transform .5s;
	-ms-transition:     transform .5s;
	-o-transition:      transform .5s;
	transition:         transform .5s;
	-webkit-transform: rotate(90deg);
	-moz-transform:    rotate(90deg);
	-ms-transform:     rotate(90deg);
	-o-transform:      rotate(90deg);
	transform:         rotate(90deg);
}
#gui-element-bottom-panel.hidden-element #BtnShowHideBottomPanel {top: -31px;}
#gui-element-bottom-panel.hidden-element #BtnShowHideBottomPanel .fa {
	-webkit-transform: rotate(-90deg);
	-moz-transform:    rotate(-90deg);
	-ms-transform:     rotate(-90deg);
	-o-transform:      rotate(-90deg);
	transform:         rotate(-90deg);
}
#gui-element-header-container {
	border-top: 1px solid #ccc;
}
#gui-element-header-container [class*="col-xs-"] {
	height: 30px;
	vertical-align: middle;
}
#patternbuttonframe {padding-left: 10px; padding-right: 10px;}
/* Widths */
.slider-mirror-panel {padding-top: 0.3%;}
/* Pattern */
.pattern-panel,
.pattern-engrave-header .col-xs-2,
.pattern-cut-header .col-xs-2,
.pattern-stamp-header .col-xs-2 {width: 22%;}
.pattern-panel {padding-top: 0.3%; border-right: 1px solid #ccc;}
/*.pattern-panel {margin-left: 0.5%; margin-right: 0.5%;}*/
#carousel-pattern {padding-left: 8px; padding-right: 8px;}
#pattern-carousel1.carousel-caption {left: 1%; right: 1%; /*position: relative;*/}
#pattern-carousel2.carousel-caption {left: 1%; right: 1%; /*position: relative;*/}
#pattern-carousel3.carousel-caption {left: 1%; right: 1%; /*position: relative;*/}
/* Boolean */
.mainButton:hover, .selected {opacity: 1; cursor: pointer}
#boolean-carousel-inner .carousel-caption {left: 1%; right: 1%; position: relative;}
#boolean-pattern-block-main {min-height: 13vh;}
.boolean-pattern-panel {padding-top: 0.3%; border-right: 1px solid #ccc;}
#booleanScaleSlider{
	orientation: vertical;
	width: 20%;
	height: 300px;
	border: 1px solid #9a9a4f !important;
	margin-top: 2%;
}

/*#import-object-panel{
	width: 50px;
	position: absolute;
	bottom: 8.5%;
	margin-left: 25%;
	background-repeat: no-repeat;
}*/

.boolean-import-object{
	position: absolute;
	left: 2%;
	bottom: 102%;
}

.pattern-panel .carousel-inner .carousel-caption, #fontpalette .carousel-caption {padding-top: 0; padding-bottom: 0; position: initial; margin-left: 4%; margin-top: 3%; margin-bottom: -3%; overflow: visible;}
#fontpalette .carousel-caption {margin-left: 8%; margin-right: 8%;}
.pattern-panel .carousel-inner .carousel-caption .carousel-element,
#fontpalette .carousel-caption .carousel-element {width: 16.6%; margin: 1%; float: left;}
.pattern-panel .carousel-inner .carousel-caption .carousel-element .patternbutton {margin-right: 1%;}
/*boolean carousel*/
#boolean-carousel-pattern {margin-left: 0.5%; padding-top: 1px;}
#boolean-carousel-inner {margin-left: 2.2%;}
.pattern-panel .carousel-control,
#fontpalette .carousel-control {width: 4%; background-color: #000; background: initial; color: #000;}
.boolean-pattern-panel .carousel-control,
#fontpalette .carousel-control {width: 4%; background-color: #000; background: initial; color: #000;}
/* Sculpt tools */
#sculpTools .sculpt-moving {float: right; width: 8.7%}
#sculpTools .sculpt-moving div {background-repeat: no-repeat;}
.sculpt-tool {margin-right: 2%; float: left; width: 8.7%}
.sculpt-tool-end {float: left; width: 8.7%}
/* Text input */
#TextInputFrame {width: 100%; margin-bottom: 3.5%; margin-top: 0.5%; background-color: white; border: 1px solid #afafaf;}
#TextInputBox {width: 100%; font-size: 1.8vw;}
/* TextInputBox placeholder */
#TextInputBox::-webkit-input-placeholder {font-size: 90%;}
#TextInputBox::-moz-input-placeholder    {font-size: 90%;}
#TextInputBox::-moz-placeholder          {font-size: 90%;}
#TextInputBox::-ms-input-placeholder     {font-size: 90%;}
#TextInputBox::placeholder               {font-size: 90%;}
.text-panel {border-right: 1px solid #ccc;}
/* Colors */
#colorpalette {width: 40%; margin: auto; height: 50%; margin-bottom: .5%; margin-top: -5%;}
#colorpalette .row {margin: 1% 2%;}
#colorpalette .row .col-xs-1 {margin-right: 4%;}
#colorpalette .row .col-xs-1 .colorbutton {border: 1px solid #afafaf;}
/*.colorbutton{border-width: 0;}*/
.size-slider-element.middle {margin-top: 11%;}
/* Borders */
.sculpt-panel {border-right: 1px solid #ccc;}
/* Hsb sliders */
.defaultSliderHelper{
	position: relative;
	margin-top: .2em;
	height: 1.2em;
	background-color: transparent;
	background-size: 1.2em 1.2em;
	background-repeat: repeat-x;
	border-radius: .6em;
	border: 1px solid #dddddd;
	text-align: center;
}
.defaultSliderH{
	position: absolute;
	top: 0;
	margin: 0 0 0 .65em;
	width: calc(100% - 1em);
	height: 1.2em;
	border: 0px solid black !important;
	border-style: none;
	background: none;
}
.defaultSliderHelper .ui-slider-horizontal .ui-slider-handle{
	border: 1px solid #cccccc;
	height: 1em;
	width: 1em;
	top: 0;
	border-radius: 100%;
	margin-left: -.6em;
}
#brightnessSliderHelper {color: whitesmoke;}
.margin-top-2 {margin-top: 2px;}
.defaultSliderText {vertical-align: middle;}
/* 7 buttons */
.seven-element{margin-right: 2%; float: left; width: 12.2%; position: relative;}
.thirteen-element{margin-right: 2%; float: left; width: 4%; position: relative;}
/* boolean 7 buttons */
.boolean-element{padding-bottom: 11px; padding-right: 25px; padding-top: 8px; padding-left: 5px; margin: 0.6%}
#boolean-panel-main-style {padding-top: 1.4%; padding-bottom: 1.5%; min-with: 80px; border-right: 1px solid #ccc;}
#BtnMerge {margin-left: 5%; margin-right: 5%; max-width: 51px;}
#BtnSubstract {margin-left: 5%; margin-right: 5%; max-width: 51px;}
#BtnIntersect {margin-left: 5%; margin-right: 5%; max-width: 51px;}

/* carousel control */
.carousel-control .glyphicon {
	-webkit-transform: translateY(-25%);
	-moz-transform:    translateY(-25%);
	-ms-transform:     translateY(-25%);
	-o-transform:      translateY(-25%);
	transform:         translateY(-25%);
}
.pattern-panel .carousel-control .glyphicon {
	-webkit-transform: translateY(-40%);
	-moz-transform:    translateY(-40%);
	-ms-transform:     translateY(-40%);
	-o-transform:      translateY(-40%);
	transform:         translateY(-40%);
}
.mainButtonHolder.selected {background-color: #6DC7D5 !important;}
/* left menu */
#left-gui-elements {height: 100%; display: table; width: 100%;}
#left-gui-elements .main {display: table-cell; vertical-align: middle;}
#left-gui-elements .main #BtnToggleBoundingBox,
#left-gui-elements .main #BtnToggleFixedPlaneRot,
#left-gui-elements .main #BtnSculpt,
#left-gui-elements .main #BtnPattern,
#left-gui-elements .main #BtnPaint,
#left-gui-elements .main #BtnFullColor,
#left-gui-elements .main #BtnText,
#left-gui-elements .main #BtnAddObject,
#left-gui-elements .main #BtnPicturePattern,
#left-gui-elements .main #BtnFormShifter,
#left-gui-elements .main #BtnBoolean {margin: 0;}
#left-gui-elements .main .BtnText {padding-top: 3px;}
#left-gui-elements .mainButtonHolder{
	width: 100%;
	background-size: cover;
	background: white center;
	-webkit-border-radius: 10%;
	-moz-border-radius: 10%;
	-ms-border-radius: 10%;
	-o-border-radius: 10%;
	border-radius: 10%;
	margin-bottom: 3px;
	display: block;
	position: relative;
}
#left-gui-elements .mainButtonHolder .mainButtonHolderSubmenu{
	display: none;
	position: absolute;
	left: 80px;
	top: -38px;
}
#left-gui-elements .mainButtonHolder #BtnPicturePattern ~ .mainButtonHolderSubmenu{top: -16.5px;}
#left-gui-elements .mainButtonHolder .mainButtonHolderSubmenu::before{
	content: '';
	position: absolute;
	left: -10px;
	top: 8px;
	height: 110px;
	border-left: 1px solid #ccc;
}
#left-gui-elements .mainButtonHolder #BtnPicturePattern ~ .mainButtonHolderSubmenu::before{height: 70px;}
#left-gui-elements .mainButtonHolder .mainButtonHolderSubmenu::after{
	content: '';
	border-top: 1px solid #ccc;
	position: absolute;
	top: 63px;
	left: -25px;
	width: 10px;
}
#left-gui-elements .mainButtonHolder #BtnPicturePattern ~ .mainButtonHolderSubmenu::after{top: 43px}
#left-gui-elements .mainButtonHolder .mainButtonHolderSubmenu .mainButton{
	width: 40px;
	height: 40px;
	margin-bottom: 2px;
}
#left-gui-elements .mainButtonHolder .mainButtonHolderSubmenu .mainButton .BtnText{
	margin-left: 45px;
	position: relative;
	padding-top: 50%;
	transform: translateY(-20%);
}
/* boolean right menu */
/*#boolean-right-block {display: table; width: 40px;}*/
#boolean-right-block .main {display: table-cell; vertical-align: middle;}
#boolean-right-block .main #BtnMoveObject,
#boolean-right-block .main #BtnRotateObject,
#boolean-right-block .main #BtnScaleObject {height: 40px; margin: 0;}
#boolean-right-block .main .BtnText {padding-top: 1px;}
#boolean-right-block .mainButtonHolder{
	background-color: white;
	-webkit-border-radius: 10%;
	-moz-border-radius: 10%;
	-ms-border-radius: 10%;
	-o-border-radius: 10%;
	margin-bottom: 3px;
	display: block;
	position: relative;
}
#boolean-right-block{
	position: relative;
	top: -8.5em;
	left: calc(100% + 20px);
	border-left: 2px solid #afafaf;
	padding-left: 10px;
}
/*.booleanButtonHolder {
	width: 40px;
}*/
#boolean-right-block .mainButtonHolder .mainButtonHolderSubmenu{
	display: none;
	position: absolute;
	left: 80px;
	top: -38px;
}
#boolean-right-block .mainButtonHolder #BtnMoveObject ~ .mainButtonHolderSubmenu{top: -16.5px;}
#boolean-right-block .mainButtonHolder .mainButtonHolderSubmenu::before{
	content: '';
	position: absolute;
	left: -10px;
	top: 8px;
	height: 110px;
}
#boolean-panel-id {
	border-top: 2px solid #afafaf;
	width: 14px;
	height: 2px;
	margin-left: 98%;
	top: 13%;
	position: absolute;
}
#text-center-id {font-size: 1vw; padding-bottom: 1%;}
#boolean-edit-panel-main {padding-top: 0.5%; padding-bottom: 0.5%; padding-left: 0.5%; padding-right: 0.5%;}
/* boolean scale */
#boolean-scale {position: absolute; right: -0.5%; bottom: 200%;}
#boolean-scale .headerButton {opacity: 0.8; background-repeat: no-repeat;}
.boolean-edit-panel {width: 50px;}

/* boolean paint */
#paint-panel {border-right: 1px solid #ccc;}

/* picture pattern panel */
.picture-pattern-panel {border-right: 1px solid #ccc;}

/* mouse navigation block */
#mouse-navigation {
	position: absolute;
	right: 45%;
	top: 2%;
	width: 10%;
	opacity: 0.4;
	/*background-image: url('../../../images/mouse_navigation_horizontal.svg');*/
}
#mouse-navigation .headerButton {opacity: 0.4; background-repeat: no-repeat;}
#mouse-boolean {
	position: absolute;
	right: 45%;
	top: 2%;
	width: 10%;
	opacity: 0.4;
	/*background-image: url('../../../images/mouse_navigation_horizontal_boolean.svg');*/
}

/* top section */
.leopoly-top-menu {position: absolute; width: 20%; top: 1%; padding: 0 15px;}
.leopoly-top-menu .row .col-xs-2 .headerButton {background-repeat: no-repeat; background-size: contain;}

.leopoly-top-menu .col-xs-2 {
	padding-left: 3%;
	padding-right: 3%;
}

@media (max-width: 1440px) {
	.leopoly-top-menu {
		width: 23%;
	}
}

#settings-tooltip {
	position: absolute;
	top: 120%;
	left: 50%;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: 1px solid rgba(0, 0, 0, 0.6);
	padding: 20px;
	background: rgba(110, 198, 212, 0.1);
	font-family: museo_sans100;
	font-size: 12px;
	min-width: 140%;
	line-height: 22px;
}

#settings-tooltip > .glyphicon {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	font-size: 18px;
	color: rgba(0, 0, 0, 0.6);
}

#settings-tooltip span:not(.glyphicon) {
	color: #6DC7D5;
}