/* Shared, keyboard-accessible close control for every modal. */

.settings-dialog-header,

[data-truck-dialog-content] > .panel-header,

[data-user-dialog-content] > .panel-header {

    position: relative;

    padding-right: 64px;

}

.modal-close {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    padding: 0;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #737373;

    font: 30px/1 "Segoe UI", Arial, sans-serif;

    text-decoration: none;

    cursor: pointer;

}

.modal-close:hover,

.modal-close:active { background: transparent; color: #595959; border: 0; text-decoration: none; }

.modal-close:focus-visible { outline: 3px solid #397ecc; outline-offset: 2px; }

.modal-close:disabled { opacity: .5; cursor: not-allowed; }

#remove-title { padding-right: 36px; }

:is(.truck-dialog, .user-dialog) > p { padding-right: 64px !important; }

/* In modal views, use the top-right X for dismissal. Keep page fallbacks. */

dialog .settings-dialog-footer [data-close-settings],

dialog [data-truck-dialog-content] .panel-body [data-close-truck],

dialog [data-user-dialog-content] .panel-body [data-close-user] { display: none; }



/* Shared modal heading and close-button presentation. Text X avoids data-image dependencies. */

dialog :is(h1,h2), dialog .modal-title { text-transform: capitalize; }

.app-modal-header { position: relative; padding-right: 44px; min-height: 36px; }

.app-modal-header > .modal-close { top: 0; right: 0; flex: 0 0 36px; }

dialog .btn-close { background-image: none; display: inline-flex; align-items: center; justify-content: center; }

dialog .btn-close:empty::before { content: "\00d7"; font: 30px/1 "Segoe UI", Arial, sans-serif; color: #737373; }