body {
    margin-bottom: 50px
}

.product {
    height: calc(80vh - 200px);
}

.top-bar {
    background: #8bc34a;
}

.top-bar span {
    color: white !important;
}

.var {
    text-align: center;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    background-color: #C0C0C0;
    display: inline-block;
}

.variables-wrapper .variables-container {
    max-height: 50vh;
    overflow-y: scroll;
}

.query-builder .fake-form-control {
    transform: scale(.75);
}

.var[data-variable-type="orders"] {
    background-color: #437FC5;
    color: white;
}

.var[data-variable-type="products"] {
    background-color: #C54343;
    color: white;
}

.var[data-variable-type="resources"] {
    background-color: #2B9D89;
    color: #fff;
}

.var[data-variable-type="stock"] {
    background-color: #C243C5;
    color: #fff;
}

.var.var-placed {
    transition: width 10s, all .5s;
}

.var.var-placed:hover {
    opacity: .9;
}

span.variable {
    font-weight: bold;
    padding: 0 5px 0 5px;
    background-color: #f1f1f1;
    border-radius: 5px;
}

body.dark {
    background: #1d1e20;
    color: #fff
}

body.dark .bg-light {
    background-color: #1d1e20 !important;
    color: #fff
}

body.dark .border-top, body.dark .border-bottom, body.dark hr {
    border-color: #1d1e20 !important;
    color: #1d1e20;
}

body.dark .card,
    body.dark .bg-white,
    body.dark .top-bar,
    body.dark footer .bg-light {
    background: #191a1c !important;
}

body.dark .text-muted, body.dark .navbar-text, body.dark .nav-link {
    color: #fff !important;
}

body.dark .modal-dialog {
    color: #212529
}

body.dark .top-bar {
    border-bottom: 1px solid #1d1e20
}

[data-dev="false"]
{
    display: none;
}

[data-dev="true"]
{
    display: block
}

.bottom-text {
    animation: shake 0.2s ease-in-out 0s 2;
}

@keyframes shake {
    0% { margin-left: 0rem; }
    25% { margin-left: 0.5rem; }
    75% { margin-left: -0.5rem; }
    100% { margin-left: 0rem; }
}