/* MaredPOS brand layer: loaded after vendor and application styles. */
:root {
    --mared-forest: #2d5a45;
    --mared-deep-forest: #183c2d;
    --mared-charcoal: #242122;
    --mared-slate: #40423f;
    --mared-gray: #9b9b9b;
    --mared-cloud: #d7d7d5;
    --mared-mist: #f5f5f3;
    --mared-white: #ffffff;
    --theme-700: var(--mared-forest);
    --theme-800: var(--mared-deep-forest);
    --theme-900: #112b20;
}

body {
    color: var(--mared-charcoal);
    background-color: var(--mared-mist);
}

.theme-header-bg {
    background-image: linear-gradient(110deg, var(--mared-deep-forest), var(--mared-forest)) !important;
}

.theme-btn-bg,
.btn-primary,
.btn-success {
    background-color: var(--mared-forest) !important;
    border-color: var(--mared-forest) !important;
}

.theme-btn-bg:hover,
.btn-primary:hover,
.btn-success:hover {
    background-color: var(--mared-deep-forest) !important;
    border-color: var(--mared-deep-forest) !important;
}

.theme-btn-bg:focus,
.btn-primary:focus,
.btn-success:focus {
    box-shadow: 0 0 0 .2rem rgba(45, 90, 69, .25) !important;
}

.mared-brand-logo {
    display: block;
    width: min(156px, 78%);
    height: auto;
    max-height: 48px;
    object-fit: contain;
}

.mared-auth-logo-wrap {
    min-width: 142px;
    padding: .4rem .6rem;
    background: var(--mared-white);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: .6rem;
    box-shadow: 0 8px 22px rgba(17, 43, 32, .18);
}

.mared-auth-logo {
    width: min(176px, 36vw);
    min-width: 116px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

.mared-sidebar-brand {
    background: var(--mared-white);
    border-bottom: 1px solid var(--mared-cloud);
    box-shadow: 0 1px 0 rgba(36, 33, 34, .04);
}

.mared-online-dot {
    width: .55rem;
    height: .55rem;
    background: var(--mared-forest);
    border: 2px solid var(--mared-mist);
}

#side-bar .theme-sidebar-hover:hover,
#side-bar .theme-sidebar-hover:active,
#side-bar .theme-sidebar-hover:focus,
#side-bar .theme-sidebar-active {
    background-color: rgba(45, 90, 69, .10) !important;
    color: var(--mared-forest) !important;
}

#side-bar a:hover svg,
#side-bar a:hover i,
#side-bar a.theme-sidebar-active svg,
#side-bar a.theme-sidebar-active i,
#side-bar .theme-sidebar-child-hover:hover,
#side-bar .theme-sidebar-child-active {
    color: var(--mared-forest) !important;
}

#login-form button[type="submit"] {
    background: linear-gradient(110deg, var(--mared-deep-forest), var(--mared-forest)) !important;
}

#login-form a.tw-bg-gradient-to-r,
#login-form a.tw-bg-clip-text {
    background-image: none !important;
    color: var(--mared-forest) !important;
    -webkit-text-fill-color: currentColor;
}

#login-form input:focus {
    border-color: var(--mared-forest) !important;
    box-shadow: 0 0 0 3px rgba(45, 90, 69, .12);
}

.pos-header .btn,
#add_pos_sell_form .btn-primary,
#add_pos_sell_form .btn-success {
    background-color: var(--mared-forest) !important;
    border-color: var(--mared-forest) !important;
}

@media (max-width: 767px) {
    .mared-brand-logo { width: 132px; }
    .mared-auth-logo { width: 136px; }
}