@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,700,800');



.calc-container-date {	
	max-width:840px;
	margin:0 auto;
	margin-bottom:0px;
	margin-top:20px;
    font-size: 14px;
	padding:15px;
    /*font-family:"Roboto", "Arial", "Verdana", sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
    font-style: normal;
	position:relative;
	color:#313131;
    line-height: 1.3;
	background-size:cover;
    box-sizing: border-box; 
	box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.15);
	/*border-radius:5px;
	*/
	
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.calc_flag_img {
	vertical-align:bottom;
	display: inline-block!important;
}


.calc-container-date p,
.calc-fl p,
.wn-calc p {
	padding:0!important;
	margin:0!important;
}

.calc-container-date br,
.calc-fl br ,
.wn-calc br{
	display:none;
}

.calc-container-date a:focus {
	outline:none;
}


.calc-container-date *{
    box-sizing: border-box;
}





.calc-content-date {
    position: relative;
	z-index:2;
}

.calc-title {
	font-size:20px;
	text-align:center;
	padding:10px 0;
}

.calc-block {
	text-align:center;
	padding: 10px 0;
	max-width:900px;
	margin:0 auto;
}

.cl-block-title {
	font-size:16px;
	padding:10px 0;
	display:block;
}

.input-block {
    padding:0 15px;;
}

.input-block-title {
    padding: 8px 0;
    color: #999;
}

.input-date-div {
	position:relative;
	margin:0;
}

.icon-calendar {
	position:absolute;
	cursor:pointer;
	top:5px;
	right: 4px;
}

.icon-calendar img {
	width:20px;
}

.date-container {
	margin-top:10px;
}

.calendar-span {
	font-weight:bold;
}

.result-date-title {
	text-align:center;
	font-weight:bold;
	padding:10px 0;
}

.result-date {
	text-align:left;
}


.toogle-div {
    display: none;
}


.cl-line {
    padding:6px 10px;
}

.including-end-date {
	text-align:right;
}

.inputs-roof  .cl-line {
	padding-left:15px;
	padding-right:15px;
}

.cl-line.last-ln {
    border-bottom: 0;
}

.cl-block {
	padding-bottom:20px;
	min-height:200px;
}


.cl-name {
   padding:5px 0;
   font-size:14px;
   float:left;
   width:70%;
}


.cl-name-title {
    line-height: 1.1;
    padding: 10px 0;
    word-wrap: break-word;
}

.cl-name-desc {
    line-height: 1.1;
    font-size: 13px;
    color:#9b9b9b;
}

.cl-value {
   float:left;
   width:30%;
}


.cl-left {
    float:left;
    box-sizing: border-box;
}

.cl-right{
    width:47%;
    float:left;
    box-sizing: border-box;
}

.cl-f-left {
    width:25%;
    float: left;
    margin-right: 5%;
}

.cl-f-right {
    width: 70%;
    float: left;
}

.cl10{width: 10%;}
.cl15{width: 15%;}
.cl17{width: 17%;}
.cl20{width: 20%;}
.cl25{width: 25%;}
.cl30{width: 30%;}
.cl33{width: 33.333333%;}
.cl35{width: 35%;}
.cl40{width: 40%;}
.cl45{width: 45%;}
.cl50{width: 50%;}
.cl55{width: 55%;}
.cl60{width: 60%;}
.cl63{width: 63%;}
.cl65{width: 65%;}
.cl70{width: 70%;}
.cl80{width: 80%;}
.cl90{width: 90%;}

.calc-container-date .clearfix:after{
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

.calc-sel-div-md {
	text-align:center;
}

.al-center {text-align: center;}


.calc-container-date input[type="text"],
.calc-container-date input[type="number"] {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-align: left;
    width:100%;
    padding: 0 8px;
    border: 1px solid #c4c4c4;
    background: #fff;
    font-size: 16px;
    color: #555;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    box-sizing: border-box;
	margin-bottom: 0;
	
}

.calc-container-date input[type="text"].date-result,
.calc-container-date input[type="number"].date-result {
	width:45px;
	padding:0px;
	text-align:center;
	color:#c00c0d;
	font-weight:bold;
}


.calc-container-date input[type="text"].wide-input {
    width:100%;
    display: block;
}


.calc-container-date input[type="text"].slider-input {
    max-width: 47%;
    font-size: 20px;
    height: 46px;
    line-height: 46px;
    text-align: right;
    padding: 0px 5%;
	
}

#inp__printing {
	max-width:160px;
	padding: 0 0 0 16px;
	height: 38px;
    line-height: 38px;
	font-size:18px;
	margin-top:8px;
}

.calc-container-date input[type="text"].input-size {
	height:20px;
	line-height:18px;
	margin:2px 0;
	position:absolute;
	width:46px!important;
	text-align:center;
	font-size:14px;
	padding:0;
}

.input-size-title {
	display:inline-block;
	width:60px;
}

.calc-spinner {
    width: 50px;
    height: 31px;
    line-height: 31px;
    font-size: 18px!important;
    margin-top: 0;
    margin-bottom: 0;
	border:0;
	height: 26px!important;
    line-height: 26px!important;
}

.calc-spinner:focus,
.calc-input:focus,
.slider-input:focus{
    outline: none;
}






.inputs-block {
	padding:5px 0;
}

.inputs-div {
    padding-bottom: 15px;
}

.input-title {
  display:inline-block;
  min-width:15px;
}


.title-span {
    display: block;
    padding:5px 0;
}




@media (max-width: 990px) {
   
}



@media (max-width: 768px) {
    
   
    
     
    .cl-sm10{width: 10%;}
    .cl-sm20{width: 20%;}
    .cl-sm30{width: 30%;}
    .cl-sm35{width: 35%;}
    .cl-sm40{width: 40%;}
    .cl-sm45{width: 45%;}
    .cl-sm50{width: 50%;}
    .cl-sm55{width: 55%;}
    .cl-sm60{width: 60%;}
    .cl-sm65{width: 65%;}
    .cl-sm70{width: 70%;}
    .cl-sm80{width: 80%;}
    .cl-sm90{width: 90%;}
    .cl-sm100{width: 100%;}
    
    .cl33{width: 100%;}
   
    
   .cl-line {
       line-height: 1.3;
    }
	
	.cl-name, .cl-value {width:100%;}
    
    .type-roof-item {
		width:33.33333333%
	}
	
	.btn-clear {
		position:relative;
		margin-top:15xp;
		right:0;
		display:block;
		margin-top:15px;
	}
 
}

@media (max-width: 500px) {
	
	    
    .cl50{width: 100%;}
	.cl33{width: 100%;}
    
    
    .cl-smx10{width: 10%;}
    .cl-smx20{width: 20%;}
    .cl-smx30{width: 30%;}
    .cl-smx35{width: 35%;}
    .cl-smx40{width: 40%;}
    .cl-smx45{width: 45%;}
    .cl-smx50{width: 50%;}
    .cl-smx55{width: 55%;}
    .cl-smx60{width: 60%;}
    .cl-smx65{width: 65%;}
    .cl-smx70{width: 70%;}
    .cl-smx80{width: 80%;}
    .cl-smx90{width: 90%;}
    .cl-smx100{width: 100%;}
    
   
    .order-img {
        width:80%;
        display: block;
        margin:0 auto;
    }
    
    
    .cl-name {
        margin-bottom:0;
    }
    
    .cl-value {
        margin-top: 3px;
    }
    
    .cl-line {
        border-bottom: 0;
        border-top:0;
    }
    
	
	
    
    .calc-container .selectboxit-container,
    select.calc-sel {
        width:100%!important;
    }
    
    .calc-container .selectboxit-btn {
        width: 100%!important;
    }
    
    
    .type-roof-item {
		width:50%
	}
   
         
    .result-div {
        padding-left: 0;
        padding-right: 0;
    }
    

      
    .wn-calc {width:100%;}
	
	
	
	.form-input-label {
		display: block;
	}
	
	
	
	.cl-ln-item {
		display: block;
		width:100%;
	}
	
	
	
	.result-btn-div {
		text-align:center;
	}
	
	.result-btn-div .calc-btn {
		margin-top: 15px;
	}
	
	.list-item-wrap {
		width: 50%;
	}
	
	.result-ln-value {
		width: 48%;
	}
}