@font-face {
  font-family: 'Seg'; /* This is the name you'll use to reference the font in your CSS */
  src: url('../fonts/Seg.ttf') format('truetype'); /* Path to your .ttf file */
  font-weight: normal;
  font-style: normal;
}
.ccm-settings-summoner{
bottom:85px!important;
left:5px!important;
}
body {
  font-family: 'Seg'!important; /* Fallback to sans-serif if 'YourFontName' is not available */
}
#navi{
position:fixed;
z-index:2000;
width:100%;

background: #1D3423;

}

.start-wrap{
width:100%;
height:100%;
position:absolute;
z-index:5000;
}
.start-bg{
background:rgba(255,255,255,0.7);
width:100%;
height:100%;
}
.start{
		width:400px;
	height:auto;
	padding:15px;
	border-radius: 10px;
	position:fixed;
	left:50%;
	margin-left:-200px;
	margin-top:20%;
	font-size:14px;
	background: linear-gradient(45deg, #36fb55 0%, #3ad59f 100%);
	z-index: 5000;
text-align: center;
		border: solid 2px rgba(255,255,255,0.8);
		color: #1d3423;
}
.loading{
	pointer-events: none;
}
.loading::after{
content: '...';
background-image: url('../images/loader.svg');
/*! mix-blend-mode: multiply; */
margin-left: 4px;
background-size: 20px 20px;
width: 20px;
background-repeat: no-repeat;
color: rgba(0,0,0,0);
background-position-y: 0px;
float: right;

right: 0;
display: inline-block;

/*! filter: invert(); */
}
#navimobile{
		display:none;
		position:fixed;
z-index:2000;
width:100%;
height: 60px;
/*padding-bottom:5px;
border-bottom: solid 3px #ffffff;*/
background: #5F646E;
font-size:16px;
color:#ffffff;
background: rgb(95,100,110);
background: -moz-linear-gradient(left,  rgba(95,100,110,1) 0%, rgba(95,100,110,1) 50%, rgba(82,90,107,1) 100%);
background: -webkit-linear-gradient(left,  rgba(95,100,110,1) 0%,rgba(95,100,110,1) 50%,rgba(82,90,107,1) 100%);
background: linear-gradient(to right,  rgba(95,100,110,1) 0%,rgba(95,100,110,1) 50%,rgba(82,90,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f646e', endColorstr='#525a6b',GradientType=1 );

}
#filetab{
	padding:10px !important;
	
}
.compulsoryinfo{
	text-align: center;
	width:100%;
	padding:10px;
}
.compulsoryhl1{
	color:#ff0000;
	text-transform: uppercase;
	font-weight:bold;
}
.compulsoryhl2{
	color:#ff0000;
}
#presets{
  position:fixed;
  z-index:3000;
	/*! background:rgba(0,0,0,0.3); */
	height:100%;
	width:100%;

  overflow: auto;
}
.presets-wrap{
		display:inline-block;
	 
    text-align:center;
	
  padding:30px;
  border-radius:30px;
	background:#ffffff;
	width:calc(100% - 20px);
	margin:10px;
}
.preset-items{
display: inline-block;
 text-align:center;
  
}

.preset-item{
	display:inline-block;
	font-size:14px;
	padding:10px;
	margin:5px;
		width:250px;
			height:200px;
	vertical-align: top;
	
	
}
.preset-item img{
	mix-blend-mode:multiply;
		width:100%;
}
.hl{
	font-size:18px;
	margin-bottom: 20px;
	
	margin-bottom: 20px;
}
.hl2{
	font-size:13px;
	margin:10px;
	text-align:left;
	background: #D9F2D8;
	padding: 10px;
}
.greyborder{
	border-bottom:solid 2px #cccccc;
}
.ico{
	cursor: pointer;
}
.icotoggled{

	background: #1D3423; 
	color:#fff
}
.info{
	padding:3px;
	padding-left:5px;
	padding-right:5px;
	text-decoration: underline;
	float:right;
	background: linear-gradient(to right, rgb(229, 229, 125) 0%,rgb(223, 223, 96) 100%);
	border-radius: 5px;
	cursor: pointer;
	margin-top:3px;
}
.loader{
	width:200px;
	height:auto;
	padding:15px;
	border-radius: 10px;
	position:fixed;
	left:50%;
	margin-left:-100px;
	margin-top:20%;
	font-size:14px;
	background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
	z-index: 5000;
text-align: center;
}
.disabled{
opacity:0.5;
pointer-events: none;
}
#tooltip{
	position:absolute;
	z-index:5000;
	padding:5px;
	font-size:11px;
	border-radius: 3px;

	background:#cccccc;	
	text-decoration: none;
	background: rgb(255,255,136);
background: -moz-linear-gradient(left, rgba(255,255,136,1) 0%, rgba(255,255,109,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,136,1) 0%,rgba(255,255,109,1) 100%);
background: linear-gradient(to right, rgba(255,255,136,1) 0%,rgba(255,255,109,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff6d',GradientType=1 );
}

table{
	border-collapse: collapse;
}
#rooficon{
	width:100%;
	height:100%;
}
.pads td{
	padding:5px;
} 
.selected{
background:#ddd!important;
border-radius: 3px !important;
}
.pac-container{
        position: absolute;
z-index:6000;
      }
.mnaviico{
	float:left;
	cursor: pointer;
}
.pro{
	width: 80px;

height: 33px;

float: right;

margin-top: 41px;




background:
#fffb00;

padding: 5px;

padding-left: 5px;

/*clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);*/


}
#naviroller{
	width:100%;
}
#rollitems{

}
#roofelements{
	/*padding:10px;*/
}
#rollitems .ntext{
	width:85%;
	text-align: center;
	cursor: pointer;
	
}

#show3D{
	text-align:center;
	cursor: pointer;
}
.biglogo{
position:absolute;
width:100%;
height:100%;
opacity:0.1;
left:0;


}
.biglogo img{
width:100%;
height:100%;

}
.priceitem-desc{
	width:150px;

}
.pricestable td{
border: solid 1px;
}
.pricehl{
    background-color: #1D3423;
    text-decoration: underline;
    font-size: 11px;
	padding: 5px !important;
}
.pricecode{
font-size:10px;

}
.pricerow{
padding-top:1px;
padding-bottom:1px;
background: #dfdddd;
color: #000;
}
.priceinfo{
font-size:10px;
text-align:right;
}
.priceinfosub{
font-size:10px;
text-align:right;
font-weight:bold;
background: #fff;
color: #000;
}
.vatinfo{
font-size:8px;
color:#cccccc;
text-align:right;
padding-bottom:2px;
padding-top:0px;
}
.priceinfototal{
font-weight:bold;
font-size:14px;
text-align:right;
background-color: #36FB55;
padding-bottom:2px;
padding-right:2px;
color:#000000;
	
}
.btypehl{
padding:5px;
cursor: pointer;
color:#ffffff;
text-transform: uppercase;
}
#defaultwidthhelp{
height:30px;
margin-bottom:20px;
width: 100%;
}
.roof-help{
position:absolute;
/*border-left:solid 1px #cccccc;*/
border-right:solid 1px #cccccc;
border-bottom:dashed 1px #cccccc;
border-radius: 0 0 5px;

text-align:right;
}
.roofhelpico{
	width:20px;
	height:20px;
}
.normal-roof-help{
width:340px;
height:45px;
background: #ededed;

}
.normal-roof-help:before{
content: 'satteldach';
font-size: 8px;
color: #6d6d6d;

position: absolute;
margin-left: -40px;
margin-top: 5px;
}

.pent-roof-help{
width: 249px;
height:35px;
background: #fff;
}
.pent-roof-help:before{
content: 'pultdach';
font-size: 8px;
color: #6d6d6d;
position: absolute;
margin-left: -40px;
margin-top: 5px;
}
.flat-roof-help{
width: 124px;
height:25px;
background: #d8d8d8;
}
.flat-roof-help:before{
content: 'flachdach';
font-size: 8px;
color: #6d6d6d;
position: absolute;
margin-left: -40px;
margin-top: 5px;
}
.ctypehl{
padding:5px;
cursor: pointer;
color:#ffffff;
text-transform: uppercase;
text-align: left;
}
.roofdisabled{
	pointer-events: none;
	opacity:0.5;	
}
.btypetable input{
width:20px;
}
.right {	

 border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  margin-top:5px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    float:right;
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
 border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
    margin-top:3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    float:right;
}

.subtotalrow{

}
.grandtotalrow{
border-top:solid 2px #ffffff;
font-weight:bold;
}
.pricetable td{
	border:solid 1px rgba(0,0,0,0.1);
	padding:2px;
}

.custlogo{
	position: absolute;
	width:220px;
	height:auto;
	z-index:1;

	-webkit-filter: brightness(1000%);
	-moz-filter: brightness(1000%);
	-o-filter: brightness(1000%);
	-ms-filter: brightness(1000%);
	
	right:3px;
	bottom:55px;
	display:none;
	
}
label{
cursor: pointer;
}
input{
cursor: pointer;
}
.towhite{
	-webkit-filter: brightness(1000%);
	-moz-filter: brightness(1000%);
	-o-filter: brightness(1000%);
	-ms-filter: brightness(1000%);
}
.towhite img{
		width:100%;
	height:auto;
	/*background-color: #ffffff;*/
	

	-webkit-filter: grayscale(100%);
	filter: gray;
	filter: grayscale(100%);
	/*filter: url(desaturate.svg#greyscale);*/
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	
	opacity:0.9;
	margin-bottom:0;
}
.custlogo img{
	
	width:100%;
	height:auto;
	/*background-color: #ffffff;*/
	

	-webkit-filter: grayscale(100%);
	filter: gray;
	filter: grayscale(100%);
	/*filter: url(desaturate.svg#greyscale);*/
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	
	opacity:0.9;
	margin-bottom:0;
	
}
.naviitem{
	
	float:left;
	padding:10px;
	width:100%;
	
	/*-webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    1px 1px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow:         1px 1px 2px 0px rgba(0, 0, 0, 0.5);
	*/
	
	/*text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);*/
	
	/*background-color: #37aa33;*/
	padding-left: 15px;
	
	padding-right:10px;
	/*height: 35px;*/
	cursor: pointer;
	line-height:normal;
	
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	
	/*rgba(188, 225, 255, 1)*/
	
	text-transform: uppercase;
	color:#ca1212;
	color:#ffffff;
    display: inline-block;
    font-size: 11px;
   /* text-decoration: underline;*/
    margin:2px;
    /*
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
*/
 	/* -ms-transform: skewX(-20deg); 
    -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg);*/

}
.ntext{
	/* -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);*/
}
.disable{
	  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color:#cccccc;
}
.notouch{
	  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.camsel{
	background:#66eb15;
}
.lilhl{
	font-weight: bold;
}
.lil2{
	padding:3px;
	margin-left:1px;
	width:30px;
}
.roundleft{
	border-radius: 3px 0 0 3px;
}
.roundright{
	border-radius: 0 3px 3px 0;
}
#defaultwidths{
	/*margin-bottom:20px;*/
}
#defaultheights{
	margin-bottom:20px;
}
.lil{
width:60px;
}
.gradient{


	background: rgb(255,255,255); 
	background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(220, 220, 220,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(220, 220, 220,1)));
	background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(220, 220, 220,1) 100%);
	background: -o-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(220, 220, 220,1) 100%);
	background: -ms-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(220, 220, 220,1) 100%);
	background: linear-gradient(to bottom,  rgba(234,234,234,1) 0%,rgba(220, 220, 220,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76baf2', endColorstr='#4f85bb',GradientType=0 );
	border:solid 1px #bbbbbb;

}
.flistitem{
	padding:3px;
	padding-left:10px;
	border-bottom: solid 1px #ececec;
}
.gradientform{
background: #b0d4e3;
background: -moz-linear-gradient(top,  #b0d4e3 0%, #88bacf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0d4e3), color-stop(100%,#88bacf));
background: -webkit-linear-gradient(top,  #b0d4e3 0%,#88bacf 100%);
background: -o-linear-gradient(top,  #b0d4e3 0%,#88bacf 100%);
background: -ms-linear-gradient(top,  #b0d4e3 0%,#88bacf 100%);
background: linear-gradient(to bottom,  #b0d4e3 0%,#88bacf 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 );
padding:5px;
fonr-size:20px;
}
#facts{
	padding-right:5px;
	padding-bottom:50px;
}
#prices{
position:fixed;
bottom:80px;
right:10px;
background:rgba(255, 255, 255, 0.8);
z-index:1000;
    overflow: auto;
    max-height: 75%;
}
#price{
color:#ffffff;
font-size:20px;

}
#pricetext{
color:#ffffff;
font-size:14px;
padding:10px;
}
.pads{
	position: absolute;
	margin-top:51px;
	
	width:100%;
	
	z-index:1200;
	/*padding:3px;*/
	/*left: 11px;*/
}
#measures{
background-color: #ffffff;
/*padding:5px;*/

/*left:50%;
	margin-left:-200px;*/
	
	min-width:260px;

}
#measures table{
width:100%;

}
#measures td{
text-align:center;
}
#measures input{
	font-size:14px;
	font-family: 'Roboto Condensed', sans-serif;
	  padding: 5px;
  border-radius: 3px;
  border: solid 1px #ccc;
}
}
.walleditorclose{
	z-index: 13000;
position: fixed;
bottom: 40px;
/*left: 50%;*/
/*width: 200px;*/
text-align: center;
/*margin-left: -100px!important;*/
font-weight: bold;
right: 10px;
}
.walleditorclose2{
	z-index: 13000;

margin-top: 6px;
margin-left:20px;
text-align: center;
/*float:right;*/
font-weight: bold;

}
#elements{
width:100%;
max-width:310px;
padding:5px;
padding-bottom:50px;
}
#basicinfo{
	width:250px;
}
#colors{
margin-bottom:60px;
background-color: rgba(255,255,255,1);
    width: 340px;
min-width:270px;
}
.pad{
	/*padding:5px;
	background-color: #ffffff;*/
	position: absolute;
}
.wbutton{
margin:3px;
width:55px;
}
.hbutton{
margin:5px;
width:55px;
}
.buttonlil {
  
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  outline: none;
  cursor: pointer;
  padding: 5px;
  -moz-border-radius: 0em;
  -webkit-border-radius: 0em;
  border-radius: 0em;
  border: 1px solid;
  border-color: #bbbbbb #a2a2a2 #888888;
  background-color: #eee;
  background-image: -moz-linear-gradient(#eeeeee, #d4d4d4);
  background-image: -webkit-linear-gradient(#eeeeee, #d4d4d4);
  background-image: linear-gradient(#eeeeee, #d4d4d4);
 
 
  -moz-transition: all 100ms;
  -o-transition: all 100ms;
  -webkit-transition: all 100ms;
  transition: all 100ms;

}
.buttonlil2 {
  font-size:10px;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  outline: none;
  cursor: pointer;
  padding: 3px;
  -moz-border-radius: 0em;
  -webkit-border-radius: 0em;
  border-radius: 0em;
  border: 1px solid;
  border-color: #bbbbbb #a2a2a2 #888888;
  background-color: #eee;
  background-image: -moz-linear-gradient(#eeeeee, #d4d4d4);
  background-image: -webkit-linear-gradient(#eeeeee, #d4d4d4);
  background-image: linear-gradient(#eeeeee, #d4d4d4);
 
 
  -moz-transition: all 100ms;
  -o-transition: all 100ms;
  -webkit-transition: all 100ms;
  transition: all 100ms;

}
.bselected{
background: rgb(170, 219, 128);
/*background: -moz-linear-gradient(top, rgba(167,199,220,1) 0%, rgba(133,178,211,1) 100%);
background: -webkit-linear-gradient(top, rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%);
background: linear-gradient(to bottom, rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#85b2d3',GradientType=0 );;
background: -moz-linear-gradient(top,  #d2ff52 0%, #91e842 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842));
background: -webkit-linear-gradient(top,  #d2ff52 0%,#91e842 100%);
background: -o-linear-gradient(top,  #d2ff52 0%,#91e842 100%);
background: -ms-linear-gradient(top,  #d2ff52 0%,#91e842 100%);
background: linear-gradient(to bottom,  #d2ff52 0%,#91e842 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 );
*/

}
.itemgroup{
	/*background: #eeeeee;*/
    padding: 5px;
    float:left;
    margin:5px;
}
.item{
 		display: block;
          float: none;
          width: 200px;
         /*height: 65px;*/
          padding:5px;
          line-height: 1.3em;
          overflow: hidden;
          margin-right: 12px; 
          font-size: 10px;
          
          margin-bottom:5px;
          cursor: pointer;
            -webkit-border-radius: 0px; 
  -moz-border-radius: 0px; 
  border-radius: 0px; 
/*  background: rgb(209,209,209);*/
 /* background:#88bacf;*/
 /*background: #ffffff;*/
 border:solid 1px #bbbbbb;
}
.color{
width:160px;
height:50px;
float:left;
background-color: #ffffff;
padding:5px;
margin:2px;
cursor:pointer;

  -webkit-border-radius: 0px; 
  -moz-border-radius: 0px; 
  border-radius: 0px; 
}
.coloritem{
	width:40px;
	height:30px;
	float:left;
	margin-right:5px;

  border-radius: 3px; 
border: solid 1px #cccccc;
}
.colortext{
width:130px;
margin-left:5px;
font-size:10px;
}
.nsel{
	color:#000 !important;
	background: #36FB55;
	text-shadow: none;
	
-webkit-box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
-moz-box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
	
}
.nsel div{
	color:#000!important;
}
.pillow{
	-webkit-box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
-moz-box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
}
.spinner{
	width:120px;
	height:120px;
}
.spinnergif img{
	width:40px;
	
}
.spinnertable{
	width:100%;
}
.spinnertable td{
	padding:0px!important;
}
.spinnergif{
	float:right;
	margin-top: -7px;
	width:40px;
}
#sending{
	    width: 100%;
	    padding: 10px;
	    
}
#sendingtext{
	float:left;
	text-transform: uppercase;
}
.sendingtext{
	margin-top:5px;
}
.green{
background: #36FB55;
background: -moz-linear-gradient(top,  #36FB55 0%, #36FB55 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36FB55), color-stop(100%,#36FB55));
background: -webkit-linear-gradient(top,  #36FB55 0%,#36FB55 100%);
background: -o-linear-gradient(top,  #36FB55 0%,#36FB55 100%);
background: -ms-linear-gradient(top,  #36FB55 0%,#36FB55 100%);
background: linear-gradient(to bottom,  #36FB55 0%,#36FB55 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36FB55', endColorstr='#36FB55',GradientType=0 );
color:#000000;

/*background: rgb(170, 219, 128);*/
}
.colorcol{
	clear:both;
	margin-bottom:50px;
	
}
.colorhl{

clear:both;
/*width:100%;*/
height:30px;
padding:5px;
/*line-height:30px;*/
font-size:12px;
color:#ffffff;
margin-bottom:10px;

background: rgb(31,87,130);
background: -moz-linear-gradient(top,  rgba(31,87,130,1) 0%, rgba(0,71,133,1) 100%);
background: -webkit-linear-gradient(top,  rgba(31,87,130,1) 0%,rgba(0,71,133,1) 100%);
background: linear-gradient(to bottom,  rgba(31,87,130,1) 0%,rgba(0,71,133,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f5782', endColorstr='#004785',GradientType=0 );

background: #1D3423;
  -webkit-border-radius: 0px; 
  -moz-border-radius: 0px; 
  border-radius: 0px; 

text-transform: uppercase;
/*border-bottom:solid 1px #cccccc;*/
}
.colorhl2{
font-size:12px;
background-color: #1D3423;
text-align: left;
/*font-weight: bold;*/
padding:5px;
color:#000000;
border-bottom:solid 1px rgba(255,255,255,0.2);

-webkit-box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
-moz-box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
box-shadow: inset 0px 0px 28px -8px rgba(0,0,0,0.35);
}
.closecolor{
background: rgb(167,199,220);
background: -moz-linear-gradient(top,  rgba(167,199,220,1) 0%, rgba(133,178,211,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,199,220,1)), color-stop(100%,rgba(133,178,211,1)));
background: -webkit-linear-gradient(top,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%);
background: -o-linear-gradient(top,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%);
background: -ms-linear-gradient(top,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%);
background: linear-gradient(to bottom,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#85b2d3',GradientType=0 );

}
.footer{
position:fixed;
z-index:1100;
width:100%;
bottom:0;
background-color: rgba(255,255,255,0.8);
}
iframe{
	border:0;
}
#facts{
float:left;
width:50%;

margin-right:5px;
height:100%;
}
#formitems{

width:49%;
float:right;
background-color: #ffffff;
padding:5px;
height:100%;
overflow:auto;
}

.formtableleft tr:nth-child(odd){
background: #989da8;


}

#orderForm{
/*padding:10px;*/
width:100%;
height:100%;
position:fixed;
background-color: #ffffff;
overflow-y: auto;
padding-left: 10px;
/*padding-bottom: 120px;*/
}
#orderForm td{
padding:5px;
}
th{
	font-weight:normal;
	text-align:left;
	padding-left:10px;
}
.greyform{
background: #eeeeee;
background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee));
background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}
.redgra{
background: #ff3019;
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );

}
#emailfail{
font-style: italic;
}
.redtext{
color: #ff3019;
}
.red{
	border:2px solid #ff0000;
}
.white{
	 background-color: rgba(255,255,255,1);
}
.litegrey{
	background-color: #f1f1f1;
}
#features td{
padding:5px;
padding-left:5px;
font-size:11px;
}
.hilitedvalue{
	font-size:14px;
}
#features tr:nth-child(odd){
/*background: #eeeeee;
background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee));
background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%);
background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );*/

}
#features table{
width:300px;
border-collapse: collapse;
}
#features{
background-color: rgba(255,255,255,1);
}
#roofwalls{

	
}
#snowload{
	width:500px;

}
.snowloadindicator{
	font-size:14px;
	line-height: 30px;
	background: rgb(228,245,252);
	height:30px;
background: -moz-linear-gradient(top, rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%);
background: -webkit-linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
background: linear-gradient(to bottom, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 );
}
#map{
	width:100%;
	min-height:400px;
}
#roofwalls td{
padding:5px;
}
#roofwalls table{
width:300px;
border-collapse: collapse;
}
.tall{

    padding:20px!important;
}
input{
/*width:100%;*/
}
.walleditor{

 background-color: #fdfdfd;
  background-image:
    linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
  background-position:left bottom;
  /*background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;*/

/*border:solid 1px #111111;*/
}
.eseltab{
	float:left;
	width:150px;
	padding: 5px;
	background:#b7bdc8;
	max-width:150px;
	margin-bottom:5px;
}
.eseltab2{
	float:left;
	width:150px;
	padding: 5px;
	background:#b7bdc8;
	max-width:150px;
	border-right: solid 1px #5f646e;
	
}

.svgcontainer{
	margin-top:68px;
}
.elementtools{
	width:100%;
	margin-right:1px;
	display: inline-block;
	background:#b7bdc8;
	padding:10px;
	position: fixed;
z-index: 12000;
}
#guides{
	border-bottom: solid 4px #ccc;
}
.guide{
	background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d8d8d8' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
.labelitems{
	margin-top:5px;
}
.labelitem{
	float:left;
	padding:5px;
	    background: #cccccc;
    margin-top: 5px;
    margin-bottom: 5px;
	
}
.windframeselection{
	float:left;
	margin-top:5px;
}
label{
	float:left;
}
#elementeditor{

	background:#ffffff;

	border:solid 1px #cccccc;


	clear:both;
width:100%;
	
}
.sidebuildingtable td{
	text-align:center;
}
.sidebuildingtable input{
	width:auto;
}
.dd-item{
	height:85px;
	border-bottom: solid 1px #ccc;

cursor: pointer;
padding:5px;
}
.dd-item:hover{
	background: #e9e9e9;
}
.dd-item-disabled{
	opacity:0.5;
	pointer-events: none;
}
.dd-item-text{
	display:inline-block;
	
	float: right;
	width:190px;
}
.newdd{
	background:#ffffff;
	position:absolute;
	/*max-height: 400px;*/
	overflow-y: hidden;
	z-index:6000;
	padding: 0px;
	margin-top: 5px;
	max-width: 350px;
	/*height:300px;*/
	width:350px;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
padding: 10px;
}
.newdd-list{
	width: 100%;
    overflow: auto;
    height: 400px;

}
.toolactive{
	border:solid 1px #000000;
}
.dd-tools{
	background: #ececec;
	padding: 5px;
  border-radius: 2px;
  margin-bottom: 5px;
}
.dd-image-wrap{
	display: inline-block;
	width: 70px;
}
.dd-image{
	/*width:70px;*/
}
.dd-canvas{
	width:100px;
	height:100px;
	float: left;
}
.newdd-headline{
	width: 100%;
}

.dd-option{
padding: 10px!important;
display: inline-block!important;
width: 100%;
text-align: left;
border-bottom: solid 1px #ddd;
overflow: visible;
text-decoration: none;
color: #333;
cursor: pointer;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
box-sizing: border-box;
height: auto !important;
}
label{
	line-height:16px!important;
}
.windowstyle{
font-size:10px;
padding:5px;
background:url(../images/aluplast_logo.png);
background-repeat: no-repeat;
  background-size: 45px;
  padding-left: 55px;
  padding-top: 0px;
}

@media (max-width: 700px) {
	.nomobile{
		display:none;
	}
	#facts{
		width:100%
	}
	#formitems{
		margin-top:20px;
		width:100%;
	}
		.button{
		font-size:14px;
		margin:2px;
	}
	h2{
		line-height:40px;
	}
}
@media (max-width: 600px) {

	.pad{
		left:0;
		margin-left:0;
		width:100%!important;
		
	}
	#features table{
		width:100%;
	}
	#navi{
		display:none;
	}
	#navimobile{
		display:block;
	}
	

}
@media (max-width: 550px) {
 	.nosmall{
		display:none;
	}
	.towhite{
		display:none;
	}
	.custlogo{
		display:block;
	}
}  
@media (max-width: 850px) {
  .ico {
    
   
  }
  .ico .fa{
  	font-size:14px;
  }
  .vico{
	/*line-height:20px;*/
	    padding: 2px;
  }
.naviitem{
	font-size:11px;
	padding-left:0;
	padding-right:0;
	margin:0;

} 
	#colors{
		width:auto;
		min-width:none;
	}


}
@media (max-width: 910px) {
	#elements{
	left:0;
	margin-left:0;
	}
	#defaultwidthhelp{
		display:none;
	}
	#defaultwidths{
		margin-bottom:20px;	
	}
}
@media (max-width: 1024px) {

	
	.color{
		width:160px;
		
	}
	.colortext{
		width:auto;
		font-size:11px;
		max-width: 140px;
	}
}