@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;900&family=Tektur:wght@500&family=Tektur:wdth,wght@87.5,500&display=swap');

img.doupic {
	width: 100%;
	max-width: 900px;
}
html, body {
	background-color: #1C0C03;
	background-image: url(png/background.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 0;
}
@supports ( -webkit-touch-callout : none) {
    html, body { background-attachment:scroll }
}
@supports not ( -webkit-touch-callout : none) {
    html, body { background-attachment: fixed; }
}
.g-page { background: none!important; }
.is_desktop .g-page, .is_desktop body>#container { box-shadow: none!important; }
/* .b-post-info, .b-typo { color: white!important; }  */
.b-post-info .author .name a,
.b-post-info .author .name a:visited {
    /* color: #FFD7A2; */
    color: #715841;
}
.b-post-info .author .name a:hover {
    color: #f93703;
}
.is_desktop .g-right-shadowed { background: none!important; }
.tg-promo span { background: #e6f5fb22!important; }
/* .tg-promo span a:link,
.tg-promo span a:visited {
    color: #FFD7A2;
}
.tg-promo span a:hover {
    color: #f93703;
} */
/* .b-footer { color: white!important; }
.b-footer a,
.b-footer a:visited {
    color: #FFD7A2;
}
.b-footer a:hover {
    color: #f93703;
} */

.b-dou-vacancies {
    background: none;
    /* border: 8px solid #FFD7A2; */
    border: 8px solid #d2b38b;
    /* color: #ffffff; */
}
.b-dou-vacancies a, 
.b-dou-vacancies a:visited {
    /* color: #FFD7A2; */
    color: #715841;
}
.b-dou-vacancies a:hover {
    color: #f93703;
}
/* .b-dou-vacancies .vacancies-list li .company { color: #FFD7A2; } */
/* .b-dou-vacancies .vacancies-list li span { color: #ffffff!important; } */
/* .b-dou-vacancies, .b-vacancy-page .b-vacancy {
    border-color: #FFD7A224;
} */
.b-block_news { border-color: #FFD7A224; }
.b-block_news h3 { background-color: #FFD7A224; }
.b-block_news a, 
.b-block_news a:visited {
    color: #FFD7A2!important;
}
.b-block_news a:hover {
    color: #f93703!important;
}

.b-adv-events { color: white; }
.b-adv-events a:not(.add-button-sidebar), 
.b-adv-events a:not(.add-button-sidebar):visited {
    color: #3F3021!important;
}
.b-adv-events a:not(.add-button-sidebar):hover {
    color: #f93703!important;
}
.b-comments { color: white; }
.b-comments a, .b-comments a:visited { color: #3F3021!important; }
.b-comments a:hover { color: #f93703!important; }
.comments-head h3 {
    color: #3F3021;
}
.comments-head .comment-subscribe>span { 
    color: #3F3021;
    border-bottom: 1px dashed #3F3021;
}
.b-similar-posts h4 { color: #3F3021; }
.b-similar-posts a, .b-similar-postss a:visited { color: #3F3021!important; }
.b-similar-postss a:hover { color: #f93703!important; }
.comments-head .fixed-menu > span > span {
    background-color: #ffe54d!important;
    color: #3F3021;
    mix-blend-mode: multiply;
}



.b-typo h2 .anchor { 
    /* color: white; */
    color: #715841;
}
.b-typo h2 .anchor:hover { 
    /* color: #f7ce94;  */
    color: #2F1C10; 
}

@media screen and (max-width:960px) {
    body {
        min-width: 400px;
    }
    .g-page { overflow-x: hidden !important; }
}


/* COMMENTS */

.b-comments .comment .support a:link { border-bottom-color: #3F3021; }
.b-comments .comment .b-post-author a.comment-link:link { border-bottom-color: #3F3021; }
.comments-head a.navigation-comment:link { border-bottom-color: #3F3021; }
.b-comments-form .list-tags { color: #3F3021; opacity: .8; }
.b-comments-form .send .hint { color: #3F3021; }
.b-comments-form .send .b-buttons .form-button {
    background-color: #FFD7A2;
    border: none;
    padding: 2px 7px 3px;
    border-radius: 3px;
    color: #3F3021;
}
.b-comments-form .send .b-buttons .form-button.disabled {
    color: #60473499;
}
.b-comments-form .textarea-wrap textarea {
    border-color: #3E2E2299;
    background-color: #2F1C1033;
    color: #fff;
}
.comments-head .fixed-menu {
    border-bottom-color: #3F3021;
}

#gd-portrait-map {
    overflow:hidden;
    background:#3d2416; 
    color:var(--ink); 
    font-family: Georgia, 'Times New Roman', serif !important;

    :root {
        --ink:#2e1b10;
        --wood:#5d321d;
        --gold:#d9ad45;
        --paper:#ecd39d;
        --paper-dark:#c78b46;
        --red:#9e3024;
        --green:#4c6a38;
    }
    * { box-sizing:border-box; }
    
    li, p { line-height: 120%; }
    button { font:inherit; }
    .dashboard { display:grid; grid-template-columns:2fr 1fr; width:100vw; height:100dvh; min-height:620px; overflow:hidden; border:8px solid #3d2416; background:#d4ad6e; box-shadow:inset 0 0 0 2px #e8c77f, inset 0 0 48px rgba(61,36,22,.55); }
    .map-column { position:relative; isolation:isolate; overflow:hidden; min-width:0; border-right:5px solid var(--wood); background:#c59450; }
    .map-column::after { content:''; position:absolute; z-index:4; inset:0; pointer-events:none; box-shadow:inset 0 0 42px 10px rgba(48,25,12,.35), inset 0 0 0 2px rgba(255,230,167,.35); }
    .map-art { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; pointer-events:none; }
    .map-title { position:absolute; z-index:8; top:clamp(13px,2.4vh,25px); left:clamp(14px,2.4vw,30px); margin:0; color:#fae6aa; font-size:clamp(10px,.9vw,14px); font-variant:small-caps; letter-spacing:.14em; text-shadow:0 2px 1px #482412, 0 0 12px rgba(60,28,10,.85); }
    .city { position:absolute; z-index:5; width:var(--city-size, 9.5%); padding:0; border:0; background:none; cursor:pointer; transform:translate(-50%,-100%); transition:filter .22s ease, transform .22s ease; }
    .city--kyiv { width:15.5%; }
    .city img { display:block; width:100%; height:auto; filter:drop-shadow(0 4px 4px rgba(39,21,10,.48)); pointer-events:none; }
    .city::before { content:''; position:absolute; left:50%; bottom:2%; width:48%; aspect-ratio:1; transform:translate(-50%, 30%); border:1px dashed rgba(255,237,168,.9); border-radius:50%; box-shadow:0 0 0 2px rgba(88,46,21,.38), 0 0 12px rgba(255,210,104,.65); opacity:.56; transition:all .2s ease; }
    .city::after { content:attr(data-label); position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); min-width:max-content; padding:2px 7px; border:1px solid #71401f; border-radius:2px; color:#352012; background:rgba(242,214,153,.92); box-shadow:0 2px 3px rgba(47,25,10,.38); font-family:Georgia,serif; font-size:clamp(9px,.72vw,12px); font-weight:bold; letter-spacing:.04em; opacity:0; transition:opacity .2s ease; }
    .city:hover, .city:focus-visible, .city.active { z-index:7; outline:none; filter:drop-shadow(0 0 13px rgba(255,217,117,.9)); }
    .city:hover { transform:translate(-50%,-100%) scale(1.08); }
    .city:hover::before, .city:focus-visible::before, .city.active::before { width:70%; opacity:1; border-style:solid; box-shadow:0 0 0 3px rgba(107,54,19,.4), 0 0 20px rgba(255,213,93,.92); }
    .city:hover::after, .city:focus-visible::after, .city.active::after { opacity:1; }
    .route { position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
    .route path { fill:none; stroke:#71421f; stroke-width:2px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-dasharray:7 9; filter:drop-shadow(0 1px 1px rgba(255,230,160,.8)); }
    .warriors { position:absolute; z-index:5; left:79%; top:49%; width:14%; transform:translate(-50%,-50%); pointer-events:none; user-select:none; }
    .warriors img { display:block; width:100%; height:auto; filter:drop-shadow(0 3px 3px rgba(39,21,10,.45)); }
    .rider { position:absolute; z-index:9; display:grid; place-items:center; width:28px; height:28px; transform:translate(-50%,-190%); border:1px solid #f2d47b; border-radius:50%; color:#f7dda0; background:#572d1d; box-shadow:0 2px 5px rgba(45,20,10,.75), 0 0 0 2px rgba(60,29,13,.5); font-size:20px; line-height:1; pointer-events:none; text-shadow:0 1px 1px #33170b; }
    .rider::after { content:''; position:absolute; bottom:-5px; left:50%; width:7px; height:7px; transform:translateX(-50%) rotate(45deg); background:#572d1d; border-right:1px solid #f2d47b; border-bottom:1px solid #f2d47b; }
    .panel { position:relative; display:flex; min-width:0; height:100%; padding:clamp(15px,2.5vh,30px) clamp(15px,2vw,28px); overflow:hidden; background:linear-gradient(105deg,rgba(247,226,173,.98),rgba(222,181,108,.98)), repeating-linear-gradient(0deg,rgba(89,44,20,.035) 0 1px,transparent 1px 4px); box-shadow:inset 16px 0 28px rgba(73,38,18,.17); }
    .city-data { position:relative; z-index:1; display:flex; flex-direction:column; width:100%; min-height:0; gap:clamp(9px,1.35vh,15px); transition:opacity .16s ease, transform .16s ease; }
    .city-data.is-changing { opacity:0; transform:translateY(6px); }
    .kicker { margin:0 0 3px; color:#85502b; font-size:clamp(9px,.7vw,12px); font-weight:bold; letter-spacing:.13em; text-transform:uppercase; }
    .headline { padding-bottom:clamp(8px,1.2vh,13px); border-bottom:2px solid rgba(96,49,26,.45); }
    h1 { margin:0; color:#8d2c21; font-size:clamp(28px,3.1vw,48px); line-height:.88; font-variant:small-caps; letter-spacing:.025em; text-shadow:0 1px 0 #ffe7a9; }
    .specialty { margin:8px 0 0; color:#50301d; font-size:clamp(12px,1.15vw,17px); font-style:italic; line-height:1.16; }
    .specialty strong { color:#763324; }
    .metrics { display:grid; grid-template-columns:minmax(90px,.84fr) minmax(0,1.16fr); gap:9px; }
    .card { min-width:0; padding:clamp(7px,1.1vh,11px); border:1px solid rgba(91,48,23,.55); border-radius:3px; background:rgba(255,242,203,.4); box-shadow:0 2px 5px rgba(86,44,20,.12); }
    .card-label, .section-label { display:flex; align-items:center; gap:5px; margin:0 0 5px; color:#7b4729; font-size:clamp(9px,.68vw,11px); font-weight:bold; letter-spacing:.08em; text-transform:uppercase; }
    .icon { display:inline-grid; width:17px; height:17px; place-items:center; border-radius:50%; color:#ffe9aa; background:#76402a; font-size:12px; font-family:Arial,sans-serif; }
    .icon svg { width:12px; height:12px; fill:currentColor; }
    .icon--coins { background:linear-gradient(145deg,#8c4829,#6c3523); color:#ffe08a; }
    .icon--fire { background:linear-gradient(145deg,#9c3a25,#6c281e); color:#ffe29a; }
    .salary { color:#472718; font-family:'Times New Roman', Times, serif; font-size:clamp(22px,2.25vw,35px); font-weight:bold; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1, 'tnum' 1; line-height:1; text-shadow:0 1px #fff0c4; }
    .family-list { display:grid; gap:2px; color:#4e2b1a; font-size:clamp(10px,.85vw,13px); line-height:1.1; }
    .family-list span { display:flex; justify-content:space-between; gap:7px; } .family-list b { color:#8b3022; white-space:nowrap; }
    .population { min-height:0; }
    .section-label { margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid rgba(91,48,23,.35); font-size:clamp(10px,.76vw,12px); }
    .roles { display:grid; gap:clamp(3px,.48vh,5px); }
    .role { display:grid; grid-template-columns:minmax(92px,1fr) 35px; gap:6px; align-items:center; color:#4e2a19; font-size:clamp(10px,.85vw,13px); line-height:1; }
    .role-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:bold; }
    .role-value { color:#8c2f22; text-align:right; font-weight:bold; font-variant-numeric:tabular-nums; }
    .bar { grid-column:1 / -1; height:5px; overflow:hidden; border:1px solid rgba(91,48,23,.26); border-radius:99px; background:rgba(108,61,31,.13); }
    .bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d6ad46,#7a3c27); }
    .morale { padding-top:clamp(2px,.35vh,4px); }
    .morale-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
    .morale-top .section-label { margin:0; padding:0; border:0; } .burnout { color:#9a2d20; font-size:clamp(19px,1.65vw,27px); font-weight:bold; line-height:1; }
    .burnout-bar { height:11px; overflow:hidden; border:1px solid rgba(104,44,24,.5); border-radius:99px; background:rgba(101,45,23,.13); box-shadow:inset 0 1px 2px rgba(80,37,17,.2); }
    .burnout-bar i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e7a23d 0%,#d86127 52%,#9a261e 100%); transition:width .45s ease-out; }
    .demography { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:clamp(62px,5.4vw,82px); overflow:hidden; border:1px solid rgba(93,48,23,.48); border-radius:10px; box-shadow:inset 0 1px 2px rgba(80,37,17,.2), 0 2px 5px rgba(87,47,20,.11); }
    .demography-bar { position:absolute; inset:0; display:flex; gap:1px; overflow:hidden; border-radius:inherit; background:rgba(96,48,25,.15); }
    .demography-bar i { display:block; height:100%; transition:width .45s ease-out; }
    .demography-bar .male-fill { width:59.6%; background:linear-gradient(90deg,#6f8581,#506a69); }
    .demography-bar .female-fill { width:40.4%; background:linear-gradient(90deg,#80606a,#674954); }
    .gender { position:relative; z-index:1; display:flex; align-items:center; gap:8px; padding:7px 9px; color:#fffaf0; text-shadow:0 1px 2px rgba(59,25,18,.52); }
    .gender.female { flex-direction:row-reverse; justify-content:flex-start; text-align:right; }
    .gender-symbol { display:inline-flex; width:clamp(31px,2.8vw,43px); height:clamp(31px,2.8vw,43px); flex:0 0 auto; align-items:center; justify-content:center; } .gender-symbol svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:5; } .gender.male .gender-symbol, .gender.female .gender-symbol { color:#fffaf0; }
    .gender b { display:block; color:#fffaf0; font-size:clamp(15px,1.35vw,21px); line-height:1; } .gender span { display:block; margin-top:2px; color:#fffaf0; font-size:clamp(9px,.68vw,11px); }
    .panel-foot { margin-top:auto; padding-top:7px; border-top:1px solid rgba(92,48,23,.35); color:#765033; font-size:clamp(9px,.68vw,11px); font-style:italic; text-align:center; }
    /* Embed sizing follows the host container, never the viewport height. */
    /* html, body { height:auto; overflow:visible; } */
    /* body { background:#f5efe4; } */
    .embed { width:100%; max-width:920px; margin-inline:auto; container-type:inline-size; }
    .dashboard { width:100%; height:auto; min-height:0; grid-template-columns:minmax(0,1fr) 280px; border:4px solid #3d2416; overflow:visible; }
    .map-column { display:flex; align-items:center; border-right:3px solid var(--wood); background:#d9b98d; }
    .map-stage { position:relative; width:100%; aspect-ratio:1920 / 1751; flex:none; isolation:isolate; }
    .map-art { object-fit:contain; }
    .map-title { top:12px; left:12px; font-size:10px; letter-spacing:.06em; color:#51321e; text-shadow:0 1px #fbe6bd; }
    .city { width:var(--city-size); min-height:28px; }
    .city--kyiv { width:var(--city-size); }
    .city::after { opacity:1; bottom:-13px; padding:2px 5px; font-size:11px; letter-spacing:0; }
    .city:focus-visible { outline:2px solid #ffe1a0; outline-offset:5px; border-radius:4px; }
    .city.active::after { color:#fff3c8; background:#6e3422; border-color:#f1d293; }
    .warriors { left:85%; top:45%; width:12%; }
    .rider { width:21px; height:21px; font-size:16px; transform:translate(-50%,-200%); }
    .panel { height:auto; padding:14px 12px 10px; overflow:visible; }
    .city-data { gap:10px; }
    .headline { padding-bottom:8px; }
    h1 {
        font-size:32px;
        line-height:1;
        font-family: Georgia, 'Times New Roman', serif !important;
        padding-bottom: 0;
    }
    .specialty { 
        font-size:12px; 
        line-height:1.3; 
        margin-top:5px; 
        min-height:32px;
        padding-bottom: 0;
    }
    .metrics { grid-template-columns:.9fr 1.1fr; gap:6px; }
    .card { padding:7px; }
    .card-label { 
        font-size:9px; 
        letter-spacing:0; 
        line-height:1.25; 
        min-height:23px;
        padding-bottom: 0;
    }
    .icon { 
        flex-shrink:0;
        width:15px; 
        height:15px; 
        font-size:11px;
        line-height: 120%;
    }
    .salary { font-size:27px; }
    .family-list { font-size:11px; line-height:1.35; }
    .family-list span { gap:3px; }
    .section-label { font-size:10px; letter-spacing:.06em; margin-bottom:6px; }
    .roles { gap:6px; }
    .role { grid-template-columns:minmax(0,1fr) 39px; font-size:11px; gap:3px 5px; line-height:1.1; }
    .role-name { white-space:normal; overflow:visible; }
    .bar { height:4px; }
    .morale { padding-top:0; }
    .burnout { font-size:22px; }
    .burnout-bar { height:8px; }
    .demography { min-height:52px; border-radius:5px; }
    .gender { padding:6px; gap:4px; }
    .gender-symbol { width:24px; height:28px; }
    .gender b { font-size:16px; }
    .gender span { font-size:10px; }
    .panel-foot { font-size:10px; line-height:1.3; padding-top:6px; }
    @container (max-width:760px) {
      .dashboard { 
            /* grid-template-columns:minmax(0,1fr) 250px; */
            display: flex;
            flex-direction: column;
        }
      .panel { padding:12px 9px; }
      .city::after { font-size:10px; padding:2px 3px; }
      .salary { font-size:24px; }
      .family-list { font-size:10px; }
    }
    @container (max-width:599px) {
      .dashboard { grid-template-columns:1fr; }
      .map-column { border-right:0; border-bottom:3px solid var(--wood); }
      .panel { padding:16px; }
      .city-data { gap:12px; }
      .roles { gap:8px; }
      .role, .family-list { font-size:12px; }
      .specialty { min-height:0; }
      .city::after { font-size:11px; }
    }
    @media (prefers-reduced-motion:reduce) {
        *, *::before, *::after { transition:none !important; }
    }
}

.charts-card {
    :root {
        --ink:#2e1b10;
        --wood:#5d321d;
        --gold:#d9ad45;
        --paper:#ecd39d;
        --paper-dark:#c78b46;
        --red:#9e3024;
        --green:#4c6a38;
    }
    color:var(--ink); 
    font-family: Georgia, 'Times New Roman', serif !important;
    box-shadow:inset 0 0 0 2px #e8c77f, inset 0 0 48px rgba(61,36,22,.55);
    container-type: inline-size;

    * { box-sizing:border-box; }
    li, p { line-height: 120%; }
    .panel { 
        position:relative; 
        display:flex; 
        gap: 24px;
        min-width:0; 
        height:100%; 
        padding: clamp(15px,2.5vh,30px)
            clamp(15px,2vw,28px);
        overflow:hidden; 
        background: linear-gradient(105deg,rgba(247,226,173,.98),rgba(222,181,108,.98)), 
            repeating-linear-gradient(0deg,rgba(89,44,20,.035) 0 1px,transparent 1px 4px); 
        border: 4px solid #3d2416;
        box-shadow: inset 0 0 0 2px #e8c77f,
            inset 16px 0 28px rgba(73,38,18,.17); 
    }
    .column {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    p.section-label {
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0 0 5px;
        color: #7b4729;
        font-size: clamp(9px, .68vw, 11px);
        font-weight: bold;
        letter-spacing: .08em;
        text-transform: uppercase;

        margin-bottom: 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid rgba(91, 48, 23, .35);
        font-size: clamp(10px, .76vw, 12px);

        /* margin: 0; */
        /* padding: 0; */
        /* border: 0; */
        /* font-size: 10px; */
        letter-spacing: .06em;
        line-height: 120%;

        .icon {
            display: inline-grid;
            place-items: center;
            border-radius: 50%;
            font-family: Arial, sans-serif;
            background: linear-gradient(145deg, #9c3a25, #6c281e);
            color: #ffe29a;

            flex-shrink: 0;
            width: 15px;
            height: 15px;
            font-size: 9px;
            line-height: 120%;
        }
    }
    .roles {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .role {
        display: grid;
        grid-template-columns: minmax(92px, 1fr) 35px;
        gap: 6px;
        align-items: center;
        color: #4e2a19;
        font-size: clamp(10px, .85vw, 13px);
        line-height: 1;

        grid-template-columns: minmax(0, 1fr) 39px;
        font-size: 11px;
        gap: 3px 5px;
        line-height: 1.1;
    }
    .role.salary {
        display: flex;
    }
    .role-row {
        display: flex;
        justify-content: space-between;
    }
    .role-details {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .role-name {
        text-overflow: ellipsis;
        font-weight: bold;
        white-space: normal;
        overflow: visible;
    }
    .role.compound {
        display: flex;
    }
    .role.compound .role-name {
        width: 100%;
        max-width: 100px;
    }
    .role-value {
        color: #8c2f22;
        text-align: right;
        font-weight: bold;
        font-variant-numeric: tabular-nums;
    }
    .role-comment {
        display: inline-block;
        font-weight: normal;
        font-style: italic;
        font-size: 10px;
        opacity: .6;
        margin-left: 3px;
        color: #4e2a19;
    }
    .role-comment strong { color: #4e2a19; }
    /* .role-details {
        width: 100%;
    } */
    .chart-legend {
        display: flex;
        gap: 12px;
        /* margin-top: -3px; */
        margin-bottom: 8px;
    }
    .chart-legend .option {
        display: flex;
        align-items: baseline;
        gap: 3px;
        max-width: 140px;
    }
    .chart-legend .option-mark {
        width: 7px;
        height: 7px;
        aspect-ratio: 1/1;
        border-radius: 16px;
    }
    .chart-legend .option-name {
        font-weight: bold;
        font-size: 11px;
        line-height: 12px;
        color: #4e2a19;
    }
    .chart-legend .option-comment {
        font-weight: normal;
        font-style: italic;
        font-size: 10px;
        line-height: 12px;
        opacity: .6;
        color: #4e2a19;
    }
    .chart-pie .role-share {
        font-size: 10spx;
        text-anchor: middle;
        fill: var(--ink);
    }
    .bar {
        /* grid-column: 1 / -1; */
        width: 100%;
        height: 5px;
        overflow: hidden;
        border: 1px solid rgba(91, 48, 23, .26);
        border-radius: 99px;
        background: rgba(108, 61, 31, .13);
    }
    .bar i {
        display: block;
        height: 100%;
        border-radius: unset;
        background: linear-gradient(90deg, #d6ad46, #7a3c27);
    }
    .roles.compound {
        gap: 2px;
    }
    .role.compound .bar {
        height: 8px;
        display: flex;
        /* justify-content: space-between; */
        justify-content: start;
        border: none;
        background: none;
        border-radius: unset;
    }
    .role.compound .bar i {
        border-radius: 10px;
    }
    @container (max-width:760px) {
        .panel { 
            flex-direction: column;
            padding: 12px 9px;
            gap: 18px;
        }
    }
}

/*   TOOLTIP   */
#douchart-tooltip { 
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	pointer-events: none; 

	position: absolute;
	display: none;
	width: 100%;
	max-width: 150px;
	background: black;
	color: white;
	padding: 8px 15px 12px;
	box-shadow: 10px 10px 0 #00000044;
	z-index: 1000;
    border-radius: 8px;
}
#douchart-tooltip.help-popup p {
	margin-bottom: 7px;
}
#douchart-tooltip.help-popup .legend {
	width: 600px;
	height: 400px;
	background: url(i/hr-brand-2024_funnel-legend.png) center no-repeat;
	background-size: cover;
}

#douchart-tooltip ul {
	padding-left: 15px;
	margin-top: 5px;
	margin-bottom: 7px;
}
#douchart-tooltip li {
	list-style: disc;
	margin-left: 0px;
	margin-bottom: 3px;
}

#douchart-tooltip .tt-period,
#douchart-tooltip .tt-group { 
	margin: 3px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	line-height: 16px;
	color: #606060;
}
#douchart-tooltip .tt-period.underlined { padding-bottom: 0; }
#douchart-tooltip .tt-value span { font-weight: bold; }
#douchart-tooltip .tt-note {
	font-size: 14px;
	color: #999;
	/* margin-bottom: 10px; */
}
#douchart-tooltip .tt-footer {
	font-size: 12px;
	font-style: italic;
	color: #999;
	border-top: 1px solid #333;
	padding-top: 3px;
	margin-top: 5px;
}
#douchart-tooltip .tt-points {
	margin-bottom: 6px;
}
#douchart-tooltip .tt-point span { 
	font-weight: bold;
}
#douchart-tooltip .tt-point.tt-junior span { color: #89e5de; }
#douchart-tooltip .tt-point.tt-middle span { color: #06b9b1; }
#douchart-tooltip .tt-point.tt-senior span { color: #1d7872; }

#douchart-tooltip .tt-point.flexbox {
	display: flex;
	gap: 8px;
	justify-content: space-between;
}
#douchart-tooltip .tt-point-title {
	display: flex;
	gap: 4px;
}
#douchart-tooltip .tt-point-mark {
	width: 10px;
	height: 10px;
	border-radius: 5px;
}
#douchart-tooltip .tt-point-value {
	font-weight: bold;
}

#douchart-tooltip svg.tt-trend {
	margin: 0 0 5px 3px;
	fill: none;
	overflow: visible;
}

#douchart-tooltip .tt-row.column {
	flex-direction: column;
	gap: 0;
}

#douchart-tooltip .tt-row {
	display: flex;
	justify-content: start;
	gap: 7px;
}
#douchart-tooltip .tt-row-value { 
	font-weight: bold;
	white-space: nowrap;
}
#douchart-tooltip .tt-row-diff,
#douchart-tooltip .tt-diff {
	font-style: italic;
	font-size: 12px;
	margin: -5px 0 0 -3px;
	color: #cdcdcd;
}
#douchart-tooltip .tt-value .tt-diff {
	font-weight: normal;
	font-size: 10px;
	position: relative;
	top: -6px;
	left: 3px;
}
#douchart-tooltip .tt-row-diff.positive,
#douchart-tooltip .tt-row-diff.increase,
#douchart-tooltip .tt-diff.increase { color: #06b9b1; }
#douchart-tooltip .tt-row-diff.negative,
#douchart-tooltip .tt-row-diff.decrease,
#douchart-tooltip .tt-diff.decrease { color: #eb4247; }
#douchart-tooltip .tt-vacancies { 
	font-size: 12px; 
	font-style: italic; 
	color: #b0b0b0; 
}
#douchart-tooltip .tt-row-group.spaced {
	justify-content: space-between;
}
#douchart-tooltip .tt-row-group-name {
	display: flex;
	align-items: baseline;
	gap: 5px;
}
#douchart-tooltip .tt-mark {
	width: 10px;
	min-width: 10px;
	height: 10px;
	border-radius: 8px;
}
#douchart-tooltip .tt-count {
	font-style: italic;
	margin-bottom: 3px;
}

#douchart-tooltip.hr-brand {
	background: white url("png/background.jpg") no-repeat;
    background-size: cover;
	color: #3d3d3d;
	border: rgba(91, 48, 23, .26) 1px solid;
	border-radius: 6px;
	max-width: 200px;
	font-size: 12px;
	line-height: 15px;
	padding-bottom: 10px;
}
#douchart-tooltip.hr-brand .tt-header {
	background: #f2f2f2;
	margin: -8px -15px 10px;
	padding: 8px 15px 10px;
	border-radius: 3px 3px 0 0;
	display: flex;
	gap: 8px;
	font-family: 'Roboto Condensed', sans-serif;
}
#douchart-tooltip.hr-brand .tt-header .tt-logo {
	width: 58px;
	height: 26px;
	mix-blend-mode: multiply;
}
#douchart-tooltip.hr-brand .tt-header .tt-name {
	font-size: 14px;
	margin: 3px 0 0;
}
#douchart-tooltip.hr-brand .tt-name {
	font-size: 14px;
	margin-bottom: 2px;
}
#douchart-tooltip.hr-brand .tt-name.strong {
	font-weight: bold;
}
#douchart-tooltip.hr-brand .tt-companies .tt-title {
	text-transform: uppercase;
	letter-spacing: .025em;
	font-size: 10px;
	color: #9d9d9d;
	margin-bottom: 2px;
}
#douchart-tooltip.hr-brand .tt-companies .tt-list { 
	font-size: 11px;
	line-height: 14px;
}
#douchart-tooltip.hr-brand .tt-row-title {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
#douchart-tooltip.hr-brand .tt-row {
	font-family: 'Roboto Condensed', sans-serif;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 2px;
}
#douchart-tooltip.hr-brand .tt-row.start {
	justify-content: start;
}
#douchart-tooltip.hr-brand .tt-answers.divided .tt-row:not(:last-child) {
	padding-bottom: 5px;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 6px;
}
#douchart-tooltip.hr-brand .tt-row.main-value {
	padding-bottom: 7px;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 8px;
}
#douchart-tooltip.hr-brand .tt-row-value { font-weight: bold; }
#douchart-tooltip.hr-brand .tt-row-diff { 
	font-style: italic;
	font-size: 11px;
	margin: 0;
	position: relative;
	top: -5px;
	left: -3px;
}
#douchart-tooltip.hr-brand .tt-value.nowrap { white-space: nowrap; }
#douchart-tooltip.hr-brand .tt-note {
	font-size: 11px;
	line-height: 12px;
	color: #9d9d9d;
	font-style: italic;
}
#douchart-tooltip.hr-brand .tt-row-name {
	display: flex;
	gap: 5px;
	align-items: baseline;
}
#douchart-tooltip.hr-brand .tt-row-name.column { flex-direction: column; gap: 0; }
#douchart-tooltip.hr-brand .tt-color-mark {
	width: 8px; min-width: 8px;
	height: 8px; min-height: 8px;
	border-radius: 8px;
}
 #douchart-tooltip.hr-brand .tt-footer {
	font-size: 11px;
	border-top-color: #d3d3d3;
	padding-top: 5px;
	margin-top: 8px;
}
#douchart-tooltip .underlined,
#douchart-tooltip .tt-name.underlined {
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(91, 48, 23, .26);
	margin-bottom: 8px;
}
#douchart-tooltip .upperlined {
	padding-top: 5px;
	border-top: 1px solid rgba(91, 48, 23, .26);
	margin-top: 7px;
}

.b-longread .b-typo_post h1 {
    color: #0d0d0d!important;
}

@media screen and (prefers-color-scheme: dark) {
    body, html { color: #0d0d0d!important; }
    .b-typo { color: #0d0d0d!important; }
    .b-typo b, .b-typo h1, .b-typo h2, .b-typo h3, .b-typo h4, .b-typo p.quote, .b-typo strong {
        color: #0d0d0d;
    }
    .charts-card {
        .chart-legend .option-name { color: #4e2a19; }
    }
    .promobar .inner { background: #e6f5fb; }
    .b-post-tags a { color: #7d94aa!important; }
    .b-typo a:visited { color: #eb61fa!important; }
    .b-typo a:hover { color: #d59ae4!important; }
        .b-articles_tech .link, .b-block_news .l-articles .link, .b-content-menu li a, .b-footer a, .b-index-columnisty .author a, .b-index-columnisty .column-list li .link, .b-index-discussions .meta a, .b-post-info .author .name a, .b-post-tags a, .b-similar-topics a, .b-tag-cloud a, .page-index .b-articles .link, .page-index .b-index-forum .topic-link { color: #0d0d0d!important; }
    .b-comments .comment .dou-official-person .avatar {
        color: #000!important;
        background-color: #ffe54d!important;
    }
    .g-approved-user .b-post-author .avatar { color: #000!important; }
    .g-approved-user .b-post-author .avatar:hover {
        color: #f93703!important;
    }
    .b-comments .comment .dou-official-person .avatar:hover {
        color: #f93703 !important;
    }
    .b-adv-events .title, .b-community-widget h3, .b-dou-vacancies .title, .b-region-filter h3, .b-sidebar-comments h3, .b-similar-posts h4, .b-similar-topics h4, .b-subsite-posts h1, .b-tag-cloud h1, .comments-head h3, .g-h2, .page-index .b-block .title h3, .posts_footer h3, h1 {
        color: #0d0d0d!important;
    }
    .comments-head .fixed-menu .comment-subscribe>span, .comments-head .fixed-menu .navigation-comment {
        color: #3F3021!important;
        border-bottom: 1px dashed #3F3021!important;
        }
    .pageviews {
        opacity: 1 !important;
        filter: unset;
    }
    .b-footer .social a[href^="https://twitter.com/"] img {
        filter: unset;
    }
    .b-head ul li a.sel {
        background: #fff !important;
        color: #000!important;
    }
    .b-head li a.sel:hover {
        color: #f93703!important;
    }
}

body.longread-dark {
    color: #0d0d0d!important;
    .b-typo { color: #0d0d0d!important; }
    .b-typo b, .b-typo h1, .b-typo h2, .b-typo h3, .b-typo h4, .b-typo p.quote, .b-typo strong {
        color: #0d0d0d;
    }
    .charts-card {
        .chart-legend .option-name { color: #4e2a19; }
    }
    .promobar .inner { background: #e6f5fb; }
    .b-post-tags a { color: #7d94aa!important; }
    .b-typo a:visited { color: #eb61fa!important; }
    .b-typo a:hover { color: #d59ae4!important; }
        .b-articles_tech .link, .b-block_news .l-articles .link, .b-content-menu li a, .b-footer a, .b-index-columnisty .author a, .b-index-columnisty .column-list li .link, .b-index-discussions .meta a, .b-post-info .author .name a, .b-post-tags a, .b-similar-topics a, .b-tag-cloud a, .page-index .b-articles .link, .page-index .b-index-forum .topic-link { color: #0d0d0d!important; }
    .b-comments .comment .dou-official-person .avatar {
        color: #000!important;
        background-color: #ffe54d!important;
    }
    .g-approved-user .b-post-author .avatar { color: #000!important; }
    .g-approved-user .b-post-author .avatar:hover {
        color: #f93703!important;
    }
    .b-comments .comment .dou-official-person .avatar:hover {
        color: #f93703 !important;
    }
    .b-adv-events .title, .b-community-widget h3, .b-dou-vacancies .title, .b-region-filter h3, .b-sidebar-comments h3, .b-similar-posts h4, .b-similar-topics h4, .b-subsite-posts h1, .b-tag-cloud h1, .comments-head h3, .g-h2, .page-index .b-block .title h3, .posts_footer h3, h1 {
        color: #0d0d0d!important;
    }
    .comments-head .fixed-menu .comment-subscribe>span, .comments-head .fixed-menu .navigation-comment {
        color: #3F3021!important;
        border-bottom: 1px dashed #3F3021!important;
        }
    .pageviews {
        opacity: 1 !important;
        filter: unset;
    }
    .b-footer .social a[href^="https://twitter.com/"] img {
        filter: unset;
    }
    .b-head ul li a.sel {
        background: #fff !important;
        color: #000!important;
    }
    .b-head li a.sel:hover {
        color: #f93703!important;
    }
}