@import url('https://fonts.googleapis.com/css?family=Barlow:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400');
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400');
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Lobster+Two:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Nunito:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Overlock:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Spectral:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Amiri:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Averia+Libre:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Cormorant:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand:400');

:root {
    color-scheme: light dark;
    --btn-bkgd-color: #222222;
    --btn-bkgd-color-hover: #000000;
    --btn-light-bkgd-color: #f2f2f2;
    --btn-bkgd-color-active: #111111;
    --hover-bkgd-color: #ededed;
    --input-bkgd-color: #ffffff;
    --input-bkgd-color-active: #f5f5f5;
    --input-brdr-color-active: #333333;
    --btn-text-color: #ffffff;
    --text-color: #222222;
    --text-header-color: #111111;
    --input-text-color: #222222;
    --focus-hilite: #00000020;
    --bkgd-color: #ffffff;
    --content-bkgd-color: #ffffff;
    --sidebar-bkgd-color: #f4f4f4;
    --btn-brdr-color: #63636300;
    --header-margin: 0px;
    --header-padding: 8px;
    --sidebar-margin: 8px;
    --sidebar-padding: 8px;
    --sidebar-border-radius: 16px;
    --sidebar-filter: none;
    --sidebar-filter: drop-shadow(0px 2px 10px #00000012);
    --product-category-blue: #222222;
}

body {
    background-color: #ffffff;
    color: #222222;
    font-family: 'Lato', Arial, sans-serif;
    /* background-image: url("https://www.softworksroes.com/ROES/ROESWeb/configs/UnitPrintsRWTest/unitprints_dark_linen.png"); */
}

.navbar-brand {
    /* background-color: var(--product-category-blue); */
    background-image: url('https://images.squarespace-cdn.com/content/v1/67ab59b1f227527b9283d3ca/1739282938527-OKD5QPZGW5GNG2O53GBE/cilogolong.png?format=1500w');
    height: 48px;
    width: 190px;
    margin: 4px 14px 4px 14px;
    box-shadow: none; /* Remove any box-shadow that might cause a glow effect */
}

.header, .menubar, .dlg-header, .dlg-content, .dlg-footer, .btn.btn-login, .btn.btn-login-guest {
    background-color: var(--product-category-blue) !important;
    color: #ffffff; /* Ensure text is readable against the dark gray background */
}

.dlg-footer {
    background-color: var(--product-category-blue) !important;
}

.product-category {
    background-color: var(--product-category-blue);
    color: #ffffff;
}

input#user.form-control.login-form input[data-v-b2dd69b6] {
    background-color: #ffffff;
    color: #000000; /* Change font color to black */
}

label.control-label.lbl-login-account::after {
    color: #ffffff;
}

img.product-groupimage[data-v-03cede5f] {
    max-width: 153.5px;
    max-height: 120.45px;
}

div.order-summary-shipping-billing,
div.history-order-items-wrapper {
    background-color: #d3d3d3; /* Lighter gray for better readability */
    color: #000000; /* Ensure text is readable against the lighter gray background */
}

div.products-gridthumb-label {
    color: #000000;
}

span.products-gridthumb-label,
span.products-gridthumb-price {
    color: #000000;
}

div.product-breadcrumb-wrapper {
    background-color: #2e2e2e; /* Dark gray for better contrast */
    color: #ffffff; /* Ensure text is readable against the dark gray background */
}

div.rightside-footer.workspace-controls-wrapper,
div.rightside-items,
div.rightside-header.options-pane-header,
div.rightside.options-pane-wrapper.workspace-options-wrapper,
div.leftside.group-templates-wrapper,
button#btn-choose-images.btn.btn-lightweight,
div.column.cart-preview-wrapper {
    background-color: #d3d3d3; /* Lighter gray for better readability */
    color: #000000; /* Ensure text is readable against the lighter gray background */
}

div.order-summary.column.order-item-pane,
div.order-summary {
    background-color: #d3d3d3 !important; /* Changing background color to light gray */
    color: #000000 !important; /* Ensure text is readable against the lighter gray background */
}

button.btn.btn-template-options.row-center::after,
div.option-group-label {
    color: #000000 !important; /* Change font color to black with higher priority */
}

button.btn.btn-linkweight.btn-go-to-history[data-v-b2dd69b6],
button.btn.btn-linkweight.btn-logout[data-v-b2dd69b6] {
    background-color: #292929 !important; /* Dark gray background */
    color: #ffffff !important; /* Ensure text is readable against the dark gray background */
}

button.btn.btn-linkweight.btn-go-to-history:hover,
button.btn.btn-linkweight.btn-logout:hover,
button.btn.btn-linkweight.btn-go-to-history.btn.linkweight:hover,
button.btn.btn-linkweight.btn-logout.btn.linkweight:hover {
    background-color: #292929 !important; /* Dark gray background for hover state */
    color: #ffffff !important; /* Ensure text is readable against the dark gray background */
}

div.show-logout-history-wrapper[data-v-b2dd69b6] {
    background-color: #292929 !important; /* Dark gray background */
    color: #ffffff !important; /* Ensure text is readable against the dark gray background */
}

button.products-gridthumb svg {
    flex-grow: 1.25; /* This will allow the SVG to grow to fill available space */
    width: 85%; /* Ensure it takes up the full width of its container */
    height: auto; /* Maintain aspect ratio while growing */
}




/* ==========================================================================
   COLOR INC PRO LAB — ROES WEB BRAND OVERRIDES
   Designed to visually align the ROES ordering interface with
   https://www.colorincprolab.com/
   ========================================================================== */

html,
body {
    background: #ffffff !important;
    color: #222222 !important;
    font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}

body {
    min-height: 100%;
}

/* Clean, monochrome Color Inc header */
.header,
.menubar,
.navbar,
.navbar-default {
    background: #ffffff !important;
    color: #222222 !important;
    border: 0 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.08) !important;
}

.navbar-brand {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Navigation text */
.header a,
.menubar a,
.navbar a,
.navbar .nav > li > a,
.navbar-nav > li > a {
    color: #222222 !important;
    font-weight: 400 !important;
}

.header a:hover,
.menubar a:hover,
.navbar a:hover,
.navbar .nav > li > a:hover,
.navbar-nav > li > a:hover {
    color: #666666 !important;
    background: #f5f5f5 !important;
}

/* Main content area */
.content,
.main-content,
.workspace,
.workspace-wrapper,
.products-wrapper,
.product-list-wrapper {
    background: #ffffff !important;
    color: #222222 !important;
}

/* Product categories: Color Inc uses a restrained monochrome look */
.product-category,
.product-category:hover,
.product-category.active,
.product-category.selected {
    background: #f3f3f3 !important;
    color: #222222 !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.product-category:hover,
.product-category.active,
.product-category.selected {
    background: #222222 !important;
    color: #ffffff !important;
}

/* Product cards / thumbnails */
.products-gridthumb,
.products-gridthumb-wrapper,
.products-gridthumb-label-wrapper {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #e4e4e4 !important;
    box-shadow: none !important;
}

.products-gridthumb:hover {
    border-color: #222222 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
}

div.products-gridthumb-label,
span.products-gridthumb-label,
span.products-gridthumb-price {
    color: #222222 !important;
    font-family: 'Lato', Arial, sans-serif !important;
}

span.products-gridthumb-price {
    font-weight: 700 !important;
}

/* Breadcrumb / section heading */
div.product-breadcrumb-wrapper {
    background: #222222 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
}

div.product-breadcrumb-wrapper a,
div.product-breadcrumb-wrapper span {
    color: #ffffff !important;
}

/* Buttons — simple black/white Color Inc treatment */
button,
.btn,
input[type="button"],
input[type="submit"] {
    font-family: 'Lato', Arial, sans-serif !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-dark,
.btn-login,
.btn-login-guest,
.btn.btn-login,
.btn.btn-login-guest {
    background: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #222222 !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-dark:hover,
.btn-login:hover,
.btn-login-guest:hover,
.btn.btn-login:hover,
.btn.btn-login-guest:hover {
    background: #555555 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

.btn-light,
.btn-secondary,
button.btn-lightweight {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #d5d5d5 !important;
}

.btn-light:hover,
.btn-secondary:hover,
button.btn-lightweight:hover {
    background: #f2f2f2 !important;
    color: #111111 !important;
}

/* Login screen */
.login-form,
.login-form-wrapper,
.dlg-content,
.dlg-footer {
    background: #ffffff !important;
    color: #222222 !important;
}

.dlg-header {
    background: #222222 !important;
    color: #ffffff !important;
}

input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="email"] {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #cccccc !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    border-color: #222222 !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08) !important;
}

/* Sidebar / options panes */
div.rightside-footer.workspace-controls-wrapper,
div.rightside-items,
div.rightside-header.options-pane-header,
div.rightside.options-pane-wrapper.workspace-options-wrapper,
div.leftside.group-templates-wrapper,
div.column.cart-preview-wrapper {
    background: #f5f5f5 !important;
    color: #222222 !important;
    border-color: #dedede !important;
}

div.option-group-label,
button.btn.btn-template-options.row-center::after {
    color: #222222 !important;
}

/* Order summary */
div.order-summary.column.order-item-pane,
div.order-summary,
div.order-summary-shipping-billing,
div.history-order-items-wrapper {
    background: #f7f7f7 !important;
    color: #222222 !important;
    border-color: #dedede !important;
}

/* Login/history controls */
button.btn.btn-linkweight.btn-go-to-history[data-v-b2dd69b6],
button.btn.btn-linkweight.btn-logout[data-v-b2dd69b6],
div.show-logout-history-wrapper[data-v-b2dd69b6] {
    background: #222222 !important;
    color: #ffffff !important;
    border-color: #222222 !important;
}

button.btn.btn-linkweight.btn-go-to-history:hover,
button.btn.btn-linkweight.btn-logout:hover,
button.btn.btn-linkweight.btn-go-to-history.btn.linkweight:hover,
button.btn.btn-linkweight.btn-logout.btn.linkweight:hover {
    background: #555555 !important;
    color: #ffffff !important;
}

/* Links */
a {
    color: #333333;
}

a:hover {
    color: #000000;
}

/* Remove the rounded "app" feel and excessive shadows used by the old theme */
.sidebar,
.leftside,
.rightside,
.card,
.panel,
.modal-content {
    border-radius: 2px !important;
    box-shadow: none;
}

/* Preserve useful separation with subtle borders */
.sidebar,
.leftside,
.rightside,
.panel,
.card {
    border-color: #e2e2e2 !important;
}

/* Product images should stay clean and centered */
img.product-groupimage[data-v-03cede5f] {
    max-width: 153.5px;
    max-height: 120.45px;
    object-fit: contain;
}

/* Mobile: keep the logo from crowding the menu */
@media (max-width: 600px) {
    .navbar-brand {
        width: 150px !important;
        height: 40px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .header,
    .menubar {
        min-height: 48px !important;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}