/*
=============================
        Global
=============================
*/
body {
    /*Siko Colors*/
    --Siko-Blue: #19243f;
    --Siko-Blue-Hover: #ffcc00;
    /*Add Color variables here*/
    --border-radius: 4px;
    --font-family: "Open Sans", Arial, Helvetica, sans-serif;
    --primary-color: #19243f;
    --primary-color-hover: #ffcc00;
    --primary-color-active: #ffcc00;
    --primary-color-inverse: #FFFFFF;
    --default-color: #FFFFFF;
    --default-color-inverse: #19243f;
    --default-color-dark: #E3E3E3;
    --danger-color: #ca4545;
    --danger-color-hover: #bf3636;
    --background-color-dark: #FFFFFF;
    --help-color: #4197bf;
    --border-color: #E3E3E3;
    --text-color: #19243f;
    height: 100%;
}


/*
=============================
          Buttons
=============================
*/
.tw-btn--danger {
}

.call-button:hover, .activity:hover {
    color: #ffcc00 !important;
}

.call-button, .activity {
    transition-duration: 0.3s, 0.3s, 0.3s;
    --primary-color: #FFFFFF;
    color: var(--Siko-Blue) !important;
}

/*
=============================
      Inspiration All
=============================
=============================
    Inspiration Banner
=============================
*/
.guide-header-view {
    /*Add Color variables here*/
    --default-color: #ffffff;
    background-color: var(--default-color);
}
/*Current Step text*/
.milestone-bubble-view.bottom-tip.active .label {
    /*Add Color variables here*/
    color: var(--primary-color-active) !important;
}
/*Previous Step Text*/
.milestone-bubble-view.bottom-tip.completed .label {
    /*Add Color variables here*/
    color: var(--text-color) !important;
}
/*Next Step Text*/
.milestone-bubble-view.bottom-tip .label {
    /*Add Color variables here*/
    color: #1a3138 !important;
}
/*
=============================
    Preset Selector
=============================

/*Preset List Menu*/
.accordion-nav-menu-view .ui-accordion-content {
    /*Add Color variables here*/
    background-color: var(--default-color);
}

/*Preset List Menu Header*/

.accordion-nav-menu-view .ui-state-active {
    background-color: var(--primary-color) !important;
}

/*
=============================
       Cabinet layout
=============================
*/
.cabinet-layout-view {
    --primary-color: var(--Siko-Blue);
    --primary-color-hover: var(--Siko-Blue-Hover);
    --primary-color-active: var(--Siko-Blue-Hover);
}

/*
=============================
         Design
=============================
*/
/*Global*/
.project-space-view {
    --default-color: #FFFFFF;
    /*Add Color variables here*/
}

/*Floating buttons*/
.shop-context-menu-view .context-btn.delete.danger {
    /*Add Color variables here*/
    --primary-color: var(--danger-color);
    --primary-color-hover: var(--danger-color-hover);
    --primary-color-active: var(--danger-color-hover);
}

/*
=============================
        Account
=============================
*/
.profile-picture-view {
    background-color: var(--primary-color) !important;
}

.ui-dialog button:not(.tw-btn) {
    color: var(--text-color);
}

.modern-product-browser-view section.products .products-view {
    background-color: #FFFFFF !important;
}

/*
=============================
        Mobile
=============================
*/
@media only screen and (min-device-width: 320px) and (max-device-width: 813px) {
    .mobile-device #menu-container .hamburger-menu-view .login-container,
    .mobile-device #menu-container .hamburger-menu-view .account-container {
        background: var(--primary-color-inverse);
    }
}

.hamburger-menu-view .mobile-hamburger-footer-container .ids-footer-view {
    --default-color-inverse: #FFFFFF;
}

.project-options .sidebar-panel {
    --background-color: linear-gradient(295.93deg, #ffcc00 2.52%, #ffcc00 100%) !important;
}

.project-options .sidebar-panel .menu-item {
    color: #19243f !important;
}

.project-options .sidebar-panel .menu-item .tw-icon__svg {
    color: #19243f !important;
}

.project-options .sidebar-panel .menu-item.active span {
    color: #19243f !important;
}

.mobile-device.mobile-ux .sidebar-panel.slide-left.opened.expanded {
    background: linear-gradient(295.93deg, #ffcc00 2.52%, #ffcc00 100%) !important;
}

.mobile-device.mobile-ux .sidebar-panel .header {
    color: #19243f !important;
}

.mobile-device.mobile-ux .project-options .panel-container {
    color: #19243f !important;
}

.mobile-device.mobile-ux .panel-container-actions .menu-btn {
    border-color: #19243f !important;
    color: #19243f !important;
}

.mobile-device.mobile-ux .panel-container-actions .menu-btn .tw-icon__svg {
    color: #19243f !important;
}

.mobile-device.mobile-ux #edit.tw-btn i {
    font-size: 14px !important;
}

.mobile-device.mobile-ux .edit-label {
    font-size: 11pt !important;
}

.mobile-device.mobile-ux .preset-slider-view #owl-container .owl-stage-outer .owl-stage .owl-item .item .img-container #edit .edit-label {
    margin-left: 0px !important;
}

.mobile-device.mobile-ux .hamburger-menu-view .account-container, .hamburger-menu-view .login-container {
    background: #ffffff !important;
}