/* GENERAL */
body, html {
  color: #666;
font-family: "Open Sans",Arial,sans-serif;
font-size: 14px;
font-weight: 500;

line-height: 1.42857143;
 }
 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}  
  

img {max-width: 100%; }

.clr {clear:both;}

ul {
  margin:0; 
  padding: 0; 
  list-style: none;}

a { 
  color: #666;
  text-decoration: none; 
}
 a:hover, a:focus  {
  text-decoration: none;
  color: #666;
   
  }
  a:focus {color: #666;}
  
  label {margin-bottom: 0;}
  
  /**********************
   * Typo
   **********************/
   
.configurator h1 {
    color: #3b3b3b;
    font-family: 'Interstate','Overpass',Arial,sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 50px;
    margin: 0 0 30px;
    padding: 0;
    border-bottom: 2px #64c234 solid;
    display: inline-block;
}

.configurator h3 {
color: #3b3b3b;
font-family: 'Interstate','Overpass',Arial,sans-serif;
font-size: 30px !important;
font-weight: 300;
line-height: 35px;
margin-bottom: 13px;
padding-bottom: 0px;
border-bottom: 2px #64c234 solid;
display: inline-block;

}
  
  

/******************
 *  Layout
 ******************/


.container-main {
  max-width: 1400px;
  margin:auto;
  
  margin-top: 3em;
  padding-bottom: 3em;
  position: relative;
  
}

 #loader {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99999999999;
  background: #fff;
  text-align:center;
 
  
}

.container-app {
   width:  72.5%;
   
   margin-right: 3%;
   float:left;
   position: relative;
   /* padding-bottom:36.125%; */
    /* padding-bottom:70.125%; */  
   
}

.container-menu {
  width: 24.5%;
  
  float:left;
  
  

}

.app {
  cursor:move;
}

.app #unityContainer, #unityContainer canvas {cursor: move !important;}
.app #unityContainer canvas{ 
border: 1px solid #a7a7a8;
  
}
.app #unityContainer {
     background:none !important;
     border: 1px solid #a7a7a8;
     box-sizing: border-box;
}

#rotate {
  position: absolute;
  left: 1em;
  bottom: 1em;
  width: 100px;
  z-index:3;
}
#play {
  position: absolute;
  left: 70.3%;
  width: 61px;
  bottom: 80px;
  z-index:3;
  
}
.unityContainer {
  z-index:2;
  background: transparent !important;
}


.container-menu .menu  {
border-left: 1px solid #a7a7a8;
  border-right: 1px solid #a7a7a8;
  border-top: 1px solid #a7a7a8;
  background: #f6f6f6;
}



 /*************
  *     Browser Error
  ******************/
  
  .browserError      {
        padding-top: 20px;
    padding-right: 60px;
    padding-bottom: 20px;
    padding-left: 30px;
    width: 100%;
    background-color: #ececec;
  }

/**********************
 *   menu
 *********************/
 
 .menu, .menu div { border-collapse:collapse}
 .menu .slide {
    
 }
 
 .menu .heading
  {
  
  
  position: relative;
 } 
 
  .menu .heading a {
    display:block;
    font-size: 1.25em;
    padding: 10px;
    border-bottom: 1px solid #a7a7a8;
  }
  
  .menu .active .heading { background: #ebebeb;}
  .menu .active .heading a {
    
    text-decoration:none;
    
  }
  .menu .heading:hover {
      background-color: #ebebeb;
  }
  .menu .heading a:hover {
       color: #666; 
  }
  
 

 .menu .content {
  padding: 10px;
  background-color: #fff;
   display:none; 
  border-bottom: 1px solid #a7a7a8;
  
 }
 
 /*********************
  *   Model
  ********************/
  #model .item {
    padding: 10px 20px;
  }
  
  #model .name {text-align:center;}
  #model .content a {display:block;padding: 5px;}
  #model .content a:hover,
  #model .content a.active {border: 0;
    display: block;
    padding: 5px;
    background-color: #ebebeb;
  }
  
  .radio {
    width: 16px;
    height: 16px;
    background-image: url(../images/icons/radio_button.png);
    background-size: contain;
    
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    top: 3px;
  }
   #model .item .active .radio
    {
        
    background-image: url(../images/icons/radio_button_active.png);
    
  } 
  
 
 /*********************
  *   Form
  ********************/ 
  #shape .item {
    padding: 5px;
    width:25%;
    display:inline-block;
    text-align:center;
  }
   #shape .content a {display:block;padding: 5px;}
  #shape .content a:hover,
  #shape .content a.active {
  
  background-color: #ebebeb;
  }
  
  
    #shape .item .shapeName {
      font-size: 80%;
      line-height: 1em;
      margin-bottom: 0;
    }
  
   #shape .item .active .radio
    {
        
    background-image: url(../images/icons/radio_button_active.png);
    
  } 
  #shape .item img {padding:5px;}
  

  
  
    
  /*********************
   *     Groesse
   *********************/
   
   #groesse   .ui-corner-all, #groesse .ui-corner-bottom, #groesse .ui-corner-right, #groesse .ui-corner-br {
    border-bottom-right-radius: 30px;
}
#groesse .ui-corner-all, #groesse .ui-corner-bottom, #groesse .ui-corner-left, #groesse .ui-corner-bl {
    border-bottom-left-radius: 30px;
}
#groesse .ui-corner-all, #groesse .ui-corner-top, #groesse .ui-corner-right, #groesse .ui-corner-tr {
    border-top-right-radius: 30px;
}
#groesse .ui-corner-all, #groesse .ui-corner-top, #groesse .ui-corner-left, #groesse .ui-corner-tl {
    border-top-left-radius: 30px;
}

#groesse .slide-val { border: 0;}
   
  
  /********************
   *   Zubehör, VOlatn
   ********************/
   #volant .checkbox-wrap, 
   #equipment .checkbox-wrap {
    padding: 10px;

   }
   
   
      #equipment .checkbox-wrap.active {
        background: #ebebeb;
      }
   #volant label, 
   #equipment label {
    font-weight: 400;
    line-height: 30px;
  }
  #equipment .content img {
    max-width: 80%; 
  }
  
  #volant .checkbox-wrap.active .radio{
    background-image: url(../images/icons/radio_button_active.png);
  } 
  #volant .checkbox-wrap.active {background-color: #ebebeb;}
  

  
 /* Range Slider */ 
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  
    background: #6DC234;
    font-weight: normal;
    color: #454545;
}

/* Equipment Radios*/
#equipment .radio {top: 3px;}
 #equipment .active .radio{
        
    background-image: url(../images/icons/radio_button_active.png);
    
  } 
  
 





/**********************
 *   IMG Listings
 **********************/
 #frameColors .content,
 #colors .content  {
  
    height: 300px;
     overflow-y: visible;
    overflow-y: scroll;
    padding: 5px;
  
 }
 
 .imgListing .color.active {
  background-color: #ccc;
 }
 
 

 .imgListing .item {
    display:inline-block; padding: 5px; width: 25%;
 }
 
  .search {padding:5px;}
  .search .searchtxt {
    padding: 3px 0px 2px 9px;
    font-style: italic;
    color: #999;
    font-size: 13px;
    border-color: #999;

border: 1px solid;
  }
  
  .imgListing .item .wrapper {
    position: relative;
  }
  .imgListing .item .wrapper .nr {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align:center;
    opacity: 0.8;
    background: #fff;
    color: #444;
    font-size: 10px;
    line-height: 15px;
    display: block;
  }
  
 
 
 
 /************************
  *    Buttons
  ***********************/
   .buttons-bottom {margin-top: 2rem}
  #pdf, #haendler {text-align:center; display:block; margin-bottom: 1em;}
  
  .button { 
    color: #fff; 
    background-color: #6DC234; 
    padding: 15px 60px; 
    font-size: 20px; 
    font-weight: bolder; 
    
    display:inline-block;
    width: 100%;
  } 
  
  .button:hover {color: #fff;}
  
  
  
  #haendler .button  {background-color: #4f4c4c;}


 

 /******************************************************************************
  *  Select Page
  *****************************************************************************/
  
  .select-page {
  
  }
  .select-page .row.schirme {

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

  }
  
  .select-page ul{
  list-style: disc;
  margin: 0 auto;
  display:inline-block;
  text-align:left;
  
  }
  .select-page .schirm {text-align:center; }
  
  .select-page .schirme .schirm a{
    display:block;
    padding-bottom: 3em;
    position: relative;
    height: 100%
  }
  
  .select-page .schirme .schirm a:hover{
    background-color: #ebebeb;
  }
  
  .select-page .button-w {
    position: absolute;
    bottom: 1em;
    left: 50%;
  }
  .select-page .button {

    border-radius: 11px;
    background-color: #64c234;
    color: #fff !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    padding: 8px 20px;
    width: auto;
    position: relative;
    left: -50%;
    
    

  }