html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: "TeleNeo";
 vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
 outline: 0; 
}

ol, ul {
 list-style: none; 
}

/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: separate;
 border-spacing: 0; 
}

caption, th, td {
 text-align: left;
 font-weight: normal; 
}

blockquote:before, blockquote:after,
q:before, q:after {
 content: ""; 
}

blockquote, q {
 quotes: "" ""; 
}

html {
 box-sizing: border-box; 
}

*, *:before, *:after {
 box-sizing: inherit; 
}

@supports (font-variation-settings: normal) {
 @font-face {
   font-family: "TeleNeo";
   font-weight: 250 400 800;
   src: local("?"),
  url("https://www.telekom.de/resources/sites/phoenix/style/font//teleneo-variable.woff2") format("woff2 supports variations"),
  url("https://www.telekom.de/resources/sites/phoenix/style/font//teleneo-variable.woff2") format("woff2-variations"),
  url("./assets/fonts/TeleNeoWeb//teleneo-variable.woff2") format("woff2 supports variations"),
  url("./assets/fonts/TeleNeoWeb//teleneo-variable.woff2") format("woff2-variations");
 }
  }

@supports (font-feature-settings: bold) {
 @font-face {
  font-family: "TeleNeo Bold";
  font-weight: 250 400 800;
  src: url("https://www.telekom.de/resources/sites/phoenix/style/font/teleneo-bold.woff2") format("woff2 supports variations"); 
 }
}

b {font-family: "TeleNeo-Bold", Arial, Helvetica, sans-serif;}

body {
 font-family: "TeleNeo", Arial, Helvetica, sans-serif;
 font-size: 18px;
 line-height: 1;
 color: #262626;
 /* padding: 30px 0; Not needed after adding the breadcrumbs*/
 max-width: 100%;
}

h1 {
 color: #000;
 text-align: center;
 font-size: 48px;
 font-style: normal;
 font-weight: 800;
 /* line-height: 48px; */
}
.h2-style {
 color: #262626;
 text-align: center;
 font-size: 36px;
 font-style: normal;
 font-weight: 800;
 line-height: 36px; /* 100% */
}

h2 {
 color: #262626;
 text-align: center;
 font-size: 36px;
 font-style: normal;
 font-weight: 800;
 word-wrap: break-word;
}

/* class to hide divs*/
.hidden {
 display: none !important;
}

/*Breadcrumbs start*/
.breadcrumb {
  margin: 0 20px 0;
  display: none;
  padding-top: 12px;
 padding-left: 12px;
 padding-bottom: 50px;
}

.breadcrumb:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

.table-header {
 color: #262626;
 line-height: 24px;
 word-wrap: break-word;
 font-weight: bold;
 text-align: left;
 padding-top: 30px;
 padding-bottom: 15px;
}

.assisted {
  width: 100%;
}
.assisted td, th {
  border: 1px solid #999;
  padding: 0.5rem;
}

.assisted th {
  font-weight: bold;
}

@media (min-width: 320px){
 .breadcrumb {
    display: inherit;
 }
}

@media all and (max-width: 319px) {
  .breadcrumb {
      display:inherit;
  }
}

.breadcrumb__container {
  width: 100%;
}

.breadcrumb__container:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

.breadcrumb__tag {
  color: #a4a4a4;
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  overflow: hidden;
}

.breadcrumb__tag.breadcrumb__tag--highlight {
  color: #e20074;
  font-weight: 700;
}

.breadcrumb__tag.breadcrumb__tag--highlight .link-text a {
  color: #e20074;
}

.breadcrumb__tag.breadcrumb-prefix {
  display: block;
  height: 20px;
  float: left;
}

@media all and (min-width: 640px) {
  .breadcrumb__tag.breadcrumb-prefix {
      display:none;
  }
}

.breadcrumb__tag.breadcrumb-prefix .breadcrumb-prefix-label {
  padding-right: 5px;
  white-space: nowrap;
}

.breadcrumb__tag .link-text {
  display: inline-block;
}

.breadcrumb__tag .link-text a {
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  color: #a4a4a4;
 text-decoration: none;
}

.breadcrumb__tag.final {
  white-space: nowrap;
}

.ie11 .breadcrumb__tag.swipe .breadcrumb__swipe-content {
  overflow-x: hidden;
}

.breadcrumb__arrow {
  display: inline-block;
  margin: 0 4px 0 3px;
}

.breadcrumb__arrow .c-icon__svg {
  position: relative;
  width: 14px;
  height: 14px;
  display: block
}

.breadcrumb__arrow .c-icon__svg svg {
  width: 14px;
  height: 14px;
  fill: #a4a4a4;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: absolute;
  top: 3px;
  left: 0
}

.breadcrumb__arrow.no-divider-icon {
  font-size: 23px;
  width: 11px;
  position: relative;
  height: 18px
}

.breadcrumb__arrow.no-divider-icon:before {
  content: "›";
  color: inherit;
  position: absolute;
  top: 0;
  right: 0
}

.link-text>a:hover {
  text-decoration: underline
}
/*Breadcrumbs end*/

.subscription-container {
 display: grid;
 grid-template-columns: 1fr minmax(auto, 720px) 1fr;
 row-gap: 8px;
}

.header-container {
 grid-column: 2 / 3;
 justify-self: center;
 padding-left: 12px;
  padding-right: 12px;
}

.header-container-margin {
 margin-bottom: 64px;
}

.header-text {
 color: #262626;
 line-height: 24px;
 word-wrap: break-word;
 font-weight: 400;
 text-align: center;
 padding-top: 30px;
}

.gray-box {
 grid-column: 1/4;
 padding-top: 42px;
 padding-bottom: 42px;
 background: #F7F7F7;
 
}

.gray-box-grid {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: minmax(auto, auto) minmax(auto, auto);
 row-gap: 30px;
}

.gray-box-grid-single-row {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows:minmax(auto, auto);
}

.subscription-process-container {
 justify-self: center;
 align-self: start;
 display: grid;
 grid-template-columns: minmax(auto, 115px) minmax(auto, 40px) minmax(auto, 40px) minmax(auto, 74px) 
 minmax(auto, 40px) minmax(auto, 40px) minmax(auto, 74px) minmax(auto, 40px) minmax(auto, 40px) minmax(auto, 115px);
 grid-template-rows: minmax(auto, 74px);
 gap: 15px 10px;
 grid-auto-flow: row;
}

.image-div {
 width: 100%;
  height: 100%;
 max-width: 74px;
}
.form-fill-icon {
 grid-column: 1 / 2;
 justify-self: end;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/b0fea391-87cb-4720-9364-a56f7ec4da14.png");
 background-repeat: no-repeat;
 background-position: center;
}
.form-fill-icon-pink {
 grid-column: 1 / 2;
 justify-self: end;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/b368bf35-02db-44f2-9b1d-edc09325c66b.png");
 background-repeat: no-repeat;
 background-position: center;
}

.line {
 width: 100%;
 height: 100%;
 max-width: 90px;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/4161c1dd-20ad-4860-9551-7a961654f8a6.png");
 background-repeat: no-repeat;
 background-position: center;
}

.line1 {
 grid-column: 2 / 4;
}

.email-icon {
 grid-column: 4 / 5;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/ed7867e4-6ed0-4a1d-8354-bdf848e1cfc1.png");
 background-repeat: no-repeat;
 background-position: center;
}

.email-icon-pink {
 grid-column: 4 / 5;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/ceb08ae1-d53b-4cff-8a79-a4a7303935b0.png");
 background-repeat: no-repeat;
 background-position: center;
}

.line2 {
 grid-column: 5 / 7;
}

.confirm-link-icon {
 grid-column: 7 / 8;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/1b31abe7-513b-44b0-ba2d-0cb11d691b6e.png");
 background-repeat: no-repeat;
 background-position: center;
}

.line3 {
 grid-column: 8 / 10;
}

.success-icon {
 grid-column: 10 / 11;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/ae9cb8b6-bbaa-4386-82be-51ac42a83686.png");
 background-repeat: no-repeat;
 background-position: center;
}

.success-icon-pink {
 grid-column: 10 / 11;
 background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/16d0f173-76da-4173-abe0-15568a3c6a0f.png");
 background-repeat: no-repeat;
 background-position: center;
}

.process-desc {
 text-align: center;
 color: #262626;
 font-size: 18px;
 font-family: TeleNeo;
 font-weight: 700;
 line-height: 24px;
 word-wrap: break-word;
}

.form-fill-desc {
 grid-column: 1 / 3;
}

.email-desc {
 grid-column: 3 / 6;
}

.confirm-link-desc {
 grid-column: 6 / 9;
}

.success-desc {
 grid-column: 9 / 11;
}

.main {
 grid-column: 2/3;
}

.main-margin-top {
 margin-top: 56px;
}

.main-margin-bottom {
 margin-bottom: 70px;
}

.main-margin-sides {
 margin-left: 20px;
 margin-right: 20px;
}

.form-wrapper {
 max-width: 476px;
 margin-right: auto;
 margin-left: auto;
 padding-top: 20px;
}
.form-row.interest-div-wrapper {
 margin-top: 20px;
 margin-bottom: 32px; 
}
.interest-label {
 color: #262626;
 font-size: 21px;
 font-style: normal;
 font-weight: 800;
 line-height: 25px;
}

.form-row.checkbox-wrapper {
 margin-bottom: 15px; 
}

.email-text-field {
 width: 100%;
 height: 50px;
  border: 1px solid #6B6B6B;
 border-radius: 5px;
 text-align: left;
 margin-bottom:15px;
 padding-left: 10px;
 font-size: 18px;
 font-family: "TeleNeo", Arial, Helvetica, sans-serif;
 color: #262626;
}

.email-error {
 border: 1px solid #D90000;
}

.news-label {
 margin-left: 20px; 
 line-height: 22px;
}

.divider {
 width: 100%; 
 height: 1px; 
 background: #6B6B6B;
 margin-top: 12px;
}

/* checkbox styling*/
/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
 color: #262626;
  padding-left: 36px;
  cursor: pointer;
  font-size: 18px;
 line-height: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #ffffff;
 border-radius: 4px;
 border: 1px solid #6B6B6B;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ededed;
}
/* For disabled, make background opaque */
.checkbox-container input[type="checkbox"]:disabled ~ .checkmark {
 opacity: 0.5;
}

/* When the checkbox is checked */
/* .checkbox-container input:checked ~ .checkmark {
 background-color: #ededed;
} */

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 8px;
  top: 2px;
  width: 6px;
  height: 13px;
  border: 4px solid #e20074;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* On invalid checkbox, add a red borderr */
.checkmark-error {
  border: 1px solid #D90000;
}

/* dropdown styling*/
.custom-select {
 margin-top: 30px;
 margin-bottom: 32px; 
  position: relative;
}

select {
 /* A reset of styles, including removing the default dropdown arrow */
  /* appearance: none; */
  /* Additional resets for further consistency */
  background-color: transparent;
 border: 1px solid #6b6b6b;
 padding: 0.5em 1.4em 0.5em 0.5em;
 margin: 10px 0;
 height: 50px;
 width: 100%;
 font-family: inherit;
 font-size: inherit;
 cursor: inherit;
 line-height: inherit;
 box-sizing: border-box;
 border-radius: 5px;
}

.select-css::-ms-expand {
 display: none;
}
.select-css:hover {
 border-color: #888;
 background-color: #EDEDED;
}
.select-css:focus {
 border-color: #aaa;
 /* box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
 box-shadow: 0 0 0 3px -moz-mac-focusring; */
 color: #222;
 outline: none;
}
.select-css option {
 font-weight:normal;
}

.complaint-reason-text {
 width: 100%;
 height: 115px;
}

.submit-btn {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 height: 42px;
 padding: 0 18px;
 color: #ffffff;
 background: #e20074;
 border: 1px solid;
 border-radius: 4px;
 font-family: "TeleNeo", sans-serif;
 font-size: 18px;
 cursor: pointer;
 display: inline-block;
 line-height: 34px;
 text-align: center;
 text-decoration: none; 
 width: 162px;
 margin-top: 25px;
}

.error {
 border: 2px solid #e20074 !important;
}
.error::-webkit-input-placeholder {
 /* Chrome/Opera/Safari */
 color: #e20074; 
}
.error::-moz-placeholder {
 /* Firefox 19+ */
 color: #e20074;
}
.error:-ms-input-placeholder {
 /* IE 10+ */
 color: #e20074; 
}
.error:-moz-placeholder {
 /* Firefox 18- */
 color: #e20074;
}

.title mark.error:before {
 margin: 0px 0px 4px 3px !important; 
}

.info{
 color: #262626; 
 font-size: 15px; 
 font-weight: 400; 
 line-height: 18px; 
 word-wrap: break-word;
 background: url('https://image.info.telekom.de/lib/fe33117175640475771078/m/1/e1c78139-868e-4756-8b52-dc84d6061c70.png') no-repeat;
 margin-top: 73px;
 padding-left: 30px;
 max-width: 680px;
}

#newsletter-error, #email-error, #char-error, #email-exists-error {
 color: #D90000;
 font-size: 18px;
 font-weight: 700;
 line-height: 24px;
 
}
.error-row {
 margin-bottom: 15px;
}

.left-align-text {
 text-align: left;
}

.devices {
 display: block;
 margin: 0 auto 35px;
}

@media only screen and (max-width: 400px) {
    .devices {
        width:100%;
    }

}
/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 750px) {
 .subscription-process-container { 
  display: grid;
  grid-template-columns: minmax(auto, 100px) minmax(auto, 34px) minmax(auto, 34px) minmax(auto, 56px) 
  minmax(auto, 34px) minmax(auto, 34px) minmax(auto, 56px) minmax(auto, 34px) minmax(auto, 34px) minmax(auto, 85px);
  grid-template-rows: minmax(auto, 56px);
  gap: 15px 5px;
  grid-auto-flow: row;
  padding-left: 12px;
    padding-right: 12px;
 }
 .image-div{
  max-width: 56px;
 }
 .form-fill-icon-pink {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/dc529833-520a-46e1-910a-26358c9a7b31.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .form-fill-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/5c3035ea-8cd7-4a51-b4ed-a3142fee6331.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .line {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/96b22009-8046-4b93-854d-3dc3273f98ea.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .email-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/794c14ad-2f7e-4a23-9b9e-24b64e9f5e75.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .email-icon-pink {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/c53b2f52-9800-4e9e-b372-659e783e6a71.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .confirm-link-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/cceefd06-9860-4980-bb64-0e5ce5e3e53b.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .success-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/1ae5d95f-3177-4d1a-8145-ea87248532b4.png");
  background-repeat: no-repeat;
  background-position: center;
 }
  .success-icon-pink {
    grid-column: 10 / 11;
    background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/d7d83db8-aa7a-44ff-b462-0146880438eb.png");
    background-repeat: no-repeat;
    background-position: center;
  }
 .info{
  margin: 30px 12px;
 }
}

@media (max-width: 480px) {
 .subscription-process-container { 
  display: grid;
  grid-template-columns: minmax(auto, 55px) minmax(auto, 22px) minmax(auto, 22px) minmax(auto, 37px) 
  minmax(auto, 22px) minmax(auto, 22px) minmax(auto, 37px) minmax(auto, 22px) minmax(auto, 22px) minmax(auto, 52px);
  grid-template-rows: minmax(auto, 37px);
  gap: 10px 5px;
  grid-auto-flow: row;
  padding-left: 10px;
    padding-right: 10px;
 }
 .image-div{
  max-width: 36px;
 }
 .form-fill-icon-pink {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/fe49f00f-415b-4ff0-a172-8647b3d31f8d.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .form-fill-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/756d373a-bd34-4986-9c6c-36a1e935e461.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .line {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/1679488b-8ae1-4d75-b0c4-b3a9e5eee471.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .email-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/32ce2a9c-df0a-4dbc-b0ba-5632502c17eb.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .email-icon-pink {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/1af5ee89-ac7c-439b-b3ea-c00ce048b3f1.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .confirm-link-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/d0d7e671-f1c6-481a-b84a-5507981fde55.png");
  background-repeat: no-repeat;
  background-position: center;
 }
 .success-icon {
  background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/f03c8e5c-deb5-4491-b8c4-6762d162da7e.png");
  background-repeat: no-repeat;
  background-position: center;
 }
  .success-icon-pink {
    grid-column: 10 / 11;
    background: url("https://image.info.telekom.de/lib/fe33117175640475771078/m/1/07356d68-b992-4452-9134-9a80240dbe48.png");
    background-repeat: no-repeat;
    background-position: center;
  }
 .process-desc {
  font-size: 14px;
  line-height: 20px;
 }
 .info{
  margin: 25px 12px;
 }
 .form-wrapper {
  padding-right: 12px;
  padding-left: 12px;
 }
}

/* For removing autocomplete highlight color in chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}