a,
.btn{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.wrap-calculator{

}
/******************************************************************************************************************/
/***************************************************  QUESTIONS  **************************************************/
/******************************************************************************************************************/
.wrap-clc-quest{
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
border: 1px solid #d6d6d6;
}
.clc-ls-header{
margin-top: 0px;
margin-bottom: 25px;
font-size: 2em;
font-weight: 300;
padding-bottom: 5px;
border-bottom: 5px solid #bb2020;
}
.clc-ls-body{
padding: 20px;
border: 1px solid #d6d6d6;
/*-moz-box-shadow: 0px 0px 10px 1px #c5c5c5;*/
/*-webkit-box-shadow: 0px 0px 10px 1px #c5c5c5;*/
/*box-shadow: 0px 0px 10px 1px #c5c5c5;*/
background: #f7f7f7;
}
.clc-ls-body .form-group{

}
.clc-ls-label{

}
.title-field{
display: inline-block;
/*width: 95%;*/
vertical-align: top;
}
.text-danger.small{
padding-left: 5px;
display: inline-block;
width: 5%;
vertical-align: top;
text-align: center;
}
.clc-ls-input .form-control{
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.clc-ls-input input[type="number"]{

}
.clc-ls-body .has-feedback .form-control-feedback{

}
.clc-ls-input .radio{

}
.clc-ls-input .radio label{

}
.radio label input[type="radio"]{

}
.wrap-clc-ls-button{

}
.clc-ls-button{
background: #75e8a7;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 6px 30px;
}
.clc-ls-button:hover{
background: #fff;
border-color: #d6d6d6;
}
.clc-ls-annotation{
padding: 0px 0px 0px 20px;
}
.clc-ls-annotation ul{
/*-moz-box-shadow: 0px 0px 10px 1px #c5c5c5;*/
/*-webkit-box-shadow: 0px 0px 10px 1px #c5c5c5;*/
/*box-shadow: 0px 0px 10px 1px #c5c5c5;*/
/*background: #effff6;*/
border: 1px solid #d6d6d6;
padding: 20px;
padding-left: 35px;
font-size: 1.25em;
margin-bottom: 0px;
list-style-type: none;
}
.clc-ls-annotation ul li{
margin-bottom: 15px;
position: relative;
font-size: 0.9em;
}
.clc-ls-annotation ul li:before{
content: "\f046";
font: normal normal normal 14px/1 FontAwesome;
display: inline-block;
width: 1.5em;
color: #bb2020;
margin-left: -1.5em;
font-size: 1em;
position: absolute;
left: 0;
top: 5px;
/*top: 50%;*/
/*margin-top: -.5em;*/
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.clc-ls-annotation ul li:last-child{
margin-bottom: 0px;
}
.clc-col-2{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.form-group .clc-col-2:first-child{
text-align: right;
}
.clc-ls-label{
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
.clc-ls-num-input{
position: relative;
}
.clc-ls-num-input .form-control {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.clc-ls-num-input:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f040";
position: absolute;
top: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
right: 0;
}
.clc-error{
list-style: none;
padding-left: 0px;
}
.clc-error li{
color: #d41616;
margin-top: 5px;
text-align: right;
}
@media(min-width: 992px){
.clc-col-2{
width: 50%;
float: left;
}
}
@media (min-width: 768px){
.clc-col-2 {
width: 50%;
float: left;
}
}
@media(max-width: 767px){
.clc-ls-body{
margin-bottom: 20px;
}
.clc-ls-header{
font-size: 1.5em;
}
.clc-ls-label{
text-align: left;
}
.title-field{
display: inline;
width: auto;
}
.text-danger.small{
display: inline;
width: auto;
}
.clc-ls-annotation{
padding-left: 0px;
}
.form-group .clc-col-2:first-child{
text-align: left;
}
}
/******************************************************************************************************************/
/****************************************************  RESULTS  ***************************************************/
/******************************************************************************************************************/
.wrap-clc-ls-result{
margin-bottom: 20px;
margin-top: 20px;
padding: 20px;
border: 1px solid #d6d6d6;
}
.clc-ls-result-top{

}
[class^="clc-ls-result-"] ul{
padding-left: 0px;
list-style-type: none;
margin-bottom: 15px;
}
ul.clc-ls-result-bottom{
margin-bottom: 0px;
}
.clc-ls-result-top ul{

}
[class^="clc-ls-result-"] li{
position: relative;
}
[class^="clc-ls-result-"] li:empty{
display: none;
}
[class^="clc-ls-result-"] li span{
display: block;
}
.clc-ls-result-top li:not(:empty){
margin-top: 0px;
/*margin-bottom: 25px;*/
font-size: 2em;
line-height: 1.1;
font-weight: 300;
/*padding-bottom: 5px;*/
/*border-bottom: 5px solid #75e8a7;*/
}
.clc-res-result-top-green{
margin-bottom: 25px;
padding-bottom: 5px;
border-bottom: 5px solid #75e8a7;
}
.clc-res-result-top-yellow{
margin-bottom: 25px;
padding-bottom: 5px;
border-bottom: 5px solid #f5f5b7;
}
.clc-res-result-top-red{
margin-bottom: 25px;
padding-bottom: 5px;
border-bottom: 5px solid #bb2020;
}
.clc-ls-result-top li:not(:empty):before{
content: " ";
}
.clc-ls-body-result{
padding: 20px;
border: 1px solid #d6d6d6;
background: #f9fff8;
}
.clc-ls-canvas{

}
.clc-ls-canvas canvas{
width: 100%;
}
.clc-ls-annotation-result{
padding: 0px 0px 0px 20px;
}
.clc-ls-result-middle{
border: 1px solid #d6d6d6;
padding: 20px;
padding-left: 40px;
font-size: 1.25em;
margin-bottom: 20px;
}
ul[class^="res-plank-"] {
font-size: 0.9em;
border: 3px solid transparent;
padding: 10px;
position: relative;
list-style: none;
}
.middle-item:last-child ul[class^="res-plank-"]{
margin-bottom: 0px;
}
.res-plank-green-wt{
border-color: #c1f5d8 !important;
background: #ddffec;
}
.res-plank-yellow-wt{
border-color: #f5f5b7 !important;
background: #ffffdd;
}
.res-plank-red-wt{
border-color: #f5d2c3 !important;
background: #ffe7dd;
}
.res-plank-blue-wt{
border-color: #c1e2f5 !important;
background: #ddf2ff;
}
.res-plank-orange-wt{
border-color: #f5dbc1 !important;
background: #ffeddd;
}
.res-plank-green{
border-color: #c1f5d8 !important;
background: #ddffec;
}
.res-plank-yellow{
border-color: #f5f5b7 !important;
background: #ffffdd;
}
.res-plank-red{
border-color: #f5d2c3 !important;
background: #ffe7dd;
}
[class^="res-plank-"]:before {
font-family: 'icomoon'!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 2em;
margin-left: -2em;
font-size: 1.5em;
position: absolute;
text-align: center;
left: 0;
}
.res-plank-green:before {
content: "\ea13";
color: #75e8a7;
}
.res-plank-yellow:before {
content: "\ea0a";
color: #ecc753;
}
.res-plank-red:before {
/*content: "\ea10";*/
content: "\ea11";
color: #bb2020;
}
[class^="res-plank-"] span{

}
.clc-ls-result-bottom {
margin-bottom: 0px;
}
.clc-ls-result-bottom ul{
font-size: 0.9em;
margin-bottom: 0px;
padding-left: 0px;
text-align: right;
list-style: none;
}
.clc-ls-result-bottom ul li{
margin-bottom: 5px;
padding-left: 10px;
}
.clc-ls-result-bottom ul li:first-child{
padding-left: 0px;
margin-bottom: 10px;
}
.clc-ls-result-bottom ul li:first-child span{
font-size: 1.1em;
font-weight: 600;
}
@media(max-width: 767px){
.clc-ls-body-result{
margin-bottom: 20px;
}
.clc-ls-annotation-result{
padding-left: 0px;
}
.clc-ls-result-middle{
margin-bottom: 20px;
}
.clc-ls-result-bottom ul{
padding: 10px 10px 10px 15px;
border: 1px solid #d6d6d6;
}
}

/******************************************************************************************************************/
/****************************************************  btn-calc  ***************************************************/
/******************************************************************************************************************/
.btn-calc{
min-width: 150px;
max-width: 250px;
display: inline-block;
margin: 1em;
padding: 1em 2em;
border: none;
background: none;
color: inherit;
vertical-align: middle;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
border: 1px solid;
padding: 0;
color: #0056ff;
border-color: #0056ff;
font-size: 1.5em;
}
.flaging-btn{
position: relative;
z-index: 1;
overflow: hidden;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.flaging-btn:hover{
background-color: #0056ff;
-webkit-transition: background-color 0s 0.3s;
transition: background-color 0s 0.3s;
}
.flaging-btn:before{
content: '';
position: absolute;
left: -50%;
width: 200%;
height: 200%;
background: #0056ff;
top: -50%;
z-index: -1;
-webkit-transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
}
.flaging-btn:hover:before{
-webkit-animation: anim-flaging 0.3s forwards ease-in;
animation: anim-flaging 0.3s forwards ease-in;
}
.btn-calc>span{
display: block;
}
.btn-calc>span, 
.flaging-btn .but_icon{
/*padding: 0.75em 1em;*/
padding: 0.75em 0.75em 0.6em;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.flaging-btn .but_icon{
position: absolute;
top: 0;
width: 100%;
left: 0;
color: #fff;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.flaging-btn:hover .but_icon {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.flaging-btn:hover > span {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
@-webkit-keyframes anim-flaging {
	50% {
		-webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
		transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
		transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
	}
}
@keyframes anim-flaging {
	50% {
		-webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
		transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
		transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
	}
}














