/*
 * CREATE / UPDATE CONSISTENCY:
 * Independent Yii views share these presentation rules through .can-form-page;
 * no PHP partial or shared business component is required.
 *
 * SHARED FORM SYSTEM
 * Presentation contract for AO/MRO operational forms. Yii validation,
 * permissions, scenarios, routes and workflow transitions remain unchanged.
 */
.can-form-page {
    --form-primary: #1769e0;
    --form-cyan: #0b8fc7;
    --form-navy: #10233f;
    --form-muted: #687c98;
    --form-surface: #ffffff;
    --form-soft: #f6f9fd;
    --form-border: #d7e3ef;
    --form-danger: #dc3545;
    --form-success: #16834a;
    --form-warning: #d97706;
    --form-radius: 16px;
    --form-shadow: 0 12px 30px rgba(18, 52, 92, .07);
    min-height: 100vh;
    overflow-x: clip;
    color: var(--form-navy);
}

/* FORM WIDTH: keep operational forms readable without wasting desktop space. */
.can-form-page > .container,
.can-form-page > .container-fluid,
.can-form-page > .reply-shell,
.can-form-page > .update-request-container,
.can-form-page > .feedback-shell,
.can-form-page > .maintenance-appointment-container {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
}

/* FORM SECTIONS: one card language across creation, quotation, PO, CRS and disputes. */
.can-form-page :is(
    .page-header-card,
    .create-request-card,
    .reply-card,
    .update-request-card,
    .load-po-card,
    .crs-header-card,
    .crs-form-card,
    .feedback-card,
    .maintenance-appointment-card,
    .form-card,
    .form-section,
    .update-request-form-panel,
    .maintenance-form-box,
    .content-card
) {
    min-width: 0;
    border-color: var(--form-border) !important;
    border-radius: var(--form-radius) !important;
}

.can-form-page :is(
    .page-header-card,
    .create-request-header,
    .reply-header,
    .update-request-header,
    .load-po-header,
    .crs-header-card,
    .feedback-header,
    .maintenance-appointment-header
) {
    background: linear-gradient(135deg, #fff 0%, #eef5ff 100%) !important;
    box-shadow: var(--form-shadow) !important;
}

.can-form-page :is(
    .form-section,
    .update-request-form-panel,
    .crs-form-card,
    .feedback-card,
    .maintenance-form-box,
    .form-card
) {
    background: var(--form-surface) !important;
    box-shadow: 0 8px 24px rgba(18, 52, 92, .055) !important;
}

/* FORM TYPOGRAPHY: clear hierarchy with moderate weight. */
.can-form-page :is(
    h1,
    .page-title,
    .create-request-title,
    .reply-title,
    .update-request-title,
    .load-po-title,
    .crs-title,
    .feedback-title,
    .maintenance-appointment-title
) {
    color: var(--form-navy) !important;
    font-weight: 620 !important;
}

.can-form-page :is(
    .form-section-title,
    .section-title,
    .feedback-card-header h2,
    .maintenance-field-title
) {
    color: var(--form-navy) !important;
    font-weight: 600 !important;
}

.can-form-page :is(
    .subtitle-text,
    .page-subtitle,
    .create-request-subtitle,
    .reply-subtitle,
    .update-request-subtitle,
    .load-po-subtitle,
    .crs-subtitle
) {
    color: var(--form-muted) !important;
    font-weight: 400 !important;
    line-height: 1.45;
}

/* FORM CONTROLS: consistent height, focus state and validation feedback. */
.can-form-page .form-group {
    min-width: 0;
    margin-bottom: 16px;
}

.can-form-page .control-label,
.can-form-page label:not(.confirmation-label):not(.checkbox label) {
    margin-bottom: 7px;
    color: #263c57;
    font-size: 12px;
    font-weight: 600 !important;
}

.can-form-page :is(
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-select
) {
    width: 100%;
    max-width: 100%;
    border: 1px solid #cbd9e8 !important;
    border-radius: 10px !important;
    color: #172b46 !important;
    background-color: #fff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.can-form-page :is(input.form-control, select.form-control, .form-select) {
    min-height: 42px;
    padding: 9px 12px !important;
}

.can-form-page textarea.form-control {
    min-height: 112px;
    padding: 11px 12px !important;
    line-height: 1.5;
    resize: vertical;
}

.can-form-page :is(
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-select
):focus {
    border-color: #4c96ee !important;
    box-shadow: 0 0 0 3px rgba(37, 125, 236, .13) !important;
}

.can-form-page :is(input.form-control, textarea.form-control)::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.can-form-page .has-error :is(input.form-control, select.form-control, textarea.form-control),
.can-form-page :is(input.form-control, select.form-control, textarea.form-control).is-invalid {
    border-color: var(--form-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .09) !important;
}

.can-form-page :is(.help-block, .invalid-feedback, .field-error-message, .rating-error) {
    margin-top: 5px;
    color: var(--form-danger) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.35;
}

.can-form-page :is(.hint-block, .field-hint, .file-hint, .form-text, .field-message) {
    color: var(--form-muted) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.45;
}

/* REQUIRED MARKERS: style only markers already declared by the existing forms. */
.can-form-page label :is(.text-danger, .required-star, .required),
.can-form-page .control-label > :is(.text-danger, .required-star, .required) {
    margin-left: 2px;
    color: var(--form-danger) !important;
    font-weight: 650 !important;
}

/* SELECT2: support both Kartik and standard Select2 without changing selected values. */
.can-form-page :is(
    .select2,
    .select2-container,
    .select2-container--krajee,
    .select2-container--krajee-bs5
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.can-form-page :is(
    .select2-container--default .select2-selection--single,
    .select2-container--krajee .select2-selection,
    .select2-container--krajee-bs5 .select2-selection
) {
    min-height: 42px !important;
    border: 1px solid #cbd9e8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.can-form-page :is(
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--krajee .select2-selection__rendered,
    .select2-container--krajee-bs5 .select2-selection__rendered
) {
    min-width: 0;
    padding-left: 12px !important;
    padding-right: 38px !important;
    color: #172b46 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    text-overflow: ellipsis;
}

.can-form-page :is(
    .select2-container--default .select2-selection--single .select2-selection__arrow,
    .select2-container--krajee .select2-selection__arrow,
    .select2-container--krajee-bs5 .select2-selection__arrow
) {
    width: 36px !important;
    height: 40px !important;
}

.can-form-page :is(
    .select2-container--open .select2-selection,
    .select2-container--focus .select2-selection
) {
    border-color: #4c96ee !important;
    box-shadow: 0 0 0 3px rgba(37, 125, 236, .13) !important;
}

.can-form-page :is(
    .has-error .select2-selection,
    .select2-selection.input-error
) {
    border-color: var(--form-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .09) !important;
}

/* DATE AND TIME: keep the input and calendar control together at every width. */
.can-form-page :is(
    .input-group,
    .kv-datetime-picker,
    .date,
    .datetimepicker
) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.can-form-page .input-group {
    display: flex;
    flex-wrap: nowrap;
}

.can-form-page .input-group > .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.can-form-page :is(.input-group-addon, .input-group-text) {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #cbd9e8 !important;
    color: #41617f !important;
    background: #f3f7fb !important;
}

.can-form-page .row > [class*="col-"] {
    min-width: 0;
}

/* FORM GRIDS: paired fields remain aligned on desktop and stack on mobile. */
.can-form-page :is(
    .form-grid,
    .update-request-grid
) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.can-form-page :is(.form-grid, .update-request-grid) > .full-width {
    grid-column: 1 / -1;
}

/* FILE CONTROLS: preserve existing drag-and-drop scripts with a common visual state. */
.can-form-page :is(
    .custom-file-display,
    .file-uploader,
    .file-drop-zone,
    .upload-zone,
    .quote-upload-zone,
    .po-drop-zone,
    .crs-upload-zone
) {
    position: relative;
    max-width: 100%;
    border: 1.5px dashed #8dbbea !important;
    border-radius: 13px !important;
    background: #f8fbff !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.can-form-page :is(
    .custom-file-display,
    .file-uploader,
    .file-drop-zone,
    .upload-zone,
    .quote-upload-zone,
    .po-drop-zone,
    .crs-upload-zone
):hover {
    border-color: var(--form-primary) !important;
    background: #f1f7ff !important;
}

/* FILE STATES: existing JavaScript classes receive one consistent visual language. */
.can-form-page :is(
    .file-uploader.drag-over,
    .quote-upload-zone.is-dragover,
    .po-drop-zone.is-dragover,
    .crs-upload-zone.crs-upload-dragover
) {
    border-color: var(--form-primary) !important;
    background: #eaf4ff !important;
    box-shadow: 0 0 0 4px rgba(37, 125, 236, .12) !important;
    transform: translateY(-1px);
}

.can-form-page :is(
    .custom-file-display.is-valid,
    .quote-upload-zone.is-valid,
    .crs-upload-zone.crs-upload-has-file
) {
    border-style: solid !important;
    border-color: #52b788 !important;
    background: #f0fbf5 !important;
    box-shadow: 0 0 0 3px rgba(22, 131, 74, .08) !important;
}

.can-form-page :is(
    .custom-file-display.is-invalid,
    .has-error .custom-file-display,
    .has-error .file-uploader,
    .has-error .quote-upload-zone,
    .has-error .crs-upload-zone
) {
    border-color: var(--form-danger) !important;
    background: #fff7f7 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .08) !important;
}

.can-form-page :is(
    .custom-file-display,
    .selected-file,
    .crs-selected-file,
    .existing-quote-card,
    .current-file-box
) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* REQUIRED CONFIRMATIONS: unchecked remains neutral; checked becomes visibly compliant. */
.can-form-page :is(.acknowledgment-box, .crs-release-box) {
    min-width: 0;
    border: 1px solid #edcc72 !important;
    border-radius: 13px !important;
    background: #fffaf0 !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.can-form-page :is(.acknowledgment-box, .crs-release-box):has(input[type="checkbox"]:checked),
.can-form-page .crs-release-box.is-confirmed {
    border-color: #75c79a !important;
    background: #effbf4 !important;
    box-shadow: 0 0 0 3px rgba(22, 131, 74, .07) !important;
}

.can-form-page input[type="checkbox"]:not(.custom-file-native):not(.quote-file-input):not(.crs-file-native) {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    accent-color: var(--form-success);
    cursor: pointer;
}

.can-form-page :is(.confirmation-label, .crs-release-box .checkbox label, .crs-release-box .form-check label) {
    color: #3d4f65 !important;
    font-weight: 500 !important;
    line-height: 1.45;
    cursor: pointer;
}

/* FORM ACTIONS: predictable spacing while each view keeps its own buttons and routes. */
.can-form-page :is(
    .form-actions,
    .action-bar,
    .update-request-actions,
    .crs-actions,
    .feedback-actions,
    .maintenance-actions
) {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px !important;
}

.can-form-page :is(
    .form-actions,
    .action-bar,
    .update-request-actions,
    .crs-actions,
    .feedback-actions,
    .maintenance-actions
) :is(button, .btn, a) {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

.can-form-page :is(
    .form-actions,
    .action-bar,
    .update-request-actions,
    .crs-actions,
    .feedback-actions,
    .maintenance-actions
) :is(button, .btn)[disabled] {
    cursor: not-allowed !important;
    filter: grayscale(.18);
    opacity: .52 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* FORM MESSAGES: consistent feedback without changing Yii flash-message ownership. */
.can-form-page :is(.alert-success, .alert-danger, .alert-warning, .alert-info, .feedback-validation-alert, .crs-js-error) {
    max-width: 100%;
    padding: 11px 13px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.can-form-page .alert-success {
    border-color: #a7dfbf !important;
    color: #11643b !important;
    background: #effbf4 !important;
}

.can-form-page :is(.alert-danger, .feedback-validation-alert, .crs-js-error) {
    border-color: #f1b3ba !important;
    color: #9f2734 !important;
    background: #fff5f6 !important;
}

.can-form-page .alert-warning {
    border-color: #efd28a !important;
    color: #92520c !important;
    background: #fff9eb !important;
}

.can-form-page .alert-info {
    border-color: #add5f5 !important;
    color: #145a8d !important;
    background: #f1f8fe !important;
}

/* FORM LOADING: normalize every existing overlay and keep its current trigger. */
.can-form-page :is(#loading-spinner, .reply-loading, .crs-loading-overlay, .maintenance-loading-overlay) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10040 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px;
    background: rgba(8, 25, 47, .44) !important;
    backdrop-filter: blur(3px);
}

.can-form-page :is(.spinner-box, .loading-box, .crs-loading-card, .maintenance-loading-card) {
    width: min(360px, calc(100vw - 32px)) !important;
    min-height: 108px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 20px !important;
    border: 1px solid var(--form-border) !important;
    border-radius: 15px !important;
    color: var(--form-navy) !important;
    background: #fff !important;
    box-shadow: 0 22px 60px rgba(7, 31, 61, .22) !important;
}

.can-form-page :is(.spinner-box img, .maintenance-loading-card img) {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain;
}

.can-form-page :is(.loading-spinner, .crs-spinner-circle, .reply-btn-spinner, .btn-submit-feedback .spinner) {
    border-color: #dce9f7 !important;
    border-top-color: var(--form-primary) !important;
    animation: can-form-spin .72s linear infinite !important;
}

.can-form-page :is(.loading-title, .crs-loading-title, .maintenance-loading-title) {
    color: var(--form-navy) !important;
    font-weight: 600 !important;
}

.can-form-page :is(.loading-subtitle, .crs-loading-text, .maintenance-loading-text) {
    color: var(--form-muted) !important;
    font-weight: 400 !important;
}

@keyframes can-form-spin {
    to { transform: rotate(360deg); }
}

.can-form-page button:focus-visible,
.can-form-page a:focus-visible,
.can-form-page input:focus-visible,
.can-form-page select:focus-visible,
.can-form-page textarea:focus-visible,
.can-form-page [tabindex]:focus-visible {
    outline: 3px solid rgba(37, 125, 236, .24);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .can-form-page :is(.form-grid, .update-request-grid) {
        grid-template-columns: 1fr !important;
    }

    .can-form-page :is(.form-grid, .update-request-grid) > .full-width {
        grid-column: auto;
    }

    .can-form-page :is(
        .form-actions,
        .action-bar,
        .update-request-actions,
        .crs-actions,
        .feedback-actions,
        .maintenance-actions
    ) {
        align-items: stretch;
    }

    .can-form-page :is(
        .form-actions,
        .action-bar,
        .update-request-actions,
        .crs-actions,
        .feedback-actions,
        .maintenance-actions
    ) :is(button, .btn, a) {
        flex: 1 1 138px;
    }

    .can-form-page :is(
        .select2-container--default .select2-selection--single .select2-selection__rendered,
        .select2-container--krajee .select2-selection__rendered,
        .select2-container--krajee-bs5 .select2-selection__rendered
    ) {
        padding-right: 34px !important;
    }
}

@media (max-width: 420px) {
    .can-form-page :is(
        .form-actions,
        .action-bar,
        .update-request-actions,
        .crs-actions,
        .feedback-actions,
        .maintenance-actions
    ) :is(button, .btn, a) {
        width: 100%;
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .can-form-page *,
    .can-form-page *::before,
    .can-form-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
 * PRIORITÉ OPÉRATIONNELLE : présentation commune aux formulaires Create/Update.
 * Les couleurs différencient l'urgence sans modifier celles des statuts métier.
 * Le choix reste un vrai champ radio accessible au clavier.
 */
.can-form-page .operational-priority-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.can-form-page .operational-priority-card {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    color: #263b55;
    background: #fbfdff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.can-form-page .operational-priority-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.can-form-page .operational-priority-card:has(.operational-priority-input:focus-visible) {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 2px;
}

.can-form-page .operational-priority-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #45617e;
    background: #edf3f8;
    font-size: 17px;
}

.can-form-page .operational-priority-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.can-form-page .operational-priority-name {
    font-size: 13px;
    font-weight: 600;
}

.can-form-page .operational-priority-description {
    color: #687b91;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

.can-form-page .operational-priority-card.priority-aog.is-selected {
    border-color: #ef4444;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .08);
}

.can-form-page .operational-priority-card.priority-aog.is-selected .operational-priority-icon {
    color: #c62828;
    background: #fee2e2;
}

.can-form-page .operational-priority-card.priority-urgent.is-selected {
    border-color: #f59e0b;
    background: #fffbeb;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .09);
}

.can-form-page .operational-priority-card.priority-urgent.is-selected .operational-priority-icon {
    color: #b45309;
    background: #fef3c7;
}

.can-form-page .operational-priority-card.priority-routine.is-selected {
    border-color: #2196d3;
    background: #f0f9ff;
    box-shadow: 0 0 0 3px rgba(33, 150, 211, .08);
}

.can-form-page .operational-priority-card.priority-routine.is-selected .operational-priority-icon {
    color: #087eb8;
    background: #dff3fc;
}

/*
 * DÉLA DE RÉPONSE : panneau secondaire compact. Le marqueur rouge apparaît
 * seulement en AOG, car Urgent autorise volontairement l'absence de délai.
 */
.can-form-page .operational-response-panel {
    margin-top: 13px;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #f8fbfe;
}

.can-form-page .operational-response-panel[hidden] {
    display: none !important;
}

.can-form-page .operational-response-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: #1d3d61;
}

.can-form-page .operational-response-heading > i {
    color: #168ccc;
    font-size: 17px;
}

.can-form-page .operational-response-heading > div {
    display: grid;
    gap: 1px;
}

.can-form-page .operational-response-title {
    font-size: 13px;
    font-weight: 600;
}

.can-form-page .operational-response-rule {
    color: #6b7d92;
    font-size: 11px;
}

.can-form-page .operational-response-controls {
    display: grid;
    grid-template-columns: minmax(190px, .7fr) minmax(280px, 1.3fr);
    align-items: end;
    gap: 12px;
}

.can-form-page [data-response-label].is-required::after {
    content: ' *';
    color: #dc2626;
}

.can-form-page .operational-response-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-bottom: 1rem;
}

.can-form-page .operational-response-presets button {
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid #c8d8e8;
    border-radius: 9px;
    color: #31506f;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
}

.can-form-page .operational-response-presets button:hover {
    border-color: #1d91cf;
    color: #087eb8;
    background: #f0f9ff;
}

.can-form-page .operational-deadline-preview {
    min-height: 17px;
    color: #52708e;
    font-size: 11px;
}

@media (max-width: 820px) {
    .can-form-page .operational-priority-list,
    .can-form-page .operational-response-controls {
        grid-template-columns: 1fr;
    }

    .can-form-page .operational-response-presets {
        padding-bottom: 0;
    }
}

/* SHARED FORM CONFIRMATION: SweetAlert is rendered outside the form root. */
.swal2-popup.can-form-swal {
    width: min(360px, calc(100vw - 24px)) !important;
    padding: 20px !important;
    border: 1px solid #d7e3ef !important;
    border-radius: 15px !important;
    box-shadow: 0 22px 60px rgba(7, 31, 61, .22) !important;
}

.can-form-swal .swal2-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 4px auto 12px !important;
}

.can-form-swal .swal2-title {
    padding: 0 !important;
    color: #10233f !important;
    font-size: 20px !important;
    font-weight: 650 !important;
    line-height: 1.25;
}

.can-form-swal :is(.swal2-html-container, .swal2-content) {
    margin: 9px 0 0 !important;
    color: #4c6079 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45;
}

.can-form-swal .swal2-actions {
    width: 100%;
    display: flex !important;
    justify-content: center;
    gap: 10px !important;
    margin: 18px 0 0 !important;
}

/*
 * SWEETALERT VISIBLE ACTIONS:
 * Target only the configured confirm/cancel buttons. Styling every internal
 * button with !important made SweetAlert's hidden deny button ("No") visible.
 */
.can-form-swal .swal2-confirm,
.can-form-swal .swal2-cancel {
    min-width: 112px;
    min-height: 39px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px 13px !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.can-form-swal .swal2-confirm {
    color: #fff !important;
    background: #1769e0 !important;
}

.can-form-swal .swal2-cancel {
    color: #263c57 !important;
    background: #e8eef5 !important;
}

@media (max-width: 420px) {
    .can-form-swal .swal2-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .can-form-swal .swal2-confirm,
    .can-form-swal .swal2-cancel {
        width: 100%;
    }
}