:root {
    --action-bar-bg: #FFFFFF;
    --action-bar-border: 1px solid #E6E6E6;
    --divider-bg: #E5E5E5;
    --btn-spacing: 5px;
    --title-bold-font-size: 18px;
    --title-big-font-size: 25px;
    --title-blue-bg: #40abef;
    --title-red-bg: #D30C1E;
    --title-green-bg: #39A54D;
    --title-orange-bg: #F8C300;
    --muted-red: #ff8b8a;
    --muted-green: #8effc4;
    --muted-orange: #f8f6b0;
}

.action-bar {
    background: var(--action-bar-bg);
    border-bottom: var(--action-bar-border);
    padding: 5px 15px;
    margin: 0 0 15px 0;
    display: flex;
    box-shadow: 1px 2px 0px -1px rgba(255, 255, 255);


    @media (max-width: 992px) {
        .btn {
            /*font size but only in direct children*/
            font-size: 0;
            i {
                font-size: 14px;
            }

        }
    }

    &.action-bar-well {
        background: transparent;
        border: 0;
        box-shadow: none;
        margin-top: 0;
        padding: 0;
    }

    > div {
        display: flex;
        align-items: center;

        &.left {
            .btn {
                margin-right: var(--btn-spacing);
            }

            .btn-group {
                margin-right: 0;

                & ~ .btn-group {
                    margin-right: var(--btn-spacing);
                }
            }

            input {
                margin-right: var(--btn-spacing);

                & ~ input {
                    margin-right: var(--btn-spacing);
                }
            }

            & ~ .right {
                margin-right: var(--btn-spacing);
            }

            & ~ .left {
                margin-left: 10px;
            }

            &.divider {
                margin: 0 var(--btn-spacing) 0 0;
            }
        }

        &.right {
            margin-left: auto;

            .btn {
                margin-left: 0;

                & ~ .btn {
                    margin-left: var(--btn-spacing);
                }
            }

            .btn-group {
                margin-left: 0;

                & ~ .btn-group {
                    margin-left: var(--btn-spacing);
                }
            }

            input {
                margin-left: var(--btn-spacing);

                & ~ input {
                    margin-left: var(--btn-spacing);
                }
            }

            &.divider {
                margin: 0;
            }

            & ~ .right {
                margin-left: var(--btn-spacing);
            }
        }

        &.center {
            display: flex;
            align-content: center;
            justify-content: center;
            flex-grow: 1;
            text-align: center;
        }
    }

    .divider {
        background: var(--divider-bg);
        display: inline-block;
        height: 26px;
        width: 1px;
        text-align: center;
        vertical-align: middle;
    }

    .title {
        display: inline-block;
        height: 26px;
        line-height: 26px;
        font-weight: bold;
        font-size: var(--title-bold-font-size);

        &.title-big {
            font-size: var(--title-big-font-size);
        }

        &.title-blue {
            background: var(--title-blue-bg);
            color: #FFF;
            border-radius: 2px;
            padding: 5px;
            line-height: 14px;
            font-size: 20px;
        }

        &.title-red {
            font-size: 16px;
            background: var(--title-red-bg);
            color: #FFF;
            border-radius: 2px;
            padding: 10px;
            line-height: 6px;

            &.muted {
                color: var(--muted-red);
            }
        }

        &.title-green {
            font-size: 16px;
            background: var(--title-green-bg);
            color: #FFF;
            border-radius: 2px;
            padding: 10px;
            line-height: 6px;

            &.muted {
                color: var(--muted-green);
            }
        }

        &.title-orange {
            font-size: 16px;
            background: var(--title-orange-bg);
            color: #FFF;
            border-radius: 2px;
            padding: 10px;
            line-height: 6px;

            &.muted {
                color: var(--muted-orange);
            }
        }
    }

    .txt,
    .name {
        display: inline-block;
        height: 26px;
        line-height: 26px;
    }
}

.breadcrumbs-bar ~ .action-bar,
.action-bar ~ .action-bar {
    background: var(--action-bar-bg);
    padding: 5px 15px;
    margin: 0 0 15px 0;
    border-bottom: var(--action-bar-border);
}