@import url('//fonts.googleapis.com/css?family=Roboto&display=swap');

/* variables */

:root {
    --bg-color: #000;
    --text-color: #fff;
}

body .kb-wrapper h1,
body .kb-wrapper h2,
body .kb-wrapper h3,
body .kb-wrapper h4,
body .kb-wrapper h5,
body .kb-wrapper h6,
body .kb-wrapper input,
body .kb-wrapper p,
body .kb-wrapper li,
body .kb-wrapper div,
body .kb-wrapper q,
body .kb-wrapper cite,
body .kb-wrapper blockquote,
body .kb-wrapper span {
    font-family: 'Roboto', sans-serif !important;
}

body .kb-wrapper .kb-editor-placed-images-heading,
body .kb-wrapper .kb-unapproved-images-heading,
body .kb-wrapper .kb-approved-images-heading {
    font-weight: normal !important;
}

body .kb-wrapper .kb-partial-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

body .kb-wrapper .kb-nav-panel {
    display: none !important;
}

body .kb-wrapper .kb-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
}

body .kb-wrapper .kb-breadcrumb:after {
    content: "/" !important;
    display: inline-block;
    margin: 0 3px;
    position: relative !important;
    top: 0px !important;
}

body .kb-wrapper .kb-breadcrumb a {
    color: #000 !important;
}

body .kb-wrapper .kb-breadcrumb-selected {
    color: #000 !important;
    font-weight: bold;
}

body .kb-wrapper .kb-categories {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 30px !important;
}

body .kb-wrapper .kb-categories .kb-category-img {
    width: 200px !important;
    height: 168px !important;
}

body .kb-wrapper .kb-categories .kb-category {
    margin: 30px 5px !important;
    margin-bottom: 50px !important;
    border: none !important;
    margin-right: 30px !important;
}

body .kb-wrapper .kb-categories .kb-category-name {
    background: none !important;
    color: #000 !important;
    width: 100% !important;
}

body .kb-wrapper .kb-designs {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

body .kb-wrapper .kb-designs .kb-design {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 10px 5px !important;
    border: none !important;
}

body .kb-wrapper .kb-designs .kb-design-img {
    height: 210px !important;
    width: 250px !important;
}

body .kb-wrapper .kb-designs .kb-design-name {
    background: none !important;
    color: #000 !important;
    font-size: 16px !important;
    width: 100% !important;
    left: 0;
}

body .kb-wrapper .kb-designs .kb-design-img,
body .kb-wrapper .kb-categories .kb-category {
    transform: scale(1.2);
    transition: ease 0.4s;
}

body .kb-wrapper .kb-designs .kb-design-img:hover,
body .kb-wrapper .kb-categories .kb-category:hover {
    transform: scale(1.4);
}

/* customise */

body .kb-wrapper .kb-button,
body .kb-wrapper .kb-final-buttons-wrapper .kb-final-button,
body .kb-wrapper .kb-final-cta-list li a {
    background: var(--bg-color) !important;
    border: var(--bg-color) !important;
    transition: ease opacity 0.5s;
    font-weight: normal !important;
}

body .kb-wrapper .kb-button:hover,
body .kb-wrapper .kb-button:hover:not([disabled]),
body .kb-wrapper .kb-final-buttons-wrapper .kb-final-button:hover,
body .kb-wrapper .kb-final-cta-list li a:hover {
    background: var(--bg-color) !important;
    border: var(--bg-color) !important;
    opacity: 0.8 !important;
}

body .kb-wrapper .kb-customise-page .kb-preview-panel {
    width: 49% !important;
    display: inline-block !important;
    margin-right: 1% !important;
    float: right !important;
}

body .kb-wrapper .kb-customise-page .kb-preview-image,
body .kb-wrapper .kb-customise-page .kb-3d-wrapper {
    width: 100% !important;
    height: calc(100vh - 200px) !important;
    border: none !important;
    position: relative!important;
}

body .kb-wrapper .kb-3d-wrapper:after {
    bottom: 20px !important;
}

body .kb-wrapper .kb-customise-page .kb-change-design-button {
    display: none !important;
}

body .kb-wrapper .kb-customise-page .kb-change-view-button {
    background: var(--bg-color) !important;
    border: var(--bg-color) !important;
    transition: ease opacity 0.5s;
    font-weight: normal !important;
}

body .kb-wrapper .kb-customise-page .kb-change-view-button:hover {
    opacity: 0.8;
}

body .kb-wrapper .kb-customise-page .kb-customise-edit-panel {
    width: 40% !important;
    float: left !important;
    margin-top: 70px !important;
}

body .kb-wrapper .kb-customise-page .kb-customise-wizard {
    border: none !important;
    padding: 0 !important;
}

body .kb-wrapper .kb-wizard {
    overflow-x: hidden !important;
}

body .kb-wrapper .kb-wizard-step,
body .kb-wrapper .kb-wizard-form {
    padding: 0 !important;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb-active .kb-wizard-breadcrumb-inner:before,
body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb-active .kb-wizard-breadcrumb-inner:after,
body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb:after {
    content: "" !important;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb {
    flex: 1 0 1% !important;
    background: var(--bg-color) !important;
    opacity: 1 !important;
    transition: ease opacity 0.5s;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumbs .kb-wizard-breadcrumb:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumbs .kb-wizard-breadcrumb:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb:hover {
    opacity: 0.8 !important;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb.kb-wizard-breadcrumb-active {
    opacity: 0.8 !important;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb > a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 100%;
}

body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb span {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 100%;
    color: var(--text-color) !important;
    padding: 10px 0px !important;
    font-size: 13px !important;
    height: 30px!important;
}

body .kb-wrapper .kb-wizard-group-header {
    background: none !important;
    opacity: 1 !important;
    color: #000 !important;
    padding: 8px 0px !important;
    border-bottom: 1px solid var(--bg-color) !important;
}

body .kb-wrapper .kb-wizard-group-header:after {
    content: "+" !important;
    display: inline-block !important;
    transition: ease 0.5s;
    font-size: 20px;
    position: relative;
    top: -5px;
    right: 6px;
}

body .kb-wrapper .kb-wizard-group-header.kb-wizard-group-header-selected:after {
    transform: rotate(45deg) !important;
}

body .kb-wrapper .kb-customise-page .kb-preview-design-name {
    display: none !important;
}

/* colour tile pickers */

body .kb-wrapper .kb-tile-picker-base {
    margin-left: 0 !important;
}

body .kb-wrapper .kb-tile-picker-color {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 5px !important;
    margin-top: 5px !important;
}

body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-list-item {
    margin-right: 4px !important;
    margin-bottom: 3px !important;
}

body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-tile {
    margin: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    transition: ease transform 0.3s;
}

body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-tile:hover {
    transform: scale(1.2);
}

body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-tile:hover {
    transform: scale(1.2);
}

body .kb-wrapper .kb-tile-picker-color input:checked + .kb-tile-picker-tile,
body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-radio-selected {
    transform: scale(1.3);
    z-index: 1000;
}

body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-radio-selected:hover {
    transform: scale(1.4);
}

body .kb-wrapper .kb-tile-picker-radio-selected:after,
body .kb-wrapper .kb-tile-picker-radio:checked + .kb-tile-picker-tile:after {
    display: none !important;
}

/* tile pickers */

body .kb-wrapper .kb-tile-picker .kb-tile-picker-list-item {
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

body .kb-wrapper .kb-tile-picker .kb-tile-picker-tile {
    margin: 0 !important;
}

/* text editor */

body .kb-wrapper .kb-remove-text-item {
    background: none !important;
    text-indent: 0 !important;
    position: static !important;
}

body .kb-wrapper .kb-remove-text-item:before {
    content: "Remove";
}

body .kb-wrapper .kb-remove-text-item:after,
body .kb-wrapper .kb-editor-placed-text-selected:after {
    display: none !important;
}

body .kb-wrapper .kb-editor-text {
    width: calc(100% - 60px) !important;
}

body .kb-wrapper .kb-editor-font-button {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

body .kb-wrapper .kb-editor-font-button:hover {
    color: var(--text-color) !important;
}

body .kb-wrapper .kb-editor-font-button.kb-editor-font-button-selected {
    opacity: 0.8 !important;
}

body .kb-wrapper .kb-editor-info .kb-button {
    opacity: 1 !important;
}

body .kb-wrapper .kb-editor-placement-image .kb-editor-info {
    display: flex;
}

body .kb-wrapper .kb-editor-placement-image .kb-editor-info .kb-button {
    flex-grow: 1 !important;
}

/* final page */

body .kb-wrapper .kb-final-category-preview .kb-final-category-preview-inner {
    min-height: 0!important;
}

body .kb-wrapper .kb-final-category-header-wrapper,
body .kb-wrapper .kb-final-cta-header {
    border: none !important;
}

body .kb-wrapper .kb-final-category-header-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body .kb-wrapper .kb-final-cta-header {
    font-size: 16px !important;
    font-weight: bold !important;
}

body .kb-wrapper .kb-final-cta-list .kb-icon {
    display: none !important;
}

body .kb-wrapper .kb-final-cta-list {
    display: flex;
    flex-wrap: wrap;
    width: 100% !important;
}

body .kb-wrapper .kb-final-cta-list li {
    flex: 0 0 140px !important;
    display: inline-flex;
}

body .kb-wrapper .kb-final-cta-list li:nth-child(n+5) {
    display: none !important;
}

body .kb-wrapper .kb-final-cta-list li:nth-child(4) {
    margin-right: 0 !important;
}

body .kb-wrapper .kb-final-cta-list li a {
    padding: 8px 5px !important;
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    width: 100% !important;
    text-align: center;
    font-weight: normal !important;
}

body .kb-wrapper .kb-final-category-preview .kb-category-final-names,
body .kb-wrapper .kb-add-buttons {
    display: none !important;
}

body .kb-wrapper .kb-final-category-preview {
    border: none !important;
}

body .kb-wrapper .kb-final-button:link,
body .kb-wrapper .kb-final-button:visited {
    background: var(--bg-color) !important;
}

body .kb-wrapper .kb-final-category-preview .kb-final-category-preview-inner {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap !important;
}

body .kb-wrapper .kb-basket-item-double-col {
    flex: 0 0 33% !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

body .kb-wrapper .kb-basket-item-double-col .kb-final-overlay-wrap {
    flex: 0 0 50% !important;
}

body .kb-wrapper .kb-basket-item-double-col .kb-final-overlay-wrap img {
    width: 100% !important;
}

body .kb-wrapper .kb-final-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 10px) !important;
    height: 50px !important;
}

body .kb-wrapper .kb-final-buttons-wrapper .kb-final-button {
    flex: 0 0 calc(50% - 3px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px !important;
}

body .kb-wrapper .kb-final-buttons-wrapper .kb-final-button:nth-child(2) {
    margin-right: 3px !important;
}

body .kb-wrapper .kb-final-buttons-wrapper .kb-final-button:nth-child(3) {
    margin-left: 3px !important;
}

body .kb-wrapper .kb-final-buttons-wrapper .kb-final-button:last-child {
    flex: 1 0 100% !important;
    margin-top: 6px !important;
}

@media all and (max-width: 800px) {
    html body .kb-wrapper .kb-basket-item-double-col {
        flex: 0 0 50% !important;
    }
}

@media all and (max-width: 400px) {
    html body .kb-wrapper .kb-basket-item-double-col {
        flex: 0 0 100% !important;
    }
}

@media all and (max-width: 499px) {
    body .kb-wrapper .kb-final-cta-list li {
        flex: 0 0 50% !important;
        margin: 0 !important;
        border: 1px solid #fff !important;
        box-sizing: border-box !important;
    }
}

/* sliders */

body .kb-wrapper .kb-wizard-form-field-type-patterntransform {
    padding: 0 12px !important;
}

body .kb-wrapper .noUi-background {
    background: #d7dcdf !important;
    border-radius: 30px;
}

body .kb-wrapper .noUi-horizontal .noUi-handle {
    border-radius: 100% !important;
    width: 20px !important;
    height: 20px !important;
    background: #2c3e50 !important;
    top: -6px !important;
}

body .kb-wrapper .noUi-horizontal {
    height: 10px !important;
}

body .kb-wrapper .kb-pattern-transform-slider label {
    position: relative !important;
    left: 0px !important;
}

/* quote form styling */

body .kb-wrapper .kb-form-quoterequest {
    width: 40% !important;
    margin-left: 30% !important;
    margin-top: 30px !important;
}

body .kb-wrapper .kb-form-quoterequest * {
    font-size: 16px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-custom-form-default-field {
    margin-bottom: 25px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-validation-message {
    display: none !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-custom-form-label-wrap label {
    font-size: 16px !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-custom-form-default-field input.ng-valid:not(form):not([ng-form]):not(div),
body .kb-wrapper .kb-form-quoterequest .kb-custom-form-default-field input.ng-invalid,
body .kb-wrapper .kb-form-quoterequest .kb-custom-form-default-field textarea.ng-valid:not(form):not([ng-form]):not(div),
body .kb-wrapper .kb-form-quoterequest .kb-custom-form-default-field textarea.ng-invalid {
    border: 1px solid rgb(201, 201, 201) !important;
    border-color: rgb(201, 201, 201) !important;
    box-shadow: none !important;
    border-radius: 3px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-custom-form-default-field input {
    font-size: 15px !important;
    padding: 10px 0px !important;
    padding-left: 4px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-custom-form-default-field textarea {
    font-size: 15px !important;
    padding: 10px 0px !important;
    padding-left: 8px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-ff-agree {
    margin-bottom: 10px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-ff-agree h4:after {
    color: #953b39 !important;
    content: "*" !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-ff-agree h4 {
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-ff-agree .kb-custom-form-label-wrap,
body .kb-wrapper .kb-form-quoterequest .kb-ff-agree .kb-custom-form-field-wrap {
    width: auto !important;
    display: inline-block !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-ff-agree .kb-custom-form-label-wrap label {
    position: relative;
    top: 4px;
    margin-right: 10px !important;
}

body .kb-wrapper .kb-form-quoterequest .kb-button-popup-form-submit {
    padding: 10px !important;
}

body .kb-wrapper .kb-pattern-transform-slider-control {
    padding: 0px 12px!important;
}

@media all and (max-height: 800px) and (min-width: 980px) {
    body.kb-hosted-spaces-page .kb-wrapper .kb-customise-page .kb-3d-wrapper {
        height: calc(100vh - 200px)!important;
    }
}