@charset "utf-8";

/* ------------------------------- RESET ------------------------------- */

html {margin: 0; padding: 0; height: 100%;}
body, div, span, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, a, font, small, strong, b, u, i, center, label, form, fieldset,
input, button, textarea, img, p, table, tr, th, td, dl, dt, dd {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent;
}
table {border-collapse: collapse; border-spacing: 0;}
ol, ul, li {list-style: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
input, button, textarea, select, optgroup, option {
    font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;
}
input, button, textarea, select {font-size: 100%; display: block;}
input[type=text], input[type=submit], textarea{-webkit-appearance: none;}
input[type=text]::placeholder {color: var(--gray-color-8); font-size: 14px;}
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px var(--white-color) !important; -webkit-text-fill-color: var(--black-color) !important;
    color: var(--black-color) !important;
}
select {outline: 0;}
:focus {outline: none;}
*, *:before, *:after {box-sizing: border-box;}
::-moz-focus-inner {border: 0; padding: 0;}
::selection {color: var(--gray-color-1); background: var(--primary-color-6);}

/* ------------------------------- COLORS ------------------------------- */

html {
    --primary-color-1: #084985;
    --primary-color-2: #2A67A4;
    --primary-color-3: #2D6FB2;
    --primary-color-4: #2C70BC;
    --primary-color-5: #3B86CF;
    --primary-color-6: #A7C9E6;
    --primary-color-7: #dceffd;
    --primary-color-8: #E7F2FB;
    --primary-color-9: #EEF6FC;
    --secondary-color-1: #0F5F68;
    --secondary-color-2: #207A86;
    --secondary-color-3: #2D9DA8;
    --secondary-color-4: #48A9B4;
    --secondary-color-5: #78C1CA;
    --secondary-color-6: #A8D9E0;
    --secondary-color-7: #D8F2F6;
    --secondary-color-8: #E9F7F9;
    --black-color: #080d19;
    --gray-color-1: #14323B;
    --gray-color-2: #334155;
    --gray-color-3: #515B6A;
    --gray-color-4: #5B626C;
    --gray-color-5: #6B7382;
    --gray-color-6: #707A86;
    --gray-color-7: #788591;
    --gray-color-8: #8F9BB0;
    --gray-color-9: #A6B0BE;
    --gray-color-10: #B6BEC8;
    --gray-color-11: #CBD5E1;
    --gray-color-12: #D7DDE5;
    --gray-color-13: #E3E7ED;
    --gray-color-14: #EFF2F6;
    --gray-color-14a: #F2F5FA;
    --gray-color-15: #F8FAFC;
    --white-color: #FFFFFF;
    --white-color-90: rgba(255, 255, 255, 0.90);
    --white-color-80: rgba(255, 255, 255, 0.80);
    --white-color-70: rgba(255, 255, 255, 0.70);
    --white-color-60: rgba(255, 255, 255, 0.60);
    --white-color-50: rgba(255, 255, 255, 0.50);
    --white-color-40: rgba(255, 255, 255, 0.40);
    --white-color-30: rgba(255, 255, 255, 0.30);
    --white-color-20: rgba(255, 255, 255, 0.20);
    --white-color-10: rgba(255, 255, 255, 0.10);
    --white-color-5: rgba(255, 255, 255, 0.05);
    --jobs-roles-bg: rgba(245, 245, 245, 0.9);
    --green-color-1: #1c8a4a;
    --green-color-2: #2cc070;
    --green-color-3: #a5dcbb;
    --green-color-4: #d3ecde;
    --green-color-5: #e6f7ed;
    --red-color-1: #A3354F;
    --red-color-2: #DF6B74;
    --red-color-3: #F1C4CD;
    --red-color-4: #F6D6DC;
    --orange-color-1: #FB5D33;
    --orange-color-2: #E29177;
    --yellow-color-1: #FDC03B;
    --purple-color-1: #9A6EEA;
    --purple-color-2: #BCC1F9;
    --surface-border: 0.75px solid rgba(15, 23, 42, 0.2);
    --menu-profile-shadow: -4px 5px 6px rgba(5, 41, 102, 0.06), -10px 10px 13px rgba(5, 41, 102, 0.06),
    2px 2px 7px rgba(5, 41, 102, 0.07), 0 0 0 rgba(5, 41, 102, 0.07);
}

html.dark {
    --primary-color-1: #93c5fd;
    --primary-color-2: #7ab3f5;
    --primary-color-3: #60a5fa;
    --primary-color-4: #4189df;
    --primary-color-5: #2e6fb8;
    --primary-color-6: #234f80;
    --primary-color-7: #1a3a5c;
    --primary-color-8: #142a44;
    --primary-color-9: #101e30;
    --secondary-color-1: #7dd3d9;
    --secondary-color-2: #5ec0c7;
    --secondary-color-3: #45a9b0;
    --secondary-color-4: #2f8a91;
    --secondary-color-5: #226269;
    --secondary-color-6: #194449;
    --secondary-color-7: #122e32;
    --secondary-color-8: #0b1f22;
    --black-color: #e6e8ec;
    --gray-color-1: #f5f7fa;
    --gray-color-2: #e4e7ed;
    --gray-color-3: #ccd2dc;
    --gray-color-4: #b6bcc7;
    --gray-color-5: #9aa1ae;
    --gray-color-6: #7d8593;
    --gray-color-7: #6a7280;
    --gray-color-8: #565d68;
    --gray-color-9: #434954;
    --gray-color-10: #353b44;
    --gray-color-11: #2a2f37;
    --gray-color-12: #232830;
    --gray-color-13: #1d2128;
    --gray-color-14: #181c22;
    --gray-color-14a: #15181e;
    --gray-color-15: #11141a;
    --white-color: #0f1217;
    --white-color-90: rgba(15, 18, 23, 0.90);
    --white-color-80: rgba(15, 18, 23, 0.80);
    --white-color-70: rgba(15, 18, 23, 0.70);
    --white-color-60: rgba(15, 18, 23, 0.60);
    --white-color-50: rgba(15, 18, 23, 0.50);
    --white-color-40: rgba(15, 18, 23, 0.40);
    --white-color-30: rgba(15, 18, 23, 0.30);
    --white-color-20: rgba(15, 18, 23, 0.20);
    --white-color-10: rgba(15, 18, 23, 0.10);
    --white-color-5: rgba(15, 18, 23, 0.05);
    --jobs-roles-bg: rgba(15, 18, 23, 0.9);
    --surface-border: 0.75px solid rgba(255, 255, 255, 0.08);
    --menu-profile-shadow: -4px 5px 6px rgba(0, 0, 0, 0.4), -10px 10px 13px rgba(0, 0, 0, 0.4),
    2px 2px 7px rgba(0, 0, 0, 0.4), 0 0 0 rgba(0, 0, 0, 0.4);
    --green-color-1: #4ade80;
    --green-color-2: #22c55e;
    --green-color-3: #1a5436;
    --green-color-4: #133b27;
    --green-color-5: #0c2719;
    --red-color-1: #f87171;
    --red-color-2: #dc6262;
    --red-color-3: #5a2730;
    --red-color-4: #391820;
    --orange-color-1: #fb923c;
    --orange-color-2: #c2724a;
    --yellow-color-1: #facc15;
    --purple-color-1: #a78bfa;
    --purple-color-2: #4c3f7a;
}

/* ------------------------------- COMMON STYLES ------------------------------- */

html {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); scroll-behavior: smooth;}
body {
    display: block; position: relative; height: 100%; width: 100%; min-width: 320px; font-family: 'Inter', arial, sans-serif;
    font-size: 14px; color: var(--black-color); line-height: 1.2; font-weight: 400; letter-spacing: -0.3px;
    background: var(--white-color); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto;
}

div, label {display: block;}

a {color: var(--black-color); text-decoration: underline; transition: all 0.2s ease-out;}
a:hover {text-decoration: none;}
img {max-width: 100%; height: auto;}

.dn {display: none;}

.sep {height: 1px; background: var(--gray-color-12); margin-top: 30px;}

.flex_column {display: flex; flex-direction: column;}

.mt_0, .input_group.mt_0 {margin-top: 0;}
.mt_6 {margin-top: 6px;}
.mt_10 {margin-top: 10px;}
.mt_12 {margin-top: 12px;}
.mt_16 {margin-top: 16px;}
.mt_18 {margin-top: 18px;}
.mt_24 {margin-top: 24px;}

.ps_8 {padding-inline-start: 8px;}

.fs_14 {font-size: 14px;}

.h_32 {height: 32px;}

.pt_0 {padding-top: 0;}
.pt_6 {padding-top: 6px;}
.pt_10 {padding-top: 10px;}
.pt_12 {padding-top: 12px;}
.pt_16 {padding-top: 16px;}
.pt_22 {padding-top: 22px;}
.pt_24 {padding-top: 24px;}
.pt_30 {padding-top: 30px;}

.pb_0 {padding-bottom: 0;}

/* ------------------------------- ICONS ------------------------------- */

i {
    display: inline-block; font-family: 'glyphicons', sans-serif; font-size: 14px; font-weight: 400; font-style: normal;
    text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.icon_ai_1:before {content: '\E979';}
.icon_arrow:before {content: '\E806';}
.icon_arrow_right:before {content: '\E86C';}
.icon_arrow_right_2:before {content: '\E806';}
.icon_arrow_right_3:before {content: '\E8B6';}
.icon_benefits:before {content: '\E878';}
.icon_billing:before {content: '\E835';}
.icon_bitcoin:before {content: '\E8D7';}
.icon_burger:before {content: '\E8F5';}
.icon_card:before {content: '\E8DA';}
.icon_chat:before {content: '\E8A9';}
.icon_chat_2:before {content: '\E842';}
.icon_chat_3:before {content: '\E824';}
.icon_circle:before {content: '\E887';}
.icon_close:before {content: '\E83F';}
.icon_close_2:before {content: '\E8A7';}
.icon_companies:before {content: '\E86B';}
.icon_companies_2:before {content: '\E87C';}
.icon_companies_3:before {content: '\E89A';}
.icon_connections:before {content: '\E875';}
.icon_crypto:before {content: '\E8D8';}
.icon_culture:before {content: '\E878';}
.icon_cv:before {content: '\E857';}
.icon_cv_2:before {content: '\E82D';}
.icon_delete:before {content: '\E804';}
.icon_delete_2:before {content: '\E816';}
.icon_delete_3:before {content: '\E8DE';}
.icon_desktop:before {content: '\E96E';}
.icon_discord:before {content: '\E8BA';}
.icon_download:before {content: '\E836';}
.icon_edit:before {content: '\E8BB';}
.icon_education:before {content: '\E81B';}
.icon_ellipsis:before {content: '\E899';}
.icon_email:before {content: '\E8A3';}
.icon_email_2:before {content: '\E833';}
.icon_email_3:before {content: '\E972';}
.icon_exit:before {content: '\E96F';}
.icon_expand_1:before {content: '\E808';}
.icon_expand_2:before {content: '\E860';}
.icon_expand_3:before {content: '\E8DB';}
.icon_experience:before {content: '\E854';}
.icon_experience_2:before {content: '\E884';}
.icon_facebook:before {content: '\F301';}
.icon_favorite:before {content: '\E802';}
.icon_favorite_2_empty:before {content: '\E849';}
.icon_favorite_2_fill:before {content: '\E813';}
.icon_filter_empty:before {content: '\E8BF';}
.icon_filter_full:before {content: '\E8C0';}
.icon_folder:before {content: '\E8A1';}
.icon_github:before {content: '\E814';}
.icon_goto:before {content: '\E85D';}
.icon_group:before {content: '\E809';}
.icon_graph:before {content: '\E89E';}
.icon_help:before {content: '\E89F';}
.icon_hidden:before {content: '\E82F';}
.icon_hide:before {content: '\E84B';}
.icon_hf:before {content: '\E8B9';}
.icon_info:before {content: '\E80B';}
.icon_info_2:before {content: '\E8AE';}
.icon_instagram:before {content: '\E847';}
.icon_language:before {content: '\E88B';}
.icon_link_2:before {content: '\E8AF';}
.icon_linkedin:before {content: '\F31B';}
.icon_location:before {content: '\E881';}
.icon_location_2:before {content: '\E87E';}
.icon_lock:before {content: '\E973';}
.icon_logout:before {content: '\E86D';}
.icon_minus_1:before {content: '\E83B';}
.icon_mobile:before {content: '\E970';}
.icon_move:before {content: '\E834';}
.icon_news:before {content: '\E868';}
.icon_note:before {content: '\E840';}
.icon_note_2:before {content: '\E879';}
.icon_note_3:before {content: '\E845';}
.icon_notifications_1:before {content: '\E868';}
.icon_pad:before {content: '\E971';}
.icon_password:before {content: '\E8A4';}
.icon_pause:before {content: '\E815';}
.icon_payments:before {content: '\E858';}
.icon_people:before {content: '\E857';}
.icon_photo:before {content: '\E8A6';}
.icon_play:before {content: '\E843';}
.icon_plus_1:before {content: '\E83A';}
.icon_plus_3:before {content: '\E852';}
.icon_portfolio:before {content: '\E856';}
.icon_preferences:before {content: '\E85E';}
.icon_premium_1:before {content: '\E801';}
.icon_privacy:before {content: '\E864';}
.icon_products:before {content: '\E81B';}
.icon_publication:before {content: '\E8B2';}
.icon_remote:before {content: '\E8B3';}
.icon_report:before {content: '\E84D';}
.icon_restrictions:before {content: '\E895';}
.icon_reward:before {content: '\E819';}
.icon_search:before {content: '\E897';}
.icon_seсurity:before {content: '\E862';}
.icon_send:before {content: '\E892';}
.icon_send_2:before {content: '\E891';}
.icon_settings:before {content: '\E873';}
.icon_share:before {content: '\E829';}
.icon_share_2:before {content: '\E80E';}
.icon_sort:before {content: '\E805';}
.icon_star:before {content: '\E80D';}
.icon_success:before {content: '\E839';}
.icon_success_2:before {content: '\E8AB';}
.icon_success_3:before {content: '\E8B1';}
.icon_success_4:before {content: '\E975';}
.icon_technologies:before {content: '\E810';}
.icon_telegram:before {content: '\E893';}
.icon_tiktok:before {content: '\E823';}
.icon_time:before {content: '\E886';}
.icon_user:before {content: '\E828';}
.icon_user_2:before {content: '\E859';}
.icon_user_3:before {content: '\E89C';}
.icon_user_4:before {content: '\E8BE';}
.icon_user_5:before {content: '\E8A5';}
.icon_verification_1:before {content: '\E87D';}
.icon_verification_2:before {content: '\E976';}
.icon_visible:before {content: '\E82E';}
.icon_whatsapp:before {content: '\E8B8';}
.icon_x:before {content: '\E846';}
.icon_youtube:before {content: '\E88C';}

/* ------------------------------- WRAP ------------------------------- */

.wrap {width: 100%; padding: 0 20px; margin: 0 auto; max-width: 1400px;}
.wrap.top {padding-top: 14px;}

.print .no_print {display: none;}
.print .wrap {padding: 0;}

@media only screen and (max-width: 1024px) {
    .wrap {padding: 0 20px;}
}

/* ------------------------------- GRID ------------------------------- */

.grid {display: grid; grid-template-columns: 2fr 1fr; gap: 14px; padding-top: 14px; padding-bottom: 50px; align-items: start;}
.grid_column {display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; min-width: 0;}

@media only screen and (max-width: 1024px), print {
    .grid {display: flex; flex-direction: column; gap: 14px; padding-top: 0;}
}

/* ------------------------------- SECTION ------------------------------- */

.section {border: var(--surface-border); background: var(--white-color); border-radius: 12px; padding: 20px 20px 30px;}

.section.compact {padding: 14px;}

.section.v3 {padding: 24px 30px;}
.section.v3 + .section.v3 {margin-top: 14px;}
.section.v3 > div:nth-of-type(1) {
    font-size: 22px; line-height: 1; color: var(--black-color); font-weight: 400; letter-spacing: -0.5px;
}

.section_title {color: var(--black-color); font-size: 22px; font-weight: 400; letter-spacing: -0.5px;}
.section_title.page {line-height: 1;}
.section_title.flex {display: flex;}

@media only screen and (max-width: 1024px) {
    .section_title {font-size: 22px;}
    .section_title.page {font-size: 20px;}
    .section_title.flex {gap: 10px;}
    .section_title.flex > span {font-size: 19px;}
}

@media only screen and (max-width: 768px) {
    .section {padding: 18px 16px 22px; border-radius: 10px;}
    .section_title {font-size: 22px;}
    .section_title.page {font-size: 20px;}
    .section_title.flex {flex-wrap: wrap; gap: 10px;}
    .section_title.flex > span {font-size: 20px;}
}

.section_note {padding-top: 16px; font-size: 13px; line-height: 1.3; color: var(--gray-color-5);}

@media only screen and (max-width: 1024px) {
    .section_note {font-size: 14px; line-height: 1.4;}
}

@media only screen and (max-width: 768px) {
    .section_note {font-size: 15px; line-height: 1.45; padding-top: 18px;}
}

.section_empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--gray-color-9);
    border-radius: 8px; padding: 14px; margin-top: 18px; min-height: 240px;
}
.section_empty > div:nth-of-type(1) {font-weight: 500;}
.section_empty > div:nth-of-type(2) {margin-top: 6px; color: var(--gray-color-5); text-align: center;}
.section_empty > div:nth-of-type(3) {max-width: 180px; margin-top: 14px;}

@media only screen and (max-width: 1024px) {
    .section_empty {padding: 22px 18px; margin-top: 22px; min-height: 260px; border-radius: 12px;}
    .section_empty > div:nth-of-type(1) {font-size: 16px;}
    .section_empty > div:nth-of-type(2) {margin-top: 8px; font-size: 14.5px; line-height: 1.5;}
    .section_empty > div:nth-of-type(3) {max-width: 220px; margin-top: 20px;}
}

@media only screen and (max-width: 768px) {
    .section_empty {padding: 26px 18px; margin-top: 24px; min-height: 280px; border-radius: 14px;}
    .section_empty > div:nth-of-type(1) {font-size: 17px; font-weight: 600;}
    .section_empty > div:nth-of-type(2) {margin-top: 10px; font-size: 15.5px; line-height: 1.55;}
    .section_empty > div:nth-of-type(3) {max-width: 100%; margin-top: 22px; width: 100%;}
    .section_empty > div:nth-of-type(3) > .btn_primary {width: 100%; height: 50px; font-size: 16px; font-weight: 600;}
}

.print .section {border: none;}
.print .section.v3 {padding: 24px 0 0;}

.section_block {padding-top: 30px;}
.section_block.compact {padding-top: 10px;}

@media only screen and (max-width: 768px) {
    .section_block {padding-top: 22px;}
    .section_block.compact {padding-top: 8px;}
}

/* ------------------------------- INPUT GROUPS ------------------------------- */

.input_row {display: flex; align-items: start; gap: 20px;}
.input_row > div {width: 50%;}

.input_row_4 {display: flex; align-items: start; gap: 20px;}
.input_row_4 > div {width: 25%;}

.input_row_2_1 {display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 20px;}
.input_row_2_1 > div:nth-of-type(3) {grid-column: span 2;}

@media only screen and (max-width: 768px) {
    .input_row, .input_row_4 {flex-direction: column; gap: 26px;}
    .input_row_2_1 {grid-template-columns: 1fr; gap: 26px;}
    .input_row > div, .input_row_4 > div, .input_row_2_1 > div, .input_row_2_1 > div:nth-of-type(3) {width: 100%;}
    .input_row_2_1 > div:nth-of-type(3) {grid-column: span 1;}
    .input_row > div:empty, .input_row_4 > div:empty {display: none;}
    .input_row > * + .input_group, .input_row_4 > * + .input_group, .input_row_2_1 > * + .input_group {margin-top: 0;}
    .input_row > div > .input_group, .input_row_4 > div > .input_group, .input_row_2_1 > div > .input_group {margin-top: 0;}
}

/* ------------------------------- BUTTONS ------------------------------- */

.btn_primary {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 120px; width: auto;
    border-radius: 8px; border: 1px solid var(--primary-color-4); background-color: var(--primary-color-4); color: var(--white-color);
    font-size: 13px; font-weight: 500; height: 34px; text-decoration: none; user-select: none; white-space: nowrap; padding: 0 20px;
    transition: all 0.2s ease-out;
}
.btn_primary:hover {background-color: var(--primary-color-2); border-color: var(--primary-color-2);}
.btn_primary > i {padding-inline-end: 10px;}

.btn_primary.light {
    background-color: var(--white-color); border-color: var(--primary-color-3); color: var(--primary-color-3);
}
.btn_primary.light:hover {background-color: var(--primary-color-9);}

.btn_primary.white {
    background-color: var(--white-color); border-color: var(--white-color); color: var(--primary-color-3);
}
.btn_primary.white:hover {background-color: var(--primary-color-9); border-color: var(--primary-color-9);}

.btn_primary.green {background-color: var(--secondary-color-2); border-color: var(--secondary-color-2);}
.btn_primary.green:hover {background-color: var(--secondary-color-3); border-color: var(--secondary-color-3);}

.btn_primary.green.light {
    background-color: var(--white-color); border-color: var(--secondary-color-2); color: var(--secondary-color-2);
}
.btn_primary.green.light:hover {background-color: var(--secondary-color-7);}

.btn_primary.gray {background-color: var(--gray-color-14); border-color: var(--gray-color-14); color: var(--gray-color-3);}
.btn_primary.gray:hover {background-color: var(--gray-color-13); border-color: var(--gray-color-13);}

.btn_primary.red {background-color: var(--red-color-4); border-color: var(--red-color-4); color: var(--red-color-1);}
.btn_primary.red:hover {background-color: var(--red-color-3); border-color: var(--red-color-3);}

.btn_primary.wide {width: 100%;}
.btn_primary.compact {height: 32px; border-radius: 8px;}
.btn_primary.compact_2 {height: 28px; border-radius: 8px; min-width: 100px; padding: 0 14px;}
.btn_primary.disabled {
    background-color: var(--gray-color-13); border-color: var(--gray-color-13); color: var(--gray-color-5); cursor: default;
}

@media only screen and (max-width: 1024px) {
    .btn_primary {height: 46px; font-size: 17px; font-weight: 500; border-radius: 14px; padding: 0 22px; min-width: 132px;}
    .btn_primary > i {padding-inline-end: 12px; font-size: 16px;}
    .btn_primary.compact {height: 42px; border-radius: 10px; font-size: 16px;}
    .btn_primary.compact_2 {height: 36px; border-radius: 10px; font-size: 14px; min-width: 110px; padding: 0 16px;}
}

/* ------------------------------- INPUTS ------------------------------- */

.input_group {
    display: inline-flex; min-height: 38px; width: 100%; margin-top: 22px; position: relative; background: var(--white-color);
    border-bottom: 1px solid var(--gray-color-9); transition: all 0.35s ease-in-out;
}
.input_group::before {
    content: ''; border-bottom: 2px solid var(--primary-color-3); position: absolute; bottom: -1px; inset-inline-start: 0;
    width: 0; height: 0; transition: width 0.35s ease-in-out;
}
.input_group:focus-within::before {width: 100%;}

.input_group > div > i:first-child {
    color: var(--gray-color-8); font-size: 18px; margin-inline-end: 10px; min-width: 18px; text-align: center;
    position: relative; transition: 0.3s ease-in-out;
}
.input_group > div > i.icon_user {font-size: 20px;}
.input_group > div > i.icon_phone {font-size: 18px; top: 13px;}

.input_group > div {display: flex; align-items: center; width: 100%;}
.input_group > div > span {color: var(--gray-color-8); display: flex; align-items: center; height: 36px; line-height: 1;}
.input_group > div > input {
    color: var(--black-color); font-size: 14px; font-weight: 400; height: 36px; line-height: 1; width: 100%; background: none;
}
.input_group > div > input[disabled] {color: var(--primary-color-2); font-weight: 500;}
.input_group > div > textarea {
    font-size: 14px; line-height: 1.4; height: 160px; width: 100%; padding: 10px 0; resize: none;
}

.input_group > label {
    color: var(--gray-color-5); font-size: 14px; position: absolute; top: 0; inset-inline-start: 0; pointer-events: none;
    transform: translate3d(0, 11px, 0); user-select: none; transition: 0.3s ease-in-out;
}
.input_group > small {
    position: absolute; bottom: -17px; color: var(--red-color-1); font-size: 11px; font-weight: 500; pointer-events: none; opacity: 0;
    padding-inline-start: 0; transition: all 0.35s ease-in-out;
}
.input_group > span {color: var(--red-color-1); font-size: 11px; font-weight: 500; padding-top: 4px;}

.input_group.v2 {border: 1px solid var(--gray-color-10); border-radius: 8px; min-height: 34px;}
.input_group.v2 > .select_group > input {padding-inline-start: 10px; height: 32px;}
.input_group.v2 > .select_group > i {bottom: 3.5px;}
.input_group.v2 > .select_group > .results_container {top: 33px;}
.input_group.v2:focus-within::before {width: 0;}
.input_group.v2 > label {top: -1px; inset-inline-start: 10px;}
.input_group.v2.active > label {transform: translate3d(0, 11px, 0); font-size: 14px;}
.input_group.v2 > div > input {padding: 0 10px;}

.selected_items {display: flex; align-items: center; flex-wrap: wrap; min-height: auto; padding: 2px 0; row-gap: 5px;}
.selected_items > div {
    background: var(--primary-color-7); color: var(--primary-color-3);
    font-weight: 500; border-radius: 12px; padding-inline-start: 10px; padding-inline-end: 3px; height: 24px; display: flex; align-items: center;
    font-size: 13px; margin-inline-end: 5px; white-space: nowrap; user-select: none;
}
.selected_items > div > i {
    font-size: 10px; margin-inline-start: 6px; padding: 4px 6px; cursor: pointer; background: var(--white-color); border-radius: 9px;
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
}

.input_group.small .selected_items:has(> *) {padding-top: 10px;}
.input_group.small .selected_items > div {
    border-radius: 10px; padding-inline-start: 10px; padding-inline-end: 2px; height: 20px; font-size: 12px;
}
.input_group.small .selected_items > div > i {width: 16px; height: 16px; border-radius: 8px;}

.input_group.icon > label {inset-inline-start: 27px;}
.input_group.icon > input {padding-inline-start: 32px;}
.input_group.icon > small {inset-inline-start: 27px;}

.input_group.prefix > div {direction: ltr;}
.input_group.prefix > div > input {text-align: start;}

.input_group.active > label, .input_group.active_all > label {
    transform: translate3d(0, -11px, 0); font-size: 12px; color: var(--gray-color-4);
}
.input_group.error {margin-bottom: 12px; border-color: var(--red-color-1); overflow: initial;}
.input_group.error > small.show {opacity: 1;}
.input_group.error::before {border-color: var(--red-color-1);}

.input_simple > input {
    height: 34px; width: 100%; padding: 0 10px; color: var(--black-color); font-size: 14px; font-weight: 400; line-height: 1;
    background: none; border: 1px solid var(--gray-color-10); border-radius: 8px;
}

#show_password {
    color: var(--gray-color-8); font-family: 'glyphicons', sans-serif; font-size: 17px; line-height: 1; position: absolute; top: 7px;
    inset-inline-end: 1px; padding: 3px; background: transparent; border: 0; cursor: pointer;
}

@media only screen and (max-width: 1024px) {
    .input_group {min-height: 46px; margin-top: 24px;}
    .input_group > label {font-size: 15px; transform: translate3d(0, 14px, 0);}
    .input_group.active > label, .input_group.active_all > label {font-size: 13px; transform: translate3d(0, -12px, 0);}
    .input_group > div > input {font-size: 16px; height: 44px;}
    .input_group > div > input::placeholder {font-size: 16px;}
    .input_group > div > span {font-size: 16px; height: 44px;}
    .input_group > div > textarea {font-size: 16px; line-height: 1.5; padding: 12px 0;}
    .input_group > div > textarea::placeholder {font-size: 16px;}
    .input_group > div > i:first-child {font-size: 20px; min-width: 20px; margin-inline-end: 12px; top: 1px;}
    .input_group > small {font-size: 14px; bottom: -22px;}
    .input_group > span {font-size: 12px;}
    .input_group.v2 {min-height: 46px; border-radius: 10px;}
    .input_group.v2 > div > input {height: 44px; padding: 0 12px;}
    .input_group.v2 > div > input::placeholder {font-size: 16px;}
    .input_group.v2 > .select_group > input {height: 44px; padding-inline-start: 12px;}
    .input_group.v2 > .select_group > input::placeholder {font-size: 16px;}
    .input_group.v2 > .select_group > i {bottom: 10px;}
    .input_group.v2 > .select_group > .results_container {top: 45px;}
    .input_group.v2 > label {inset-inline-start: 12px;}
    .input_group.v2.active > label {transform: translate3d(0, 14px, 0); font-size: 15px;}
    .input_group.icon > label {inset-inline-start: 32px;}
    .input_group.icon > input {padding-inline-start: 38px;}
    .selected_items {padding: 6px 0; row-gap: 8px;}
    .selected_items > div {
        height: 32px; font-size: 14.5px; border-radius: 16px; padding-inline-start: 14px; padding-inline-end: 5px; margin-inline-end: 8px;
    }
    .selected_items > div > i {width: 22px; height: 22px; border-radius: 11px; font-size: 12px; margin-inline-start: 8px;}
    .selected_items input[type=text]::placeholder {font-size: 15px;}
    .input_simple > input {height: 44px; font-size: 16px; padding: 0 12px; border-radius: 10px;}
    .input_simple > input::placeholder {font-size: 16px;}
    #show_password {top: 13px; font-size: 20px;}
}

@media only screen and (max-width: 768px) {
    .input_group {min-height: 48px; margin-top: 26px;}
    .input_group > label {font-size: 18px; transform: translate3d(0, 15px, 0);}
    .input_group.active > label, .input_group.active_all > label {font-size: 16px; transform: translate3d(0, -13px, 0);}
    .input_group > div > input {font-size: 18px; height: 48px;}
    .input_group > div > input::placeholder {font-size: 18px;}
    .input_group > div > span {font-size: 18px; height: 48px;}
    .input_group > div > textarea {font-size: 18px; line-height: 1.55; padding: 14px 0;}
    .input_group > div > textarea::placeholder {font-size: 18px;}
    .input_group > div > i:first-child {font-size: 22px; min-width: 22px; margin-inline-end: 14px;}
    .selected_items {padding: 7px 0; row-gap: 10px;}
    .selected_items > div {
        height: 36px; font-size: 15.5px; border-radius: 18px; padding-inline-start: 16px; padding-inline-end: 6px; margin-inline-end: 8px;
    }
    .selected_items > div > i {width: 24px; height: 24px; border-radius: 12px; font-size: 13px; margin-inline-start: 10px;}
    .input_group > span {font-size: 13px;}
    .input_group.v2 {min-height: 50px;}
    .input_group.v2 > div > input {height: 48px;}
    .input_group.v2 > div > input::placeholder {font-size: 18px;}
    .input_group.v2 > .select_group > input {height: 48px;}
    .input_group.v2 > .select_group > input::placeholder {font-size: 18px;}
    .input_group.v2 > .select_group > i {bottom: 12px;}
    .input_group.v2 > .select_group > .results_container {top: 49px;}
    .input_group.v2.active > label {transform: translate3d(0, 15px, 0); font-size: 18px;}
    .selected_items input[type=text]::placeholder {font-size: 16.5px;}
    .input_simple > input {height: 46px; font-size: 18px;}
    .input_simple > input::placeholder {font-size: 18px;}
}

/* ------------------------------- EDITOR ------------------------------- */

.editor_group {position: relative;}
.editor_label {display: block; font-size: 12px; color: var(--gray-color-4); margin-top: 20px;}
.editor_value {min-height: 200px;}
.editor_value.ql-snow .ql-editor {color: var(--gray-color-2); font-size: 14px; line-height: 1.4;}
.editor_value.ql-snow .ql-editor.ql-blank::before {color: var(--gray-color-8); font-size: 14px;}
.editor_value.ql-snow .ql-editor p {padding-top: 14px;}
.editor_value.ql-snow .ql-editor p:first-child {padding-top: 0;}
.editor_value.ql-snow .ql-editor h2 {padding-top: 14px; font-weight: 600; font-size: 14px;}
.editor_value.ql-snow .ql-editor h2:first-child {padding-top: 0;}
.editor_value.ql-snow .ql-editor a {color: var(--primary-color-3);}
.editor_value.ql-snow .ql-editor a:hover {color: var(--primary-color-1);}
.editor_value.ql-snow .ql-editor strong {font-weight: 600;}
.editor_value.ql-snow .ql-editor ol, .editor_value.ql-snow .ql-editor ul {padding-top: 14px;}
.editor_value.ql-snow .ql-editor ol ol, .editor_value.ql-snow .ql-editor ul ul {padding-top: 6px;}
.editor_value.ql-snow .ql-editor li {margin-inline-start: 14px; padding-top: 6px;}
.editor_value.ql-snow .ql-editor li:first-child {padding-top: 0;}

@media only screen and (max-width: 1024px) {
    .editor_label {font-size: 15px; margin-top: 24px;}
    .editor_value {font-size: 16px; line-height: 1.5; min-height: 240px;}
    .editor_value.ql-snow .ql-editor {font-size: 16px; line-height: 1.5; padding: 14px 0;}
    .editor_value.ql-snow .ql-editor.ql-blank::before {font-size: 16px;}
    .editor_value.ql-snow .ql-editor h2 {font-size: 16px; padding-top: 16px;}
    .editor_value.ql-snow .ql-editor p, .editor_value.ql-snow .ql-editor ol, .editor_value.ql-snow .ql-editor ul {padding-top: 16px;}
    .editor_value.ql-snow .ql-editor li {margin-inline-start: 18px; padding-top: 8px;}
}

@media only screen and (max-width: 768px) {
    .editor_label {font-size: 16px; margin-top: 26px;}
    .editor_value {font-size: 18px; line-height: 1.55; min-height: 280px;}
    .editor_value.ql-snow .ql-editor {font-size: 18px; line-height: 1.55; padding: 16px 0;}
    .editor_value.ql-snow .ql-editor.ql-blank::before {font-size: 18px;}
    .editor_value.ql-snow .ql-editor h2 {font-size: 18px; padding-top: 18px;}
    .editor_value.ql-snow .ql-editor p, .editor_value.ql-snow .ql-editor ol, .editor_value.ql-snow .ql-editor ul {padding-top: 18px;}
    .editor_value.ql-snow .ql-editor li {margin-inline-start: 20px; padding-top: 8px;}
}

/* ------------------------------- SELECTS ------------------------------- */

.select_group {width: 100%; position: relative;}
.select_group > i {
    color: var(--gray-color-8); font-size: 20px; position: absolute; inset-inline-end: 7px; bottom: 6px; cursor: pointer;
}
.select_group > input {padding-inline-end: 28px; text-overflow: ellipsis;}
.select_group > input:read-only {cursor: pointer;}
.select_group > .results_container {top: 38px;}

@media only screen and (max-width: 1024px) {
    .select_group > i {font-size: 22px; bottom: 10px; inset-inline-end: 8px;}
    .select_group > .results_container {top: 46px;}
}

@media only screen and (max-width: 768px) {
    .select_group > i {font-size: 24px; bottom: 7px;}
    .select_group > .results_container {top: 50px;}
}

/* ------------------------------- RESULTS CONTAINER ------------------------------- */

.results_container {
    opacity: 0; pointer-events: none; position: absolute; top: 37px; inset-inline-start: 0; width: 100%; overflow-y: auto; z-index: 5;
    background: var(--white-color); max-height: 184px; border-radius: 0 0 8px 8px; transition: all 0.2s ease-in-out;
    overscroll-behavior: contain;
}
.results_container.active {opacity: 1; pointer-events: auto; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);}

.results_container::-webkit-scrollbar {width: 4px; opacity: 0; background: transparent;}
.results_container::-webkit-scrollbar:hover {opacity: 1;}

.results_container::-webkit-scrollbar-track {background-color: transparent; border-radius: 2px;}
.results_container::-webkit-scrollbar-thumb {border-radius: 2px; width: 4px; background: rgba(0, 0, 0, 0.3);}

.result_item {
    width: 100%; padding: 9px 20px 9px 12px; font-size: 13px; min-height: 36px; line-height: 1.3; color: var(--gray-color-2);
    cursor: pointer; border-radius: 3px; position: relative; user-select: none; transition: all 0.2s ease-in-out;
}
.result_item:hover {background: var(--gray-color-15);}
.result_item > i {
    font-size: 10px; color: var(--white-color); position: absolute; top: 10px; inset-inline-end: 8px; transition: all 0s ease-in-out;
}
.result_item:hover > i, .result_item.active > i {color: var(--primary-color-5);}
.result_item > span {color: var(--gray-color-7);}

@media only screen and (max-width: 1024px) {
    .results_container {top: 45px; max-height: 240px; border-radius: 0 0 10px 10px;}
    .result_item {padding: 13px 24px 13px 14px; font-size: 16px; min-height: 48px; line-height: 1.35;}
    .result_item > i {font-size: 14px; top: 16px; inset-inline-end: 12px;}
    .result_item > span {font-size: 15px;}
}
@media only screen and (max-width: 768px) {
    .result_item {font-size: 17px; min-height: 52px; padding: 14px 24px 14px 14px;}
    .result_item > i {font-size: 13px; top: 16px; inset-inline-end: 14px;}
    .result_item > span {font-size: 16px;}
}

/* ------------------------------- CHECKBOXES ------------------------------- */

.checkbox_group_wrap {display: flex; margin-top: 20px;}
.checkbox_group_wrap > div:nth-of-type(2) {
    padding-inline-start: 16px; font-size: 13px; color: var(--black-color); display: flex; align-items: center;
}
.checkbox_group_wrap > div:nth-of-type(2) a {text-decoration: none; color: var(--primary-color-3);}
.checkbox_group_wrap > div:nth-of-type(2) a:hover {color: var(--primary-color-5);}

.checkbox_group > div {
    display: flex; align-items: center; justify-content: center; height: 20px; width: 20px; border: 1px solid var(--gray-color-9);
    background: var(--white-color); border-radius: 3px; cursor: pointer;
    transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
}
.checkbox_group > div:active {transform: scale(0.92);}
.checkbox_group > div > i {color: var(--white-color); font-size: 8px; opacity: 0; transform: scale(0.2) rotate(-25deg); transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);}
.checkbox_group.active > div {background: var(--primary-color-5); border-color: var(--primary-color-5); animation: checkbox_pop 0.28s ease;}
.checkbox_group.active > div > i {opacity: 1; transform: scale(1) rotate(0);}
@keyframes checkbox_pop {
    0% {transform: scale(1);}
    45% {transform: scale(1.15);}
    100% {transform: scale(1);}
}

.checkbox_group.compact > div {height: 16px; width: 16px;}

@media only screen and (max-width: 1024px) {
    .checkbox_group_wrap > div:nth-of-type(2) {font-size: 15px; padding-inline-start: 12px;}
    .checkbox_group > div {height: 24px; width: 24px; border-radius: 4px;}
    .checkbox_group > div > i {font-size: 10px;}
    .checkbox_group.compact > div {height: 20px; width: 20px;}
}
@media only screen and (max-width: 768px) {
    .checkbox_group_wrap > div:nth-of-type(2) {font-size: 16px; padding-inline-start: 14px;}
    .checkbox_group > div {height: 26px; width: 26px; border-radius: 5px;}
    .checkbox_group > div > i {font-size: 11px;}
    .checkbox_group.compact > div {height: 22px; width: 22px;}
}

/* ------------------------------- RADIO ------------------------------- */

.radio_group {display: flex; flex-direction: column; gap: 8px;}

.radio_item {display: flex; margin-top: 8px;}
.radio_item:first-child {margin-top: 0;}
.radio_item > div:nth-of-type(1) {width: 20px; margin-inline-end: 8px;}
.radio_item_icon {
    background-color: var(--white-color); border: 1px solid var(--gray-color-8); border-radius: 50%; height: 16px; width: 16px;
    cursor: pointer;
}
.radio_item.active .radio_item_icon {
    background-color: var(--primary-color-2); border-color: var(--primary-color-2); position: relative;
}
.radio_item.active .radio_item_icon::after {
    content: ''; position: absolute; background-color: var(--white-color); border-radius: 50%; height: 6px; inset-inline-start: 4px;
    top: 4px; width: 6px;
}
.radio_item_title {font-size: 13px; color: var(--gray-color-1); font-weight: 500;}
.radio_item_desc {font-size: 12px; color: var(--gray-color-4); line-height: 1.35; padding-top: 4px;}

@media only screen and (max-width: 1024px) {
    .radio_group {gap: 12px;}
    .radio_item > div:nth-of-type(1) {width: 24px; margin-inline-end: 10px;}
    .radio_item_icon {height: 20px; width: 20px;}
    .radio_item.active .radio_item_icon::after {height: 8px; width: 8px; inset-inline-start: 5px; top: 5px;}
    .radio_item_title {font-size: 15px;}
    .radio_item_desc {font-size: 14px; padding-top: 6px;}
}

@media only screen and (max-width: 768px) {
    .radio_group {gap: 14px;}
    .radio_item > div:nth-of-type(1) {width: 26px; margin-inline-end: 12px;}
    .radio_item_icon {height: 22px; width: 22px;}
    .radio_item.active .radio_item_icon::after {height: 10px; width: 10px; inset-inline-start: 5px; top: 5px;}
    .radio_item_title {font-size: 16px;}
    .radio_item_desc {font-size: 15px;}
}

/* ------------------------------- SWITCH ------------------------------- */

.switch_group {display: flex; align-items: center;}
.switch_group > div:nth-of-type(1) {
    min-width: 28px; height: 16px; border-radius: 8px; background-color: var(--gray-color-10); cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.switch_group > div:nth-of-type(1) > div {
    width: 12px; height: 12px; border-radius: 6px; margin: 2px; background-color: var(--white-color);
    transition: all 0.2s ease-in-out;
}
.switch_group > div:nth-of-type(2) {
    margin-inline-start: 8px; padding-top: 1px; font-size: 12px; line-height: 1.25; color: var(--gray-color-4);
}

.switch_group.active > div:nth-of-type(1) {background-color: var(--primary-color-3);}
.switch_group.active > div:nth-of-type(1) > div {transform: translateX(12px);}
[dir="rtl"] .switch_group.active > div:nth-of-type(1) > div {transform: translateX(-12px);}

@media only screen and (max-width: 1024px) {
    .switch_group > div:nth-of-type(1) {min-width: 36px; height: 20px; border-radius: 10px;}
    .switch_group > div:nth-of-type(1) > div {width: 16px; height: 16px; border-radius: 8px;}
    .switch_group.active > div:nth-of-type(1) > div {transform: translateX(16px);}
    [dir="rtl"] .switch_group.active > div:nth-of-type(1) > div {transform: translateX(-16px);}
    .switch_group > div:nth-of-type(2) {font-size: 15px; padding-inline-start: 12px;}
}

@media only screen and (max-width: 768px) {
    .switch_group > div:nth-of-type(1) {min-width: 40px; height: 22px; border-radius: 11px;}
    .switch_group > div:nth-of-type(1) > div {width: 18px; height: 18px; border-radius: 9px;}
    .switch_group.active > div:nth-of-type(1) > div {transform: translateX(18px);}
    [dir="rtl"] .switch_group.active > div:nth-of-type(1) > div {transform: translateX(-18px);}
    .switch_group > div:nth-of-type(2) {font-size: 16px; padding-inline-start: 14px;}
}

/* ------------------------------- RANGE ------------------------------- */

.range_label {font-size: 12px; color: var(--gray-color-3); padding-bottom: 18px;}
.range_wrap {position: relative; height: 18px;}
.range_wrap > div {position: relative; height: 4px; background: var(--gray-color-11); border-radius: 999px;}
.range_wrap > div > span {
    display: block; position: absolute; top: 0; height: 4px; background: var(--primary-color-5); border-radius: 999px; z-index: 0;
}
.range_wrap > input[type=range] {
    position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: -14px; width: 100%; height: 18px; margin: 0; padding: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 1;
}
.range_wrap > input[type=range]::-webkit-slider-runnable-track {height: 4px; background: transparent;}
.range_wrap > input[type=range]::-moz-range-track {height: 4px; background: transparent;}
.range_wrap > input[type=range]::-webkit-slider-thumb {
    pointer-events: auto; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--white-color); border: 2px solid var(--primary-color-5); cursor: pointer;
}
.range_wrap > input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--white-color); cursor: pointer;
    border: 2px solid var(--primary-color-5);
}
.range_wrap > input:nth-of-type(1) {z-index: 2;}
.range_wrap > input:nth-of-type(2) {z-index: 1;}
.range_vals {
    display: flex; justify-content: space-between; align-items: center; margin-top: 1px; font-size: 13px; padding: 0 4px;
    color: var(--gray-color-5);
}

@media only screen and (max-width: 1024px) {
    .range_label {font-size: 14px; padding-bottom: 22px;}
    .range_wrap {height: 24px;}
    .range_wrap > div {height: 6px;}
    .range_wrap > div > span {height: 6px;}
    .range_wrap > input[type=range] {top: -9px; height: 24px;}
    .range_wrap > input[type=range]::-webkit-slider-runnable-track {height: 6px;}
    .range_wrap > input[type=range]::-moz-range-track {height: 6px;}
    .range_wrap > input[type=range]::-webkit-slider-thumb {height: 22px; width: 22px; margin-top: -8px;}
    .range_wrap > input[type=range]::-moz-range-thumb {height: 22px; width: 22px;}
    .range_vals {font-size: 15px; margin-top: 4px;}
}

@media only screen and (max-width: 768px) {
    .range_label {font-size: 15px; padding-bottom: 24px;}
    .range_vals {font-size: 16px;}
}

/* ------------------------------- TOGGLE ------------------------------- */

.toggle_group {display: flex; gap: 8px;}
.toggle_item {
    display: flex; align-items: center; color: var(--gray-color-2); border: 1px solid var(--gray-color-11); border-radius: 8px;
    height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
    transition: all 0.3s ease-in-out;
}
.toggle_item:hover {border-color: var(--primary-color-3);}
.toggle_item.active {border-color: var(--primary-color-3); background-color: var(--primary-color-3); color: var(--white-color);}

@media only screen and (max-width: 1024px) {
    .toggle_group {gap: 10px;}
    .toggle_item {height: 38px; padding: 0 16px; font-size: 15px; border-radius: 10px;}
}

@media only screen and (max-width: 768px) {
    .toggle_group {flex-wrap: wrap; gap: 8px;}
    .toggle_item {height: 40px; padding: 0 14px; font-size: 16px;}
}

/* ------------------------------- DRAG & DROP ------------------------------- */

.dd_group {display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gray-color-11); border-radius: 12px;}
.dd_group > div {text-align: center; padding: 30px 0;}
.dd_group > div > i {font-size: 42px; color: var(--primary-color-3);}
.dd_group > div > div:nth-of-type(1) {font-size: 16px; font-weight: 500; color: var(--black-color); margin-top: 8px;}
.dd_group > div > div:nth-of-type(2) {margin-top: 12px;}
.dd_group > div > div:nth-of-type(3) {margin-top: 12px; font-size: 12px; color: var(--gray-color-7);}
.dd_group > div > div:nth-of-type(4) {margin-top: 6px; font-size: 12px; color: var(--gray-color-7);}

@media only screen and (max-width: 1024px) {
    .dd_group {border-radius: 10px;}
    .dd_group > div {padding: 56px 20px;}
    .dd_group > div > i {font-size: 52px;}
    .dd_group > div > div:nth-of-type(1) {font-size: 17px; margin-top: 12px;}
    .dd_group > div > div:nth-of-type(2) {margin-top: 16px;}
    .dd_group > div > div:nth-of-type(2) > .btn_primary.compact {height: 46px; padding: 0 22px; font-size: 15px;}
    .dd_group > div > div:nth-of-type(3) {margin-top: 16px; font-size: 13.5px;}
    .dd_group > div > div:nth-of-type(4) {margin-top: 8px; font-size: 13.5px;}
}

@media only screen and (max-width: 768px) {
    .dd_group {border-radius: 12px;}
    .dd_group > div {padding: 60px 18px; width: 100%;}
    .dd_group > div > i {font-size: 60px;}
    .dd_group > div > div:nth-of-type(1) {font-size: 18px; font-weight: 600; margin-top: 14px;}
    .dd_group > div > div:nth-of-type(2) {margin-top: 20px;}
    .dd_group > div > div:nth-of-type(2) > .btn_primary.compact {display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 28px; font-size: 16px; font-weight: 600; min-width: 180px;}
    .dd_group > div > div:nth-of-type(3) {margin-top: 20px; font-size: 14.5px;}
    .dd_group > div > div:nth-of-type(4) {margin-top: 8px; font-size: 14.5px;}
}

/* ------------------------------- UPLOAD GROUP ------------------------------- */

.upload_group {display: flex; margin-top: 18px;}

.upload_group > div:nth-of-type(1) {
    display: flex; position: relative; min-width: 140px; width: 140px; overflow: hidden; border-radius: 8px; cursor: pointer;
}
.upload_group > div:nth-of-type(1) > div {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
    inset-inline-end: 0; opacity: 0; background: rgba(0, 0, 0, 0.3); transition: all 0.3s ease-in-out;
}
.upload_group > div:nth-of-type(1) > div > i {color: rgba(255, 255, 255, 0.6); font-size: 58px;}
.upload_group > div:nth-of-type(1) > img {min-width: 140px; width: 140px;}

.upload_group > div:nth-of-type(2) {padding-inline-start: 20px;}
.upload_group > div:nth-of-type(2) > span {
    display: block; color: var(--gray-color-5); font-size: 13px; line-height: 1.3; max-width: 460px;
}
.upload_group > div:nth-of-type(2) > div {display: flex; padding-top: 12px; max-width: 280px;}
.upload_group > div:nth-of-type(2) > div > div + div {margin-inline-start: 10px;}

.upload_group > div:nth-of-type(1):hover > div {opacity: 1;}

@media only screen and (max-width: 1024px) {
    .upload_group {margin-top: 20px;}
    .upload_group > div:nth-of-type(1) {min-width: 150px; width: 150px; border-radius: 10px;}
    .upload_group > div:nth-of-type(1) > img {min-width: 150px; width: 150px;}
    .upload_group > div:nth-of-type(1) > div > i {font-size: 60px;}
    .upload_group > div:nth-of-type(2) {padding-inline-start: 22px;}
    .upload_group > div:nth-of-type(2) > span {font-size: 14.5px; line-height: 1.5;}
    .upload_group > div:nth-of-type(2) > div {padding-top: 16px; max-width: 360px; gap: 10px;}
    .upload_group > div:nth-of-type(2) > div > div + div {margin-inline-start: 0;}
}

@media only screen and (max-width: 768px) {
    .upload_group {flex-direction: column; align-items: stretch; gap: 16px; margin-top: 18px;}
    .upload_group > div:nth-of-type(1) {min-width: 160px; width: 160px; align-self: flex-start; border-radius: 12px;}
    .upload_group > div:nth-of-type(1) > img {min-width: 160px; width: 160px;}
    .upload_group > div:nth-of-type(1) > div > i {font-size: 64px;}
    .upload_group > div:nth-of-type(2) {padding-inline-start: 0;}
    .upload_group > div:nth-of-type(2) > span {font-size: 15.5px; line-height: 1.55;}
    .upload_group > div:nth-of-type(2) > div {max-width: none; flex-wrap: wrap; gap: 12px; padding-top: 14px;}
    .upload_group > div:nth-of-type(2) > div > div {flex: 1; min-width: 0; text-align: center;}
    .upload_group > div:nth-of-type(2) > div > div + div {margin-inline-start: 0;}
    .upload_group > div:nth-of-type(2) > div > .btn_primary.compact {height: 46px; font-size: 15.5px; font-weight: 600;}
}

#uploaded_image {border: 1px solid var(--black-color); cursor: move; width: 100%; min-height: 300px;}

/* ------------------------------- LIST CARDS (item_card) ------------------------------- */

.item_card {display: flex; margin-top: 12px; padding: 14px; border: 1px solid var(--gray-color-11); border-radius: 8px;}
.item_card:nth-of-type(1) {margin-top: 0;}
.item_card > div:nth-of-type(1) {width: 100%;}
.item_card > div:nth-of-type(1) > div:nth-of-type(1) {font-weight: 500;}
.item_card > div:nth-of-type(2) > div:nth-of-type(2) {margin-top: 8px;}

/* compact modifier (inline controls: edit + delete-icon) */
.item_card_compact > div:nth-of-type(1) {line-height: 1;}
.item_card_compact > div:nth-of-type(1) > div:nth-of-type(2) {margin-top: 5px;}
.item_card_compact > div:nth-of-type(2) {display: flex; flex-direction: row; gap: 10px;}
.item_card_compact > div:nth-of-type(2) > div:nth-of-type(2) {margin-top: 0;}
.item_card_compact > div:nth-of-type(2) > div:nth-of-type(1) {min-width: 50px;}
.item_card_compact > div:nth-of-type(2) > div:nth-of-type(2) {min-width: 34px;}
.item_card_compact > div:nth-of-type(2) > div:nth-of-type(2) > i {padding-inline-end: 0;}

@media only screen and (max-width: 1024px) {
    .item_card {flex-wrap: wrap; margin-top: 14px; padding: 16px; border-radius: 10px; gap: 12px;}
    .item_card > div:nth-of-type(1) {flex: 1 1 100%; min-width: 0;}
    .item_card > div:nth-of-type(1) > div:nth-of-type(1) {font-size: 16px; line-height: 1.4;}
    .item_card > div:nth-of-type(1) > div:nth-of-type(2) {margin-top: 6px; font-size: 14.5px; line-height: 1.5;}
    .item_card > div:nth-of-type(1) > div:nth-of-type(3) {margin-top: 6px; font-size: 14px; line-height: 1.5;}
    .item_card > div:nth-of-type(2) {flex: 1 1 100%; display: flex; flex-direction: row; gap: 10px;}
    .item_card > div:nth-of-type(2) > div {flex: 1; min-width: 0;}
    .item_card > div:nth-of-type(2) > div:nth-of-type(2) {margin-top: 0;}
    .item_card > div:nth-of-type(2) .btn_primary.compact_2,
    .item_card > div:nth-of-type(2) .btn_primary.compact {width: 100%; height: 42px; font-size: 14.5px;}
    .item_card_compact > div:nth-of-type(1) {line-height: 1.4;}
    .item_card_compact > div:nth-of-type(2) > div:nth-of-type(1) {height: 42px; font-size: 14.5px;}
    .item_card_compact > div:nth-of-type(2) > div:nth-of-type(2) {flex: 0 0 auto; min-width: 56px; height: 42px;}
    .item_card_compact > div:nth-of-type(2) > div:nth-of-type(2) > i {font-size: 16px;}
}

@media only screen and (max-width: 768px) {
    .item_card {padding: 18px; border-radius: 12px; gap: 14px;}
    .item_card > div:nth-of-type(1) > div:nth-of-type(1) {font-size: 17.5px; font-weight: 600; line-height: 1.4;}
    .item_card > div:nth-of-type(1) > div:nth-of-type(2) {margin-top: 8px; font-size: 15.5px; line-height: 1.55;}
    .item_card > div:nth-of-type(1) > div:nth-of-type(3) {margin-top: 8px; font-size: 15px; line-height: 1.55;}
    .item_card > div:nth-of-type(2) {gap: 12px;}
    .item_card > div:nth-of-type(2) .btn_primary.compact_2,
    .item_card > div:nth-of-type(2) .btn_primary.compact {height: 46px; font-size: 15.5px; font-weight: 600;}
    .item_card_compact > div:nth-of-type(2) > div:nth-of-type(1) {height: 46px; font-size: 15.5px; font-weight: 600;}
    .item_card_compact > div:nth-of-type(2) > div:nth-of-type(2) {min-width: 60px; height: 46px;}
    .item_card_compact > div:nth-of-type(2) > div:nth-of-type(2) > i {font-size: 17px;}
}

/* ------------------------------- RESPONSIVE TWO-COLUMN LAYOUT (r_layout) ------------------------------- */
/* Used by: settings_layout, profile_layout, profile_company_edit_layout (added as additional class). */
/* Mobile behavior: menu and section swap via .show_section; aside hidden. */

@media only screen and (max-width: 1024px) {
    .r_layout {display: block; position: relative; width: 100%; gap: 0;}
    .r_layout_col_menu {width: 100%; padding: 0;}
    .r_layout_col_menu .sidebar {min-height: 0; margin-bottom: 0; padding: 14px 16px 16px; border: none; border-radius: 0;}
    .r_layout_col_section {width: 100%; padding: 0; display: flex; flex-direction: column; background: var(--gray-color-14a);}
    .r_layout_col_aside {display: none;}
    .r_layout .r_layout_col_section {display: none;}
    .r_layout.show_section .r_layout_col_menu {display: none;}
    .r_layout.show_section .r_layout_col_section {display: flex;}
    .r_layout_section_body {flex: 1; padding: 0;}
    .r_layout_section_body > .section {border: none; padding: 16px; border-radius: 0;}
}

/* ------------------------------- POPUP ------------------------------- */

.popup {
    background: var(--white-color); border: 1px solid var(--gray-color-12); border-radius: 3px; padding: 35px 40px 60px;
    max-width: 370px; box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.25); display: none; z-index: 10; position: absolute;
    top: calc(100% + 16px); inset-inline-start: -14px; min-width: 370px;
}
.popup.active {display: block;}
.popup .close {position: absolute; inset-inline-end: 16px; top: 15px;}
.popup .triangle {
    display: block; height: 20px; width: 20px; background-color: inherit; border: inherit; transform: rotate(-45deg);
    position: absolute; top: -10px; inset-inline-start: 12px; border-radius: 3px; clip-path: polygon(100% 100%, 0% 0%, 100% 0%);
}
.popup .title {font-size: 20px; font-weight: 600; color: var(--black-color); margin-bottom: 25px;}
.popup .desc {font-size: 14px; font-weight: 500; color: var(--gray-color-4); margin-bottom: 20px;}
.popup .desc span {font-weight: 700;}
.popup > p:last-child {margin-bottom: 0;}

/* ------------------------------- MENU POPUP ------------------------------- */

.menu_popup {
    width: 140px; position: absolute; top: 42px; inset-inline-end: -5px; z-index: 999; pointer-events: none; opacity: 0;
    background: var(--white-color); border-radius: 6px; text-align: start; cursor: default;
    filter: drop-shadow(0px 4px 14px rgba(98, 113, 126, 0.24)); transform: translateY(10px); transition: all 0.1s ease-in-out;
}
.menu_popup.active {pointer-events: auto; opacity: 1; transform: translateY(0px);}
.menu_popup:after {
    content: ''; position: absolute; top: -6px; inset-inline-end: 20px; width: 12px; height: 12px; transform: rotate(45deg);
    background: var(--white-color); z-index: 1;
}

.menu_popup > div {
    line-height: 38px; padding: 0 15px; border-radius: 6px; font-size: 13px; color: var(--gray-color-3); position: relative;
    z-index: 10; cursor: pointer;
}
.menu_popup > div:hover {background: var(--gray-color-14);}

/* ------------------------------- PROGRESS ------------------------------- */

.progress {
    height: 6px; border-radius: 3px; background: var(--gray-color-12); overflow: hidden;
}
.progress_bar {
    height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color-3) 0%, var(--secondary-color-4) 100%);
    transition: width 0.4s ease;
}
.progress.level_0 .progress_bar {background: var(--gray-color-5);}
.progress.level_1 .progress_bar {background: var(--primary-color-3);}

/* ------------------------------- PAGINATOR ------------------------------- */

#paginator {display: inline-flex; align-items: center;}
#paginator > a, #paginator > span {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-inline-end: 4px;
    color: var(--gray-color-2);
}
#paginator > a {text-decoration: none; cursor: pointer; border-radius: 8px; border: 1px solid var(--gray-color-10);}
#paginator > a:hover,
#paginator > a.active {color: var(--white-color); background: var(--primary-color-3); border: 1px solid var(--primary-color-3);}
#paginator > a:last-child {margin: 0;}

/* ------------------------------- AUTOSAVE ------------------------------- */

#autosave {
    display: flex; align-items: start; font-size: 12px; font-weight: 500; color: var(--gray-color-5); padding-inline-start: 20px;
    margin-top: 10px;
}
#autosave > i {height: 13px; font-size: 12px; margin-inline-end: 8px; padding-top: 1px;}
#autosave > div > span:nth-of-type(2) {display: none;}

#autosave.active {color: var(--primary-color-3);}
#autosave.active > div > span:nth-of-type(1) {display: none;}
#autosave.active > div > span:nth-of-type(2) {display: inline;}

@media only screen and (max-width: 1024px) {
    #autosave {display: none;}
}

/* ------------------------------- SHARE (link + socials) ------------------------------- */
/* Used by: company/job/user share modals, profile invite friend modal. */
/* Add `.compact` to .share_socials_items for a 4-column compact variant. */

.share_link_container {display: flex; gap: 12px; margin-bottom: 28px;}
.share_link_input {
    flex: 1; width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--gray-color-12); border-radius: 10px;
    background: var(--gray-color-15); color: var(--black-color); font-size: 14px; text-overflow: ellipsis; outline: none;
}
.share_link_input:focus {border-color: var(--primary-color-3);}

.share_socials_title {margin-bottom: 16px; color: var(--gray-color-5); font-size: 13px; font-weight: 500;}
.share_socials_items {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.share_socials_items.compact {grid-template-columns: repeat(4, 1fr); gap: 10px;}

.share_social_item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 10px;
    border: 1px solid transparent; border-radius: 14px; background: var(--gray-color-15);
    text-decoration: none; transition: all 0.2s ease;
}
.share_social_item:hover {
    border-color: var(--gray-color-12); background: var(--white-color); transform: translateY(-2px);
}
.share_social_item i {font-size: 28px;}
.share_social_item span {color: var(--black-color); font-size: 13px; font-weight: 500;}
.share_social_item.telegram i {color: #26A5E4;}
.share_social_item.linkedin i {color: #0077B5;}
.share_social_item.whatsapp i {color: #25D366;}
.share_social_item.email i {color: var(--primary-color-3);}

.share_socials_items.compact .share_social_item {gap: 8px; padding: 16px 6px; border-radius: 12px;}
.share_socials_items.compact .share_social_item:hover {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);}
.share_socials_items.compact .share_social_item i {font-size: 24px;}
.share_socials_items.compact .share_social_item span {font-size: 12px;}

html.dark .share_social_item:hover {background: var(--gray-color-14);}

@media only screen and (max-width: 768px) {
    .share_link_container {flex-direction: column;}
    .share_link_container .btn_primary {width: 100%;}
    .share_socials_items,
    .share_socials_items.compact {grid-template-columns: repeat(2, 1fr);}
}

/* ------------------------------- EMPTY STATE (list placeholder) ------------------------------- */
/* Used by: jobs list / users list / profile jobs / profile companies (empty placeholders). */

.empty_state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; border: 1px dashed var(--gray-color-11); border-radius: 10px;
    background: var(--gray-color-15); text-align: center;
}
.empty_state_icon {
    display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--gray-color-14); color: var(--gray-color-5);
}
.empty_state_icon > i {font-size: 18px;}
.empty_state_title {padding-top: 16px; color: var(--black-color); font-size: 18px; font-weight: 500;}
.empty_state_desc {padding-top: 8px; max-width: 420px; color: var(--gray-color-5); font-size: 14px; line-height: 1.4;}
.empty_state > .btn_primary {margin-top: 20px;}

/* compact: inline empty state for narrow side-panels (no dashed border, solid bg, smaller icon/text). */
.empty_state.compact {
    gap: 6px; padding: 18px 14px; border: none; border-radius: 12px;
    background: var(--gray-color-15);
}
.empty_state.compact > .empty_state_icon {
    width: 36px; height: 36px; margin-bottom: 2px; background: var(--white-color); color: var(--gray-color-7);
}
.empty_state.compact > .empty_state_icon > i {font-size: 18px;}
.empty_state.compact > .empty_state_title {padding-top: 0; font-size: 13px; font-weight: 600;}
.empty_state.compact > .empty_state_desc {padding-top: 0; color: var(--gray-color-7); font-size: 12px; line-height: 1.4;}

html.dark .empty_state {background: var(--gray-color-14); border-color: var(--gray-color-11);}
html.dark .empty_state_icon {background: var(--gray-color-13); color: var(--gray-color-4);}
html.dark .empty_state.compact {background: var(--gray-color-14);}
html.dark .empty_state.compact > .empty_state_icon {background: var(--gray-color-13);}

@media only screen and (max-width: 1024px) {
    .empty_state:not(.compact) {padding: 50px 20px;}
    .empty_state:not(.compact) > .empty_state_icon {width: 60px; height: 60px;}
    .empty_state:not(.compact) > .empty_state_icon > i {font-size: 20px;}
    .empty_state:not(.compact) > .empty_state_title {padding-top: 18px; font-size: 18px;}
    .empty_state:not(.compact) > .empty_state_desc {padding-top: 10px; font-size: 14.5px; line-height: 1.5;}
}

@media only screen and (max-width: 768px) {
    .empty_state:not(.compact) {padding: 36px 16px;}
    .empty_state:not(.compact) > .empty_state_icon {width: 64px; height: 64px;}
    .empty_state:not(.compact) > .empty_state_icon > i {font-size: 22px;}
    .empty_state:not(.compact) > .empty_state_title {padding-top: 18px; font-size: 17px;}
    .empty_state:not(.compact) > .empty_state_desc {padding-top: 10px; font-size: 15px; line-height: 1.55;}
    .empty_state > .btn_primary {margin-top: 24px;}
}

/* ------------------------------- INFO CARD (list row with icon + body + actions) ------------------------------- */
/* Used by: settings privacy_data / credentials / sessions / security events lists. */
/* Modifiers: .compact (smaller padding & icon), .danger (red), .current (primary accent), .neutral (gray icon). */

.info_card_list {display: flex; flex-direction: column; gap: 10px; padding-top: 18px;}
.info_card {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 12px;
    border: 1px solid var(--gray-color-12); background: var(--white-color); transition: border-color 0.2s ease-out;
}
.info_card:hover {border-color: var(--gray-color-10);}
.info_card.danger {border-color: #fde2e2; background: #fff8f8;}
.info_card.danger:hover {border-color: #f5b5b5;}
.info_card.current {border-color: var(--primary-color-3); background: var(--primary-color-9);}

.info_card_icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-color-9); color: var(--primary-color-3);
}
.info_card_icon > i {font-size: 16px;}
.info_card_icon > i.icon_lock {font-size: 18px;}
.info_card_icon.neutral {background: var(--gray-color-14); color: var(--gray-color-3);}
.info_card_icon.danger {background: #fde2e2; color: #d6336c;}
.info_card_icon.github_icon {background: #181717; color: var(--white-color);}
.info_card_icon.github_icon > i {font-size: 18px;}
.info_card_icon.linkedin_icon {background: #0A66C2; color: var(--white-color);}
.info_card_icon.linkedin_icon > i {font-size: 18px;}
.info_card.current .info_card_icon {background: var(--white-color); color: var(--primary-color-3);}

.info_card_body {flex: 1; min-width: 0;}
.info_card_title {font-size: 14px; font-weight: 600; color: var(--black-color); line-height: 1.3;}
.info_card_title.uppercase {
    font-size: 13px; font-weight: 500; color: var(--gray-color-5); letter-spacing: 0.2px; text-transform: uppercase;
}
.info_card_title.flex {display: flex; align-items: center; gap: 10px; font-weight: 500;}
.info_card_value {
    font-size: 15px; font-weight: 500; color: var(--black-color); line-height: 1.3; padding-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.info_card_meta {font-size: 12px; color: var(--gray-color-7); line-height: 1.4; padding-top: 4px;}
.info_card_meta.row {display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--gray-color-5);}
.info_card_meta_inline {font-size: 11px; font-weight: 400; color: var(--gray-color-7); letter-spacing: 0; text-transform: none;}
.info_card_meta_muted {color: var(--gray-color-7); padding-top: 2px;}
.info_card_meta_dot {opacity: 0.5;}

.info_card_actions {flex-shrink: 0; display: flex; align-items: center;}
.info_card_actions.start {align-items: start;}
.info_card_revoke {
    width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: var(--gray-color-5); cursor: pointer; transition: all 0.2s ease-out;
}
.info_card_revoke:hover {background: var(--red-color-4); color: var(--red-color-1);}
.info_card_revoke > i {font-size: 14px;}

.info_card_badge {
    display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-inline-start: 6px; border-radius: 9px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; vertical-align: middle;
}
.info_card_badge.verified {background: var(--primary-color-9); color: var(--primary-color-3);}
.info_card_badge.unverified {background: #fff5f5; color: #f03e3e;}
.info_card_badge.current {
    height: 20px; padding: 0 8px; border-radius: 10px;
    background: var(--primary-color-3); color: var(--white-color);
    font-size: 11px; font-weight: 500; letter-spacing: 0.2px; text-transform: none;
}

/* compact variant: smaller padding & icon (security events) */
.info_card.compact {gap: 12px; padding: 12px 14px; border-radius: 10px;}
.info_card.compact .info_card_icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--gray-color-14); color: var(--gray-color-5);
}
.info_card.compact .info_card_icon > i {font-size: 14px;}
.info_card.compact .info_card_title {font-size: 13px; font-weight: 500; line-height: 1.3;}
.info_card.compact .info_card_meta {padding-top: 3px;}

@media only screen and (max-width: 1024px) {
    .info_card {padding: 16px 18px; gap: 16px;}
    .info_card_icon {width: 44px; height: 44px; border-radius: 12px;}
    .info_card_icon > i {font-size: 19px;}
    .info_card_icon > i.icon_lock {font-size: 21px;}
    .info_card_icon.github_icon > i, .info_card_icon.linkedin_icon > i {font-size: 21px;}
    .info_card_title {font-size: 15px;}
    .info_card_title.uppercase {font-size: 14px;}
    .info_card_value {font-size: 16px; padding-top: 6px;}
    .info_card_meta {font-size: 13px; padding-top: 6px;}
    .info_card_meta_inline {font-size: 12px;}
    .info_card_badge {height: 20px; padding: 0 8px; font-size: 11px; border-radius: 10px;}
    .info_card_badge.current {height: 22px; padding: 0 10px; font-size: 12px; border-radius: 11px;}
    .info_card_revoke {width: 40px; height: 40px; border-radius: 10px;}
    .info_card_revoke > i {font-size: 17px;}
    .info_card.compact {padding: 14px 16px; gap: 14px;}
    .info_card.compact .info_card_icon {width: 40px; height: 40px; border-radius: 10px;}
    .info_card.compact .info_card_icon > i {font-size: 17px;}
    .info_card.compact .info_card_title {font-size: 14px;}
}

@media only screen and (max-width: 768px) {
    .info_card {padding: 16px; gap: 14px; flex-wrap: wrap; border-radius: 12px;}
    .info_card_icon {width: 48px; height: 48px; border-radius: 12px;}
    .info_card_icon > i {font-size: 21px;}
    .info_card_icon > i.icon_lock {font-size: 22px;}
    .info_card_icon.github_icon > i, .info_card_icon.linkedin_icon > i {font-size: 22px;}
    .info_card_title {font-size: 16px;}
    .info_card_title.uppercase {font-size: 14px; letter-spacing: 0.3px;}
    .info_card_title.flex {font-size: 16px; gap: 8px; flex-wrap: wrap;}
    .info_card_value {font-size: 17px; padding-top: 6px;}
    .info_card_meta {font-size: 14px; line-height: 1.45; padding-top: 6px;}
    .info_card_badge {height: 22px; padding: 0 9px; font-size: 11px; border-radius: 11px;}
    .info_card_badge.current {height: 24px; padding: 0 10px; font-size: 12px; border-radius: 12px;}
    .info_card_meta_dot {display: none;}
    .info_card_actions {width: 100%;}
    .info_card_actions > .btn_primary {width: 100%; text-align: center;}
    .info_card_revoke {width: 44px; height: 44px; border-radius: 10px;}
    .info_card_revoke > i {font-size: 18px;}
    .info_card.compact {padding: 14px; gap: 14px; border-radius: 12px;}
    .info_card.compact .info_card_icon {width: 44px; height: 44px; border-radius: 12px;}
    .info_card.compact .info_card_icon > i {font-size: 19px;}
    .info_card.compact .info_card_title {font-size: 15px;}
}

html.dark .info_card {background: var(--gray-color-14); border-color: var(--gray-color-11);}
html.dark .info_card:hover {border-color: var(--gray-color-9);}
html.dark .info_card.current {background: var(--primary-color-8); border-color: var(--primary-color-3);}
html.dark .info_card_icon {background: var(--primary-color-8); color: var(--primary-color-2);}
html.dark .info_card_icon.neutral {background: var(--gray-color-12); color: var(--gray-color-5);}
html.dark .info_card_icon.github_icon {background: #2a2f37; color: #f5f7fa;}
html.dark .info_card_icon.linkedin_icon {background: #0A66C2; color: #ffffff;}
html.dark .info_card.current .info_card_icon {background: var(--gray-color-14); color: var(--primary-color-2);}
html.dark .info_card_badge.verified {background: var(--primary-color-8); color: var(--primary-color-1);}
html.dark .info_card_badge.unverified {background: var(--red-color-4); color: var(--red-color-1);}
html.dark .info_card_revoke:hover {background: var(--red-color-4); color: var(--red-color-1);}

/* ------------------------------- ITEM TAGS (meta line under list cards) ------------------------------- */
/* Used by: jobs/companies/profile_company/profile_job/user rows. */
/* Modifiers: .spaced (padding-top), .dim (gray-2), .tight (line-height 1.4), .job_meta (indented compact variant). */

.item_tags {color: var(--gray-color-3); font-size: 13px; line-height: 1.5;}
.item_tags > b {font-weight: 500;}
.item_tags.spaced {padding-top: 6px;}
.item_tags.dim {color: var(--gray-color-2);}
.item_tags.tight {line-height: 1.4;}

.item_tags.job_meta {
    padding-top: 4px; padding-inline-start: 64px;
    color: var(--gray-color-4); font-size: 12px; line-height: 1.3;
}
.item_tags.job_meta > a {color: var(--gray-color-4); text-decoration: none;}
.item_tags.job_meta > a:hover {color: var(--primary-color-3);}

@media only screen and (max-width: 1024px) {
    .item_tags {padding-top: 6px; font-size: 13.5px;}
    .item_tags.dim {padding-top: 10px; font-size: 14px; line-height: 1.55;}
    .item_tags.tight {padding-top: 8px; font-size: 14px; line-height: 1.45;}
    .item_tags.job_meta {padding-top: 4px; padding-inline-start: 64px; font-size: 12px; line-height: 1.3;}
}

@media only screen and (max-width: 768px) {
    .item_tags {padding-top: 8px; font-size: 14.5px; line-height: 1.55;}
    .item_tags.dim {padding-top: 12px; font-size: 15px; line-height: 1.6;}
    .item_tags.tight {padding-top: 10px; font-size: 14px; line-height: 1.5;}
    .item_tags.job_meta {padding-top: 8px; padding-inline-start: 0; font-size: 16px; line-height: 1.4;}
}

/* ------------------------------- LIST EMPTY (inline empty state for list rows) ------------------------------- */
/* Compact one-line empty placeholder used inside list containers. */
/* Use `.empty_state` for full-page/large empty states. */

.list_empty {
    display: flex; padding: 18px 20px; border: var(--surface-border); border-radius: 12px; background: var(--white-color);
}

@media only screen and (max-width: 1024px) {
    .list_empty {padding: 16px; border-radius: 12px; font-size: 14.5px;}
}

@media only screen and (max-width: 768px) {
    .list_empty {padding: 18px; border-radius: 14px; font-size: 15.5px;}
}