@import url("/ver2/css/Inputs/inputs-styles.css");
@import url("/ver2/css/Tabs/tabs-styles.css");

@import url("/ver2/css/Mermaid/mermaid-styles.css");
@import url("/ver2/css/Modals/modals-style.css");
@import url("/ver2/css/AGGrid/ag-grid-styles.css");
@import url("/ver2/css/DateRangePicker/date-range-picker-styles.css");
@import url("/ver2/css/Select/select-styles-min.css");
@import url("/ver2/css/Select/select-styles.css");
@import url("/ver2/css/DeepSeek/deepseek.css");


:root {
    /*Системные цвета*/
    --color-white-1000: #ffffff;

    --color-black-100: #202020FF;
    --color-black-500: #131313FF;
    --color-black-1000: #000000FF;

    --color-gray-100: #FBFAFAFF;
    --color-gray-150: #f1f1f1;
    --color-gray-200: #E5E5E5FF;
    --color-gray-300: #CFCFCFFF;
    --color-gray-400: #B9B9B9FF;
    --color-gray-500: #A3A3A3FF;
    --color-gray-600: #8D8D8DFF;
    --color-gray-700: #777777FF;
    --color-gray-800: #616161FF;
    --color-gray-900: #4B4B4BFF;
    --color-gray-1000: #3C3C3CFF;

    --color-atiko-green-100: #00B849FF;
    --color-atiko-green-250: #00A641FF;
    --color-atiko-green-500: #009439FF;
    --color-atiko-green-750: #008232FF;
    --color-atiko-green-1000: #00712BFF;

    --color-light-green-100: #D8FFECFF;
    --color-light-green-250: #A3F5CFFF;
    --color-light-green-500: #6EECB2FF;
    --color-light-green-750: #39E295FF;
    --color-light-green-1000: #00C56FFF;

    --color-light-blue-100: #D8F1FFFF;
    --color-light-blue-250: #B4E4FFFF;
    --color-light-blue-500: #78CFFFFF;
    --color-light-blue-750: #3CB9FFFF;
    --color-light-blue-1000: #00A4FFFF;

    --color-blue-100: #D8E3FFFF;
    --color-blue-250: #A8C6FFFF;
    --color-blue-500: #5C9CFFFF;
    --color-blue-750: #1072FFFF;
    --color-blue-1000: #0066FFFF;

    --color-red-100: #FFE5E5FF;
    --color-red-250: #FFB8B8FF;
    --color-red-500: #FF7A7AFF;
    --color-red-750: #FF3D3DFF;
    --color-red-1000: #FF0000FF;

    --color-orange-100: #FFEFD8FF;
    --color-orange-250: #FFD9A8FF;
    --color-orange-500: #FFBC78FF;
    --color-orange-750: #FF9F47FF;
    --color-orange-1000: #FF8200FF;

    --color-yellow-100: #FFF9D8FF;
    --color-yellow-250: #FFF2A8FF;
    --color-yellow-500: #FFE878FF;
    --color-yellow-750: #FFDF47FF;
    --color-yellow-1000: #FFD600FF;

    --color-purple-100: #F2E5FFFF;
    --color-purple-250: #D9B8FFFF;
    --color-purple-500: #B87AFFFF;
    --color-purple-750: #963DFFFF;
    --color-purple-1000: #7500FFFF;

    --color-pink-100: #FFE5F5FF;
    --color-pink-250: #FFB8E2FF;
    --color-pink-500: #FF7ACCFF;
    --color-pink-750: #FF3DB5FF;
    --color-pink-1000: #FF009EFF;

    --color-teal-100: #D8FFF8FF;
    --color-teal-250: #A8FFEEFF;
    --color-teal-500: #78FFE4FF;
    --color-teal-750: #47FFDAFF;
    --color-teal-1000: #00FFCCFF;

    --color-brown-100: #F5EBE6FF;
    --color-brown-250: #E0C9B8FF;
    --color-brown-500: #C09978FF;
    --color-brown-750: #A06947FF;
    --color-brown-1000: #804915FF;

    /*Базовый шрифт*/
    --base-font-family: 'Roboto', sans-serif;

    /*Border Radius*/
    --base-block-radius: 8px;
    --small-modal-block-radius: 6px;
    --small-input-radius: 6px;
    /*Тени*/
    --base-block-shadow: rgba(21, 20, 26, 0.075) 0px 1.85px 3.7px 0px;
}

body, html{
    font-family: var(--base-font-family) !important;
}

.ver2-input{
    height: 35px;
    border: var(1px solid var(--color-gray-300));
    border-radius: var(--small-input-radius);
    font-family: var(--base-font-family);
    color: var(--color-black-500);
    font-size: 14px;
    line-height: 35px;
}

.modal-content{
    border: var(1px solid var(--color-gray-300));
    box-shadow: var(--base-block-shadow);
}

.workspace{
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.h-100 form{
    display: flex !important;
    flex-direction: column !important;
}

[data-tabs-active-tab]{
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
}

[data-tabs-active-tab] section{
    flex:1;
}

[data-tabs-active-tab] .no-border-xs, [data-tabs-active-tab] .tab-content, [data-tabs-active-tab] .tab-pane{
    height:100%;
}
[data-tabs-active-tab] .active{
    display: flex !important;
    flex-direction: column !important;
}


.crs-pointer{
    cursor: pointer;
}

.modal-footer [id="deleteSchemaElementBtn"],
.modal-footer [id="roleDeleteBtn"]{
    display: block !important;
}