/*///////////////////////////// GENERAL /////////////////////////////////////*/

*:active {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -moz-tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: rgba(0,0,0,0);
}

@font-face { font-family: 'pano-regular';
             src: url('../assets/fonts/ILTKTA+Pano-Regular.woff')  format('woff'); }
@font-face { font-family: 'pano-light';
             src: url('../assets/fonts/ILTKTA+Pano-Light.woff')  format('woff'); }
@font-face { font-family: 'pano-BI';
             src: url('../assets/fonts/ILTKTA+Pano-BoldItalic.woff')  format('woff'); }
body {
  background-color: #000;
  margin: 0;
  overflow: hidden;
  font-family: 'Titillium Web', "Montserrat", sans-serif;
  font-size: 16px;
  color:white;
}
/*/////////////////global classes to control appearance/////////////////////*/
.hideVue #vueJSDiv{/*hides vue instance until initialized*/
    visibility: hidden;
    display:none;
}
.bright{/*white background, black text and icons*/
  color:black;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#main_canvas_container {/*b4w canvas*/
  position: absolute;
  left: 0px;
  top: 0px;
  right:0px;
  bottom:0;
  z-index:10;
  cursor:all-scroll;
}

.devNote{
    position: absolute;
    max-width: 90%;
    width:400px;
    left: 50vw;
    top:20px;
    z-index: 20;
    background: #E51B27;
    padding: 12px;
    text-align: center;
    transform: translate(-50%,0);
}

/*///////////////////////////////// CATHEGORY SELECTION //////////////////////////////////////*/

.UI_h1 {/*cathegory link*/
  text-transform: uppercase;
  letter-spacing: 2pt;
  cursor:pointer;
  padding: 16px 0px 16px 0px;
  margin-left: 26px;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.UI_h1:hover {
  color:grey;
  border-color:grey;
}
.UI_h1.active{/*last selected cathegory*/
    color: #E51B27;
}
.scrollable > .UI_h1{
    margin-left: 29px;
    width: 258px;
    /*! color: #ddd; */
    font-family: 'Pano-BI';
    font-size: 17px;
    padding-bottom:0px;
}
.scrollable > .UI_h1 .weight{
    color:#777;
    display:none;
}

.mainCath{
    background: #333;
    margin: 3px;
    width: 280px;
    margin-left: 5px;
}
.mainCath.open{
    background: #E51B27;
}

.h1_List{
    padding-bottom:20px;
}

.UI_h1 .weight{
    text-transform: none;
    float:right;
    padding: 0 14px 0 0;
    color: #777;
}
.mainCath.open .weight{
    color:#fff;
}

/*/////////////////////////////////preconfigurations///////////////////////////////*/
#preconfigs{/*container*/
  color:black;
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  text-align: center;
  overflow: hidden;
}
/*logo cutout*/
#preconfigs #cutout{
  position:absolute;
  top:0;
  left:76%;
  height:100%;
  z-index:802;
  transform: translate(-76%,0);
  visibility: visible;
}

/*/////////////////////.enter:is assigned when entering the configurator / preconfigs hidden*/

.enter #preconfigs #cutout{/*out animation of logo cutout*/
  animation-name: cutoutAnim;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
@keyframes cutoutAnim{
  from{opacity: 1;pointer-events: none;}
  to{opacity:0;visibility: hidden; display: none;}
}
@media (min-width: 1201px) and (min-height: 801px) {
    .enter #preconfigs #cutout{/*out animation of logo cutout*/
      animation-name: cutoutAnim;
      animation-duration: 4s;
      animation-fill-mode: forwards;
      animation-timing-function: ease;
    }
    @keyframes cutoutAnim{
      0%{left:72%;}
      40%{left:0%; transform: translate(-35%,0) scale(1)}
      50%{left:0%; transform: translate(-35%,0) scale(1);opacity:1; pointer-events: none;}
      to{transform: translate(-55%,0) scale(4);opacity:0;visibility: hidden; display: none;}
    }
}
/*bgimage*/
#preconfigs #bgImg{
  position: absolute;
  top:0;
  left:0;
  height:100%;
  z-index: 801;
}
.enter #preconfigs #bgImg{
  animation-name: bgImgAnim;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes bgImgAnim{
  0%{visibility: hidden;display: none;}
  to{visibility: hidden;display: none;}
}
@media (min-width: 1201px) and (min-height: 801px) {
    @keyframes bgImgAnim{
      from{left:0%;}
      to{left:-100%;visibility: hidden;display: none;}
    }
}
    
#preconfigs .close{/*close /cancel button*/
    position: absolute;
    top:20px;
    right:20px;
    border-color: black;
    color:black;
    z-index:806;
    display: none;
}

.didenter #preconfigs .close{/*show close icon if preconfiguration was selected*/
    display: block;
}
.enter #preconfigs .close{
    display: none;
}

#preconfigs #logo{
  height:30px;
}
#preconfigs #title{
  font-family: 'Pano-light', 'Titillium Web', "Montserrat", sans-serif;
  font-size: 20pt;
  margin-top: 86px;
  margin-bottom: 38px;
}
/*preconfiguration options*/
#preconfigs .preconfig{
    position: absolute;
    top: 93px;
    left:calc(75%);
    z-index:805;
    width:1500px;
    visibility:visible;
    transform: translate(-1125px, 0);
}
#preconfigs .loadCustom,
#preconfigs .loadingSoon{
    color: #E51B27;
    font-size: 22pt;
    margin-top: 86px;
    display: none;
    position: relative;
}
/*//////.hidePreconfig: used when custom configuration is loaded to hide preconfiguration menu*/
.hidePreconf #preconfigs .loadCustom,
.soon #preconfigs .loadingSoon{
    display:inherit;
}
.hidePreconf #preconfigs .config,
.soon #preconfigs .config{
    display: none;
}
.hidePreconf #preconfigs #title,
.soon #preconfigs #title{
    display: none;
}
.hidePreconf #preconfigs .close,
.soon #preconfigs .close{
    display: none;
}

/*out anim for preconfigurations*/
.enter #preconfigs .preconfig{
  animation-name: preconfAnim;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}
@keyframes preconfAnim{
  from{left:66%;}
  to{left:86%;opacity:0;visibility:hidden;}
}

#preconfigs .config{
    cursor: pointer;
    text-align: left;
    display:inline-block;
    width:265px;
    padding:15px;
    position: relative;
    background-color: rgba(255,255,255,.75);
}
#preconfigs .config:hover{
  background-color: #f2f2f2;
}
#preconfigs .config.disabled{
    opacity:.5;
    background:white;
    cursor:not-allowed;
    border-radius: 30px;
    display: none;
}
#preconfigs .config.active{
  background-color: #E51B27;
  background-color: #ddd;
}
#preconfigs .config .image{
  height: 240px;
  background-size: cover;
  background-position: center center;
  margin: -5px;
}
#preconfigs .config.active .image{

}
#preconfigs .config .title{
  font-family: 'Pano-light', 'Titillium Web', "Montserrat", sans-serif;
  padding-top: 22px;
  font-size: 18pt;
  text-transform:uppercase;
}
#preconfigs .config .type{
    font-size:18px;
    margin-bottom:20px;
    text-transform:uppercase;
}
#preconfigs .config .type::before{
    content: "I";
    color: #E51B27;
}
#preconfigs .config .description{
    height:60px;
}
#preconfigs .config .startBtn{
    background: #E51B27;
    color:white;
    text-align: center;
    width:100%;
    padding: 10px 0 10px 0;
}


.loadbar{
    position: absolute;
    top: 5px;
    left:5px;
    right:5px;
    text-align: center;
}
.loadCustom .loadbar{
    position: absolute;
    width: 250px;
    left:calc(50% - 125px);
    top:50px;
}
.loadbar .bar{
    position: relative;
    width: 100%;
    height:7px;
    background:#ccc;
}
.loadbar .bar .loadProgress{
    background: #E51B27;
    height:100%;
    width:1%;
    font-size: 22pt;
}

.loadbar .loadText{
    right:0;
    text-align: right;
    font-size: 16px;
}

/*hide on preconfigurations until selected*/
.config .loadbar{
    display: none;
}
.config.active .loadbar{
    display: block;
}
/*
.didenter .loadbar{
    display:none;
}
*/

@media (max-height:910px){
    #preconfigs #title{
        margin-top: 20px;
    }
    #preconfigs .preconfig{
        top: 50px;
    }
}

@media (max-width: 1500px), (max-height: 800px) {
    #preconfigs{
        padding-top: 0px;
    }
    #preconfigs #logo{
        height: 25px;
    }
    #preconfigs #title{
        font-size: 11pt;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    #preconfigs .preconfig{
        overflow-y: auto;
        left:50%;
        transform: translate(-50%,0);
        max-width: 100%;
        bottom:0px;
        padding-top: 33px;
        top:0px;
        width:740px;
    }
    #preconfigs #cutout{
        background-color: white;
        width: 100%;
    }
    #preconfigs .config{
        width:310px;
        height: 180px;
        margin-top:5px;
    }
    #preconfigs .config .image{
        margin-top:5px;
        height: 130px;
        width: 147px;
        float:right;
        background-position: center top;
    }
    #preconfigs .config .title{
        margin-top:10px;
        margin-bottom:0px;
        font-size: 14pt;
        padding-top:0;
    }
    #preconfigs .config .type{
        margin-bottom: 10px;
        font-size: 11pt;
    }
    #preconfigs .config .description{
        margin-top: 0px;
        height:70px;
        font-size: 11pt;
    }
}
@media (max-width: 1200px) and (orientation: portrait), (max-height: 800px) and (orientation: portrait) {
    #preconfigs .preconfig{
        padding-bottom: 80px;/*this is so there is enough space on the bottom to scroll on mobile devices*/
    }
}

/*////////////////////////////////MAIN cathegory selection/////////////////////////////*/
#Mainmenu .contentContainer{
    background-color:rgba(10, 10, 10, 0.8);
}
#Mainmenu{
  position:absolute;
  z-index:100;
  font-size:14px;
      right:0px;
      width:290px;
      left: auto;
}
#Mainmenu .gradient{
    height:30px;
    margin-top:-30px;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0));
}

@media (min-width: 901px) and (min-height: 601px){
    /*desktop only: menu on the right*/
    #Mainmenu{
      bottom: 0;
      /*optionMenu class override*/
      visibility: visible;
      opacity:1;
      transition: right .5s, opacity .5s;
    }
    #Mainmenu .contentContainer{
        transition: left .6s, right .6s;
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
    }
    #Mainmenu #askBtn{
        left:0;
        transition: left .6s;
    }
    #Mainmenu.inactive .contentContainer{
        left:262px;
        right: -262px;
    }
    #Mainmenu.inactive #askBtn{
        left: -262px;
    }
    #Mainmenu.inactive:hover .contentContainer{
        left:0px;
        right:0px;
        transition: left .3s, right .3s;
    }
    #Mainmenu.inactive:hover #askBtn{
        left: 0px;
        transition: left .3s;
    }
    #Mainmenu .bottom{
        position:absolute;
        bottom:0;
    }
    #Mainmenu .scrollable{
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      left:0px;
      top:5px;
      bottom: 205px;
      width: 290px;
      padding-right: 25px;
    }
    #Mainmenu:hover .scrollable{
        width:260px;
    }
    #Mainmenu .spacer{
        height: 20px;
    }
}

@media (max-width: 900px),(max-height: 600px){
    #Mainmenu{
        overflow-y: auto;
        bottom:64px;
      transition: top .3s, opacity .3s;
        overflow-x: hidden;
    }
    #Mainmenu.hidden{
        top: calc(100vh - 100px);
    }
    #Mainmenu .contentContainer{
        min-height: calc(100% - 20px);
        padding-bottom: 20px;
    }
    #Mainmenu .gradient.mobileOnly{
        position: fixed;
        bottom:64px;
        width: 100%;
    }
}

#Mainmenu .weightSum{
    border-top: 1px solid #666;
    color:#777;
    margin: 5px;
    margin-top:7px;
    padding: 9px 0px 10px 25px;
    width: 240px;
    font-size: 15px;
    height: 23px;
    /**/
    border:none;
    margin-top:0;
    padding-top:0;

    display: flex;
    justify-content: space-between;
    position: relative;
}
#Mainmenu .weightSum .label{
    text-transform: uppercase;
}
#Mainmenu .weightSum .weight{
    flex-grow: 1;
    font-size: 16px;
    text-align: right;
}
#Mainmenu .weightSum .weightibtn{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #777;
    color: #000;
    border: 2px solid black;
    text-align: center;
    font-weight: bold;
    line-height: 16px;
    margin-top: 2px;
    margin-left: 5px;
    cursor: pointer;
}
#Mainmenu .weightSum .weightibtn:hover{
    background-color: #ccc;
}
#Mainmenu .weightSum .weightinfo{
    position: absolute;
    top: 22px;
    left: 5px;
    margin-right: -5px;
    background-color: #333;
    padding: 5px;
    border-radius: 2px;
    color: #ccc;
    text-align: left;
    font-weight: normal;
    border: 1px solid #ccc;
    pointer-events: none;
    
    transform-origin: top center;
    transform: scale(.1);
    opacity: 0;
    transition: opacity .3s, transform .3s;
}
#Mainmenu .weightSum .weightibtn:hover .weightinfo{
    opacity: 1;
    transform: scale(1);
    transition: opacity .1s, transform .1s;
}

/*/////////////////////////Save Menu///////////////////////////////////*/
#saveMenu{
    min-width:280px;
    max-width: 500px;
}
#saveMenu .label{
    padding: 0px 0 5px 7px;
}
#saveMenu .code,
.codeInput input,
#printMenu .code{
    font-family: 'Inconsolata', monospace;
    margin-left:calc(50% - 140px);
    background: #eee;
    width:280px;
    font-size: 23px;
    line-height: 61px;
    border:none;
    text-align: center;
}

#saveMenu .codeDescription{
    font-family: 'Inconsolata', monospace;
    padding: 5px 0 0px 7px;
    color:#222;
}
#saveMenu .codeNote{
    font-family: 'Inconsolata', monospace;
    padding: 5px 0 30px 7px;
    color: #E51B27;
    width: 100%;
    text-align: center;
}
/*#saveMenu .klammerContainer{
    position:absolute;
    width: 280px;
    height: 61px;
}
#saveMenu .klammer{
    border:1px solid  black;
    width:20px;
    height:20px;
    position: absolute;
}
#saveMenu .klammer.t{
    top:0;
    border-bottom: none;
}
#saveMenu .klammer.b{
    bottom:0;
    border-top:none;
}
#saveMenu .klammer.r{
    right:0;
    border-left:none;
}
#saveMenu .klammer.l{
    left:0;
    border-right:0;
}*/

#manualCode{
    margin-top: 30px;
    width:380px;
    margin-left:calc(50% - 190px);
}
#manualCode.hidden{
    background: none;
}
.enter #manualCode,
.hidePreconf #manualCode{
    display: none;
}
#manualCode.hidden .codeInput,
#manualCode.hidden .loadCode{
    display: none;
}
#manualCode .show{
    color:#444;
    cursor: pointer;
}
#manualCode.hidden .show:hover{
    color: #E51B27;
}
.codeInput{
    font-size: 0;
    margin-bottom:45px;
}
.codeInput input{
    vertical-align: top;
    display: inline-block;
    width:230px;
    height: 40px;
    margin:0;
    margin-left:5px;
    padding:0;
    font-size: 18px;
}
.codeInput input::placeholder,
.codeInput input::-webkit-input-placeholder{
  font-size: 12px;
}
.codeInput input:-ms-input-placeholder{
  font-size: 12px;
}
.codeInput .loadCode{
    vertical-align: top;
    display: inline-block;
    float:none;
    width:40px; 
    height:40px;
    margin:0;
    background: #aaa;
}
.codeInput .loadCode .icon{
   width: 40px;
   height: 40px;
    margin:0;
}
.codeInputLabel{
    margin:20px 0 5px 5px;
}

/*////////////////////////////part selection///////////////////////*/
#floatingMenu{
  position:absolute;
  top:10px;
/*  bottom:10px; this would be the clean solution to navbars on mobile, but we cannot use max-height for some reason on the child divs, so it wont work */
  left:75px;
  z-index:104;
  width: 520px;
  overflow: hidden;
}
#floatingMenu .v2Menu{
    position: relative;
    background: rgba(60,60,60,.84);
/*
    height:auto;
    max-height:100%;
*/
}
#floatingMenu .scrollable{
    padding: 0;
    margin-right: -20px;
    max-height:calc(100vh - 80px);/*80px to have neough room on iphone android when navbar is on. keep in synch wih anchor javascript code*/
    overflow-x: hidden;
    overflow-y: auto;
}
#floatingMenu .scrollable .spacer{
    height: 70px;
}
#floatingMenu:hover .scrollable{
    margin-right:0;
}
#floatingMenu:hover .scrollable > div{
    margin-right:-20px;
}

.anchor{
    display:none;
    position:absolute;
    top:50vh;
    left:calc(50vw - 50px);
    z-index: 103;
    width:10px;
    height: 10px;
    border-radius: 5px;
    background:white;
    pointer-events: none;
}
#anchorLine{
    z-index:105;
    position: absolute;
    top:60px;
    left:595px;
    height:1px;
    background:white;
    pointer-events: none;
}
#anchorLine .dot{
    position: absolute;
    right:-5px;
    top:-5px;
    width:10px;
    height:10px;
    border-radius: 5px;
    background:white;
}

#floatingMenu .ctaBtn{
    margin: 5px;
}
#floatingMenu #nextBtn{
    float:right;
    width:150px;
}
#floatingMenu #prevBtn{
    width:60px;
}

#partSelection{
  max-height:calc(100vh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
}
.v2Menu .cathegory:first-of-type{
    padding-top:20px;
}
#partSelection .product{
  cursor: pointer;
  height:100px;
  width:500px;
  padding:0 20px 0 20px;
  background-color: #535353;
  overflow: hidden;
  -webkit-transition: all .5s;
  transition: all .3s;
}
.bright #partSelection .product{
    background-color: #eaeaea;
}
#partSelection .product:nth-child(odd){
  background-color: #484848;
}
#partSelection .product:hover{
  background-color: #70706f;
  transition: height .5s, background-color .0s;
}
#partSelection .product.incompatible{
  opacity:.2;
}
#partSelection .product.selected{
  height:275px;
  background-color: #E51B27 !important;
}
#partSelection .product .name{
  float:right;
  width: 290px;
  font-size: 14pt;
  padding: 35px 0 60px 0;
  transition: padding .5s;
  text-transform:uppercase;
  letter-spacing:1pt;
}
.v2Menu #partSelection .product.hidden,
.v2Menu #partSelection .product.incompatible.hideIncompatible,
.v2Menu #partSelection .product.hideLanguage{
    display: none;
}
#partSelection .product.selected .name{
  padding-bottom: 20px;
}
#partSelection .product .description{
  float:right;
  width: 290px;
  font-size:11pt;
}
#partSelection .product .image{
  float:left;
  width: 200px;
  height:345px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}

.v2Menu #partSelection{
    margin: 0;
    padding: 12px 0 0px 20px;
    overflow:hidden;
}
.v2Menu #partSelection .product{
    display:block;
    width:64px;
    height:64px;
    float:left;
    cursor: pointer;
    margin: 0 5px 44px 0px;
    padding:0;
    background: #555;
    overflow: visible;
}
.v2Menu #partSelection .product:hover{
    background: #666;
}
.v2Menu .cathegory.noName #partSelection .product{
    margin-bottom: 30px;
}
.v2Menu #partSelection .product.newline{
    clear: both;
}
.v2Menu .cathegory.downshift #partSelection .product{
    margin-top: 24px;
    margin-bottom:22px; 
}

.v2Menu #partSelection .subcathegory{
    margin-top:-25px;
    width:340px;
    overflow: hidden;
    color:#777;
    pointer-events: none;
}
.v2Menu #partSelection .subcathegory .container{
    width: 600px;
}
.v2Menu #partSelection .subcathegory .label{
    display: inline-block;
    /*width:100px;*/
}
.v2Menu #partSelection .subcathegory .line{
    display: inline-block;
    height: 13px;
    border-bottom:1px solid #777;
    vertical-align: top;
    margin-left:5px;
    width:355px;/*240px;*/
}
.v2Menu #partSelection .product{
    margin-bottom: 60px;
}
.v2Menu .cathegory.shortname #partSelection .product{
    margin-bottom: 28px;
}
.v2Menu .cathegory.shortname.notedescription #partSelection .description{
    color: #bbb;
    margin-bottom: 15px;
}

.v2Menu #partSelection .product .image{
    width: 100%;
    height: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}
.v2Menu #partSelection .product.selected{
  background-color: #E51B27 !important;
  display: block !important;
}
.v2Menu #partSelection .product .name{
    display: none;
    margin-top:68px;
    margin-left: -22px;
   width:108px;
    float:none;
    padding:0;
    text-align: center;
    text-transform: none;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .1pt;
}
.v2Menu #partSelection .product.selected .name{
    display: block;
}
.v2Menu .cathegory.noName #partSelection .product.selected .name{
    display:none;
}
.v2Menu .cathegoryName {
  /*! font-family: 'Pano-light', 'Titillium Web', "Montserrat", sans-serif; */
  font-size: 18pt;
  text-align: left;
  letter-spacing: .1pt;
  padding: 0px 0px 0px 0px;
  margin:0px 40px 0 20px;
  min-height:40px;
  border-bottom: 1px solid white;
}
.v2Menu .cathegoryName.noline,
.v2Menu #partSelection.noline{
    border-right: none;
}
.v2Menu .productName,
.v2Menu .description{
    display: none;
}
.v2Menu .specialNote{
    background: #0007;
    padding: 5px;
    margin: 3px -3px 3px -3px;
}

.v2Menu .cathegory.withdescription #partSelection .product{
    margin-bottom:5px;
}
.v2Menu .cathegory.withdescription #partSelection .product.selected .name{
    display: none;
}
.v2Menu .cathegory.withdescription #partSelection .productName{
    display: block;
    clear:both;
    padding: 7px 0px 4px 0px;
    margin-right: 40px;
    font-size: 14px;
    /*border-bottom: 1px solid #999;*/
}
.v2Menu .cathegory.withdescription #partSelection .description{
    display: block;
    clear:both;
    padding: 0px 0px 25px 0px;
    margin-right: 40px;
    font-size: 14px;
    color:#bbb;
}
.v2Menu .cathegory.withdescription #partSelection .description .weight{
    margin-top:5px;
    color: #fff;
}

.v2Menu .cathegory.withdescription.noName #partSelection .productName{
    display:none;
}

.v2Menu .cathegory.notedescription #partSelection .description{
    display: block;
    clear:both;
    padding: 0px 0px 10px 0px;
    margin-right: 40px;
    font-size: 14px;
    color:#777;
}
.v2Menu .cathegory.hidden{
    display: none;
}

#floatingMenu .v2Menu .bottom{
    position: absolute;
    left:0;
    bottom: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(60,60,60,1), rgba(60,60,60,0));
    pointer-events: none;
}
#floatingMenu .v2Menu .ctaBtn{
    float:right;
    margin: 10px 17px 10px 10px; 
    padding:0px 5px 0 10px;
    pointer-events: all;
}
@media (max-width: 900px) ,(max-height: 600px){
    #floatingMenu .v2Menu .ctaBtn{
        margin:5px;
    }
}
@media (max-width: 1500px){
    #floatingMenu{
        left:0;
        width:450px;
    }
    #anchorLine{
        left:450px;
    }
}
@media (max-width: 900px){
    #floatingMenu{
        left:0;
        min-width:360px;
        width: 100%;
        top: 0;
    }
    #anchorLine{
        display: none !important;
    }
    .v2Menu #partSelection{
        padding-left:10px;
        padding-top:9px;
    }
    .v2Menu .cathegoryName{
        margin-left:10px;
        margin-right:30px;
    }
}

.button{
  display: inline-block;
  position:relative;
  cursor: pointer;
  width: 64px;
  height:64px;
  line-height: 64px;
  text-align: center;
  vertical-align: middle;/*bottom*/
  -webkit-transition: all .2s;
  transition: opacity .2s;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.icon{
    width: 64px;
    height:64px;
    background-image: url(../assets/icons/icons.svg);
    background-size: 2600% 100%;
}
.bright .icon, #preconfigs .icon{
    background-image: url(../assets/icons/icons_w.svg);
    background-size: 2600% 100%;/* 1664px 64px;*/
    /*background-size: auto 100%;
    background-size: cover;*/
}
.ctaBtn .icon{
    background-image: url(../assets/icons/icons.svg);
}
.icon.right     {}
.icon.menu      {background-position: -100% 0px !important;}
.icon.left      {background-position: 4% 0px !important;}
.icon.document  {background-position: 8% 0px !important;}
.icon.mail      {background-position: 12% 0px !important;}
.icon.bgcolor   {background-position: 24% 0px !important;}
.icon.share     {background-position: -500% 0px !important;}
.icon.camera    {background-position: -600% 0px !important;}
.icon.burger    {background-position: 20% 0px !important;}
.icon.plus      {background-position: 24% 0px !important;}
.icon.minus     {background-position: 28% 0px !important;}
.icon.video     {background-position: -1000% 0px !important;}

.icon.close     {background-position: 36% 0px !important;}

.icon.settings  {background-position: 56% 0px !important;}

.icon.view      {background-position: 16% 0px !important;}
.icon.sideview  {background-position: 84% 0px !important;}
.icon.frontview {background-position: 88% 0px !important;}
.icon.topview   {background-position: 92% 0px !important;}
.icon.perspview {background-position: 720% 0px !important;}

.icon.link      {background-position: 48% 0px !important;}
.icon.demo      {background-position: 80% 0px !important;}

.icon.instagram {background-position: 76% 0px !important;}
.icon.facebook  {background-position: 64% 0px !important;}
.icon.twitter   {background-position: 60% 0px !important;}
.icon.save      {background-position: 68% 0px !important;}
.icon.share     {background-position: 44% 0px !important;}

.icon.web       {background-position: 32% 0px !important;}
.icon.print     {background-position: 40% 0px !important;}

.icon.half{
    width:32px;
    height:32px;
    background-image: url(../assets/icons/icons_half.svg);
    margin-left:16px;
    background-size: 352px 32px;
    background-position: 0px 0px;
}
.icon.half.plus  {background-position-x: 0% !important;}
.icon.half.minus {background-position-x: 10% !important;}
.icon.half.bar   {background-position-x: 20% !important;}
.icon.half.scroll{background-position-x: 30% !important;}


.button:hover{
  opacity: .6;
}
.button.disabled{
  opacity:.3;
}

.bright #Homebutton{
  border-color:black;
}

.bright #Prevbutton, .bright #Nextbutton{
  border-right-color:black;
  border-left-color:black;
}

.bright .button{
  border-color:black;
}
/*left options menu*/
#optionsMenu{
  z-index:102;
  position: absolute;
  left:0;
  bottom:0;
  bottom: 0;
  width: 64px;
}
#optionsMenu .button{
  border-top: 1px solid #777777;
    opacity:.3;
}
#optionsMenu .button:hover{
    opacity:1;
}
#optionsMenu .button:first-child{
  border-top: none;
}
#optionsMenu .icon{
}

.optionMenu{
  z-index:101;
  position: absolute;
  left:84px;
  top:0;
  bottom:0;
  width:335px; 
  transition: left .5s, visibility .5s, opacity .5s;
  left: 64px;
}
.optionMenu.hidden{
    left:-40px;
    visibility: hidden;
    opacity:0;
}
.optionMenu .close{
    position: absolute;
    right:10px;
    top:27px;
    margin-left:-20px;
    margin-top:-15px;
}
.action{
    cursor: pointer;
    width: 315px;
    height: 54px;
    line-height: 52px;
    padding: 5px;
    padding-left: 15px;
    background-color: #202020;
}
.action:nth-child(1), .grey6{background: hsl(0, 0%, 30%);}
.action:nth-child(2), .grey5{background: hsl(0, 0%, 27%)}
.action:nth-child(3), .grey4{background: hsl(0, 0%, 24%)}
.action:nth-child(4), .grey3{background: hsl(0, 0%, 21%)}
.action:nth-child(5), .grey2{background: hsl(0, 0%, 18%)}
.action:nth-child(6), .grey2{background: hsl(0, 0%, 15%)}
.action:nth-child(7), .grey1{background: hsl(0, 0%, 12%)}
.action:nth-child(8), .grey0{background: hsl(0, 0%, 9%)}

.action.half{
    width: 97px;
    display: inline-block;
    margin-right: -11px;
}
.bright .optionMenu .action{
    background-color: #eaeaea;
}
.bright .action:nth-child(1){background: hsl(0, 0%, 79%)}
.bright .action:nth-child(2){background: hsl(0, 0%, 82%)}
.bright .action:nth-child(3){background: hsl(0, 0%, 85%)}
.bright .action:nth-child(4){background: hsl(0, 0%, 88%)}
.bright .action:nth-child(5){background: hsl(0, 0%, 91%)}
.bright .action:nth-child(6){background: hsl(0, 0%, 94%)}
.bright .action:nth-child(7){background: hsl(0, 0%, 97%)}
.bright .action:nth-child(8){background: hsl(0, 0%, 100%)}

.action.active,
.bright .action.active{
  background-color: #E51B27;
}
.action:hover,
.bright .action:hover{
  background-color: #E51B27;
}
.action .icon{
    margin-left: -15px;
    margin-top: -5px;
    margin-bottom: -5px;
}
.action.red,
.bright .action.red{
  background-color: #E51B27;
}
.action.red:hover,
.bright .action.red:hover{
    background-color: #727272;
}
.action select{
    float:right;
    height: 54px;
    font-size: 12pt;
    padding: 15px;
}
/*/////////////////////////////share buttons///////////////////////////////*/
#Mainmenu .bottom{
        width:290px;
        height:205px;
}
#Mainmenu .codePreview{
    background: #eee;
    height:37px;
    margin: 0 5px 5px 5px;
    line-height: 37px;
    color: #000;
    cursor: pointer;
}
#Mainmenu .codePreview:hover{
    background: #fff;
}
#Mainmenu .codePreview .label{
    float:left;
    margin-left: 10px;
    font-size: 14px;
    display: none;
}
#Mainmenu .codePreview .code{
    font-size: 16px;
    font-family: 'Inconsolata', monospace;
    float:left;
    margin-left: 15px;
}
#Mainmenu .codePreview .codeInfo{
    float:right;
    border: 2px solid #777;
    border-radius: 50%;
    width:20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #777;
    margin: 7px;
}
#Mainmenu .codePreview:hover .codeInfo{
    background: #777;
    color: #fff;
}

.ctaBtn{
    cursor:pointer;
    display:block;
    float:left;
    background:  #E51B27;
    color:white;
    height:60px;
    cursor:pointer;
    text-align: left;
    transition: color .3s;
    margin-left:5px;
    margin-bottom:5px;
    font-size: 16px;
    overflow: hidden;
}
.ctaBtn.half{
    width:132.5px;
}
.ctaBtn.full{
    width:270px;
}
.ctaBtn:hover{
    opacity:1 !important;
    background:#fd2e3b !important;
}
.ctaBtn.hidden{
    display: none;
}
#shareMenu .ctaBtn.full{
    width:228px;
}
#shareBtn{
    width:205px;
    width:207px;
}
#shareBtn .text{
    padding-left:20px;
}
#saveBtn{
    width:60px;
}
#shareBtn, #saveBtn{
    background:none;
    border:2px solid #fd2e3b;
}
#askBtn{
    width:280px;
    height:90px;
}
.ctaBtn .text{
    line-height: 60px;
    padding-left:15px;
    display: block;
    float:left;
}
.ctaBtn .icon{
    display: block;
    float:left;
    margin:0 -22px 0 0px;
    margin: -2px;
}
#askBtn .icon{
    width:80px;
    height:80px;
    margin-top:6px;
    margin-left: 14px;
}
#askBtn .text{
    font-size: 22px;
    padding-left: 30px;
    width: 133px;
    line-height: 30px;
    padding: 12px 0 0 28px;
}

.ctaBtn .icon.floatR{
    float:right;
    margin-left:-18px;
}

/*start "Configure" button on mobile*/
#StartButton{
    margin:0;
    float: right;
    margin-right: 5px;
    width: 280px;
    max-width: calc(100vw - 80px);
}
#StartButton.inactive{
    background: #333;
}
#StartButton.inactive:hover{
    background: #555 !important;;
}
#StartButton .text{
    text-align: center;
    width:calc(100% - 30px);
    padding-right: 15px;
}
#StartButton .icon{
    display: none;
}
#StartButton.inactive .text{
    display:none;
}
#StartButton.inactive .icon{
    display: block;
    float:none;
    margin-left:calc(50% - 32px);
}

/*////////////////////camera menu////////////////////////*/
#cameraMenu{
    top:auto;
    width:auto;
    z-Index:103;
    left:0;
    bottom:64px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}
#cameraMenu .icon{
    display: block;
}
.iconTitle{
    text-align: center;
    font-size: 14px;
    padding-top:7px;
}
#zoombar{
    width: 64px;
    height:128px;
}
#zoombar .scroll{
    height: 128px;
    position: absolute;
}
#zoombar .scroller{ height:48px;}
#zoombar .bar{/*! margin-top: -11px; */}
#cameraMenu .plus{ margin-top:16px; }
#cameraMenu .minus{ margin-bottom: 16px; }

#cameraMenu .grey4{
    padding-bottom:1px;/*fix to contain margin overflow*/
}

/*///////////////////////mobile adjustements//////////////////*/

/*non-mobile / desktop specifics*/
@media (min-width: 901px) and (min-height: 600px){
    /*hide configuration option in non-mobile*/
    .mobileOnly{
        display:none;
    }
    #optionsMenu .bottom{
        position:absolute;
        bottom:0;
    }
}
/*mobile specifics*/
@media (max-width: 900px) ,(max-height: 600px){
    .desktopOnly{
        display:none;
    }
    
    #optionsMenu{
      padding:0px;
      background: none;  
      top:auto;
      bottom: 0;
      min-width: 320px;
      width:100%;
    }
    .optionMenu{
        left:0;
    }
    #optionsMenu .button{
        display: block;
        float:left;
        border-top:none;
        text-align: center;
    }
    #optionsMenu .button:hover{
        background-color: #E51B27;
        opacity: 1;
    }
    #optionsMenu .button.active{
        background-color: #E51B27;
        opacity: 1;
    }
    #optionsMenu .bottom{
        float: left;
    }
    #optionsMenu.hidden{
        display: none;
    }
}
/*zoom bar adjustments*/
@media (max-height: 700px){
    #cameraMenu .icon{
        margin-top:-4px;
        margin-bottom:-4px;
    }
    #cameraMenu .iconTitle{
        padding-top:0px;
    }
}

.bgColor{
  /*! background-color:rgba(0, 0, 0, 0.71); */
}

#version{
    padding:5px;
    color:#444;
}
/*////////////////////////////// toast message*/
#Toast{
  position: fixed;
  z-index: 998;
  bottom: 2vh;
  left: 50%;
  max-width: 100%;
  transform: translate(-50%,0);
  padding: 15px;
  text-align: center;
  background-color: #E51B27;
  color: white;
/*  pointer-events: none;*/
  opacity: 1;
  transition: bottom 0s, opacity .2s;
}
#Toast.wiggle{
  animation-name: toastAnim;
  animation-duration: .56s;
  /*animation-fill-mode:forwards;*/
  animation-iteration-count: 1;
  /*! width: 500px; */
}
@keyframes toastAnim{
    0%  {transform: translate(-50%,0)}
    25% {transform: translate(-47%,0)}
    50% {transform: translate(-50%,0)}
    75% {transform: translate(-47%,0)}
    100% {transform: translate(-50%,0)}
}
#Toast.hidden{
  bottom: 0vh;
  opacity: 0;
  animation: none;
  transition: bottom 1.5s, opacity 1.5s;
  pointer-events: none;
}
#Toast .product{
    float:left;
    height: 108px;
    min-width:64px;
    margin: 15px;
}
#Toast .product .title{
    width: 100%;
    text-align: center;
    font-size: 14px;
    height: 22px;
}
#Toast .product .image{
    width: 64px;
    height: 64px;
    margin-left: calc(50% - 32px);
    background-size: cover;
}
#Toast .product .name{
    width: 100%;
    text-align: center;
}

#Toast .icon.close{
    position: absolute;
    top:-15px;
    right:-15px;
    cursor: pointer;
}
#Toast .icon.close:hover{
    opacity: .8; 
}
/*//////////////////////overlay menu for screenshot and print doc///////////////////////////*/
.overlay{
    z-index: 107;
    position: absolute;
    background:white;
    width: 80%;
    max-width: 900px;
    max-height: calc(100% - 70px);
    overflow-y: auto;
    height:auto;
    bottom: auto;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding:30px;
}
#screenshotMenu #shot{
    width:100%;
}
/*//////////////////////overlay to print configuration////////////////////////////////*/
#printMenu .title{
    width:100%;
    text-align: center;
    padding-top: 0;
    font-size:22pt;
    padding-bottom: 20pt;
}
#printMenu .subtitle{
    width: 100%;
    text-align: center;
    padding: 10pt 0 30pt 0;
    font-size:12pt;
}
#printMenu .head1{
    padding: 30pt 0 7pt 0;
    font-size: 16pt;
    font-weight:300;
}
#printMenu .mCathName{
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    font-family: 'Pano-BI';
    font-size: 9pt;
    padding-top:15pt;
    min-width: 560pt;
}
#printMenu .cathegory{
    padding-bottom: 4pt;
    font-size:12pt;
    font-weight:300;
    /*! vertical-align: top; */
    /*! clear: both; */
    min-width: 560pt;
}
#printMenu .cathegory div{/*selected product*/
    font-size:10pt;
    display:inline-block;
    vertical-align: top;
}
#printMenu .cathegory .cathegoryName{
    text-transform: uppercase;
    padding-left:180px;
    width:200px;
}
#printMenu .cathegory .productName{
    width:240px;
}
#printMenu .cathegory .productCode{
    width: 100px;
}
#printMenu .weightC .productName{
    width: 340px;
}
#printMenu .weightC .productCode{
    width:0;
}
#printMenu img{
    width:100%;
    background-color: #cccccc;
}
#printMenu a{
    display: inline-block;
    margin:10pt 5pt 20pt 0;
    /*! margin-left: 0pt; */
    width:150pt;
    float: none;
}
#printMenu .codeLabel{
    font-family: 'Pano-BI';
    font-size: 9pt;
    clear: both;
    padding-top:15px;
    padding-bottom: 3pt;
}
#printMenu .code{
    margin-bottom: 15px;
    margin-left: 0;
}
#printMenu .award{
    background: url('../assets/UI/GDA20_HO_WINNER_RGB.png');
    height: 78px;
    width: 130px;
    background-size: contain;
    float: right;
    margin-top: -92px;
}
#printMenu .award2{
    width: 85px;
    height: 85px;
    background-image: url('../assets/UI/FocusOpen_Logo.png');
    background-size: contain;
    float: right;
    margin-top: -93px;
    margin-right: 160px;
}
@media (max-width: 700px) {
    #printMenu .award{
        float: none;
        margin-top:10px;
        margin-bottom:10px;
    }
    #printMenu .award2{
        float: none;
        margin-top:20px;
        margin-bottom:20px;
        margin-right: 10px;
    }
}

#printMenu a:hover{
    background-color: #939393;
}
#printMenu .disclaimer{
    font-size:8pt;
    margin-top:10px;
    margin-bottom: 15px;
}
#printMenu .schematic{
    max-width: 400pt;
    margin-top:40px;
    margin-bottom: 20px;
}

/*//////////////////////////////////////overlay to share on social/////////////////////////////////////////////////////*/
#shareMenu{
    max-width: 700px;
    padding-right: 25px;
}
.optionMenu .title{
    font-size:22pt;
    padding-bottom: 14pt;
    margin-top:-7px;
    width:calc(100% - 30px);
}
#shareMenu img{
    float:left;
    min-height: 10px;
    width:calc(100% - 5px);
    background-color: #cccccc;
    margin-bottom: 5px;
    margin-right: 5px;
}
#shareMenu textarea{
    float:left;
    width:100%;
    background-color: #eee;
    border-radius: 10px;
    margin: 20px 0 17px 0;
    padding:10px;
    box-sizing: border-box;
    border:none;
    resize: none;
    font-family: 'Titillium Web', "Montserrat", sans-serif;
}
#shareMenu .ctaBtn{
    margin-left: 0;
    margin-right: 5px;
}

#mobileHeightReader{
    position: absolute;
    top:0;
    bottom: 0;
}
.codeTable{
    margin-top:20px;
    margin-bottom: 20px;
}
.codeTable .label{
    display: inline-block;
    width: 180px;
    padding-bottom: 10px;
    font-weight: bold;
}
.codeTable table{
    display: inline-block;
    vertical-align:middle;
    margin:0;
}
.codeTable table, .codeTable th, .codeTable td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  .codeTable td{
      padding: 4px;
  }
.codeTable tr:first-of-type{
    background:black;
    color: white;
}
.codeTable tr:first-of-type td{
    padding-top: 0;
    padding-bottom: 0;
}

/*////////////////////onesolution banner on products//////////////////////*/
.onesolution{
    display: block;
    background-color: #131313;
    width: 330px;
    max-width: 100%;
    margin-top:7px;
    margin-bottom:2px;
    cursor: pointer;
    margin-left: -2px;
    /* transition: background-color .1s; */
}
.onesolution:hover{
    background-color: #222;
}
.onesolution div,
.onesolution img{
    display: inline-block;
}
.onesolution img{
    vertical-align: top;
    margin-top: 5px;
    height: 20px;
}
.onesolution div{
    display: inline-block;
    padding:5px;
    padding-top:4px;
}
.onesolution .pre{
    padding-left:13px;
    color: #eee;
    text-decoration: none;
}
.onesolution .post{
    color: #00b5b8;
    text-decoration: underline;
}

/*//////////Focus open logo on title screen///////////*/
#focusOpenLogo{
    position: absolute;
    right:20px;
    bottom:20px;
    width: 85px;
    height: 85px;

    background-color: #fff;
    background-image: url('../assets/UI/FocusOpen_Logo.png');
    background-size: contain;
    z-index: 803;
    cursor: pointer;
    transition: background-color .5s;
}
#focusOpenLogo .popover{
    opacity:0;
    display: block;
    position: absolute;
    top: 0px;
    right:85px;
    width: 170px;
    height:65px;
    font-size: 14px;
    background:#eee;
    padding:10px;
    pointer-events: none;
    transition: opacity .5s;
}

#focusOpenLogo:hover{
    background-color: #eee;
}
#focusOpenLogo:hover .popover{
    opacity: 1;
}

.enter #focusOpenLogo{
    display: none;
}

@media (max-width: 1450px), (max-height: 710px) {
    #focusOpenLogo{
        display: none;
    }
}