/* new editor styles */

:root {
    --printformer-baseColor: #f8f7f7;
    --printformer-baseColorGradation1: #f1f0f0;
    --printformer-baseColorGradation2: #c7db7a;
    --printformer-baseColorGradation3: #f4f4f4;
    --printformer-baseColorGradation4: #eaeaeb;
    --printformer-textAndIcons: #2d2d32;
    --printformer-textAndIcons2: #2d2d32;
    --printformer-userColorMain: #a3c426;
    --printformer-userColorSecond: #a3c426;
    --printformer-userColorMainContent: #ffffff;
    --printformer-inputPlaceHolderColor: #D3D3D3;
}

/*stühle shop*/
#login input:-webkit-autofill,
#change-password input:-webkit-autofill,
#forgot-modal input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 9999px #212121 !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.shop-layout-primary {
    background-color: #212121 !important;
}

.shop-layout-secondary {
    background-color: #454545 !important;
}

.shop-layout-tertiary,
.tabs .indicator,
[type="radio"]:checked+label:after,
[type="radio"].with-gap:checked+label:after {
    background-color: #4384C5 !important;
}

[type="radio"]:checked+label:after,
[type="radio"].with-gap:checked+label:before,
[type="radio"].with-gap:checked+label:after {
    border-color: #4384C5 !important;
}

.shop-layout-tertiary-font-color,
body .dropdown-content li>a,
body .dropdown-content li>span {
    color: #4384C5 !important;
}

.pagination li.active {
    background-color: #4384C5 !important;
}

.collection .collection-item.active {
    background-color: #4384C5 !important;
    color: #FFFFFF !important;
}

.shop-layout-hover:hover,
.shop-layout-hover:hover span,
.shop-layout-hover:hover i {
    transition: all .15s linear,opacity 0s linear;
    color: #b5b5b5 !important;
    fill: #b5b5b5 !important;
    stroke: #b5b5b5 !important;
}

.shop-layout-hover-border-color:hover {
    transition: all .15s linear,opacity 0s linear;
    border-color: #b5b5b5 !important;
}

.shop-layout-button-text {
    color: #FFFFFF !important;
}

.shop-layout-text-and-icon {
    color: #FFFFFF !important;
}

.shop-layout-primary .select-wrapper input.select-dropdown {
    border-bottom: 1px solid #4384C5;
}

.shop-layout-tertiary-border-color {
    border-color: #4384C5 !important;
}

body .shop-layout-disabled-element[disabled],
body .shop-layout-disabled-element:disabled {
    background-color: #DFDFDF !important;
}

body .shop-layout-disabled-button-text[disabled],
body .shop-layout-disabled-button-text:disabled {
    color: #9F9F9F !important;
}

/*stühle editor*/

.editor-layout-primary {
    background-color: #F9F9F9 !important;
}

.editor-layout-secondary {
    background-color: #EBEBEB !important;
}
.editor-layout-secondary-border-color {
    border-color: #EBEBEB !important;
}
.printformer-default-layout menu li.active {
    background-color: #EBEBEB !important;
}
.editor-layout-text-and-icons-no-hover,
.editor-layout-text-and-icons-no-hover:hover,
.editor-layout-text-and-icons-no-hover:active {
    color: #53565A !important;
    fill: #53565A !important;
    stroke: #53565A !important;
}

.editor-layout-text-and-icons {
    color: #53565A !important;
    fill: #53565A !important;
    stroke: #53565A !important;
}

.file-drag-drop-editor-layout-text-and-icons-and-outline {
    color: #53565A !important;
    fill: #53565A !important;
    stroke: #53565A !important;
}

.file-drag-drop-editor-layout-text-and-icons-and-outline .uploader-drop {
    outline: 2px dashed #53565A !important;
}

.editor-layout-background {
    background-color: #F9F9F9;
}

.call-to-action-button {
    border-color: #53565A !important;
    color: #F9F9F9 !important;
    background-color: #53565A !important;
}
.call-to-action-button:hover {
    transition: all .15s linear,opacity 0s linear;
    border-color: #b5b5b5 !important;
    color: #F9F9F9 !important;
    background-color: #b5b5b5 !important;
}
.call-to-action-button.inactive, .call-to-action-button[disabled] {
    border-color: #BBBBBB !important;
    color: #F9F9F9 !important;
    background-color: #BBBBBB !important;
}

.editor-layout-text-and-icons-border-color {
    border-color: #53565A !important;
    color: #53565A !important;
    background-color: transparent !important;
}

.editor-layout-text-and-icons-border-color.editor-layout-text-and-icons-border-no-hover:hover {
    border-color: #53565A !important;
    color: #53565A !important;
    background-color: transparent !important;
}

.content-exchange-active .affected-by-exchange {
    fill: #BBBBBB !important;
    stroke: #BBBBBB !important;
    color: #BBBBBB !important;
}

.content-exchange-active #go-to-next-step.affected-by-exchange {
    border-color: #BBBBBB !important;
    color: #F9F9F9 !important;
    background-color: #BBBBBB !important;
}

.content-exchange-active #back-to-shop.affected-by-exchange,
.content-exchange-active #closed-shop.affected-by-exchange,
.content-exchange-active #next-editor-step.affected-by-exchange,
.content-exchange-active #cancel-editor-step.affected-by-exchange,
.content-exchange-active #previous-editor-step.affected-by-exchange,
.content-exchange-active #save-draft.affected-by-exchange {
    border-color: #BBBBBB !important;
    color: #BBBBBB !important;
}

.editor-layout-text-and-icons.active,
.editor-layout-text-and-icons:hover,
.notification-center-open{
    transition: all .15s linear,opacity 0s linear;
    color: #b5b5b5 !important;
    fill: #b5b5b5 !important;
    stroke: #b5b5b5 !important;
}

body .ellipsis-text:hover {
    color: #53565A !important;
}

.editor-layout-text-and-icons-border-color:hover {
    transition: all .15s linear,opacity 0s linear;
    border-color: #b5b5b5 !important;
    color: #b5b5b5 !important;
    background-color: transparent !important;
}

.editor-layout-text-and-icons-border-color[disabled],
.editor-layout-text-and-icons[disabled] .editor-layout-text-and-icons-border-color {
    border-color: #BBBBBB !important;
    color: #BBBBBB !important;
    background-color: transparent !important;
}

.editor-layout-text-and-icons.inactive, .editor-layout-text-and-icons[disabled] {
    color: #BBBBBB !important;
    fill: #BBBBBB !important;
    stroke: #BBBBBB !important;
}

.editor-layout-headline {
    color: #343434 !important;
}

.editor-layout-description {
    color: #53565A !important;
}
body .degree_symbol.right:after {
    color: #53565A !important;
}

body .editor-layout-inputs, body #max-color-info {
    background-color: #FFFFFF !important;
    color: #53565A !important;
    border-color: #FFFFFF !important;
}

#vertical-toolbar .dropdown-menu {
    background-color: #FFFFFF !important;
}

#vertical-toolbar .dropdown-menu button {
    background-color: #FFFFFF !important;
    color: #53565A !important;
}

#vertical-toolbar .controls-hr {
    border-color: #53565A !important;
}

body .dropper-button,    body .overlay-button,
body .user-color-button {
    border-radius: 4px;
    border-color: #53565A !important;
    color: #53565A !important;
    background-color: transparent !important;
}

body .dropper-button:focus, body .overlay-button:focus,
body .user-color-button:focus {
    color: inherit !important;
    background-color: inherit !important;
}

body .dropper-button:hover, body .overlay-button:hover,
body .user-color-button:hover {
    transition: all .15s linear,opacity 0s linear;
    border-color: #b5b5b5 !important;
    color: #b5b5b5 !important;
    background-color: transparent !important;
}

body .dropper-button.primary, body .overlay-button.confirm-button,
body .user-color-button.confirm-button {
    border-color: #53565A !important;
    color: #F9F9F9 !important;
    background-color: #53565A !important;
}

body .dropper-button.primary:hover, body .overlay-button.confirm-button:hover,
body .user-color-button.confirm-button:hover {
    transition: all .15s linear,opacity 0s linear;
    border-color: #b5b5b5 !important;
    color: #F9F9F9 !important;
    background-color: #b5b5b5 !important;
}

.color-set-container {
    background: #F9F9F9 !important;
}

.color-swatch.btn.active::after{
    border-color: transparent transparent #F9F9F9 !important;
}


body #font-controls .caret {
    color: #EBEBEB !important;
}

.printformer-default-layout .editor-layout-inputs:focus {
    border-color: #FFFFFF !important;
    box-shadow: none !important;
}

.printformer-default-layout div.product-chooser div.product-chooser-item.selected,
.tab-button.active-tab-button {
    border-color: #343434 !important;
    background-color: #343434 !important;
    color: #EBEBEB !important;
    fill: #EBEBEB !important;
    stroke: #EBEBEB !important;
}

.printformer-default-layout .form-control,
.printformer-default-layout .selectize-input {
    background-color: #FFFFFF !important;
    color: #53565A !important;
    border-color: #FFFFFF !important;
}

.printformer-default-layout .form-control:focus,
.printformer-default-layout .selectize-input:focus {
    border-color: #FFFFFF !important;
    box-shadow: none !important;
}

.printformer-default-layout .selectize-input div {
    background-color: #53565A !important;
    color: #FFFFFF !important;
    border-color: #53565A !important;
}

.printformer-default-layout .input-group-addon {
    color: #EBEBEB !important;
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    border-radius: 0 4px 4px 0 !important;
}

.toolbar-bottom-border {
    border-bottom: 2px solid #53565A !important;
}

.thin-bottom-border {
    border-bottom: solid 1px #53565A;
}

.toolbar-color{
    color: #F9F9F9 !important;
}

button.color-swatch.btn.active-swatch, .active-preview, .active-variant, .active-template {
    border-color: #343434 !important;
}

button.color-swatch.btn {
    border: solid 1px #53565A;
}

button.color-swatch.add-color-btn:hover, button.color-swatch.delete-color-btn:hover,
button.color-swatch.edit-color-btn:hover {
    transition: all .15s linear,opacity 0s linear;
    background-color: #b5b5b5 !important;
    color: #F9F9F9 !important;
    fill: #F9F9F9 !important;
    stroke: #F9F9F9 !important;
}

button.color-swatch.delete-mode-active {
    transition: all .15s linear,opacity 0s linear;
    background-color: #b5b5b5 !important;
    color: #F9F9F9 !important;
    fill: #F9F9F9 !important;
    stroke: #F9F9F9 !important;
}

.editor-layout-hover-background {
    background-color: #b5b5b5 !important;
}

.page-planer-sidebar-tab{
    border-color: #F9F9F9 !important;
}
.canvas-svg-button .badge {
    background-color: #53565A !important;
    color: #EBEBEB !important;
}


.printformer-page-planner-layout #shape-elements-container:after {
    border-color: transparent transparent #F9F9F9 !important;
}

.flowpaper_toolbarstd, .flowpaper_tbbutton, .custom-review-background{
    background-color: #F9F9F9 !important;
}
.flowpaper_toolbarstd {
    border-bottom: 2px solid #53565A !important;
}
.flowpaper_tbbutton:active {
    background-color: #b5b5b5 !important;
}
.flowpaper_tbbutton:hover {
    border: 1px solid #b5b5b5 !important;
}
.flowpaper_tbbutton_pressed {
    background-color: #b5b5b5 !important;
}
.flowpaper_tbbutton:active {
    background-color: #b5b5b5 !important;
}
.flowpaper_tbbutton:hover {
    border: #b5b5b5 !important;
}
.canvas-svg-button.flowpaper_tbtextbutton_pressed {
    outline: 15px solid #F9F9F9 !important;
}
.flowpaper_toolbarstd_bottom {
    background-color: #F9F9F9 !important;
}
.flowpaper_tblabel {
    color: #53565A !important;
}

/**
 * Auth styles
 */

.auth-layout-login-form-text {
    color: #ffffff !important;
}
.auth-layout-login-form-text::placeholder {
    color: #ffffff !important;
    opacity: 0.7
}

#login input:-webkit-autofill,
#change-password input:-webkit-autofill,
#forgot-modal input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 9999px #454545 !important;
    -webkit-text-fill-color: #ffffff !important;
}

.auth-layout-primary {
    background-color: #ffffff !important;
}

.auth-layout-secondary {
    background-color: #454545 !important;
}

.auth-layout-tertiary,
.tabs .indicator,
[type="radio"]:checked+label:after,
[type="radio"].with-gap:checked+label:after {
    background-color: #4384C5 !important;
}

.auth-layout-tertiary-font-color,
body .dropdown-content li>a,
body .dropdown-content li>span {
    color: #4384C5 !important;
}


.auth-layout-button-text {
    color: #ffffff !important;
}

.auth-layout-text-and-icon {
    color: #454545 !important;
}

.auth-layout-primary .select-wrapper input.select-dropdown {
    border-bottom: 1px solid #4384C5;
}

.auth-layout-tertiary-border-color {
    border-color: #4384C5 !important;
}

.base-color-background, .ql-picker-options {
    background-color: #f8f7f7 !important;
}

.base-color-border {
    border-color: #f8f7f7 !important;
}

.base-color-fill-and-stroke {
    color: #f8f7f7 !important;
    fill: #f8f7f7 !important;
    stroke: none !important;
}

.menu-container .active, .menu-bottom .active, .active-hover-background:hover, .active-hover-background:active {
    background-color: #f1f0f0 !important;
}

.text-and-icons {
    color: #2d2d32;
    fill: #2d2d32;
    stroke: none;
    opacity: 0.9;
}

.text-and-icons-stroke {
    color: #2d2d32 !important;
    stroke: #2d2d32 !important;
    fill: none;
    opacity: 0.9;
}

.text-and-icons-stroke:hover, .text-and-icons-stroke:active{
    opacity: 1;
}

.text-and-icons:hover, .text-and-icons:active{
    color: #2d2d32;
    fill: #2d2d32;
    stroke: none;
    opacity: 1;
}

.text-and-icons-border-color{
    border-color: #2d2d32 !important;
}

body .text-and-icons-dark,
body .text-and-icons-dark svg {
    color: #2d2d32 !important;
    fill: #2d2d32 !important;
    stroke: none !important;
    opacity: 1 !important;
}

.text-headline {
    color: #2d2d32 !important;
    opacity: 1;
}

.text-description {
    color: #2d2d32 !important;
    opacity: 0.9;
}

.active-form-editor-group label {
    font-weight: bold;
}
.active-form-editor-group input, .active-form-editor-group textarea,
.active-form-editor-group .button-like-input {
    background-color: #a3c426 !important;
    border-color: #a3c426 !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
}
.button-like-input svg{
    width: 1.65rem !important;
    height: 1.65rem !important;
    margin: 0 0.5rem;
    opacity: 0.9 !important;;
}

.active-form-editor-group .button-like-input svg{
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 0.9 !important;;
}

.d-pad:before {
    background: #f1f0f0 !important;
}

.d-pad a {
    -webkit-tap-highlight-color:  #a3c426 !important
    color:#ffffff !important;
    background:  #a3c426 !important;
}
.d-pad a.up:hover {
    background: linear-gradient(0deg, #a3c426 0%,  #a3c426 50%) !important;
}
.d-pad a.up:before {
    border-color: transparent transparent #ffffff transparent !important;
}
.d-pad a.right:hover {
    background: linear-gradient(90deg, #a3c426  0%, #a3c426 50%) !important;
}
.d-pad a.right:before {
    border-color: transparent transparent transparent  #ffffff!important;
}
.d-pad a.down:hover {
    background: linear-gradient(90deg, #a3c426  0%, #a3c426 50%) !important;
}
.d-pad a.down:before {
    border-color: #ffffff transparent transparent transparent !important;
}
.d-pad a.left:hover {
    background: linear-gradient(90deg, #a3c426  0%, #a3c426 50%) !important;
}
.d-pad a.left:before {
    border-color: transparent #ffffff  transparent transparent !important;
}

.d-pad a:after{
    background: #f1f0f0 !important;
}

.user-color-one-background {
    background-color: #a3c426 !important;
}

.user-color-two-background {
    background-color: #a3c426 !important;
}

.user-color-two-border-active {
    border: 0.2rem solid #a3c426 !important;
}

.user-color-border-active {
    border-bottom: solid 0.3rem #a3c426 !important;
}

.user-color-border {
    border-bottom: solid 0.3rem transparent;
}

.user-color-two-background .text-and-icons{
    color: #ffffff;
    fill: #ffffff;
    stroke: none;
    opacity: 0.9;
}

.user-color-two-background .text-and-icons:hover,
.user-color-two-background .text-and-icons:active{
    color: #ffffff;
    fill: #ffffff;
    opacity: 1;
}

.user-color-two-icon {
    color: #a3c426 !important;
    fill: #a3c426 !important;
    stroke: none !important;
}

.user-color-main-content-background {
    background: #ffffff;
}

.user-color-two-icon-background {
    background: #ffffff;
}

.gradient-user-color-background {
    background: #a3c426;
    background: linear-gradient(90deg, #a3c426 0%, #a3c426 100%);
}

.gradation-three-color-background {
    background-color: #f4f4f4 !important;
}

.gradation-four-color-background {
    background-color: #eaeaeb !important;
}

.gradation-four-color-background-60 {
    background-color: #eaeaeb99 !important;
}

.gradation-four-color-background-90 {
    background-color: #eaeaebe6 !important;
}

.navbar-divider, .button-in-group-divider {
    background-image: linear-gradient(0deg, #2d2d32 25%, #f8f7f7 25%, #f8f7f7 50%, #2d2d32 50%, #2d2d32 75%, #f8f7f7 75%, #f8f7f7 100%);
}
.sidebar-divider {
    background-image: linear-gradient(90deg, #2d2d32 25%, #f1f0f0 25%, #f1f0f0 50%, #2d2d32 50%, #2d2d32 75%, #f1f0f0 75%, #f1f0f0 100%);
}

.gradation-one-color-background {
    background-color: #f1f0f0 !important;
}

.form-input, .textarea, .button-like-input,
input.ui-colorpicker-number,
input.ui-colorpicker-hex-input {
    background-color: #f8f7f7 !important;
    border-color: #f8f7f7 !important;
    color: #2d2d32 !important;
}

.form-input::placeholder, .textarea::placeholder {
color: #D3D3D3 !important;
}

.text-and-icons-dark .form-input, .text-and-icons-dark .textarea {
    background-color: #ffffff !important;
    border-color: #ffffff transparent !important;
    color: #2d2d32 !important;
    fill: #2d2d32 !important;
    stroke: #2d2d32 !important;
}

.text-and-icons-dark .active-hover-background:hover, .text-and-icons-dark .active-hover-background:active {
background-color: #f4f4f4 !important;
}

input[type=range]::-webkit-slider-runnable-track {
    background: #2d2d32;
    border: 0.013rem solid #2d2d32;
}
input[type=range]::-webkit-slider-thumb {
    background: #f1f0f0;
    border: 0.1rem solid #2d2d32;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #2d2d32;
}
input[type=range]::-moz-range-track {
    background: #2d2d32;
    border: 0.013rem solid #2d2d32;
}
input[type=range]::-moz-range-thumb {
    background: #f1f0f0;
    border: 0.1rem solid #2d2d32;
}
input[type=range]::-ms-fill-lower {
    background: #2d2d32;
    border: 0.013rem solid #2d2d32;
}
input[type=range]::-ms-fill-upper {
    background: #2d2d32;
    border: 0.013rem solid #2d2d32;
}
input[type=range]::-ms-thumb {
    background: #f1f0f0;
    border: 0.1rem solid #2d2d32;
}
input[type=range]:focus::-ms-fill-lower {
    background: #2d2d32;
}
input[type=range]:focus::-ms-fill-upper {
    background: #2d2d32;
}

.notification-center-open {
    background-color: #f1f0f0 !important;
}


.shape-rectangle {
    background-color: #2d2d32;
}

.shape-circle {
    background: #2d2d32;
}

.shape-triangle {
    border-bottom: 4.063rem solid #2d2d32;
}

#three-dee-split-view {
    border-color: #2d2d32 !important;
}
.file-drag-drop-editor-layout-text-and-icons-and-outline {
    color: #2d2d32;
    fill: #2d2d32;
    stroke: none;
    opacity: 0.9;
}

.file-drag-drop-editor-layout-text-and-icons-and-outline .uploader-drop {
    outline: 1px dashed #2d2d32CC !important;
}

.file-drag-drop-editor-layout-text-and-icons-and-outline.text-and-icons-dark {
    color: #2d2d32;
    fill: #2d2d32;
}

.file-drag-drop-editor-layout-text-and-icons-and-outline.text-and-icons-dark .uploader-drop {
    outline: 1px dashed #2d2d32CC !important;
}


.color-swatch.text-and-icons-border-color.active:after {
    border-color: transparent transparent #eaeaeb !important;
    border-style: solid;
    border-width: 0 0.625rem 0.625rem;
    content: " ";
    display: block;
    height: 0;
    margin: 0 auto;
    position: relative;
    width: 0;
    z-index: 1;
    top: 1.3rem
}


button.color-swatch.add-color-btn, button.color-swatch.delete-color-btn,
button.color-swatch.edit-color-btn {
    background-color: transparent !important;
    color: #2d2d32 !important;
    fill: #2d2d32 !important;
    stroke: none !important;
}

.ui-colorpicker {
    background-color: #eaeaeb !important;
    border-color: #eaeaeb !important;
}


.progress.user-color-2::-webkit-progress-value {
background-color: #a3c426;
}

.progress.user-color-2::-moz-progress-bar {
background-color: #a3c426;
}

.progress.user-color-2::-ms-fill {
background-color: #a3c426;
}

.popupS-layer {
    background-color: #f4f4f4 !important;
}
.popupS-close{
    color: #2d2d32 !important;
}
.popupS-title{
    color: #2d2d32 !important;
}
.popupS-content {
    color: #2d2d32 !important;
}
.selectize-control.text-and-icons-dark .item {
    background: #f1f0f0 !important;
    color: #2d2d32 !important;
}

.color-pick {
    border: 1px solid #2d2d32;
}

.tooltip-content {
    background-color: #f8f7f7 !important;
    color: #2d2d32 !important;
}

.tooltip-target-attached-top .tooltip-content:before {
    border-top-color: #c7db7a !important;
}

.tooltip-target-attached-bottom .tooltip-content:before {
    border-bottom-color: #c7db7a !important;
}

.tooltip-target-attached-left .tooltip-content:before {
    border-left-color: #c7db7a !important;
}

.tooltip-target-attached-right .tooltip-content:before {
    border-right-color: #c7db7a !important;
}

#vd-assignment .selectize-input, #vd-assignment .selectize-dropdown.multi {
    background-color: #f8f7f7 !important;
}

.selectize-input,
.selectize-input input {
    color: #2d2d32 !important;
}

.selectize-control.single .selectize-input:after {
    border-color: #2d2d32 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
    border-color: transparent transparent #2d2d32 transparent;
}

.selectize-control.plugin-remove_button [data-value] {
    color: #2d2d32 !important;
}

.selectize-control.multi .selectize-input > div {
    background-color: #f1f0f0 !important;
}
.selectize-control.plugin-remove_button [data-value] {
    color: #2d2d32 !important;
}

.form-input .selectize-dropdown{
    background: #f8f7f7 !important;
}

.form-input .selectize-dropdown .active{
    background: #f1f0f0 !important;
}

.form-input .selectize-dropdown .active.create{
    color: #2d2d32cc !important;
}

.form-input .selectize-dropdown .active.create strong{
    color: #2d2d32 !important;
}

#content-exchange-container .exchange-container {
    outline: 1px solid #2d2d32;
}

#content-exchange-container .exchange-container .product-list > li {
    border-bottom: 1px solid #2d2d32;
}

.pager-input-current-page {
    border-bottom: 1px solid #2d2d32!important;
}

.loader-ring div {
    border: 6px solid #2d2d32 !important;
    border-color: #2d2d32 transparent transparent transparent !important;
}

.slider {
    background-color: #f8f7f7;
}

.slider:before {
    background-color: #ffffff;
}

input:checked + .slider {
    background-color: #a3c426;
}

input:focus + .slider {
    box-shadow: 0 0 1px #a3c426;
}
.box-shadow {
    box-shadow: 1px 1px 10px 0px #f8f7f7;
}