@charset "UTF-8";
/* CSS Document */


#awconfig-holder {
	position: absolute;
	width: 900px;
	height: 380px;
	background-color: transparent !important;
	top: 60px;
	/*overflow:hidden;*/
	
	display: -webkit-box;
	display: -moz-box;
	display: box;
	-moz-box-orient: horizontal;
	box-orient: horizontal;
	-webkit-box-orient: horizontal;
	z-index: -100;
	opacity:1;
}

#awning-configurator {
	position: absolute;
	left: 50%;
	top: calc(50% - 20px);
	-o-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
#awn-wrapper {
	width: 100px;
	min-height: 1px;
	overflow: visible !important;
	-webkit-backface-visibility: hidden;
	position: relative;
	display: block;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border:solid #3f3f19 8px;
}

#awn-top {
	position: relative;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	/*left:10px;*/
	top:10px;
	background-image: url(img/default-fabric.jpg);
	position: relative;
	-webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
}

#awn-holes {
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	top:20px;
	left:20px;
}

.awn-hole {
	position:absolute;
	width:4px; height:4px;
	border-radius:4px; background-color:#ffffff;
}

#awn-top img {
	width: 100%;
	height: 100%;
}

#arr-bottom{position:absolute; height:10px;
 background-image: url(img/arr-left.svg), url(img/arr-mid.svg), url(img/arr-right.svg);
 background-size: 18px, auto, 18px;
 background-repeat: no-repeat, repeat-x, no-repeat;
 background-position: left, center, right;
 text-align:center;
}

#arr-left {position:absolute; height:10px; top:0px;
 background-image: url(img/arr-left.svg), url(img/arr-mid.svg), url(img/arr-right.svg);
 background-size: 18px, auto, 18px;
 background-repeat: no-repeat, repeat-x, no-repeat;
 background-position: left, center, right;
 text-align:center;
 transform-origin:0px 0px;
}


.arr-legend {font-size:12px; width:auto;line-height:16px; display:inline-block; height:12px; margin-top:-11px; text-align:center;
}


.num-input {width:50px !important;}

.awn-bar-holder {position:absolute;  width:0px; height:100%; top:0px;}
.awn-bar {position:absolute; background-color:#3f3f19; width:8px; height:100%;left:-4px;top:0px;}
.awn-belt {position:absolute; width:0px; height:0px;left:0px;top:0px;}
.awn-belt-bg-left {position:absolute; background-color:#ffffff; width:12px; height:28px;left:-16px;top:-14px;opacity:0.3;}
.awn-belt-bg-right {position:absolute; background-color:#ffffff; width:12px; height:28px;right:-16px;top:-14px;opacity:0.3;}
.awn-belt-bg {position:absolute; width:40px; height:28px;right:-20px;top:-14px;opacity:0;}
.awn-belt-top {position:absolute; background-color:#ffffff; width:20px; height:8px;left:-10px;top:-4px;}
.awn-support {position:absolute; left:0px; top:0px; height:100% ; width:100%;transform-origin:50% 50%;}

#belt-coords {min-height:30px; width:100%; margin:15px 0px; text-align:left; display:inline-block;}
#coords-holder{margin-top: 5px;}
.coord-holder {
	width: 100%;
    height: 25px;
    font-size: 13px;
    line-height: 25px;
    margin-top: 3px;
    text-indent: 5px;
    background-color: #dddddd;
}
.belts-data-holder {width:175px; margin-left: 3px; display:inline-block;}
.belts-data-holder span {display:inline-block;width:15px; text-align:center; color:#fff;}
.belt-y,.belt-x {width:50px; display:inline-block; margin-left:5px;}
.belt-nr {width:25px; height:25px;line-height:25px; font-weight:bold; display:inline-block;color:#fff;}
.coord-focus {background-color:#FF9E35;}
.belt-focus {background-color:#FF9E35; opacity:0.7;}
#calc-btn {
	background-color: #FF9E35;
    width: 120px;
    display: inline-block;
    margin: 3px;
    color: #fff;
    text-align: center;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
	}
	
	#add-bar {width:100%; height:100%; position:absolute;left:0px; top:0px;}