@font-face {
  font-family: 'vagRegular';
  src: url('../fonts/VRB.eot'); /* IE9 Compat Modes */
  src: url('../fonts/VRB.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/VRB.woff') format('woff'), /* Modern Browsers */
       url('../fonts/VRB.ttf')  format('truetype'); /* Legacy iOS */
}
@font-face {
  font-family: 'vagBold';
  src: url('../fonts/VRBL.eot'); /* IE9 Compat Modes */
  src: url('../fonts/VRBL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/VRBL.woff') format('woff'), /* Modern Browsers */
       url('../fonts/VRBL.ttf'); /* Legacy iOS */
}
@font-face {
  font-family: 'vagLight';
  src: url('../fonts/VRL.eot'); /* IE9 Compat Modes */
  src: url('../fonts/VRL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/VRL.woff') format('woff'), /* Modern Browsers */
       url('../fonts/VRL.ttf'); /* Legacy iOS */
}
@font-face {
  font-family: 'vagItalic';
  src: url('../fonts/VRT.eot'); /* IE9 Compat Modes */
  src: url('../fonts/VRT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/VRT.woff') format('woff'), /* Modern Browsers */
       url('../fonts/VRT.ttf'); /* Legacy iOS */
}
body{
    overflow-x: hidden;
}
.login-screen{
    position: fixed;
    top:0;
    bottom:0;
    z-index: 1;
    left:0;
    right:0;
    background: url(../images/login-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#login-form .form-control{
    background:#fff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size:0.85em;
    
    position: relative;
    padding:8px 20px;
    height:38px;
    padding-left:50px;
}
#login-form .form-group:before{
    position: absolute;
    left:40px;
    top:10px;
    bottom:10px;
    background:#ccc;
    width:1px;
    z-index: 10;
    content:"";
}
#login-form  .form-group{
    position: relative;
}
.rounded-btn{
     -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    padding-left:30px;
    padding-right:30px;
    vertical-align: top;
}
.registration-text{
    color:#fff;
    font-size:0.9em;
    padding:10px 0;
    margin:0;
    text-align: center;
}
.login-screen-container{
    width:400px;
    text-align: center;
    height:270px;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
.login-title{
    text-align: center;
    margin-bottom:20px;
    margin-top:0;
    color:#fff;
}
.registration-text a{
    color:#fff;
    text-decoration:underline;
}
.orange{
    color:#ff3700;
}
#login-form .form-control#loginUser{
    background:url(../images/user-icon.png) no-repeat left 12px center #fff;
}
#login-form .form-control#loginPassword{
    background:url(../images/password-icon.png) no-repeat left 12px center #fff;
}
body.internal{
    background:#e4e4e4;
    padding-top:80px;
}
.header{
    background:#fff;
    position: fixed;
    height:80px;
    top:0;
    left:0;
    right:0;
    z-index: 100;
}
.internal-container{
    position: relative;
    max-width: 1000px;
    margin:auto;
    padding:0 15px;
}
.internal-title{
    text-align: center;
    color:#404040;
    margin:20px 0 20px 0;
    font-size:1.8em;
}
.image-container{
    position: relative;
    text-align: center;
}
.image-container img{
    max-width: 100%;
}
.calculators-list{
    margin:200px -1%;
    padding:0;
    list-style:none;
}
.calculators-list > li{
    /*float:left;
    margin:0 1%; Use this when there is more than 1 tool */
    margin: auto;
    background:#fff;
    padding:20px;
      -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:31.33%;
    margin-bottom:20px;
    text-align: center;
}
.calculators-list > li h3.calculator-title{
    font-size:1.2em;
    margin-top:0;
}
.calculator-btn{
    display:inline-block;
    background:#f0f0f0;
    padding:6px 20px;
       -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size:0.85em;
        -webkit-transition:all 500ms ;
    -moz-transition: all 500ms ;
    -o-transition: all 500ms ;
    transition: all 500ms ;
}
.calculator-btn:hover,.calculator-btn:focus{
    color:#fff;
    background:#ff3700;
    
}
.logo{
    position: absolute;
    left:15px;
    top:10px;
    bottom:10px;
}
.logo-subline{
    font-size:1.2em;
    position: absolute;
    left:180px;
}
.v-line{
    position: absolute;
    left:160px;
    top:20px;
    bottom:20px;
    width:1px;
    background:#e4e4e4;
}
.burger-menu{
    display:block;
    cursor:pointer;
    position: absolute;
    right:20px;
    top:25px;
    bottom:25px;
    width:30px;
    height:30px;
}
.burger-line{
    background:#404040;
    height:1px;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
    left:0;
    right:0;
     -webkit-transition:all 500ms ;
    -moz-transition: all 500ms ;
    -o-transition: all 500ms ;
    transition: all 500ms ;
}
.burger-line:before{
    content:"";
    display:block;
    height:1px;
    position: absolute;
    background:#404040;
    bottom:10px;
    left:0;
    right:0;
     -webkit-transition:all 500ms ;
    -moz-transition: all 500ms ;
    -o-transition: all 500ms ;
    transition: all 500ms ;
}
.burger-line:after{
    content:"";
    display:block;
    height:1px;
    position: absolute;
    background:#404040;
    top:10px;
    left:0;
    right:0;
     -webkit-transition:all 500ms ;
    -moz-transition: all 500ms ;
    -o-transition: all 500ms ;
    transition: all 500ms ;
}

 .burger-menu.highlight .burger-line{

     background:transparent;
 }
 .burger-menu.highlight .burger-line:before, .burger-menu.highlight .burger-line:after{
        transform-origin: 0 50%;
        background:#404040;
 }
 .burger-menu.highlight .burger-line:before{
      transform: rotateZ(0.78539816rad);

     
 }
  .burger-menu.highlight .burger-line:after{
      transform: rotateZ(-0.78539816rad);

 }
.overlay{
    position: fixed;
    z-index: 50;
    background:rgba(0,0,0,0.4);
    top:0;
    bottom:0;
    right:0;
      -webkit-transition:all 300ms ;
    -moz-transition: all 300ms ;
    -o-transition: all 300ms ;
    transition: all 300ms ;
}
.side-menu{
    background:#e4e4e4;
    width:375px;
    right:-375px;
    top:80px;
    bottom:0;
    position: fixed;
    z-index: 55;
    padding:20px;
      -webkit-transition:all 500ms ;
    -moz-transition: all 500ms ;
    -o-transition: all 500ms ;
    transition: all 500ms ;
}
.internal.open .side-menu{
    right:0;
}
.internal.open  .overlay{
    left:0;
}
.side-menu-list{
    margin:0;
    padding:0;
    list-style:none;
}
.side-menu-list > li a{
    display:block;
    padding:10px 15px;
    font-size:1.1em;
}
.side-menu-list > li a:hover{
    background-color: #c5c5c5;
}
.side-menu-list > li.active a{
    color:#fff;
    background:#ff3700;
}
.side-menu-list > li {
    border-bottom:1px solid #ccc;
}
.side-menu-list > li:last-child{
    border-bottom:0;
}
.navigation-line{
    padding:15px 15px 15px 110px;
    background:#ff3700;
    margin-bottom:20px;
    position: relative;
}
.navigation-line .internal-title{
    margin:0;
    color:#fff;
    font-size:1.2em;
    text-align: left;
}
.information-line{
    padding:15px;
    background:grey;
    margin-bottom:20px;
    position: relative;
}
.information-line .internal-title{
    margin:0;
    color:#fff;
    font-size:1.2em;
    text-align: center;
}
.back-btn{
    background:url(../images/left-arrow.png) no-repeat left 15px center #fff;
       -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size:0.85em;
    display:inline-block;
    padding:6px 15px 6px 35px;
    color:#ff3700;
    width:75px;
    height:28px;
    position: absolute;
    left:15px;
    top:0;
    bottom:0;
    margin:auto;
}
.calculator-preview{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background:#fff;
}

.calculator-left, .calculator-right {
    flex: 1;
    padding: 20px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.calculator-left {
    border: 1px solid #ccc;
}

.calculator-right {
    border: 1px solid #ff3700;
}

.calculator-controls {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.calculator-title {
    margin:0 0 15px 0;
    font-size:1.3em;
    font-family: 'vagBold';
}
.italic-text{
    color: black !important;
    font-family: 'vagLight';
    font-style:italic;
    font-size:0.75em;
}
.calculator-right .calculator-title{
    color:#ff3700;
}
.calculator-form .form-control{
    padding-right:60px;
    font-size:0.85em;
    background:#fff;
    position: relative;
    
}
.calculator-form  .form-group,.form-horizontal .control-label{
    text-align: left;
    font-weight: normal;
}
.dimension-data{
    position: relative;
}
.dimension-data .dimension-data-value{
   display:inline-block;  
   color:#fff;
   background:#404040;
   z-index: 1;
   padding:3px 10px;
   font-size:0.7em;
   position: absolute;
      -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    right:20px;
    height:20px;
    top:0;
    bottom:0;
    margin:auto;
}
.calculator-right .dimension-data .dimension-data-value{
    background:#ff3700;
}
.calculator-right .form-control{
    border-color:#ff3700;
}
.form-horizontal .calculator-right .control-label{
    color:#ff3700;
}
.product-link{
    text-decoration: underline;
    color:#ff3700;
}
.calculator-right{
    background:#f7efec;
}
.product-link:hover{
    color:#ff3700;
}
.new-btn{
    display:inline-block;
    padding: 6px 30px;
    margin-right: 10px;
    border: 1px solid transparent;
}
.add-to-favorite {
    background:url(../images/favorite.png) no-repeat left 15px center;
    border: 2px solid grey;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    cursor:pointer;
    padding: 6px 15px 6px 40px;
}
.add-to-favorite:hover {
    color: #ff3700;
    border: 2px solid #ff3700;
}
.add-to-favorite.highlight{
     background:url(../images/favorite-active.png) no-repeat left 15px center;
}
.new-btn{
    background:#f0f0f0;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.btns-container{
    padding:0px 0;
    margin-top: 20px;
}
.calculator-blocks{
    margin:0 -1%;
    padding:0;
    list-style:none;
    margin-top:15px;
    margin-bottom: -15px;
}
.calculator-blocks > li {
    float:left;
    width:48%;
    margin:0 1%;
    padding-bottom: 20px;
}
.calculator-blocks > li a{
    display:block;
     -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    height:210px;
    background:#fff;
    padding:20px;
}
.calculator-block-title{
    margin:0;
    font-size:1.1em;
    font-family: 'vagBold';
    text-align: center;
}
.cbi-title{
    font-size:0.8em;
    display:block;
    text-align: center;
}
.cbi-value{
    color:#ff3700;
    display:block;
    font-family: 'vagBold';
    text-align: center;
    font-size:1.3em;
}
.calculator-block-items-list{
    margin:0;
    padding:0;
    list-style:none;
}
.calculator-block-items-list > li{
    float:left;
    width:33.333%;
    padding:10px;
    text-align: center;
}
.calculator-block-items-list > li img{
    max-width: 100%;
}

.calculator-blocks-footprint {
    display: flex!important;
    flex-direction: column;
}

.calculator-blocks-footprint > div {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.calculator-blocks-footprint > div > div:first-child {
    width: 33.333%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.calculator-blocks-footprint > div > div:last-child {
    flex-grow: 1;
    flex-shrink: 1;
}

.table-customized{
    background:#fff;
}
.table-customized th,.table-customized td{
    border:1px solid #ccc!important;
} 
.table-customized td{
    font-size:0.9em;
}
.checkbox-option{
    display:none;
}
.table-customized  .checkbox  {
    display: inline-block;
    width:30px;
    height:30px;
    margin:auto;
    margin-left:-35px;
    margin-top: -10px;
    margin-bottom: -10px;
    cursor:pointer;
    z-index: 20;
}
.table-customized  .checkbox   label{
    background:url(../images/check.png) no-repeat center center;
    display:block;
    width:30px;
    height:30px;
    padding:0;
}
.table-customized  .checkbox label.selected{
    background:url(../images/check-active.png) no-repeat center center;
}
.gray-label{
   display:inline-block;  
   color:#fff;
   background:#404040;
   padding:3px 10px;
   font-size:0.7em;
   -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.orange-label{
     display:inline-block;  
   color:#fff;
   background:#ff3700;
   padding:3px 10px;
   font-size:0.7em;
   -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.table-customized td.orange-cell,.table-customized th.orange-cell{
    color:#ff3700;
    background:#f7efec;
    border-color: #ff3700!important;
}

.table-customized .br-orange {
    border-right-color: #ff3700!important;
}

.table-customized td.grey-cell, .table-customized th.grey-cell {
    background: #f1f2f7;
}

.table-customized tr td:first-child{
    padding-left:20px;
}
.internal-subtitle{
    font-size:1.2em;
}
.muted-label{
    font-weight: normal;
    font-size:0.9em;
    color:rgba(64,64,64,0.6);
}
.rounded-form{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.muted-text{
    font-size:0.75em;
    color:rgba(64,64,64,0.6);
    padding:10px 0;
}
.calculators-list .calculator-title{
    font-size: 1.1em !important;;
    margin-top: 0;
     font-family: 'vagLight';
}
.small-btn{
    padding:4px 15px;
}
.input-errors {
    position: relative;
    background-color: #ff3700;
    padding: 10px 0px 1px 0px;
}
@media(max-width:1000px){
    .calculators-list .calculator-title{
        font-size: 1em !important;
    }
}
@media(max-width:768px){
    .calculator-blocks > li{
        width:100%;
        margin-bottom:15px;
    }
    .calculator-blocks > li:last-child{
        margin-bottom:0;
    }
    .calculator-blocks{
        margin:15px 0 0 0;
    }
    .calculators-list .calculator-title{
        font-size: 0.85em !important;
    }
    .calculators-list > li{
        padding:15px;
    }
    .internal-title{
        font-size:1.5em;
    }
    .logo{
        width:100px;
    }
    .logo img{
        max-width: 100%;
    }
    .header{
        height:70px;
    }
    body.internal{
        padding-top:70px;
    }
    .logo-subline{
        font-size:1em;
        left:130px;
    }
    .v-line{
        display:none;
    }
    .side-menu{
        top:70px;
    }
    .calculator-left,.calculator-right{
        padding:15px;
    }
    .table-customized tr td:first-child{
        padding-left:40px;
    }
    .responsive-cont{
        overflow-x: scroll;
    }
}
@media(max-width:640px){
    .login-screen-container{
        padding:0 20px;
        width:300px;
    }
    .calculators-list > li{
        width:48%;
        margin-bottom:10px;
        height:200px;
    }
}

/* Hide the arrows in input number fields */
input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* show erros in white */
form ul li {
    list-style-type: none;
    color: white;
}

.btn-grey {
    background-color: grey;
    color: white;
}
.btn-grey:hover {
    color: white;
}