.notification-channel-menu button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
}

.notification-channel-menu button small{
    color:#98a2b3;
    font-size:11px;
}

.notification-channel-menu button.is-disabled{
    opacity:.62;
    cursor:not-allowed;
}

.notification-menu-separator{
    height:1px;
    margin:6px 0;
    background:#edf2f7;
}

.notification-send-modal{
    width:min(920px, calc(100vw - 32px));
}

.notification-integration-modal{
    width:min(680px, calc(100vw - 32px));
}

.notification-send-body{
    display:grid;
    gap:12px;
}

.notification-send-body label{
    display:grid;
    gap:6px;
    color:#344054;
    font-size:13px;
}

.notification-send-body input,
.notification-send-body select,
.notification-send-body textarea{
    width:100%;
    min-height:38px;
    border:1px solid #d0d5dd;
    border-radius:8px;
    padding:8px 10px;
    box-sizing:border-box;
    font:inherit;
}

.notification-send-body textarea{
    min-height:170px;
    resize:vertical;
    line-height:1.45;
}

.notification-template-editor-body{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 280px;
    gap:14px;
    align-items:start;
}

.notification-template-editor-main{
    display:grid;
    gap:12px;
    min-width:0;
}

.notification-template-editor-main label{
    display:grid;
    gap:6px;
    color:#344054;
    font-size:13px;
}

.notification-template-editor-main input,
.notification-template-editor-main textarea{
    width:100%;
    min-height:38px;
    border:1px solid #d0d5dd;
    border-radius:8px;
    padding:8px 10px;
    box-sizing:border-box;
    font:inherit;
}

.notification-template-editor-main textarea{
    min-height:270px;
    resize:vertical;
    line-height:1.45;
}

.notification-vars-panel{
    max-height:390px;
    overflow:auto;
    padding:10px;
}

.notification-vars-panel h3{
    margin:0 0 8px;
    font-size:14px;
}

.notification-vars-panel .document-variables-list{
    gap:6px;
}

.notification-vars-panel .document-variable-group summary{
    min-height:34px;
}

.notification-vars-panel .document-variable-group-items{
    gap:5px;
    padding:6px;
}

.notification-integration-form{
    display:grid;
    gap:12px;
}

.notification-integration-form label{
    display:grid;
    gap:6px;
    color:#344054;
    font-size:13px;
}

.notification-integration-form label small{
    color:#7b8aa0;
    font-size:12px;
    line-height:1.35;
}

.notification-integration-form input,
.notification-integration-form textarea{
    width:100%;
    min-height:38px;
    border:1px solid #d0d5dd;
    border-radius:8px;
    padding:8px 10px;
    box-sizing:border-box;
    font:inherit;
}

.notification-integration-form textarea{
    min-height:84px;
    resize:vertical;
}

.notification-integration-check{
    display:flex !important;
    grid-template-columns:none;
    align-items:center;
    gap:8px !important;
}

.notification-integration-check input{
    width:16px;
    min-height:16px;
}

.notification-integration-note{
    padding:10px 12px;
    border:1px solid #d9e2f1;
    border-radius:8px;
    background:#f8fafc;
    color:#667085;
    font-size:12px;
    line-height:1.45;
}

.notification-template-list{
    display:grid;
    gap:10px;
}

.notification-template-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:start;
    padding:12px;
    border:1px solid #e4ebf5;
    border-radius:8px;
    background:#fff;
}

.notification-template-row pre{
    margin:6px 0 0;
    white-space:pre-wrap;
    color:#667085;
    font:13px/1.45 inherit;
}

.notification-template-actions,
.notification-integration-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.notification-integration-list{
    display:grid;
    gap:8px;
}

.notification-integration-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:64px;
    padding:12px 14px;
    border:1px solid #e4ebf5;
    border-radius:8px;
    background:#fff;
}

.notification-integration-main{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.notification-integration-icon{
    width:36px;
    height:36px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:#eef5ff;
    color:#1d4ed8;
    font-weight:700;
    font-size:16px;
}

.notification-integration-main strong,
.notification-integration-main span{
    display:block;
}

.notification-integration-main strong{
    color:#101828;
    font-size:15px;
}

.notification-integration-main span{
    margin-top:4px;
    color:#98a2b3;
    font-size:13px;
}

.notification-integration-main span.is-ok{
    color:#078847;
}

.notification-history-text{
    margin-top:6px;
    white-space:normal;
}

.notification-history-status{
    display:inline-flex;
    margin-left:6px;
    color:#078847;
    font-size:12px;
}

.timeline-marker-notification{
    background:#e0f2fe;
    color:#0369a1;
}

@media (max-width: 760px){
    .notification-template-row{
        grid-template-columns:1fr;
    }

    .notification-template-actions,
    .notification-integration-actions{
        justify-content:flex-start;
    }

    .notification-integration-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .notification-template-editor-body{
        grid-template-columns:1fr;
    }

    .notification-vars-panel{
        max-height:none;
    }
}