:root {
    /* Colors */
    --primary-color: #077EE6;
    --primary-hover-color: #036CB1;
    --primary-light-color: #E1F3FD;
    --accent-color: #00A8E8;
    --background-color: #F9FAFB;
    --background-hover-color: #ECF7FF;
    --surface-color: #FFFFFF;
    --border-color: #E5E7EB;
    --border-2-color: #F5F5F5;
    --text-primary-color: #111827;
    --text-secondary-color: #6B7280;
    --success-color: #22C55E;
    --tag-bg-green-color: #E4F8EB;
    --warning-color: #F59E0B;
    --tag-bg-yellow-color: #FDF3E1;
    --error-color: #EF4444;
    --tag-bg-red-color: #FDE8E8;
    --tag-bg-blue-color: #E0F4FC;
    --link-color: #0582D2;
    --secondary-gray: #A0AEC0;
    --primary-btn-active-bg-color: #0944A2;
    --secondary-btn-active-bg-color: #C7DDFF;
    --gray-2-color: #E2E8F0;
    --rule-status-green-background-color: rgba(34, 197, 94, 0.12);
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Inter;
}

.page-with-sidebar {
    display: flex;
    align-items: stretch;    
}

.content-side {
    display: flex;
    flex-direction: column;
    width: calc(100% - 280px);
    height: 100vh;
    overflow: hidden;
}

.hidden {
    display: none! important;
}

.page-content {
    background-color: var(--background-color);
    flex-grow: 1;
    overflow: auto;
    padding: 40px 24px 60px 24px;
}

.page-header-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    color: var(--text-primary-color);
}

.page-header-subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-secondary-color);
    margin-bottom: 24px;
}

.tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 400;
}

.tag-s {
    font-size: 12px;
    line-height: 16px;
}

.tag-m {
    font-size: 14px;
    line-height: 20px;
}

.tag-l {
    font-size: 16px;
    line-height: 24px;
}

.tag.success {
    background-color: var(--tag-bg-green-color);
    color: var(--success-color);
}

.tag.error {
    background-color: var(--tag-bg-red-color);
    color: var(--error-color);
}

.tag.warning {
    background-color: var(--tag-bg-yellow-color);
    color: var(--warning-color);
}

.tag.info {
    background-color: var(--tag-bg-blue-color);
    color: var(--text-secondary-color);
}

.tag.process {
    background-color: var(--tag-bg-blue-color);
    color: var(--accent-color);
}

.flex {
    display: flex;
}

.no-select {
    user-select: none;
}

.disabled-block {
    pointer-events: none;
    opacity: 0.6;
    /* Все в оттенках серого */
    filter: grayscale(100%);
}

.no-border {
    border: none;
}