.page-content {
    padding-top:114px;
    margin-left:140px;
    margin-right:140px;
/*    margin-left:auto;
    margin-right:auto;*/
    max-width:1440px;
}
@media (max-width:1440px) {
    .page-content {
        margin-left: 140px;
        margin-right: 140px;
    }
}
.page-header {
    /* Element is an <h1>; zero the UA margin so the promotion is visually identical. */
    margin-top: 0;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-family: 'SF-Pro';
    margin-bottom:48px;
}
.content-details {
    min-width: unset;
    max-width: 1000px;
    /*height: 100vh;*/
    /*overflow-y: auto;*/
    margin-right: 24px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;  Safari 
    -moz-user-select: none;  Firefox 
    -ms-user-select: none;  IE/Edge 
}
.content-details::-webkit-scrollbar{
    display:none;
}
.tnc-country-select {
    margin-bottom:48px;
}
.tnc-country-select .select2-container--default .select2-selection--single {
    height: 56px;
    border-radius: 16px;
    background-color: #F3F3F3 !important;
    border:0px;
}
.tnc-country-select .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top:11px;
    padding-left: 16px;
    padding-right: 16px;
}
.tnc-country-select .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 14px;
    right: 32px;
}
.tnc-country-select .select2-container--default .select2-selection--single .areacodeflag {
    width: 32px;
    height: 24px !important;
    font-size: 18px;
    font-family: 'SF-Pro';
    font-weight: 500;
    margin-right:8px;
}
.tnc-country-select .select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: url('/assets/images/dropdown arrow.svg');
    background-color: transparent;
    background-size: contain;
    border: none !important;
    height: 7px !important;
    width: 12px !important;
    top: 45% !important;
    left: 50% !important;
}    
.tnc-country-select .select2-container--default.select2-container--open.select2-container--below .select2-selection--single{
    border-radius: 16px;
}
.tnc-country-select .select2-container--default .select2-results>.select2-results__options{
    padding:16px 20px 16px 16px;
    overflow:visible;
}
.tnc-country-select .select2-container--default .select2-results>.select2-results__options li{
    margin-bottom:2px;
}
.tnc-country-select .select2-container--default .select2-results>.select2-results__options .areacodeflag{
    margin-right:8px;
}
.tnc-country-select .select2-container--open .select2-dropdown--below,
.tnc-country-select .select2-container--open .select2-dropdown--above,
.tnc-country-select .select2-dropdown {
    margin-top:6px;
    border:none;
    border-radius:16px;
    background-color: #F3F3F3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 300px;
}

.tnc-country-select .select2-results__option,
.tnc-country-select .areacodelabel {
    white-space: nowrap;
}
.tnc-country-select .select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color:rgba(178, 178, 178, 0.3);
    color:black;
    border-radius:8px;
}
.tnc-country-select .select2-container--default .select2-results__option[aria-selected=true]{
    border-radius:8px;
}
.country-tnc {
    font-family: 'SF-Pro';
    font-size: 18px;
    color: #000000;
    font-weight:700;
}
.tnc-content {
    max-width:1440px;
}
.tnc-details {
    font-family: 'SF-Pro';
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.13px;
    line-height: 29px;
    margin-bottom:12px;
}
.tnc-details ul {
    list-style-type:none;
    padding-left:0px;
}
.tnc-section {
    margin-top:36px;
    margin-bottom:36px;
}
.tnc-details-bold {
    font-weight:700;
    font-family:'SF-Pro';
}
.tnc-title {
    font-family:'SF-Pro';
    font-weight:700;
    font-size:24px;
    letter-spacing:0.2px;
    line-height:24px;
    margin-bottom:24px;
}

.privacy-content, .tnc-content{
    position: relative;
    margin-right: 400px;
}

@media (max-width: 768px) {
    .privacy-content, .tnc-content {
        margin-right: 0;
    }
    .page-content {
        margin-left: 20px;
        margin-right: 20px;
    }
    .content-details {
        min-width: unset;
        max-width: 100%;
    }
}

/* Sticky, not fixed. `fixed` pins to the viewport and therefore never releases, so at the end of
   the document the outline stayed at top:114px while the footer scrolled under it and the footer
   QR landed on top of the list. Sticky pins it the same way while the body scrolls, then lets it
   scroll away with .tnc-content / .privacy-content, which end exactly where the legal copy ends.

   This needs `html, body { overflow-x: clip }` in site.css - with the old `overflow-x: hidden`,
   <body> is a scroll container and sticky is silently inert (an earlier attempt at sticky is the
   commented-out block this replaced).

   .tnc-content / .privacy-content already reserve a 400px lane via margin-right for this panel.
   The negative margin-right lets the outline sit in that reserved lane instead of taking width
   from the text column: 74 + 326 - 400 = 0, so line lengths in the legal copy are untouched. */
.outline {
    min-width: 210px;
    max-width: 326px;
    height: 350px;
    position: sticky;
    top: 114px;
    flex: 0 0 326px;
    align-self: flex-start;
    margin-left: 74px;
    margin-right: -400px;
}
.outline .outline-header{
    color:#525252;
    font-family:'SF-Pro';
    font-weight:700;
    font-size:24px;
    width: 326px;
    margin-bottom:24px;
}
.outline ul {
    list-style-type: none;
    width:300px;
}
.outline-toggle {
    position: fixed;
    bottom: 110px;
    right: 20px;
    width: 75px;
    height: 75px;
    background-color: #FCAF17;
    color: #000;
    border: none;
    border-radius: 50%;
    font-size: 34px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

    .outline-toggle:hover {
        background-color: #e6a000;
    }

/* Mobile bottom popup behavior for outlineSidebar */
@media (max-width: 767.98px) {
    #outlineSidebar {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        background: #fff;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        z-index: 1060;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
        transition: bottom 0.3s ease;
        max-height: 75%;
        overflow-y: auto;
    }

        #outlineSidebar.mobile-active {
            bottom: 0;
        }

        #outlineSidebar .outline-header {
            font-size: 16px;
            font-weight: bold;
            padding: 12px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            #outlineSidebar .outline-header::after {
                content: "×";
                font-size: 24px;
                cursor: pointer;
                color: #000;
            }

        #outlineSidebar .list-group-item {
            padding: 12px 20px;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
        }
}



#list-section {
    overflow-y:scroll;
    height:300px;
    scroll-behavior: smooth;
}

#list-section::-webkit-scrollbar {
    display:none;
}

#list-section a {
    color: #A0A0A0;
    font-size:16px;
    font-weight:500;
    background-color: transparent;
    border: 0px;
    border-radius:0px;
    border-left: solid 4px #DEDEDE;
    padding:2px 0px 8px 16px ;
    cursor: pointer;
}

#list-section a.active {
    color: #474747;
    border-left: solid 4px #474747;
}

@media (max-width:1450px) {
    .content-details{
        max-width: 800px;
    }

}

@media (max-width:1300px) {
    .content-details {
        max-width: 600px;
    }
}

@media (max-width:1150px) {
    .content-details {
        max-width: 500px;
    }
    .page-content {
        margin-left: 80px;
        margin-right: 80px;
    }
}

@media (max-width:1023px) {
    .outline:not(.mobile-active) {
        display: none;
    }

    /* The 400px lane is given back below (.tnc-content/.privacy-content margin-right:0), so the
       outline's negative margin has nothing to occupy and would hang off the container. */
    .outline {
        flex: 0 1 auto;
        margin-left: 0;
        margin-right: 0;
    }
    .content-details {
        max-width: 100%;
        min-width: unset;
    }
    .page-content {
        margin-left: 40px;
        margin-right: 40px;
    }
    .privacy-content, .tnc-content {
        margin-right: 0;
    }
}