/*colors*/
:root {
    /*grey*/
    --gray-900: #141414;
    --gray-800: #292929;
    --gray-700: #424242;
    --gray-600: #525252;
    --gray-500: #737373;
    --gray-400: #A3A3A3;
    --gray-300: #D6D6D6;
    --gray-200: #E5E5E5;
    --gray-100: #F5F5F5;
    --gray-70: #FCFCFC;
    --gray-50: #FAFAFA;
    --gray-20: #F2F4F7;
    --gray-90: #EDEDED;
    --gray-border: #D6D6D6;

    --white: #FFFFFF;

    --black-900: #000000;
    --black-700: #03121F;
    --black-600: #101828;
    --black-500: #0A2A3D;
    --black-400: #062137;

    --text-600: #475467;
    --text-700: #344054;

    --dark-bg: #062138;
    --dark-bg-btn-hover: #0A2A47;
    --dark-bg-hover: #0B375D;
    --dark-border: #105189;
    --gray-bg: #f9f9f9;
    --gray-bg-hover: #f9f9f9;

    --error-600: #D92D20;
    --error-500: #F04438;
    --error-300: #EF8181;

    --yellow-300: #E2CA74;

    --violet-50: #F8F3FD;
    --violet-200: #CEACF0;
    --violet-400: #781AD5;

    --medium-400: #DD7118;
    --medium-200: #F3CCAC;
    --medium-50: #FDF8F3;

    /* vue-date-picker*/
    --dp-cell-size: 40px;
    --dp-cell-padding: 0;
    --dp-row-margin: 2px;

    /* components size */
    --default-header-height: 64px;

    /*-----------------------------------------------------обновленные цвета из брендбука-------------------------------------------------*/

    /* ----------------------------------------------------Основная палитра--------------------------------------------------------- */

    /* ---------------нейроинформ (кибермонитор)-------------------------*/
    --color-primary: #CB4320;
    --color-primary-50: #FEF6F4;
    --color-primary-100: #FDE5DF;
    --color-primary-300: #E8937D;
    --color-primary-400: #D94B26;
    --color-primary-500: #AE3C1E;
    --color-primary-700: #571E0F;
    --color-primary-800: #36130A;
    --color-primary-hover: #983218;
    --color-primary-active: #662210;
    --color-primary-shadow: rgba(203, 67, 32, 0.3);

    /* Акцентная палитра */
    --color-accent: #1B5E99;
    --color-accent-hover: #154A78;

    /* Нейтральные цвета */
    --color-neutral-900: #121111;
    --color-neutral-800: #1A1D1F;
    --color-neutral-700: #2A2E32;
    --color-neutral-600: #40464A;
    --color-neutral-500: #555D63;
    --color-neutral-400: #6A747C;
    --color-neutral-300: #A6ACB0;
    --color-neutral-200: #D2D5D8;
    --color-neutral-100: #EDEEEF;
    --color-neutral-90: #1F0A05;
    --color-neutral-80: #484342;
    --color-neutral-75: #F2F2F3;
    --color-neutral-70: #662210;
    --color-neutral-60: #AEA9A8;
    --color-neutral-50: #C8CCCF;
    --color-neutral-40: #D6D4D3;
    --color-neutral-30: #EFEEEE;
    --color-neutral-20: #F0F1F2;
    /*--color-neutral-10: в фигме это neutral-50 Переделать*/
    --color-neutral-10: #F8F8F8;
    --color-white: #FFFFFF;


    /* Статусные цвета */
    --color-disabled-bg: #EDEEEF;
    --color-disabled-border: #FFFFFF;
    --color-disabled-text: #C8CCCF;
    --color-inverted: #FE987E;
    --color-inverted-hover: #FFC1B2;
    --inverted-shadow: rgba(254,152,126,0.3);
}

/*!* Темная тема *!*/
[data-theme="dark"] {
    --color-primary: #FE987E;
    --color-primary-hover: #FFC1B2;
    --color-primary-active: #FFE5DF;
    --color-primary-shadow: rgba(254, 152, 126, 0.3);

    --color-neutral-700: #ffffff;
    --color-neutral-200: #D6D4D3;
    --color-neutral-100: #F8F8F8;
    --color-neutral-80: #D6D4D3;
    --color-neutral-60: #605A58;
    --color-white: #1A1A1A;

    /* Кастомные переопределения */
    --header-select-focus: #0A3152;
    --secondary-btn-color-hover: #FFC1B2;
    --secondary-btn-border-active: #FFE5DF;
    --secondary-btn-color-active: #FFE5DF;

}

/* ---------------Intruforce-------------------------*/

[data-brand="intruforce"] {
    --color-primary: #1B5E99;
    --color-primary-50: #F2F7FB;
    --color-primary-100: #DEEAF5;
    --color-primary-300: #7AADD9;
    --color-primary-400: #2276BF;
    --color-primary-500: #1B5E99;
    --color-primary-700: #0F3556;
    --color-primary-800: #0A2136;
    --color-primary-hover: #154A78;
    --color-primary-active: #0F3556;
    --color-primary-shadow: rgba(175,206,232,0.3);

    --color-neutral-700: #2A2E32;
    --color-neutral-600: #40464A;
    --color-neutral-300: #A6ACB0;
    --color-neutral-200: #D2D5D8;
    --color-neutral-100: #EDEEEF;
    --color-neutral-90: #0B375D40;
    --color-neutral-80: #40464A;
    --color-neutral-70: #105189;
    --color-neutral-60: #A6ACB0;
    --color-neutral-30: #EDEEEF;

    --color-inverted: #7AADD9;
    --color-inverted-hover:#AFCEE8;
    --inverted-shadow: rgba(175,206,232,0.3);
}

/* Темная тема для Intruforce */
[data-brand="intruforce"][data-theme="dark"] {
    --color-primary: #7AADD9;
    --color-primary-hover: #AFCEE8;
    --color-primary-active: #DEEAF5;
    --color-primary-shadow: rgba(175,206,232,0.3);

    --color-neutral-700: #ffffff;
    --color-neutral-100: #DEEAF5;
    --color-neutral-200: #D2D5D8;
    --color-neutral-80: #7AADD9;
    --color-neutral-60: #555D63;
    --color-white: #0B375D;

    /* Кастомные переопределения */
    --header-select-focus: #0A3152;
    --secondary-btn-color-hover: #AFCEE8;
    --secondary-btn-border-active: #DEEAF5;
    --secondary-btn-color-active: #DEEAF5;
}

/* ---------------Itprotect-------------------------*/

[data-brand="itprotect"] {
    --color-primary: #6015AA;
    --color-primary-50: #F8F3FD;
    --color-primary-100: #EBDDF9;
    --color-primary-300: #AE76E6;
    --color-primary-400: #781AD5;
    --color-primary-500: #6015AA;
    --color-primary-700: #300A55;
    --color-primary-800: #1E0635;
    --color-primary-hover: #481080;
    --color-primary-active: #300A55;
    --color-primary-shadow: rgba(96, 21, 170,0.3);

    --color-neutral-700: #2A2E32;
    --color-neutral-600: #40464A;
    --color-neutral-400: #6A747C;
    --color-neutral-300: #A6ACB0;
    --color-neutral-200: #D2D5D8;
    --color-neutral-100: #EDEEEF;
    --color-neutral-90: #0B375D40;
    --color-neutral-80: #40464A;
    --color-neutral-70: #105189;
    --color-neutral-60: #A6ACB0;

    --color-inverted: #AE76E6;
    --color-inverted-hover:#CEACF0;
    --color-primary-shadow: rgba(96, 21, 170,0.5);
}

/* Темная тема для Itprotect */
[data-brand="itprotect"][data-theme="dark"] {
    --color-primary: #AE76E6;
    --color-primary-hover: #CEACF0;
    --color-primary-active: #EBDDF9;
    --color-primary-shadow: rgba(96, 21, 170,0.5);

    --color-neutral-700: #ffffff;
    --color-neutral-100: #EDEEEF;
    --color-neutral-200: #D2D5D8;
    --color-neutral-80: #7AADD9;
    --color-neutral-60: #555D63;
    --color-white: #6015AA;

    /* Кастомные переопределения */
    --header-select-focus: #0A3152;
    --secondary-btn-color-hover: #AFCEE8;
    --secondary-btn-border-active: #DEEAF5;
    --secondary-btn-color-active: #DEEAF5;
}


/* ----------------------------------------------------Компоненты--------------------------------------------------------- */

/* ---------------нейроинформ (кибермонитор)-------------------------*/
:root {
    /*links*/
    --default-link: #F15127;
    --default-link-hover: #C1411F;
    --default-link-active: #913117;
    --default-link-focus: #913117;
    --default-link-visited: #9C2EEF;
    --default-link-disabled: #AEA9A8;
    --default-link-shadow: rgba(193,65,31,0.3);

    /*headers*/
    --header-bg: #210B06;
    --header-bg-hover: #302D2C;
    --header-bg-checked: #602010;
    --header-bg-focus: 0px 0px 0px 2px rgba(96,32,16,0.5);
    --header-select: #240C06;
    --header-select-border: #602010;
    --header-select-hover: #3C140A;
    --header-select-active: #3C140A;
    --header-select-active-border: #913117;
    --header-select-focus: 0px 0px 0px 2px rgba(96,32,16,0.5);
    --header-border: #662210;

    /*buttons*/
    --primary-btn-bg: #AE3C1E;
    --primary-btn-bg-hover: #822D17;
    --primary-btn-bg-active: #571E0F;
    --primary-btn-border: #AE3C1E;
    --primary-btn-border-hover: #822D17;
    --primary-btn-border-active: #571E0F;
    --primary-btn-color: #ffffff;
    --primary-btn-color-hover:  #ffffff;
    --primary-btn-color-active: #ffffff;
    --primary-btn-shadow: rgba(193,65,31,0.3);

    --disabled-btn-bg: #EFEEEE;
    --disabled-btn-border: #EFEEEE;
    --disabled-btn-color: #C8CCCF;

    --secondary-btn-bg: #ffffff;
    --secondary-btn-border: #D2D5D8;
    --secondary-btn-color: #40464A;
    --secondary-btn-border-hover: #A6ACB0;
    --secondary-btn-color-hover: #2A2E32;
    --secondary-btn-border-active: #555D63;
    --secondary-btn-color-active: #1A1D1F;
    --secondary-btn-shadow: rgba(41,45,48,0.1);

    --terniary-btn-color: #40464A;
    --terniary-btn-border: transparent;
    --terniary-btn-bg-hover: #F8F8F8;
    --terniary-btn-border-hover: #F8F8F8;
    --terniary-btn-color-hover: #2A2E32;
    --terniary-btn-border-active: #A6ACB0;
    --terniary-btn-bg-active: #F8F8F8;
    --terniary-btn-color-active: #1E1C1C;
    --terniary-btn-shadow: rgba(41,45,48,0.1);

    --inverted-btn-bg: transparent;
    --inverted-btn-border: #FE987E;
    --inverted-btn-color: #FE987E;
    --inverted-btn-border-hover: #FFC1B2;
    --inverted-btn-color-hover: #FFC1B2;
    --inverted-btn-border-active: #FFE5DF;
    --inverted-btn-color-active: #FFE5DF;
    --inverted-btn-shadow: rgba(175,206,232,0.3);

    /* components size */
    --default-header-height: 64px;

    /*cookies*/
    --cookie-bg: #210B06;
}

[data-theme="dark"] {
    /*links*/
    --default-link: #FE987E;
    --default-link-hover: #FFC1B2;
    --default-link-active: #FFE5DF;
    --default-link-focus: #FE987E;
    --default-link-disabled: #AEA9A8;
    --default-link-shadow: rgba(255,193,178,0.3);

    /*buttons*/
    --primary-btn-bg: transparent;
    --primary-btn-bg-hover: transparent;
    --primary-btn-bg-active:transparent;
    --primary-btn-border: #FE987E;
    --primary-btn-border-hover: #FFC1B2;
    --primary-btn-border-active: #FFE5DF;
    --primary-btn-color: #FE987E;
    --primary-btn-color-hover: #FFC1B2;
    --primary-btn-color-active: #FFE5DF;
    --primary-btn-shadow: rgba(175,206,232,0.3);

    --secondary-btn-bg: transparent;
    --secondary-btn-border: #FE987E;
    --secondary-btn-color: #FE987E;
    --secondary-btn-border-hover: #FFC1B2;
    --secondary-btn-color-hover: #FFC1B2;
    --secondary-btn-border-active: #FFE5DF;
    --secondary-btn-color-active: #FFE5DF;
    --secondary-btn-shadow: rgba(175,206,232,0.3);

    --terniary-btn-bg-hover: transparent;
    --terniary-btn-border-active: #DEEAF5;
}

/* ---------------Intruforce-------------------------*/

[data-brand="intruforce"] {
    /*links*/
    --default-link: #1B5E99;
    --default-link-hover: #154A78;
    --default-link-active: #0F3556;
    --default-link-focus: #1B5E99;
    --default-link-disabled: #A6ACB0;
    --default-link-shadow: rgba(27,94,153,0.3);

    /*headers*/
    --header-bg: #061522;
    --header-bg-hover: #2A2E32;
    --header-bg-checked: #0F3556;
    --header-bg-focus: 0px 0px 0px 2px rgba(97,157,209,0.5);
    --header-select: #061522;
    --header-select-border: #0F3556;
    --header-select-hover: #0A2136;
    --header-select-active: #0A2136;
    --header-select-active-border: #154A78;
    --header-select-focus: 0px 0px 0px 2px rgba(97,157,209,0.5);
    --header-border: #105189;

    /*buttons*/
    --primary-btn-bg: #1B5E99;
    --primary-btn-bg-hover: #154A78;
    --primary-btn-bg-active: #0F3556;
    --primary-btn-border: #1B5E99;
    --primary-btn-border-hover: #154A78;
    --primary-btn-border-active: #0F3556;
    --primary-btn-color: #ffffff;
    --primary-btn-color-hover:  #ffffff;
    --primary-btn-color-active: #ffffff;
    --primary-btn-shadow: rgba(27,94,153,0.3);

    --secondary-btn-bg: #ffffff;
    --secondary-btn-border: #D2D5D8;
    --secondary-btn-color: #40464A;
    --secondary-btn-border-hover: #A6ACB0;
    --secondary-btn-color-hover: #2A2E32;
    --secondary-btn-border-active: #555D63;
    --secondary-btn-color-active: #1A1D1F;
    --secondary-btn-shadow: rgba(41,45,48,0.1);

    --terniary-btn-color: #40464A;
    --terniary-btn-border: tranparent;
    --terniary-btn-bg-hover: #F0F1F2;
    --terniary-btn-color-hover: #2A2E32;
    --terniary-btn-border-hover: #F0F1F2;
    --terniary-btn-border-active: #A4AAAF;
    --terniary-btn-bg-active: #F0F1F2;
    --terniary-btn-color-active: #1A1D1F;
    --terniary-btn-shadow: rgba(41,45,48,0.1);

    --inverted-btn-border: #7AADD9;
    --inverted-btn-border-hover: #AFCEE8;
    --inverted-btn-border-active: #DEEAF5;
    --inverted-btn-color: #7AADD9;
    --inverted-btn-color-hover: #AFCEE8;
    --inverted-btn-color-active:#DEEAF5;
    --inverted-btn-shadow: rgba(175,206,232,0.3);

    /*cookies*/
    --cookie-bg: #061522;
}
[data-theme="dark"][data-brand="intruforce"] {
    /*links*/
    --default-link: #7AADD9;
    --default-link-hover: #AFCEE8;
    --default-link-active: #DEEAF5;
    --default-link-focus: #7AADD9;
    --default-link-disabled: #A6ACB0;
    --default-link-shadow: rgba(175,206,232,0.3);

    /*buttons*/
    --primary-btn-bg: transparent;
    --primary-btn-bg-hover: transparent;
    --primary-btn-bg-active:transparent;
    --primary-btn-border: #7AADD9;
    --primary-btn-border-hover: #AFCEE8;
    --primary-btn-border-active: #DEEAF5;
    --primary-btn-color: #7AADD9;
    --primary-btn-color-hover: #AFCEE8;
    --primary-btn-color-active:#DEEAF5;
    --primary-btn-shadow: rgba(175,206,232,0.3);

    --secondary-btn-bg: transparent;
    --secondary-btn-border: #7AADD9;
    --secondary-btn-color: #7AADD9;
    --secondary-btn-border-hover: #AFCEE8;
    --secondary-btn-color-hover: #AFCEE8;
    --secondary-btn-border-active: #DEEAF5;
    --secondary-btn-color-active: #DEEAF5;
    --secondary-btn-shadow: rgba(175,206,232,0.3);

    --terniary-btn-color: #7AADD9;
    --terniary-btn-border: #7AADD9;
    --terniary-btn-bg-hover: transparent;
    --terniary-btn-color-hover: #2A2E32;
    --terniary-btn-border-hover: #2A2E32;
    --terniary-btn-border-active: #DEEAF5;
    --terniary-btn-bg-active: transparent;
    --terniary-btn-color-active: #DEEAF5;
    --terniary-btn-shadow: rgba(41,45,48,0.1);
}

/* ---------------Itprotect-------------------------*/

[data-brand="itprotect"] {
    /*links*/
    --default-link: #6015AA;
    --default-link-hover: #481080;
    --default-link-active: #300A55;
    --default-link-focus: #481080;
    --default-link-disabled: #A6ACB0;
    --default-link-shadow: rgba(96, 21, 170,0.3);

    /*headers*/
    --header-bg: #120420;
    --header-bg-hover: #2A2E32;
    --header-bg-checked: #300A55;
    --header-bg-focus: 0px 0px 0px 2px rgba(96, 21, 170,0.5);
    --header-select: #1E0635;
    --header-select-border: #300A55;
    --header-select-hover: #300A55;
    --header-select-active: #300A55;
    --header-select-active-border: #481080;
    --header-select-focus: 0px 0px 0px 2px  rgba(96, 21, 170,0.5);
    --header-border: #300A55;

    /*buttons*/
    --primary-btn-bg: #6015AA;
    --primary-btn-bg-hover: #481080;
    --primary-btn-bg-active: #300A55;
    --primary-btn-border: #6015AA;
    --primary-btn-border-hover: #481080;
    --primary-btn-border-active: #300A55;
    --primary-btn-color: #ffffff;
    --primary-btn-color-hover:  #ffffff;
    --primary-btn-color-active: #ffffff;
    --primary-btn-shadow: rgba(96, 21, 170,0.3);

    --secondary-btn-bg: #ffffff;
    --secondary-btn-border: #D2D5D8;
    --secondary-btn-color: #40464A;
    --secondary-btn-border-hover: #A6ACB0;
    --secondary-btn-color-hover: #2A2E32;
    --secondary-btn-border-active: #555D63;
    --secondary-btn-color-active: #1A1D1F;
    --secondary-btn-shadow: rgba(41,45,48,0.1);

    --terniary-btn-color: #40464A;
    --terniary-btn-border: tranparent;
    --terniary-btn-bg-hover: #F8F8F8;
    --terniary-btn-color-hover: #2A2E32;
    --terniary-btn-border-hover: #F8F8F8;
    --terniary-btn-border-active: #A6ACB0;
    --terniary-btn-bg-active: #F8F8F8;
    --terniary-btn-color-active: #1A1D1F;
    --terniary-btn-shadow: rgba(41,45,48,0.1);

    --inverted-btn-border: #AE76E6;
    --inverted-btn-border-hover: #CEACF0;
    --inverted-btn-border-active: #EBDDF9;
    --inverted-btn-color: #AE76E6;
    --inverted-btn-color-hover: #CEACF0;
    --inverted-btn-color-active: #EBDDF9;
    --inverted-btn-shadow: rgba(96, 21, 170,0.5);

    /*cookies*/
    --cookie-bg: #120420;
}
[data-theme="dark"][data-brand="itprotect"] {
    /*links*/
    --default-link:  #AE76E6;
    --default-link-hover: #CEACF0;
    --default-link-active: #EBDDF9;
    --default-link-focus: #CEACF0;
    --default-link-disabled: #A6ACB0;
    --default-link-shadow: rgba(96, 21, 170,0.5);

    /*buttons*/
    --primary-btn-bg: transparent;
    --primary-btn-bg-hover: transparent;
    --primary-btn-bg-active:transparent;
    --primary-btn-border: #AE76E6;
    --primary-btn-border-hover: #CEACF0;
    --primary-btn-border-active: #EBDDF9;
    --primary-btn-color: #AE76E6;
    --primary-btn-color-hover: #CEACF0;
    --primary-btn-color-active: #EBDDF9;
    --primary-btn-shadow: rgba(96, 21, 170,0.5);

    --secondary-btn-bg: transparent;
    --secondary-btn-border: #AE76E6;
    --secondary-btn-color: #AE76E6;
    --secondary-btn-border-hover: #CEACF0;
    --secondary-btn-color-hover: #CEACF0;
    --secondary-btn-border-active:  #EBDDF9;
    --secondary-btn-color-active: #EBDDF9;
    --secondary-btn-shadow: rgba(96, 21, 170,0.5);

    --terniary-btn-color:#AE76E6;
    --terniary-btn-border: #AE76E6;
    --terniary-btn-bg-hover: transparent;
    --terniary-btn-color-hover: #CEACF0;
    --terniary-btn-border-hover: #CEACF0;
    --terniary-btn-border-active:  #EBDDF9;
    --terniary-btn-bg-active: transparent;
    --terniary-btn-color-active:  #EBDDF9;
    --terniary-btn-shadow: rgba(96, 21, 170,0.5);
}