div[ng-controller="userPreferencesController"] .modal-header {
    background-color: var(--grey-white, #ffffff) !important;
    border-bottom: 1px solid var(--grey-g200, #EDEDEE) !important;
    padding: 20px 24px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div[ng-controller="userPreferencesController"] .modal-title,
div[ng-controller="userPreferencesController"] .modal-title * {
    font-size: 20px !important;
    font-weight: var(--fw-bold, 700) !important;
    color: var(--grey-black, #19171A) !important;
    margin: 0 !important;
}

div[ng-controller="userPreferencesController"] .modal-body {
    padding: 24px !important;
    background-color: var(--grey-white, #ffffff) !important;
}

div[ng-controller="userPreferencesController"] .cms-table,
div[ng-controller="userPreferencesController"] .cms-table td {
    background: transparent !important;
    border: none !important;
    padding: 6px 0 !important;
}

div[ng-controller="userPreferencesController"] .control-label {
    color: var(--grey-black, #19171A) !important;
    font-size: 14px !important;
    font-weight: var(--fw-bold, 600) !important;
    margin-bottom: 6px !important;
    display: inline-block;
}

div[ng-controller="userPreferencesController"] hr {
    border-top: 1px solid var(--grey-g200, #EDEDEE) !important;
    margin: 0 !important;
}

div[ng-controller="userPreferencesController"] input.form-control,
div[ng-controller="userPreferencesController"] select.form-control {
    background-color: var(--grey-white, #ffffff) !important;
    border: 1px solid var(--grey-g300, #E0E0E1) !important;
    border-radius: 8px !important;
    color: var(--grey-black, #19171A) !important;
    padding: 10px 14px !important;
    height: 44px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

div[ng-controller="userPreferencesController"] input.form-control:focus,
div[ng-controller="userPreferencesController"] select.form-control:focus {
    background-color: var(--grey-g100, #F5F5F5) !important;
    border-color: var(--orange-primary, #FF5C00) !important;
    outline: none !important;
}

div[ng-controller="userPreferencesController"] input::placeholder {
    color: var(--grey-g500, #9ca3af) !important;
}

div[ng-controller="userPreferencesController"] .btn-outline-primary {
    background-color: var(--orange-primary, #FF5C00) !important;
    border: 1px solid var(--orange-primary, #FF5C00) !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 10px 24px !important;
    font-weight: var(--fw-bold, 600) !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
}

div[ng-controller="userPreferencesController"] .btn-outline-primary:hover {
    background-color: var(--btn-primary-active, #db4f00) !important;
    border-color: var(--btn-primary-active, #db4f00) !important;
}

div[ng-controller="userPreferencesController"] .text-info {
    color: var(--grey-g600, #737578) !important;
    font-size: 12px !important;
    line-height: 1.4;
    padding-top: 8px !important;
}


div[ng-controller="userPreferencesController"] .checkbox-slider-info.checkbox-slider--b input:checked + span:before, 
.checkbox-slider-info.checkbox-slider--b-flat input:checked + span:before {
    background-color: var(--btn-primary) !important;
}

.modal-dialog:has(div[ng-controller="userPreferencesController"]) {
    margin: 30px auto !important;
}

.modal-content:has(div[ng-controller="userPreferencesController"]),
div[ng-controller="userPreferencesController"].modal-content {
    border: none !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background-color: var(--grey-white, #ffffff) !important;
}

div[ng-controller="userPreferencesController"] .modal-header {
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
}