/*#######################################################################################*/
/*###################### Original styles.css manipulieren ###############################*/
/*#######################################################################################*/

.table {
    margin-bottom: 90px;
    float:left;
}

/*#####################################################################################################################################
    Styles Allgemein (Header, Footer)
  #####################################################################################################################################*/

.content-image-text {margin-bottom: 5px;}

/*#####################################################################################################################################
   Schritt 1 Systemauswahl
  #####################################################################################################################################*/

.icon_Select_Nummer {
    height: 18px;
    width: 18px;
    border-radius: 20px;
    -moz-border-radius: 40px;
    text-align: center;
    color: white;
    font-size: 12px;
    float: left;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkgrey;
    margin-bottom: -18px;
}

.sel_description_auswahl{
    margin-bottom: -10px;
    margin-left: 25px;
}

.opt_Bild_und_Text_Text{
    padding: 24px 20px;
    border-top: 1px solid #ebebeb;
    width: calc(100% - 90px);
    float: left;
    height: 70px;
}

.opt_Bild_und_Text_Text:hover{
    background-color:#dfdfdf
}

.opt_Bild_und_Text_Bild {
    width: 90px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    background-color: white;
    border-top: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opt_Bild_und_Text_Bild img {
    max-width:100%;
    max-height:100%; 
}

.opt_Bild_und_Text_Bild:hover{
    background-color:#dfdfdf
}

.Icon_Check_Kategorie {
    margin-top: 23px;
    margin-left: -32px;
    color: forestgreen;
    float: left;
}

#Input_Systemauswahl_ID_Direkteingabe {
    background-color: white;
}

#KachelAuswahl {
    float: left;
    width: 100%;
    padding: 25px;
	position: relative;
}

#Kachel_Auswahl_System_ID_Icon {
    float: left;
    margin-top: 6px;
    margin-right: 5px;
    font-size: 18px;
    color: lightgrey;
}


#Kachel_Auswahl_System_ID {
    float: left;
    width: calc(100% - 250px);
    margin-top: 5px;
    font-size: 13px;
    color: lightgrey;
}

#Kachel_Auswahl_System_ID:hover {
	text-decoration: underline;
    font-weight: bold;
}

#AuswahlName {
    width: calc(100% - 205px);
    float: left;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 35px;
    line-height: normal;
}

#AuswahlPreis {
    width: calc(100% - 205px);
    float: left;
    margin-bottom: 10px;
    font-size: 35px;
    line-height: normal;
}

#Label_Bafa_Foerderung {
	display: none;
	float: left;
    font-size: 17px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    line-height: 25px;
}

#Label_Bafa_Foerderung:hover {
	text-decoration: underline;
}

#Kachel_Auswahl_Rahmen_Pic {
    width: 150px;
    height: 150px;
    margin-right: 40px;
    margin-left: 15px;
    float: left;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

#Kachel_Auswahl_Pic {
    max-width:100%;
    max-height:100%;
    filter: drop-shadow(0 0px 10px rgba(0,0,0,.1));
}

#btnKategorieauswahlZumAngebotHinzu{
    max-width:250px;
    float:right;
    max-width:200px;
    margin-right:12px;
    text-align:center;
    padding-left:20px;
    padding-right:20px;
    padding-top:12px;
    padding-bottom:12px;
    margin-top: 12px;
}

/*#####################################################################################################################################
   2 Stücklisten
  #####################################################################################################################################*/

.titel_Tabellenkopf{
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.Teilstueckliste_Rahmen {
    margin-bottom: 50px;
    padding-bottom: 20px;
    float: left;
    width: 100%;
}

.Teilstueckliste_Headline {
    position:relative;
    font-size: 20px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-weight: 400;
    padding-top: 10px;
    text-align: center;
    background-color: #efefef;
    height: 40px;
}

.Icon_Kategorie_Bearbeiten {
    color: grey;
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 30px;
}

#Icon_Kategorie_Mit_Bildern {
	color: grey;
    position: absolute;
    top: 9px;
    right: 45px;
    font-size: 22px;
}

#Icon_Kategorie_Ein_Ausklappen {
    color: grey;
    position: absolute;
    top: 5px;
    right: 75px;
    font-size: 30px;
}

#Teilstueckliste_Headline_Ident{
    float: left;
    font-weight: bold;
    color: #333;
    background-color: #efefef;
    width: 12%;
    text-align: center;
    padding-top: 10px;
    height: 40px;
}

#Teilstueckliste_Headline_Artikel{
    float:left;
    font-weight: bold;
    color:#333;
    background-color: #efefef;
    width: 55%;
    text-align: left;
    padding-top: 10px;
    height: 40px;
}

#Teilstueckliste_Headline_Einzelpreis {
    float: left;
    font-weight: bold;
    color: #333;
    background-color: #efefef;
    width: 15%;
    text-align: right;
    padding-top: 10px;
    height: 40px;
}

#Teilstueckliste_Headline_Gesamtpreis{
    float: right;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    background-color: #efefef;
    width: 18%;
    text-align: right;
    padding-right: 30px;
    border-bottom: 1px solid white;
    padding-top: 10px;
    height: 40px;
}

.Teilstueckliste_Tabellenzeile {
    border-bottom: 1px solid #ddd;
    width: calc(100% - 20px);
    margin-left: 10px;
    position: relative;
    min-height: 90px;
    float: left;
    animation: 0.8s fadeIn;
}

.Teilstueckliste_Tabellenzeile_Listenansicht {
    border-bottom: 1px solid #ddd;
    width: calc(100% - 20px);
    margin-left: 10px;
    position: relative;
    min-height: 50px;
    float: left;
    padding-bottom: 10px;
    padding-top: 10px;
    animation: 0.8s fadeIn;
}

.Teilstueckliste_Tabellenzeile:hover, .Teilstueckliste_Tabellenzeile_Listenansicht:hover {
    cursor: pointer;
    font-weight:bold;
    text-underline-position: auto;    
    position:relative;
}

.Teilstueckliste_Tabellenzeile_Pic_Rahmen {
    float: left;
    width: 15%;
    height: 92px;
    padding: 14px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.Teilstueckliste_Tabellenzeile_Pic {
    max-width: 100%;
    max-height: 100%;
}

.Teilstueckliste_Tabellenzeile_Label_1 {
    float: left;
    min-height: 45px;
    width: 57%;
    margin-right: 2%;
    margin-left: 2%;
    padding-bottom: 14px;
    color: darkgrey;
    font-size: 15px;
    text-align: left;
}

.Teilstueckliste_Tabellenzeile_Label_2 {
    float: left;
    min-height: 45px;
    width: 57%;
    margin-left: 2%;
    margin-right: 2%;
    color: #333;
    padding-top: 24px;
    font-size: 19px;
    text-align: left;
}

.Teilstueckliste_Tabellenzeile_Label_3 {
    float: left;
    min-height: 45px;
    width: 24%;
    padding-top: 28px;
    padding-right: 20px;
    font-size: 15px;
    text-align: right;
}

.Teilstueckliste_Tabellenzeile_Label_4 {
    float: left;
    min-height: 45px;
    width: 24%;
    font-size: 15px;
    text-align: right;
    padding-right: 20px;
}

.Teilstueckliste_Tabellenzeile_Label_1_Listenansicht {
    float: left;
    width: 12%;
    text-align: center;
    vertical-align: middle;
    margin-top: 5px;
}

.Teilstueckliste_Tabellenzeile_Label_2_Listenansicht {
    float: left;
    width: 55%;
    padding-left: 5px;
    text-align: left;
    margin-top: 5px;
}

.Teilstueckliste_Tabellenzeile_Label_3_Listenansicht {
    float: left;
    width: 15%;
    text-align: right;
    margin-top: 5px;
}

.Teilstueckliste_Tabellenzeile_Label_4_Listenansicht {
    float: left;
    width: 18%;
    text-align: right;
    padding-right: 20px;
    margin-top: 5px;
}

.Teilstueckliste_Tabellenzeile_Notiz_Rahmen {
    width: calc(100% - 40px);
    margin: 20px;
    float: left;
}

.Teilstueckliste_Tabellenzeile_Notiz {
    font-size: 16px !important;
    width: 100%;
    background-color: #f3f3f3 !important;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    float: left;
    height: 35px;
    padding: 16px !important;
    border: none;
    outline: 0;
}

.Teilstueckliste_Zwischensumme {
    color: #9da6a8;
    font-size: 16px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    text-align: right;
    padding-right: 25px;
    margin-top: 23px;
    width: calc(100%-150px);
    float: right;
}


.Teilstueckliste_Zwischensumme_Anzahl_Artikel {
    color: #9da6a8;
    font-size: 16px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    text-align: center;    
    padding-left: 14px;
    margin-top: 23px;
    width: 15%;
    float: left;
}

.Hydraulik_Label_Nichts_Gefunden {
    width: 100%;
    color: grey;
    margin-top: 150px;
}

.Hydraulik_Label_Geloescht {
    margin-top: -200px;
    color: #333;
    font-size: 20px;
}

.Hydraulik_Button_Nichts_Gefunden {
    margin-top:25px;
}


.Hydraulikzeichnung_Rahmen {
    text-align: center;
    float: left;
    width: calc(50% - 20px);
    margin: 0px 10px 20px 10px;
    height: 100%;
    position: relative;
    overflow: hidden;
    min-height: 450px;
    min-width: 400px;
}

.Hydraulikzeichnung_Kopf {
    font-size: 16px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    padding-top: 10px;
    text-align: center;
    background-color: #efefef;
    height: 40px;
    margin-bottom: 10px;
}

.Hydraulikzeichnung_Pic {
    width: calc(100% - 20px);
}

.Masszeichnung_Rahmen {
    text-align: center;
    padding: 20px;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    width: calc(50% - 20px);
    height: 500px;
}

.Masszeichnung_Rahmen:hover {
    box-shadow: 0 1px 6px 4px #dfdfdf;
    transition: .4s ease;
    cursor: pointer;
}

.Masszeichnung_Label {
    color: darkgrey;
    text-align: center;
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

.Masszeichnung_Thumbnail {
    max-height: calc(100% - 50px) !important;
    max-width: calc(100% - 50px) !important;
}

.Mindestabstand_Thumbnail {
    max-height: calc(100% - 50px) !important;
    max-width: calc(100% - 50px) !important;
}

.Energielabel_Rahmen {
    text-align: center;
    padding:20px;
    float: left;
    width: calc(33.333% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
    height: 600px;
}

.Einzellabel_Pic, .Systemlabel_Pic {
    max-height: calc(100% - 50px) !important;
    max-width: calc(100% - 50px) !important;
}

/*Detailseite Anzeige System-ID */
#AusgabeSchluessel{float:left;}


/*#####################################################################################################################################
    Schritt 2 Gesamtstueckliste bearbeiten
  #####################################################################################################################################*/

#Header_Weitere_Unterlagen {
    margin-top: 50px;
    margin-bottom: 40px;
    font-size: 28px;
    font-family: STEInfoWeb;
    color: #585858;
    float: left;
}

#Container_Weitere_Unterlagen {
	float: left;
    width: 100%;
    border: none;
}

.RahmenHydraulikplanGesamtliste {
    width:100%;
    border-color: lightgrey;
    border-width: 2px;
    border-style: solid;
    margin-top:10px;
    margin-bottom:10px;
    min-height:200px;
   
}

#TabelleStueckliste_Trennlinie {
    border-color:lightgrey;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 5px;
}

/* #TabelleStueckliste_Gesamtpreis {
    font-size: 22px;
    color: #333;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    line-height: 100%;
    margin-bottom: 10px;
    margin-top: 40px;
    text-align:right;
}

#TabelleStueckliste_GesamtpreisMWST {
    font-size: 16px;
    color: #9da6a8;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    line-height: 100%;
    margin-bottom: 40px;
    text-align:right;
} */

/*Schaltplan Bearbeiten*/
#Modal_Schaltplan_Bearbeiten{

    padding-top:40px;
}

#Modal_Body_Schaltplan_Bearbeiten {
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
    height: calc(100% - 40px);
    max-width: 1400px;
    overflow: hidden;
    padding: 0px;
}

#Schalplan_Bearbeiten_Iframe_Rahmen {
    height: calc(100% - 70px);
    margin-top: 45px;
    float: left;
    width: 100%;
}

#Schalplan_Bearbeiten_Iframe_Rahmen iframe {
    width: 100%;
    border: none;
    height:100%;
}

#Modal_Clear_Schaltplan_Bearbeiten {
    color: #2f3132;
    margin-top: 14px;
    font-size: 33px;
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
}

.chkWSEinbauOptionenNein{
    content: '';
    width: 20px;
    height: 20px;
    left: 0;
    background: #fff;
    border: 2px solid #748083;
    float: left;
    margin-right: 15px;
}

.chkWSEinbauOptionenJa{
    width: 15px;
    height: 15px;
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEyIDEwIj48cGF0aCBmaWxsPSIjOTQxNTFFIiBkPSJNMTAuMS4yTDQuNCA2IDEuOSAzLjUgMCA1LjNsNC40IDQuNEwxMiAyLjEgMTAuMS4yeiIvPjwvc3ZnPg==);*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display:none;
}


.txtWSEinbauOptioneninSuche{    
    margin-left: 38px;
}

/*#######################################################################################################################################################################################*/
/* Modals ###############################################################################################################################################################################*/
/*#######################################################################################################################################################################################*/


 /* PopUp Fenster Beginn #########################################################################################*/
.modal-content-ExcelImport {
    position: relative;
    background-color: #dfdfdf;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-bottom:solid;
    border-color:#dfdfdf;
    border-bottom-width:20px;
    border-right-width:20px;
    border-left-width:20px;
    max-width: 400px;
}

#InfoStartExcelImport {
    font-size: 17px;
}



/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


/* Close-Button von Modal Schaltplan */

#closeSchaltplan {
    color: rgb(148,148,148);
    float: right;
    font-size: 32px;
    font-weight: bold;
}

#closeSchaltplan:hover,
#closeSchaltplan:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Der Modal Close Button  Ende*/

.modal-header-ExcelImport {
    position:relative;
    font-family:STEInfoWeb,Arial;
    padding: 15px 0px 2px 0px;
    background-color: #dfdfdf;
    color: rgb(120,120,120);
    font-size:1.35em;
}

#EingabeExcelImportAnzahl,#EingabeExcelImportIdent{
   margin-bottom:30px;
}

.modal-body-ExcelImport {
padding: 2px 16px;
/*overflow: auto;  Enable scroll if needed */
background-color:#dfdfdf;
}

.modal-body-Schaltplan {

overflow: auto; /* Enable scroll if needed */
height:100%;
}



html.body {
      font-family: STEInfoWeb, Arial, sans-serif;
      margin: 0;
      padding: 0;
      margin: 0 auto;
      color: #585858;
      background: #efefef; }

main {
  box-sizing: border-box;
  color: #585858;
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1; }


  main.wrapper {
    font-family: F2FOCRBczykCom-Regular, Arial, sans-serif;
    margin-bottom:5%;
    margin-top:5%;
    margin-right: 1%;
    margin-left:1%;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
  }
  
  main.app {
    background-color: #E5E5E5;
    padding: 15px;
    width:250px;
    margin: 15px;
    font-size: 20px;
  }
  main.apptext{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #CDCDCD;
    width:218px;
    height:100px;
    margin: 15px;
    font-size: 20px;
    text-align:center;
  }

.apptext:hover{
    background-color:#B4B4B4;
}

main.flags {
    padding-right:11px;
    padding-left:12px;
}

main.app img {
    margin: 0 3px; 
}

.plan_slider {
    display: flex; 
    justify-content: center;
}
.plan_slider_span {
    height: 3px; 
    width:30px; 
    margin: 10px 10px;
}
.plan_slider_button {
    float: left;
}
.plan_slider_button:hover {
    cursor: pointer;
}
/*#####################################################################################################################################*/
/*################################################ Responsive Design ##################################################################*/
/*#####################################################################################################################################*/
   
@media screen and (max-width: 1024px) {
	 .SchaltplanbearbeitenText {display: none;}
	 #SchaltplanEditAnzahlBilder {display: none;}
	 #SchaltplanEditRahmenEingabe  {width: 40%; padding-left:0px;}
	 #SchaltplanEditRahmenBilder  {width: 60%;padding-right:15px;}
}


@media screen and (max-width: 768px) {
	#Kachel_Auswahl_Rahmen_Pic { width:100% !important; margin: 0px; } 
    #Kachel_Auswahl_System_ID { width:calc(100% - 25px) !important; }
    #AuswahlName { width: 100% !important; }
    #AuswahlPreis { width: 100% !important;}
	#Label_Bafa_Foerderung { width: 100% !important;}

    .ArtikeldetailsRahmenPic {width: 100%;}
    .Energielabel_Rahmen {width: calc(50% - 20px); height: 300px;}
	.Lupe_Fachhandwerker_Rahmen {margin-bottom: 5px;}
	#Fachhandwerkersuche_ListboxSuchergebnisse_1,#Fachhandwerkersuche_ListboxSuchergebnisse_2 {top: 57px;height: 293px;}
}
   
@media screen and (max-width: 600px) {

    #Label_Bafa_Foerderung {display: none !important;}
    #Hinweis_Bafa_Foerdersumme_Icon {display: none;}
    #Hinweis_Bafa_Foerdersumme_Label {width: 100% !important; text-align: right !important;}
	.stueckliste_tabelle_headline_rahmen_icons {display: none;}
    .Teilstueckliste_Tabellenzeile_Pic_Rahmen { width: 25% !important; height: 120px !important}
    .Teilstueckliste_Tabellenzeile_Label_1 {width: 71% !important; float: right !important}
    .Teilstueckliste_Tabellenzeile_Label_2 {width: 71% !important; float: right !important}
    .Teilstueckliste_Tabellenzeile_Label_3 {display: none;}
    .Teilstueckliste_Tabellenzeile_Label_4 {width: 71%!important; float:right !important;}
    .Teilstueckliste_Zwischensumme_Anzahl_Artikel {display: none;}
    #Icon_Kategorie_Ein_Ausklappen {display: none;}
    #Icon_Kategorie_Mit_Bildern {display: none;}

    .Hydraulikzeichnung_Rahmen {width: 100% !important; margin: 0px 0px 20px 0px !important; min-width: unset;}
    .ArtikeldetailsRahmenPic {width: 100% !important}
    .Masszeichnung_Rahmen {width: 100% !important; height: 100% !important}
    .Energielabel_Rahmen {width: 100%; height: 100%;}

    .Kachel_Projekt_Druckauswahl {padding: 15px 20px !important;} 
}

/*#######################################################################################################################################################################################*/
/*##################################################################### Projektdaten ####################################################################################################*/
/*#######################################################################################################################################################################################*/

#label_Druck_chk_1 {display: inline-block}
#label_Druck_chk_2 {display: inline-block}
#label_Druck_chk_3 {display: inline-block}
#label_Druck_chk_4 {display: inline-block}
#label_Druck_chk_5 {display: none}
#label_Druck_chk_6 {display: none}
#label_Druck_chk_7 {display: none}
#label_Druck_chk_8 {display: none}

#label_Druck_chk_9 {display: inline-block}
#label_Druck_chk_10 {display: inline-block}
#label_Druck_chk_11 {display: inline-block}
#label_Druck_chk_12 {display: inline-block}
#label_Druck_chk_13{display:none}
#label_Druck_chk_14{display:none}
#label_Druck_chk_15{display:none}
#label_Druck_chk_16{display:none}