.hupFloatL { float:left !important }
.hupFloatR { float:right !important }
.hupClear { clear: both }
.hupClearL { clear: left; }
.hupClearR { clear: right; }

.labelBox {
    display: inline-flex;
    padding-left: 8px;
    max-width: calc(100% - 20px);
}

.piano-id-container > iframe { width: 100% !important }

/* Abstaende */
.mt-1:before {content:'';display:block;height: 1em;}
.mt-2:before {content:'';display:block;height: 2em;}
.mt-3:before {content:'';display:block;height: 3em;}
.mb-1:after {content:'';display:block;height: 1em;}
.mb-2:after {content:'';display:block;height: 2em;}
.mb-3:after {content:'';display:block;height: 3em;}
.hideSubForm {display: none;}
.stornoAjaxLoader {background:url('/img/ajax-loader.gif') center no-repeat transparent;width:20px;height:20px;margin:0 16px;display:none;}

/* Pflichtfelder */
.required:after {content:'* ';}
.margin-right-5 {margin-right: 5px;}
.margin-right-10 {margin-right: 10px;}
.margin-right-15 {margin-right: 15px;}
.margin-right-20 {margin-right: 20px;}
.margin-right-25 {margin-right: 25px;}
.margin-right-30 {margin-right: 30px;}
.margin-left-5 {margin-left: 5px;}
.margin-left-10 {margin-left: 10px;}
.margin-left-15 {margin-left: 15px;}
.margin-left-20 {margin-left: 20px;}
.margin-left-25 {margin-left: 25px;}
.margin-left-30 {margin-left: 30px;}
.margin-top-5 {margin-top: 5px;}
.margin-top-10 {margin-top: 10px;}
.margin-top-15 {margin-top: 15px;}
.margin-top-20 {margin-top: 20px;}
.margin-top-25 {margin-top: 25px;}
.margin-top-30 {margin-top: 30px; }
.margin-bottom-5 {margin-bottom: 5px;}
.margin-bottom-10 {margin-bottom: 10px;}
.margin-bottom-15 {margin-bottom: 15px;}
.margin-bottom-20 {margin-bottom: 20px;}
.margin-bottom-25 {margin-bottom: 25px;}
.margin-bottom-30 {margin-bottom: 30px;}

#bonusOption {margin-top: 0px; !important}
#bonusOption #idBonusAdjustmentBlock {display: block; margin-left: 46px; width:-moz-max-content;}
#bonusOption .groupAttributes .control-label {text-align:left; width: 100px}
#bonusOption .bonusImg {margin-left:30px}
#bonusOption .selectAttribute { width: 170px;  margin: 5px 0px 5px 0px; }
#bonusOption .form-control {display: inline-block; !important;}
#bonusOption .detailsLine { width: 82%; margin: 0px 0px 0px 52px; display: block; }
#bonusOption #idDetailsButton {margin-top:0px; float:right;margin-right: 60px;}
#bonusOption .formFieldset {padding: 0px 0px 0px 32px;}
#bonusOption .optionDiv {margin: 0px 0px 0px 52px;}
#bonusOption #idBonusDescription {margin-left: 13px; display: block;}
#bonusOption #idBonusDescription ul {padding: 0 0 0 0; margin-bottom: 7px; list-style-position: inside; list-style-type:circle;}
#bonusOption #idChooseButton {padding-top: 0; !important;}
#bonusOption #idBonusButton {width: -moz-max-content;}

#hupContent *:focus {border: 1px solid var(--hup-button-bgcolor, orange) !important;}
#hupContent section .subEdit { display:none; }

#hupContent #upperOptionGroupDiv label, #hupContent #middleOptionGroupDiv label, #hupContent #lowerOptionGroupDiv label { width: auto; margin: 0 0 4px 0; }
#errorDivSnippet .alert { margin-bottom:2px!important; }

#hupContent .optionDiv { padding: 10px 0 16px 40px!important; clear:both; }
#hupContent .optionDiv::before { content: '\f0c8'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-left: -38px; margin-right: 16px; font-size:1.5em; position: absolute; margin-top: -5px;}
#hupContent .optionDiv.checked::before { content: '\f14a'; }
#hupContent .optionDiv label {display:block; padding-bottom: 4px;}

#hupContent .snippet label { margin: auto; }
#hupContent .snippet .formDivTitle { margin-bottom: 0; }
#hupContent .snippet .hupFormInputBox { padding: 6px 0 0;}
#hupContent .snippet .hupFormInputBlock { width: 60%; }
#hupContent .snippet .formFieldset label { font-weight: normal; }
#hupContent .snippet input[type=radio], .snippet input[type=checkbox] { margin-right: 10px; }
#hupContent .snippet .formRadio { width: 144px; }
#hupContent .snippet .errorBox { margin-top:8px; float:unset; width:unset; }

#hupContent .smallButtonsCFI { cursor: pointer; margin-top: 6px; text-decoration: none; }
#hupContent .smallButtonsCFI:hover { text-decoration:underline; }
#hupContent .smallButtonsCFI a { cursor: pointer; text-decoration: none; }
#hupContent .smallButtonsCFI a:hover { }

#hupContent .subChangeAjaxLoader {background: url("../../img/ajax-loader.gif") no-repeat scroll center center transparent;float: left;height: 20px;width: 20px;margin-top: 7px;display: none;}

#hupContent .subChangeOverview .subImage { background-color: var(--hup-overview-bgcolor) }
#hupContent .subChangeOverview .subChangeDescription label { font-weight: bold; padding-top: 0; width: auto; }
#hupContent .subChangeOverview .subChangeSubscription { margin: 24px  0 8px 0;}
#hupContent .subChangeOverview .subChangeSubscription .caption { display: inline-block; }
#hupContent .subChangeOverview .subChangeSubscription .row { margin-left:0px!important; margin-right:0px!important;}
#hupContent .subChangeOverview .subChangeList { padding: 5px 0 5px 0; font-size: 0.8125em; }
#hupContent .subChangeOverview .subChangeList label { margin:0; padding-top: 2px; font-weight: normal; }
#hupContent .subChangeOverview .subChangeList .row { margin: 0px!important;}
#hupContent .subChangeOverview .subChangeNew { display:block; float:right; text-decoration:none; padding-right: 11px; margin: 5px; }
#hupContent .subChangeOverview .subChangeNew .caption { float:left; padding: 0 5px 0 0; }
#hupContent .subChangeOverview .subChangeNew img { padding-top:-2px; }
#hupContent .subChangeOverview .subChangeHeader { padding: 6px 0; }
#hupContent .subChangeOverview .subChangeActionButton { float: left; }
#hupContent .subChangeOverview .subChangeActionButtons { float: right }
#hupContent .subChangeOverview .subChangeInfoCaption { float: left;  width: 120px; }
#hupContent .subChangeOverview .subChangeCaption {}
#hupContent .subChangeOverview .subChangeEntry { padding: 0 0 0 40px; }
#hupContent .subChangeOverview .grey { background: var(--hup-overview-odd-bgcolor) }
#hupContent .subChangeOverview .subChangeDescription { padding: 8px 0 8px 8px;}

#hupContent .complaintOverview {}
#hupContent .complaintOverview .subImage { background-color: var(--hup-overview-bgcolor) !important; }
#hupContent .complaintOverview .complaintSubscription { margin: 24px 0;}
#hupContent .complaintOverview .complaintSubscription .caption { display: inline-block; }
#hupContent .complaintOverview .complaintSubscription .row { margin-left:0!important; margin-right:0!important;}
#hupContent .complaintOverview .complaintDescription { padding: 8px 0 8px 8px;}
#hupContent .complaintOverview .complaintDescription label { font-weight: bold; padding-top: 0; width: auto; }
#hupContent .complaintOverview .complaintList {padding: 5px 0 5px 0; }
#hupContent .complaintOverview .complaintList label { padding-top: 2px; color: #ba0000; font-weight: normal;}
#hupContent .complaintOverview .complaintList .row { margin: 0px!important;}
#hupContent .complaintOverview .complaintNew {display:block; float:right; text-decoration:none; padding-right: 11px; margin: 5px; }
#hupContent .complaintOverview .complaintNew .caption {float:left; padding: 0 5px 0 0;}
#hupContent .complaintOverview .complaintNew img { padding-top:-2px; }
#hupContent .complaintOverview .complaintHeader {padding: 6px 0;}
#hupContent .complaintOverview .complaintActionButtons {float: right}
#hupContent .complaintOverview .complaintActionButton {float: left; }
#hupContent .complaintOverview .complaintInfoCaption {float: left;}
#hupContent .complaintOverview #deliveryNotices .row { margin-left:0!important; margin-right:0!important;}
#hupContent .complaintOverview #deliveryNotices:after { clear: both; }
#hupContent .complaintOverview .grey { background: var(--hup-overview-odd-bgcolor);}

#hupContent .ajaxLoader, .ajaxLoaderBank { width:20px;height:20px;background:url('../../../img/ajax-loader.gif') center no-repeat transparent; float:left;display:none }
#hupContent .list-unstyled li {list-style-type: none;}
.body {min-height: 0px;}

#hupContent .smallButtonsCFI { color:var(--hup-button-cfi-color)!important; }
#hupContent .smallButtonsCFI a { color:var(--hup-button-cfi-color)!important; }
#hupContent .smallButtonsCFI:hover { text-decoration:underline; }

#hupContent div {font-size: 16px !important;line-height: 20px !important;}
#hupContent .btn-primary{background: none repeat scroll 0 0 var(--hup-button-bgcolor);border: 1px solid var(--hup-button-bgcolor);color: var(--hup-button-color);}
#hupContent .btn-primary>div{color: var(--hup-button-color);}
#hupContent .btn-primary:focus, #hupContent .btn-primary:active, #hupContent .btn-primary:active:focus {background: none repeat scroll 0 0 var(--hup-button-active-bgcolor);color: var(--hup-button-active-color);}
#hupContent .btn-primary:hover  {background: none repeat scroll 0 0 var(--hup-button-hover-bgcolor);color: var(--hup-button-hover-color);}
#hupContent .btn-primary i { margin: 4px 4px 0 0; }
#hupContent .btn-default {color:#000;}

#navigationscontainer .topnav { position: relative; }
#navigationscontainer .topnav ul { list-style-type:none; margin:0; padding:0;}
#navigationscontainer .topnav li { display:inline-block; float: left; margin-right: 1px;  }
#navigationscontainer .topnav li a { height:30px; display:block; min-width:100px;  text-align: center; color: var(--hup-button-topnav-color); background: var(--hup-navigation-button-bgcolor); text-decoration: none; padding: 0 5px 0 5px;}
#navigationscontainer .topnav li a:hover { background: var(--hup-navigation-button-hover-bgcolor); color: var(--hup-navigation-button-hover-color); }
#navigationscontainer .topnav .active { background: var(--hup-navigation-button-active-bgcolor); color: var(--hup-navigation-button-active-color);  font-weight: bold;}
#navigationscontainer .topnav li ul { display: none; }
#navigationscontainer .topnav .show-menu { margin-bottom: 0px; text-decoration: none; color: var(--hup-button-topnav-color); background: var(--hup-navigation-button-bgcolor); text-align: center; display: none; }
#navigationscontainer .topnav input[type=checkbox]{ display: none; }
#navigationscontainer .SSO_Remenber_me_Group input[type=checkbox]{ display: inline; height: auto; width: auto; position: unset; visibility: visible;}
#navigationscontainer .topnav input[type=checkbox]:checked ~ #menu{ display: block;}
#navigationscontainer #mobileDeviceLogin{ display: none; }
#navigationscontainer #loginLogOutButton.extendedLoginLogOutButton a{ height: 30px; line-height: normal; cursor: pointer; min-width: unset; }
#navigationscontainer #loginLogOutButton.extendedLoginLogOutButton a img{ height: 100%; float: left; }
#navigationscontainer #extendedLoginLogOutButtonText{ padding: 6px 0 6px 2px; float: right; font-weight: bold; }
@media screen and (max-width : 770px){
    #navigationscontainer .topnav ul { position: static; display: none; }
    #navigationscontainer .topnav li { margin-top: 1px; }
    #navigationscontainer .topnav ul li, li a { width: 100%; }
    #navigationscontainer .topnav .show-menu { display:block; }
    #loginLogOutButton { position: unset!important; }
    #navigationscontainer .topnav .burgermenu { padding: 2px 0 3px 0; display: block; float: left; }
    #navigationscontainer .topnav .burgermenu div { width: 25px; height: 3px; background-color: var(--hup-button-topnav-color); margin: 4px 0; }
    #navigationscontainer #mobileDeviceLogin { display: block; float: right; height: 30px; }
    #navigationscontainer #mobileDeviceLogin li { margin-top: 0; }
    #navigationscontainer ul.withoutLoginLogOutButton #loginLogOutButton { display: none; }
    #navigationscontainer #extendedLoginLogOutButtonText{ display: none; }
    #navigationscontainer #loginLogOutButton.extendedLoginLogOutButton a img{ float: right; }
}

#editComplaint .actionBox h3 small i { padding-top:8px }

#hupContent #upperOptionGroupDiv label, #hupContent #middleOptionGroupDiv label, #hupContent #lowerOptionGroupDiv label { width: auto; margin: 0 0 4px 0; }
#errorDivSnippet .alert { margin-bottom:2px!important; }

#hupContent .row{ float:unset!important; }

#hupContent .errorField { margin-top: 15px; }

#hupContent div.hupSpacing { padding: 10px; }

#loginLogOutButton { float:right !important; z-index:99; margin-right: 0 !important; position: relative; }
#loginbox { width: 302px; padding: 0.4em; position: absolute; top: 35px; right: 0px; z-index: 99; line-height: normal; }
#navigationscontainer{ display: table; width: 100%; height: 30px;line-height: 30px;background: var(--hup-navigationbar-bgcolor); z-index: 10; }

#hupContent .form-horizontal .form-group input[type="radio"], #hupContent .form-horizontal .form-group input[type="checkbox"] {	width: auto; height: auto; padding: 0; position: unset; visibility: visible; }
#hupContent .form-horizontal .form-group .form-control-padding { padding-top: 7px; }
#hupContent form {display:block;}
#hupContent form { max-width: unset; }

@media (min-width: 976px) {
    #hupContent .control-label{	text-align:right; margin:0; }
}
@media (max-width: 975px) {
    #hupContent .control-label{	text-align:left; margin:0; }
}
@media (max-width: 768px) {
    #hupContent .form-horizontal .control-label { padding-top: 7px; }
}

#hupContent #idOrderForm .form-group { margin-left: 0px !important; margin-right: 0px !important;  }

#hupContent .groupDescription { border: 1px solid var(--hup-offer-group-description-bordercolor); padding: 0px 10px 10px 10px;margin-bottom: 5px;font-size: 14px!important;line-height: 21px!important;}
#hupContent .groupHeader .groupHeaderDescription { margin-bottom: 5px; margin-top: 15px; background: var(--hup-offer-group-header-bgcolor); padding: 10px 5px 10px 15px; color:var(--hup-offer-group-header-color);}
#hupContent .offerImage {margin-bottom: 5px; font-size: 80pt!important;text-align: center;}


@media (min-width: 801px){
    #hupContent #offerSiteDescription h2 {text-align: center; font-size: 32px!important;}
    #hupContent #offerSiteDescription h4 {text-align: center; font-size: 18px!important;}
}

@media (max-width: 800px) {
    #hupContent #offerSiteDescription h2 {text-align: center; font-size: 24px!important;}
    #hupContent #offerSiteDescription h4 {text-align: center; font-size: 14px!important;}
}

#hupContent .offerHeader, #hupContent .offerHeaderSlider { background: var(--hup-offer-header-bgcolor); border-color: var(--hup-offer-header-bgcolor); color:var(--hup-offer-header-color);padding: 5px 5px 5px 15px;cursor: pointer;width: 100%;text-align: left; margin-bottom: 5px;font-weight: 700;}
#hupContent .offerHeader.openHeader, #hupContent .offerHeaderSlider.openHeader { margin-bottom: 0px;}
#hupContent .offerDescription { background: var(--hup-offer-offerdescription-bgcolor);padding: 20px 20px 20px 20px; font-size: 14px!important;line-height: 21px!important;}
#hupContent .offerDescription i { font-size: 14px!important;}
#hupContent .offerDescription .offerPrice{ text-align: right; font-weight: bold; margin-top: 5px;}
#hupContent .offerOrderLink { margin-bottom: 5px; background: var(--hup-offer-orderlink-bgcolor); padding: 5px 5px 5px 15px; color:var(--hup-offer-orderlink-color);font-size: 12px!important;text-align: center; }
#hupContent .offerOrderLink a { color:var(--hup-offer-orderlink-color); text-decoration: none;font-weight: 700;}
#hupContent .offerOrderLink a i { margin-left: 15px;}
#hupContent .offerHeaderSlider { height: 30px;}

#hupContent .offerDescription p {line-height: 21px!important;}

#hupContent .orderPanel { display: none; overflow: hidden; }

#hupContent #offerNavi { overflow: hidden; background-color: #1695a3; }
#hupContent #offerNavi a { float: left; display: block; color: #acf0f2; text-align: center; margin-right: 15px; padding: 8px 8px; text-decoration: none; border-bottom: 3px solid transparent;}
#hupContent #offerNavi a:hover {  border-bottom: 3px solid #acf0f2;}
#hupContent #offerNavi a.active {  border-bottom: 3px solid #acf0f2;}

#hupContent b, #hupContent strong { font-weight: 800; }
#hupContent .offerDescription p {line-height: 21px!important;}

#hupContent img {border: 0}

#hupContent #hupRemovalProgress img {
    width: unset;
}
#hupContent #hupAddOn {visibility: visible; position: relative; }


#internetexplorerMessage { background-color: #fcf8e3; text-align: center; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px;}
#internetexplorerMessage h1{ font-size: 20px;}
#internetexplorerMessage h3{ font-size: 12px;}

#hupContent #detailPopupInfo { position:absolute; top: 10%; left: 30%; height: 80%; width:40%; background-color: var(--hup-bonus-detail-popup-bgcolor); padding: 10px; border-radius: 3px; box-shadow: 0 0 0 7px rgba(0,0,0,0.2); }
@media (max-width: 899px) {
    #hupContent #detailPopupInfo {top: 0; left: 0; height: 100%; width:100%; border-radius: 0px; z-index:1000; }
}
#hupContent #detailPopupInfoWrapper { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 7000; }
#hupContent #detailPopupInfoHeader { width: 100%; height: 33px; }
#hupContent #detailPopupInfoHeaderTitle { font-weight: bold; float: left; padding-top: 5px; height: 100%;}
#hupContent #detailPopupInfoHeaderButton { float:right; }
#hupContent #detailPopupInfoContent { height: calc(100% - 66px); overflow:scroll; padding-top: 10px; text-align: center; }
#hupContent #detailPopupInfoContentImg { height: auto; max-height: 70%; width: auto; max-width: 50%; display: block; margin: auto; min-height: auto; min-width: auto; }
#hupContent #detailPopupInfoContentText { display: block; }
#hupContent #detailPopupInfoFooter { width: 100%; height: 33px; padding: 5px; }
#hupContent #detailPopupInfoFooterCloseButton { float:left; }
#hupContent #detailPopupInfoFooterAcceptButton { float:right; }

#hupContent .bonusBox { border: 1px solid var(--hup-bonus-box-border-color); }
#hupContent .bonusBoxImg { height: 228px; max-width: 228px; margin: 0px auto; }
#hupContent .bonusBoxDetail { min-height: 24px; padding:2px; cursor: pointer; text-align: center; border-top : 1px solid var(--hup-bonus-box-border-color); }
#hupContent .hightlightBonusPoints { font-weight: bold; }
#hupContent .bonusImg { display:block; margin: 0 auto; }
#hupContent .bonusSelected {border: 3px solid var(--hup-bonus-box-border-color)}
#hupContent .bonusBoxHidden { display: none }

#hupContent .subscriptionOverviewIcon {display: block;}

#hupContent #memo {
    height: 250px;
}

#hupContent .offerImage img {
    border: 0;
    width: 100%;
    height: 100%;
}

.terminationLink { color: grey }