.tab-content > .active {
            display: flex;
        }

        .ql-stroke {
            stroke: var(--phoenix-gray-900) !important;
        }

        .ql-fill {
            fill: var(--phoenix-gray-900) !important;;
        }

        .ql-snow .ql-picker {
            color: var(--phoenix-gray-900);
        }

        #pageContent {
            border-left: 0;
            border-right: 0;
        }

        #toolbar-container {
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
        }

        .pages-list-container {
            li {
                padding-right: 6px;
            }

            .delete-page {
                padding: 10px;
            }
        }

        .radio-wrapper{
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--phoenix-gray-200);
        }

        /* Base state when checkbox is unchecked */
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:not(:checked)) > *:not(.form-check) {
            opacity: 0.5;
            pointer-events: none;
        }

        /* Special handling for radio controls - keep them enabled when checkbox is checked */
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:checked) .radio-wrapper > .form-check-inline {
            opacity: 1;
            pointer-events: auto;
        }

        /* Handle radio wrapper content states */
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) > *:not(:first-child) {
            opacity: 0.5;
            pointer-events: none;
        }

        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) input:not([.wrapper-control]),
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) textarea,
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:not(:checked)) button {
            pointer-events: none;
        }

        /* Enable content when radio is checked */
        .radio-wrapper:has(> .form-check-inline > input[type="radio"]:checked) > * {
            opacity: 1;
            pointer-events: auto;
        }

        /* Ensure controlling radio buttons are always enabled when checkbox is checked */
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:checked) .radio-wrapper .form-check-inline > input[.wrapper-control],
        .checkbox-wrapper:has(> .form-check > input[type="checkbox"]:checked) .radio-wrapper .form-check-inline > label {
            opacity: 1;
            pointer-events: auto;
        }
        .footer-image-container, .header-image-container{
            .image-delete{
                display: none;
            }
        }

        .footer-image-container:has(img[src]),
        .header-image-container:has(img[src]){
            .image-delete{
                display: block;
            }
        }