.checkout-modal-form input[type="text"],
 .checkout-modal-form input[type="email"] {

border: 1px solid;
}

.pp-configurator--modal-popup--close {
  position: absolute !important;

}

.wbp-select{
        width: 200px;
        margin-top: 15px;
    }
    .checkout-modal-form {
        display: flex;
        margin-right: -10px;
        margin-left: -10px;
        padding-left: 0;
        margin-bottom: 50px;
    }
    .checkout-modal-form div{
        flex-grow: 1;
        padding: 0 10px;
    }
    .checkout-modal-form input {
        width: 100%;
        margin-right: 0;
    }
    .checkout-modal-form input.invalid {
        box-shadow: 0px 0px 0px 1px red;
    }
    .pp-btn.pp-sending {
        font-size: 0;
        pointer-events: none;
    }
    .pp-btn:not(.pp-sending) .pp-spinner {
        display: none;
    }
    .pp-btn.pp-sending .pp-spinner {
        position: absolute;
        width: 30px;
        height: 30px;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px dashed white;
        animation: mail-loading 1s infinite;
        z-index: 2;
    }

    @keyframes mail-loading {
        0%{
            transform: rotate(0);
        }
        100%{
            transform: rotate(720deg);
        }
    }

    .pp-configurator--modal-popup--preview {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        border-top: 1px solid #e3e3ea;
        border-bottom: 1px solid #e3e3ea;
        margin: -31px -30px 0 -30px;
    }

    .pp-configurator--modal-popup--preview.pp-big-preview {
        display: block;
    }

    .pp-configurator--modal-popup--preview.pp-big-preview .pp-configurator--modal-popup--preview-col {
        width: 100%;
    }

    .pp-configurator--modal-popup--preview-col {
        width: 50%;
        max-height: 500px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 30px;
    }

    .pp-configurator--modal-popup--preview-col:nth-of-type(2) {
        border-left: 1px solid #e3e3ea;
    }

    .pp-configurator--modal-popup--preview-col img {
        display: block;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }


    .cropper-dashed {
        display: none;
    }

    .cropper-view-box {
        position: relative;
    }

    .cropper-view-box--line {
        position: absolute;
        top: 0;
        width: 1px;
        height: 100%;
        border-right: 1px dashed white;
        z-index: 10;
    }

    .cropper-view-box--line:last-child {
        display: none;
    }

    .webi-configurator .cms-block-product-heading,
        .webi-configurator .product-detail-price-container,
        .webi-configurator .product-detail-tax-container {
            display: none !important;
        }

        .pp-configurator--search {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .pp-configurator--search-wrapper {
            position: relative;
            z-index: 5;
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .pp-configurator--search .pp-configurator--field-input {
            width: calc(100% - 40px);
            margin: 0 0 0 0;
        }

        .pp-configurator--search-btn {
            width: 40px;
            min-width: 40px;
            height: 40px;
            background-color: #e9e9f0;
            color: #01455b;
            font-size: 16px;
            transition: 0.3s;
        }

        .pp-configurator--search-btn:hover {
            color: #ffffff;
            background-color: #01455b;
        }

        .pp-configurator--search-result {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: auto;
            max-height: 275px;
            overflow: auto;
            background-color: white;
            box-shadow: 0 5px 10px rgba(20, 53, 72, 0.05);
            border: 1px solid #f4f4f4;
            border-radius: 0 0 5px 5px;
            padding: 5px 0;
        }

        .pp-configurator--search-result::-webkit-scrollbar {
            width: 6px;
        }

        .pp-configurator--search-result::-webkit-scrollbar-track {
            -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
            background-color: #e9e9f0;
            border-radius: 5px;
        }

        .pp-configurator--search-result::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #00698b !important;
        }


        .pp-configurator--search-result--item {
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 5px 10px;
        }

        .pp-configurator--search-result--item:hover {
            background-color: #e9e9f0;
        }

        .pp-configurator--search-result--item-preview {
            width: 50px;
            min-width: 50px;
            height: 50px;
            margin: 0 10px 0 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .pp-configurator--search-result--item-name {
            font-size: 14px;
            color: #01455b;
            font-weight: 400;
        }

        .pp-service--body{
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
            }
            .pp-service--body .pp-configurator--sub-accordeon--body{
                padding: 0 10px;
            }
            .pp-service--body .pp-configurator--layer-detail--container{
                margin: 2px 0 0 0;
            }

            .pp-configurator--socket{
                margin-right: auto;
                margin-left: auto;
            }

            .pp-configurator--sockets.horizontal .pp-configurator--sockets-col{
                align-items: center;
            }

            .pp-configurator .pp-configurator--socket-list--item{
                margin: 5px auto -10px auto;
            }

            @media (max-width: 768px) {
                .pp-service--body{
                    display: block;
                }
                .pp-service--body .pp-configurator--sub-accordeon--body{
                    padding: 10px;
                }

                .pp-service--head{
                    margin-top: 15px;
                }
            }
            .pp-configurator--canvas-sockets:before,
            .pp-configurator--canvas-sockets:after {
                display: none;
            }

            .pp-configurator--canvas-socket{
                width: 36px;
                height: 36px;
            }

            .pp-configurator--canvas-sockets--line-horizontal {
                padding: 4px;
                position: absolute;
                bottom: 50%;
                right: 100%;
                width: 500vw;
                color: white;
                font-size: 14px;
                text-align: right;
            }
            .pp-configurator--canvas-sockets--line-vertical {
                padding: 4px;
                position: absolute;
                color: white;
                font-size: 12px;
                text-align: right;
                top: 100%;
                left: 50%;
                height: 500vh;
                z-index: 2;
            }
            .pp-configurator--canvas-socket {
                background-size: 70%;
            }

            .pp-configurator--canvas-sockets--line-horizontal:before,
            .pp-configurator--canvas-sockets--line-vertical:before {
                text-shadow: 1px 1px 0px black, -1px -1px 0px black, -1px 0px 0px black, 0px -1px 0px black, 1px 0px 0px black, 0px 1px 0px black;
            }

            .pp-configurator--canvas-fake.wbp-small .pp-configurator--canvas-sockets--line-horizontal:before,
            .pp-configurator--canvas-fake.wbp-small .pp-configurator--canvas-sockets--line-vertical:before {
                font-size: 20px;
            }

            .pp-configurator--canvas-fake.wbp-small .pp-configurator--canvas-sockets--line-horizontal:after,
            .pp-configurator--canvas-fake.wbp-small .pp-configurator--canvas-sockets--line-vertical:after {
                border-width: 3px;
            }

            .pp-configurator--canvas-sockets--line-horizontal:before {
                content: attr(data-ox) " mm";
            }
            .pp-configurator--canvas-sockets--line-vertical:before {
                content: attr(data-oy) " mm";
            }

            .pp-configurator--canvas-sockets--line-horizontal:after,
            .pp-configurator--canvas-sockets--line-vertical:after {
                content: '';
                position: absolute;
                left: 0;
                background-color: white;
                z-index: -1;
            }

            .pp-configurator--canvas-sockets--line-horizontal:after{
                width: 100%;
                bottom: 0;
                height: 0px;
                border-bottom: 1px dashed black;
            }
            .pp-configurator--canvas-sockets--line-vertical:after {
                height: 100%;
                top: 0;
                width: 0px;
                left: -1px;
                border-left: 1px dashed black;
            }

            .pp-configurator--layers .pp-configurator--layer.active{
                background-color: #01455b;
            }
            .pp-configurator--layers .pp-configurator--layer.active:after{
                background-color: #01455b;
                color: white;
                padding: 1px;
            }

            .pp-configurator--canvas-img img{
                max-height: calc(100% + 1px);
            }
            .pp-configurator--modal-popup--ctrl.pp-configurator--modal-popup--ctrl_custom {
                justify-content: flex-end;
            }

            .pp-configurator--modal-popup--ctrl.pp-configurator--modal-popup--ctrl_custom .pp-btn {
                width: 220px;
                margin-left: 20px;
            }

            .pp-configurator--body * {
                user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }

            .pp-configurator--canvas-fake--wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                pointer-events: none;
            }

            .pp-configurator--canvas-fake {
                transform-origin: 50% 0;
                z-index: 100;
                overflow: hidden;
                position: relative;
            }

            /*.pp-configurator--canvas-layer
            {*/
            /*    border-top: 2px solid #01455b;*/
            /*    border-bottom: 2px solid #01455b;*/
            /*} */

            /*.pp-configurator--canvas-layer:first-child
            {*/
            /*    border-left: 2px solid #01455b;*/
            /*} */

            /*.pp-configurator--canvas-layer:last-child
            {*/
            /*    border-right: 2px solid #01455b;*/
            /*} */

            .pp-configurator--canvas-layer:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                box-sizing: border-box;
                border-top: 2px solid #01455b;
                border-bottom: 2px solid #01455b;
            }


            .pp-configurator--canvas-layer:first-child:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                box-sizing: border-box;
                border-left: 2px solid #01455b;
            }

            .pp-configurator--canvas-layer:last-child:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                box-sizing: border-box;
                border-right: 2px solid #01455b;
            }

            .pp-service--head {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 40px;
            }

            .pp-service--btn {
                margin-right: 15px;
                padding: 0;
                color: #01455b;
                transition: 0.3s;
                border-bottom: 2px solid transparent;
            }

            .pp-service--btn.active {
                color: #5f7285;
                border-bottom-color: #5f7285;
            }

            .pp-service--btn:hover {
                color: #5f7285;
            }

            .pp-configurator--canvas-socket.round,
            .pp-configurator--socket.round {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-image: none;
            }

            .pp-configurator--canvas-sockets {
                pointer-events: auto;
                /*transform-origin: 0 100%;*/
                transform-origin: 50%;
            }

            .pp-configurator--canvas-sockets.disable {
                pointer-events: none;
            }

            .pp-configurator--canvas-sockets.round {
                background-color: transparent;
            }
            .pp-configurator--canvas-socket.round {
                background-color: #00698b;
                position: relative;
            }
            .pp-configurator--canvas-sockets:not(.disable) .pp-configurator--canvas-socket.round {
                animation: socket-blink 0.75s infinite;
            }
            .pp-configurator--canvas-wrapper:not(.to-screenshot) .pp-configurator--canvas-sockets:not(.disable) .pp-configurator--canvas-socket.round:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                box-sizing: border-box;
                border: 2px solid white;
                animation: socket 2s infinite;
                z-index: -1;
            }
            .pp-configurator--canvas-wrapper:not(.to-screenshot) .pp-configurator--canvas-fake.wbp-small .pp-configurator--canvas-sockets:not(.disable) .pp-configurator--canvas-socket.round:before {
                animation: socket2 2s infinite;
            }

            @keyframes socket {
                0%{
                    transform: scale(1);
                }
                50%{
                    transform: scale(1.5);
                }
                100%{
                    transform: scale(2.2);
                    opacity: 0;
                }
            }

            @keyframes socket-blink {
                0%{
                    background-color: #ffffff;
                }
                100%{
                    background-color: #00698b;
                }
            }

            @keyframes socket2 {
                0%{
                    transform: scale(1);
                }
                100%{
                    transform: scale(6);
                    opacity: 0;
                }
            }

            .cropper-bg {
                background-image: none !important;
            }

            .input-focused button,
            .input-focused a {
                pointer-events: none;
            }

            .pp-configurator--canvas {
                /*border-left: 2px solid #01455b;*/
                /*border-right: 2px solid #01455b;*/
                margin-left: 0;
                margin-right: 0;
                overflow: hidden;
            }

            /*.to-screenshot .pp-configurator--canvas-layer:before

            {*/
            /*    display: none!important;*/
            /*}  */

            .pp-configurator--socket-list {

            }

            .pp-configurator--socket-list--item {
                background-color: #e9e9f0;
                border-radius: 3px;
                padding: 5px 10px 5px 18px;
                margin: 5px auto;
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                color: #01455b;
            }

            .pp-configurator--socket-type {
                text-transform: capitalize;
            }

            .pp-configurator--socket-remove {
                width: 30px;
                height: 30px;
                margin: 0 0 0 auto;
            }

            @media (max-width: 768px) {
                .pp-configurator--edit .pp-configurator--field-label {
                    white-space: nowrap;
                    font-size: 11px;
                }
            }

            .pp-configurator--modal-popup--preview-img {

            }

            .pp-configurator--modal-popup--preview-img img {
                display: block;
                width: 100%;
                max-height: 500px;
                object-fit: contain;
            }

            .pp-configurator--canvas-wrapper.wbp-zoom .pp-configurator--canvas-sockets{
                transform: translateX(-50%) translateY(50%) scale(1) !important;
            }
            .pp-configurator--canvas-wrapper.wbp-zoom .pp-configurator--canvas,
            .pp-configurator--canvas-wrapper.wbp-zoom .pp-configurator--canvas-fake{
                transform: scale(1) !important;
            }
            .pp-configurator--canvas-wrapper.wbp-zoom {
                transform: scale(1.2);
                height: auto!important;
                position: relative;
                z-index: 3001;
                pointer-events: none;
            }

            .pp-configurator--canvas-wrapper.wbp-zoom .pp-configurator--canvas,
            .pp-configurator--canvas-wrapper.wbp-zoom .pp-configurator--canvas-fake{
                pointer-events: auto;
            }

            .pp-configurator--edit-btn.wbp-zoom,
            .pp-configurator--tabs-btn.wbp-zoom{
                position: fixed;
                top: 0;
                right: 0;
                z-index: 3002;
                background-color: #ffffff;
                padding: 10px;
            }

            .wbp-zoom--layout{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 3000;
                background-color: rgba(0,0,0,0.8);
            }


            @media (max-width: 768px) {
                .pp-configurator.wbp-zoom .pp-configurator--body-inner {
                    transform: scale(1.5);
                    position: relative;
                    z-index: 3000;
                    transform-origin: 0 0;
                }
                /*.pp-configurator.wbp-zoom .pp-configurator--fields,*/
                /*.pp-configurator.wbp-zoom .pp-configurator--edit{*/
                /*    display: none;*/
                /*}*/
                .pp-configurator.wbp-zoom .pp-configurator--fields,
                .pp-configurator.wbp-zoom .pp-configurator--edit{
                    display: none;
                }
                .pp-configurator--canvas-wrapper.wbp-zoom {
                    transform: scale(1);
                    transform-origin: 0 0;
                }

                .pp-configurator.wbp-zoom .pp-configurator--body.pp-configurator--body_general{
                    overflow: auto;
                }

                .pp-configurator.wbp-zoom .pp-configurator--body-inner{
                    overflow: auto;
                }

                .pp-configurator--edit-btn{
                    margin-right: 2px;
                }
                .pp-configurator--edit .pp-configurator--field {
                    width: calc(100% - 150px);
                }

                .pp-configurator--canvas-wrapper.wbp-zoom {
                    pointer-events: auto;
                }
            }

            .pp-configurator--canvas-wrapper.to-screenshot {
                height: auto !important;
                overflow: visible;
            }

            .pp-configurator--canvas-wrapper.three-platten,
            .pp-configurator--canvas-wrapper.two-platten {
                height: auto !important;
                overflow: visible;
            }

            .pp-configurator--canvas-wrapper.three-platten .pp-configurator--canvas-sockets,
            .pp-configurator--canvas-wrapper.two-platten .pp-configurator--canvas-sockets {
                display: none;
            }

            .pp-configurator--canvas-wrapper.three-platten .pp-configurator--canvas,
            .pp-configurator--canvas-wrapper.two-platten .pp-configurator--canvas {
                /*transform: scale(0.9)!important;*/
                transform-origin: 50% 0;
                overflow: visible;
            }

            .pp-configurator--canvas-wrapper.two-platten .pp-configurator--canvas-layer:nth-of-type(2) {
                transform: skewY(30deg) scaleX(0.5);
                transform-origin: 0 0;
            }

            .pp-configurator--canvas-wrapper.three-platten .pp-configurator--canvas-layer:nth-of-type(1) {
                transform: skewY(-30deg) scaleX(0.5);
                transform-origin: 100% 0;
            }

            .pp-configurator--canvas-wrapper.three-platten .pp-configurator--canvas-layer:nth-of-type(3) {
                transform: skewY(30deg) scaleX(0.5);
                transform-origin: 0 0;
            }

            .pp-configurator--canvas-wrapper.to-screenshot .pp-configurator--canvas-fake {
                /*margin: 0 15px 0 5px;*/
            }

            .pp-configurator--body.hide-block .pp-configurator--body-inner {
                margin: 0 auto;
            }

            .pp-configurator--body.hide-block {
                position: relative;
                overflow: hidden;
            }

            .pp-configurator--body.hide-block:after {
                content: '';
                position: absolute;
                width: 80px;
                height: 80px;
                border: 5px dashed #01455b;
                border-radius: 50%;
                top: calc(50% - 40px);
                left: calc(50% - 40px);
                z-index: 2;
                animation: rotate-loader 1s infinite linear;
            }

            @keyframes rotate-loader {
                0% {
                    transform: rotate(0);
                }
                100% {
                    transform: rotate(720deg);
                }
            }

            .pp-configurator--body.hide-block .pp-configurator--body-inner {
                opacity: 0;
                max-height: 500px;
            }

            .pp-configurator--canvas-wrapper.to-screenshot .pp-configurator--canvas-fake {
                transform: none !important;
            }

            .pp-configurator--canvas-wrapper.to-screenshot .pp-configurator--canvas {
                transform: none !important;
            }

            input[type="number"]::-webkit-outer-spin-button,
            input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: none;
            / / Yeah, yeah everybody write about it
            }

            input[type='number'],
            input[type="number"]:hover,
            input[type="number"]:focus {
                appearance: none !important;
                -moz-appearance: textfield !important;
                user-select: auto;
                -moz-user-select: auto;
                -webkit-user-select: auto;
                -ms-user-select: auto;
            }

            .pp--result-link {
                color: #00698b;
                font-size: 15px;
                font-weight: 600;
                font-style: normal;
                text-decoration: underline;
                transition: 0.3s;
                margin-top: 15px;
            }

            .pp--result-link:hover {
                color: #01455b;
                text-decoration: none;
            }

            body.overflow {
                overflow: hidden;
            }

            * {
                box-sizing: border-box;
            }

            h1, h2, h3, h4, p, a, img, ul, li {
                padding: 0;
                margin: 0;
                text-decoration: none;
                list-style-type: none;
                color: inherit;
            }

            header, section, footer {
                width: 100%;
                min-width: 319px;
                margin: 0 auto;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                position: relative;
            }

            .webi-configurator textarea,
            .webi-configurator button,
            .webi-configurator input {
                position: relative;
                box-sizing: border-box;
                border: none;
                outline: none;
                border-radius: 0;
            }


            .webi-configurator textarea::-webkit-input-placeholder,
            .webi-configurator button::-webkit-input-placeholder,
            .webi-configurator input::-webkit-input-placeholder {
                color: inherit;
            }
            .webi-configurator textarea::-moz-placeholder,
            .webi-configurator button::-moz-placeholder,
            .webi-configurator input::-moz-placeholder {
                color: inherit;
            }
            .webi-configurator textarea:-moz-placeholder,
            .webi-configurator button:-moz-placeholder,
            .webi-configurator input:-moz-placeholder {
                color: inherit;
            }
            .webi-configurator textarea:-ms-input-placeholder,
            .webi-configurator button:-ms-input-placeholder,
            .webi-configurator input:-ms-input-placeholder {
                color: inherit;
            }

            .webi-configurator button {
                cursor: pointer;
            }