:root {
    --message-details-title: 1.5rem;
    --close-btn-bg: #2e456b;
}

/* Fast track overrides */
#fasttrack-crm ul {
    min-width: 37.5rem !important;
}

#fasttrack-crm h4.title {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--font-sizes-body-xl) !important;
    font-family: var(--font-family) !important;
}

#fasttrack-crm p.date {
    color: var(--text-disabled) !important;
    font-family: var(--font-family) !important;
    font-size: 0.625rem !important;
}

#fasttrack-crm p.text {
    min-height: 1.25rem !important;
    max-height: 2.188rem !important;
    display: block !important;
    white-space: nowrap;
}

#fasttrack-crm p.text,
#fasttrack-crm .selected-message .message-body {
    color: var(--text-primary) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-sizes-body-sm) !important;
}

#fasttrack-crm .inbox-navigation-bar {
    background-color: var(--bg-modal-header) !important;
    padding-left: 30px !important;
}

/* remove non-existent logo so the title is aligned to the left*/
#fasttrack-crm .inbox-navigation-bar .logo {
    display: none !important;
}

#fasttrack-crm .selected-message .title,
#fasttrack-crm .inbox-navigation-bar h1.title {
    color: var(--side-bar-main-link) !important;
    font-size: 1.125rem !important;
}

#fasttrack-crm .inbox-navigation-bar h1.title {
    font-weight: var(--font-weight-semi-bold) !important;
    font-family: var(--font-family-alt) !important;
}

#fasttrack-crm .selected-message .title {
    font-weight: var(--font-weights-font-weight-700) !important;
    font-family: var(--font-family) !important;
}

#fasttrack-crm li.message {
    padding: 1.5rem 0.5rem 1.5rem 2.125rem !important;
}

#fasttrack-crm li.message .unread-badge {
    top: 1.813rem !important;
}

#fasttrack-crm li.message .text,
#fasttrack-crm li.message .date {
    padding-top: 0.25rem !important;
    margin-top: 0 !important;
}

#fasttrack-crm li.message.is_read {
    border-color: var(--fast-track-inbox-read);
    background-color: var(--white);
}

#fasttrack-crm li.message.is_unread {
    background-color: var(--fast-track-inbox-unread);
}

#fasttrack-crm li.message .delete-button {
    margin-top: 0.75rem;
    margin-right: 0.375rem;
}

#fasttrack-crm .selected-message .buttons-row .cta-button {
    background: var(--primary);
    font-weight: var(--font-weights-font-weight-700);
    font-size: var(--font-sizes-body-xl);
    font-family: var(--font-family);
    box-shadow: none;
    color: var(--white);
    height: 2.813rem;
    padding: 0.25rem 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    text-transform: capitalize !important;
}

#fasttrack-crm li.message .delete-button .trash-can {
    fill: var(--fast-track-delete-icon);
    filter: invert(100%) sepia(0%) saturate(3772%) hue-rotate(33deg)
        brightness(88%) contrast(93%);
}

#fasttrack-crm .selected-message .buttons-row .cta-button.secondary {
    background: var(--secondary);
}

#fasttrack-crm .small-notifications-wrapper {
    pointer-events: none;
}

#fasttrack-crm .small-notifications-wrapper * {
    pointer-events: auto;
}

#fasttrack-crm .no-messages {
    font-family: var(--font-family) !important;
}

#fasttrack-crm .no-messages > span {
    color: var(--text-disabled) !important;
}

#fasttrack-crm .close-btn:hover {
    transform: unset !important;
}

#fasttrack-crm .inbox .close-btn {
    font-family: var(--font-family);
    position: absolute;
    top: 18px;
    right: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background-color: var(--close-btn-bg) !important;
    border-radius: 4px !important;
}

#fasttrack-crm .inbox .back-button {
    font-family: var(--font-family) !important;
    color: var(--white);
}

#fasttrack-crm .inbox .back-button:before,
#fasttrack-crm .inbox .back-button:after {
    background-color: var(--white) !important;
}

#fasttrack-crm .inbox .contact-details {
    visibility: hidden !important;
}

#fasttrack-crm .selected-message .bottom-row {
    box-shadow: unset !important;
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
}

#fasttrack-crm .selected-message .footer-text {
    padding: 0 !important;
    font-family: var(--font-family) !important;
}

#fasttrack-crm .small-notifications-wrapper .title {
    font-family: var(--font-family);
    font-size: var(--font-sizes-body-xl) !important;
    margin-bottom: 0.5rem !important;
}

#fasttrack-crm .selected-message .scroll-area .title {
    font-size: var(--message-details-title) !important;
    margin: 0 !important;
    padding: 0.5rem 1rem;
    /*// Text colour of the content headings, see CLT-2299*/
    color: var(--text-primary) !important;
}

#fasttrack-crm .selected-message .scroll-area .message-body {
    font-size: var(--font-sizes-body-reg) !important;
    margin: 0 1rem 1rem 1rem !important;
}

#fasttrack-crm .selected-message .bottom-info {
    margin: 0 1rem 1rem 1rem !important;
    padding: 0.625rem 0 0 0 !important;
    font-family: var(--font-family) !important;
}

/*// Fast Track PUSH notification overrides*/
#fasttrack-crm .notification-small.ft-notification-type-message {
    padding: 16px;
}

#fasttrack-crm .notification-small.ft-notification-type-inbox {
    padding: 20px;
    div {
        width: 100%;
    }
}

#fasttrack-crm .small-notifications-wrapper .image-wrapper {
    max-width: 120px !important;
}

#fasttrack-crm .small-notifications-wrapper .preview {
    font-family: var(--font-family);
    font-size: var(--font-sizes-body-reg) !important;
    padding: 0 !important;
}

#fasttrack-crm .small-notifications-wrapper .close-btn {
    margin-top: 0;
    margin-right: 0;
    box-shadow: none;
    background: unset;
}

#fasttrack-crm .inbox .close-btn:before,
#fasttrack-crm .inbox .close-btn:after {
    background-color: var(--white) !important;
}

#fasttrack-crm .small-notifications-wrapper .close-btn:before,
#fasttrack-crm .small-notifications-wrapper .close-btn:after {
    background-color: var(--secondary-300) !important;
}

#fasttrack-crm .small-notifications-wrapper .show-message-button {
    background-color: var(--secondary) !important;
    font-weight: var(--font-weights-font-weight-700);
    font-size: var(--font-sizes-body-xl) !important;
    font-family: var(--font-family);
    box-shadow: none;
    color: var(--white);
    height: 2.813rem;
    width: 100%;
    padding: 0.25rem 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    text-transform: capitalize !important;
}

#fasttrack-crm .small-notifications-wrapper .show-message-button.secondary {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    margin-bottom: 0;
}