:root {
    --brand-color-magenta: #e60064;
    --brand-color-magenta-hover: #a50048;
    --brand-color-blue: #003e6c;
    --button-color: #29a2e0;
    --color-media: #ffea34;
    --color-indigo-print: #239ad0;
    --color-post-cutting: #aef5d3;
    --color-pre-cutting: #96d4b7;
    --color-laminating: #c6bcf1;
    --color-saddle-stitching-auto: #6a91ad;
    --color-creasing-auto: #bf554f;
    --color-punching-manual: rgb(245, 155, 105);
    --color-wire-binding-auto: rgb(89, 208, 189);
    --color-die-cutting: rgb(197, 221, 120);
    --color-pur-gluing: rgb(213, 53, 59);
    --color-drilling: rgb(113, 109, 206);
    --color-emboss: rgb(139, 168, 104);
    --color-manual-work: rgb(214, 139, 90);
    --color-hot-foil-press: rgb(255, 191, 5);
    --color-outsource-work: rgb(1, 106, 108);
    --color-dtg-kornit: rgb(87, 200, 232);
    --foil-gold: rgb(248, 227, 117);
    --foil-silver: rgb(232, 232, 238);
    --foil-brown: rgb(145, 104, 96);
    --foil-white: rgb(250, 255, 255);
    --foil-red: rgb(214, 45, 86);
    --cmyk-cyan: #35c8ff;
    --cmyk-magenta: #ff45b9;
    --cmyk-yellow: #fff20e;
    --cmyk-black: #333;
    --kornit-green: #13d512;
    --kornit-red: #ff3f36;
    --estimate-active-green: rgba(96, 204, 155, 0.6)
}

.process-command {
    padding: 4px 8px;
    color: #633302;
    background-color: #fff379;
    border: 1px solid #ffb65e;
    display: inline-block;
    margin: 10px 0;
    font-weight: 500;
}

.access-locked .estimates--container{
    visibility: hidden;
}

.cc-sm-det,
.sm-text{
    font-size: 11px;
    line-height: 15px;
    color: #777;
}
.cc-sm-det em,
.sm-text em{
    font-style: normal;
}

.cc-strong700,
.strong700{
    font-weight:700;
    color: #333;
}
.cc-strong500,
.strong500 {
    font-weight:500;
    color: #333;
}
.strong300 {
    font-weight:300;
}
.cc-sm-det.cc-small,
.small {
    font-size: 10px;
}
.cc-sm-det.cc-pale,
.pale {
    color: #aaa;
}

/* buttons and links */
.button--link {
    margin: 0 20px 0 0;
    font-size: 1.1rem;
    cursor: pointer;
    float: left;
    font-weight: 500;
}
.button--link.hidden{
    display: none;
}
.button--link.positive {
    color: #29a2e0;
}
.button--link.negative {
    color: rgba(174, 70, 112, 0.87);
}
.button--link.negative:hover {
    color: #972758;
}
.button--link.neutral {
    color: rgba(0, 0, 0, 0.3);
}
.button--link.neutral:hover {
    color: rgba(0, 0, 0, 0.5);
}
.button--link.positive:hover:not(.opacity-50):not(.disabled) {
    color: #27414F;
}
.button--link.small {
    font-size: 11px;
}
.button--area {
    padding: 5px 12px;
    background-color: transparent;
    border: 1px solid #eee;
    border-radius: 3px;
    color: #888;
    margin: 0 1rem 0 0;
    display: inline-block;
    float: left;
    font-size: 1.1rem;
    cursor: pointer;
}
.button--area.flex {
    display: flex;
    align-self: center;
    justify-self: flex-start;
}

.button--area.float-r {
    float: right;
}
.button--area.last {
    margin: 0;
}
.button--area.positive {
    background-color: #29a2e0;
    border: 1px solid #29a2e0;
    color: #fff;
}
.button--area.positive-2 {
    background-color: darkseagreen;
    border: 1px solid darkseagreen;
    color: #fff;
}
.button--area.positive-2:hover:not(.disabled){
    background-color: #739773;
    border: 1px solid #739773;
}

.button--area.positive:hover:not(.disabled){
    background-color: #238cc1;
    border: 1px solid #238cc1;
}
.button--area.neutral{
    background-color: #555;
    border: 1px solid #555;
    color: #ddd;
}
.button--area.disabled,
.button--area.pale{
    background-color: #e7e7e7;
    border: 1px solid #d7d7d7;
    color: #666;
}
.button--area.disabled {
    opacity: 0.5;
    cursor: default;
}
.button--area.pale:hover:not(.disabled){
    background-color: #d1d1d1;
    border: 1px solid #d1d1d1;
}
.button--area.neutral:hover{
    background-color: #333;
    border: 1px solid #333;
}
.button--area.add-cost-item {
    padding: 2px 8px;
}
.button--area.size-l {
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 5px;
}


.calculators_contents {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 1;
    display: block;
    overflow-y: auto; /*"scroll" on win/linux always shows an ugly scrollbar*/
}
.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
}
.brand-logo {
    background-image: url(/images/pmx-pattern.svg);
    background-repeat: repeat;
    background-size: 250%;
    position: absolute;
    top: 8px;
    left: 10px;
    height: 32px;
    width: 32px;
    z-index: 5;
    opacity: 1;
    border-radius: 6px;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    background-position: 6px;
}
.brand-line {
    background-image: url(/images/pmx-pattern.svg);
    background-repeat: repeat;
    background-size: 120%;
    /*position: relative;*/
    /*top: 0;*/
    /*left: 0;*/
    height: 5px;
    width: 100%;
    /*z-index: 5;*/
    opacity: 1;
    overflow: hidden;
}
.header--container {
    width:100%;
    position: fixed;
    top:0;
    z-index: 500;
    height: 50px;
    color: #eee;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-column-gap: 20px;
    align-items: center;
    justify-content: stretch;
    background-color: #3E464F;
    font-size: 1rem;
    box-sizing: border-box;
    padding: 0 12px;
}
.header--container * {
    box-sizing: border-box;
}
.header--container .area {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.header--container .area.a-1 {
    flex: 0 0 auto;
    width: max-content;
    margin-right: 20px;
}
.header--container .area.a-2 {
    flex: 1 1 auto;
}
.header--container .area.a-3 {
    flex: 0 0 auto;

}

.header--container .logo img{
    display: inline-block;
    height: 30px;
}
.header--container .title{
    font-size: 23px;
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
    opacity: 0.8;
}
.header--container .headline-area{
    font-weight: 300;

}
.header--container .user-profile {
    display: inline-block;
    font-weight: 300;
    margin-right: 15px;
}
.header--container .version {
    font-weight: 300;
    font-size: 0.75rem;
    margin-right: 15px;
    text-transform: uppercase;
    opacity: 0.7;
}
.header--container .button--link {
    color: #eee;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    margin: 0 15px;
    padding: 16px 4px;
    border-bottom: 3px solid transparent;
}
.header--container .button--link:hover {
    opacity: 0.6;
}
.header--container .button--link.active {
    border-bottom: 3px solid var(--brand-color-magenta);
}

.center-view {
    width: 100%;
}
.page-title {
    font-size: 1.6rem;
    font-weight: 500;
    padding-right: 60px;
    align-self: center;
    text-transform: uppercase;
}
.main-contents {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: fixed;
    top: 50px;
    height: calc(100% - 50px);
    width: 100%;
    overflow-y: auto;
    background-color: #e3e3e3;
    align-content: center;
}
.main-contents > * {
    flex: 0 0 auto;
}

.estimate--container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    height: 100%;
    background-color: #fff;
}

.panel--project-controls {
    padding: 5px 15px;
    width: 100%;
    position: relative;
    z-index: 105;
    top: 0;
    background-color: #fff;
    height: 32px;
    display: grid;
    grid-template-columns: repeat(7,max-content) 1fr;
    box-sizing: border-box;
}
.panel--project-controls .save-status {
    margin: 0;
    color: tomato;
    font-style: italic;
    font-size: 1.1rem;
    justify-self: flex-start;
    font-weight: 500;
}
.panel--project-controls .save-status.saved {
    color: #25ad46;
}

.estimate--container .head-title {
    font-size: 2.4rem;
    font-weight: 500;
    padding-right: 20px;
    color: #333;
}



.panel--project-info {
    padding: 15px 15px 10px;
    width: 100%;
    /*position: relative;*/
    /*z-index: 105;*/
    /*top: 0;*/
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(6,max-content) 1fr;
    grid-column-gap: 20px;
    grid-template-rows: max-content;
    justify-content: flex-start;
    box-sizing: border-box;
}



.panel--project-info.price-set {
    grid-template-columns: repeat(6,max-content) 1fr;
}

.panel--project-info input {
    font-size: 16px;
    color: #333;
    padding: 2px 4px 2px 1px;
    border: none;
    font-weight: 500;
    background: #fafafa;
    border-bottom: 1px solid transparent;
}
.panel--project-info input.project-qty {
    width: 70px;
    font-weight: 700;
}

.panel--project-info input.range-qty-start,
.panel--project-info input.range-qty-end {
    width: 100px;
    font-weight: 700;
}

.panel--project-info input.project-id {
    width: 80px;
}
.panel--project-info input.project-invoice {
    width: 120px;
    margin-right: 10px;
    border: solid 1px #ddd
}
.panel--project-info input.project-customer {
    width: 220px;
}
.panel--project-info input.project-name {
    width: 220px;
}
.panel--project-info input:hover {
    background: #f6f6f6;
    border-bottom: 1px solid #e7e7e7;
}
.panel--project-info input:focus {
    background-color: #ffffbf;
    border-bottom: 1px solid #e7e7e7;
}
.panel--project-info .label {
    margin: 0 0 2px 0;
    font-size: 10px;
    color: #777;
    display: inline-block;
    text-transform: uppercase;
}
.panel--project-info .group {
    margin: 0;
    display: flex;
    flex-direction: column;
    place-content: flex-end;
}
.panel--project-info .group.qty .project-qty-enabler {
    display: inline-block;
}
.panel--project-info .group.qty .project-qty-enabler input{
    width: auto;
    margin-left: 6px;
}
.panel--project-info .group.exit {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-self: flex-end;
}





.panel--project-body{
    height: 100%;
    margin-top: 0;
    width: 100%;
}

.container--operations {
    height: calc(100% - 125px);
    overflow-y: auto;
    width: 100%;
    transition: height 0.3s ease;
}
.container--operations.shrank {
    height: calc(100% - 420px);
    overflow-y: scroll;
    transition: height 0.3s ease;
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: #999;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
    opacity: 0.8;
    z-index: 1000;
}
.popup{
    display: block;
    z-index: 2000;
    width: 90%;
    height: auto;
    position: fixed;
    min-height: 300px;
    background-color: #fff;
    border-radius: 0.2rem;
    padding: 12px;
    box-shadow: 0 5px 13px 4px rgba(0,0,0,0.12);
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.popup.hidden {
    display: none;
}
.popup.lowered {
    z-index: 900;
}
.cc-popup-head,
.popup-head{
    letter-spacing: 0.02em;
    color: #777;
    margin: 15px 0 17px 0;
    font-size: 18px;
}
.cc-smart-popup .cc-popup-head,
.cc-smart-popup .cc-popup-body,
.cc-smart-popup .cc-popup-foot {
    display: block;
    width: 100%;
    float: left;

}
.cc-smart-popup .cc-popup-foot.hide{
    display: none;
}
.cc-popup-foot,
.popup-foot{
    padding: 10px 0 10px 0;
}

.indigo-custom-color-choice.popup .indigo-color-select {
    width: 48%;
    float: left;
}
.indigo-paper-print-options{
    width: 100%;
    height: calc(100% - 60px);
    overflow: scroll;
    left: 0;
    top: 36px;
    transform: none;
}
.indigo-paper-print-options .cc-popup-body {
    min-width: 1180px;
    min-height: 500px;
}

.indigo-paper-print-options .error-area {
    display: inline-block;
    float: left;
    color: #cd0a0a;
    margin: 6px 0 0 30px;
}
.indigo-paper-print-options .error-area.hidden {
    display: none;
}


.popup.dark {
    background-color: #eee;
}
.indigo-print-media-cost-info{
    width:400px;
    min-height: 0;
}
.indigo-print-cost-details {
    margin-right: 0;
}
.indigo-finishing-choice {
    width:70%;
    min-height: 0;
}

.popup--settings-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    transform: none;
    padding: 0;
    box-sizing: border-box;
}
.popup--settings-container .op-content {
    display: grid;
    grid-template-rows: max-content 1fr max-content;
    height: calc(100% - 5px);
    background-color: #eee;
}
.popup--settings-container .popup-head {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
}
.popup--settings-container .head-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
}

.popup--settings-container .popup-body {
    height: 100%;
    overflow-y: auto;
}

.popup--settings-container .popup-foot {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
}

.panel--settings-input {
    width: 100%;
    background-color: #ddd;
    border-top: 1px solid #d3d3d3;
    position: fixed;
    bottom:-300px;
    padding: 20px 36px;
    z-index: 200;
    height: 300px;
    visibility: hidden;
    transition:All 0.3s ease;
    left: 0;
    box-sizing: border-box;
}
.panel--settings-input.show {
    visibility: visible;
    transition:All 0.3s ease;
    bottom:0;
}
.panel--settings-input .cc-sm-det,
.panel--settings-input .sm-det{
    color: #333;
}
.panel--settings-input .cc-sm-det.light,
.panel--settings-input .sm-det.light {
    color: #999;
}

.panel--settings-input .controls-op-section {
    display: none;
    height: calc(100% - 40px);
    width: 100%;
}
.panel--settings-input .controls-op-section.show {
    display: inline-block;
    visibility: visible;
}

.panel--settings-input .panel-head {
    width: 100%;
    margin: 0 0 14px 0;
    display: inline-block;
}
.panel--settings-input .panel-head .linked-line {
    margin-top: 1px;
    font-size: 11px;
}
.panel--settings-input .panel-head .linked-op-select {
    margin-left: 5px;
}

.panel--settings-input .op-title {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 16px;
    font-weight: 300;
    margin-right: 30px;
}
.panel--settings-input .op-title em{
    font-style: normal;
    font-weight: 700;
}
.panel--settings-input .pane-content {
    /*display: flex;*/
    /*display: -webkit-flex;*/
    /*flex-wrap: nowrap;*/
    /*-webkit-flex-wrap: nowrap;*/
    /*height: 100%;*/
}
.panel--settings-input .pane-content {
    display: grid;
    flex-wrap: nowrap;
    /*grid-template-columns: 4fr 1.3fr;*/
    grid-auto-flow: column;
    /*height: 100%;*/
    width: max-content;
}
.panel--settings-input .plotter-cutter .pane-content {
    grid-template-columns: 4fr 1.3fr;
    grid-template-rows: 225px;
}
.panel--settings-input .dtg-kornit .pane-content {
    grid-template-columns: max-content 1fr max-content 0.8fr;
    grid-template-rows: 225px;
    grid-column-gap: 10px;
}

.panel--settings-input .pane-content.sm-text {
    color: #333;
}

.panel--settings-input .pane-grouper.col2 {
    display: inline-block;
}
.panel--settings-input .pane-grouper {
    background-color: #e2e2e2;
    border: 1px solid #cdcdcd;
    padding: 10px 12px;
    margin-right: 10px;
    display: flex;
    box-sizing: border-box;
}
.panel--settings-input .pane-grouper.info {
    max-width: 50%;
}

.panel--settings-input .pane-grouper.suggestions {
    display: inline-block;
}

.panel--settings-input .dtg-kornit .pane-grouper{
    margin: 0;
    height: 100%;
}

.panel--settings-input .design-work textarea.base,
.panel--settings-input .transport textarea.base,
.panel--settings-input .outsource textarea.base {
    width: 400px;
    height: 180px;
    max-height: unset;
    resize: none;
}

.panel--settings-input .pane-grouper .group{
    float: left;
}
.panel--settings-input .pane-grouper .group:first-of-type {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #ccc;
}
.panel--settings-input .pane-grouper .group:last-of-type {
    border-right: none;
}
.panel--settings-input .pane-grouper .group.single:last-of-type {
    padding: 5px 0;
    margin: 0;
    width: 100%;
}

.panel--settings-input .pane-grouper.col1.hidden {
    display: none;
}
.panel--settings-input .pane-grouper .group-title{
    margin-bottom: 8px;
    display: inline-block;
    /*color: rgb(224, 88, 161);*/
    color: #999;
}
.panel--settings-input .line-item {
    display: inline-block;
    margin-bottom: 6px;
}

.panel--settings-input .line-item.below-choice-buttons {
    margin-bottom: 20px;
}
.panel--settings-input .line-item.service-pnl {
    margin-right: 10px;
}

.panel--settings-input .line-item.w100 {
    width: 100%;
}
.panel--settings-input .line-item.hidden{
    display: none;
}
.panel--settings-input .cc-select-base.hide {
    display: none;
}
.panel--settings-input .cc-select-base option.fits{
    background-color: #4f9851;
}
.panel--settings-input .wire-machine-auto.hide{
    display: none;
}
.panel--settings-input .pwo-booklet-part .pwo-cover-qty {
    padding-left: 20px;
}

.panel--settings-input .controls-op-section .linked-op-container {
    max-width: 170px;
}

.panel--settings-input .controls-op-section[data-op-type-id="1"] .linked-op-container,
.panel--settings-input .controls-op-section[data-op-type-id="2"] .linked-op-container {
    max-width: 500px;
    width: 50%;
}
.panel--settings-input .controls-op-section[data-op-type-id="3"] .linked-op-container {
    max-width: 250px;
    width: 20%;
}

.panel--settings-input .linked-op-container > * {
    display: inline-block;
    float: left;
    margin-right: 8px;
}
.panel--settings-input .linked-op-input-area {
    margin: 10px 0 0 0;
    width: 100%;
}

.panel--settings-input .linked-op-input-area .column {
    width: 40%;
    display: block;
    float: left;
}

.panel--settings-input .linked-op-update {
    display: inline-block;
}
.panel--settings-input .linked-op-update.hidden {
    display: none;
}

/* margin color */
.tone-good {color: #00AE00;}
.tone-medium {color: #e2813f;}
.tone-low {color: #e7468b;}
.tone-extreme {color: #ff0027;}
.tone-neutral {color: #888;}

/* discounts color */
.disc-good {color: #00AE00;}
.disc-fine {color: #1575d4;}
.disc-deep {color: #cb6a05;}
.disc-extreme {color: #e60023;}

/* background */
.color.bg.media {background-color: var(--color-media);}
.color.bg.indigo-print {background-color: var(--color-indigo-print);}
.color.bg.post-cutting {background-color: var(--color-post-cutting);}
.color.bg.pre-cutting {background-color: var(--color-pre-cutting);}
.color.bg.laminating {background-color: var(--color-laminating);}
.color.bg.saddle-stitching-auto {background-color: var(--color-saddle-stitching-auto);}
.color.bg.creasing-auto {background-color: var(--color-creasing-auto);}
.color.bg.punching-manual {background-color: var(--color-punching-manual);}
.color.bg.wire-binding-auto {background-color: var(--color-wire-binding-auto);}
.color.bg.drilling {background-color: var(--color-drilling);}
.color.bg.die-cutting {background-color: var(--color-die-cutting);}
.color.bg.pur-gluing {background-color: var(--color-pur-gluing);}
.color.bg.emboss {background-color: var(--color-emboss);}
.color.bg.manual-work{background-color: var(--color-manual-work);}
.color.bg.hot-foil-press{background-color: var(--color-hot-foil-press);}
.color.bg.outsource-work{background-color: var(--color-outsource-work);}
.color.bg.dtg-kornit{background-color: var(--color-dtg-kornit);}

/* border */
.color.border.media {border-color: var(--color-media);}
.color.border.indigo-print {border-color: var(--color-indigo-print);}
.color.border.post-cutting {border-color: var(--color-post-cutting);}
.color.border.pre-cutting {border-color: var(--color-pre-cutting);}
.color.border.laminating {border-color: var(--color-laminating);}
.color.border.saddle-stitching-auto {border-color: var(--color-saddle-stitching-auto);}
.color.border.creasing-auto {border-color: var(--color-creasing-auto);}
.color.border.punching-manual {border-color: var(--color-punching-manual);}
.color.border.wire-binding-auto {border-color: var(--color-wire-binding-auto);}
.color.border.drilling {border-color: var(--color-drilling);}
.color.border.die-cutting {border-color: var(--color-die-cutting);}
.color.border.pur-gluing {border-color: var(--color-pur-gluing);}
.color.border.emboss {border-color: var(--color-emboss);}
.color.border.manual-work{border-color: var(--color-manual-work);}
.color.border.hot-foil-press{border-color: var(--color-hot-foil-press);}
.color.border.outsource-work{border-color: var(--color-outsource-work);}
.color.border.dtg-kornit{border-color: var(--color-dtg-kornit);}

/* foil films */
.foil.gold{background-color: var(--foil-gold); color: #333;}
.foil.silver{background-color: var(--foil-silver); color: #333;}
.foil.brown{background-color: var(--foil-brown);}
.foil.white{background-color: var(--foil-white); color: #333;}
.foil.red{background-color: var(--foil-red);}


.close-cross {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    overflow: hidden;
    float: right;
    cursor: pointer;
    padding: 3px;
    border-radius: 20%;
    background-color: #ddd;
    box-sizing: content-box;
}
.close-cross::before,
.close-cross::after{
    content: '';
    position: absolute;
    height: 1px;
    width: 10px;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    background-color: #555;
}
.close-cross:hover{
    background-color: #aaa;
}
.close-cross::before{
    transform: rotate(45deg);
}
.close-cross::after{
    transform: rotate(-45deg);
}

/* add operations popup */
.popup.add-operations {
    width: 90%;
    max-height: 90%;
    overflow-y: auto;
}
.popup.add-operations .head .details {
    display: none;
}
.popup.add-operations .head {
    margin-bottom: 0;
}
.popup.add-operations .body {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100%;
}
.popup.add-operations .ops-container {
    display: grid;
    grid-template-rows: minmax(80px,max-content) 1fr;
    grid-row-gap: 20px;
    width: 100%;
    overflow-x: auto;
}

.ops-container .ops-material {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    width: 100%;
    height: 100%;
}
.ops-container .ops-rest {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-column-gap: 20px;
    width: 100%;
}
.ops-container .ops-block {
    display: grid;
    grid-template-rows: repeat(3,max-content);
    grid-auto-flow: row;
    grid-row-gap: 10px;
    width: 100%;
    align-content: flex-start;
}

.ops-container .badge {
    color: tomato;
    margin-left: 4px;
    font-size: 80%;
    vertical-align: top;
    display: none;
}
.ops-container .choice-unit.paperback-hot .badge,
.ops-container .choice-unit.skus .badge{
    display: inline-block;
}

.ops-container .ops-material .choice-unit {
    align-self: stretch;
}

.ops-container .title {
    align-self: flex-start;
    font-size: 18px;
    color: #444;
    display: inline-block;
    width: 100%;
    font-weight: 300;
}

.choice-unit {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    background-color: #eee;
    padding: 7px;
    border-radius: 3px;
    box-sizing: border-box;
    align-self: flex-start;
    cursor: pointer;
}
.ops-container .choice-unit:hover{
    background-color: #555;
}
.ops-container .choice-unit:hover .op-name {
    color: #eee;
}
.ops-container .choice-unit:hover .op-descr {
    color: #ccc;
}
.ops-container .op-name {
    font-size: 16px;
    color: #444;
    display: inline-block;
    width: 100%;
    font-weight: 700;
}
.ops-container .op-descr {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    color: #666;
}

/* op groups */
.cutting .choice-unit{background-color: lemonchiffon;}
.finishing .choice-unit{background-color: #fff1e4;}
.pressing .choice-unit{background-color: #e7f9fa;}
.laminating .choice-unit{background-color: #e8fae7;}
.services .choice-unit{background-color: #f0f3ff;}



/* new */
.indigo-paper-print-options .layout-position {
    margin: 20px 0 0 0;
    /*background-color: #aaa;*/
    text-align: center;
    height: 410px;
    padding: 12px 0;
    position: relative;
}
.indigo-paper-print-options .layout-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    background: repeating-linear-gradient( to bottom,
    rgba(197, 231, 236, 0.35),
    rgba(197, 231, 236, 0.35) 15px,
    rgba(180, 211, 216, 0.45) 15px,
    rgba(180, 211, 216, 0.45) 30px );
}
.indigo-paper-print-options .layout-container.ver {
    background: repeating-linear-gradient( to right,
    rgba(197, 231, 236, 0.35),
    rgba(197, 231, 236, 0.35) 15px,
    rgba(180, 211, 216, 0.45) 15px,
    rgba(180, 211, 216, 0.45) 30px );
}


.indigo-paper-print-options .layout-container .layout-sheet {
    background-color: #333;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.indigo-paper-print-options .layout-container .size-el{
    font-size: 11px;
    color: #555;
}
.indigo-paper-print-options .layout-container .size-el.width{
    margin-bottom: 0;
    position: absolute;
    z-index: 10;
    width: 100%;
    top: 0;
    left: 0;
    height: 30px;
}
.indigo-paper-print-options .layout-container .size-el.height{
    width: 65px;
    height: calc(100% - 30px);
    position: absolute;
    left: 0;
    top: 30px;
    z-index: 30;
}

.indigo-paper-print-options .layout-imposition {
    /*border: thin solid #aaa;*/
    background-color: #fff;
    display: none;
    transform: translateY(-50%) translateX(-50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

.indigo-paper-print-options .layout-imposition .cc-fs-container {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.indigo-paper-print-options .layout-imposition .cc-fs-item {
    background-color: #ffd6e4;
    /*border-right: 1px solid #aaa;*/
    /*border-bottom: 1px solid #aaa;*/
    /*box-sizing: border-box;*/
    position: absolute;
    top: 0;
    left: 0;
}
.indigo-paper-print-options .layout-imposition .fs-item-gutter-free {
    background-color: #ccc;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    position: relative;
    box-sizing: border-box;
    top: 0;
    left: 0;
    text-align: center;
}
.indigo-paper-print-options .layout-imposition .cc-fs-item.cc-last-hor .fs-item-gutter-free {
    border-right: none;
}
.indigo-paper-print-options .layout-imposition .cc-fs-item.cc-last-ver .fs-item-gutter-free {
    border-bottom: none;
}

.indigo-paper-print-options .layout-imposition .fs-letter {
    width: 40%;
    height: 40%;
    display: block;
    transform: translateY(-50%) translateX(-50%);
    position: relative;
    left: 50%;
    top: 50%;
    opacity: 0.7;
}
.indigo-paper-print-options .layout-imposition .fs-letter.hide {
    display: none;
}

.panel--settings-input .tab-version  {
    padding: 0;
    height: calc(100% - 2px);
    display: inline-block;
}
.panel--settings-input .tab-version .header-area{
    width: 100%;
    display: inline-block;
    float: left;
    padding: 8px 10px 7px;
    box-sizing: border-box;
}
.panel--settings-input .tab-version .header-area .red {
    color: #ec2828;
}
.panel--settings-input .tab-version .header-area > * {
    display: inline-block;
    float: left;
}
.panel--settings-input .tab-version .header-area .value {
    margin-right: 20px;
}
.panel--settings-input .tab-version .header-area .title {
    margin-right: 5px;
}
.panel--settings-input .tab-version .header-area .value.items-on-cut-form-static{
    margin-right: 0;
}
.panel--settings-input .tab-version .header-area .slash,
.panel--settings-input .tab-version .header-area .sheets-with{
    margin: 0;
}
.panel--settings-input .tab-version .header-area .action-button:first-of-type {
    margin-left: 10px;
}
.panel--settings-input .tab-version .tab-buttons-area {
    width: 40%;
    display: inline-block;
    float: left;
    background-color: #f7f7f7;
    height: calc(100% - 30px);
    overflow-y: auto;
}
.panel--settings-input .tab-version .tab-content-area {
    width: 60%;
    float: left;
    background-color: #f1f1f1;
    height: calc(100% - 30px);
    display: inline-block;
    overflow-y: auto;
}

.panel--settings-input .tab-version .tab-content-area .backed-area {
    background: #e2e2e2;
    padding: 10px;
    border-radius: 3px;
}

.panel--settings-input .tab-version .tab-item-content {
    display: none;
    padding: 7px 14px;
}
.panel--settings-input .tab-version .tab-item-content.active {
    display: inline-block;
}
.panel--settings-input .tab-version .tab-item-tab {
    cursor: pointer;
    padding: 4px 8px;
    border-bottom: solid thin #ddd;
}
.panel--settings-input .tab-version .tab-item-tab.active {
    background-color: rgba(212,242,255,0.75);
}
.panel--settings-input .tab-version .tab-item-tab:hover:not(.active) {
    background-color: #e9e9e9;
}

.panel--settings-input .tab-version .tab-item-content .delete-tab-item {
    display: inline-block;
    float: unset;
}

/* dtg temporary updated op  */

.panel--settings-input .option-list {
    display: grid;
    grid-template-rows: repeat(6,max-content);
    height: 100%;
    background-color: #ececec;
    border: 1px solid #cdcdcd;
    overflow-y: auto;
}
.panel--settings-input .option-list--item {
    padding: 5px 10px;
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
    background-color: #fff;
    border-bottom: thin solid #cdcdcd;
    cursor: pointer;
}
.panel--settings-input .design-work .option-list--item {
    grid-template-columns: 180px 230px;
}

.panel--settings-input .option-list--item.active {
    background: var(--button-color);
    border-bottom: thin solid var(--button-color);
    color: #fff;
}
.panel--settings-input .option-list--item:hover:not(.active){
    background-color: #f1f1f1;
}

.panel--settings-input .option-list--item .title {
    font-weight: 500;
    font-size: 12px;
    align-self: center;
}
.panel--settings-input .option-list--item .content {
    font-size: 12px;
    align-self: center;
}

.panel--settings-input .pane-title {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 12px;
}
.panel--settings-input .brick {
    display: grid;
    grid-template-rows: repeat(3,max-content);
    grid-auto-flow: row;
    grid-row-gap: 10px;
}
.panel--settings-input .brick .item {
    display: flex;
    flex-direction: column;
}
.panel--settings-input .brick .item-title {
    margin: 0 0 4px 0;
    display: inline-block;
}
.panel--settings-input .brick input {
    font-size: 13px;
    padding: 4px 6px;
    font-weight: 500;
    color: #333;
}
.panel--settings-input .brick .unit-width,
.panel--settings-input .brick .unit-height {
    width: 60px;
}
.panel--settings-input .brick .product-size {
    width: 60px;
}
.panel--settings-input .brick .product-color {
    width: 200px;
}
.panel--settings-input .brick .design-title,
.panel--settings-input .brick .comment{
    width: 300px;
}
.panel--settings-input .brick .total-duration {
    width: 80px;
}





.indigo-paper-print-options .items-on-finish-size-line {
    display: inline-block;
}
.indigo-paper-print-options .items-on-finish-size-line.hidden {
    display: none;
}

.cc-help-icon.mar-right,
.help-icon.mar-right{
    margin-right: 10px;
}

/* row version */
.panel--settings-input .row-version  {
    flex-direction: column;
    -webkit-flex-direction: column;
    height: calc(100% - 22px);
}
.panel--settings-input .dtg-kornit .row-version {
    height: 100%;
}


.panel--settings-input .row-version .rows-table {
    width: 100%;
}

.panel--settings-input .input--text-base {
    max-width: 300px;
    width: 70%;
    min-width: 100px;
}
.panel--settings-input .row-version .header-area{
    width: 100%;
    display: inline-block;
    float: left;
    padding: 8px 10px 7px;
    box-sizing: border-box;
}
.panel--settings-input .row-version .header-area > * {
    display: inline-block;
    float: left;
}
.panel--settings-input .row-version .header-area .value {
    margin-right: 20px;
}
.panel--settings-input .row-version .header-area .title {
    margin-right: 5px;
}
.panel--settings-input .row-version .header-area .action-button:first-of-type {
    margin-left: -8px;
}

.panel--settings-input .row-version .general-area .type-choice {

}
.panel--settings-input .row-version .general-area .type-choice label:first-of-type{
    margin-right: 10px;
}

.panel--settings-input .row-version .rows-area {
    width: 100%;
    display: inline-block;
    float: left;
    background-color: #f7f7f7;
    height: calc(100% - 56px);
    overflow-y: auto;
}
.panel--settings-input .dtg-kornit .row-version .rows-area {
    height: auto;
    background-color: transparent;
}
.panel--settings-input .row-version .row-item {
    cursor: default;
    border-bottom: solid thin #ddd;
}
.panel--settings-input .row-version .row-item:nth-of-type(odd) {
    background: #f2f2f2;
}
.panel--settings-input .dtg-kornit .row-version .row-item:nth-of-type(odd) {
    background: #333;
    color: #eee;
}

.panel--settings-input .row-version .row-item:hover {
    background-color: #e9e9e9;
}
.panel--settings-input .row-version .row-item td {
    padding: 6px 8px;
}

.panel--settings-input .row-version .unit-film,
.panel--settings-input .row-version .complexity-rate {
    width: 100px;
}
.panel--settings-input .row-version .unit-width,
.panel--settings-input .row-version .unit-height,
.panel--settings-input .row-version .weed-time-per-item {
    width: 60px;
}
.panel--settings-input .row-version .color-code {
    width: 50px;
}

.panel--settings-input .choice-buttons .item {
    padding: 3px 10px;
    background: #d7d7d7;
    color: #555;
    border-radius: 20px;
    margin-right: 5px;
    cursor: pointer;
    border: thin solid #ccc;
    display: inline-block;
}
.panel--settings-input .choice-buttons .item.active {
    background: var(--button-color);
    border: thin solid var(--button-color);
    color: #fff;
}
.panel--settings-input .choice-buttons .item:hover:not(.active){
    background: #d1d1d1;
}
.panel--settings-input .color-sets {
    margin-right: 10px;
    float: left;
    font-size: 12px;
    padding: 3px 4px;
    font-weight: 500;
}
.panel--settings-input .color-set-sample {
    display: inline-block;
    float: left;
    margin-top: 6px;
}
.panel--settings-input .imprint-position {
    margin-right: 10px;
    float: right;
}
.panel--settings-input .dtg-kornit .imprint-position {
    float: unset;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.panel--settings-input .placement-line {
    float: right;
}

.panel--settings-input .general-area .line-item{
    margin-right: 20px;
}
.panel--settings-input .general-area .line-item .bus-chk {
    margin-right: 4px;
}

.panel--settings-input .general-area .line-item:not(.choice-buttons){
    margin-top: 4px;
}
.panel--settings-input .creasing-auto .pane-grouper {
    flex-direction: column;
}
.panel--settings-input .creasing-auto .pane-grouper .line-item {
    width: 300px;
    padding: 3px 0 7px;
    margin-bottom: 4px;
    border-bottom: 1px solid #cecece;
}
.panel--settings-input .paperback-binding .line-item {
    min-width: 100px;
    padding: 3px 0 7px;
    margin-bottom: 4px;
}
.panel--settings-input .dtg-kornit .pane-grouper {
    flex-direction: column;
}




.color-set-sample .item {
    width: 12px;
    height: 12px;
    display: inline-block;
    float: left;
    border-radius: 50%;
    margin-right: 3px;
}
.color-set-sample .item.cyan {background: var(--cmyk-cyan);}
.color-set-sample .item.magenta {background: var(--cmyk-magenta);}
.color-set-sample .item.yellow {background: var(--cmyk-yellow);}
.color-set-sample .item.black {background: var(--cmyk-black);}
.color-set-sample .item.green {background: var(--kornit-green);}
.color-set-sample .item.red {background: var(--kornit-red);}
.color-set-sample .item.white {background: #fff;}


.informative {
    opacity: 0.5;
}
input.color-code {
    width: 70px;
}

.indigo-paper-print-options .finish-size-flip {
    width: 16px;
    height: 16px;
    display: inline-block;
    float: left;
    margin-right: 12px;
    margin-top: 4px;
    opacity: 1;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 4px;
}
.indigo-paper-print-options .finish-size-flip:hover{
    opacity: 0.7;
}
.indigo-paper-print-options .finish-size-flip img {
    width: 100%;
}
.cc-opacity-50,
.opacity-50 {
    opacity: 0.5;
}

.cc-help-icon,
.help-icon{
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #bbb;
    display: inline-block;
    font-size: 10px;
    height: 12px;
    line-height: 14px;
    margin-left: 5px;
    text-align: center;
    width: 12px;
    cursor: pointer;
}
.cc-help-icon:hover,
.help-icon:hover{
    background-color: rgba(255, 255, 255, 0.8);
    color: #777;
}
.cc-help-icon.cc-input-pos,
.help-icon.input-pos{
    margin-top: 3px;
}



.popup--general-use,
.popup--saving {
    width: 50%;
    min-width: 400px;
    min-height: unset;
    padding: 20px;
    box-sizing: border-box;
}
.popup--saving {
    width: 50%;
    min-width: 300px;
    max-width: 400px;
}


.popup--general-use .head,
.popup--saving .head{
    display: inline-block;
    width: 100%;
    margin-bottom: 25px;
}
.popup--general-use .bottom {
    display: inline-block;
    width: 100%;
    margin-top: 25px;
}
.popup--general-use .head .title,
.popup--saving .head .title,
.popup .head .title {
    display: inline-block;
    width: 100%;
    font-size: 24px;
    margin: 0 0 14px 0;
    font-weight: 300;
    color: var(--button-color);
}
.popup--general-use .head .details,
.popup--saving .head .details{
    display: inline-block;
    width: 100%;
    font-size: 12px;
    color: #777;
    letter-spacing: 0.05rem;
}
.popup--general-use .body,
.popup--saving .body{
    display: inline-block;
    width: 100%;
}
.popup--general-use .button--area {
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 5px;
}

.popup--general-use .general-popup-text {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.02rem;
}



/* save as template popup */
.popup-save-as-template .block {
    display: inline-block;
    width: 100%;
    margin: 0 0 15px;
}
.popup-save-as-template .block .label {
    display: inline-block;
    width: 100%;
    font-size: 15px;
    padding: 3px 0 7px;
    font-weight: 500;
}
.popup-save-as-template .block .entry {
    font-size: 15px;
    padding: 9px 10px;
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.popup-save-as-template .template-product-category {
    font-size: 14px;
    padding: 4px 9px;
}





/* should be at the end */
.show {
    display: block;
}
.hidden{
    display: none;
}

.base-checkbox {
    margin-right: 7px;
}

.secret-off {
    display: none;
}
.secret-on {
    display: table-cell;
}

.cat-calendar {background-color: #6cd1dd;}
.cat-business-card {background-color: #cdb5dd;}
.cat-info-sheet {background-color: #ddada4;}
.cat-poster-a2plus {background-color: #ddd360;}
.cat-poster-a3minus {background-color: #dd8587;}
.cat-flyer {background-color: #96ac9c;}


/* icons */
.icon-img {
    background-image: url('/images/icons5.png');
    background-repeat: no-repeat;
    background-size: 250px 500px;
}
.icon-img.cc-locked-gold {
    background-position: -90px -356px;
    opacity: 0.8;
}
.icon-img.cc-locked-gold:hover:not(.cc-lock-disabled){
    opacity: 1;
}
.icon-img.cc-unlocked-black-wide {
    background-position: -3px -356px;
}
.icon-img.cc-unlocked-black-narrow {
    background-position: -60px -356px;
}
.icon-img.cc-locked-black,
.icon-img.cc-unlocked-black-wide,
.icon-img.cc-unlocked-black-narrow{
    opacity: 0.45;
}
.icon-img.cc-locked-black:hover:not(.cc-lock-disabled),
.icon-img.cc-unlocked-black-wide:hover:not(.cc-lock-disabled),
.icon-img.cc-unlocked-black-narrow:hover:not(.cc-lock-disabled){
    opacity: 0.85;
}
.icon-img.cc-lock-disabled {
    opacity: 0.15;
    cursor: default;
}
.cc-icon-lock-position {
    width:20px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
    margin-left: 7px;
    margin-top: -3px;
}
.icon-img.duplicate {
    background-position: 2px -294px;
    opacity:0.8;
}
.icon-img.duplicate:hover{
    opacity:1;
    background-position: 2px -324px;
}
/* end */

/* progress bar */
.progress-container {
    width: 100%;
}
.progress-container .bar {
    display: flex;
    /*border: 1px solid #eee;*/
    height: 16px;
    width: 100%;
    overflow: hidden;
    background-color: #fafafa;
    justify-content: flex-start;
    align-items: flex-start;
}
.progress-container .filling {
    height: 100%;
    width: 0.5%;
    background-color: var(--button-color);
    display: inline-block;
}


.estimates-list .refresh,
.price-review .refresh{
    display: flex;
    align-items: center;
}
.estimates-list .refresh-handle,
.price-review .refresh-handle {
    width: 15px;
    height: 21px;
    cursor: pointer;
    fill: #777;
}
.estimates-list .refresh-handle:hover,
.price-review .refresh-handle:hover{
    fill: #29a2e0;
}

.instruction-line.hidden {
    display: none;
}


@media screen and (min-width: 650px) {

}
@media screen and (min-width: 1000px) {

}
@media screen and (min-width: 1400px) {

}

textarea.comment{
    background-color: white !important;
}

.container--operations .base-table{
    margin-bottom: 60px;
}

.big-project-title-for-worksheet{
    width: calc(100% - 26px);
    margin: 10px;
    padding: 2px;
    border: solid thin lightgrey;
    height: 16px;
}