hr {
    border-top: 1px solid #E7EBF2;
    margin: 40px 0;
}

.invalid-feedback {
    color: #F46600;
}

main > section.main {
    padding-top: 0px;
    padding-bottom: 0px;
}

.underline-accent::after {
    border-bottom: 2px solid #CBD0D8;
    content: "";
    width: 150px;
    display: block;
    margin-top: 5px;
}

.alert {
    border-radius: 20px;
}

#preferences-form {

}
    #preferences-form .btn-primary {
        background-color: transparent;
        border-color: #00FFFF;
        color: #00FFFF;
        padding: 12px 30px;
        font-size: 18px;
        border-radius: 30px;
    }
        #preferences-form .btn-primary:hover, #preferences-form .btn-primary:focus, #preferences-form .btn-primary:active,{
            background-color: #00FFFF;
            color: #3E4047;
        }

    #preferences-form .btn-secondary {
        border-radius: 30px;
        padding: 6px 30px;
        margin-left: 15px;
    }
        #preferences-form .btn-secondary:hover, #preferences-form .btn-secondary:focus, #preferences-form .btn-secondary:active {

        }
    #preferences-form #ty-message {
        border-radius: 20px;
        padding: 12px 20px 9px;
    }
        #preferences-form #ty-message.alert-success {
            background-color: #4FFF00;
            color: #6F7480;
        }
        #preferences-form #ty-message.alert-danger {
            background-color: #F46600;
            color: #FFF;
        }
    #preferences-form .required {
        color: #F46600;
    }
    #preferences-form .form-row {
        margin-bottom: 30px;
    }

    /* Read-only field distinction */
    #preferences-form input[readonly], #preferences-form input[readonly]:focus {
        background-color: #535760 !important;
        color: #cbcbcb!important;
    }
    #preferences-form .form-control, #preferences-form .custom-select {
        border: 1px solid #b4b9c2;
        background-color: #3E4047;
        /* padding: 20px 10px; */
        height: calc(1.5em + 20px);
        min-height: 40px;
        color: #fff;
        border-radius: 8px;
    }
    #preferences-form .form-control:focus, #preferences-form .custom-select:focus {
        border-color: #b4b9c2;
        box-shadow: none;
        outline: 0;
    }
    #preferences-form .custom-control-input:focus ~ .custom-control-label::before {
        box-shadow: none;
    }
        #preferences-container .box .form-control, #preferences-container .box .custom-select {
            background-color: #6f7480;
        }

    #preferences-form .custom-radio .custom-control-input:checked~.custom-control-label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234FFF00'/%3e%3c/svg%3e");
        background-size: 13px;
    }
    #preferences-form .custom-radio .custom-control-input:checked~.custom-control-label::before {
        border: 1px solid #4FFF00;
        background-color: #fff;
    }
    #preferences-form .custom-radio .custom-control-label::before {
        background-color: #B2B8C4;
        border: 4px solid #FFFFFF;
    }
    #preferences-form .custom-checkbox.custom-control {
        padding-left: 30px;
    }
    #preferences-form .custom-checkbox .custom-control-input:checked~.custom-control-label::after {
        background-size: 13px;
    }
    #preferences-form .custom-control-input:checked~.custom-control-label::before {
        background-color: #4FFF00;
        border-color: #4FFF00;
    }
    #preferences-form .custom-control-label::before, #preferences-form .custom-control-label::after {
        width: 20px;
        height: 20px;
        top: 0px;
        left: -30px;
    }
    #preferences-form .custom-checkbox .custom-control-label::before {
        background-color: #CBD0D8;
    }
    .custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label {
        color: #fff;
    }
    .custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before {
        border-color: #adb5bd;
    }

#preferences-container, .card {
    background-color: #3E4047;
    color: #ffffff!important;
    border: none;
}

#preferences-accordion-container {
    border-bottom: 1px solid #fff;
}

#sidebar-container {
    background-color: #1A1A1F;
    border: none;
    display: flex;
    flex-direction: column;
}
    #sidebar-container .swoosh-logo {
        flex: 1;
        display: flex;
    }
    #sidebar-container .swoosh-logo:after {
        content: "";
        flex: 1;
        background-image: url("https://go.octave.com/l/71752/2025-10-14/cx2zbg/71752/1760480033Pz3pRnLh/Unleash_Mark_linear_gradient_3_RGB.svg");
        background-repeat: no-repeat;
        background-position: 30% top;
        background-size: 180% auto;
    }
    #sidebar-container .list-group-item {
        border: none;
        background-color: #1A1A1F;
        color: #ffffff!important;
        border-radius: 0!important;
        padding: 20px;
        font-size: 22px;
    }
        #sidebar-container .list-group-item.active, #sidebar-container .list-group-item-action:focus, #sidebar-container .list-group-item-action:hover {
            background-color: #3E4047;
        }
        #sidebar-container .list-group-item::after, #preferences-container h1::after {
            border-bottom: 2px solid #ffffff;
            content: "";
            width: 150px;
            display: block;
            margin-top: 5px;
        }
            #sidebar-container .list-group-item.active::after, #sidebar-container .list-group-item-action:focus::after, #sidebar-container .list-group-item-action:hover::after, #preferences-container h1::after {
                border-color: #4FFF00;
            }

#preferences-container {
    padding: 40px;
}
    #preferences-container h1 {
        font-size: 38px;
    }
    #preferences-container .description {
        font-size: 18px;
    }
    #preferences-container .card-body {
        padding: 0;
    }
    #preferences-container .box {
        padding: 30px 30px 5px 30px;
        background-color: #6F7480;
        border-radius: 20px;
        border: 1px solid #b4b9c2;
        margin-bottom: 40px;
    }
        #preferences-container .box h4 {
            color: #CBD0D8;
        }

    #preferences-container .interests-collapsable {
        margin-top: 30px;
    }
        #preferences-container .interests-collapsable .interest-item {
            margin-bottom: 30px;
            /* padding-right: 30px; */
            position: relative;
            cursor: pointer;
        }
        #preferences-container .interests-collapsable .interest-item::after {
            display: none;
        }
            #preferences-container .interests-collapsable .interest-item .content {
                border-bottom: 1px solid #CBD0D8;
                padding-bottom: 20px;
            }
            #preferences-container .interests-collapsable .interest-item .content > [data-toggle="collapse"] {
                display: block;
                position: relative;
                padding-right: 30px;
                cursor: pointer;
            }
            #preferences-container .interests-collapsable .interest-item .content > [data-toggle="collapse"]::after {
                content: '';
                position: absolute;
                right: 10px;
                top: 8px;
                width: 10px;
                height: 10px;
                border-right: 2px solid #4FFF00;
                border-bottom: 2px solid #4FFF00;
                transform: rotate(45deg);
                transition: transform 0.3s ease;
                pointer-events: none;
            }
            #preferences-container .interests-collapsable .interest-item.expanded .content > [data-toggle="collapse"]::after {
                transform: rotate(-135deg);
            }
                #preferences-container .interests-collapsable .interest-item .content:last-child {
                    border-bottom: none;
                }
            #preferences-container .interests-collapsable .interest-item label {
                font-size: 18px;
                font-weight: bold;
            }
        #preferences-container .interests-collapsable .interest-dbop {
            margin-bottom: 20px;
        }
            #preferences-container .interests-collapsable .interest-dbop h4 {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
            }
            #preferences-container .interests-collapsable .interest-dbop .interest-dbop-item {
                margin-bottom: 20px;
            }
            #preferences-container .interests-collapsable .interest-dbop .title {
                font-size: 14px;
                font-weight: bold;
            }
            #preferences-container .interests-collapsable .interest-dbop .description {
                font-size: 14px;
            }
    #preferences-container .subscriptions-container .sub-description {
        font-size: 16px;
        padding-left: 7px;
        margin-top: 5px;
    }
    #preferences-container .subscriptions-container .subscription-item label.subscription-label {
        font-size: 20px;
        font-weight: bold;
    }


footer {
    /* border-top: 1px solid #fff; */
}

@media only screen and (max-width : 1200px) {
    #preferences-container .subscriptions-container .subscription-item  .custom-control.custom-radio {
        padding-left: 30px;;
    }
}

@media (max-width: 767.98px) {
    main > section.main {
        padding: 0;
    }

    #accordion-tabs {
        flex-direction: row;
    }
    #accordion-tabs .list-group-item {
        flex: 1;
        text-align: center;
        padding: 12px 8px;
        font-size: 16px;
    }
    #accordion-tabs .list-group-item::after {
        width: 60px;
        margin: 8px auto 0;
    }
    #sidebar-container {
        margin-bottom: 0 !important;
    }
}