/* в данном файле размещаются в первую очередь настройки различных цветов конкретного проекта для всех стандартных элементов */

body.allrpg {
    --deep-blue: #1d2632;
    --deep-blue-contrast: #2D425B;
    --blocks-borders-and-separators: #eaeaea;
    --shadow-gray-15: rgba(48, 60, 106, .15);
    --shadow-gray-25: rgba(48, 60, 106, .25);
    --green-marker: rgb(0, 150, 0);
    --special-red: rgb(197, 44, 63);
    --special-gray: #A5ACBF;
    --special-gray2: #dbdee0;

    --color-links: var(--main-blue);
    --color-links-hover: var(--main-blue-light);
    --inputs-borders: var(--blocks-borders-and-separators);

    --user-menu-background: var(--color-background-main);
    --user-menu-border: var(--blocks-borders-and-separators);
    --user-menu-hr-color: var(--underlay-gray);

    --unread: var(--gray-very-light);
    --some-borders: var(--special-gray2);
    --helper-background: var(--gray-medium);
}

@media (prefers-color-scheme: dark) {
    body.allrpg {
        --color-font-main: var(--white);
        --color-background-main: var(--deep-blue);
        --inputs-fieldname: var(--color-font-main);
        --underlay-gray: var(--deep-blue-contrast);
        --underlay-gray-contrast: var(--deep-blue-contrast);
        --main-underlay-light: var(--deep-blue-contrast);
        --inputs-borders: var(--deep-blue-contrast);
        --inputs-borders-selected: var(--deep-blue-contrast);
        --color-links: var(--white);
        --color-links-hover: var(--main-blue);
        --blocks-borders-and-separators: var(--deep-blue-contrast);
        --forms-background: var(--deep-blue-contrast);

        --scrollbar-track-background: var(--deep-blue);
        --scrollbar-track-border: var(--deep-blue-contrast);
        --scrollbar-thumb-background: var(--deep-blue-contrast);

        --shadow-gray-15: rgba(40, 73, 113, .15);
        --shadow-gray-25: rgba(40, 73, 113, .25);
        --shadow-black-1: rgba(40, 73, 113, 1);
        --shadow-black-25: rgba(40, 73, 113, .25);

        --user-menu-background: var(--underlay-gray);
        --user-menu-border: var(--color-background-main);
        --user-menu-hr-color: var(--color-background-main);

        --unread: var(--gray-very-dark);
        --some-borders: var(--deep-blue);
        --underlay-gray-light: var(--user-menu-background);
        --helper-background: var(--deep-blue-contrast);
    }

    div.mobile_menu a.menu.no_dynamic_content, div.mobile_menu div.submenu.submenu_4 a.submenu[obj_id] {
        background-image: url(../design/arrow-menu-down-white.svg) !important;
    }

    div.mainpage_block div.mainpage_block_header {
        background-color: var(--underlay-gray);
        margin: 0 !important;
        padding: 1.1em 1.5em !important;
    }

    table.menutable tr.string1, div.multi_objects_table div.tr.string1 {
        background-color: var(--color-background-main) !important;
    }

    table.menutable tr.string2, div.multi_objects_table div.tr.string2 {
        background-color: var(--main-underlay-light) !important;
    }
}

body {
    font-family: "Roboto", Arial, sans-serif;
}

hr {
    border-top: 1px solid var(--underlay-gray);
}

.placeholded {
    color: var(--placeholder);
}

div.quote {
    background-color: var(--underlay-gray);
    border: 1px solid var(--color-font-main);
}

a.careful {
    color: var(--main-red);
}

div.fullpage_cover {
    background-color: var(--color-background-main);
}

/* формы */
input, select, textarea, div.dropfield {
    font-family: "Roboto", Arial, sans-serif;
    border: 1px solid var(--inputs-borders);
    color: var(--color-font-main);
    background-color: var(--color-background-main);
    border-radius: .7em;
}

input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus, div.dropfield.hovered {
    border-color: var(--inputs-borders-selected);
}

div.field_group_separator {
    border-top: 1px dashed var(--ui-resizable-border);
}

form > div.cardtable_card {
    margin-top: 3.5em;
    padding: 2.5rem 2.5rem 1rem 2.5rem;
    border: 1px solid var(--inputs-borders);
    border-radius: 1.3rem;
}

form > div.cardtable_card.cardtable_new {
    background-color: var(--underlay-gray);
    border: 1px solid var(--inputs-borders);
}

form > div.cardtable_card {
    background-color: transparent;
}

div.maincontent_data.autocreated form div.cardtable_card_num {
    background-color: var(--forms-background);
    border-bottom-right-radius: 1.3rem;
    border-bottom-left-radius: 1.3rem;
    margin-top: -2.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-background-main);
    font-size: 1.6em;
    padding: .7em 1em;
    width: 78%;
    max-width: 78%;
    min-width: 78%;
}

div.maincontent_data.autocreated form div.cardtable_card div.cardtable_card_delete {
    width: 20%;
    max-width: 20%;
    min-width: 20%;
    align-items: center;
    margin-top: -2.5rem;
    display: flex;
    justify-content: flex-end;
}

div.cardtable_card div.cardtable_card_delete a {
    color: var(--color-links);
}

div.multi_objects_table div.tr.menu, table.menutable tr.menu {
    background-color: var(--forms-background);
    color: var(--white);
}

div.multi_objects_table div.tr.menu a, table.menutable tr.menu a {
    color: var(--white);
    padding-right: 0;
}

div.multi_objects_table div.tr.menu a:hover, table.menutable tr.menu a:hover {
    color: var(--color-background-main);
}

table.menutable tr.string1, div.multi_objects_table div.tr.string1 {
    background-color: var(--color-background-main);
}

table.menutable tr.string2, div.multi_objects_table div.tr.string2 {
    background-color: var(--main-underlay-light);
}

div.fieldname.red + div.fieldvalue input,
div.fieldname.red + div.fieldvalue textarea,
div.fieldname.red + div.fieldvalue select,
div.fieldname.red + div.fieldvalue div.dropfield,
div.fieldname.red + div.help + div.fieldvalue input,
div.fieldname.red + div.help + div.fieldvalue textarea,
div.fieldname.red + div.help + div.fieldvalue select,
div.fieldname.red + div.help + div.fieldvalue div.dropfield,
div.fieldname.red + div.fieldvalue iframe {
    border-color: var(--main-red) !important;
}

div.fieldname.red {
    font-weight: normal;
    color: var(--main-red) !important;
}

div.multi_objects_table div.tr.red {
    background-color: var(--main-red) !important;
}

div.multi_objects_table div.tr.red div.td * {
    background-color: var(--color-background-main);
}

div.help {
    background-color: var(--underlay-gray-contrast);
    color: var(--color-background-main);
    font-size: .9em;
    padding: .4em 1.3em;
    border-radius: .5em .5em 0 0;
}

div.help a {
    color: var(--color-background-main);
}

div.placeholder {
    color: var(--underlay-gray-contrast);
}

div.dropfield {
    border: 1px solid var(--inputs-borders);
}

div.dropfield.focus {
    border-color: var(--underlay-gray-contrast);
}

div.dropfield div.options {
    border: 1px solid var(--inputs-borders);
    background-color: var(--underlay-gray);
}

div.dropfield div.options a:hover {
    color: var(--color-font-main);
}

div.dropfield2 {
    border: none;
    background-color: var(--color-background-main);
    border-radius: 0 0 .5em .5em;
}

div.dropfield2 div.dropfield2_select_all a, div.dropfield2 div.dropfield2_deselect_all a {
    color: var(--color-links);
    background-color: var(--underlay-gray);
}

div.dropfield2 div.dropfield2_select_all a:hover, div.dropfield2 div.dropfield2_deselect_all a:hover {
    color: var(--color-links-hover);
    background-color: var(--underlay-gray);
}

a.ctrlink, a.ctrlink:link, a.ctrlink:visited {
    background-color: var(--forms-background);
    color: var(--color-background-main);
}

div.indexer {
    background-color: var(--color-background-main);
    border: 1px solid var(--ui-resizable-border);
}

div.fieldname.selected {
    color: var(--color-font-main);
}

div.dropfield2_search input, div.maincontent_data.autocreated .ui-widget div.dropfield2_search input {
    background-color: var(--underlay-gray);
}

/* всякие цвета библиотек jquery */
.ui-widget, .ui-button {
    font-family: "Roboto", Arial, sans-serif !important;
}

.ui-button {
    background: var(--blocks-borders-and-separators);
}

div.fieldname.selected ~ div.fieldvalue .jq-file {
    border: 1px solid var(--underlay-gray-contrast) !important;
}

.ui-dialog .ui-dialog-title {
    color: var(--color-font-main);
}

.jq-file .bar {
    background: var(--orange);
    color: var(--color-background-main);
    padding: .8em;
}

.ui-widget-content {
    color: inherit;
    background: var(--color-background-main);
}

.ui-widget-content a, div.header .ui-widget-content a {
    color: var(--color-links);
}

.ui-widget-content a:hover, div.header .ui-widget-content a:hover {
    color: var(--color-links-hover);
}

div.ui-tooltip {
    background: var(--color-background-main);
    color: var(--color-font-main);
    border: 1px solid var(--inputs-borders);
}

span.ui-button-icon.ui-icon.ui-icon-closethick {
    background: url(../vendor/fraym/design/close.svg) center center no-repeat;
}