.hsbc .yt-icon-20 {
    height: 20px;
    width: auto;
    display: inline-block;
    top: 4px;
    right: 4px;
    position: relative;
}

.footer-icon {
    height: auto;
    width: 28px;
    float: left;
    right: 36px;
    margin-right: -28px;
    position: relative;
}

.footer-icon-youtube {
    top:4px;
}

@font-face {
    font-family: 'hsbc-icons';
    src: url("/.resources/hsbc-theme/webresources/fonts/hsbc-icons.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

.hsbc .c-caption a:hover {
    text-decoration: underline !important;
}

.hsbc .disclaimer-message a {
    text-decoration: underline;
}

.c-disclaimer-dialog.lightbox{
    max-width: 830px;
}

.c-disclaimer-dialog.lightbox .lightbox__header{
    display:flex;
    align-items: center;
    text-align:center;
    left: 50%;
    transform: translate(-50%,0);
    max-width: 830px;
    padding: 0;
}

.c-disclaimer-dialog.lightbox .lightbox__header .logo{
    padding-left:2vw;
    margin-bottom: 0;
}
.c-disclaimer-dialog.lightbox .header-right {
    flex-basis:15%;
    text-align: left;
}

.c-disclaimer-dialog.lightbox .disclaimer-heading{
    font-family:univers-thin,sans-serif;
    font-weight:400;
    font-style:normal;
    font-size: 4rem;
    padding: 10px;
    flex-basis:70%;
}

.c-disclaimer-dialog.lightbox .disclaimer-message{
    font-family:univers-light,sans-serif;
    font-weight:400;
    font-style:normal;
    font-size: 1.8rem;
}

@media (max-width: 640px), (max-height: 640px) {
    .c-disclaimer-dialog.lightbox .disclaimer-heading{
        font-size: 2rem;
    }
    .c-disclaimer-dialog.lightbox .disclaimer-message{
        font-size: 1.6rem;
    }

    .c-disclaimer-dialog.lightbox .header-right {
       font-size:1.2rem;
       flex-basis:25%;
    }

}
@media (max-height: 420px) , (max-width: 420px) {
    .c-disclaimer-dialog.lightbox .disclaimer-message, .c-disclaimer-dialog.lightbox .c-fancy-select select{
        font-size: 1.4rem;
    }
    .c-disclaimer-dialog.lightbox .lightbox__header .logo{
        height:18px;
    }

    .c-disclaimer-dialog.lightbox .header-right {
        flex-basis:unset;
        flex-grow:1;
    }

}

.c-disclaimer-dialog.lightbox .disclaimer-suffix{
    margin: 2rem 0;
}

.youtube-overlay-parent {
    position:relative;
}

.hsbc .youtube-overlay{
    position:absolute;
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
    font-size: 1em;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.6);
    width:100%;
}

.youtube-container{
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
}

.youtube-container .player-parent{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    display: none;
}

.youtube-container iframe{
    position: absolute;
    width:100%;
    height: 100%;
}

.hsbc .youtube-overlay {
    color: white;
}

.hsbc .youtube-overlay .load-action{
    font-size: 1.8rem;
}

.hsbc .youtube-overlay a{
    color: white;
}

.hsbc .youtube-overlay a:hover{
    color: white;
    text-decoration: underline !important;
}


 .nobr {
    white-space: nowrap;
}

 .c-content-bottom-button .c-button-width-full  {
     white-space: normal!important;
 }

 tr.minisnap-row {
     word-break: normal;
     overflow-wrap: normal;
 }

 .lightbox .lightbox__footer-tsd {
    position: unset;
}

 .icon-detail-arrow {
     font-family: pwsicons, Arial;
      }

 .icon-detail-arrow:after {
     /*color: #de0011;*/
     font-size: 1.5em;
     content: "\feff\3e";
     }


 .footer__item--insta i.icon--main:after {
     font-family: hsbc-icons;
     content: "\e919";
     font-size: 4rem;
 }

.footer__item--youtube i.icon--main:after  {
    font-family: hsbc-icons;
    content: "\e936";
    font-size: 4rem;

}

table.footable div.snapshot-error  {
     padding-top: 12px;
     padding-bottom: 10px;
     padding-left: 10px;
     margin: 10px;
     font-size: 18px;
 }

 table.footable div.knocked-out-button {
     margin-top: 12px;
     margin-bottom: 10px;
     padding-top: 10px;
     padding-bottom: 10px;
 }

 table.footable > tbody.expandable-table > tr > td.footable-first-visible {
     padding-left: 35px;
     text-indent: -12px;
 }

 table.footable>tbody.expandable-table>tr{
     cursor:pointer;
}

 table.footable>tbody.expandable-table table.footable-details > tbody > tr {
     cursor:default;
 }

 table.footable>tbody.expandable-table table.footable-details > tbody > tr > td:nth-child(n) {
     word-break:normal;
 }

 table.footable>tbody.expandable-table table.footable-details > tbody > tr:first-child > th {
     display: none;
 }

 table.footable>tbody.expandable-table table.footable-details > tbody > tr:last-child > th {
     display: none;
 }

.imprint .c-table .footable-detail-row td:first-child tbody td:first-child, .home .c-table .footable-detail-row td:first-child tbody td:first-child {
     border-left: none; }

 .c-table .detail-box colgroup col:first-child {
     width: 50%;
 }

 .c-table .detail-box colgroup col:last-child {
     width: 50%;
 }

 .hsbc .buysell-buttons.id-detail {
     background-color: #008580;
     width: 100%;
 }
  .id-detail:hover {
     background-color: #00716c;
 }

  .v-widget.detail-box {
      display: flex;
  }

 .v-widget.detail-box-pre {
     display: flex;
 }

 .detail-0 { flex: 1; }

 .detail-1 { flex: 1; }

.imprint .c-table .footable-detail-row .footable-details td.buysell-buttons-row, .home .c-table .footable-detail-row .footable-details td.buysell-buttons-row  {
    padding-top: 7px;
    padding-bottom: 0px;
}

 .detail-1 .buysell-buttons-row {
    display: none;
 }

 .c-table td.buysell-buttons-row {
     padding:2px;
 }

 .v-widget.detail-2 {
     display: none;
     flex: 1;
 }

 .v-widget.detail-3 {
     display: none;
     flex: 1;
 }

/* .c-table tr:nth-child(odd).footable-detail-row td {
     background-color: #f7f7f7;
 }

 .c-table tr:nth-child(even).footable-detail-row td {
     background-color: #fff;
 }*/

 /*
 .c-table .detail-box tr:nth-child(odd) {
     background-color: inherit;
 }

 .c-table .detail-box tr:nth-child(even) {
     background-color: inherit;
 }
 */

 .c-table .footable-detail-row tr:nth-child(odd) {
     background-color: inherit;
 }

 .c-table .footable-detail-row tr:nth-child(even) {
     background-color: inherit;
 }


 .footable-details div.c-table {
     margin-bottom: 0px;
 }

 .imprint .c-table .footable-detail-row table.footable-details>tbody>tr, .home .c-table .footable-detail-row table.footable-details>tbody>tr {
     padding: 0;
     background-color: inherit;
 }

 .imprint .c-table .footable-header, .home .c-table .footable-header {
     background-color: #cccccc !important;
     color: #4c6473; }
 .imprint .c-table .footable-detail-row>td:first-child, .home .c-table .footable-detail-row>td:first-child {
     /*
     border-left: 5px solid #008580;
     border-bottom: 5px solid #008580;
     border: 5px solid #008580;
     */
     /*border: 12px solid #00716c;*/
     border-left: 5px solid #008580;

/*     border-left: 8px solid #c0c1c3;
     border-right: 8px solid #c0c1c3;
     border-bottom: 8px solid #c0c1c3;*/

     /*background-color: #C0C0C0;*/
     padding: 0px 0px;
 }
 .home .c-table .footable-detail-row .footable-details {
     /*margin-left: 8px;*/
 }

/* .home .c-table .footable-detail-row .footable-details>tbody>tr {
     width: 150px;
     background: none !important; }*/
.imprint .c-table .footable-detail-row .footable-details>tbody>tr>th, .home .c-table .footable-detail-row .footable-details>tbody>tr>th {
     background: none;
     text-align: left !important;
     color: #4c6473;
     width: 150px; }
.imprint .c-table .footable-detail-row .footable-details>tbody>tr>td, .home .c-table .footable-detail-row .footable-details>tbody>tr>td {
     /*text-align: left !important;*/
     /*padding: 0;*/
 }
.imprint .c-table .footable-detail-row td, .home .c-table .footable-detail-row td {
     padding: 7px 7px;
 }
.imprint .c-table .footable-detail-row th, .home .c-table .footable-detail-row th {
     padding: 7px 7px;
 }

.imprint .c-table .footable-detail-row td.detail-box-parent, .home .c-table .footable-detail-row td.detail-box-parent {
     padding: 0px 0px;
 }

 @media all and (min-width: 950px) {

     /*.home .c-table .footable-detail-row .footable-details > tbody > tr:first-child {
         display:none;
     }
     */
     /* all but the last */

     .imprint .c-table .footable-detail-row .footable-details > tbody > tr:nth-last-child(n+2), .home .c-table .footable-detail-row .footable-details > tbody > tr:nth-last-child(n+2) {
         display:none;
     }

     .v-widget.detail-2 {
         display: inline-block;
     }
     .detail-1 {
         margin-right: 10px
     }

     /* .v-widget.detail-box-pre {
         display: none;
     }
    */

     .detail-1 .buysell-buttons-row {
         display: table-cell;
     }

 }

 @media all and (min-width: 1160px) {
     .v-widget.detail-3 {
         display: inline-block;
         margin: 5px 0px;
     }
     .v-widget.detail-2 {
         margin-right: 10px
     }
 }


 #floatingHeader {
     position: fixed;
     z-index: 1;
     font-size: 13px;
     font-family: univers-bold;
     white-space: nowrap;
     box-Shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
 }

 #floatingHeader > div {
     padding-top: 6px;
     padding-bottom: 6px;
 }

 #floatingHeader > div.footable-sortable {
     position: relative;
     white-space: normal;
     cursor: pointer;
     vertical-align: middle;
 }

 #floatingHeader > div > span.fooicon {
     display: inline-block;
     position: absolute;
     right: 6px;
     top: 50%;
     margin-top: -7px;
 }


 .special-teaser {
     background-color: #ededed;
     border: none;
     margin: 0;
     overflow: auto;
     padding: 8px;
 }

 .special-teaser-message-img-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }

 .special-teaser-img{
     flex-grow: 0;
     flex-shrink: 0;
     padding: 8px;
 }

 .special-teaser-message-container {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 60%;
     padding: 8px;
 }

 .special-teaser-item-center {
     align-self: center;
 }

 .special-teaser-headline{
     text-align: center ;
  }

 .special-button-container{
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     width: 100%;
 }

 .special-teaser-text{
     font-size: 16px;
     line-height: 27px;
 }

 .c-button.special-button-item{
     flex: auto;
     margin: 8px;
 }

 @media (max-width: 650px) {
     .mobile-hide {
         display:none;
     }
 }

/*** Brokerize button ***/
.brokerize-button-container {
    position: relative;
    float: left;
    margin-top: 4px;
    width: 32px;
    height: 32px;
}
@media (max-width: 1120px) {
    .brokerize-button-container {
        width: 24px;
        height: 24px;
    }
}

/* disclaimer */
.disclaimer-table td, .disclaimer-table th {
    border: 1px solid;
    padding: 5px;
    text-align: left;
}

.disclaimer-table th {
    font-weight: bold;
}

/* Native Magnolia navigation; retain the exported host for older embeddings. */
:is(page-index-component, nav.page-index-component) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

nav.page-index-component {
    min-height: 56px;
    color: #333;
    font-size: 1.4rem;
    overflow-wrap: anywhere;
}

nav.page-index-component .page-index-title {
    margin: 0 0 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
    line-height: 1.75;
}

nav.page-index-component > .page-index-body {
    padding: 1rem;
}

nav.page-index-component > .page-index-controls {
    display: none;
    justify-content: flex-end;
    box-sizing: border-box;
    height: 50px;
    padding: 3px;
    line-height: normal;
}

nav.page-index-component .page-index-toggle {
    display: block;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
    border-radius: 0;
    color: #333;
    font-family: inherit;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
}

nav.page-index-component .page-index-toggle:focus-visible {
    outline: 2px solid #333;
    outline-offset: -2px;
}

nav.page-index-component p {
    color: #555;
}

nav.page-index-component ol {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-start: 1.5rem;
}

nav.page-index-component > .page-index-body > ol {
    padding-inline-start: 0;
}

nav.page-index-component li {
    margin: 0.5rem 0;
    padding: 0;
}

nav.page-index-component > .page-index-body > ol > li {
    margin-block: 1rem;
}

nav.page-index-component a,
nav.page-index-component a:hover,
nav.page-index-component a:focus-visible {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.75;
}

nav.page-index-component a[aria-current="page"] {
    color: #de0011;
}

nav.page-index-component a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (min-width: 960px) {
    :is(page-index-component, nav.page-index-component)[data-collapsed] {
        width: 50px;
        max-width: 50px;
    }

    /* Reserve the row from first paint; JS only reveals the ready control.
       Without JS it stays invisible/non-focusable without moving the links. */
    nav.page-index-component > .page-index-controls {
        display: flex;
    }

    nav.page-index-component > .page-index-controls[hidden] {
        visibility: hidden;
    }

    nav.page-index-component[data-collapsed] > .page-index-body {
        display: none;
    }
}

@supports selector(:has(> :is(page-index-component, nav.page-index-component))) {
    @media (min-width: 960px) {
        /* These selectors override the existing primary-column display
           without changing its outer width or float. */
        :has(> :is(page-index-component, nav.page-index-component)),
        .layout__primary.rte-text:has(> :is(page-index-component, nav.page-index-component)),
        .page .layout__primary:has(> :is(page-index-component, nav.page-index-component)) {
            display: grid;
            grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
            column-gap: 24px;
            align-items: start;
        }

        :has(> :is(page-index-component, nav.page-index-component)[data-collapsed]),
        .layout__primary.rte-text:has(> :is(page-index-component, nav.page-index-component)[data-collapsed]),
        .page .layout__primary:has(> :is(page-index-component, nav.page-index-component)[data-collapsed]) {
            grid-template-columns: 50px minmax(0, 1fr);
        }

        :has(> :is(page-index-component, nav.page-index-component)) > :is(page-index-component, nav.page-index-component) {
            grid-column: 1;
            grid-row: 1;
            max-width: 300px;
            border-right: 1px solid #ccc;
        }

        :has(> :is(page-index-component, nav.page-index-component)) > :is(page-index-component, nav.page-index-component)[data-collapsed] {
            border-right: none;
        }

        /* Keep every sibling in the content column, including headings and
           accordions, rather than only the immediately following element. */
        :has(> :is(page-index-component, nav.page-index-component)) > :not(page-index-component, nav.page-index-component) {
            grid-column: 2;
            min-width: 0;
        }

        :has(> :is(page-index-component, nav.page-index-component)) > .page-index-content {
            grid-row: 1;
        }

        /* News uses legacy floated columns without .rte-text. Override their
           display and prevent clearfix pseudo-elements from occupying grid cells. */
        .news .layout--0-9 > .layout__primary:has(> :is(page-index-component, nav.page-index-component)) {
            display: grid;
        }

        .page .layout__primary:has(> :is(page-index-component, nav.page-index-component))::before,
        .page .layout__primary:has(> :is(page-index-component, nav.page-index-component))::after {
            content: none;
        }

        .news .layout--0-9 > .layout__primary:has(> :is(page-index-component, nav.page-index-component)) > .page-index-content {
            grid-row: 1;
            width: auto;
            margin-right: 0;
        }
    }
}