#topfooter{
    clear:both;
}

 .tx-rolecalculator h1{
    margin: 0px;
    padding: 0px;
    font-size: 36px;
}
 .tx-rolecalculator h2{
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    font-size: 28px;
}
 .tx-rolecalculato  p{
    margin-bottom: 50px;
}
 .rollenrechner-2col {
    overflow: hidden;
}
 .rollenrechner-2col p{
    margin: 0px;
}


 .rollenrechner-box .image-big{
    position: absolute;
    right: 50px;
    top: 100px;
    height:73px;
    width:105px;
}



 .rollenrechner-box.info-box h4,
 .rollenrechner-box.info-box p{
}
 .rollenrechner-box.info-box h4{
    color: #19519c;
    font-size: 14px;
    margin-bottom: 5px;
}

 .rollenrechner-step-1,
 .rollenrechner-step-2,
 .rollenrechner-step-3{
    margin-bottom: 50px;
    position:relative;
}


 .rollenrechner-gray img,
 .rollenrechner-gray .icon-rollenrechner{
   display:inline-block;
    margin-right: 10px;
}
 .rollenrechner-gray strong{
    display: block;
}

 .rollenrechner-gray p span.blue{
    color: #19519c;
    font-size: 22px;
    font-family: var(--font-family-bold);
}
 .rollenrechner-box input{
    height: 42px;
    width: 190px;
    padding: 0px 10px;
}
 .rollenrechner-box select{
    height: 40px;
    padding: 0px 5px;
    width: 215px;
    background: url(../Imgs/dropdown-feld.png) center center no-repeat;
    background-size: contain;
    border: 0px;
}
 .rollenrechner-box a.diameter-labelmode,
 .rollenrechner-box a.amount-labelmode,
 .rollenrechner-box a.select,
 .rollenrechner-box a.input,
 .rollenrechner-box a.diameter,
 .rollenrechner-box a.length{
    position: relative;
    color: #19519c;
    display: block;
    height: 60px;
    text-decoration: none;
    font-family: var(--font-family-bold);
    padding-left: 80px;
    line-height: 20px;
    display:table-cell;
    vertical-align: middle;
}
 .rollenrechner-box a.diameter-labelmode span,
 .rollenrechner-box a.amount-labelmode span,
 .rollenrechner-box a.select span,
 .rollenrechner-box a.input span,
 .rollenrechner-box a.diameter span,
 .rollenrechner-box a.length span{
    display: none;
    height: 7px;
    width: 20px;
    position: absolute;
    background: url(../Imgs/dreieck.png) center center no-repeat;
    bottom: -7px;
    left: 132px;
}
.rollenrechner-box a.diameter-labelmode:hover,
 .rollenrechner-box a.diameter-labelmode.active,
 .rollenrechner-box a.amount-labelmode:hover,
 .rollenrechner-box a.amount-labelmode.active,
 .rollenrechner-box a.select:hover,
 .rollenrechner-box a.select.active,
 .rollenrechner-box a.input:hover,
 .rollenrechner-box a.input.active
{
    background-color: #19519c;
    color: #fff;
}

 .rollenrechner-box a.diameter:hover,
 .rollenrechner-box a.diameter.active
{
    background-color: #19519c;
    background-image: url(../Imgs/icn_aussendurchmesser_aktiv.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    color: #fff;
    background-size: 55px auto !important;
}
 .rollenrechner-box a.length:hover,
 .rollenrechner-box a.length.active
{
    background-color: #19519c;
    background-image: url(../Imgs/icn_rollenlaenge_aktiv.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    color: #fff;
    background-size: 55px auto !important;
}
 .rollenrechner-box a.diameter-labelmode:hover span,
 .rollenrechner-box a.amount-labelmode:hover span,
 .rollenrechner-box a.select:hover span,
 .rollenrechner-box a.input:hover span,
 .rollenrechner-box a.diameter:hover span,
 .rollenrechner-box a.length:hover span{
    display: block;
}
 .rollenrechner-box a.length{
    padding-left: 95px;
}

 .rollenrechner-box a.diameter-labelmode,
 .rollenrechner-box a.amount-labelmode{
    background: #f3f3f3;
}

 .rollenrechner-box a.select .icon-rollenrechner,
 .rollenrechner-box a.diameter-labelmode .icon-rollenrechner,
 .rollenrechner-box a.amount-labelmode .icon-rollenrechner,
 .rollenrechner-box a.input .icon-rollenrechner{
    position:absolute;
    top:5px;
    left:10px;
}
 .rollenrechner-box a.diameter{
    background: url(../Imgs/Aussendurchmesser.svg) no-repeat 10px center;
    background-size: 55px auto !important;
}
 .rollenrechner-box a.length{
    background:url(../Imgs/Rollenlaenge.svg) no-repeat 10px center;
    background-size: 55px auto !important;
}


 .rollenrechner-box a.diameter.active{
    background: url(../Imgs/Aussendurchmesser.svg) 10px center no-repeat #19519c;
    color: #fff;
}
 .rollenrechner-box a.length.active{
    background: url(../Imgs/Rollenlaenge.svg) 10px center no-repeat #19519c;
    color: #fff;
}
 .rollenrechner-box a.select.active span,
 .rollenrechner-box a.input.active span,
 .rollenrechner-box a.diameter-labelmode.active span,
 .rollenrechner-box a.amount-labelmode.active span,
 .rollenrechner-box a.diameter.active span,
 .rollenrechner-box a.length.active span{
    display: block;
}

.select2-container--default .select2-selection--single{
    border: 0px !important;
    border-radius: 0px !important;
    background: url("../Imgs/dropdown-feld.png") center center no-repeat !important;
    height: 40px !important;
    width: 100% !important;
    background-size: contain !important;
}
.select2-selection__rendered{
    line-height: 40px !important;
    font-family: var(--font-family-bold);
    color: #686868 !important;
}
.select2-selection__arrow{
    right: 12px !important;
}

.customDiameter {
    position: relative;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    background-image: url("../Imgs/icn_dropdown-aktiv.png");
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: #E1EDFF !important;
    color: #686868 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"]{
    background: #E1EDFF !important;
}
.select2-results__option{
    border-top: 1px solid #c0c0c0 !important;
}
.select2-results__option:first-child{
    border-top: 0px !important;
}
.select2-dropdown.select2-dropdown--below{
    border: 1px solid #c0c0c0 !important;
    border-top: 0px !important;
}

.icon-rollenrechner{
    background:transparent no-repeat center center;
    background-size:calc(100% - 6px);
    width:62px;
    height:51px;
    display:inline-block;
}
.icon-rollenrechner.icon-combination{
    background-image: url(../Imgs/HaftverbundZusammensetzung.svg);
}
.active > .icon-rollenrechner.icon-combination.hover,
a:hover > .icon-rollenrechner.icon-combination.hover{
    background-image: url(../Imgs/HaftverbundZusammensetzung.svg);
}
.icon-rollenrechner.icon-combination-thickness{
    background-image: url(../Imgs/HaftverbundDicke.svg);
}
.active > .icon-rollenrechner.icon-combination-thickness.hover,
a:hover >.icon-rollenrechner.icon-combination-thickness.hover{
    background-image: url(../Imgs/HaftverbundDicke.svg);
}
.icon-rollenrechner.icon-label-amount{
    background-image: url(../Imgs/Etikettenanzahl.svg);
    background-size: 55px auto !important;
}
.active > .icon-rollenrechner.icon-label-amount.hover,
a:hover > .icon-rollenrechner.icon-label-amount.hover{
    background-image: url(../Imgs/Etikettenanzahl.svg);
    background-size: 55px auto !important;
}
.icon-rollenrechner.icon-outer-diameter{
    background-image: url(../Imgs/icn_aussendurchmesser_aktiv.png);
    background-size: 55px auto !important;
}

.active > .icon-rollenrechner.icon-outer-diameter.hover,
a:hover > .icon-rollenrechner.icon-outer-diameter.hover{
    background-image: url(../Imgs/icn_aussendurchmesser_aktiv.png);
    background-size: 55px auto !important;
}
.icon-rollenrechner.icon-role-length{
    background-image: url(../Imgs/icn_rollenlaenge_inaktiv.png);
    background-size: 55px auto !important;
}
.active > .icon-rollenrechner.icon-role-length.hover,
a:hover > .icon-rollenrechner.icon-role-length.hover{
    background-image: url(../Imgs/icn_rollenlaenge_inaktiv.png);
    background-size: 55px auto !important;
}

.icon-rollenrechner.icon-label-height{
    background-image: url(../Imgs/Etikettenhoehe.svg);
    background-size: 55px auto !important;
}
.icon-rollenrechner.icon-label-spacing{
    background-image: url(../Imgs/Etikettenabstand.svg);
    background-size: 55px auto !important;
}
.icon-rollenrechner.icon-core-diameter{
    background-image: url(../Imgs/Kerndurchmesser.svg);
    background-size: 55px auto !important;
}
.active > .icon-rollenrechner.icon-core-diameter.hover,
a:hover > .icon-rollenrechner.icon-core-diameter.hover{
    background-image: url(../Imgs/Kerndurchmesser.svg);
    background-size: 55px auto !important;
}

.rollenrechner-box dd input + .icon-rollenrechner,
.rollenrechner-box dd .select2-container + .icon-rollenrechner{
    vertical-align:top;
    margin-left:20px;
}
.rollenrechner-box dd .icon-rollenrechner + .customDiameter{
    display:inline-block;
    width:auto;
    float:left;
    margin-right:4px;
}

.ie_edge .select2-container,
.ie10 .select2-container,
.ie11 .select2-container{
    max-width:213px;
}
.ie10 .rollenrechner-box dd .icon-rollenrechner + .customDiameter,
.ie_edge .rollenrechner-box dd .icon-rollenrechner + .customDiameter,
.ie11 .rollenrechner-box dd .icon-rollenrechner + .customDiameter{
    margin-right:4px;
}

@media screen and (max-width:29.9999em) {


    .customDiameterLength {
        width: 80%!important;
    }
    .customDiameter {
        width: 100%;
    }
    #header {
        height: 80px!important;
    }

    #roleBushDiameterInput-diameter,
    #roleBushDiameterInput-length
    {
        width: 100%;
    }
    .select2-container{
        width:100% !important;
        max-width:none;
    }

    .select2-container--default .select2-selection--single{
        background-size: 100% 40px!important;
    }

    #subheader{
        height: auto !important;
        padding-bottom: 20px !important;
    }

    #topfooter{
        padding: 0px 20px !important;
        clear:none;
    }
    .top_nav{
        display: none !important;
    }
    .company_info{
        display: none !important;
    }
    .tx-rolecalculator .search{
        display: none !important;
    }
    .menu_container{
        display: none !important;
    }
    #main{
        width: 100% !important;
    }
    .foot_wrap{
        display: none !important;
    }
    #logo{
        left: 20px !important;
        top: 25px !important;
    }
    .rollenrechner-2col {
        overflow: hidden;
    }
    .rollenrechner-2col p{
        margin: 0px;
    }
    .rollenrechner-left{
        float: none !important;
        width: 100% !important;
    }
    .rollenrechner-right{
        float: none !important;
        width: 100% !important;
    }
    .rollenrechner-box{
        margin-bottom: 20px;
        padding: 25px 15px;
        position: relative;
        border: 1px solid #ddd;
    }
    .rollenrechner-box .image-big{
        display: none !important;
    }
    .rollenrechner-box h3 {
        margin-bottom: 25px;
        font-size: 20px;
    }
    .rollenrechner-box dl{
        margin-bottom: 25px;
    }
    .rollenrechner-box dl dt{
        float: none !important;
        width: 100% !important;
        padding: 0px !important;
        text-align: left !important;
        height: auto !important;
        line-height: normal !important;
    }
    .rollenrechner-box dl dd{
        height: auto !important;
        line-height: normal !important;
        margin-top: 5px !important;
        margin-bottom: 20px !important;
    }
    .rollenrechner-box.info-box .csc-textpic-text{
        padding-top:0;
    }
    .rollenrechner-box.info-box .p{
        padding-left:0;
    }
    .rollenrechner-box.info-box h4{
        font-size: 14px;
        margin-bottom: 5px;
    }
    .rollenrechner-step-1,
    .rollenrechner-step-2,
    .rollenrechner-step-3{
        margin-bottom: 50px;
        position:relative;
    }
    .rollenrechner-gray{
        height: auto;
        position: relative;
        padding: 10px !important;
    }
    .rollenrechner-gray p:first-child{
        float: none !important;
        width: auto !important;
        padding-right: 0px !important;
        text-align: left !important;
        margin-top: 0px !important;
    }
    .rollenrechner-gray.inline p:first-child{
        margin-top: 0px !important;
        line-height: normal !important;
    }
    .rollenrechner-gray img,
    .rollenrechner-gray .icon-rollenrechner{
        float: left;
        margin-top: 15px;
        margin-right: 10px;
    }
    .rollenrechner-gray strong{
        display: block;
    }
    .rollenrechner-gray p{
        padding-top: 25px;
    }
    .rollenrechner-gray p span{
        color: #686868;
        /* font-size: 10px; */
        font-family: var(--font-family-bold);
    }

    .rollenrechner-gray p #combinationThicknessResult {
        font-family: var(--font-family-base);
    }

    .rollenrechner-box input{
        height: 42px;
        width: 100%;
        padding: 0px 10px;
        box-sizing: border-box;
    }

    .rollenrechner-box .customDiameterRole {
        width: 90% !important;
    }

     .tx-rolecalculator select{
        width: 100% !important;
    }
     .rollenrechner-box a.diameter-labelmode,
     .rollenrechner-box a.amount-labelmode,
     .rollenrechner-box a.select,
     .rollenrechner-box a.input,
     .rollenrechner-box a.diameter,
     .rollenrechner-box a.length{
        margin-bottom: 10px !important;
        border: 1px solid #ddd !important;
    }
     .rollenrechner-box a.diameter-labelmode span,
     .rollenrechner-box a.amount-labelmode span,
     .rollenrechner-box a.select span,
     .rollenrechner-box a.input span,
     .rollenrechner-box a.diameter span,
     .rollenrechner-box a.length span{
        display: none !important;
    }
     .rollenrechner-box a.length{
        padding-left: 95px;
    }
     .rollenrechner-switch-left{
        float: none !important;
        width: 100% !important;
    }
     .rollenrechner-switch-right{
        float: none !important;
        width: 100% !important;
    }
     .rollenrechner-box dd input + .icon-rollenrechner,
     .rollenrechner-box dd .select2-container + .icon-rollenrechner{
        display:none;
    }
}

div.page-start {
    background: none!important;
}

div.standalone #content{
    padding-bottom: 20px;
}


 div.ru .rollenrechner-box #calcRoleOuterDiameterInputWrapper dt {
    padding-top:20px;
    height: 40px;
    line-height: inherit;
}

.rollenrechner-box [class*="csc-textpic-intext-left-nowrap-"] .csc-textpic-text{margin-left: 90px; }