* {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ng-leave {
    display: none !important;
}

body {
    min-height: 100vh;
}

.js-force-show {
    display: block !important;
}

#loading-screen {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: white;
}

.cursorpoint {
    cursor: pointer !important;
}

h3 {
    padding: 0px;
    font-weight: normal;
}

p {
    padding: 5px 0;
}

input[type=text],
input[type=password] {
    width: 350px;
    outline: none;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 2px 2px 5px grey;
    padding: 10px 5px;
    transition: .2s ease;
}

input[type=number] {
    text-align: center;
}

input[type=text]:focus,
input[type=password]:focus {
    box-shadow: 0 0 0 grey;
}

input[type=text]:disabled {
    color: black;
    background-color: white;
    box-shadow: 0 0 0 grey;
    width: 500px;
    max-width: 100%;
    text-align: center;
    color: rgb(130, 130, 130);
}

.spacing-element {
    display: block;
    height: 5px;
}

.template-preloader {
    display: none;
}

.question-separator {
    border-top: 1px solid lightgray;
}

.subtext {
    font-size: 16px;
    color: var(--grey);
}

#page-wrapper {
    display: block;
    width: 100%;
    text-align: center;
    padding-bottom: 400px;
    padding-right: 100px;
}

.quote-calculator {
    display: inline-block;
    width: 900px;
    margin: 100px 50px 30px 50px;
    background-color: #eceff1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px black;
    vertical-align: top;
    text-align: left;
}

.title-wrapper {
    background-color: var(--primary);
    color: white;
    padding: 20px 20px;
    font-weight: normal;
    border-radius: 5px 5px 0 0;
}

.question-wrapper {
    padding: 5px 20px 10px 20px;
    position: relative;
}

.question-text {
    color: black;
    font-size: 16px;
    font-weight: normal;
    margin: 10px 0;
}

.question-text-small-marg-bottom {
    margin-bottom: 3px;
}

.question-subtext {
    font-style: italic;
    font-size: 16px;
    margin-top: -20px;
    color: rgb(80, 80, 80);
}


/* input type=number arrow removal - Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* input type=number arrow removal - Firefox */

input[type=number] {
    -moz-appearance: textfield;
}


/* Remove selection abilities for certain elements */

.noselect,
.button1,
.button2,
.button3,
.tab-strip-tab,
.cover-tab-strip-tab {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.info-button {
    position: absolute;
    top: 11px;
    right: 80px;
    background-color: var(--primary);
    padding: 4px;
    border-radius: 100%;
    height: 34px;
    width: 34px;
    color: white;
    font-weight: bold;
    text-align: center;
    font-family: 'Roboto', serif;
    font-size: 24px;
    transition: .2s ease;
    cursor: pointer;
}

.info-button:hover {
    box-shadow: 0 0 5px black;
}

.clickImmune {
    pointer-events: none;
}

.cs-wrapper {
    display: inline-block;
    margin: 10px 30px;
}

.cs-text-left {
    display: inline-block;
    padding: 10px;
    width: 80px;
}

.cs-text-right {
    display: inline-block;
    margin-left: 10px;
}

#custom-size-input {
    display: block;
    text-align: center;
}

.relPos {
    position: relative;
}

.inlineblock {
    display: inline-block;
}

.center {
    text-align: center;
}

.marg-30 {
    margin: 30px;
}

.no-margin {
    margin: 0;
}

.single-option-text {
    padding: 10px;
    background-color: yellow;
}

.centering {
    display: block;
    text-align: center;
}

.hidden {
    opacity: 0;
    transition: .2s ease;
}

.not-hidden-override {
    opacity: 1;
}

.select-css {
    display: block;
    color: #444;
    padding: .6em 1.4em .5em .8em;
    width: 120px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
    border-radius: .5em;
    background-color: #fff;
    text-align: center;
}

.select-css:hover {
    border-color: #888;
}

.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}

.note {
    color: darkgreen;
    font-size: 14px;
}

.note:before {
    content: "Note: ";
}


/* Tooltip container */

.tooltip {
    position: relative;
    display: inline-block;
}


/* Tooltip text */

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.textarea-standard {
    resize: none;
    height: 200px;
    width: 100%;
    padding: 2px;
    margin-bottom: 30px;
}

.js-pantone-correct {
    border: 2px solid green;
}

.js-pantone-incorrect {
    border: 2px solid red;
}

.pantone-status-icon {
    height: 30px;
    width: 30px;
    display: inline-block;
    margin-top: 7px;
}

#pantoneColourTester {
    border-radius: 20px;
    display: block;
    margin: 10px auto;
    box-shadow: 0 0 5px grey;
    padding: 10px 30px;
    cursor: pointer;
}

.pantone-info-wrapper {
    display: inline-block;
}

.maximise-pantone-icon {
    height: 40px;
    width: 40px;
    padding: 7px;
    display: inline-block;
    margin-top: 10px;
    margin-left: 15px;
}

.question-core-element {
    display: inline-block;
    font-weight: bold;
    margin-left: 5px;
    font-size: 16px;
}

.pantone-input-delete-thumbnail {
    height: 40px;
    margin-top: 8px;
    vertical-align: top;
    transition: .1s ease;
    cursor: pointer;
    position: relative;
    right: 0;
}

.pantone-input-delete-thumbnail:hover {
    height: 46px;
    margin-top: 5px;
    right: 3px;
}

/* Styling required for choosing different artwork plans */

.artwork-option-wrapper {
    display: inline-block;
    vertical-align: top;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgb(207, 207, 207)), color-stop(0.79, rgb(252, 252, 252)));
    background-image: -moz-linear-gradient(center bottom, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
    background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
    border-radius: 10px;
    border: 1px solid black;
    padding: 20px;
    margin: 10px;
    width: calc(33.3333333% - 30px);
}

.artwork-option-thumbnail {
    display: block; 
    width: 60%;
    margin: 5px auto;
    border-radius: 10px;
}

.artwork-option-title {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.artwork-option-list {
    margin-left: 20px;
    text-align: left;
}

.artwork-option-bullet {
    margin-left: 20px;
    font-size: 14px;
}

.artwork-select-button {
    font-size: 16px;
    display: block;
    width: 80%;
    margin: 5px auto;
}

.icon-wrapper {
    border-radius: 100%;
    margin: 0 10px;
    display: inline-block;
    box-shadow: 0 0 5px grey;
    width: 34px;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
    transition: .2s ease;
    position: relative;
    top: 5px;
}

.icon-wrapper:hover {
    box-shadow: 0 0 2px grey;
}

.icon-image {
    height: 20px;
    margin: 2px;
}

.half-wrapper {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin: 0;
}

.colour-circle {
    height: 45px;
    width: 45px;
    border-radius: 100%;
    position: absolute;
    top: 10px;
}
.collapse-icon {height: 40px; cursor: pointer;}
.coreElementDropdown {height: 40px; background-color: var(--primary); border-radius: 100%; padding: 4px; position: relative; top: 0px; right: -40px; cursor: pointer; box-shadow: 0 0 5px grey;}
.coreElementDropdown:hover, .collapse-icon:hover {box-shadow: 0 0 0 grey;}
.coreElementDropdownReduced {transform: rotate(0deg);}
.coreElementDropdownExpanded {position: absolute; right: 30px; top: 20px; transform: rotate(180deg);}
.collapse-icon-opened {transform: rotate(180deg);}
.id5halfElement {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}
@media only screen and (max-width: 822px) {
    .id5halfElement {
        display: block;
        text-align: left;
    }
    #centeringId5 {
        text-align: left;
    }
}
@media only screen and (max-width: 580px) {
    .id5halfElement.size-half-element-1 { width: 100%; }
	.id5halfElement.size-half-element-2 { width: 100%; }
}

.coreElementDropdownStyles {
    transform: rotate(0deg);
    position: absolute;
    right: 30px;
    top: 20px;
    height: 40px;
    background-color: var(--primary);
    border-radius: 100%;
    padding: 4px;
    cursor: pointer;
    box-shadow: 0 0 5px grey;}
.coreElementDropdownStylesExpanded {
    transform: rotate(180deg);
}

.z-fold-table {margin-top: 0px;}
.z-fold-table-row {border: 0;}
.z-fold-table-cell {border: 1px solid black;}

.question-wrapper-collapsed {padding: 10px 20px; display: block; position: relative; cursor: pointer;}
.question-text-collapsed {display: inline-block; font-weight: bold;}
.question-text-value {display: inline-block;}
.collapse-icon {position: absolute; top: 10px; right: 10px; height: 36px; z-index: 20;}

#hardware-preview-thumbnail {width: 250px; position: absolute; bottom: 10px; right: 10px;}

.image-zoom-icon {position: absolute; top: 5px; right: 5px; z-index: 100; width: 25px;}

.parent-child-multiple-select-wrapper{border-bottom: 1px solid lightgrey; padding: 5px;}
.pc-multiple-select-parent-wrapper {display: block; position: relative; cursor: pointer;}
.pc-multiple-select-checkbox, .pc-multiple-select-checkbox-child {height: 25px; width: 25px; display: inline-block; position: relative; top: 5px; margin-right: 10px; pointer-events: none;}
.pc-multiple-select-parent-text {font-weight: bold; display: inline-block; vertical-align: top;}
.pc-multiple-select-child-text-display {display: inline-block; vertical-align: top; position: absolute; right: 20px;}
.pc-multiple-select-child-wrapper {display: none;}
.pc-multiple-select-child-text {cursor: pointer;}
.pc-multiple-select-child-text:hover {background-color: lightgrey;}
.pc-multiple-select-child-text-selected {background-color: rgb(230, 230, 230);}
.pc-quantity-wrapper {display: block;}
.pc-quantity-title {display: inline-block; vertical-align: top; line-height: 40px; margin-right: 20px; margin-left: 60px;}
.pc-quantity-plus, .pc-quantity-minus {cursor: pointer; border-radius: 4px 0 0 4px; width: 60px; text-align: center; display: inline-block; vertical-align: top; line-height: 30px; font-weight: bold; font-size: 30px; padding: 5px; background-color: grey; color: white;}
.pc-quantity-plus {border-radius: 0 4px 4px 0;}
.pc-quantity-input {display: inline-block; vertical-align: top; line-height: 40px; box-shadow: 0 0 0 0 grey !important; margin: 0 !important; padding: 0; height: 40px; border-radius: 0 !important;}
.pc-quantity-input-wrapper {padding-top: 6px; display: inline-block;}
.pc-multiple-select-checkbox-child {margin-left: 60px;}
.pc-child-repeating-wrapper {border-top: 1px solid lightgrey;}

.pantone-input-wrapper {display: block; padding: 5px 0; position: relative;}
.pantone-input {vertical-align: top;}
.pantone-preview {height: 46px; width: 46px; border-radius: 100%; display: inline-block; background-color: white; margin-left: 20px; border: 1px solid grey; vertical-align: top;}
.pantone-delete-button {height: 35px; width: 35px; cursor: pointer; margin-left: 20px; margin-top: 5px;}
.pantone-autofill-dropdown {max-height: 300px; overflow-Y: auto; background-color: white; position: absolute; top: 100%; width: 300px; z-index: 30; transform: translate(4px, -10px); box-shadow: 0 2px 5px grey;}
.pantone-autofill-dropdown-item {width: 100%; padding: 5px; border-top: 1px solid lightgrey; cursor: pointer; transition: .2s ease;}
.pantone-autofill-dropdown-item:hover {background-color: rgb(230, 230, 230);}

.variable-data-checkbox {pointer-events: none;}
.variable-data-option-wrapper {/*border-bottom: 2px dashed rgb(180, 180, 180); */padding-top: 10px;}
.variable-data-select-click-wrapper {cursor: pointer;}
.variable-data-checkbox {height: 25px; width: 25px; display: inline-block; vertical-align: top;}
.variable-data-text {vertical-align: top; display: inline-block; margin-left: 10px; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; position: relative;}
.variable-data-child-text {display: block;}
.variable-data-text-input {padding: 5px !important; margin-bottom: 10px !important;}
.variable-data-textarea {height: 120px; width: 100%;}
.variable-data-file-upload {display: block;}
.variable-data-hidden-wrapper {padding: 10px 0 10px 60px;}
.variable-data-file-uploaded-notification-wrapper {padding-top: 20px;}

.aggregated-size-interface-tab {
    background-color: grey;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    margin: 0 2px;
    border-radius: 5px 15px 0 0;
    color: white;
    font-size: 22px;
    width: 200px;
    transition: .4s ease;
}
.aggregated-size-interface-tab-active {
    background-color: var(--primary);
    cursor: default;
}


.remove-item-button {
    background-color: lightgrey;
    padding: 5px 6px;
    border-radius: 3px;
    border: 1px solid grey;
    display: inline-block;
    vertical-align: top;
    height: 32px;
    width: 32px;
    position: relative;
    top: 16px;
    margin-left: 10px;
    cursor: pointer;
}

.remove-item-icon {
    height: 20px;
    width: 20px;
    margin: 0;
}

.measurement-input-custom-override {
    background-color: red !important;

}

.style-dimension-overwrite-input {
    box-shadow: 0 0 5px grey !important;
}

.style-dimension-overwrite-left {
    box-shadow: 0 0 5px grey !important;
    background-image: linear-gradient(90deg, lightgrey, rgb(180, 180, 180)) !important;
}

.style-dimension-overwrite-right {
    box-shadow: 0 0 5px grey !important;
    background-image: linear-gradient(270deg, lightgrey, rgb(180, 180, 180)) !important;
}

.advanced-title-wrapper {
    background-color: var(--primary);
    padding: 10px 20px;
    color: white;
    margin: 0 0 20px 0;
}
.tab-strip-tab, .cover-tab-strip-tab {
    display: inline-block;
    background-color: var(--secondary);
    padding: 10px 15px;
    border: 1px solid white;
    color: white;
    cursor: pointer;
    transition: .2s ease;
    border-radius: 10px 10px 0 0;
}
.tab-strip-tab:hover, .cover-tab-strip-tab:hover {
    background-image: linear-gradient(var(--tertiary), Var(--tertiary));
}
.tab-strip-tab-changed {
    background-image: linear-gradient(darkgreen, green);
}
.tab-strip-tab-selected {
    background-image: linear-gradient(rgb(150, 150, 150), grey);
}

.weightChangeWarning {
    padding: 4px 8px;
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 5px;
    margin-top: -10px;
}

.weightChangeWarningText {
    font-size: 0.8rem;
}

.quantity-question-wrapper {
    padding-top: 20px; padding-bottom: 20px;   
}

.multiple-versions-half-wrapper {
    display: inline-block; width: 280px; padding-bottom: 30px;
}

.fsc-certified-text {
    font-size: 14px; margin-top: -30px; margin-bottom: 30px;
}

.bold {
    font-weight: bold;
}

.unfolded-doc-warning {
    color: rgb(150, 150, 150); font-size: 1rem;
}

.size-half-element-1 {
    display: inline-block; vertical-align: top;
}

.size-half-element-2 {
    padding-left: 4px; position: relative; display: inline-block; vertical-align: top;
}

.bottom-minimised {
    margin-bottom: -15px;
}

.custom-size-width {
    
}

.inline-top {
    vertical-align: top;
    display: inline-block;
}

.size-measurement-title {
    width: 50px; padding: 10px 0;
}

.size-measurement-input {
    width: 70px !important;
    border-radius: 0px !important;
	border-left: none !important;
	border-right: none !important;
}

.size-measurement-unit {
    width: 50px;
}

.measurement-wrapper-bottom {
    display: inline-block; vertical-align: top; border-radius: 3px !important;
}

.checkbox-wrapper-top {
    display: inline-block; margin: 10px 7px 3px 7px;
}

.custom-unit-padded {
    display: inline-block; margin: 10px 7px 3px 7px;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.custom-size-error-text {
    max-width: calc(100% - 50px); position: relative; top: 10px;
}

.button-h-70 {
    height: 70px;
}

.self-cover-checkbox {
    padding-bottom: 30px;
}

.noclick {
    pointer-events: none;
}

.pillow-pack-svg {
    max-height: 295px;
    max-width: 295px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.disclaimer { text-align: center; padding: 10px; margin: 20px 30px 0 30px; font-size: 0.9rem; background-color: white; color: rgb(50, 50, 50); border-radius: 10px; border: 2px solid lightgrey; }