/* CSS used here will be applied after bootstrap.css */
#debug {
    display: none;
}

.twohundred {width: 100px;}
.nl {margin-top:10px;}
.undo {display: none;}

#Durchmessercontainer span div ul.multiselect-container, #bauartcontainer span div ul.multiselect-container,#ausschubgeschwindigkeitcontainer span div ul.multiselect-container {
    min-width: 100%;    
    text-align: left;
}

#Durchmessercontainer span div ul.multiselect-container a, #ausschubgeschwindigkeitcontainer span div ul.multiselect-container a, #bauartcontainer span div ul.multiselect-container a{
    color: black;
}

.multiselect-container > li > a > label {
    padding: 3px 20px 3px 15px;
}

.multiselect-container > li.multiselect-group label {
    padding: 3px 10px;    
}

li.disabled > a {
    color: silver;
}

.dropdown-toggle {
    text-align:  left;        
}

.fullwidth {
    width:100%
}

#gasfederpic {
    width: 100%;
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
}

#visual {
    position: relative;
    top: 0;
    left: 0;    
}

.anschlussteilpic {
    z-index: 2;
    width: 100%;
    /* height: initial;    */
}

.anschlussteilbtn { 
    z-index: 2;   
    width: 100px;    
    cursor: pointer;
}

/* Anschlussteilknöpfe */
#btn_gabelkopf_kolben {    
    position: absolute;
    top:40%;
    left: 10px; 
    display: none;  
}
#btn_gewinde_kolben {    
    position: absolute;
    top:5%;
    left: 10px;   
    display: none;
}
#btn_gelenkauge_kolben {    
    position: absolute;
    top:20%;
    left: 10px;   
    display: none;
}
#btn_winkelgelenk_kolben {    
    position: absolute;
    top:60%;
    left: 10px;  
    display: none; 
}

#btn_gabelkopf_zylinder {    
    position: absolute;
    top:40%;
    right: 10px; 
    display: none;  
}
#btn_gewinde_zylinder {    
    position: absolute;
    top:5%;
    right: 10px;   
    display: none;
}
#btn_gelenkauge_zylinder {    
    position: absolute;
    top:20%;
    right: 10px;   
    display: none;
}
#btn_winkelgelenk_zylinder {    
    position: absolute;
    top:60%;
    right: 10px;  
    display: none; 
}

/* Anschlussteilgrafiken */
#gabelkopf_kolben, #gabelkopf_kolben-realistic{    
    position: absolute;
    top:0;
    left: 0;
    display: none;  
}
#gewinde_kolben, #gewinde_kolben-realistic {    
    position: absolute;
    top:0;
    left: 0;  
    display: none;
}
#gelenkauge_kolben, #gelenkauge_kolben-realistic {    
    position: absolute;
    top:0;
    left: 0;
    display: none;
}
#winkelgelenk_kolben, #winkelgelenk_kolben-realistic {    
    position: absolute;
    top:0;
    left: 0;
    display: none; 
}

#gabelkopf_zylinder, #gabelkopf_zylinder-realistic {    
    position: absolute;
    top:0;
    right: 0;
    display: none;  
}
#gewinde_zylinder, #gewinde_zylinder-realistic {    
    position: absolute;
    top:0;
    left: 0;
    display: none;
}
#gelenkauge_zylinder, #gelenkauge_zylinder-realistic {    
    position: absolute;
    top:0;
    left: 0;
    display: none;
}
#winkelgelenk_zylinder, #winkelgelenk_zylinder-realistic {    
    position: absolute;
    top:0;
    left: 0;
    display: none; 
}

.trash {
    text-align: right;
    float: right;
    padding-top: 4px;
}

#trashkolben, #trashbeschlagkolben, #trashzylinder, #trashbeschlagzylinder{
    display:none;
}

#lblHub, #lblDurchmesser, #lblBauart, #lblAusschubgeschwindigkeit, #lblAnschlussKolben, #lblBeschlagKolben, #lblAnschlussZylinder, #lblBeschlagZylinder, #lblEinbaulaengeEL2, #lblEinbaulaenge, #lblVerlaengerung {
    color: darkgrey;    
}

#buttonpanelleft {
    position: absolute;        
    display: none; 
    /* width: 15%;
    height: calc(100% - 20px);
    top: 10px;
    left: 10px; */
    z-index:3;    
    /* background: red; */
}

#buttonpanelright{
    display: none; 
    position: absolute;
    right: 10px;
    /* position: absolute;            
    width: 15%;
    height: calc(100% - 20px);
    top: 10px;
    right: 10px; */
    text-align: right;
    z-index:3;    
    /* background: red; */
}


.header {
    margin-left:2px;
}

.buttons {
    display: inline;    
}

.buttonpanel {
    position: absolute;        
    display: block; 
    /* border: 1px solid white;
    background: cornflowerblue;
    width:  calc(100% - 10px);
    height: calc((100% - 20px) /3);
    font-size: x-small;         */
}

#buttonpanel1, #buttonpanel4 {
    position: relative;      
    margin-top: 5px;
    margin-left: 5px;
}

#buttonpanel2, #buttonpanel5 {
    position: relative;      
    margin-top: 5px;
    margin-left: 5px;
}

#buttonpanel3, #buttonpanel6 {
    position: relative;      
    margin-top: 5px;
    margin-left: 5px;
}

.btn-group-xs>.btn, .btn-xs {
    padding: 3px 6px;
    font-size: 12px;
    /* line-height: 1; */
    border-radius: 0px; 
    margin-left:2px;
    width: 35px;
}


.btn_wider, .btn_wider.btn-trash {
    width: 100px; /* DE bei Anschlussteil H3 ist superbreit */
}

.btnbarlabel {
    width: 110px;
}

#btn_saveright, #btn_saveleft {
    /* position: absolute;
    bottom: 5%;
    right: 5%; */
    z-index: 5;
    display: none;
}

#btn_saveright {
    margin-top: 3px;
    float: right;
}

#beschlagpanelleft {
    position: absolute;        
    display: none; 
    width: 15%;
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    z-index:3; 
}
#beschlagpanelright {
    position: absolute;        
    display: none; 
    width: 15%;
    height: calc(100% - 20px);
    top: 10px;
    right: -30px; /*Platz reicht nicht*/
    z-index:3; 
}

.beschlag-left, .beschlag-right {
    display: none; 
}

.btn-trash {
    background-image: url("images/trashcan-white.svg");
    background-repeat: no-repeat;    
    padding-left: 3px;
    text-align: left;
    background-position: right;
    background-position-y: 3px;
    text-align: left;
    width: 45px;    
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: #333;
    border-color: #333;
}

#kraftvisual {
    position: absolute;
    display: none;
    align-content: right;
    text-align: right;
    width: 70px;      
    z-index: 6;
    top:64%;
    left:22%;
}

#hubvisual {
    position: absolute;
    display: none;
    align-content: center;
    text-align: center;
    width: 70px;    
    z-index: 6;
    top:35%;
    left:22%;
    background: white;
}

#EL1visual {
    position: absolute;
    display: none;
    align-content: center;
    text-align: center;
    width: 70px;    
    z-index: 6;
    top:9%;
    left:50%;
    background: white;
}

#transframe {
    display: none;
}

#Danke {
    text-align: center;
}

#btn_neuekonfiguration {
    display: none;
}

#EL2visual {
    position: absolute;
    display: none;
    align-content: center;
    text-align: center;
    width: 70px;    
    z-index: 6;
    top:23%;
    left:50%;
    background: white;
}

#durchmesservisual {
    position: absolute;
    display: none;
    align-content: center;
    text-align: center;
    width: 50px;    
    z-index: 6;
    top:48%;
    left:48%;
    background: white;
}

body {
    font-size: 0.9rem;
} 

#checkout {    
    width: 100%;
    text-align: center;
    display: none;
}

#orderno {
    text-align:center;
    padding-bottom:10px;
    font-weight:bold;
    font-size:larger;
}

#pdfdaten {
    display: none;
}

#checkout button {
    display: inline;
    background-color: #134c94;
    border-color: #134c94;
}

.noleftmargin {
    margin-left: 0;
}

.leftmargin30, #input_Datenweitergabe-error, #input_Datenschutz-error {
    margin-left: 30px;
}

.smallprint {
    font-size: xx-small;
    display: block;
}

.error {
    color: red;
}

.dontdisplay {
    display: none;
}

/* Inputfeld EL1 */
#Einbaulaenge {
    display: inherit;
}

#input_EL1 {
    width: 70px;
    max-width: 70px;
}

@media (max-width: 1200px) {
    #kraftvisual {
        top:63%;
        left:20%;
    } 
}

@media (max-width: 990px) {
    #kraftvisual {
        top:62%;
        left:18%;
    } 
    #hubvisual {        
        top:30%;
        left:20%;        
    }
    #durchmesservisual {        
        top:46%;        
    }
}
    
@media (max-width: 768px) {
    .container {
        max-width: 920px;        
    }    

    #kraftvisual {
        top:63%;
        left:18%;
    }
    #hubvisual {        
        top:34%;
        left:20%;        
    }  
    body, .btn, .input-group-sm>.form-control, .multiselect-container > li > a > label {
        font-size:0.7rem;
    }
}

@media (max-width: 620px) {
    
    #kraftvisual {
        top:62%;
        left:15%;
    }  
    #hubvisual {        
        top:33%;
        left:20%;        
    }
    #EL1visual {        
        top:7%;          
    }  
    #durchmesservisual {
        top: 47%;
    }
}