/*
 * Cloud9Modal design-system chrome.
 * A modal opts in with .cloud9-modal and renders its header through
 * Pages/Shared/_Cloud9Modal.cshtml.  All visual tokens live here.
 */
.cloud9-modal {
    --c9-modal-header-start: #008689;
    --c9-modal-header-end: #65d6d7;
    --c9-modal-header-border: #007477;
    --c9-modal-header-height: 68px;
    --c9-modal-header-padding: 9px 17px;
    --c9-modal-icon-size: 50px;
    --c9-modal-icon-radius: 8px;
    --c9-modal-icon-font-size: 23px;
    --c9-modal-title-size: 22px;
    --c9-modal-footer-padding: 14px 17px;
    --c9-modal-button-height: 40px;
    --c9-modal-button-radius: 8px;
    --c9-modal-primary: #008b8e;
    --c9-modal-primary-hover: #007679;
    --c9-modal-secondary-border: #cedbe5;
    --c9-modal-secondary-text: #36506d;
}

body .cloud9-modal .modal-header.cloud9-modal__header {
    display: flex;
    align-items: flex-start !important;
    gap: 10px;
    min-height: var(--c9-modal-header-height);
    padding: var(--c9-modal-header-padding) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--c9-modal-header-border) !important;
    background: linear-gradient(90deg, var(--c9-modal-header-start) 0%, var(--c9-modal-header-end) 100%) !important;
    color: #fff !important;
}

body .cloud9-modal .cloud9-modal__icon {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 var(--c9-modal-icon-size);
    align-items: center;
    justify-content: center;
    width: var(--c9-modal-icon-size);
    height: var(--c9-modal-icon-size);
    border-radius: var(--c9-modal-icon-radius);
    background: rgba(255, 255, 255, .7);
    color: #fff;
    font-size: var(--c9-modal-icon-font-size);
    line-height: 1;
}

body .cloud9-modal .cloud9-modal__heading { flex: 1 1 auto; min-width: 0; }
body .cloud9-modal .cloud9-modal__header-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .5rem; min-width: 0; }
body .cloud9-modal .cloud9-modal__header .modal-title {
    margin: 0;
    color: #fff !important;
    font-size: var(--c9-modal-title-size) !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    line-height: 1.12;
    letter-spacing: -.035em;
}
body .cloud9-modal .cloud9-modal__header .modal-title::before { display: none !important; content: none !important; }
body .cloud9-modal .cloud9-modal__subtitle {
    margin: 3px 0 2px;
    color: rgba(255, 255, 255, .84);
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.25 !important;
}
body .cloud9-modal .cloud9-modal__header .btn-close {
    box-sizing: border-box;
    flex: 0 0 var(--c9-modal-icon-size);
    width: var(--c9-modal-icon-size);
    height: var(--c9-modal-icon-size);
    min-width: var(--c9-modal-icon-size);
    min-height: var(--c9-modal-icon-size);
    max-width: var(--c9-modal-icon-size);
    max-height: var(--c9-modal-icon-size);
    margin: 0 0 0 auto;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, .72);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23092b67' stroke-linecap='round' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");
    background-size: 16px;
    filter: none !important;
    opacity: 1;
}
body .cloud9-modal .cloud9-modal__header .btn-close:hover { background-color: rgba(255, 255, 255, .9); }

body .cloud9-modal .modal-footer {
    align-items: center;
    min-height: 72px;
    padding: var(--c9-modal-footer-padding) !important;
    border-top: 1px solid #dbe6ee !important;
    background: #fff !important;
}
body .cloud9-modal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--c9-modal-button-height);
    padding: 8px 18px;
    border-radius: var(--c9-modal-button-radius);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
body .cloud9-modal .modal-footer :is(.btn-primary, .btn-success) { border-color: var(--c9-modal-primary) !important; background: var(--c9-modal-primary) !important; color: #fff !important; }
body .cloud9-modal .modal-footer :is(.btn-primary, .btn-success):hover { border-color: var(--c9-modal-primary-hover) !important; background: var(--c9-modal-primary-hover) !important; }
body .cloud9-modal .modal-footer :is(.btn-secondary, .btn-outline-secondary, .btn-light) { border-color: var(--c9-modal-secondary-border) !important; background: #fff !important; color: var(--c9-modal-secondary-text) !important; }
body .cloud9-modal .modal-footer :is(.btn-danger, .btn-outline-danger) { border-color: #dc5266 !important; background: #fff !important; color: #c9374f !important; }
body .cloud9-modal .modal-footer .btn-danger { background: #c9374f !important; color: #fff !important; }

@media (max-width: 767.98px) {
    .cloud9-modal { --c9-modal-header-height: 65px; --c9-modal-header-padding: 8px 13px; --c9-modal-icon-size: 45px; --c9-modal-icon-font-size: 21px; }
}