/* 全局颜色 */
:root {
    --blue: #2780e3;
    --indigo: #6610f2;
    --purple: #9954bb;
    --pink: #e83e8c;
    --red: #ff0039;
    --orange: #f0ad4e;
    --yellow: #ff7518;
    --green: #3fb618;
    --teal: #20c997;
    --cyan: #2fe2e2;
    --white: #fff;
    --gray: #868e96;
    --gray-dark: #373a3c;
    --primary: #2780e3;
    --secondary: #373a3c;
    --success: #3fb618;
    --info: #9954bb;
    --warning: #ff7518;
    --danger: #ff0039;
    --light: #f8f9fa;
    --dark: #373a3c;
}

/** flano 主题设置 - 颜色 */
:root {

    /* 通用 - 页面背景颜色/图片 */
    --body_background: #fff;
    /* 通用 - 页面文字颜色 */
    --body_color: #222;
    /* 通用 - 链接颜色 */
    --body-link_color: #000;
    /* 通用 - 链接颜色 - 鼠标悬浮/激活状态 */
    --body-link_color_hover: #8C8C8C;
    /* 通用 - 主页黑板报背景颜色/图片 */
    --homepage-hero_background: linear-gradient(90deg, #9c4dff 0%, #42a7ff 100%);
    /* 通用 - 主页黑板报文字颜色 */
    --homepage-hero_color: #fff;
    /* 通用 - 主要按钮颜色 */
    --primary-button_color: #5B8EFF;
    /* 通用 - 主要按钮颜色 - 鼠标悬浮/激活状态 */
    --primary-button_color_hover: #3D70E1;
    /* 通用 - 次要按钮颜色 */
    --secondary-button_color: #EDEDED;
    /* 通用 - 次要按钮颜色 - 鼠标悬浮/激活状态 */
    --secondary-button_color_hover: #E0E0E0;
    /* 导航栏 - 背景颜色 */
    --navbar-background_color: #fff;
    /* 导航栏 - 边框颜色 */
    --navbar-border_color: #fafafa;
    /* 导航栏 - 网站名称颜色/主菜单项悬浮颜色 */
    --navbar-link_color: #333;
    /* 导航栏 - 菜单项悬浮颜色 */
    --navbar-link_color_hover: #5B8EFF;
    /* 帖子 - 主楼背景颜色 */
    --topic-1st_background: transparent;
    /* 帖子 - 主楼边框颜色 */
    --topic-1st-border_color: #EDEDED;
    /* 帖子 - 引用背景颜色(需要半透明) */
    --quote_background: hsla(210, 33%, 50%, 0.15);
    /* 帖子 - 引用边框颜色 */
    --quote-border_color: #667d99;
    /* 帖子 - 引用文字颜色 */
    --quote_color: #667d99;
    /* 未定义颜色的板块 - 背景颜色 */
    --naslov_background: #3D70E1;
    /* 页面标题 - 文字颜色 */
    --naslov_color: #fff;
    /* 编辑器 - 主色调 */
    --tmce-editor_color_primary: #3D70E1;

    /* 加载中 - 小球颜色 */
    --loader-1_color: #9c4dff;
    --loader-2_color: #42a7ff;

    /* 页脚 - 背景颜色 */
    --footer-background_color: initial;
    /* 输入框 - 背景颜色 */
    --form_background: #fff;
    /* 输入框 - 文字颜色 */
    --form_color: #333;
    /* 帖子 - 鼠标悬浮状态背景颜色 */
    --topic-list_color_hover: rgba(0, 0, 0, 0.04);

    /* 弹出菜单 - 背景颜色*/
    --dropdown-menu_background: #fff;
    /* 弹出菜单 - 背景颜色 - 鼠标悬浮/激活状态 */
    --dropdown-menu_background_hover: #fafafa;
    /* 弹出菜单 - 边框颜色*/
    --dropdown-menu_border_color: #f7f7f7;
    /* 弹出菜单 - 文字颜色*/
    --dropdown-menu_color: var(--body_link_color);

    /* 滚动条 - 轨道颜色 */
    --scrollbar-track_color: transparent;
    /* 滚动条 - 滑块颜色 */
    --scrollbar-slider_color: #5B8EFF;
    /* 滚动条 - 滑块悬浮颜色 */
    --scrollbar-slider_color_hover: #3D70E1;
    /* 小工具 - 背景 */
    --widget-area_background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent);
}

/* 接下来是让以上变量实现的代码。 */
@keyframes side-jumping {
    0% {
        transform: translateX(-0.6em);
    }

    50% {
        transform: translateX(0.6em);
    }

    100% {
        transform: translateX(-0.6em);
    }
}

body {
    background: var(--body_background, #fff);
}

html,
body,
.odgovori .odgovor {
    color: var(--body_color);
}

#homepage-hero {
    background: var(--homepage-hero_background, #5B8EFF);
    color: var(--homepage-hero_color, #fff);
    font-size: 125%;
}

#homepage-hero h1 {
    color: var(--homepage-hero-title_color, #fff);
}

.single-post .entry-content,
.type-page .entry-content,
#comments .row .col-md-10,
.topic .row .col-md-10 {
    padding: 1em;
}

.btn-primary {
    background: var(--primary-button_color, #5B8EFF);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary-button_color_hover, #3D70E1);
    border-color: transparent;
}

.btn-default {
    background-color: var(--secondary-button_color);
    border-color: transparent;
}

.btn-default:focus,
.btn-default:active,
.btn-default:active:hover,
.btn-default:hover,
.btn-default.active .open>.dropdown-toggle.btn-default,
.open>.dropdown-toggle.btn-default:hover,
.open>.dropdown-toggle.btn-default:focus {
    background: var(--secondary-button_color_hover, #3D70E1);
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-brand,
.navbar-default .navbar-brand a,
.navbar-default .navbar-nav>li>a {
    color: var(--navbar-link_color, #5B8EFF);
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: var(--navbar-link_color_hover, #5B8EFF);
}

.navbar-default {
    background: var(--navbar-background_color, #fff);
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: var(--navbar-background_color, #fafafa);
}

.bbp-the-content-wrapper .mce-btn.mce-active button i {
    color: var(--tmce-editor_color_primary);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--primary-button_color_hover, var(--navbar-link_color));
}

.navbar-default .navbar-nav>li.current-menu-item>a {
    color: var(--navbar-link_color, #5B8EFF);
}

/* Link */
a {
    color: var(--body-link_color);
    padding: 0;
}

.lista_kategorija li a {
    color: var(--body-link_color);
    padding: 0;
}

.lista_kategorija li.active a {
    color: var(--primary-button_color);
}

.lista_kategorija li a:hover {
    color: var(--primary-button_color_hover);
}

a:hover,
a:focus {
    color: var(--body-link_color_hover);
}


.dropdown-item {
    color: var(--dropdown-menu_color);
}

.dropdown-item:focus,
.dropdown-item:hover,
.list-group-item.active {
    background-color: var(--dropdown-menu_background_hover);
    color: var(--primary-button_color);
}

.bbp-the-content-wrapper .html-active button.switch-html,
.bbp-the-content-wrapper .tmce-active button.switch-tmce {
    border-bottom: 1px solid var(--tmce-editor_color_primary) !important;
    background: #fafafa !important;
    color: var(--tmce-editor_color_primary) !important;
}

.topic-starter {
    color: var(--navbar-background_color, #5B8EFF);
}

.odgovori .odgovor blockquote,
.odgovori>.quote,
.quote-comment {
    border-left: 2px solid var(--quote-border_color);
    background-color: var(--quote_background);
    color: var(--quote_color);
    border-radius: 4px;
    padding: 8px 15px;
    margin: 1em 0;
    font-size: inherit;
}

#my_main .noticelist>.notice .message {
    color: var(--dark);
}

#my_main .noticelist>.notice .message,
#my_main .noticelist>.notice .quote-comment,
#my_main .noticelist>.notice .message a {
    color: inherit !important;
}

#my_main .noticelist>.notice .message .comment-info a {
    color: var(--primary);
}

#my_main .noticelist>.notice .message .reply-comment:before {
    position: absolute;
    left: -1em;
    top: -2rem;
    width: 1em;
    height: 3.25rem;
    border: .15em solid var(--quote-border_color);
    border-right-style: none;
    content: '';
    transform: none;
}

.noticelist>.notice .message .reply-comment:after {
    position: absolute;
    left: -.5rem;
    top: 0.93rem;
    width: .5rem;
    height: .5rem;
    border: .15rem solid var(--quote-border_color);
    border-bottom: none;
    border-left: none;
    content: '';
    transform: rotate(45deg);
}


.naslov:not([id*="board-"]) {
    background-color: var(--naslov_background);
    color: var(--naslov_color, #fff);
}

.naslov .role {
    color: var(--naslov_color, #fff);
}

.naslovi h2,
.naslovi h3 {
    border-bottom-color: var(--secondary-button_color, #eee);
}

._loader {
    font-size: 90%;
    text-align: center;
}

._loader .yukkuri i {
    mix-blend-mode: multiply;
}

.yukkuri-1 {
    animation: side-jumping 1s ease infinite;
    color: var(--loader-1_color);
}

.yukkuri-2 {
    animation: side-jumping 1s ease 0.1s infinite alternate;
    color: var(--loader-2_color);
}

._loader .loader-text {
    opacity: 0.6;
    font-size: 85%;
}

.super-sticky .teme .poruka .naziv a,
.sticky .teme .poruka .naziv a {
    color: var(--navbar-link_color, #5B8EFF);
}


.form-control {
    background: var(--form_background);
    color: var(--form_color);
    border-color: var(--navbar-border_color)
}

#searchform .form-control:focus {
    border-color: var(--primary-button_color)
}

.lista_kategorija .badge {
    background-color: var(--form_background);
    color: var(--dark);
    border-color: var(--light)
}

.odgovori .odgovor .vrijeme {
    color: inherit;
    opacity: .75;
}

[id^="board-"].naslov,
[class^="user-"].naslov,
[id^="board-"].kocka,
[id^="board-"] .zapocni-temu,
[id^="board-"].kategorija,
[id^="board-"].badge {
    background: var(--primary-button_color, #3D70E1);
}

[id^="board-"] .kategorija a {
    color: var(--primary-button_color, #3D70E1);
}

.teme:hover {
    background: var(--topic-list_color_hover, #fafafa);
}

.prvi_odgovor .bbp-reply-position-1 {
    border-color: var(--topic-1st-border_color, #EDEDED);
}

#my_main .noticelist>.notice:not(:last-child),
.threadlist .teme {
    border-color: var(--dropdown-menu_border_color, #EDEDED);
}

.dropdown-menu,
.dropdown-divider {
    border-color: var(--dropdown-menu_border_color, #EDEDED);
    background-color: var(--dropdown-menu_background);
}

.dropdown-menu>li>a {
    color: var(--dropdown-menu_color);
}

/* Sidebar */

.aside .card {
    margin: 1rem -15px 0 -15px;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

.aside .card-header,
.aside .card-body {
    padding: 15px 15px 0 15px;
    border-color: transparent;
    background: transparent;
}

.aside .card-header {
    font-weight: 500;
}

.aside ul {
    padding-left: 1em
}

#sidebar {
    margin-top: 2em;
}

#sidebar .widget-area {
    background: var(--widget-area_background, rgba(0, 0, 0, 0.03));
}

#sidebar .container {
    margin-bottom: 0;
    padding: 1em;
}

#comments {
    margin: 1em 0;
}

/* hotfix */

body>footer {
    border-color: var(--navbar-border_color);
}

#comments #new-post {
    display: block;
}

#comments .naslov,
#comments .tpoic-action {
    display: none;
}

#comments .col-sm-12 {
    width: 100%;
}

.odgovori_forma {
    background: var(--form_background);
    border-color: var(--navbar-border_color);
}

.page-link {
    color: var(--primary-button_color);
    background-color: var(--secondary-button_color);
    border-color: transparent !important;
}

.page-link:hover {
    color: var(--primary-button_color_hover);
    background-color: var(--secondary-button_color_hover);
}

.page-item.active .page-link {
    background-color: var(--primary-button_color);
    color: var(--white, #fff);
}

#user_aside .card,
#my_aside .card,
#user_main .card,
#my_main .card {
    box-shadow: none;
}

fieldset.debug {
    background: black;
    color: lime;
    border: 2px solid;
    height: 1em;
    overflow: hidden;
}

.prvi_odgovor:not(.postlist) {
    background: var(--topic-1st_background);
}

.prvi_odgovor:not(.postlist)>.odgovori {
    border-color: var(--topic-1st-border_color);
}

.close {
    user-select: none;
}

/* Footer */
body>footer {
    background: var(--footer-background_color);
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track_color, #fff);
}

::-webkit-scrollbar {
    width: 4px;
    background-color: var(--scrollbar-track_color, #fff);
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--scrollbar-slider_color, #ccc);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-slider_color_hover, #bbb);
}

::selection {
    background-color: var(--primary-button_color, var(--primary));
    color: var(--light, var(--white, #fff))
}

::-moz-selection {
    background-color: var(--primary-button_color, var(--primary));
    color: var(--light, var(--white, #fff))
}

/* Other(Plugin) */
img#big_stamp {
    position: absolute;
    right: 6rem;
    top: 6rem;
}

.postlist .list-group {
    flex-direction: column !important;
}

.aside .form#search_form,
.tpoic-action form#search_form {
    display: none;
}

.v_avatar-user .verified-badge {
    font-size: 1.33rem;
    bottom: 0.75rem !important;
    right: 0 !important;
}

.v_avatar-thread .verified-badge,
.v_avatar-post .verified-badge {
    font-size: 1.25rem;
    bottom: -0.25rem !important;
    right: -0.25rem !important;
}

.threadlist .v_avatar .verified-badge {
    font-size: 1.15rem;
}

.odgovori.newpost .verified-badge,
#quick_reply_form .verified-badge {
    position: absolute;
    top: unset;
    bottom: 0;
    right: 0;
}

.odgovori.newpost .avatar,
#quick_reply_form .avatar {
    position: relative;
}