*{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    @page {
        size: A4 portrait;
        margin: 3cm 2cm 2cm 3cm;
    }

    .collapse > input[type="checkbox"] {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .print-break {
        break-before: always !important;
        page-break-before: always !important;
        display: block !important;
    }

    .print-avoid {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 600px !important;
    }

    .print-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .print-col {
        flex: 1 1 60% !important;
    }

    .print-side {
        flex: 1 1 35% !important;
        max-width: 35% !important;
    }

    .print-avoid {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .grid,
    .md\:grid,
    .md\:flex {
        display: block !important;
    }
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: rgb(156, 93, 201) !important;
    --bs-dropdown-link-active-color: white !important;
}
  
#loading-overlay {
    opacity: 1;
    transition: opacity 0.5s ease;
}
  
#loading-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12pt"]::before {
    content: "12" !important;
    font-size: 12pt !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14pt"]::before {
    content: "14" !important;
    font-size: 14pt !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16pt"]::before, 
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16pt"]::before {
    content: "16" !important;
    font-size: 16pt !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18pt"]::before {
    content: "18" !important;
    font-size: 18pt !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20pt"]::before {
    content: "20" !important;
    font-size: 20pt !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24pt"]::before {
    content: "24" !important;
    font-size: 24pt !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28pt"]::before {
    content: "28" !important;
    font-size: 28pt !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32pt"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32pt"]::before {
    content: "32" !important;
    font-size: 32pt !important;
}
  
#preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    background: #f0f0f0;
}