:root {
    --logo-cyan: #00c8f0;
    --logo-cyan-dark: #00a3c7;
    --logo-cyan-darker: #0088a8;
    --primary: var(--logo-cyan);
    --secondary: var(--logo-cyan-dark);
    --accent: #b8f0ff;
    --header-color: #ffffff;
    --header-branding-color: #ffffff;
    --header-bg: var(--logo-cyan);
    --header-link-color: #ffffff;
    --breadcrumbs-fg: #d9f6ff;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: var(--logo-cyan-dark);
    --link-fg: var(--logo-cyan-darker);
    --link-hover-color: #00667f;
    --link-selected-fg: var(--logo-cyan-dark);
    --button-bg: var(--logo-cyan-dark);
    --button-hover-bg: var(--logo-cyan-darker);
    --default-button-bg: var(--logo-cyan-darker);
    --default-button-hover-bg: var(--logo-cyan-dark);
    --selected-row: rgba(223, 247, 255, 0.42);
    --ms-surface-glass: rgba(255, 255, 255, 0.24);
    --ms-surface-glass-soft: rgba(255, 255, 255, 0.16);
    --body-bg: rgba(255, 255, 255, 0.2);
    --ms-surface-light: #ffffff;
    --ms-text-on-light: #0f172a;
    --ms-text-muted-on-light: #475569;
    --ms-accent-on-light: #00667f;
    --ms-surface-subtle: #f1f5f9;
    --ms-surface-subtle-hover: #e2e8f0;
    --close-button-bg: var(--ms-surface-subtle);
    --close-button-hover-bg: var(--ms-surface-subtle-hover);
}

body {
    background: linear-gradient(180deg, rgba(248, 253, 255, 0.35) 0%, rgba(236, 247, 252, 0.45) 100%);
}

body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, 50vw);
    height: min(680px, 72vh);
    background: url("../branding/magic_sands_icon_watermark.png") center / contain no-repeat;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

#container {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
    background: transparent;
}

#header,
#content,
#content-main,
.main > .content,
footer {
    position: relative;
    z-index: 1;
}

#main {
    flex: 1 0 auto;
    background: transparent;
}

.main > .content,
#content,
#content-main,
#changelist,
.changelist-form-container,
.change-form,
#content-related,
#changelist-form {
    background: transparent !important;
}

#nav-sidebar {
    z-index: 15;
    background: rgba(255, 255, 255, 0.52) !important;
}

#nav-sidebar.sticky {
    position: sticky;
    top: 0;
}

.main.shifted > #nav-sidebar {
    left: 0;
}

#changelist .actions,
#changelist #toolbar,
#changelist-search,
#changelist .paginator,
.actions,
.filtered .actions,
.object-tools,
#content .module,
#result_list,
#result_list .results,
.paginator,
.filtered .results,
.inline-group,
fieldset.module,
#content-related .module,
#changelist-filter,
.dashboard #content-main .module table,
#content-main.app-list .module table,
.module table,
.change-list .filtered,
#recent-actions-module {
    background: var(--ms-surface-glass) !important;
}

body.ms-admin-home #content-main.ms-admin-home-empty {
    min-height: 0;
}

body.ms-admin-home #content-related {
    margin-top: 0;
}

#recent-actions-module .actionlist .mini.quiet,
.ms-home-actions__meta {
    display: inline-block;
    margin-top: 0.15rem;
}

#content table tbody tr,
#result_list table tbody tr {
    background: rgba(255, 255, 255, 0.12) !important;
}

#content table tbody tr:nth-child(even),
#result_list table tbody tr:nth-child(even) {
    background: rgba(248, 252, 255, 0.18) !important;
}

#content table tbody tr.selected,
#result_list table tbody tr.selected {
    background: var(--selected-row) !important;
}

#content table thead th,
#result_list table thead th {
    background: rgba(232, 249, 255, 0.38) !important;
}

#content table tbody td,
#content table tbody th,
#result_list table tbody td,
#result_list table tbody th {
    background: transparent !important;
}

.module h2,
.module caption,
.inline-group h2,
#changelist-filter h2 {
    background: var(--logo-cyan-dark);
    color: #ffffff;
}

.form-row,
.submit-row,
.aligned .form-row,
fieldset.collapsed .form-row {
    background: transparent !important;
}

.change-form label,
.aligned label,
.form-row label {
    color: #0f172a;
    font-weight: 600;
}

.change-form .help,
.help,
.form-row .help {
    color: #475569;
}

.change-form input[type="text"],
.change-form input[type="email"],
.change-form input[type="url"],
.change-form input[type="number"],
.change-form input[type="tel"],
.change-form select,
.change-form textarea {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.75);
}

.change-form .readonly,
.change-form .form-row .readonly {
    color: #334155;
}

#header {
    justify-content: flex-start;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1.25rem;
    text-align: left;
}

#branding {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto 0 0;
    text-align: left;
}

#branding #site-name {
    margin: 0;
    text-align: left;
}

#branding #site-name a,
#branding #site-name a:visited {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.25;
    max-width: none;
    display: inline-block;
    text-align: left;
}

#user-tools {
    margin-left: auto;
    float: none;
}

#user-tools a,
#user-tools button {
    color: #ffffff;
}

#nav-sidebar .current-app .section,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    color: #ffffff;
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    background: var(--logo-cyan-dark);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    border-color: var(--logo-cyan-darker);
}

.button.default,
input[type="submit"].default,
input[type="button"].default,
.submit-row input.default,
a.button.default {
    background: var(--default-button-bg);
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active,
.button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:active,
a.button:focus,
a.button:hover {
    background: var(--logo-cyan-darker);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

a.button:link,
a.button:visited,
a.cancel-link,
a.cancel-link:link,
a.cancel-link:visited,
.submit-row a.cancel-link,
.submit-row a.cancel-link:link,
.submit-row a.cancel-link:visited,
#content .object-tools a.button,
#content .object-tools a.button:link,
#content .object-tools a.button:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

a.button:hover,
a.button:focus,
a.cancel-link:hover,
a.cancel-link:focus,
.submit-row a.cancel-link:hover,
.submit-row a.cancel-link:focus,
#content .object-tools a.button:hover,
#content .object-tools a.button:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

button.button,
input.button {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* ── Changelist: object-tools Add link, search, actions, table text ── */
.change-list #content-main {
    color: #0f172a;
}

.change-list #content h1 {
    color: #0f172a;
}

.object-tools {
    margin: 0 0 1rem;
    padding: 0;
    float: right;
}

.object-tools li {
    display: block;
    float: left;
    margin-left: 0.5rem;
    height: auto;
    list-style: none;
}

.object-tools a.addlink,
.object-tools a.addlink:link,
.object-tools a.addlink:visited,
#content .object-tools a.addlink,
#content .object-tools a.addlink:link,
#content .object-tools a.addlink:visited {
    display: inline-block;
    padding: 0.55rem 1rem;
    background: var(--logo-cyan-dark) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--logo-cyan-darker) !important;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.3;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.object-tools a.addlink:hover,
.object-tools a.addlink:focus,
#content .object-tools a.addlink:hover,
#content .object-tools a.addlink:focus {
    background: var(--logo-cyan-darker) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#changelist-search label img {
    vertical-align: middle;
}

#changelist-search input[type="text"],
#changelist-search #searchbar,
#toolbar #searchbar {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.75);
    border-radius: 4px;
}

#changelist-search input[type="submit"],
#changelist-search button[type="submit"],
#toolbar form input[type="submit"] {
    background: var(--logo-cyan-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--logo-cyan-darker) !important;
    border-radius: 4px;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}

#changelist-search input[type="submit"]:hover,
#changelist-search input[type="submit"]:focus,
#toolbar form input[type="submit"]:hover,
#toolbar form input[type="submit"]:focus {
    background: var(--logo-cyan-darker) !important;
    color: #ffffff !important;
}

#changelist .actions {
    color: #0f172a;
}

#changelist .actions label,
#changelist .actions span.action-counter,
#changelist .actions span.all,
#changelist .actions span.question,
#changelist .actions span.clear {
    color: #334155;
}

#changelist .actions select {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.75);
    border-radius: 4px;
}

#changelist .actions .button,
#changelist .actions button,
#changelist .actions input[type="submit"],
#changelist .actions button[type="submit"] {
    background: var(--logo-cyan-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--logo-cyan-darker) !important;
    border-radius: 4px;
    font-weight: 600;
}

#changelist .actions .button:hover,
#changelist .actions .button:focus,
#changelist .actions button:hover,
#changelist .actions button:focus,
#changelist .actions input[type="submit"]:hover,
#changelist .actions input[type="submit"]:focus {
    background: var(--logo-cyan-darker) !important;
    color: #ffffff !important;
}

#changelist #result_list table th,
#changelist #result_list table td,
#result_list table th,
#result_list table td {
    color: #0f172a;
}

#changelist #result_list table th a,
#changelist #result_list table td a,
#result_list table th a,
#result_list table td a {
    color: var(--logo-cyan-darker);
    font-weight: 600;
}

#changelist #result_list table th a:hover,
#changelist #result_list table td a:hover,
#result_list table th a:hover,
#result_list table td a:hover {
    color: var(--link-hover-color);
}

#changelist .paginator,
.paginator {
    color: #334155;
}

#changelist .paginator a,
.paginator a {
    color: var(--logo-cyan-darker) !important;
    font-weight: 600;
}

#changelist .paginator a:hover,
.paginator a:hover {
    color: var(--link-hover-color) !important;
}

#changelist-filter h3,
#changelist-filter details summary {
    color: #ffffff;
}

#changelist-filter a {
    color: var(--logo-cyan-darker);
    font-weight: 500;
}

#changelist-filter li.selected a {
    color: #ffffff;
    font-weight: 600;
}

/* Client management changelist — extra clarity on list pages */
.model-touroperator.change-list #content-main,
.model-travelagency.change-list #content-main,
.model-corporateclient.change-list #content-main,
.model-walkinclient.change-list #content-main {
    color: #0f172a;
}

.model-touroperator.change-list #result_list .row1,
.model-touroperator.change-list #result_list .row2,
.model-travelagency.change-list #result_list .row1,
.model-travelagency.change-list #result_list .row2,
.model-corporateclient.change-list #result_list .row1,
.model-corporateclient.change-list #result_list .row2,
.model-walkinclient.change-list #result_list .row1,
.model-walkinclient.change-list #result_list .row2 {
    color: #0f172a;
}

.model-touroperator.change-list .paginator,
.model-travelagency.change-list .paginator,
.model-corporateclient.change-list .paginator,
.model-walkinclient.change-list .paginator {
    font-weight: 500;
    color: #334155;
}

/* Outline / light buttons keep dark label text */
.button.button--outline,
.button.proposal-duplicate-button,
.button.hotel-proposal-picker__create,
.button.hotel-proposal-picker__edit,
.button.hotel-proposal-line__change-hotel,
.button.package-itinerary-create-hotel,
.button.package-itinerary-create-room,
.button.package-itinerary-edit-hotel,
.button.package-itinerary-add-room-row,
.button.package-itinerary-remove-room-row,
.button.package-itinerary-ai-draft,
.button.proposal-preview__duplicate,
.button.proposal-preview__print,
.button.proposal-costing-meals-add,
.button.proposal-costing-transportation-add,
.button.proposal-costing-activities-add,
.button.proposal-costing-hotel-extension-add,
.button.proposal-costing-hotel-extension__change-btn,
.button.proposal-costing-hotel-supplement__change-btn,
.button.proposal-costing-supplement-picker-cancel,
.button.proposal-costing-supplement-create-hotel,
.button.proposal-costing-supplement-create-room,
.button.proposal-hotel-room-category-add,
.button.proposal-hotel-room-category-remove,
.button[class*="__change-btn"] {
    color: #00667f !important;
    -webkit-text-fill-color: #00667f !important;
}

.button.button--outline:hover,
.button.button--outline:focus,
.button.proposal-duplicate-button:hover,
.button.proposal-duplicate-button:focus,
.button.hotel-proposal-picker__create:hover,
.button.hotel-proposal-picker__create:focus,
.button.hotel-proposal-picker__edit:hover,
.button.hotel-proposal-picker__edit:focus,
.button.hotel-proposal-line__change-hotel:hover,
.button.hotel-proposal-line__change-hotel:focus,
.button.package-itinerary-create-hotel:hover,
.button.package-itinerary-create-room:hover,
.button.package-itinerary-edit-hotel:hover,
.button.package-itinerary-add-room-row:hover,
.button.package-itinerary-remove-room-row:hover,
.button.package-itinerary-ai-draft:hover,
.button.proposal-preview__duplicate:hover,
.button.proposal-preview__print:hover,
.button.proposal-costing-meals-add:hover,
.button.proposal-costing-transportation-add:hover,
.button.proposal-costing-activities-add:hover,
.button.proposal-costing-hotel-extension-add:hover,
.button[class*="__change-btn"]:hover {
    color: #00667f !important;
    -webkit-text-fill-color: #00667f !important;
}

/* Hotel confirmation: outline remove control (light fill, dark/rose text) */
.button.hotel-stay-remove-room-category,
.button.hotel-stay-remove-room-category:link,
.button.hotel-stay-remove-room-category:visited,
.button.hotel-stay-remove-room-category:hover,
.button.hotel-stay-remove-room-category:focus {
    background: #ffffff !important;
    color: #9f1239 !important;
    -webkit-text-fill-color: #9f1239 !important;
    border: 1px solid rgba(190, 24, 93, 0.4) !important;
}

a:link:not(.button):not(.cancel-link):not(.proposal-section-nav__link),
a:visited:not(.button):not(.cancel-link):not(.proposal-section-nav__link) {
    color: var(--logo-cyan-darker);
}

.breadcrumbs {
    background: var(--breadcrumbs-bg) !important;
    color: var(--breadcrumbs-fg) !important;
}

.breadcrumbs a,
.breadcrumbs a:link,
.breadcrumbs a:visited {
    color: var(--breadcrumbs-link-fg) !important;
    -webkit-text-fill-color: var(--breadcrumbs-link-fg) !important;
    text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: underline;
}

#footer {
    margin-top: auto;
    padding: 0;
    background: transparent;
}

.ms-admin-footer {
    margin: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(219, 234, 254, 0.65);
    background: rgba(255, 255, 255, 0.28);
}

.ms-admin-footer__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--logo-cyan-darker);
    letter-spacing: 0.02em;
}

.ms-admin-footer__subtitle {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: #475569;
}

.ms-admin-footer__meta {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
}

@media (max-width: 767px) {
    body::before {
        width: min(320px, 76vw);
        height: min(460px, 52vh);
        opacity: 0.18;
    }
}

.special-service-confirmation-inline {
    margin-top: 1.25rem;
}

.special-service-confirmation-inline .inline-section-heading {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0891b2;
    text-transform: uppercase;
}

.special-service-confirmation-inline textarea {
    min-width: 12rem;
    min-height: 2.5rem;
}

.special-service-confirmation-inline input[name$="-service_name"] {
    min-width: 10rem;
    text-transform: uppercase;
}

.car-rental-confirmation-inline {
    margin-top: 1.25rem;
}

.car-rental-confirmation-inline .inline-section-heading {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0891b2;
    text-transform: uppercase;
}

.car-rental-confirmation-inline input[name$="-vehicle_brand"],
.car-rental-confirmation-inline input[name$="-vehicle_name"] {
    min-width: 8rem;
    text-transform: uppercase;
}

.car-rental-confirmation-inline input[name$="-pickup_location"],
.car-rental-confirmation-inline input[name$="-dropoff_location"] {
    min-width: 12rem;
}

.car-rental-confirmation-inline .transfer-location-field > input[type="text"] {
    min-width: 10em;
}

.car-rental-confirmation-inline td.car-rental-mileage-custom-hidden {
    opacity: 0.35;
}

.car-rental-confirmation-inline td.car-rental-mileage-custom-hidden input {
    visibility: hidden;
}

.car-rental-confirmation-inline input.car-rental-mileage-custom-input {
    min-width: 10rem;
}

.car-rental-confirmation-inline select[name$="-insurance"],
.car-rental-confirmation-inline select[name$="-fuel"],
.car-rental-confirmation-inline select[name$="-mileage"] {
    min-width: 8rem;
}

.car-rental-confirmation-inline input[name$="-duration_days"] {
    width: 3.5em;
    min-width: 3.5em;
    text-align: center;
    background: var(--darkened-bg, #f8f8f8);
    cursor: default;
}

.car-rental-confirmation-inline input.voucher-time-input {
    width: 6em;
}

/* Hide Django tabular inline row labels — values belong in the form fields only. */
.flight-details-inline th.original,
.flight-details-inline td.original,
.hotel-confirmation-inline th.original,
.hotel-confirmation-inline td.original,
.emergency-contact-inline th.original,
.emergency-contact-inline td.original,
.transfer-confirmation-inline th.original,
.transfer-confirmation-inline td.original,
.guide-confirmation-inline th.original,
.guide-confirmation-inline td.original,
.special-service-confirmation-inline th.original,
.special-service-confirmation-inline td.original,
.car-rental-confirmation-inline th.original,
.car-rental-confirmation-inline td.original,
.service-confirmation-inline th.original,
.service-confirmation-inline td.original {
    display: none;
}

/* Hotel confirmation: size columns to content — do not %stretch ROOM */
.hotel-confirmation-inline .inline-group,
.hotel-confirmation-inline .tabular {
    overflow-x: auto;
}
.hotel-confirmation-inline table {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
}
.hotel-confirmation-inline td.field-hotel {
    min-width: 22em;
    width: 24em;
    max-width: 32em;
}
.hotel-confirmation-inline td.field-hotel .related-widget-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 20em;
    max-width: 32em;
}
.hotel-confirmation-inline td.field-hotel .related-widget-wrapper .select2-container,
.hotel-confirmation-inline td.field-hotel .select2-container {
    flex: 1 1 18em;
    min-width: 18em !important;
    max-width: 32em !important;
    width: 22em !important;
}
.hotel-confirmation-inline th.column-room_category,
.hotel-confirmation-inline td.field-room_category {
    width: 0 !important;
    min-width: 0 !important;
    max-width: none;
    white-space: nowrap !important;
}
.hotel-confirmation-inline td.field-room_category .related-widget-wrapper,
.hotel-confirmation-inline td.field-room_category .voucher-quick-create-wrap {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: auto !important;
    max-width: none;
}
.hotel-confirmation-inline td.field-room_category select,
.hotel-confirmation-inline td.field-room_category .select2-container,
.hotel-confirmation-inline td.field-room_category .voucher-quick-create-wrap .select2-container {
    flex: 0 0 16em !important;
    min-width: 16em !important;
    max-width: 16em !important;
    width: 16em !important;
}
.hotel-confirmation-inline th.column-units,
.hotel-confirmation-inline td.field-units {
    width: 0 !important;
    white-space: nowrap !important;
}
.hotel-confirmation-inline td.field-units input {
    width: 3.5em !important;
    min-width: 3.5em !important;
    max-width: 4em !important;
}

/* Django admin date/time popups — light surfaces, dark readable text. */
.calendarbox,
.clockbox {
    z-index: 1100 !important;
    background: var(--ms-surface-light) !important;
    color: var(--ms-text-on-light) !important;
    border: 1px solid rgba(148, 163, 184, 0.55) !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.calendarbox .calendar table,
.clockbox .timelist {
    background: var(--ms-surface-light) !important;
    color: var(--ms-text-on-light) !important;
}

.calendar caption,
.calendarbox h2 {
    background: rgba(0, 200, 240, 0.18) !important;
    color: var(--ms-text-on-light) !important;
}

.calendar th {
    background: #f8fafc !important;
    color: var(--ms-text-muted-on-light) !important;
}

.calendar td a,
.timelist a {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}

.calendar td.selected a {
    background: var(--logo-cyan-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.calendar td a:hover,
.calendar td a:focus,
.timelist a:hover,
.timelist a:focus {
    background: rgba(0, 163, 199, 0.14) !important;
    color: var(--ms-accent-on-light) !important;
    -webkit-text-fill-color: var(--ms-accent-on-light) !important;
}

.calendar-shortcuts {
    background: var(--ms-surface-light) !important;
    color: var(--ms-text-muted-on-light) !important;
}

.calendar-shortcuts a,
.calendarbox .calendar-shortcuts a:link,
.calendarbox .calendar-shortcuts a:visited {
    color: var(--ms-accent-on-light) !important;
    -webkit-text-fill-color: var(--ms-accent-on-light) !important;
}

.calendar-cancel,
.clock-cancel {
    background: var(--ms-surface-subtle) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.45) !important;
    color: var(--ms-text-on-light) !important;
}

.calendar-cancel:hover,
.calendar-cancel:focus,
.clock-cancel:hover,
.clock-cancel:focus {
    background: var(--ms-surface-subtle-hover) !important;
}

.calendar-cancel a,
.clock-cancel a,
.calendarbox .calendar-cancel a:link,
.calendarbox .calendar-cancel a:visited,
.clockbox .clock-cancel a:link,
.clockbox .clock-cancel a:visited {
    color: var(--ms-text-on-light) !important;
    -webkit-text-fill-color: var(--ms-text-on-light) !important;
    font-weight: 600;
}

.calendar-cancel a:hover,
.calendar-cancel a:focus,
.clock-cancel a:hover,
.clock-cancel a:focus {
    color: var(--ms-accent-on-light) !important;
    -webkit-text-fill-color: var(--ms-accent-on-light) !important;
}