.headline_1-1-bold {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #262626;
  font-size: 3.25em;
  line-height: 150%;
}

.headline_1-regular-large {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #6C6C6C;
  font-size: 3em;
  line-height: 150%;
}

.headline_1-regular-large-mobile {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #6C6C6C;
  font-size: 2em;
  line-height: 150%;
}

.headline_1-bold {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #262626;
  font-size: 1.625em;
  line-height: 150%;
}

.headline_1-regular {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #262626;
  font-size: 1.625em;
  line-height: 150%;
}

#telekomLoginInfoDialog .ui-dialog-content h2, .headline_2-bold {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #262626;
  font-size: 1.25em;
  line-height: 150%;
}

#stageSubline, body .ui-staticmessage.static-global-message .ui-message-info-summary,
body .ui-staticmessage.static-global-message .ui-message-warn-summary,
body .ui-staticmessage.static-global-message .ui-message-error-summary,
body .ui-staticmessage.static-global-message .ui-message-fatal-summary, .headline_2-regular {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #262626;
  font-size: 1.25em;
  line-height: 150%;
}

.subline-regular-large {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #4b4b4b;
  font-size: 1.3125em;
  line-height: 150%;
}

.subline-bold {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #262626;
  font-size: 1.125em;
  line-height: 150%;
}

input[type=text].input-large,
input[type=password].input-large, .subline-regular {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #262626;
  font-size: 1.125em;
  line-height: 150%;
}

.subline {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #4b4b4b;
  font-size: 1.125em;
  line-height: 150%;
}

.input-checklist-block > p.check-list-item.valid, .text-main-bold {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #262626;
  font-size: 16px;
  line-height: 150%;
}

input[type=text],
input[type=password], textarea, .text-main-regular {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #262626;
  font-size: 16px;
  line-height: 150%;
}

.text-bold {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #4b4b4b;
  font-size: 16px;
  line-height: 150%;
}

.input-checklist-block > p.check-list-item, .text-regular, .regular-labels label, .regular-labels-block label {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #4b4b4b;
  font-size: 16px;
  line-height: 150%;
}

.chip > .chip-content, .label-main-regular {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #262626;
  font-size: 0.875em;
  line-height: 150%;
}

.label-regular, .text-error {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #4b4b4b;
  font-size: 0.875em;
  line-height: 150%;
}

.label-main-bold {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #262626;
  font-size: 0.875em;
  line-height: 150%;
}

.data-table > thead > tr > th, .data-table > tbody > tr > td, .data-table-grey-head > thead > tr > th, .data-table-grey-head > tbody > tr > td {
  padding: 12px;
  text-align: left;
}

.groupTariffList > tbody > tr > td > table table > tbody > tr > td, .data-output-table > tbody > tr > td, .data-input-table > tbody > tr > td, .activationOption > tbody > tr > td, .eks-new-cards-table > tbody > tr > td {
  padding: 6px 12px;
  text-align: left;
}

.accessibilityButtonText, .ctaCheckboxGroup .ui-fileupload-choose, .primary-button:not(.ui-button), .secondary-button:not(.ui-button), .button-icon-only, .transparent-button, .back-btn:not(.ui-button),
.success-btn:not(.ui-button), .help-btn:not(.ui-button), .pwd-reveal-btn {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  padding: 0.375em 1.5em;
  border-radius: 4px;
  outline: 0 none;
  cursor: pointer;
  -webkit-appearance: button;
}
.accessibilityButtonText:focus, .ctaCheckboxGroup .ui-fileupload-choose:focus, .primary-button:focus:not(.ui-button), .secondary-button:focus:not(.ui-button), .button-icon-only:focus, .transparent-button:focus, .back-btn:focus:not(.ui-button),
.success-btn:focus:not(.ui-button), .help-btn:focus:not(.ui-button), .pwd-reveal-btn:focus {
  outline: 1px solid #6b6b6b;
  outline-offset: 1px;
}
.accessibilityButtonText:disabled, .ctaCheckboxGroup .ui-fileupload-choose:disabled, .primary-button:disabled:not(.ui-button), .secondary-button:disabled:not(.ui-button), .button-icon-only:disabled, .transparent-button:disabled, .back-btn:disabled:not(.ui-button),
.success-btn:disabled:not(.ui-button), .help-btn:disabled:not(.ui-button), .pwd-reveal-btn:disabled {
  cursor: default;
}

@font-face {
  font-family: "TeleGrotesk Next Ultra";
  src: url("fonts/telegrotesknext-ultra.woff") format("woff");
}
@font-face {
  font-family: "TeleGrotesk Next Bold";
  src: url("fonts/telegrotesknext-bold.woff") format("woff");
}
@font-face {
  font-family: "TeleGrotesk Next Regular";
  src: url("fonts/telegrotesknext-regular.woff") format("woff");
}
@font-face {
  font-family: "TeleGrotesk Next Medium";
  src: url("fonts/telegrotesknext-medium.woff") format("woff");
}
@font-face {
  font-family: "TeleGrotesk Next Thin";
  src: url("fonts/telegrotesknext-thin.woff") format("woff");
}
/* TeleNeoOffice-Regular */
@font-face {
  font-family: "TeleNeo";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/TeleNeoWeb-Regular.eot"); /* IE9 Compat Modes */
  src: local("TeleNeoOffice-Regular"), local("TeleNeoOffice-Regular"), url("fonts/TeleNeoWeb-Regular.eot#iefix") format("embedded-opentype"), url("fonts/TeleNeoWeb-Regular.woff2") format("woff2"), url("fonts/TeleNeoWeb-Regular.woff") format("woff"), url("fonts/TeleNeoOffice-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
}
/* TeleNeoOffice-Medium */
@font-face {
  font-family: "TeleNeo";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/TeleNeoWeb-Medium.eot"); /* IE9 Compat Modes */
  src: local("TTeleNeoOffice-Medium"), local("TeleNeoOffice-Medium"), url("fonts/TeleNeoWeb-Medium.eot#iefix") format("embedded-opentype"), url("fonts/TeleNeoWeb-Medium.woff2") format("woff2"), url("fonts/TeleNeoWeb-Medium.woff") format("woff"), url("fonts/TeleNeoOffice-Medium.ttf") format("truetype"); /* Safari, Android, iOS */
}
/* TeleNeoOffice-Bold */
@font-face {
  font-family: "TeleNeo";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/TeleNeoWeb-Bold.eot"); /* IE9 Compat Modes */
  src: local("TTeleNeoOffice-Bold"), local("TeleNeoOffice-Bold"), url("fonts/TeleNeoWeb-Bold.eot#iefix") format("embedded-opentype"), url("fonts/TeleNeoWeb-Bold.woff2") format("woff2"), url("fonts/TeleNeoWeb-Bold.woff") format("woff"), url("fonts/TeleNeoOffice-Bold.ttf") format("truetype"); /* Safari, Android, iOS */
}
/* TeleNeoOffice-ExtraBold */
@font-face {
  font-family: "TeleNeo";
  font-style: normal;
  font-weight: 800;
  src: url("fonts/TeleNeoWeb-ExtraBold.eot"); /* IE9 Compat Modes */
  src: local("TeleNeoOffice-ExtraBold"), local("TeleNeoOffice-ExtraBold"), url("fonts/TeleNeoWeb-ExtraBold.eot#iefix") format("embedded-opentype"), url("fonts/TeleNeoWeb-ExtraBold.woff2") format("woff2"), url("fonts/TeleNeoWeb-ExtraBold.woff") format("woff"), url("fonts/TeleNeoOffice-ExtraBold.ttf") format("truetype"); /* Safari, Android, iOS */
}
/* Standard fonts pack */
.text-error {
  color: #D90000;
  margin-top: 6px;
}

/* Bigger fonts pack */
/* Additional text styles */
.noWrap {
  white-space: nowrap;
}

.overflowWrap {
  overflow-wrap: anywhere;
}

.capitalized {
  text-transform: capitalize;
}

/**************************************************************************************
 * Modern magenta styles for regular JSF elements (from Mojarra)
 **************************************************************************************/
/* Button */
.primary-button:not(.ui-button) {
  height: 33px;
  background: #E20074;
  color: #ffffff;
  border: 1px solid transparent;
  /* iPhone 6, 6s, 7, 8 */
}
.primary-button:not(.ui-button):hover {
  background-color: #D1006C;
}
.primary-button:not(.ui-button):active {
  background-color: #BD0061;
}
.primary-button:not(.ui-button):focus {
  background-color: #fc0081;
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.15);
}
.primary-button:not(.ui-button):disabled {
  background: #dcdcdc;
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  .primary-button:not(.ui-button):disabled {
    background: #b2b2b2;
  }
}

.secondary-button:not(.ui-button) {
  background-color: #ededed;
  border: 1px solid #6b6b6b;
  color: #262626;
  height: 33px;
}
.secondary-button:not(.ui-button):hover, .secondary-button:not(.ui-button):focus {
  background-color: #dcdcdc;
}
.secondary-button:not(.ui-button):active {
  background-color: #b2b2b2;
}
.secondary-button:not(.ui-button):disabled {
  background-color: transparent;
  opacity: 0.5;
}

.button-icon-only, .pwd-reveal-btn {
  background-color: #ededed;
  border: 1px solid #6b6b6b;
  color: #262626;
  padding: 0.375em;
  height: 33px;
  box-sizing: border-box;
}
.button-icon-only .ui-icon, .pwd-reveal-btn .ui-icon {
  width: 1em;
  height: 1em;
}
.button-icon-only:hover, .pwd-reveal-btn:hover, .button-icon-only:focus, .pwd-reveal-btn:focus {
  background-color: #dcdcdc;
}
.button-icon-only:active, .pwd-reveal-btn:active {
  background-color: #b2b2b2;
}
.button-icon-only:disabled, .pwd-reveal-btn:disabled {
  background-color: transparent;
  opacity: 0.5;
}

.confirm-icon-btn {
  color: #46A800 !important;
}

.cancel-icon-btn {
  color: #D90000 !important;
}

.link-as-button {
  display: inline-block;
  line-height: normal;
  margin-top: 1px;
  text-align: center;
}
.link-as-button:hover, .link-as-button a:hover {
  text-decoration: none;
}

.transparent-button {
  height: 33px;
  background: none;
  border: 1px solid transparent;
  color: #262626;
}
.transparent-button:hover {
  background-color: #ededed;
}
.transparent-button:active {
  background-color: #dcdcdc;
}
.transparent-button:focus {
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.15);
}
.transparent-button:disabled {
  opacity: 0.5;
}

.back-btn:not(.ui-button),
.success-btn:not(.ui-button) {
  height: 33px;
  background: transparent;
  border: 1px solid #6b6b6b;
  color: #262626;
}
.back-btn:not(.ui-button):hover, .back-btn:not(.ui-button):focus,
.success-btn:not(.ui-button):hover,
.success-btn:not(.ui-button):focus {
  background-color: #ededed;
}
.back-btn:not(.ui-button):active,
.success-btn:not(.ui-button):active {
  background-color: #dcdcdc;
}
.back-btn:not(.ui-button):focus,
.success-btn:not(.ui-button):focus {
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.15);
}
.back-btn:not(.ui-button):disabled,
.success-btn:not(.ui-button):disabled {
  background-color: #ededed;
  opacity: 0.5;
}

.help-btn:not(.ui-button) {
  height: 33px;
  background: #383838;
  color: #ffffff;
  border: 1px solid #383838;
}
.help-btn:not(.ui-button):hover {
  background-color: #262626;
}
.help-btn:not(.ui-button):active {
  background-color: #383838;
}
.help-btn:not(.ui-button):focus {
  background-color: #454545;
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.15);
}
.help-btn:not(.ui-button):disabled {
  opacity: 0.5;
}

.btn-large:not(.ui-button) {
  height: 48px;
  padding: 12px 24px;
  font-size: 1.125em;
}

/* Radio */
input[type=radio]:checked, input[type=radio]:not(:checked) {
  position: absolute;
  z-index: -1;
  opacity: 0;
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
}
input[type=radio]:checked + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}
input[type=radio] + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  margin: 0 12px 0 0;
}
input[type=radio] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #6b6b6b;
  border-radius: 100%;
  background: #ffffff;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px 10px;
  cursor: pointer;
}
input[type=radio]:checked + label::before {
  background-image: url("/bspResources/skin/tmobile/images/elipse_magenta.svg");
}
input[type=radio]:not(:disabled):not(:checked) + label:hover::before, input[type=radio]:not(:disabled):checked + label:hover::before {
  background-color: #ededed;
}
input[type=radio]:disabled + label, input[type=radio]:disabled + label:before {
  opacity: 0.5;
}
input[type=radio]:not(:disabled):focus + label:before {
  border-color: #E20074;
  outline: 0 none;
  box-shadow: 0px 0px 9px 1px rgba(226, 0, 116, 0.21);
}

/* Checkbox */
input[type=checkbox]:checked, input[type=checkbox]:not(:checked) {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
input[type=checkbox]:checked + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}
input[type=checkbox] + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  margin: 0 12px 0 0;
}
input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #6b6b6b;
  border-radius: 4px;
  background: #ffffff;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  cursor: pointer;
}
input[type=checkbox]:checked + label:before {
  background-image: url("/bspResources/skin/tmobile/images/confirm_solid.svg");
}
input[type=checkbox]:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox]:not(:disabled):checked + label:hover:before {
  background-color: #ededed;
}
input[type=checkbox]:disabled + label, input[type=checkbox]:disabled + label:before {
  opacity: 0.5;
}
input[type=checkbox]:not(:disabled):focus + label:before {
  border-color: #E20074;
  outline: 0 none;
  box-shadow: 0px 0px 9px 1px rgba(226, 0, 116, 0.21);
}

/* Input text */
input[type=text],
input[type=password] {
  border: 1px solid #6b6b6b;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0.407em;
  height: 33px;
}
input[type=text].input-large,
input[type=password].input-large {
  padding: 12px 24px;
  height: 60px;
}
input[type=text]:hover,
input[type=password]:hover {
  border: 1px solid #6b6b6b;
}
input[type=text]:focus, input[type=text]:active,
input[type=password]:focus,
input[type=password]:active {
  border-color: #E20074;
  outline: 0 none;
  box-shadow: 0px 0px 9px 1px rgba(226, 0, 116, 0.21);
}
input[type=text]:disabled,
input[type=password]:disabled {
  opacity: 0.5;
}

/* Textarea */
textarea {
  border: 1px solid #6b6b6b;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0.407em;
  resize: none;
}
textarea:hover {
  border: 1px solid #6b6b6b;
}
textarea:focus, textarea:active {
  border-color: #E20074;
  outline: 0 none;
  box-shadow: 0px 0px 9px 1px rgba(226, 0, 116, 0.21);
}
textarea:disabled {
  opacity: 0.5;
}

/* Label */
label {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #4b4b4b;
  font-size: 0.875em;
  line-height: 150%;
  margin-bottom: 6px;
}
label.label-large {
  font-family: "TeleNeo", sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #262626;
  font-size: 1.125em;
  line-height: 150%;
}
label.required::after {
  content: "*";
  vertical-align: top;
}
label.disabled {
  opacity: 0.5;
}

/**************************************************************************************
 * BSP taglib elements
 **************************************************************************************/
/* revealPwdButton - Password reveal button ('attached' to the input end) */
.pwd-reveal-btn {
  width: 33px;
  background-image: url(/bspResources/skin/tmobile/images/visible_outline.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
  right: 0;
}
.pwd-reveal-btn.hidden-pwd {
  background-image: url(/bspResources/skin/tmobile/images/invisible_outline.svg);
}

/* Inputs of call number */
.inputCallNumber,
.inputCallNumber3,
.inputCallNumber3Long,
.inputFixedNumber,
.inputFixedNumber3 {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.inputCallNumber .inputPhonePrefixCc,
.inputCallNumber3 .inputPhonePrefixCc,
.inputCallNumber3Long .inputPhonePrefixCc,
.inputFixedNumber .inputPhonePrefixCc,
.inputFixedNumber3 .inputPhonePrefixCc {
  width: 44px;
  flex: 0 0 auto;
  text-align: center;
}
.inputCallNumber .inputPhonePrefix,
.inputCallNumber3 .inputPhonePrefix,
.inputCallNumber3Long .inputPhonePrefix,
.inputFixedNumber .inputPhonePrefix,
.inputFixedNumber3 .inputPhonePrefix {
  width: 60px;
  flex: 0 0 auto;
  text-align: left;
}
.inputCallNumber .inputMsisdnSnNo,
.inputCallNumber3 .inputMsisdnSnNo,
.inputCallNumber3Long .inputMsisdnSnNo,
.inputFixedNumber .inputMsisdnSnNo,
.inputFixedNumber3 .inputMsisdnSnNo {
  width: 96px;
  flex: 3 0 auto;
  text-align: left;
}

/* inputMsisdn */
.inputMsisdn {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.inputMsisdn .inputMsisdnNdcNo {
  min-width: 82px !important;
  width: 82px;
  flex: 1 0 auto;
}
.inputMsisdn .inputMsisdnSnNo {
  width: 108px;
  flex: 3 0 auto;
  text-align: left;
}

/* inputIccid */
.inputIccid {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.inputIccid .inputIccid-iai {
  min-width: 86px !important;
  width: 86px;
  flex: 1 0 auto;
}
.inputIccid .inputIccid-no {
  width: 88px;
  flex: 3 0 auto;
  margin-left: 6px;
}
.inputIccid .inputIccid-cd {
  width: 26px;
  flex: 0 0 auto;
  text-align: center;
}

/* date
 */
.date-group {
  display: flex;
}
.date-group .date-day-input {
  width: 40px;
  max-width: 40px;
  flex: 1 0 auto;
  text-align: center;
}
.date-group .date-month-input {
  width: 40px;
  max-width: 40px;
  flex: 1 0 auto;
  margin-left: 6px;
  text-align: center;
}
.date-group .date-year-input {
  width: 55px;
  max-width: 55px;
  flex: 1 0 auto;
  margin-left: 6px;
  text-align: center;
}

/* SEPA remark */
.hintSepa {
  margin: 12px;
  border: 1px solid #e20074;
  padding: 12px;
}

/* Custom chips styles */
.chip-container {
  display: flex;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  flex-direction: row;
  background-color: #dcdcdc;
  cursor: default;
  height: 30px;
  outline: none;
  padding: 5px 10px;
  white-space: nowrap;
  align-items: center;
  border-radius: 4px;
  text-decoration: none;
  margin: 0 2.5px 5px 2.5px;
}
.chip:hover {
  background-color: #b2b2b2;
}
.chip > .chip-content {
  cursor: inherit;
  user-select: none;
  white-space: nowrap;
  margin-right: 6px;
}
.chip > .chip-remove {
  cursor: pointer;
  display: inline-block;
  user-select: none;
  flex-shrink: 0;
  height: 10px;
  border: none;
}

/* Custom selectCheckboxMenu: dropdown with search and multiple select via checlboxes */
.dropdownSearch:focus + .dropdownCheckboxBlock, .dropdownSearch.active + .dropdownCheckboxBlock {
  display: block;
}

.dropdownCheckboxBlock {
  position: absolute;
  z-index: 1;
  display: none;
  max-height: 144px;
  overflow-y: scroll;
  border: 1px solid #6b6b6b;
  border-radius: 4px;
  background: white;
}
.dropdownCheckboxBlock table {
  width: 100%;
  border-spacing: 0;
}
.dropdownCheckboxBlock table tr:hover, .dropdownCheckboxBlock table tr.focused {
  background-color: #dcdcdc !important;
}
.dropdownCheckboxBlock table tr.selected {
  background-color: #ededed;
}
.dropdownCheckboxBlock table td {
  padding: 12px;
}

/**************************************************************************************
 * Globally used custom elements
 **************************************************************************************/
/* Tooltips from CMS (hint & mouseover pseudo tags) */
.hintable {
  border-bottom: #6b6b6b dotted 1px;
  color: #E20074;
  cursor: default;
  position: relative;
}
.hintable a {
  text-decoration: underline;
}

.hoverable {
  position: relative;
  cursor: default;
}
.hoverable:after {
  content: url(/bspResources/skin/tmobile/images/information_outline.svg);
  margin-left: 6px;
}

.hoverable .hovertext, .hintable .hovertext {
  color: #ffffff;
  background-color: #262626;
  max-width: 400px;
  width: 400px;
  z-index: 10;
  padding: 0.85em;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 300;
  top: 14px;
  left: 9px;
  position: absolute;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s linear;
  -o-transform: scale(0);
  -o-transition: all 0.2s linear;
  -moz-transform: scale(0);
  -moz-transition: all 0.2s linear;
  -webkit-transform: scale(0);
  -webkit-transition: all 0.2s linear;
  -ms-transform: scale(0);
  -ms-transition: all 0.2s linear;
  box-shadow: 0 0 0.429em 0 rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 0 0.429em 0 rgba(0, 0, 0, 0.16);
  -o-box-shadow: 0 0 0.429em 0 rgba(0, 0, 0, 0.16);
  /*-ms-box-shadow: $overlayContainerShadow;*/
}
.hoverable .hovertext a, .hintable .hovertext a {
  color: #31C3F7;
  text-decoration: none;
}
.hoverable .hovertext a:hover, .hintable .hovertext a:hover {
  color: #31C3F7;
  text-decoration: underline;
}
.hoverable:hover .hovertext, .hintable:hover .hovertext {
  opacity: 1;
  transform: scale(1);
  transition: all 0.2s linear;
  -o-transform: scale(1);
  -o-transition: all 0.2s linear;
  -moz-transform: scale(1);
  -moz-transition: all 0.2s linear;
  -webkit-transform: scale(1);
  -webkit-transition: all 0.2s linear;
  -ms-transform: scale(1);
  -ms-transition: all 0.2s linear;
}
.hoverable:focus .hovertext, .hintable:focus .hovertext {
  opacity: 1;
  display: inline-block;
  transform: scale(1);
  transition: all 0.2s linear;
  -o-transform: scale(1);
  -o-transition: all 0.2s linear;
  -moz-transform: scale(1);
  -moz-transition: all 0.2s linear;
  -webkit-transform: scale(1);
  -webkit-transition: all 0.2s linear;
  -ms-transform: scale(1);
  -ms-transition: all 0.2s linear;
}

/* default list with dash */
ul.dash-list {
  list-style-type: "—";
  padding-left: 16px;
}
ul.dash-list li {
  margin-bottom: 12px;
  padding-left: 9px;
}

div.dashSpan {
  list-style-type: "—";
  padding-left: 16px;
}
div.dashSpan span:nth-child(2) {
  font-weight: 600 !important;
  font-size: 16px !important;
}
div.dashSpan span:nth-child(n+3) {
  display: list-item !important;
  margin-bottom: 12px;
  padding-left: 9px;
  margin-left: 56px !important;
}

div.mixMessage div:nth-child(n+2) {
  margin-top: -34px !important;
}
div.mixMessage div:nth-child(n+2) span:first-child {
  display: none !important;
}

/* Form as a centered list of inputs blocks */
.centered-list-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Input block: for vertically arranged label, input, error text */
.input-block {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

/* Input block: for vertically arranged label, input, error text + mobile version */
.input-block-responsive {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: 18px;
  width: 100%;
}
.input-block-responsive > label {
  align-self: center;
  margin-bottom: 0;
}
.input-block-responsive > table.ui-selectoneradio {
  flex: 0 0 auto !important;
}
@media screen and (max-device-width: 768px) {
  .input-block-responsive > table.ui-selectoneradio {
    align-self: start;
  }
}
@media screen and (max-device-width: 768px) {
  .input-block-responsive {
    flex-direction: column;
    align-items: normal;
    width: 100% !important;
  }
  .input-block-responsive > .label-placeholder {
    display: none;
  }
  .input-block-responsive > label, .input-block-responsive > label.ui-widget {
    font-family: "TeleNeo", sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #4b4b4b;
    font-size: 0.875em;
    line-height: 150%;
    align-self: auto;
    margin-bottom: 6px;
  }
}
.input-block-responsive:not(.double-input) > :first-child {
  white-space: nowrap;
  flex: none;
}
.input-block-responsive:not(.double-input) > *:not(:first-child) {
  margin-left: 24px;
  flex: 1 0 auto;
}
@media screen and (max-device-width: 768px) {
  .input-block-responsive:not(.double-input) > *:not(:first-child) {
    margin: 0;
  }
}
.input-block-responsive:not(.double-input):last-child {
  margin-bottom: 0;
}
.input-block-responsive.double-input:nth-child(n-2) {
  white-space: nowrap;
  flex: none;
}
.input-block-responsive.double-input:nth-child(-n+2) {
  margin-bottom: 0;
  flex: 1 0 auto;
}
.input-block-responsive.double-input > :nth-child(2) {
  margin-left: 6px;
}
@media screen and (max-device-width: 768px) {
  .input-block-responsive.double-input > :nth-child(2) {
    order: 2;
    margin-left: 0;
  }
}
.input-block-responsive.double-input > :nth-child(3) {
  margin-left: 24px;
}
@media screen and (max-device-width: 768px) {
  .input-block-responsive.double-input > :nth-child(3) {
    margin: 0 0 18px;
  }
}
.input-block-responsive.double-input > :nth-child(4) {
  margin-left: 12px;
}
@media screen and (max-device-width: 768px) {
  .input-block-responsive.double-input > :nth-child(4) {
    margin: 0;
    order: 2;
  }
}

/* Flex grid of input blocks for responsive layout */
@media screen and (max-device-width: 768px) {
  .input-flex-grid {
    width: 100% !important;
  }
}

/* Information panel (container wide)  */
.info-block {
  background-color: #E5F5FD;
  padding: 36px 85px;
  margin-bottom: 27px;
}

/* Infobox */
.info-box .info-icon {
  display: inline-block;
  vertical-align: middle;
}

.hints-block {
  margin-top: 36px;
}

/* Flex column for vertical arrangement of table row cells
 * e.g. for default checkboxes, radio buttons table output */
.row-to-column-flex tr {
  display: flex;
  flex-direction: column;
}
.row-to-column-flex td {
  margin-top: 18px;
  display: block;
}

/* Tile with border
 */
.tile-panel, .direct-jump-tile {
  border: 1px solid #DCDCDC;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 18px;
}

/* Dynamic border color tile (adjusted tile-panel)
 */
.magenta-tile-panel {
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 18px;
}
.magenta-tile-panel:hover, .magenta-tile-panel:active {
  border: 1px solid #E20074;
  box-shadow: 0 0 7px rgba(226, 0, 116, 0.15);
}
.magenta-tile-panel img.inactive {
  display: block;
}
.magenta-tile-panel img.active {
  display: none;
}
.magenta-tile-panel.no-border {
  border-color: #ffffff;
  box-shadow: none;
}
.magenta-tile-panel.no-border:hover {
  border-color: #ededed;
  background: #ededed;
}
.magenta-tile-panel.no-border:active {
  border-color: #E20074;
  background: #ededed;
}

.search-panel {
  background-color: #F8F8F8;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 12px;
  width: 100%;
}

/* Group of text/password input and pwd reveal button
 * See BSP tag: revealPwdButton
 */
.passwordGroup {
  display: inline-block;
  position: relative;
}

.passwordGroup > input[type=password],
.passwordGroup > input[type=text] {
  min-width: 0;
  width: 100%;
  padding-right: 45px;
}

/* Input with a check when validated
 */
.validated-input {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.validated-input > div > img {
  flex: 0 0 auto;
  vertical-align: middle;
  display: none;
}
.validated-input.valid input[type=password], .validated-input.valid input[type=text] {
  border-color: #46A800;
}
.validated-input.valid > div > img {
  display: block;
}

/* Checklist block with requirements for some input
 */
.input-checklist-block {
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 12px;
  white-space: nowrap;
}
@media screen and (max-device-width: 768px) {
  .input-checklist-block {
    white-space: normal;
  }
}
.input-checklist-block > p.check-list-item {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
}
.input-checklist-block > p.check-list-item:last-child {
  margin: 0;
}
.input-checklist-block > p.check-list-item::before {
  flex: 0 0 18px;
  content: "";
  background-image: url(/bspResources/skin/tmobile/images/confirm_grey.svg);
  background-repeat: no-repeat;
  background-position: center center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
.input-checklist-block > p.check-list-item.valid::before {
  background-image: url("/bspResources/skin/tmobile/images/confirm.svg");
}

/* Block of buttons divided into left and right groups.
 * Commonly used for main navigation/action buttons at the page bottom.
 */
.buttons-left-right-group-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buttons-left-right-group-grid .left-group button, .buttons-left-right-group-grid .left-group input {
  margin-right: 12px;
}
.buttons-left-right-group-grid .right-group button, .buttons-left-right-group-grid .right-group input {
  margin-left: 12px;
}

@media screen and (max-device-width: 768px) {
  .supports-mobile-view .buttons-left-right-group-grid {
    width: 100%;
    flex-direction: column-reverse;
    margin: 0 !important;
  }
  .supports-mobile-view .buttons-left-right-group-grid .left-group {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
  }
  .supports-mobile-view .buttons-left-right-group-grid .left-group > button, .supports-mobile-view .buttons-left-right-group-grid .left-group > input {
    width: 100%;
    margin: 18px 0 0;
  }
  .supports-mobile-view .buttons-left-right-group-grid .right-group {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
  }
  .supports-mobile-view .buttons-left-right-group-grid .right-group > button, .supports-mobile-view .buttons-left-right-group-grid .right-group > input {
    width: 100%;
    margin: 18px 0 0;
  }
}
/* Legend block for description of used icons
 */
.icon-legend {
  display: flex;
  flex-direction: row;
}
.icon-legend > div {
  margin-left: 24px;
}
.icon-legend > div:first-child {
  margin-left: 0;
}

/* Common BSP data panel.
 * Implemented as one column table with header and block for data.
 * The block can contain data output table or some data input (as table or inputs themselves)
 */
.data-panel {
  border-collapse: collapse;
  vertical-align: top;
  margin: 30px 0;
  width: 100%;
}
.data-panel > thead > tr > th {
  padding: 0 0 6px;
  text-align: left;
}
.data-panel > tbody > tr > td {
  padding: 12px 0;
  text-align: left;
}
.data-panel > tbody > tr:last-child > td {
  padding-bottom: 0;
}

/* Block of data (div) similar to p:panel block but without header
 * Introduced since p:panel style cannot be adjusted to case without header.
 */
.panel-no-head {
  border: 1px solid #dcdcdc;
  background-color: #ffffff;
  padding: 0.75em;
}

/**
 * Common rule for tables without corresponding paddings at top/bottom & left/right cells
 */
.newSalesForm > thead > tr > td:first-child, .data-input-table > thead > tr > td:first-child, .data-output-table > thead > tr > td:first-child, .activationOption > thead > tr > td:first-child, .eks-new-cards-table > thead > tr > td:first-child, .newSalesForm > tbody > tr > td:first-child, .data-input-table > tbody > tr > td:first-child, .data-output-table > tbody > tr > td:first-child, .activationOption > tbody > tr > td:first-child, .eks-new-cards-table > tbody > tr > td:first-child, .newSalesForm > tfoot > tr > td:first-child, .data-input-table > tfoot > tr > td:first-child, .data-output-table > tfoot > tr > td:first-child, .activationOption > tfoot > tr > td:first-child, .eks-new-cards-table > tfoot > tr > td:first-child {
  padding-left: 0;
}
.newSalesForm > thead > tr > td:last-child, .data-input-table > thead > tr > td:last-child, .data-output-table > thead > tr > td:last-child, .activationOption > thead > tr > td:last-child, .eks-new-cards-table > thead > tr > td:last-child, .newSalesForm > tbody > tr > td:last-child, .data-input-table > tbody > tr > td:last-child, .data-output-table > tbody > tr > td:last-child, .activationOption > tbody > tr > td:last-child, .eks-new-cards-table > tbody > tr > td:last-child, .newSalesForm > tfoot > tr > td:last-child, .data-input-table > tfoot > tr > td:last-child, .data-output-table > tfoot > tr > td:last-child, .activationOption > tfoot > tr > td:last-child, .eks-new-cards-table > tfoot > tr > td:last-child {
  padding-right: 0;
}
.newSalesForm > tbody > tr:first-child > td, .data-input-table > tbody > tr:first-child > td, .data-output-table > tbody > tr:first-child > td, .activationOption > tbody > tr:first-child > td, .eks-new-cards-table > tbody > tr:first-child > td {
  padding-top: 0;
}
.newSalesForm > tbody > tr:last-child > td, .data-input-table > tbody > tr:last-child > td, .data-output-table > tbody > tr:last-child > td, .activationOption > tbody > tr:last-child > td, .eks-new-cards-table > tbody > tr:last-child > td {
  padding-bottom: 0;
}

.no-odd-even-alter > tbody > tr > td, .eks-new-cards-table > tbody > tr > td {
  background: #ffffff;
}

/* Common BSP data input/output tables.
 * Usually presented as 2 column table: label|text or label|input.
 */
.data-output-table, .activationOption, .eks-new-cards-table {
  border-collapse: collapse;
}
.data-output-table > tbody > tr > td, .activationOption > tbody > tr > td, .eks-new-cards-table > tbody > tr > td {
  vertical-align: top;
}

.no-left-pad > thead > tr > th, .shipping-data-table > thead > tr > th, .shipping-method-table > thead > tr > th {
  padding: 6px 6px 6px 0;
  vertical-align: top;
  text-align: left;
}
.no-left-pad > tbody > tr > td, .shipping-data-table > tbody > tr > td, .shipping-method-table > tbody > tr > td {
  padding: 6px 6px 6px 0;
  vertical-align: top;
  text-align: left;
}

.data-input-table {
  border-collapse: collapse;
}
.data-input-table > tbody > tr > td {
  vertical-align: middle;
}

/* TODO EAP2: adjust to make it more localized
.ui-datatable-empty-message {
  display: none;
}
*/
/* Analog of Primefaces dataTable for pure JSF.
 * Should be combined with row styles for complete identity.
 */
.data-table, .data-table-grey-head {
  border-collapse: collapse;
  width: 100%;
}
.data-table > thead > tr > th, .data-table-grey-head > thead > tr > th {
  vertical-align: bottom;
}
.data-table > tbody > tr > td, .data-table-grey-head > tbody > tr > td {
  vertical-align: top;
}

/* Table which looks like a primefaces panel i.e. with grey header and same paddings.
 */
.data-table-grey-head {
  margin-top: 36px;
  border: 1px solid #dcdcdc;
}
.data-table-grey-head > thead > tr > th {
  background-color: #ededed;
  vertical-align: middle;
}
.data-table-grey-head > tfoot > tr > td {
  padding: 12px;
}

/* Changes the font of all child labels to "not important body text".
 * Mostly useful for order summary pages.
 */
.regular-labels-block label {
  display: block;
}

.table-no-borders > tbody > tr, .eks-new-cards-table > tbody > tr {
  border: 0 !important;
}

.table-no-head > thead, .eks-new-cards-table > thead {
  display: none;
}

.hide-empty-cells > tbody > tr > td:empty, .eks-new-cards-table > tbody > tr > td:empty {
  width: 0 !important;
  padding: 0 !important;
}

.space-around-divs > div {
  margin-top: 12px;
  margin-bottom: 12px;
}

.space-between-rows {
  border-spacing: 0 6px;
}

.row-margin {
  margin-bottom: 6px;
  margin-top: 6px;
}

.width-auto, .eks-new-cards-table {
  width: auto !important;
}

.invisible {
  display: none;
}

/*
 * no-padding-panel, for primefaces element with table inside
 */
.no-padding-panel > .ui-panel-content {
  padding: 0 !important;
}

.no-padding-accordion > .ui-accordion-content {
  padding: 0 !important;
}

/* Makes static message view similar to p:messages block
 */
body .ui-staticmessage.static-global-message {
  width: 100%;
  padding: 16px;
  margin: 12px 0;
}
body .ui-staticmessage.static-global-message .ui-message-info-icon, body .ui-staticmessage.static-global-message .ui-message-warn-icon,
body .ui-staticmessage.static-global-message .ui-message-error-icon, body .ui-staticmessage.static-global-message .ui-message-fatal-icon {
  float: left;
  font-size: 2em;
  width: auto;
  margin-top: -4px;
}
body .ui-staticmessage.static-global-message .ui-message-info-summary, body .ui-staticmessage.static-global-message .ui-message-info-detail,
body .ui-staticmessage.static-global-message .ui-message-warn-summary, body .ui-staticmessage.static-global-message .ui-message-warn-detail,
body .ui-staticmessage.static-global-message .ui-message-error-summary, body .ui-staticmessage.static-global-message .ui-message-error-detail,
body .ui-staticmessage.static-global-message .ui-message-fatal-summary, body .ui-staticmessage.static-global-message .ui-message-fatal-detail {
  display: block;
  margin-left: 40px;
}
/* Special case for messages panel when expanded block (accordion) inside needed
 */
body .ui-messages .ui-accordion {
  margin-left: 42px;
}
body .ui-messages .ui-accordion .ui-accordion-header {
  border: none !important;
  background-color: transparent !important;
  font-weight: 300;
  padding: 12px 0;
}
body .ui-messages .ui-accordion .ui-accordion-content {
  border: none;
  background-color: transparent;
  padding: 0;
}
body .ui-messages .ui-accordion .ui-accordion-content ul.dash-list {
  margin-left: 18px !important;
}
body .ui-messages .ui-accordion .ui-accordion-content ul.dash-list li:last-child {
  margin: 0;
}

/* Accordion special case for "alle" button
 */
.accordion-panel-all.ui-accordion > .ui-accordion-content {
  display: none !important;
}

.folded-text {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* PDF admin table special case
 */
.inherit-background-color > thead > tr > th {
  background-color: inherit !important;
}
.inherit-background-color > tbody > tr {
  background-color: inherit !important;
}

/* To hide or show elements on desktop/mobile versions of pages
 */
@media screen and (min-device-width: 769px) {
  .show-hide-desktop {
    display: block;
  }
}
@media screen and (max-device-width: 768px) {
  .show-hide-desktop {
    display: none;
  }
}

@media screen and (min-device-width: 769px) {
  .show-hide-mobile {
    display: none;
  }
}
@media screen and (max-device-width: 768px) {
  .show-hide-mobile {
    display: block;
  }
}

/* Dynamic input block for desktop-mobile version, label+input as row and full width column.
 */
.input-block-dynamic {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: 18px;
}
@media screen and (max-device-width: 768px) {
  .input-block-dynamic {
    flex-direction: column;
    align-items: normal;
    width: 100% !important;
  }
}

/* Stretchable up to 100% width block in mobile view */
@media screen and (max-device-width: 768px) {
  .input-block-stretch {
    width: 100%;
  }
}

.input-debug {
  width: 150px;
}

.invalid-input-block {
  display: flex;
  flex-direction: row;
  align-self: center;
  margin-left: 6px !important;
}

/* Label inside input */
.ui-float-label.inner-label > label {
  left: 24px;
}
.ui-float-label.inner-label > input:focus, .ui-float-label.inner-label > input.ui-state-filled {
  padding-top: 28px;
  padding-bottom: 6px;
}
.ui-float-label.inner-label > input:focus ~ label, .ui-float-label.inner-label > input.ui-state-filled ~ label {
  top: 18px;
}

/**************************************************************************************
 * Common sizes in % (usually used for table columns)
 **************************************************************************************/
.width5 {
  width: 5%;
}

.width6 {
  width: 6%;
}

.width7 {
  width: 7%;
}

.width8 {
  width: 8%;
}

.width9 {
  width: 9%;
}

.width10 {
  width: 10%;
}

.width11 {
  width: 11%;
}

.width12 {
  width: 12%;
}

.width13 {
  width: 13%;
}

.width14 {
  width: 14%;
}

.width15 {
  width: 15%;
}

.width16 {
  width: 16%;
}

.width17 {
  width: 17%;
}

.width18 {
  width: 18%;
}

.width19 {
  width: 19%;
}

.width20 {
  width: 20%;
}

.width22 {
  width: 22%;
}

.width25 {
  width: 25%;
}

.width26 {
  width: 26%;
}

.width30 {
  width: 30%;
}

.width35 {
  width: 35%;
}

.width40 {
  width: 40%;
}

.width45 {
  width: 45%;
}

.width50 {
  width: 50%;
}

.width55 {
  width: 55%;
}

.width60 {
  width: 60%;
}

.width65 {
  width: 65%;
}

.width70 {
  width: 70%;
}

.width74 {
  width: 74%;
}

.width75, .index-city > input:nth-child(2) {
  width: 75%;
}

.width78 {
  width: 78%;
}

.width80 {
  width: 80%;
}

.width84 {
  width: 84%;
}

.width85, .eid-input-panel > input:nth-child(2) {
  width: 85%;
}

.width90 {
  width: 90%;
}

.width95 {
  width: 95%;
}

.width97 {
  width: 97%;
}

.width100, .activationOption {
  width: 100%;
}

/**************************************************************************************
 * Pre-defined input sizes
 **************************************************************************************/
.inputSmall {
  width: 120px;
}

.inputMedium {
  width: 156px;
}

.inputLarge {
  width: 246px;
}

.inputLargeMax {
  max-width: 332px;
}

.textAreaBig {
  width: 400px;
  height: 200px;
  border-radius: 4px;
}

/**************************************************************************************
 * Common alignments
 **************************************************************************************/
.alignRight {
  text-align: right !important;
}

.alignLeft {
  text-align: left !important;
}

.alignCenter {
  text-align: center !important;
}

.alignTop, #accesorieschooseform\:ZubehoerDatensatz div table .availabilityColumn, #accesorieschooseform\:ZubehoerDatensatz div table .priceColumn, #accesorieschooseform\:ZubehoerDatensatz div table .quantityColumn {
  vertical-align: top !important;
}

.alignBottom {
  vertical-align: bottom !important;
}

.alignMiddle {
  vertical-align: middle !important;
}

.alignTextTop {
  vertical-align: text-top !important;
}

/**************************************************************************************
 * Common indents
 **************************************************************************************/
body {
  /* Padding */
  /* Margin */
}
body .marginpadding0 {
  margin: 0;
  padding: 0;
}
body .paddingNone {
  padding: 0;
}
body .paddingTop0 {
  padding-top: 0;
}
body .paddingTop6 {
  padding-top: 6px;
}
body .paddingTop9 {
  padding-top: 9px;
}
body .paddingTop12 {
  padding-top: 12px;
}
body .paddingTop18 {
  padding-top: 18px;
}
body .paddingTop24 {
  padding-top: 24px;
}
body .paddingTop30 {
  padding-top: 30px;
}
body .paddingTop36 {
  padding-top: 36px;
}
body .paddingTop42 {
  padding-top: 42px;
}
body .paddingBottom0 {
  padding-bottom: 0;
}
body .paddingBottom6 {
  padding-bottom: 6px;
}
body .paddingBottom9 {
  padding-bottom: 9px;
}
body .paddingBottom12 {
  padding-bottom: 12px;
}
body .paddingBottom18 {
  padding-bottom: 18px;
}
body .paddingBottom24 {
  padding-bottom: 24px;
}
body .paddingBottom30 {
  padding-bottom: 30px;
}
body .paddingBottom36 {
  padding-bottom: 36px;
}
body .paddingBottom42 {
  padding-bottom: 42px;
}
body .paddingRight0 {
  padding-right: 0;
}
body .paddingRight6 {
  padding-right: 6px;
}
body .paddingRight12 {
  padding-right: 12px;
}
body .paddingRight18 {
  padding-right: 18px;
}
body .paddingRight24 {
  padding-right: 24px;
}
body .paddingRight30 {
  padding-right: 30px;
}
body .paddingRight36 {
  padding-right: 36px;
}
body .paddingRight42 {
  padding-right: 42px;
}
body .paddingLeft0 {
  padding-left: 0;
}
body .paddingLeft6 {
  padding-left: 6px;
}
body .paddingLeft12 {
  padding-left: 12px;
}
body .paddingLeft18 {
  padding-left: 18px;
}
body .paddingLeft24 {
  padding-left: 24px;
}
body .paddingLeft30 {
  padding-left: 30px;
}
body .paddingLeft36 {
  padding-left: 36px;
}
body .paddingLeft42 {
  padding-left: 42px;
}
body .paddingAll12 {
  padding: 12px;
}
body .marginTop0 {
  margin-top: 0;
}
body .marginTop6 {
  margin-top: 6px;
}
body .marginTop12, body .activationOption {
  margin-top: 12px;
}
body .marginTop18 {
  margin-top: 18px;
}
body .marginTop24 {
  margin-top: 24px;
}
body .marginTop30 {
  margin-top: 30px;
}
body .marginTop36 {
  margin-top: 36px;
}
body .marginTop42 {
  margin-top: 42px;
}
body .marginTop46 {
  margin-top: 46px;
}
body .marginTop60 {
  margin-top: 60px;
}
body .marginTop100 {
  margin-top: 100px;
}
body .marginTop130 {
  margin-top: 130px;
}
body .marginBottom0 {
  margin-bottom: 0;
}
body .marginBottom4 {
  margin-bottom: 4px;
}
body .marginBottom6 {
  margin-bottom: 6px;
}
body .marginBottom12 {
  margin-bottom: 12px;
}
body .marginBottom16 {
  margin-bottom: 16px;
}
body .marginBottom18, body .activationOption {
  margin-bottom: 18px;
}
body .marginBottom19 {
  margin-bottom: 19px;
}
body .marginBottom24 {
  margin-bottom: 24px;
}
body .marginBottom30 {
  margin-bottom: 30px;
}
body .marginBottom36 {
  margin-bottom: 36px;
}
body .marginBottom42 {
  margin-bottom: 42px;
}
body .marginBottom46 {
  margin-bottom: 46px;
}
body .marginBottom48 {
  margin-bottom: 48px;
}
body .marginBottom100 {
  margin-bottom: 100px;
}
body .marginRight0 {
  margin-right: 0;
}
body .marginRight6 {
  margin-right: 6px;
}
body .marginRight9 {
  margin-right: 6px;
}
body .marginRight12 {
  margin-right: 12px;
}
body .marginRight18 {
  margin-right: 18px;
}
body .marginRight24 {
  margin-right: 24px;
}
body .marginRight30 {
  margin-right: 30px;
}
body .marginRight36 {
  margin-right: 36px;
}
body .marginRight42 {
  margin-right: 42px;
}
body .marginLeft0 {
  margin-left: 0;
}
body .marginLeft3 {
  margin-left: 3px;
}
body .marginLeft4 {
  margin-left: 4px;
}
body .marginLeft6 {
  margin-left: 6px;
}
body .marginLeft9 {
  margin-left: 9px;
}
body .marginLeft12 {
  margin-left: 12px;
}
body .marginLeft18 {
  margin-left: 18px;
}
body .marginLeft24 {
  margin-left: 24px;
}
body .marginLeft26 {
  margin-left: 26px;
}
body .marginLeft27 {
  margin-left: 27px;
}
body .marginLeft28 {
  margin-left: 28px;
}
body .marginLeft30 {
  margin-left: 30px;
}
body .marginLeft36 {
  margin-left: 36px;
}
body .marginLeft37 {
  margin-left: 37px;
}
body .marginLeft42 {
  margin-left: 42px;
}
body .marginLeftAuto {
  margin-left: auto;
}

/* Float */
.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

/* Borders */
.borderRightGrey2 {
  border-right: 2px solid #dcdcdc;
}

.borderTopGrey1 {
  border-top: 1px solid #dcdcdc;
}

.borderBottomGrey1 {
  border-bottom: 1px solid #dcdcdc;
}

.borderTopDarkGrey1 {
  border-top: 1px solid #b2b2b2;
}

.borderBottomDarkGrey1 {
  border-bottom: 1px solid #b2b2b2;
}

.borderRed {
  border: 1px solid #ff0000 !important;
}

.primeInnerTableNoBorder {
  border: hidden !important;
}
.primeInnerTableNoBorder td {
  border: hidden !important;
}

/* Flex */
.d-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.d-flex-col {
  display: flex;
  flex-direction: column;
}

.d-flex-row {
  display: flex;
  flex-direction: row;
}

.flex-center-space, .eid-input-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center-end, .eid-position {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-center-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Colors */
.magenta {
  color: #E20074;
}

.whiteTableBackground th {
  background-color: white;
}
.whiteTableBackground td {
  background-color: white;
}

/**************************************************************************************
 * Contains page-/section-individual styles
 **************************************************************************************/
/**************************************************
 * Login page
 **************************************************/
#loginPageMainDiv {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: relative;
}

#loginPicture {
  width: 100%;
  height: auto;
  min-height: 300px;
}
@media screen and (min-device-width: 769px) {
  #loginPicture {
    display: block;
  }
}
@media screen and (max-device-width: 768px) {
  #loginPicture {
    display: none;
  }
}

#loginPicture img, #mobileLoginPicture img {
  width: 100%;
  height: auto;
}

#mobileLoginPicture {
  width: 100%;
  height: auto;
  min-height: 300px;
}
@media screen and (min-device-width: 769px) {
  #mobileLoginPicture {
    display: none;
  }
}
@media screen and (max-device-width: 768px) {
  #mobileLoginPicture {
    display: block;
  }
}

#loginSubTitle {
  display: none;
}
@media screen and (max-device-width: 768px) {
  #loginSubTitle {
    display: block;
  }
}

#tilesBlock {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 12px;
  padding-right: 12px;
}
@media screen and (max-device-width: 768px) {
  #tilesBlock {
    display: block;
    padding: 0px;
  }
}

#leftLoginTile {
  min-width: 320px;
  background: #ffffff;
  padding: 42px;
  position: relative;
  top: -40px;
  margin-bottom: -40px;
  display: table;
  border: 2px solid #e1e1e1;
  border-radius: 4px;
  box-sizing: border-box;
  flex: 0 0 324px;
}
@media screen and (max-device-width: 768px) {
  #leftLoginTile {
    width: 100%;
    border: none;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding: 10% 10% 0;
    top: -70px;
    margin-bottom: -70px;
    box-shadow: 0px -9px 9px 0px rgba(0, 0, 0, 0.15);
  }
}

#sarahLoginTile {
  min-width: 365px;
  background: #ffffff;
  padding: 42px;
  position: relative;
  display: table;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  box-sizing: border-box;
  flex: 0 0 314px;
}

#kSupportEmptyTile {
  min-width: 324px;
  flex: 0 0 324px;
}

#centerLoginTile {
  padding: 30px 24px 0;
}
@media screen and (max-device-width: 768px) {
  #centerLoginTile {
    display: none;
  }
}

#chkSalesPartnerChangeBox {
  margin: 18px 0 24px 0;
  display: flex;
  align-items: center;
}
@media screen and (max-device-width: 768px) {
  #chkSalesPartnerChangeBox {
    display: none;
  }
}

#rightLoginTile {
  min-width: 360px;
  border: 2px solid #e1e1e1;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  top: -40px;
  background-color: white;
  padding: 42px;
  flex: 0 0 360px;
}
@media screen and (max-device-width: 768px) {
  #rightLoginTile {
    display: none;
  }
}

p.lineSeparator {
  margin: 18px 0 12px;
  background: #DCDCDC;
  height: 1px;
}

ul.listLink {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
@media screen and (max-device-width: 768px) {
  ul.listLink {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
ul.listLink li {
  margin-top: 12px;
}
ul.listLink li#simple-registration-form {
  display: none;
}
@media screen and (max-device-width: 768px) {
  ul.listLink li {
    display: none;
    /* mobile registration link */
    /* activation code link */
  }
  ul.listLink li#simple-registration-form {
    display: list-item;
    margin-right: 18px;
  }
  ul.listLink li#activation {
    display: list-item;
  }
}

#downtimeBanner {
  background-color: #FFF7D9;
  display: flex;
  justify-content: center;
  width: 100%;
}

#downtimeTextBlock {
  width: 50%;
  padding: 24px 0;
}
#downtimeTextBlock p:last-child {
  margin-bottom: 0;
}
@media screen and (max-device-width: 768px) {
  #downtimeTextBlock {
    width: 100% !important;
    padding: 16px !important;
    font-size: 1em;
  }
  #downtimeTextBlock h1 {
    font-size: 1.25em;
  }
  #downtimeTextBlock p {
    margin: 0;
  }
}

.half-content-block {
  width: 50%;
  height: 100%;
  min-height: 576px;
}
@media screen and (max-device-width: 768px) {
  .half-content-block {
    width: 100%;
    min-height: 100%;
  }
}
.half-content-block #downtimeBanner {
  justify-content: flex-end;
}
.half-content-block #downtimeTextBlock {
  width: 648px;
  padding: 18px 72px 18px 12px;
}
@media screen and (max-device-width: 768px) {
  .half-content-block.carousel {
    display: none;
  }
}
.half-content-block.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
@media screen and (max-device-width: 768px) {
  .half-content-block.form {
    justify-content: flex-start;
    align-items: center;
  }
}

/* Login page for Customers */
#loginFormContainer {
  width: 648px;
  margin: 0;
}
@media screen and (max-device-width: 768px) {
  #loginFormContainer {
    width: 100%;
  }
}
#loginFormContainer #error_block {
  margin: 0 72px 0 12px;
}
@media screen and (max-device-width: 768px) {
  #loginFormContainer #error_block {
    margin: 0;
  }
  #loginFormContainer #error_block #paramExceptions {
    margin-top: 0;
  }
}

#customerLoginForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 24px 12px;
  max-width: 424px;
  row-gap: 24px;
}
@media screen and (max-device-width: 768px) {
  #customerLoginForm {
    margin: 0;
    max-width: none;
    row-gap: 18px;
  }
}

.login-tile {
  border-radius: 4px;
  border: 2px solid #e1e1e1;
  display: block;
  background: #ffffff;
  width: 424px;
  position: relative;
  padding: 24px 42px;
}
@media screen and (max-device-width: 768px) {
  .login-tile {
    width: 100%;
    min-width: auto;
    padding: 30px 36px;
  }
}

#whatsAppChatQr {
  text-align: center;
}
#whatsAppChatQr img {
  width: 190px;
}
@media screen and (max-device-width: 768px) {
  #whatsAppChatQr img {
    width: 50%;
    max-width: 190px;
  }
}

#telekomLoginInfoDialog {
  max-width: 50%;
}
@media screen and (max-device-width: 768px) {
  #telekomLoginInfoDialog {
    max-width: 80%;
    max-height: 80%;
    margin: 90px 0;
  }
}
#telekomLoginInfoDialog .ui-dialog-titlebar {
  padding: 6px 12px;
}
#telekomLoginInfoDialog .ui-dialog-content p:last-child {
  margin-bottom: 0;
}
#telekomLoginInfoDialog .ui-dialog-footer {
  padding: 18px;
}

.login-carousel {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
}
.login-carousel .ui-carousel-header {
  position: absolute;
  align-self: center;
  z-index: 10;
}
.login-carousel .ui-carousel-viewport {
  flex: auto;
}
.login-carousel .ui-carousel-button {
  display: none !important;
}
.login-carousel .login-carousel-item {
  border: 0 none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.login-carousel ul.ui-carousel-items {
  height: 100%;
}
.login-carousel li.ui-carousel-item {
  height: 100%;
}
.login-carousel .carousel-img {
  flex: 1 1 auto;
  min-height: 576px;
  object-fit: cover;
  object-position: left;
}
.login-carousel .carousel-text-block {
  position: absolute;
  width: 636px;
}
.login-carousel .carousel-text-block h2 {
  font-family: "TeleNeo", sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 150%;
  color: #E20074;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.login-carousel .carousel-text-block p {
  font-family: "TeleNeo", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  margin: 0 0 18px;
}
.login-carousel .carousel-text-block ul.magenta-star {
  padding-left: 20px;
}
.login-carousel .carousel-text-block ul.magenta-star > li {
  list-style-image: url("./images/magenta-star.svg");
}
.login-carousel .carousel-text-block ul.listLink > li {
  margin-top: 6px;
}

#slider-1_text-block {
  padding-left: 50px;
  bottom: 5%;
}

#slider-2_text-block {
  padding-left: 70px;
  bottom: 7%;
}

#slider-3_text-block {
  padding-left: 110px;
  bottom: 7%;
}

/**************************************************
 * User Registration
 **************************************************/
/* Self registration (selfRegistration.xhtml) */
.fnSelfRegistrationBlock {
  background-color: #ffffff !important;
  border: 0 none !important;
  font-weight: 300 !important;
  line-height: 150% !important;
}

#registrationBoxForm {
  display: flex;
  flex-direction: row;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm {
    flex-direction: column;
  }
}
#registrationBoxForm .registration-tile-block {
  flex: 0 1 50%;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm .registration-tile-block {
    flex: 0 1 100%;
  }
}
#registrationBoxForm .registration-tile-block .registration-link-img {
  padding-right: 18px;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm\:registerNew {
    margin-top: 30px;
  }
}
#registrationBoxForm\:registerNew .registration-controls {
  display: flex;
  flex-direction: column;
  row-gap: 18px;
}
#registrationBoxForm\:registerNew .registration-controls .registration-controls-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm\:registerNew .registration-controls .registration-controls-row {
    flex-direction: column;
  }
}
#registrationBoxForm\:registerNew .registration-controls .registration-controls-row .registration-controls-row-lbl {
  display: flex;
  align-items: center;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm\:registerNew .registration-controls .registration-controls-row .registration-controls-row-lbl {
    padding: 0;
    width: 100%;
    align-items: flex-end;
    margin-bottom: 6px;
  }
}
#registrationBoxForm\:registerNew .registration-controls .registration-controls-row .registration-controls-row-lbl label {
  margin-bottom: 0;
}
#registrationBoxForm\:registerNew .registration-controls .registration-controls-row .registration-controls-row-val {
  display: flex;
  align-items: center;
  width: 256px;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm\:registerNew .registration-controls .registration-controls-row .registration-controls-row-val {
    padding: 0;
    width: 100%;
  }
}
#registrationBoxForm\:editMobilSN {
  width: 100%;
}
#registrationBoxForm\:modifyExisting {
  margin-top: 60px;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm\:modifyExisting {
    margin-top: 36px;
  }
}
#registrationBoxForm p.lineSeparator {
  margin-top: 30px;
  display: none;
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm p.lineSeparator {
    display: block;
  }
}
@media screen and (max-device-width: 768px) {
  #registrationBoxForm\:createAccount, #registrationBoxForm\:modifyFnMaBtn {
    width: 100%;
  }
}

/**************************************************
 * Home page
 **************************************************/
#contentStage {
  height: 363px;
  min-height: 363px;
  background-color: #F8F8F8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#imageDiv {
  width: 360px;
  flex: 0 0 360px;
  z-index: 2;
  position: relative;
  padding-left: 6px;
}

#stageText {
  flex: 0 0 570px;
  padding-right: 30px;
}

#portalTitleStage {
  font-weight: 700;
  color: #E20074;
  font-size: 48px;
  text-transform: uppercase;
}

.direct-jump-tile {
  width: 260px;
  padding: 0;
}
.direct-jump-tile > .tile-header {
  padding: 24px 24px 8px;
}
.direct-jump-tile > .tile-header a {
  text-decoration: none;
  color: #262626;
}

.direct-jump-list {
  width: 100%;
}
.direct-jump-list td {
  cursor: pointer;
}
.direct-jump-list td:hover {
  background: #ededed;
}
.direct-jump-list td:active {
  background: #dcdcdc;
}
.direct-jump-list a {
  display: block;
  text-decoration: none;
  color: #262626;
  padding: 8px 24px;
}
.direct-jump-list a:hover, .direct-jump-list a:focus {
  text-decoration: none;
  color: #262626;
}

.direct-jump-tiles-panel {
  margin-top: 18px;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}
.direct-jump-tiles-panel > .direct-jump-tile {
  margin-right: 18px;
}

/**************************************************
 * Autocomplete
 **************************************************/
.progressBar {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 12px;
}

.progressDot {
  float: left;
  width: 20px;
  height: 20px;
  background-color: #dcdcdc;
  border-radius: 4px;
}
.progressDot.active {
  background-color: #E20074;
}

/**************************************************
 * NG Processes (Neugeschaeft)
 **************************************************/
/* chooseCardsAdditionalData.xhtml */
#haekchenForm .multisim-slavecards-type-table .ui-datagrid-content {
  padding: 0;
}
#haekchenForm .multisim-slavecards-type-table table {
  border-spacing: 0;
}
#haekchenForm .multisim-slavecards-type-table tr > td:first-child {
  padding: 6px 30px 6px 0;
}
#haekchenForm .multisim-slavecards-type-table tr > td:last-child {
  padding: 6px 0 6px 30px;
}
#haekchenForm .multisim-slavecards-type-table tr:first-child > td {
  padding-top: 0;
}
#haekchenForm .multisim-slavecards-type-table tr:last-child > td {
  padding-bottom: 0;
}
#haekchenForm table.contract-panel {
  border: 1px solid #dcdcdc;
  width: 100%;
}
#haekchenForm table.contract-panel > tbody > tr > td {
  vertical-align: top;
}
#haekchenForm table.contract-panel > tbody > tr > td:first-child:not(:last-child) {
  border-right: 1px solid #dcdcdc;
  padding-right: 24px;
  width: 20%;
}
#haekchenForm table.contract-panel > tbody > tr > td:last-child:not(:first-child) {
  padding-left: 24px;
}
#haekchenForm table.multisim-contract-table {
  width: 100%;
}
#haekchenForm table.multisim-contract-table > thead > tr > td, #haekchenForm table.multisim-contract-table tfoot > tr > td {
  background-color: #ffffff !important;
}
#haekchenForm table.multisim-contract-table td {
  border: 0 none !important;
  border-bottom: 1px solid #a3a3a3 !important;
}
#haekchenForm table.multisim-contract-table td:last-child {
  width: auto;
}
#haekchenForm table.multisim-contract-table > tbody > tr:nth-child(odd) > td {
  background-color: #f8f8f8 !important;
}

/**************************************************
 * EMS Process (Einbindung MultiSIM)
 **************************************************/
/* multisimdata.xhtml */
#extraCardForm .cardDataRows table > thead {
  display: none;
}
#extraCardForm .cardDataRows table > tbody > tr {
  border: none;
}
#extraCardForm .cardDataRows table > tbody > tr > td {
  background: #FFFFFF;
  padding-top: 6px;
  padding-bottom: 6px;
}

/**************************************************
 * EKS Process (Ersatzkartenservice)
 * Simcard exchange/replacing
 **************************************************/
.eid-input-panel {
  width: 360px;
}
.eid-input-panel > div:nth-child(1) {
  width: 35px;
}
.eid-position {
  width: 160px;
}
.eid-position > :nth-child(1) {
  width: 65px;
}
.eid-position > :nth-child(2) {
  width: 65px;
}

.eks-new-cards-table tbody > tr > td {
  vertical-align: middle;
}

/**************************************************
 * Processes (NG, BG)
 **************************************************/
/* Common style corrections for tariffs and options pages */
.product-group-row {
  background-color: #EDEDED;
}

.product-row {
  background-color: #FFFFFF !important;
}
.product-row.ui-state-highlight:not(.row-with-expansion) {
  border-bottom: 1px solid #dcdcdc !important;
}

.row-with-expansion {
  border-bottom: 0 none !important;
}

.table-with-expansion table {
  table-layout: auto;
}
.table-with-expansion tr.ui-expanded-row-content > td {
  padding: 0 !important;
}
.table-with-expansion td {
  vertical-align: top;
}

.alternative-options-table thead,
.promo-table thead,
.multisim-slavecards-table thead {
  display: none;
}
.alternative-options-table .ui-datatable-data > tr,
.promo-table .ui-datatable-data > tr,
.multisim-slavecards-table .ui-datatable-data > tr {
  border: 0 none !important;
}

.promo-subtitle-block,
.free-option-parameters,
.alternative-option-parameters {
  padding: 6px 12px 6px 24px;
}

.promo-table td {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.promo-table tr:last-child > td {
  padding-bottom: 12px !important;
}

.auto-promotions-row,
.multisim-row {
  background-color: #ffffff !important;
}

.selectable-promotions-row {
  background-color: #f8f8f8 !important;
}

/* Tariffs page */
.sticky-header-zoom-fix > div.ui-datatable.ui-datatable-sticky {
  left: auto !important;
}

#tariffForm .tariffCell,
#tariffOptionForm .tariffCell {
  width: auto;
}
#tariffForm .minuteCell,
#tariffOptionForm .minuteCell {
  width: 10%;
}
#tariffForm .monthCell,
#tariffOptionForm .monthCell {
  width: 11%;
}
#tariffForm .monthPromotionCell,
#tariffOptionForm .monthPromotionCell {
  width: 11%;
}
#tariffForm .durationPromotionCell,
#tariffOptionForm .durationPromotionCell {
  width: 10%;
}
#tariffForm .durationCell,
#tariffOptionForm .durationCell {
  width: 10%;
}
#tariffForm .selectionCell,
#tariffOptionForm .selectionCell {
  text-align: center;
}

#tariffForm .selectionCell {
  width: 5%;
}

#tariffOptionForm .selectionCell {
  width: 9%;
}

#changeTariffForm .tariffCell,
#changeTariffOptionForm .tariffCell {
  width: auto;
}
#changeTariffForm .changePriceCell,
#changeTariffOptionForm .changePriceCell {
  width: 14%;
}
#changeTariffForm .monthCell,
#changeTariffOptionForm .monthCell {
  width: 11%;
}
#changeTariffForm .monthPromotionCell,
#changeTariffOptionForm .monthPromotionCell {
  width: 11%;
}
#changeTariffForm .durationPromotionCell,
#changeTariffOptionForm .durationPromotionCell {
  width: 10%;
}
#changeTariffForm .selectionCell,
#changeTariffOptionForm .selectionCell {
  text-align: center;
  width: 5%;
}

#tariffForm .promo-table .tariffCell, #changeTariffForm .promo-table .tariffCell {
  padding-left: 24px;
}

#tariffOptionForm .promo-table .tariffCell,
#changeTariffOptionForm .promo-table .tariffCell {
  padding-left: 24px;
}
#tariffOptionForm .alternative-options-table .tariffCell,
#changeTariffOptionForm .alternative-options-table .tariffCell {
  padding-left: 24px;
}
#tariffOptionForm .alternative-options-table .promo-subtitle-block,
#tariffOptionForm .alternative-options-table .alternative-option-parameters,
#tariffOptionForm .alternative-options-table .promo-table .tariffCell,
#changeTariffOptionForm .alternative-options-table .promo-subtitle-block,
#changeTariffOptionForm .alternative-options-table .alternative-option-parameters,
#changeTariffOptionForm .alternative-options-table .promo-table .tariffCell {
  padding-left: 36px;
}

#changeTariffOptionForm .multisim-slavecards-table .tariffCell {
  padding-left: 36px;
}

.activationOptionHeaderSpacer {
  margin: 46px 0 52px;
}

/**************************************************
 * Devices and Accessories (Handys & Zubehör)
 **************************************************/
div.offerGrid .ui-datagrid-content {
  padding: 0;
}
div.offerGrid .ui-datagrid-content > table.ui-datagrid-data > tbody > tr > td {
  padding: 18px;
}
div.offerGrid .ui-datagrid-content > table.ui-datagrid-data > tbody > tr > td:first-child {
  padding-left: 0;
}
div.offerGrid .ui-datagrid-content > table.ui-datagrid-data > tbody > tr > td:last-child {
  padding-right: 0;
}
div.offerGrid .ui-datagrid-content > table.ui-datagrid-data > tbody > tr:first-child > td {
  padding-top: 0;
}
div.offerGrid .ui-datagrid-content > table.ui-datagrid-data > tbody > tr:last-child > td {
  padding-bottom: 0;
}

table.deviceSubTable {
  table-layout: auto;
}
table.deviceSubTable > thead > tr > th {
  background-color: inherit !important;
  border: none !important;
  padding-top: 0;
}
table.deviceSubTable > tbody > tr > td {
  background-color: inherit !important;
  border: none !important;
}

.deviceTableRow {
  background-color: #FFFFFF !important;
}

/**************************************************
 * Shipping and Billing data
 **************************************************/
.index-city {
  display: flex;
}
.index-city > input:nth-child(1) {
  width: 100px;
  flex: 1 1 auto;
}
.index-city > input:nth-child(2) {
  margin-left: 6px;
  flex: 1 1 auto;
}

.street-house-num {
  display: flex;
}
.street-house-num > input:nth-child(1) {
  width: 157px;
  flex: 1 1 auto;
}
.street-house-num > input:nth-child(2) {
  width: 71px;
  margin-left: 6px;
  flex: 1 1 auto;
}

.inputs100 > input {
  width: 100%;
}

/**************************************************
 * EKS Ersatzkartenservice (Sim card blocking)
 **************************************************/
/**************************************************
 * RV-info
 **************************************************/
.report-mngmt-table {
  width: 100%;
  border-collapse: collapse;
}
.report-mngmt-table > thead > tr > th {
  padding: 12px 0 6px 0;
  text-align: left;
}
.report-mngmt-table > thead > tr > :first-child {
  padding: 12px 0 6px 12px !important;
}
.report-mngmt-table > tbody > tr > td {
  padding: 12px 0;
  text-align: left;
}
.report-mngmt-table > tbody > tr > :first-child {
  padding: 12px 0 12px 12px !important;
}

.report-mngmt-table-confirm > tbody > tr.ui-expanded-row {
  border-bottom-width: 0 !important;
  border-top: 1px solid #dcdcdc !important;
}
.report-mngmt-table-confirm .ui-datatable-even + .ui-expanded-row-content {
  background-color: #f8f8f8;
  border-bottom: 1px solid #dcdcdc;
}

.row-borders {
  border: solid #dcdcdc;
  border-width: 1px 0 1px 0;
}

.highlightRow {
  background-color: #dcdcdc !important;
}

.invisible-opacity {
  animation: ease-in-out;
  transition: 0.3s;
  opacity: 0;
  pointer-events: none;
}

.visible-opacity {
  animation: ease-in-out;
  transition: 0.3s;
  opacity: 1;
}

.foldingLink {
  display: inline-block;
  margin-left: 6px;
  color: #e62979;
  text-decoration: underline;
  cursor: pointer;
  vertical-align: middle;
}

/**************************************************
 * Tariff and option menu group
 **************************************************/
/* content_tarifFamilie.xhtml */
.tariffOverviewCmsColumn img {
  width: 100%;
}

#tariffFamily .tariffCol {
  width: 30%;
}
#tariffFamily .tariffColNoPromo {
  width: 40%;
}
#tariffFamily .minutesCol {
  width: 14%;
}
#tariffFamily .minutesColNoPromo {
  width: 20%;
}
#tariffFamily .promoPriceCol {
  width: 14%;
}
#tariffFamily .promoTermCol {
  width: 14%;
}
#tariffFamily .monthCol {
  width: 14%;
}
#tariffFamily .monthColNoPromo {
  width: 20%;
}
#tariffFamily .termCol {
  width: 14%;
}
#tariffFamily .termColNoPromo {
  width: 20%;
}
#tariffFamily .optionalPromoRow {
  padding-top: 0;
}
#tariffFamily .autoPromoRow {
  padding-bottom: 0;
}

.groupTariffList > tbody > tr > td > table {
  background-color: #FFFFFF;
}
.groupTariffList > tbody > tr > td > table table {
  margin-bottom: 24px;
}
.groupTariffList > tbody > tr > td > table table > tbody > tr > td {
  vertical-align: top;
}
.groupTariffList > tbody > tr > td > table table > tbody > tr > td:first-child {
  padding-left: 0;
}
.groupTariffList > tbody > tr > td > table table > tbody > tr > td:last-child {
  padding-right: 0;
}
.groupTariffList > tbody > tr > td > table table > tbody > tr:first-child > td {
  padding-top: 0;
}
.groupTariffList > tbody > tr > td > table table > tbody > tr:last-child > td {
  padding-bottom: 0;
}
.groupTariffList > tbody > tr > td > table table td:first-child {
  width: 50%;
}

/**************************************************
 * Offer bar
 **************************************************/
/* offerbar.xhtml */
#frmOfferBar .dash-list li {
  margin-bottom: 6px;
}
#frmOfferBar .offerDataScroller > .offerBarElement:last-child {
  border-bottom: none;
}
#frmOfferBar .offerBarElement {
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
#frmOfferBar .cmdRejectOffer {
  position: relative;
  top: -16px;
  right: -10px;
}
#frmOfferBar .ui-datascroller-content {
  overflow-x: hidden !important;
}

/* Account details Page - Fixnet permissions */
.access-rights {
  margin: 0;
  padding: 0;
}

.access-rights li {
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  line-height: 24px;
  height: 18px;
  padding: 0 10px 0 30px;
  display: block;
  border-radius: 2px;
  position: relative;
  overflow: inherit;
}

.access-rights li .state-icon {
  position: absolute;
  left: 0;
  bottom: -1px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-rights li .state-icon svg {
  height: 12px;
  width: 12px;
}

.access-rights .denied .state-icon {
  background-size: 12px;
  background: #D90000 url("/bspResources/javascript/vue/2.svg") no-repeat center;
  border-radius: 12px;
}

.access-rights .allowed .state-icon {
  background: #46A800 url("/bspResources/javascript/vue/1.svg") no-repeat center;
  background-size: 12px;
  border-radius: 12px;
}

.access-rights .unavailable .state-icon {
  background: #6B6B6B url("/bspResources/javascript/vue/2.svg") no-repeat center;
  background-size: 12px;
  border-radius: 12px;
}

.access-rights .allowed .state-icon svg .a {
  fill: transparent;
}

.access-rights .allowed .state-icon svg .b {
  fill: #fff;
}

/*div.marginTop24 > ul.access-rights > li {
  margin-top: 12px;
}*/
table.permissionTable tr.ui-node-level-1[aria-expanded=true] > td {
  background-color: #dcdcdc;
}

table.permissionTable tr.ui-node-level-3 > td {
  background-color: #F8F8F8;
}

table.permissionTable td {
  vertical-align: top;
}

table.permissionTable tr.ui-node-level-2 > td > span.ui-treetable-toggler {
  position: relative;
  top: 24px;
}

#fixedNetCustomerListForm .ui-overlaypanel-content {
  padding: 0;
}

table.delegatedPermissions tr.ui-node-level-1[aria-expanded=true] > td {
  background-color: #dcdcdc;
}

table.delegatedPermissions tr.ui-node-level-3 > td {
  background-color: #F8F8F8;
}

table.delegatedPermissions tr.ui-node-level-2 > td {
  overflow: visible !important;
}

table.delegatedPermissions tr.ui-node-level-2 > td > span.ui-treetable-toggler {
  position: relative;
  left: 169px;
}

table.delegatedPermissions tr.ui-node-level-2 > td > span.secondCol {
  position: relative;
  left: 24px;
}

table.delegatedPermissions tr.ui-node-level-3 > td > span.secondCol {
  position: relative;
  left: 24px;
}

[id$=delegatedPermissionsTable] th {
  background-color: #F8F8F8 !important;
}

.delegatedPermissionsHeadline {
  background-color: #F8F8F8;
  padding-top: 12px;
}

.delegatedPermissionsHeadline td {
  padding-left: 12px;
  padding-right: 12px;
}

.delegatedPermissionsHeadline.deletedMA {
  background-color: #E5F5FD;
}

.delegatedPermissionsHeadline hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #DCDCDC;
  margin: 0;
  padding: 0;
}

.delegatedPermissions .access-rights div {
  line-height: 24px;
  display: block;
  border-radius: 2px;
  position: relative;
  overflow: inherit;
}

.delegatedPermissions .access-rights span.state-icon {
  width: 16px;
  height: 16px;
  float: right;
}

.delegatedPermissions .access-rights div .state-icon svg {
  height: 12px;
  width: 12px;
}

#fixedNetCustomerListForm .ui-overlaypanel-close {
  top: 12px;
  right: 12px;
  background: none;
}

#fixedNetCustomerListForm .ui-treetable .ui-chkbox {
  margin-right: 6px;
}

#fixedNetCustomerListForm\:fixedNetCustomerList_content {
  padding: 0;
}

#fixedNetCustomerListForm\:fixedNetCustomerList_toggler {
  float: right;
  order: 2;
}

#permSearchForm\:permSearchPanel_toggler {
  float: right;
  margin-left: auto;
}

.search-panel > .ui-panel-titlebar {
  background-color: #F8F8F8 !important;
  border: none !important;
}

.search-panel > .ui-panel-content {
  background-color: #F8F8F8 !important;
  border: none !important;
}

.ui-icon-none {
  display: none !important;
}

.accessibilityButtonText {
  height: 33px;
  background: none;
  border: 1px solid transparent;
  color: #262626;
  padding: 0;
}
.accessibilityButtonText:active {
  background-color: #dcdcdc;
}
.accessibilityButtonText:focus {
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.15);
}
.accessibilityButtonText:disabled {
  opacity: 0.5;
}

.accessibilityButtonText:hover {
  text-decoration: none;
  color: #262626;
}
.accessibilityButtonText:active {
  color: #262626;
}

#fixedNetCustomerListForm .ui-paginator {
  margin-top: 6px;
  margin-bottom: 6px;
  padding-top: 0px;
}

#fixedNetCustomerListForm .ui-paginator-rpp-options {
  margin-top: 6px;
}

.groupSelectMenu {
  max-height: 108px;
  overflow: auto;
  display: block;
}
.groupSelectMenu li {
  max-width: 205px;
}
.groupSelectMenu li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.groupSelectMenu li.ui-selectcheckboxmenu-item.ui-selectcheckboxmenu-list-item.ui-corner-all.ui-selectcheckboxmenu-unchecked > label {
  font-size: 16px;
}

.groupSelectMenu span.ui-selectcheckboxmenu-token-label {
  font-size: 14px;
}

.groupSelectMenuPanel {
  max-height: 316px;
  resize: horizontal;
  overflow: auto;
  text-overflow: ellipsis;
  min-width: 263.6px;
}

body .groupSelectMenuPanel .ui-icon.ui-icon-search {
  margin-top: -8px !important;
}

.groupSelectMenu .ui-icon.ui-icon-triangle-1-s {
  margin-top: 6px !important;
  bottom: auto;
}

.deleteButton {
  background-image: url(/bspResources/img/delete.svg);
  background-position: center;
}

/*
 * Below there is a set of styles for inputs that are fixing IE layout issues
 */
.input35 {
  width: 35px;
  max-width: 35px;
  display: block;
}

.input42 {
  width: 42px;
  max-width: 42px;
  display: block;
}

.input57 {
  width: 57px;
  max-width: 57px;
  display: block;
}

.input60 {
  width: 60px;
  max-width: 60px;
  display: block;
}

.input70 {
  width: 70px;
  max-width: 70px;
  display: block;
}

.input80 {
  width: 80px;
  max-width: 80px;
  display: block;
}

.input96 {
  width: 96px;
  max-width: 96px;
  display: block;
}

.input160 {
  width: 160px;
  max-width: 160px;
  display: block;
}

.input240 {
  width: 240px;
  max-width: 240px;
  display: block;
}

.column240 {
  width: 240px;
}

.searchInput180 {
  width: 180px;
  display: block;
}

.searchInput310 {
  width: 310px;
  display: block;
}

.contactInfo {
  background-image: url(/bspResources/img/contactinfo.svg);
  height: 12px !important;
  width: 16px !important;
  margin: -6px -8px !important;
}

.contactInfoButton {
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle;
}

.contactInfoButton .ui-button-text {
  width: 24px !important;
  height: 24px !important;
}

/**************************************************
 * PDF-admin
 **************************************************/
.pdf-admin-start-buttons input {
  margin-right: 12px;
  margin-bottom: 18px;
}

.pdf-admin-fileupload .ui-fileupload-filename {
  line-height: 13px;
  position: relative;
  top: 12px;
  margin-right: 12px;
}
.pdf-admin-fileupload .ui-fileupload-filename:empty::after {
  content: "No file chosen";
}

/**************************************************
 * Order management (Auftragsverwaltung)
 **************************************************/
/* Order search /jsf/orderInquiry/search.xhtml */
.orderSearchResultTable th {
  padding: 3px !important;
}
.orderSearchResultTable td {
  padding: 6px !important;
}

/* Order details /jsf/orderDetails/orderDetails.xhtml */
#odForm\:kartendaten th, #odForm\:egdaten th {
  padding-top: 0;
}

/**************************************************
 * VuK Karten / Zugangsprofile
 * /vuk/vukKartenList.xhtml & some others
 **************************************************/
.vuk-start-process {
  display: flex;
  align-items: center;
  justify-content: right;
}
.vuk-start-process button, .vuk-start-process input {
  margin-left: 12px;
}
.vuk-start-process.top-block {
  margin-top: 30px;
}
.vuk-start-process.bottom-block {
  margin-top: 12px;
}
.vuk-start-process .action-selection {
  width: 217px;
}
.vuk-start-process.top-block-lift-up {
  margin-top: -30px;
}

.noFirstColumnHeaderTable th:first-child {
  visibility: hidden;
}

.multiSimTable th {
  padding: 6px !important;
  font-size: 14px !important;
}
.multiSimTable td {
  padding: 6px !important;
}

.searchFieldInput {
  position: relative;
  width: 350px;
  left: -15px;
  z-index: 0;
}

.searchFieldIcon {
  z-index: 1;
  position: relative;
  left: 10px;
}

.actionSelectionIndent {
  top: 11px;
}

/**************************************************
 * Account Search
 **************************************************/
#searchResultsForm .accountNameColumn {
  width: 26%;
}
#searchResultsForm .accountStatusColumn {
  width: 13%;
}
#searchResultsForm .accountCustomerNumbersColumn {
  width: 25%;
}

#searchAccountsForm table[id$=accountTypesRadioK] > tbody > tr {
  display: flex;
}
#searchAccountsForm table[id$=accountTypesRadioK] > tbody > tr td {
  display: flex;
}

/**************************************************
 * Salesman User create form
 **************************************************/
.newSalesForm {
  width: 61%;
  border-collapse: collapse;
}
.newSalesForm > tbody > tr > td {
  padding: 9px 12px;
  vertical-align: middle;
}

/**************************************************
 * Common component: Customer Search
 **************************************************/
#customerSearchForm .customerNumberColumn {
  width: 14%;
}
#customerSearchForm .customerColumn {
  width: 31%;
}
#customerSearchForm .zipColumn {
  width: 9%;
}
#customerSearchForm .cityColumn {
  width: 13%;
}
#customerSearchForm .departmentColumn {
  width: 18%;
}
#customerSearchForm .contactPersonColumn {
  width: 15%;
}

/**************************************************
 * Accounting (Benutzerverwaltung)
 **************************************************/
#maAccountArrangementForm .checkBoxColumn,
#subCustomerChangeProcessPermissionsForm .checkBoxColumn {
  width: 5%;
}
#maAccountArrangementForm .customerColumn,
#subCustomerChangeProcessPermissionsForm .customerColumn {
  width: 30%;
}
#maAccountArrangementForm .plzColumn,
#subCustomerChangeProcessPermissionsForm .plzColumn {
  width: 15%;
}
#maAccountArrangementForm .ortColumn,
#subCustomerChangeProcessPermissionsForm .ortColumn {
  width: 15%;
}

/**************************************************
 * Accounting (Festnetz-Kundennummer verbinden)
 **************************************************/
.buttonPadding .ui-button-text {
  padding: 0.375em 1.5em !important;
}

/**************************************************
 * Accounting (Benutzerverwaltung)
 **************************************************/
/* Account search /UserMgtModule/account_searchresult.xhtml */
table.accountSearchCustomersTable td {
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  vertical-align: top !important;
}

.administratedNumbersFlex {
  width: 500px !important;
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap !important;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
}

/**************************************************
 * FixNet accounting
 **************************************************/
/* Reverse DNS - RdnsMapping.xhtml */
table.rdnsMappingTable td {
  border: 0 !important;
}

/* Festnetz-Berechtigungen übertragen */
.ubertrage {
  margin-top: 23px;
}

.kundenWidth {
  width: 214px;
}

.emailWidth {
  width: 310px;
}

.hr-sect {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  color: #4B4B4B;
  margin: 8px 0px;
}

.hr-sect::before,
.hr-sect::after {
  content: "";
  flex-grow: 1;
  background: #4B4B4B;
  height: 1px;
  font-size: 0px;
  line-height: 0px;
}

.hr-sect::before {
  margin-right: 12px;
}

.hr-sect::after {
  margin-left: 12px;
}

.stickyButtons {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 69px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
}

#searchPanel .ui-panel-title {
  margin-left: 6px;
  font-size: 20px;
  font-weight: 300;
}

.lcPermissionTable table > thead {
  display: none;
}
.lcPermissionTable table > tbody > tr {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-width: 0 0 1px 0 !important;
}
.lcPermissionTable table > tbody > tr:last-child {
  border: 0 !important;
}

.nestedTableCells td:not(:first-child) {
  padding: 0 !important;
}

#gkInnoCustomerSelectForm .primary-button, #gkInnoCustomerSelectForm .infoInputField, #gkInnoCustomerSelectForm .ui-selectonemenu {
  vertical-align: middle;
}

body .ui-datatable.contractTable .ui-datatable-data > tr > td {
  cursor: default !important;
}

body .ui-datatable.contractTable .ui-datatable-data > tr.ui-state-highlight {
  border-bottom: 1px solid #dcdcdc !important;
  background-color: #f8f8f8;
}

.downtimeContractList {
  width: 772px;
  text-align: center;
  margin-top: -20px;
}

.downtimeContractList:after {
  content: "";
  display: block;
  background-color: #F8F8F8;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}

.downtimeTitle {
  font-size: 48px;
}

.downtimeText {
  font-size: 24px;
}
.downtimeText b {
  font-weight: 700;
}

.ui-selectonemenu-panel.productTypeDropDown .ui-selectonemenu-items-wrapper {
  max-height: 240px !important;
}

table.contractListTable td {
  border: 0 !important;
}

.ajax-loader-wrapper {
  position: relative;
}

.ajax-loader-contractlist {
  border: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.borderFilter {
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  padding: 12px;
  background: #f8f8f8;
}

.select-disbaled-contractlist {
  background-color: #EEEEEE !important;
  pointer-events: none;
  opacity: 100%;
}

.disabled-input {
  opacity: 50% !important;
}

.infoInputField:disabled {
  background-color: #EEEEEE !important;
  pointer-events: none;
}

.disabledInputs input:not([type=submit]), .disabledInputs select {
  pointer-events: none;
  /* for "disabled" effect */
  background: #EEEEEE !important;
}

.disabledInputs input[type=submit] {
  pointer-events: none;
}

.font-input-filter {
  font-size: 16px;
  font-weight: 300 !important;
}

.productDropDownWidth {
  width: 180px;
}

.statusDropDownWidth {
  width: 150px;
}

.sizeIpRadio label {
  font-size: 16px !important;
}

.colorIpRadio label {
  color: #262626 !important;
}

.customerDropDown {
  width: 130px;
}

.filter-row > div {
  margin-right: 18px;
}

.filter-row {
  display: flex;
  align-items: flex-end;
}

#gkInnoCustomerSelectForm .ui-orderlist .ui-orderlist-list {
  position: absolute;
  height: auto;
  width: 193px;
  overflow: auto;
  z-index: 1;
}

#gkInnoCustomerSelectForm .ui-orderlist-list-margin ul {
  margin-left: -2px;
  margin-top: 10px;
}

#gkInnoCustomerSelectForm .history-list {
  position: absolute;
}

/* Banner Administration pages  */
table.bannerTable td {
  border: 0 !important;
  padding: 0 !important;
}

.bannerActive td {
  font-weight: bold !important;
}

#cke_1_top {
  height: 30px !important;
}

.bannerBorderImagePreview {
  outline: 1px solid black;
  margin-left: 100px;
  justify-content: center;
  display: flex;
}

.bannerHorizontalImage {
  width: 336px;
  height: 198px;
}

.bannerVerticalImage {
  width: 225px;
  height: 228px;
}

.ctaCheckboxGroup .ui-fileupload-filename {
  display: none;
}

.ctaCheckboxGroup .ui-fileupload-simple > span {
  vertical-align: middle;
}

.ctaCheckboxGroup .ui-fileupload .ui-fileupload-buttonbar {
  background: transparent;
  border: none;
}

.ui-fileupload-content.ui-widget-content.ui-corner-bottom {
  display: none !important;
}

.ctaCheckboxGroup .ui-fileupload-choose {
  background-color: #ededed;
  border: 1px solid #6b6b6b !important;
  color: #262626 !important;
  height: 33px;
}
.ctaCheckboxGroup .ui-fileupload-choose:hover, .ctaCheckboxGroup .ui-fileupload-choose:focus {
  background-color: #dcdcdc;
}
.ctaCheckboxGroup .ui-fileupload-choose:active {
  background-color: #b2b2b2;
}
.ctaCheckboxGroup .ui-fileupload-choose:disabled {
  background-color: transparent;
  opacity: 0.5;
}

.ctaCheckboxGroup .ui-fileupload-choose .ui-button-text {
  padding: 0 0 0 10px !important;
}

.ctaCheckboxGroup .ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-state-disabled {
  display: block;
}

#gkInnoCustomerSelectForm .ui-paginator {
  text-align: left;
}

#gkInnoCustomerSelectForm .ui-paginator-first {
  margin-left: 100px;
}

/** vvl process pages **/
.ui-datalist-content ui-widget-content .ui-datalist-empty-message {
  display: none;
}

#upgradeCardsTable {
  border-collapse: collapse;
  border-bottom: 1px solid #A3A3A3;
}
#upgradeCardsTable thead {
  border-bottom: 1px solid #A3A3A3;
}
#upgradeCardsTable th {
  padding: 12px;
  vertical-align: bottom;
}
#upgradeCardsTable td {
  border: none;
  padding-top: 6px;
  padding-bottom: 6px;
}
#upgradeCardsTable td table tr > td {
  padding: 0;
}
#upgradeCardsTable .vvlSelectColumn {
  width: 4%;
}
#upgradeCardsTable .vvlMsisdnColumn {
  width: 12%;
}
#upgradeCardsTable .vvlPromoPriceColumn {
  width: 9%;
}
#upgradeCardsTable .vvlPromoDurationColumn {
  width: 7%;
}
#upgradeCardsTable .vvlDeviceColumn {
  width: 15%;
}
#upgradeCardsTable .vvlSimSelectColumn {
  width: 13%;
}
#upgradeCardsTable .vvlPriceColumn {
  width: 5%;
}

#updCards01\:upgradeAccessoriesTable {
  -ms-overflow-style: none;
}
#updCards01\:upgradeAccessoriesTable table .vvlSelectColumn {
  width: 5%;
}
#updCards01\:upgradeAccessoriesTable table .vvlAccQuantity {
  width: 9%;
}
#updCards01\:upgradeAccessoriesTable table .vvlAccPrice {
  width: 15%;
}
#updCards01\:upgradeAccessoriesTable table .vvlAccTotalPrice {
  text-align: right;
  width: 8%;
}

#updCards01\:totalPrice {
  border-collapse: collapse;
}

/** choose accessories page **/
.chooseAccessoryForm #accesorieschooseform\:ZubehoerDatensatz .ui-paginator-current {
  float: right;
}

.chooseAccessoryForm #accesorieschooseform\:ZubehoerDatensatz .ui-paginator-first {
  margin-left: 155px;
}

#accesorieschooseform\:ZubehoerDatensatz div table {
  /** TODO EAP 2: VVL: to be adjusted or removed */
}
#accesorieschooseform\:ZubehoerDatensatz div table .accessoryInfo {
  width: 60%;
}
#accesorieschooseform\:ZubehoerDatensatz div table .quantityChoose {
  width: 15%;
}
#accesorieschooseform\:ZubehoerDatensatz div table .availabilityColumn {
  width: 19%;
}
#accesorieschooseform\:ZubehoerDatensatz div table .priceColumn {
  width: 13%;
}
#accesorieschooseform\:ZubehoerDatensatz div table .quantityColumn {
  width: 10%;
}
#accesorieschooseform\:ZubehoerDatensatz div table td {
  background-color: white;
}
#accesorieschooseform\:ZubehoerDatensatz div table td table {
  border: hidden;
}
#accesorieschooseform\:ZubehoerDatensatz div table td table th {
  border: hidden;
  background-color: white;
}
#accesorieschooseform\:ZubehoerDatensatz div table td table td {
  vertical-align: top;
  border: hidden;
  background-color: white;
}

/** choose device page **/
#handychooseform\:handy div table td {
  background-color: white;
}
#handychooseform\:handy div table td table {
  border: hidden;
}
#handychooseform\:handy div table td table th {
  border: hidden;
  background-color: white;
}
#handychooseform\:handy div table td table tr {
  border: hidden;
}
#handychooseform\:handy div table td table td {
  border: hidden;
  background-color: white;
}
#handychooseform\:handy div table td table td table {
  background-color: white;
}
#handychooseform\:handy div table td table td table td {
  background-color: white;
}
#handychooseform\:handy div table td table td table td div {
  border: hidden;
}
#handychooseform\:handy div table .chooseColumn {
  width: 5%;
}
#handychooseform\:handy div table .deviceColumn {
  width: 65%;
}
#handychooseform\:handy div table .availabilityColumn {
  width: 15%;
}
#handychooseform\:handy div table .priceColumn {
  width: 10%;
}
#handychooseform\:handy div table .quantityColumn {
  width: 10%;
}

/* User Administration pages  */
.label16 {
  font-size: 16px;
  color: #4b4b4b;
}

.ui-radiobutton + label, .ui-selectbooleancheckbox + label {
  font-size: 16px;
  color: #262626;
}

/* New contract choose device  */
.chooseDeviceForm #handychooseform\:handy div table th {
  vertical-align: bottom !important;
}

.chooseDeviceForm #handychooseform\:handy .ui-paginator-current {
  float: right;
}

#debitorsForm .grid-radio td {
  padding: 6px;
}

#billingDataForm .grid-radio td {
  padding: 6px;
}
#billingDataForm .width195 {
  width: 195px;
}

#accountPanel div.ui-panel-titlebar {
  display: flex;
  align-items: center;
}

#accountPanel div.ui-panel-actions {
  margin-left: auto;
  order: 1;
}

:-ms-input-placeholder {
  color: #A3A3A3 !important;
}

.no-border-panel > .ui-panel-content {
  border: none !important;
}

.table-separate-1st-row {
  border-collapse: collapse;
}
.table-separate-1st-row tbody > tr:first-child td {
  border-bottom: 1px solid #dcdcdc;
}

#mainForm\:generalTermGroup.ui-datalist .ui-datalist-content {
  border: none !important;
  padding: 0 !important;
}
#mainForm\:generalTermGroup.ui-datalist .ui-datalist-content > div:last-child {
  margin-bottom: 0 !important;
}

#offerDetailsForm .ui-datalist {
  border: none;
}
#offerDetailsForm .ui-datalist .ui-datalist-content {
  border: none !important;
  padding-left: 0px !important;
}
#offerDetailsForm .companyHeaderGrid.ui-panelgrid > * > tr,
#offerDetailsForm .companyHeaderGrid.ui-panelgrid > * > tr > td {
  border: none;
}

.sticky-to-top {
  position: fixed;
  bottom: 82px;
  right: 10px;
  display: none;
}

.arrow-up {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #EDEDED;
  color: #262626 !important;
  font-size: 1.2em;
  border: none;
  text-decoration: none !important;
}

.account-check-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.account-check-container i {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
  color: rgba(0, 0, 0, 0.6);
}
.account-check-container i:first-of-type {
  left: 0.75rem;
}
.account-check-container i:last-of-type {
  right: 0.75rem;
}
.account-check-container .ui-inputfield {
  padding: 0 2rem;
}

.account-check-message-container > div {
  margin-top: 12px;
  display: flex;
  align-items: center;
}
.account-check-message-container > div i {
  margin-right: 0.5rem;
}
.account-check-message-container > div i.status-ok {
  content: url("/../bspResources/img/confirm.svg");
}
.account-check-message-container > div i.status-fail {
  content: url("/../bspResources/img/cancel.svg");
}

.signature-container {
  width: 685px;
}

.ui-inputfield.signature {
  width: 685px;
  height: 140px;
  border: 2px solid #6B6B6B;
}

.ui-inputfield.pad-signature {
  width: min-content;
  height: min-content;
  border: 2px solid #6B6B6B;
}

.delete-button-adjustment {
  display: flex;
  justify-content: flex-end;
}

.delete-button-dimensions {
  width: 84px;
  height: 30px;
  display: flex;
  justify-content: center;
}

.delete-button-dimensions > .ui-button-text {
  margin-left: 10px;
}

.fieldset-content-disable {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.template-selection-button > .ui-button.ui-button-icon-only {
  border: none;
  background-color: transparent;
}
.template-selection-button > .ui-button.ui-button-icon-only:hover, .template-selection-button > .ui-button.ui-button-icon-only:focus {
  background-color: #dcdcdc;
}
.template-selection-button > .ui-button.ui-button-icon-only:active {
  background-color: #dcdcdc;
}
.template-selection-button > .ui-button.ui-button-icon-only.ui-state-focus {
  outline: none;
}
.template-selection-button > .ui-button.ui-button-icon-only > .ui-icon {
  font-size: 1.5em !important;
}

.template-selection-menu {
  width: auto;
  transform: translate(-35%, 3%);
  border: 1px solid #6b6b6b !important;
}
.template-selection-menu.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
  padding: 1em !important;
  font-weight: 100;
}
.template-selection-menu.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link:hover, .template-selection-menu.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link:focus {
  background-color: #dcdcdc;
}
.template-selection-menu.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.disabled-teilen {
  background-color: transparent;
  opacity: 0.5;
  cursor: default;
}
.template-selection-menu.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.disabled-teilen:active {
  pointer-events: none;
}

#customerDataForm #nameContainer {
  display: flex;
  width: 45%;
  margin-top: 12px;
  justify-content: space-between;
}
#customerDataForm #nameContainer #labels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-around;
  align-items: flex-end;
}
#customerDataForm #nameContainer #labels label {
  margin-bottom: 0;
}
#customerDataForm #nameContainer #values {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-around;
  /* Firefox */
  width: -moz-calc(60% - 12px);
  /* WebKit */
  width: -webkit-calc(60% - 12px);
  /* Opera */
  width: -o-calc(60% - 12px);
  /* Standard */
  width: calc(60% - 12px);
}

.customerDataTextValue {
  width: 100%;
  min-height: 33px;
  display: flex;
  align-items: center;
}

#legitimatedPersonContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#legitimatedPersonContainer .ui-selectonemenu {
  vertical-align: inherit !important;
}
#legitimatedPersonContainer .inputDateContainer {
  align-items: center;
  position: relative;
}
#legitimatedPersonContainer .inputDateHint {
  white-space: nowrap;
  position: absolute;
  right: -6px;
}

table#salesForm\:legitimationFirma\:outerCompanyPG1 > tbody > tr:last-child > td {
  padding-top: 0 !important;
}
table#salesForm\:legitimationFirma\:outerCompanyPG1 > tbody > tr:last-child > td .authorizedPersonContainer {
  position: relative;
}
table#salesForm\:legitimationFirma\:outerCompanyPG1 > tbody > tr:last-child > td .authorizedPersonContainer .authorizedPersonCheckboxContainer {
  display: flex;
  position: absolute;
  left: 270px;
  top: 22%;
  align-items: stretch;
}
table#salesForm\:legitimationFirma\:outerCompanyPG1 > tbody > tr:last-child > td .authorizedPersonContainer .authorizedPersonCheckboxContainer label {
  margin-bottom: 0 !important;
  white-space: nowrap;
}

input#salesForm\:legitimate {
  position: absolute;
  left: 270px;
}

.tsgContainer {
  position: relative;
}

a#salesForm\:gotoTsg {
  position: absolute;
  white-space: nowrap;
  left: 270px;
  top: -90%;
}

.self-reg-title {
  text-align: center;
  font-size: 48px;
  font-weight: 400;
  line-height: 53px;
  color: #6C6C6C;
}

.self-reg-subtitle {
  text-align: left;
  font-size: 21px;
  font-weight: 400;
  line-height: 26px;
  color: #4B4B4B;
}

.self-reg-suggestion {
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #262626;
}

#self-reg-content {
  width: 480px;
  margin: auto;
}
@media screen and (max-device-width: 768px) {
  #self-reg-content {
    width: 100%;
    padding: 0 10%;
  }
}

#self-reg-content1 {
  width: 648px;
  margin: auto;
}
@media screen and (max-device-width: 768px) {
  #self-reg-content1 {
    width: 100%;
  }
}

#self-reg-inner-content1 {
  width: 520px;
  margin: auto;
}
@media screen and (max-device-width: 768px) {
  #self-reg-inner-content1 {
    width: 100%;
  }
}

#self-reg-content3 {
  width: 520px;
  margin: auto;
}
@media screen and (max-device-width: 768px) {
  #self-reg-content3 {
    width: 100%;
  }
}

.self-reg-content480 {
  width: 480px;
  margin: auto;
}
@media screen and (max-device-width: 768px) {
  .self-reg-content480 {
    width: 100%;
  }
}

.self-reg-margin-l20 {
  margin-left: 20px;
}
@media screen and (max-device-width: 768px) {
  .self-reg-margin-l20 {
    margin-left: 0;
  }
}

.generatePwButton {
  background-position: 28% center;
  background-repeat: no-repeat;
  background-image: url("/../bspResources/skin/tmobile/images/Loop.png");
}
@media screen and (max-device-width: 600px) {
  .generatePwButton {
    background-position: 20% center;
  }
}
@media screen and (max-device-width: 450px) {
  .generatePwButton {
    background-position: 14% center;
  }
}
@media screen and (max-device-width: 360px) {
  .generatePwButton {
    background-position: 10% center;
  }
}
@media screen and (max-device-width: 320px) {
  .generatePwButton {
    background-image: none;
  }
}

.energy-efficiency-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F8F8F8;
  border-color: #F8F8F8;
  padding: 0 12px 0 12px;
  margin-bottom: 6px;
}
.energy-efficiency-container img {
  width: 70px;
}

.energy-efficiency-image-general {
  max-width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.energyPopUpContainer {
  display: flex;
  flex-direction: column;
  padding: 0 15px 20px 15px;
}

.energyPopUpHeader {
  font-style: normal;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

.charger-info-table-container {
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  background-color: #F8F8F8;
  border-color: #F8F8F8;
  padding: 12px;
}
.charger-info-table-container .charger-image-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.charger-info-table-container .charger-image-container img {
  width: 28px;
}

.charger-info-details-container {
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  background-color: #F8F8F8;
  border-color: #F8F8F8;
  padding: 12px 24px;
}
.charger-info-details-container .charger-image-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.charger-info-details-container .charger-image-container img {
  width: 50px;
}

.qrDigitalSigning {
  border: 10px solid #E20074;
  height: 150px;
  width: 150px;
}

.verification-table-container {
  display: grid;
  grid-template-columns: 30% 70%;
  width: 40%;
  margin-top: 12px;
}
.verification-table-container .label-container {
  margin-top: 4px;
}
.verification-table-container .email-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.verification-table-container .email-container input {
  width: 270px;
}
.verification-table-container .email-container .email-check-message-container > div {
  margin-top: 6px;
  display: flex;
  align-items: center;
}
.verification-table-container .email-container .email-check-message-container > div i {
  margin-right: 0.5rem;
}
.verification-table-container .email-container .email-check-message-container > div i.status-ok {
  content: url("/../bspResources/img/confirm.svg");
}

body.qr-code-digital-signature {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.qr-code-digital-signature #page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
body.qr-code-digital-signature #page-wrapper #page-header {
  width: 100%;
  background: #E20074;
  height: 72px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #E5E5E7;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #FFF;
  padding: 36px 18px;
  width: 527px;
  height: 503px;
  box-shadow: 2px 4px 9px 0px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 99px;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #header #title {
  font-family: "TeleNeo", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 39px;
  color: #262626;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #header #subtitle {
  display: flex;
  text-align: center;
  font-family: "TeleNeo", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #262626;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #qrCode-block {
  display: flex;
  height: 260px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #qrCode-block #qrCode-border {
  position: relative;
  border: 6px solid #E20074;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 236px;
  width: 236px;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #qrCode-block #qrCode-border::before {
  content: "";
  position: absolute;
  width: 156px;
  height: 236px;
  background-color: #fff;
  top: -6px;
  left: 34px;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #qrCode-block #qrCode-border::after {
  content: "";
  position: absolute;
  height: 156px;
  width: 236px;
  background-color: #fff;
  top: 34px;
  left: -6px;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #qrCode-block #qrCode-wrapper {
  z-index: 9;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content #qrCode-block #qrCodeContainer {
  width: 236px;
  height: 236px;
  padding: 20px;
}
body.qr-code-digital-signature #page-wrapper #content-wrapper #content div#logo {
  height: 44px;
}
body.qr-code-digital-signature #footer {
  display: flex;
  text-align: center;
  font-family: "TeleNeo", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #262626;
}

form#searchForm table#searchForm\:searchTable {
  table-layout: fixed;
}
form#searchForm table#searchForm\:searchTable div#searchForm\:searchProject {
  position: relative;
  margin-bottom: 60px;
}
form#searchForm table#searchForm\:searchTable div#searchForm\:searchProject div#searchForm\:editProjectname {
  min-width: 0 !important;
}
form#searchForm table#searchForm\:searchTable div#searchForm\:searchProject div#searchForm\:editProjectname label.ui-selectonemenu-label {
  text-overflow: ellipsis;
}
form#searchForm table#searchForm\:searchTable div#searchForm\:searchProject div#divider {
  width: 707px;
  border-bottom: 1px solid #6B6B6B;
  position: absolute;
  bottom: -30px;
}
form#searchForm input:disabled,
form#searchForm textarea:disabled,
form#searchForm select:disabled,
form#searchForm .disabled-label,
form#searchForm .disabled-span,
form#searchForm .ui-state-disabled {
  color: #a3a3a3 !important;
  pointer-events: none;
  user-select: none;
}
form#searchForm .disabled-img {
  filter: brightness(0) saturate(100%) invert(74%) sepia(2%) saturate(2%) hue-rotate(180deg) brightness(89%) contrast(94%);
}

form#orderlist .error .ui-chkbox-box {
  border-color: #E41111 !important;
  border-width: initial;
}
form#orderlist #orderlist\:change-project-container {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  gap: 12px;
}
form#orderlist div#orderlist\:delete-from-project-popup, form#orderlist div#orderlist\:modify-project-popup {
  background-color: #fff;
}
form#orderlist div#orderlist\:delete-from-project-popup {
  width: 574px !important;
}
form#orderlist div#orderlist\:modify-project-popup {
  width: 449px !important;
}
form#orderlist div#orderlist\:delete-from-project-popup_title,
form#orderlist div#orderlist\:modify-project-popup_title {
  font-family: "TeleNeo", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: #262626;
}
form#orderlist .popup-text {
  font-family: "TeleNeo", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: #262626;
}
form#orderlist .popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 33px;
}
form#orderlist .modify-project-popup-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
form#orderlist .modify-project-select {
  width: 292px;
}

.p-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -2px;
  width: calc(100% + 4px);
}

.p-nogutter {
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
}

.p-nogutter > .p-col,
.p-nogutter > [class*=p-col-] {
  padding: 0;
}

.p-dir-rev {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.p-dir-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.p-dir-col-rev {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.p-justify-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.p-justify-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.p-justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.p-justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.p-justify-around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.p-justify-even {
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.p-align-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.p-align-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.p-align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.p-align-baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.p-align-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.p-col {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  padding: 0.5em;
}

.p-col-fixed {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0.5em;
}

.p-col-align-start {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.p-col-align-end {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.p-col-align-center {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.p-col-align-baseline {
  -ms-flex-item-align: baseline;
  align-self: baseline;
}

.p-col-align-stretch {
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

.p-col-1,
.p-col-2,
.p-col-3,
.p-col-4,
.p-col-5,
.p-col-6,
.p-col-7,
.p-col-8,
.p-col-9,
.p-col-10,
.p-col-11,
.p-col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0 2px;
}

.p-col-1 {
  width: 8.3333%;
}

.p-col-2 {
  width: 16.6667%;
}

.p-col-3 {
  width: 25%;
}

.p-col-4 {
  width: 33.3333%;
}

.p-col-5 {
  width: 41.6667%;
}

.p-col-6 {
  width: 50%;
}

.p-col-7 {
  width: 58.3333%;
}

.p-col-8 {
  width: 66.6667%;
}

.p-col-9 {
  width: 75%;
}

.p-col-10 {
  width: 83.3333%;
}

.p-col-11 {
  width: 91.6667%;
}

.p-col-12 {
  width: 100%;
}

.p-offset-12 {
  margin-left: 100%;
}

.p-offset-11 {
  margin-left: 91.66666667%;
}

.p-offset-10 {
  margin-left: 83.33333333%;
}

.p-offset-9 {
  margin-left: 75%;
}

.p-offset-8 {
  margin-left: 66.66666667%;
}

.p-offset-7 {
  margin-left: 58.33333333%;
}

.p-offset-6 {
  margin-left: 50%;
}

.p-offset-5 {
  margin-left: 41.66666667%;
}

.p-offset-4 {
  margin-left: 33.33333333%;
}

.p-offset-3 {
  margin-left: 25%;
}

.p-offset-2 {
  margin-left: 16.66666667%;
}

.p-offset-1 {
  margin-left: 8.33333333%;
}

.p-offset-0 {
  margin-left: 0%;
}

.p-sm-1,
.p-sm-2,
.p-sm-3,
.p-sm-4,
.p-sm-5,
.p-sm-6,
.p-sm-7,
.p-sm-8,
.p-sm-9,
.p-sm-10,
.p-sm-11,
.p-sm-12,
.p-md-1,
.p-md-2,
.p-md-3,
.p-md-4,
.p-md-5,
.p-md-6,
.p-md-7,
.p-md-8,
.p-md-9,
.p-md-10,
.p-md-11,
.p-md-12,
.p-lg-1,
.p-lg-2,
.p-lg-3,
.p-lg-4,
.p-lg-5,
.p-lg-6,
.p-lg-7,
.p-lg-8,
.p-lg-9,
.p-lg-10,
.p-lg-11,
.p-lg-12,
.p-xl-1,
.p-xl-2,
.p-xl-3,
.p-xl-4,
.p-xl-5,
.p-xl-6,
.p-xl-7,
.p-xl-8,
.p-xl-9,
.p-xl-10,
.p-xl-11,
.p-xl-12 {
  padding: 0.5em;
}

.p-col-nogutter {
  padding: 0;
}

@media screen and (min-width: 576px) {
  .p-sm-1,
  .p-sm-2,
  .p-sm-3,
  .p-sm-4,
  .p-sm-5,
  .p-sm-6,
  .p-sm-7,
  .p-sm-8,
  .p-sm-9,
  .p-sm-10,
  .p-sm-11,
  .p-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .p-sm-1 {
    width: 8.3333%;
  }
  .p-sm-2 {
    width: 16.6667%;
  }
  .p-sm-3 {
    width: 25%;
  }
  .p-sm-4 {
    width: 33.3333%;
  }
  .p-sm-5 {
    width: 41.6667%;
  }
  .p-sm-6 {
    width: 50%;
  }
  .p-sm-7 {
    width: 58.3333%;
  }
  .p-sm-8 {
    width: 66.6667%;
  }
  .p-sm-9 {
    width: 75%;
  }
  .p-sm-10 {
    width: 83.3333%;
  }
  .p-sm-11 {
    width: 91.6667%;
  }
  .p-sm-12 {
    width: 100%;
  }
  .p-sm-offset-12 {
    margin-left: 100%;
  }
  .p-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .p-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .p-sm-offset-9 {
    margin-left: 75%;
  }
  .p-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .p-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .p-sm-offset-6 {
    margin-left: 50%;
  }
  .p-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .p-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .p-sm-offset-3 {
    margin-left: 25%;
  }
  .p-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .p-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .p-sm-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 768px) {
  .p-md-1,
  .p-md-2,
  .p-md-3,
  .p-md-4,
  .p-md-5,
  .p-md-6,
  .p-md-7,
  .p-md-8,
  .p-md-9,
  .p-md-10,
  .p-md-11,
  .p-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .p-md-1 {
    width: 8.3333%;
  }
  .p-md-2 {
    width: 16.6667%;
  }
  .p-md-3 {
    width: 25%;
  }
  .p-md-4 {
    width: 33.3333%;
  }
  .p-md-5 {
    width: 41.6667%;
  }
  .p-md-6 {
    width: 50%;
  }
  .p-md-7 {
    width: 58.3333%;
  }
  .p-md-8 {
    width: 66.6667%;
  }
  .p-md-9 {
    width: 75%;
  }
  .p-md-10 {
    width: 83.3333%;
  }
  .p-md-11 {
    width: 91.6667%;
  }
  .p-md-12 {
    width: 100%;
  }
  .p-md-offset-12 {
    margin-left: 100%;
  }
  .p-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .p-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .p-md-offset-9 {
    margin-left: 75%;
  }
  .p-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .p-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .p-md-offset-6 {
    margin-left: 50%;
  }
  .p-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .p-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .p-md-offset-3 {
    margin-left: 25%;
  }
  .p-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .p-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .p-md-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 992px) {
  .p-lg-1,
  .p-lg-2,
  .p-lg-3,
  .p-lg-4,
  .p-lg-5,
  .p-lg-6,
  .p-lg-7,
  .p-lg-8,
  .p-lg-9,
  .p-lg-10,
  .p-lg-11,
  .p-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .p-lg-1 {
    width: 8.3333%;
  }
  .p-lg-2 {
    width: 16.6667%;
  }
  .p-lg-3 {
    width: 25%;
  }
  .p-lg-4 {
    width: 33.3333%;
  }
  .p-lg-5 {
    width: 41.6667%;
  }
  .p-lg-6 {
    width: 50%;
  }
  .p-lg-7 {
    width: 58.3333%;
  }
  .p-lg-8 {
    width: 66.6667%;
  }
  .p-lg-9 {
    width: 75%;
  }
  .p-lg-10 {
    width: 83.3333%;
  }
  .p-lg-11 {
    width: 91.6667%;
  }
  .p-lg-12 {
    width: 100%;
  }
  .p-lg-offset-12 {
    margin-left: 100%;
  }
  .p-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .p-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .p-lg-offset-9 {
    margin-left: 75%;
  }
  .p-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .p-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .p-lg-offset-6 {
    margin-left: 50%;
  }
  .p-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .p-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .p-lg-offset-3 {
    margin-left: 25%;
  }
  .p-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .p-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .p-lg-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 1200px) {
  .p-xl-1,
  .p-xl-2,
  .p-xl-3,
  .p-xl-4,
  .p-xl-5,
  .p-xl-6,
  .p-xl-7,
  .p-xl-8,
  .p-xl-9,
  .p-xl-10,
  .p-xl-11,
  .p-xl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .p-xl-1 {
    width: 8.3333%;
  }
  .p-xl-2 {
    width: 16.6667%;
  }
  .p-xl-3 {
    width: 25%;
  }
  .p-xl-4 {
    width: 33.3333%;
  }
  .p-xl-5 {
    width: 41.6667%;
  }
  .p-xl-6 {
    width: 50%;
  }
  .p-xl-7 {
    width: 58.3333%;
  }
  .p-xl-8 {
    width: 66.6667%;
  }
  .p-xl-9 {
    width: 75%;
  }
  .p-xl-10 {
    width: 83.3333%;
  }
  .p-xl-11 {
    width: 91.6667%;
  }
  .p-xl-12 {
    width: 100%;
  }
  .p-xl-offset-12 {
    margin-left: 100%;
  }
  .p-xl-offset-11 {
    margin-left: 91.66666667%;
  }
  .p-xl-offset-10 {
    margin-left: 83.33333333%;
  }
  .p-xl-offset-9 {
    margin-left: 75%;
  }
  .p-xl-offset-8 {
    margin-left: 66.66666667%;
  }
  .p-xl-offset-7 {
    margin-left: 58.33333333%;
  }
  .p-xl-offset-6 {
    margin-left: 50%;
  }
  .p-xl-offset-5 {
    margin-left: 41.66666667%;
  }
  .p-xl-offset-4 {
    margin-left: 33.33333333%;
  }
  .p-xl-offset-3 {
    margin-left: 25%;
  }
  .p-xl-offset-2 {
    margin-left: 16.66666667%;
  }
  .p-xl-offset-1 {
    margin-left: 8.33333333%;
  }
  .p-xl-offset-0 {
    margin-left: 0%;
  }
}
.p-d-none {
  display: none !important;
}

.p-d-inline {
  display: inline !important;
}

.p-d-inline-block {
  display: inline-block !important;
}

.p-d-block {
  display: block !important;
}

.p-d-flex {
  display: flex !important;
}

.p-d-inline-flex {
  display: inline-flex !important;
}

.p-jc-start {
  justify-content: flex-start;
}

.p-jc-end {
  justify-content: flex-end;
}

.p-jc-center {
  justify-content: center;
}

.p-jc-between {
  justify-content: space-between;
}

.p-jc-around {
  justify-content: space-around;
}

.p-ai-start {
  align-items: flex-start;
}

.p-ai-end {
  align-items: flex-end;
}

.p-ai-center {
  align-items: center;
}

.p-ai-baseline {
  align-items: baseline;
}

.p-ai-stretch {
  align-items: stretch;
}

.full-width {
  width: 100% !important;
}