body{
}

@font-face {
    font-family: 'ChronicleDisplay-Roman';
    src: url('../fonts/ChronicleDisplay-Roman.woff2') format('woff2'),
    url('../fonts/ChronicleDisplay-Roman.woff') format('woff');
}
@font-face {
    font-family: 'ChronicleDisplay-Light';
    src: url('../fonts/ChronicleDisplay-Light.woff2') format('woff2'),
    url('../fonts/ChronicleDisplay-Light.woff') format('woff');
}
@font-face {
    font-family: 'ChronicleDisplay-Bold';
    src: url('../fonts/ChronicleDisplay-Bold.woff2') format('woff2'),
    url('../fonts/ChronicleDisplay-Bold.woff') format('woff');
}
@font-face {
    font-family: 'HelveticaNowText-Bold';
    src: url('../fonts/HelveticaNowText-Bold.woff2') format('woff2'),
    url('../fonts/HelveticaNowText-Bold.woff') format('woff');
}
@font-face {
    font-family: 'HelveticaNowText-Medium';
    src: url('../fonts/HelveticaNowText-Medium.woff2') format('woff2'),
    url('../fonts/HelveticaNowText-Medium.woff') format('woff');
}
@font-face {
    font-family: 'HelveticaNowText-Regular';
    src: url('../fonts/HelveticaNowText-Regular.woff2') format('woff2'),
    url('../fonts/HelveticaNowText-Regular.woff') format('woff');
}
@font-face {
    font-family: 'HelveticaNowText-Light';
    src: url('../fonts/HelveticaNowText-Light.woff2') format('woff2'),
    url('../fonts/HelveticaNowText-Light.woff') format('woff');
}

:focus {
    outline: none;
}
.row {
    margin-right: 0;
    margin-left: 0;
}
/*
    Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
    A quick fix is to change .side-menu to

    -> position:absolute

    and uncomment the code below.
    You also need to uncomment

    -> <div class="absolute-wrapper"> </div> in the html file

    you also need to tweek the animation. Just uncomment the code in that section
    --------------------------------------------------------------------------------------------------------------------
    If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
    This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/
/*.absolute-wrapper{
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #f8f8f8;
    border-right: 1px solid #e7e7e7;
}*/

.side-menu {
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #f8f8f8;
    border-right: 1px solid #e7e7e7;
}
.side-menu .navbar {
    border: none;
}
.side-menu .navbar-header {
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
    background-color: transparent;
    margin-right: -1px;
    border-right: 5px solid #e7e7e7;
}
.side-menu .navbar-nav li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav li a {
    padding: 15px;
}
.side-menu .navbar-nav li a .glyphicon {
    padding-right: 10px;
}
.side-menu #dropdown {
    border: 0;
    margin-bottom: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
.side-menu #dropdown .caret {
    float: right;
    margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
    float: right;
}
.side-menu #dropdown > a {
    border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
    padding: 0;
    background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
    width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
    padding-left: 15px;
    border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
    border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
    margin-left: -20px;
    padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
    margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
    padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
    border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
    background-color: #f3f3f3;
    border: 0;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
    min-height: 80px;
}
.side-menu .brand-name-wrapper .navbar-brand {
    display: block;
}
.side-menu #search {
    position: relative;
    z-index: 1000;
}
.side-menu #search .panel-body {
    padding: 0;
}
.side-menu #search .panel-body .navbar-form {
    padding: 0;
    padding-right: 50px;
    width: 100%;
    margin: 0;
    position: relative;
    border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
    width: 100%;
    position: relative;
}
.side-menu #search .panel-body .navbar-form input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
    border-radius: 0;
    background-color: #f3f3f3;
    padding: 15px 18px;
}
/* Main body section */
.side-body {
}


.sortable {
    list-style-type: none;
    cursor: move;
}
.sortable > li {
    padding:10px;
}

.lefttd >tbody >tr > td{
    padding:10px;
}
.maindiv {
    color: #000000;
    /*min-height:520px;*/
}

tr.disabled {
    color:black;
    text-decoration: line-through;
}
/*
.center {
    bottom: 0; left: 0; top: 0; right: 0;
    margin: auto;
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 1;
    background: none;
}
*/
#ulist_wrapper{
    padding:10px;
}
#rlist td{
    color: #000000;
    background-color: white;
}

.table td{
    color: #000000;
}
body{
    background: #FFFFFF;
}
.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{
    color:white !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    background-color:white;
}
.dataTables_wrapper .dataTables_length select{
    color:black !important;
}
input[type=search] {
    color:black;
}
input[type=text] {
    color:black;
}
.invertnav, .navbar-nav>li.invertnav>a{
    color: white;
    background-color: darkgray;
}
.greencheck{
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: #FFFFFF;
    border:2px solid black;
    border-radius: 6px;
    box-sizing: border-box;
    position: relative;
    box-sizing: content-box ;
    width: 30px;
    height: 30px;
    transition: all .3s linear;
}
.greencheck:checked{
    background-color: #2ECC71;
}

#mainlogo{
    margin: 15px 0px 15px 20px;
    margin-right: 50px;
    max-height: 40px;

}
.navbar .navbar-nav>li>a {
    color: #000000;
    font-size: 14px; /* 20px */
    padding: 10px; /* 40px */
}
.navbar-nav>li.active {
    background-color: #FFFFFF;
}
.nav>li>a:focus, .nav>li>a:hover{
    background-color:transparent;
}
.uform{
    max-width:600px;
}

.listitem_wrapper{
    float:left;}

.flex{
    /*display:flex;*/
}

.flex #home_right{
    display: flex;
}

.flexcol{
    display:flex;
    flex-direction: column;
    flex: 2;

}

.navbar-info-nav-wrap{
    display: flex;
}

.navbar-left-info{
    font-family: HelveticaNowText-Medium;
    width: 180px;
    color: #ffffff;
    font-size: 12px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.flex1{
    flex:1;
}
.fullwidth{
    width:100%}
.spread{
    justify-content:space-between}
/*home screen*/
.home_wrapper{

}
.hometoggle {
    /*max-height:165px;*/
    overflow:auto;
    transition:max-height .8s;
    padding-left: 20px;
    padding-right: 20px;
}

.hometoggle, .hometoggle_2 {
    /*max-height:165px;*/
    overflow:auto;
    transition:max-height .8s;
    padding-left: 20px;
    padding-right: 20px;
}
.hometoggle_2 {
    /*max-height:120px;*/
    margin-bottom: 10px;
}

.home_hidden{
    max-height:0px;
    transition:max-height .8s
}
.hidden{
    display:none;
}
.turnable{transform:rotate(0deg);;transition:rotate .8s}
.turned{transform:rotate(180deg);transition:rotate .8s}

#home_left{/*max-width:500px; width: 80%;*/}
#home_left img.turnable{
    float:right;
    max-width:40px;
    margin-top: -10px;
    margin-right: 10px;
}
.attentionimg,.checkimg{
    max-width:40px;
    object-fit:scale-down;
    float: right;
}
.home_tile_headline{font-weight:bold}
.home_tile_text{

    margin-left:0px;
    padding-left: 5px;
    padding-top: 7px;
    padding-right: 5px;
    padding-bottom: 3px;
}

.home_tile_wrapper.chosenfront > .home_tile,.home_tile_wrapper.chosenfront > .home_tile .farbauswahl_text,.chosenfront{
    color: #FFFFFF;
    /*border:1px solid white;*/

    background-color: rgba(185,171,154,1);
}

.home_tile_wrapper chosenfront .farbauswahl{
    width: 100px;
}

#home_apl_farbe .home_tile, #home_tueren_farbe .home_tile, #home_tueren_rahmen .home_tile, #home_korpus_farbe .home_tile, #home_griffmulde .home_tile , #home_glasrahmenfarbe .home_tile {
    width: 80px;
    float: left;
    /*background-color: #f1eeeb;*/
    /*margin-right: 10px;*/
    margin-bottom: 10px;
    min-height: 165px;
}
#home_griffe .home_tile, #home_korpus .home_tile {
    width: 80px;
    float: left;
    /*background-color: #f1eeeb;*/
    /*margin-right: 10px;*/
    margin-bottom: 10px;
}

#home_tueren_farbe .home_tile .chosenfront{
    background-color: #2ECC71;
}

#installscreen{color:#fff;top:0;left:0;z-index:5;background:black;position:absolute;height:100%;width:100%;align-items:center;justify-content:center}
#installstatus{max-height:20px;min-height:20px;border:1px solid #555;width:50%}
#installprogress{height:20px;background:green;width:5%;border-right:1px solid white;transition:width 1s}

#overlay_footer button{float: right;margin-right: 30px;}


.zubehoerinfo .zubehoerbeschreibung_opener{
    margin-top: 0;
    padding-top: 7px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    line-height: 20px;
    /* max-width: 740px; */
    margin-bottom: 5px;
    background-color: #ffffff;
}



.zubehoerbeschreibung{
    display: none;
    flex-direction: column;
    /*max-width: 360px;*/
    padding: 0px;
    /*min-width: 360px;*/


}
#artikelzubehoer .zubehoerbeschreibung{
    display: none;
    align-items: flex-start;
max-width:300px;
}
#artikelzubehoer .zubehoerinfo{
    /*flex:1*/
    min-width: 298px;

}
.overlayzubehoerscrolller{overflow-y:auto;max-height: 325px}
#home_griffe_togglebox{
    display: flex;
    flex-wrap: wrap;
}

.impressum_h4 {
    font-weight: bold;
}
.produktinformation a {
    color: #b9ab9a;
}
.produktinformation a:hover {
    text-decoration: none;
}

.impressum2 {
    background-color: #F1EEEB;
    padding: 10px;
    width: 370px;
    max-height: 500px;
    overflow: scroll;
    display: none;
}

/*Siematic anpassungen start*/
#a78{
    max-height: 525px;
    overflow-y: auto;
}

#iconmenubar{
    display:none}
.programm_highlight{
    color: efbf40;
    ext-decoration: none;
}
/*Kopfauswahlseite*/
#headbox_slider {
    position: fixed;
    top: 130px;
    right: -2000px;
    transition: right .8s;
    width: 100%;
    background: #d9d9d9;
    /*max-height: 82%;*/
    height: -webkit-fill-available;
    overflow-y: none;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 0px;
    z-index: 100;
}
#headbox_slider.slidein{
    display:block;
    right:0px;
    transition:right .6s;
}
#headbox_slider .headbox_closer,#headbox_slider .headbox_upper{
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    color: #000000;
    cursor: pointer;
    margin: 10px 0;
    border: 1px solid #bcbcbd;
    border-radius: 20px;
    height: 30px;
    text-decoration: none;
    padding-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    text-align: center;
    margin-left: 10px;
    background-color: #f2f2f2;
}
#headbox_slider .headbox_closer:hover,#headbox_slider .headbox_upper:hover{
    color: #efbf40;
    text-decoration: none;
    background-color: #000000;
}
#headbox_slider .headbox_upper{
    display:none
}
#headboxes_wrap{
    display:flex;
    /*justify-content: space-between;*/
    flex: 1;max-width: 99%;
    padding-right: 5px;
    min-height: 630px
}

.headboxes_invisible{
    display:none;
}
.headboxes_wrapper{
    overflow-y: auto;
    max-height: 650px;
    margin-bottom: 30px;
    min-width: 500px;
    margin-right: 20px;
    padding-right:10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
.headboxes_wrapper_highlight{
    border:1px solid red;
    border-radius:4px
}
.headboxes_wrapper h1{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0px;
    position: sticky;
    top: 0;
    background: #f6f6f6;
    padding: 20px 0;z-index: 1;
}
.headboxes_frontwrapper{
    display:none;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
    margin-right: 20px
}
.headboxes_frontwrapper h2{
    font-family: HelveticaNowText-Medium;
    color: #000000;
    font-size: 12px;
    margin-bottom: 10px;
    width:100%
}
.headboxes_boxaction{
    display:flex;
}
.headboxes_boxaction_multiselects{

}
.headselection_buttons_left{
    margin-right:15px;
    display:flex;
    align-self: flex-start;
}
.headboxes_visibilitygroup2{
    display:none
}

    /*bildkacheln für Farbauswahl,nebeneinander*/
.home_tilewrapper{
    max-width:520px;
    flex-flow:wrap;
    display: flex;
}
.headbox_tile{
    margin:10px 8px;
    max-width:90px;
    min-width: 85px;
}
.headbox_tile img{
    width:68px;
    height:30px
}
.headbox_tile_text{
    font-size: 10px;/*text-transform: capitalize;*/
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    color: #000000;
}
.headbox_tile_text_noimg{
    margin: 3px 0 -3px 9px;
}

/*selects*/
.headboxes_box select{
    /*margin:10px 5px auto 0;*/
    min-width:330px;
    max-width:330px
}
.headboxes_boxaction_multiselects select{
    margin:0 6px auto 0;
    min-width:162px;
    max-width:162px;
    flex:1
}
.home_waitforinput{
    margin:0;
}

/*eingeklappte auswahl mit bild*/
.home_selectplus_mamaul{
    padding: 0;
    max-width: 330px;
    min-width: 330px;
    max-height: 30px;
    align-self: self-start;
}
.headboxes_boxaction_multiselects .home_selectplus_mamaul{
    padding: 0;
    max-width: 159px;
    min-width: 159px;
    max-height: 30px;
    align-self: self-start;
    margin-bottom: 0;
    margin-right:8px;
}
.home_selectplus_dropul{
    padding-left: 0;
    display:none;
    position: relative;
    z-index: 2;
}
.home_selectplus_dropul_open{
    padding-left: 0;
    display:block;
    background: #fff;

    max-height: 168px;
    overflow-y: auto;
    padding-right: 0px;
    margin-left: -1px;
}
.headboxes_boxaction_multiselects .home_selectplus_dropul_open{
    margin-left: -82px;
    width: 240px;
    z-index: 5;
    position: relative;
}
.headbox_selectplus_option{
    display:flex;
    justify-content: space-between;
    list-style: none;
    margin:0 0 0;
    background: #fff;
    height: 30px;
    /*border-radius: 5px;*/


}
.home_selectplus_mamaul > .headbox_selectplus_option{
    min-width: 162px;

}

.headbox_selectplus_option img{
    width:50px;
    height:24px;
    margin:3px 0px 3px 3px;
}
.headbox_selectplus_option img.selectplus_downarrow{
    width:15;
    height:14px;
    margin-top:8px;
    margin-right: 1px;
}
.headbox_selectplus_option > div{
    /*padding:8px 5px 2px;*/
    flex: 1;
    padding-top: 7px;
    padding-left: 10px;
    white-space: nowrap;
    overflow-x: hidden;
}
.headbox_selectplus_option > div.headbox_tile_text_noimg{
    padding:5px;
}
.headboxes_box{
    max-height: 70px;
    margin-top: 10px;
    /*flex-flow:wrap*/
    display: flex;
}

.rflex{
    display:flex;
}

.option_dropdown_img{
    border: 1px solid #d9d9d9;

}

.headselection_rightside{
    padding-top:60px
}
#headselection_variant_navigation{
    margin-top:0px;/*sorry, ralf, had to...*/
}

/*auswahl wechseln buttons (teilweise übernommen aus produktdarstellung.css) ohwhattadamnmess*/
.headselection_button_row,.backend_button_row{
    margin-bottom:1px;
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
    letter-spacing: 0.4px;
    display: flex;
}
.homeselection,.backend_subnav{
    background-color: #000000;
    color:#f1eeeb;
    cursor: pointer;
    padding-top: 7px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-right: 5px;
    letter-spacing: 0.4px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
    width: 130px;
    min-height: 45px;
}
.homeselection_highlight,.backend_subnav_highlight{
    background-color: #b9ab9a;
    color: #ffffff;
}

#headselection_rightside{
    display:flex;
    flex-direction: column;
}
/*Liste der gewähten Köpfe (Zusammenfassung+einblendbare details)*/
#headselection_summary_onheadpage{
    flex:4;
    overflow-y: scroll;
    padding-right: 10px;
    margin-bottom:30px;
}
.headselection_summary{
    display:flex;
    flex-direction: column;
    max-width:450px;
}
.headselection_summary_scroll{
    display:flex;
    flex-direction: column;
    /*overflow-y: auto;*/
    max-height: 300px;
}
.headselection_summary_row{
    display:flex;
    margin:5px 0;
    font-family: 'HelveticaNowText-Regular'
}
.headselection_summary_row_head{
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding-right: 10px;
    min-width: 150px;
    max-width: 150px;
    padding-top: 7px;
}
.headselection_summary_row_value{
    flex:1;
    display:flex;
    /*justify-content: space-between;
    padding-right: 30px;*/
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    background-color: rgba(236, 236, 236, 1);
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 6px;
    margin-right: 1px;
    margin-bottom: 1px;
    width: 180px;
    color: #404040;
    /*border-radius: 5px;*/

}
.headselection_summary_row_value div:first-letter{
    text-transform: capitalize
}
.headselection_summary_row_value img{
    max-width:30px;
    max-height:20px;
    width: 30px;
    margin: 0px 10px 0 0;
}
.headselection_summary_shortlist{
    display:flex;
    flex-direction: column
}
.headselection_summary_longlist{
    display:none;
    flex-direction: column
}

.headselection_summary_showlonglist,.headselection_summary_hidelonglist,bbt, .archiv_action a,a.backend_button,.btn-primary {
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    color: #000000;
    cursor: pointer;
    margin: 10px 0;
    border: 1px solid #bcbcbd;
    border-radius: 20px;
    height: 30px;
    text-decoration: none;
    padding-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    text-align: center;
    background-color: #f2f2f2;
    min-width: 150px;
}

.boxline{
    justify-content: space-between;
}

.headselection_summary_hidelonglist{
    display:none;
}
.headselection_belowsummary_buttonwrapper{
    display:flex;
    justify-content: space-between;
    align-self: flex-end;
}

/*Produktübersicht, globaler Filtermodus-Wechsler (Dev Modul)*/
#globalresultfilterbehaviour{display:none;flex-direction: column;max-width:200px}
.grf_button{

}
.grf_highlight{
    font-weight:bold}

/*Produktübersicht, folgende Klassen steuern die Sichtbarkeit je nach Preis-Status, don't change!*/
.boxpricestatus1{}
.boxpricestatus2{}
.boxpricestatus3{}
.boxpricestatus4{display:none;}
.boxpricestatus5{display:none;}

/*Produktansicht, Texte*/
.planungshinweis{
    padding: 3px 6px;
    margin: 7px 0 0 -7px;
}
.planungshinweis h3{
    font-size: 11px;
    margin: 4px 0;
    font-weight: bold;
}

/*Produktübersicht, Preisfeld Infobox (Sonderfeature)*/
.pricefailure_show{
    max-height:16px;
}
.pricefailure_info{
    position: relative;
    z-index: 3;
    font-weight: normal;
    background: #fff;
    padding: 5px;
    border: 1px solid red;
    margin-top: -35px;
    display:none;
    width:176px;
    top:18px;
}
.pricefailure_info h3{
}
.pricefailure_info_action{
    text-decoration: underline;
}
.pricehead_info{
    position: relative;
    z-index: 3;
    background: #fff;
    padding: 5px;
    border: 1px solid black;
    margin-top: -35px;
    display:none;
    text-align: left;
    width: 260px;
    left: -1px;
    top: 10px;
}
.pricehead_info h2{margin-top: 10px;
    font-size: 16px;
    line-height: inherit;}


/*translation feature*/
#translation_box{
    position:absolute;
    padding:20px;
    background:#fff;
    bottom:0;
    height:200px;
    width:400px;
    display:none;
    border: 1px solid;
    margin-left: 20px;
}
.translateform{
    display:flex;
    flex-direction: column;
    justify-content: space-between
}
.translateform h2{
    margin:10px 0
}
.translateform textarea{
    width: 100%;
    margin: 10px 0;
}


/*Suchfilter auf Produktlistenseite, eine Option in DEV*/
#globalresultfilterbehaviour{
    opacity: 0;
    height:0
}

/*superseries wie PURE*/
.chapteroverview .produkt3 {
    height: auto;
    min-height: 50px;
    padding: 10px;
}
.chapteroverview_headline{
    width:100%;
}
.indented_superseriesnav{
    /*margin-left:20px*/}

/*image preview modal*/
#modalbackII{
    background:rgb(0,0,0);
    filter: alpha(opacity=50);
    pointer-events: none;
    display:none;
    width:100%;
    height:100%;
    z-index:105;
    top:0;
    left:0;
    position:absolute
}
#modalinnerII{
    pointer-events: all;
    background: #fff;
    width: 70%;
    height: 80%;
    display: flex;
    margin:60px auto;
    opacity:1;
}
#modalcloserII{
    pointer-events: all;
    width: 50px;
    right: 13%;
    top: 0;
    display: flex;
    opacity: 1;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

#modalinnerII .merkliste_speichern{
    margin:20px
}
#modalinnerII #overlay_footer {
    position: absolute;
    top: 79%;
    background: #b7b7b7;
    box-shadow: 0px -2px 5px 0px rgb(0 0 0 / 20%);
    width: 70%;
    min-width: 700px;
    margin-left: 0px;
    margin-right: auto;
}

#modalloadinggif{
    width:25px;
    height:25px;
    margin:auto;
}
#modalloadinggifII{
    width:25px;
    height:25px;
    margin:auto;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
    width: 100%;
    height: 300px;
}
#zoomedimage{margin: 40px;
    width: 90%;
    object-fit: scale-down;}

ul{
    margin: 0;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

}

.headboxes_infopop a{
    font-family: HelveticaNowText-Medium;
    font-size: 12px;
    color: #000000;
    width: 30px;
    height: 30px;
    border: none;
    background-color: #ffffff;
    margin-left: 1px;
    display: block;
    text-align: center;
    padding-top: 7px;
    margin-top: 0;
    /*border-radius: 5px;*/
}

.headboxes_infopop a:hover, .headboxes_infopop a:focus{
    color: #efbf40;
    background-color: #000000;
    text-decoration: none;
}

.homeselection_spacer{
    width: 120px;
    height: 60px;
    background-color: #f2f2f2;
    margin-right: 1px;

}

/*händler backend */
.backend_table,.bookmode_maincontainer table,.bookmode_maincontainer label{
    font-family: HelveticaNowText-Medium;
    font-size: 16px;
}

.bookmode_maincontainer h2{
    font-size: 24px;
}
.bookmode_maincontainer a{
    color:#002a80;
    text-decoration: underline;
}
.bookmode_maincontainer a:hover{
    color:#000;
}
.bookmode_maincontainer{
    font-family: HelveticaNowText-Regular;
    font-size: 16px;
}
/*----------------------------------- media queries -------------------------------------------------------------*/


/* small screen */
@media (max-width: 768px) {
    .side-menu {
        position: relative;
        width: 100%;
        height: 0;
        border-right: 0;
        border-bottom: 1px solid #e7e7e7;
    }
    .side-menu .brand-name-wrapper .navbar-brand {
        display: inline-block;
    }
    /* Slide in animation */
    @-moz-keyframes slidein {
        0% {
            left: -300px;
        }
        100% {
            left: 10px;
        }
    }
    @-webkit-keyframes slidein {
        0% {
            left: -300px;
        }
        100% {
            left: 10px;
        }
    }
    @keyframes slidein {
        0% {
            left: -300px;
        }
        100% {
            left: 10px;
        }
    }
    @-moz-keyframes slideout {
        0% {
            left: 0;
        }
        100% {
            left: -300px;
        }
    }
    @-webkit-keyframes slideout {
        0% {
            left: 0;
        }
        100% {
            left: -300px;
        }
    }
    @keyframes slideout {
        0% {
            left: 0;
        }
        100% {
            left: -300px;
        }
    }
    /* Slide side menu*/
    /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
    .side-menu-container > .navbar-nav.slide-in {
        -moz-animation: slidein 300ms forwards;
        -o-animation: slidein 300ms forwards;
        -webkit-animation: slidein 300ms forwards;
        animation: slidein 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .side-menu-container > .navbar-nav {
        /* Add position:absolute for scrollable menu -> see top comment */
        position: fixed;
        left: -300px;
        width: 300px;
        top: 43px;
        height: 100%;
        border-right: 1px solid #e7e7e7;
        background-color: #f8f8f8;
        -moz-animation: slideout 300ms forwards;
        -o-animation: slideout 300ms forwards;
        -webkit-animation: slideout 300ms forwards;
        animation: slideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /* Uncomment for scrollable menu -> see top comment */
    /*.absolute-wrapper{
          width:285px;
          -moz-animation: slideout 300ms forwards;
          -o-animation: slideout 300ms forwards;
          -webkit-animation: slideout 300ms forwards;
          animation: slideout 300ms forwards;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
      }*/
    @-moz-keyframes bodyslidein {
        0% {
            left: 0;
        }
        100% {
            left: 300px;
        }
    }
    @-webkit-keyframes bodyslidein {
        0% {
            left: 0;
        }
        100% {
            left: 300px;
        }
    }
    @keyframes bodyslidein {
        0% {
            left: 0;
        }
        100% {
            left: 300px;
        }
    }
    @-moz-keyframes bodyslideout {
        0% {
            left: 300px;
        }
        100% {
            left: 0;
        }
    }
    @-webkit-keyframes bodyslideout {
        0% {
            left: 300px;
        }
        100% {
            left: 0;
        }
    }
    @keyframes bodyslideout {
        0% {
            left: 300px;
        }
        100% {
            left: 0;
        }
    }
    /* Slide side body*/
    .side-body {
        margin-left: 5px;
        margin-top: 70px;
        position: relative;
        -moz-animation: bodyslideout 300ms forwards;
        -o-animation: bodyslideout 300ms forwards;
        -webkit-animation: bodyslideout 300ms forwards;
        animation: bodyslideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .body-slide-in {
        -moz-animation: bodyslidein 300ms forwards;
        -o-animation: bodyslidein 300ms forwards;
        -webkit-animation: bodyslidein 300ms forwards;
        animation: bodyslidein 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /* Hamburger */
    .navbar-toggle {
        border: 0;
        float: left;
        padding: 18px;
        margin: 0;
        border-radius: 0;
        background-color: #f3f3f3;
    }
    /* Search */
    #search .panel-body .navbar-form {
        border-bottom: 0;
    }
    #search .panel-body .navbar-form .form-group {
        margin: 0;
    }
    .navbar-header {
        /* this is probably redundant */
        position: fixed;
        z-index: 3;
        background-color: #f8f8f8;
    }
    /* Dropdown tweek */
    #dropdown .panel-body .navbar-nav {
        margin: 0;
    }
}